stubbed out all Food GenericModalForms

This commit is contained in:
smilerz
2021-08-30 15:05:54 -05:00
parent a1d1cbac5d
commit 52abba1f16
21 changed files with 155595 additions and 385 deletions

View File

@@ -1,8 +1,11 @@
<template>
<div id="app" style="margin-bottom: 4vh">
<generic-modal-form
:model="this_model.name"
:action="this_action"/>
:model="this_model"
:action="this_action"
:item1="foods[5]"
:item2="undefined"
:show="true"/> <!-- TODO make this based on method -->
<generic-split-lists
:list_name="this_model.name"
@reset="resetList"
@@ -59,9 +62,8 @@
<!-- TODO initial selection isn't working and I don't know why -->
<generic-multiselect
@change="this_item.recipe=$event.val"
label="name"
:initial_selection="[this_item.recipe]"
search_function="listRecipes"
:model="recipe"
:multiple="false"
:sticky_options="[{'id': null,'name': $t('None')}]"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
@@ -74,7 +76,7 @@
<label for="id_food_category_edit">{{ this.$t('Shopping_Category') }}</label>
<generic-multiselect
@change="this_item.supermarket_category=$event.val"
label="name"
:model="models.SHOPPING_CATEGORY"
:initial_selection="[this_item.supermarket_category]"
search_function="listSupermarketCategorys"
:multiple="false"
@@ -103,29 +105,25 @@
{{ this.$t("move_selection", {'child': this_item.name}) }}
<generic-multiselect
@change="this_item.target=$event.val"
label="name"
search_function="listFoods"
:model="this_model"
:multiple="false"
:sticky_options="[{'id': 0,'name': $t('Root')}]"
:tree_api="true"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
:placeholder="this.$t('Search')">
>
</generic-multiselect>
</b-modal>
<!-- merge modal -->
<b-modal class="modal"
:id="'id_modal_food_merge'"
:title="this.$t('Merge_Food')"
:title="this.$t('merge_title', {'type': 'Food'})"
:ok-title="this.$t('Merge')"
:cancel-title="this.$t('Cancel')"
@ok="mergeFood(this_item.id, this_item.target.id)">
{{ this.$t("merge_selection", {'source': this_item.name, 'type': this.$t('food')}) }}
<generic-multiselect
@change="this_item.target=$event.val"
label="name"
search_function="listFoods"
:model="this_model"
:multiple="false"
:tree_api="true"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
:placeholder="this.$t('Search')">
</generic-multiselect>
@@ -141,7 +139,7 @@ import {BootstrapVue} from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import {ApiMixin, CardMixin, ToastMixin} from "@/utils/utils";
import {CardMixin, ToastMixin, genericAPI} from "@/utils/utils";
import {Models, Actions} from "@/utils/models";
import {StandardToasts} from "@/utils/utils";
@@ -154,12 +152,13 @@ Vue.use(BootstrapVue)
export default {
name: 'FoodListView',
mixins: [ApiMixin, CardMixin, ToastMixin],
mixins: [CardMixin, ToastMixin],
components: {GenericHorizontalCard, GenericMultiselect, GenericSplitLists, GenericModalForm},
data() {
return {
this_model: Models.FOOD,
this_action:'',
this_model: Models.FOOD, //TODO: mounted method to calcuate
this_action: Actions.UPDATE, //TODO: based on what we are doing
models: Models,
foods: [],
foods2: [],
load_more_left: true,
@@ -251,7 +250,8 @@ export default {
getFoods: function(params, callback) {
let column = params?.column ?? 'left'
this.genericAPI(this.this_model, Actions.LIST, params).then((result) => {
// TODO: does this need to be a callback?
genericAPI(this.this_model, Actions.LIST, params).then((result) => {
if (result.data.results.length){
if (column ==='left') {
this.foods = this.foods.concat(result.data.results)
@@ -266,20 +266,21 @@ export default {
}
// return true if total objects are still less than the length of the list
callback(result.data.count < (column==="left" ? this.foods.length : this.foods2.length))
}).catch((err) => {
console.log(err)
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
})
},
getThis: function(id, callback){
return this.genericAPI(this.this_model, Actions.FETCH, {'id': id})
return genericAPI(this.this_model, Actions.FETCH, {'id': id})
},
saveFood: function () {
let food = {...this.this_item}
food.supermarket_category = this.this_item.supermarket_category?.id ?? null
food.recipe = this.this_item.recipe?.id ?? null
if (!food?.id) { // if there is no item id assume it's a new item
this.genericAPI(this.this_model, Actions.CREATE, food).then((result) => {
genericAPI(this.this_model, Actions.CREATE, food).then((result) => {
// place all new foods at the top of the list - could sort instead
this.foods = [result.data].concat(this.foods)
// this creates a deep copy to make sure that columns stay independent
@@ -294,7 +295,7 @@ export default {
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
})
} else {
this.genericAPI(this.this_model, Actions.UPDATE, food).then((result) => {
genericAPI(this.this_model, Actions.UPDATE, food).then((result) => {
this.refreshObject(food.id)
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
}).catch((err) => {
@@ -305,7 +306,7 @@ export default {
this.this_item = {...this.blank_item}
},
moveFood: function (source_id, target_id) {
this.genericAPI(this.this_model, Actions.MOVE, {'source': source_id, 'target': target_id}).then((result) => {
genericAPI(this.this_model, Actions.MOVE, {'source': source_id, 'target': target_id}).then((result) => {
if (target_id === 0) {
let food = this.findCard(source_id, this.foods) || this.findCard(source_id, this.foods2)
this.foods = [food].concat(this.destroyCard(source_id, this.foods)) // order matters, destroy old card before adding it back in at root
@@ -326,7 +327,7 @@ export default {
})
},
mergeFood: function (source_id, target_id) {
this.genericAPI(this.this_model, Actions.MERGE, {'source': source_id, 'target': target_id}).then((result) => {
genericAPI(this.this_model, Actions.MERGE, {'source': source_id, 'target': target_id}).then((result) => {
this.foods = this.destroyCard(source_id, this.foods)
this.foods2 = this.destroyCard(source_id, this.foods2)
this.refreshObject(target_id)
@@ -343,7 +344,7 @@ export default {
'root': food.id,
'pageSize': 200
}
this.genericAPI(this.this_model, Actions.LIST, options).then((result) => {
genericAPI(this.this_model, Actions.LIST, options).then((result) => {
parent = this.findCard(food.id, col === 'left' ? this.foods : this.foods2)
if (parent) {
Vue.set(parent, 'children', result.data.results)
@@ -362,7 +363,7 @@ export default {
'pageSize': 200
}
this.genericAPI(Models.RECIPE, Actions.LIST, options).then((result) => {
genericAPI(Models.RECIPE, Actions.LIST, options).then((result) => {
parent = this.findCard(food.id, col === 'left' ? this.foods : this.foods2)
if (parent) {
Vue.set(parent, 'recipes', result.data.results)
@@ -376,7 +377,6 @@ export default {
})
},
refreshObject: function(id){
console.log('refresh object', id)
this.getThis(id).then(result => {
this.refreshCard(result.data, this.foods)
this.refreshCard({...result.data}, this.foods2)
@@ -393,7 +393,7 @@ export default {
this.this_item.icon = icon
},
deleteThis: function(id, model) {
this.genericAPI(this.this_model, Actions.DELETE, {'id': id}).then((result) => {
genericAPI(this.this_model, Actions.DELETE, {'id': id}).then((result) => {
this.foods = this.destroyCard(id, this.foods)
this.foods2 = this.destroyCard(id, this.foods2)
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)

View File

@@ -157,7 +157,7 @@
<generic-multiselect
@change="this_item.target=$event.val"
label="name"
search_function="listKeywords"
:models="models.KEYWORD"
:multiple="false"
:sticky_options="[{'id': 0,'name': $t('Root')}]"
:tree_api="true"
@@ -175,8 +175,7 @@
{{ this.$t("merge_selection", {'source': this_item.name, 'type': this.$t('keyword')}) }}
<generic-multiselect
@change="this_item.target=$event.val"
label="name"
search_function="listKeywords"
:model="models.KEYWORD"
:multiple="false"
:tree_api="true"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
@@ -213,6 +212,7 @@ import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-group
// end move with generic modals
Vue.use(BootstrapVue)
import {Models} from "@/utils/models";
export default {
name: 'KeywordListView',
@@ -232,6 +232,7 @@ export default {
return {
keywords: [],
keywords2: [],
models: Models,
show_split: false,
search_input: '',
search_input2: '',

View File

@@ -195,7 +195,7 @@
<b-input-group class="mt-2">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_books"
:initial_selection="settings.search_books"
search_function="listRecipeBooks" label="name"
:model="models.RECIPE_BOOK"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
v-bind:placeholder="$t('Books')" :limit="50"></generic-multiselect>
<b-input-group-append>
@@ -282,6 +282,7 @@ import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
import {ResolveUrlMixin} from "@/utils/utils";
import {Models} from "@/utils/models";
import LoadingSpinner from "@/components/LoadingSpinner"; // is this deprecated?
@@ -328,6 +329,7 @@ export default {
pagination_count: 0,
random_search: false,
models: Models
}
},
@@ -353,7 +355,7 @@ export default {
this.loadMealPlan()
// this.loadRecentlyViewed()
// this.refreshData(false) // this gets triggered when the cookies get loaded
this.refreshData(false) // this gets triggered when the cookies get loaded
})
this.$i18n.locale = window.CUSTOM_LOCALE