cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #846 from smilerz/food_tree

Browse Source 
Food tree
This commit is contained in:
vabene1111
2021-09-04 17:47:10 +02:00
committed by GitHub
parent a9ee504f06 ac08ede464
commit d6e0faf7f4
64 changed files with 3813 additions and 17465 deletions
Download Patch File Download Diff File Expand all files Collapse all files

358
vue/src/apps/FoodListView/FoodListView.vue Normal file
View File

@ -0,0 +1,358 @@
<template>
<div id="app" style="margin-bottom: 4vh">
<!-- v-if prevents component from loading before this_model has been assigned -->
<generic-modal-form v-if="this_model"
:model="this_model"
:action="this_action"
:item1="this_item"
:item2="this_target"
:show="show_modal"
@finish-action="finishAction"/>
<generic-split-lists v-if="this_model"
:list_name="this_model.name"
@reset="resetList"
@get-list="getItems"
@item-action="startAction"
>
<template v-slot:cards-left>
<generic-horizontal-card
v-for="i in items_left" v-bind:key="i.id"
:item=i
:item_type="this_model.name"
:draggable="true"
:merge="true"
:move="true"
@item-action="startAction($event, 'left')"
>
<!-- foods can also be a recipe, show link to the recipe if it exists -->
<template v-slot:upper-right>
<b-button v-if="i.recipe" v-b-tooltip.hover :title="i.recipe.name"
class=" btn fas fa-book-open p-0 border-0" variant="link" :href="i.recipe.url"/>
</template>
</generic-horizontal-card>
</template>
<template v-slot:cards-right>
<generic-horizontal-card v-for="i in items_right" v-bind:key="i.id"
:item=i
:item_type="this_model.name"
:draggable="true"
:merge="true"
:move="true"
@item-action="startAction($event, 'right')"
>
<!-- foods can also be a recipe, show link to the recipe if it exists -->
<template v-slot:upper-right>
<b-button v-if="i.recipe" v-b-tooltip.hover :title="i.recipe.name"
class=" btn fas fa-book-open p-0 border-0" variant="link" :href="i.recipe.url"/>
</template>
</generic-horizontal-card>
</template>
</generic-split-lists>
</div>
</template>
<script>
import Vue from 'vue'
import {BootstrapVue} from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import {CardMixin, ToastMixin, ApiMixin} from "@/utils/utils";
import {StandardToasts} from "@/utils/utils";
import GenericSplitLists from "@/components/GenericSplitLists";
import GenericHorizontalCard from "@/components/GenericHorizontalCard";
import GenericModalForm from "@/components/Modals/GenericModalForm";
Vue.use(BootstrapVue)
export default {
name: 'FoodListView', // TODO: make generic name
mixins: [CardMixin, ToastMixin, ApiMixin],
components: {GenericHorizontalCard, GenericSplitLists, GenericModalForm},
data() {
return {
// this.Models and this.Actions inherited from ApiMixin
items_left: [],
items_right: [],
load_more_left: true,
load_more_right: true,
this_model: undefined,
this_action: undefined,
this_item: {},
this_target: {},
show_modal:false
}
},
mounted() {
this.this_model = this.Models.FOOD //TODO: mounted method to calcuate
},
methods: {
// this.genericAPI inherited from ApiMixin
resetList: function(e) {
if (e.column === 'left') {
this.items_left = []
} else if (e.column === 'right') {
this.items_right = []
}
},
startAction: function(e, param) {
let source = e?.source ?? {}
let target = e?.target ?? undefined
this.this_item = source
this.this_target = target
switch (e.action) {
case 'delete':
this.this_action = this.Actions.DELETE
this.show_modal = true
break;
case 'new':
this.this_action = this.Actions.CREATE
this.show_modal = true
break;
case 'edit':
this.this_item = e.source
this.this_action = this.Actions.UPDATE
this.show_modal = true
break;
case 'move':
if (target == null) {
this.this_item = e.source
this.this_action = this.Actions.MOVE
this.show_modal = true
} else {
this.moveThis(source.id, target.id)
}
break;
case 'merge':
if (target == null) {
this.this_item = e.source
this.this_action = this.Actions.MERGE
this.show_modal = true
} else {
this.mergeThis(e.source.id, e.target.id)
}
break;
case 'get-children':
if (source.show_children) {
Vue.set(source, 'show_children', false)
} else {
this.getChildren(param, source)
}
break;
case 'get-recipes':
if (source.show_recipes) {
Vue.set(source, 'show_recipes', false)
} else {
this.getRecipes(param, source)
}
break;
}
},
finishAction: function(e) {
let update = undefined
if (e !== 'cancel') {
switch(this.this_action) {
case this.Actions.DELETE:
this.deleteThis(this.this_item.id)
break;
case this.Actions.CREATE:
this.saveThis(e.form_data)
break;
case this.Actions.UPDATE:
update = e.form_data
update.id = this.this_item.id
this.saveThis(update)
break;
case this.Actions.MERGE:
this.mergeThis(this.this_item.id, e.form_data.target)
break;
case this.Actions.MOVE:
this.moveThis(this.this_item.id, e.form_data.target)
break;
}
}
this.clearState()
},
getItems: function(params, callback) {
let column = params?.column ?? 'left'
// TODO: does this need to be a callback?
this.genericAPI(this.this_model, this.Actions.LIST, params).then((result) => {
if (result.data.results.length){
if (column ==='left') {
// if paginated results are in result.data.results otherwise just result.data
this.items_left = this.items_left.concat(result.data?.results ?? result.data)
} else if (column ==='right') {
this.items_right = this.items_right.concat(result.data?.results ?? result.data)
}
// are the total elements less than the length of the array? if so, stop loading
// TODO: generalize this to handle results in result.data
callback(result.data.count > (column==="left" ? this.items_left.length : this.items_right.length))
} else {
callback(false) // stop loading
console.log('no data returned')
}
// return true if total objects are still less than the length of the list
// TODO this needs generalized to handle non-paginated data
callback(result.data.count < (column==="left" ? this.items_left.length : this.items_right.length))
}).catch((err) => {
console.log(err)
StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
})
},
getThis: function(id, callback){
return this.genericAPI(this.this_model, this.Actions.FETCH, {'id': id})
},
saveThis: function (thisItem) {
if (!thisItem?.id) { // if there is no item id assume it's a new item
this.genericAPI(this.this_model, this.Actions.CREATE, thisItem).then((result) => {
// place all new items at the top of the list - could sort instead
this.items_left = [result.data].concat(this.items_left)
// this creates a deep copy to make sure that columns stay independent
this.items_right = [{...result.data}].concat(this.items_right)
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
}).catch((err) => {
console.log(err)
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
})
} else {
this.genericAPI(this.this_model, this.Actions.UPDATE, thisItem).then((result) => {
this.refreshThis(thisItem.id)
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
}).catch((err) => {
console.log(err)
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
})
}
},
moveThis: function (source_id, target_id) {
if (source_id === target_id) {
this.makeToast(this.$t('Error'), this.$t('Cannot move item to itself'), 'danger')
this.clearState()
return
}
if (source_id === undefined || target_id === undefined) {
this.makeToast(this.$t('Warning'), this.$t('Nothing to do'), 'warning')
this.clearState()
return
}
this.genericAPI(this.this_model, this.Actions.MOVE, {'source': source_id, 'target': target_id}).then((result) => {
if (target_id === 0) {
let item = this.findCard(source_id, this.items_left) || this.findCard(source_id, this.items_right)
this.items_left = [item].concat(this.destroyCard(source_id, this.items_left)) // order matters, destroy old card before adding it back in at root
this.items_right = [...[item]].concat(this.destroyCard(source_id, this.items_right)) // order matters, destroy old card before adding it back in at root
item.parent = null
} else {
this.items_left = this.destroyCard(source_id, this.items_left)
this.items_right = this.destroyCard(source_id, this.items_right)
this.refreshThis(target_id)
}
// TODO make standard toast
this.makeToast(this.$t('Success'), 'Succesfully moved resource', 'success')
}).catch((err) => {
// TODO none of the error checking works because the openapi generated functions don't throw an error?
// or i'm capturing it incorrectly
console.log(err)
this.makeToast(this.$t('Error'), err.bodyText, 'danger')
})
},
mergeThis: function (source_id, target_id) {
if (source_id === target_id) {
this.makeToast(this.$t('Error'), this.$t('Cannot merge item with itself'), 'danger')
this.clearState()
return
}
if (!source_id || !target_id) {
this.makeToast(this.$t('Warning'), this.$t('Nothing to do'), 'warning')
this.clearState()
return
}
this.genericAPI(this.this_model, this.Actions.MERGE, {'source': source_id, 'target': target_id}).then((result) => {
this.items_left = this.destroyCard(source_id, this.items_left)
this.items_right = this.destroyCard(source_id, this.items_right)
this.refreshThis(target_id)
// TODO make standard toast
this.makeToast(this.$t('Success'), 'Succesfully merged resource', 'success')
}).catch((err) => {
//TODO error checking not working with OpenAPI methods
console.log('Error', err)
this.makeToast(this.$t('Error'), err.bodyText, 'danger')
})
},
getChildren: function(col, item){
let parent = {}
let options = {
'root': item.id,
'pageSize': 200
}
this.genericAPI(this.this_model, this.Actions.LIST, options).then((result) => {
parent = this.findCard(item.id, col === 'left' ? this.items_left : this.items_right)
if (parent) {
Vue.set(parent, 'children', result.data.results)
Vue.set(parent, 'show_children', true)
Vue.set(parent, 'show_recipes', false)
}
}).catch((err) => {
console.log(err)
this.makeToast(this.$t('Error'), err.bodyText, 'danger')
})
},
getRecipes: function(col, food){
let parent = {}
// TODO: make this generic
let options = {
'foods': food.id,
'pageSize': 200
}
this.genericAPI(this.Models.RECIPE, this.Actions.LIST, options).then((result) => {
parent = this.findCard(food.id, col === 'left' ? this.items_left : this.items_right)
if (parent) {
Vue.set(parent, 'recipes', result.data.results)
Vue.set(parent, 'show_recipes', true)
Vue.set(parent, 'show_children', false)
}
}).catch((err) => {
console.log(err)
this.makeToast(this.$t('Error'), err.bodyText, 'danger')
})
},
refreshThis: function(id){
this.getThis(id).then(result => {
this.refreshCard(result.data, this.items_left)
this.refreshCard({...result.data}, this.items_right)
})
},
deleteThis: function(id) {
this.genericAPI(this.this_model, this.Actions.DELETE, {'id': id}).then((result) => {
this.items_left = this.destroyCard(id, this.items_left)
this.items_right = this.destroyCard(id, this.items_right)
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)
}).catch((err) => {
console.log(err)
StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE)
})
},
clearState: function() {
this.show_modal = false
this.this_action = undefined
this.this_item = undefined
this.this_target = undefined
}
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style>
</style>

10
vue/src/apps/FoodListView/main.js Normal file
View File

@ -0,0 +1,10 @@
import Vue from 'vue'
import App from './FoodListView'
import i18n from '@/i18n'
Vue.config.productionTip = false
new Vue({
i18n,
render: h => h(App),
}).$mount('#app')

121
vue/src/apps/KeywordListView/KeywordListView.vue
View File

@ -8,7 +8,6 @@
<div class="col-xl-8 col-12">
<!-- TODO only show scollbars in split mode, but this doesn't interact well with infinite scroll, maybe a different component? -->
<div class="container-fluid d-flex flex-column flex-grow-1" :class="{'vh-100' : show_split}">
<!-- <div class="container-fluid d-flex flex-column flex-grow-1 vh-100"> -->
<!-- expanded options box -->
<div class="row flex-shrink-0">
<div class="col col-md-12">
@ -69,32 +68,36 @@
<!-- only show scollbars in split mode, but this doesn't interact well with infinite scroll, maybe a different componenet? -->
<div class="row" :class="{'overflow-hidden' : show_split}" style="margin-top: 2vh">
<div class="col col-md" :class="{'mh-100 overflow-auto' : show_split}">
<keyword-card
v-for="k in keywords"
v-bind:key="k.id"
:keyword="k"
<generic-horizontal-card v-for="kw in keywords" v-bind:key="kw.id"
:item=kw
item_type="Keyword"
:draggable="true"
:merge="true"
:move="true"
@item-action="startAction($event, 'left')"
></keyword-card>
/>
<infinite-loading
:identifier='left'
@infinite="infiniteHandler($event, 'left')"
spinner="waveDots">
<template v-slot:no-more><span/></template>
</infinite-loading>
</div>
<!-- right side keyword cards -->
<div class="col col-md mh-100 overflow-auto " v-if="show_split">
<keyword-card
v-for="k in keywords2"
v-bind:key="k.id"
:keyword="k"
draggable="true"
@item-action="startAction($event, 'right')"
></keyword-card>
<generic-horizontal-card v-for="kw in keywords2" v-bind:key="kw.id"
:item=kw
item_type="Keyword"
:draggable="true"
:merge="true"
:move="true"
@item-action="startAction($event, 'right')"
/>
<infinite-loading
:identifier='right'
@infinite="infiniteHandler($event, 'right')"
spinner="waveDots">
<template v-slot:no-more><span/></template>
</infinite-loading>
</div>
</div>
@ -144,26 +147,25 @@
{{this.$t("delete_confimation", {'kw': this_item.name})}} {{this_item.name}}
</b-modal>
<!-- move modal -->
<b-modal class="modal"
<b-modal class="modal" v-if="models"
:id="'id_modal_keyword_move'"
:title="this.$t('Move_Keyword')"
:ok-title="this.$t('Move')"
:cancel-title="this.$t('Cancel')"
@ok="moveKeyword(this_item.id, this_item.target.id)">
{{ this.$t("move_selection", {'child': this_item.name}) }}
<generic-multiselect
<generic-multiselect
@change="this_item.target=$event.val"
label="name"
search_function="listKeywords"
:model="models.KEYWORD"
: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"
<b-modal class="modal" v-if="models"
:id="'id_modal_keyword_merge'"
:title="this.$t('Merge_Keyword')"
:ok-title="this.$t('Merge')"
@ -172,10 +174,8 @@
{{ 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"
:placeholder="this.$t('Search')">
</generic-multiselect>
@ -195,10 +195,10 @@ import {BootstrapVue} from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import _debounce from 'lodash/debounce'
import {ResolveUrlMixin} from "@/utils/utils";
import {ToastMixin} from "@/utils/utils";
import {ApiApiFactory} from "@/utils/openapi/api.ts";
import KeywordCard from "@/components/KeywordCard";
import GenericHorizontalCard from "@/components/GenericHorizontalCard";
import GenericMultiselect from "@/components/GenericMultiselect";
import InfiniteLoading from 'vue-infinite-loading';
@ -210,11 +210,12 @@ 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',
mixins: [ResolveUrlMixin],
components: {TwemojiTextarea, KeywordCard, GenericMultiselect, InfiniteLoading},
mixins: [ToastMixin],
components: {TwemojiTextarea, GenericHorizontalCard, GenericMultiselect, InfiniteLoading},
computed: {
// move with generic modals
emojiDataAll() {
@ -229,6 +230,7 @@ export default {
return {
keywords: [],
keywords2: [],
models: Models,
show_split: false,
search_input: '',
search_input2: '',
@ -264,15 +266,6 @@ export default {
}, 700)
},
methods: {
makeToast: function (title, message, variant = null) {
//TODO remove duplicate function in favor of central one
this.$bvToast.toast(message, {
title: title,
variant: variant,
toaster: 'b-toaster-top-center',
solid: true
})
},
resetSearch: function () {
if (this.search_input !== '') {
this.search_input = ''
@ -319,8 +312,8 @@ export default {
this.mergeKeyword(e.source.id, e.target.id)
}
} else if (e.action === 'get-children') {
if (source.expanded) {
Vue.set(source, 'expanded', false)
if (source.show_children) {
Vue.set(source, 'show_children', false)
} else {
this.this_item = source
this.getChildren(col, source)
@ -369,7 +362,6 @@ export default {
},
delKeyword: function (id) {
let apiClient = new ApiApiFactory()
let p_id = null
apiClient.destroyKeyword(id).then(response => {
this.destroyCard(id)
@ -436,7 +428,7 @@ export default {
}
if (parent) {
Vue.set(parent, 'children', result.data.results)
Vue.set(parent, 'expanded', true)
Vue.set(parent, 'show_children', true)
Vue.set(parent, 'show_recipes', false)
}
@ -450,7 +442,6 @@ export default {
let parent = {}
let pageSize = 200
let keyword = String(kw.id)
console.log(apiClient.listRecipes)
apiClient.listRecipes(
undefined, keyword, undefined, undefined, undefined, undefined,
@ -464,7 +455,7 @@ export default {
if (parent) {
Vue.set(parent, 'recipes', result.data.results)
Vue.set(parent, 'show_recipes', true)
Vue.set(parent, 'expanded', false)
Vue.set(parent, 'show_children', false)
}
}).catch((err) => {
@ -485,13 +476,13 @@ export default {
let parent2 = this.findKeyword(this.keywords2, target.parent)
if (parent) {
if (parent.expanded){
if (parent.show_children){
idx = parent.children.indexOf(parent.children.find(kw => kw.id === target.id))
Vue.set(parent.children, idx, result.data)
}
}
if (parent2){
if (parent2.expanded){
if (parent2.show_children){
idx2 = parent2.children.indexOf(parent2.children.find(kw => kw.id === target.id))
// deep copy to force columns to be indepedent
Vue.set(parent2.children, idx2, JSON.parse(JSON.stringify(result.data)))
@ -506,25 +497,25 @@ export default {
})
},
findKeyword: function(kw_list, id){
if (kw_list.length == 0) {
return false
}
let keyword = kw_list.filter(kw => kw.id == id)
if (keyword.length == 1) {
return keyword[0]
} else if (keyword.length == 0) {
for (const k of kw_list.filter(kw => kw.expanded == true)) {
keyword = this.findKeyword(k.children, id)
if (keyword) {
return keyword
findKeyword: function(card_list, id){
let card_length = card_list?.length ?? 0
if (card_length == 0) {
return false
}
}
} else {
console.log('something terrible happened')
}
},
let cards = card_list.filter(obj => obj.id == id)
if (cards.length == 1) {
return cards[0]
} else if (cards.length == 0) {
for (const c of card_list.filter(x => x.show_children == true)) {
cards = this.findKeyword(c.children, id)
if (cards) {
return cards
}
}
} else {
console.log('something terrible happened')
}
},
// this would move with modals with mixin?
prepareEmoji: function() {
this.$refs._edit.addText(this.this_item.icon || '');
@ -579,25 +570,21 @@ export default {
let kw = this.findKeyword(this.keywords, id)
let kw2 = this.findKeyword(this.keywords2, id)
let p_id = undefined
if (kw) {
p_id = kw.parent
} else if (kw2) {
p_id = kw2.parent
}
p_id = kw?.parent ?? kw2.parent
if (p_id) {
let parent = this.findKeyword(this.keywords, p_id)
let parent2 = this.findKeyword(this.keywords2, p_id)
if (parent){
Vue.set(parent, 'numchild', parent.numchild - 1)
if (parent.expanded) {
if (parent.show_children) {
let idx = parent.children.indexOf(parent.children.find(kw => kw.id === id))
Vue.delete(parent.children, idx)
}
}
if (parent2){
Vue.set(parent2, 'numchild', parent2.numchild - 1)
if (parent2.expanded) {
if (parent2.show_children) {
let idx = parent2.children.indexOf(parent2.children.find(kw => kw.id === id))
Vue.delete(parent2.children, idx)
}

51
vue/src/apps/RecipeSearchView/RecipeSearchView.vue
View File

@ -19,7 +19,7 @@
v-b-tooltip.hover :title="$t('Advanced Settings')"
v-bind:variant="!isAdvancedSettingsSet() ? 'primary' : 'danger'"
>
<!-- consider changing this icon to a filter -->
<!-- TODO consider changing this icon to a filter -->
<i class="fas fa-caret-down" v-if="!settings.advanced_search_visible"></i>
<i class="fas fa-caret-up" v-if="settings.advanced_search_visible"></i>
</b-button>
@ -108,6 +108,19 @@
></b-form-checkbox>
</b-form-group>
<b-form-group v-if="settings.show_meal_plan"
v-bind:label="$t('Meal_Plan_Days')"
label-for="popover-input-5"
label-cols="6"
class="mb-3">
<b-form-input
type="number"
v-model="settings.meal_plan_days"
id="popover-input-5"
size="sm"
></b-form-input>
</b-form-group>
<b-form-group
v-bind:label="$t('Sort_by_new')"
label-for="popover-input-3"
@ -159,11 +172,10 @@
<div class="row">
<div class="col-12">
<b-input-group class="mt-2">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_foods"
:initial_selection="settings.search_foods"
search_function="listFoods" label="name"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
v-bind:placeholder="$t('Ingredients')" :limit="20"></generic-multiselect>
<treeselect v-model="settings.search_foods" :options="facets.Foods" :flat="true"
searchNested multiple :placeholder="$t('Ingredients')" :normalizer="normalizer"
@input="refreshData(false)"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"/>
<b-input-group-append>
<b-input-group-text>
<b-form-checkbox v-model="settings.search_foods_or" name="check-button"
@ -180,10 +192,10 @@
<div class="row">
<div class="col-12">
<b-input-group class="mt-2">
<b-input-group class="mt-2" v-if="models">
<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>
@ -270,8 +282,9 @@ import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
import {ResolveUrlMixin} from "@/utils/utils";
import {Models} from "@/utils/models";
import LoadingSpinner from "@/components/LoadingSpinner";
import LoadingSpinner from "@/components/LoadingSpinner"; // is this deprecated?
import {ApiApiFactory} from "@/utils/openapi/api.ts";
import RecipeCard from "@/components/RecipeCard";
@ -307,6 +320,7 @@ export default {
search_books_or: true,
advanced_search_visible: false,
show_meal_plan: true,
meal_plan_days: 0,
recently_viewed: 5,
sort_by_new: true,
pagination_page: 1,
@ -315,6 +329,7 @@ export default {
pagination_count: 0,
random_search: false,
models: Models
}
},
@ -355,6 +370,9 @@ export default {
'settings.show_meal_plan': function () {
this.loadMealPlan()
},
'settings.meal_plan_days': function () {
this.loadMealPlan()
},
'settings.recently_viewed': function () {
// this.loadRecentlyViewed()
this.refreshData(false)
@ -376,9 +394,7 @@ export default {
apiClient.listRecipes(
this.settings.search_input,
this.settings.search_keywords,
this.settings.search_foods.map(function (A) {
return A["id"];
}),
this.settings.search_foods,
this.settings.search_books.map(function (A) {
return A["id"];
}),
@ -396,22 +412,25 @@ export default {
window.scrollTo(0, 0);
this.pagination_count = result.data.count
this.recipes = result.data.results
this.recipes = this.removeDuplicates(result.data.results, recipe => recipe.id)
this.facets = result.data.facets
console.log(this.recipes)
})
},
openRandom: function () {
this.refreshData(true)
},
removeDuplicates: function(data, key) {
return [
...new Map(data.map(item => [key(item), item])).values()
]
},
loadMealPlan: function () {
let apiClient = new ApiApiFactory()
if (this.settings.show_meal_plan) {
apiClient.listMealPlans({
query: {
from_date: moment().format('YYYY-MM-DD'),
to_date: moment().format('YYYY-MM-DD')
to_date: moment().add(this.settings.meal_plan_days, 'days').format('YYYY-MM-DD')
}
}).then(result => {
this.meal_plans = result.data

6
vue/src/components/GenericContextMenu.vue
View File

@ -1,6 +1,5 @@
<template>
<div>
<b-dropdown variant="link" toggle-class="text-decoration-none" no-caret>
<b-dropdown variant="link" toggle-class="text-decoration-none" no-caret style="boundary:window">
<template #button-content>
<i class="fas fa-ellipsis-v" ></i>
</template>
@ -21,13 +20,12 @@
</b-dropdown-item>
</b-dropdown>
</div>
</template>
<script>
export default {
name: 'KeywordContextMenu',
name: 'GenericContextMenu',
props: {
show_edit: {type: Boolean, default: true},
show_delete: {type: Boolean, default: true},

231
vue/src/components/GenericHorizontalCard.vue Normal file
View File

@ -0,0 +1,231 @@
<template>
<div row>
<b-card no-body d-flex flex-column :class="{'border border-primary' : over, 'shake': isError}"
style="height: 10vh;" :style="{'cursor:grab' : draggable}"
@dragover.prevent
@dragenter.prevent
:draggable="draggable"
@dragstart="handleDragStart($event)"
@dragenter="handleDragEnter($event)"
@dragleave="handleDragLeave($event)"
@drop="handleDragDrop($event)">
<b-row no-gutters style="height:inherit;">
<b-col no-gutters md="3" style="height:inherit;">
<b-card-img-lazy style="object-fit: cover; height: 10vh;" :src="item_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
</b-col>
<b-col no-gutters md="9" style="height:inherit;">
<b-card-body class="m-0 py-0" style="height:inherit;">
<b-card-text class=" h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
<h5 class="m-0 mt-1 text-truncate">{{ item[title] }}</h5>
<div class= "m-0 text-truncate">{{ item[subtitle] }}</div>
<div class="mt-auto mb-1 d-flex flex-row justify-content-end">
<div v-if="item[child_count] !=0" class="mx-2 btn btn-link btn-sm"
style="z-index: 800;" v-on:click="$emit('item-action',{'action':'get-children','source':item})">
<div v-if="!item.show_children">{{ item[child_count] }} {{ item_type }}</div>
<div v-else>{{ text.hide_children }}</div>
</div>
<div v-if="item[recipe_count]" class="mx-2 btn btn-link btn-sm" style="z-index: 800;"
v-on:click="$emit('item-action',{'action':'get-recipes','source':item})">
<div v-if="!item.show_recipes">{{ item[recipe_count] }} {{$t('Recipes')}}</div>
<div v-else>{{$t('Hide_Recipes')}}</div>
</div>
</div>
</b-card-text>
</b-card-body>
</b-col>
<div class="card-img-overlay justify-content-right h-25 m-0 p-0 text-right">
<slot name="upper-right"></slot>
<generic-context-menu class="p-0"
:show_merge="merge"
:show_move="move"
@item-action="$emit('item-action', {'action': $event, 'source': item})">
</generic-context-menu>
</div>
</b-row>
</b-card>
<!-- recursively add child cards -->
<div class="row" v-if="item.show_children">
<div class="col-md-11 offset-md-1">
<generic-horizontal-card v-for="child in item[children]" v-bind:key="child.id"
:draggable="draggable"
:item="child"
:item_type="item_type"
:title="title"
:subtitle="subtitle"
:child_count="child_count"
:children="children"
:recipe_count="recipe_count"
:recipes="recipes"
:merge="merge"
:move="move"
@item-action="$emit('item-action', $event)">
</generic-horizontal-card>
</div>
</div>
<!-- conditionally view recipes -->
<div class="row" v-if="item.show_recipes">
<div class="col-md-11 offset-md-1">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
<recipe-card v-for="r in item[recipes]"
v-bind:key="r.id"
:recipe="r">
</recipe-card>
</div>
</div>
</div>
<!-- this should be made a generic component, would also require mixin for functions that generate the popup and put in parent container-->
<b-list-group ref="tooltip" variant="light" v-show="show_menu" v-on-clickaway="closeMenu" style="z-index:9999; cursor:pointer">
<b-list-group-item v-if="move" action v-on:click="$emit('item-action',{'action': 'move', 'target': item, 'source': source}); closeMenu()">
<i class="fas fa-expand-arrows-alt fa-fw"></i> {{$t('Move')}}: {{$t('move_confirmation', {'child': source.name,'parent':item.name})}}
</b-list-group-item>
<b-list-group-item v-if="merge" action v-on:click="$emit('item-action',{'action': 'merge', 'target': item, 'source': source}); closeMenu()">
<i class="fas fa-compress-arrows-alt fa-fw"></i> {{$t('Merge')}}: {{ $t('merge_confirmation', {'source': source.name,'target':item.name}) }}
</b-list-group-item>
<b-list-group-item action v-on:click="closeMenu()">
{{$t('Cancel')}}
</b-list-group-item>
<!-- TODO add to shopping list -->
<!-- TODO add to and/or manage pantry -->
</b-list-group>
</div>
</template>
<script>
import GenericContextMenu from "@/components/GenericContextMenu";
import RecipeCard from "@/components/RecipeCard";
import { mixin as clickaway } from 'vue-clickaway';
import { createPopper } from '@popperjs/core';
export default {
name: "GenericHorizontalCard",
components: { GenericContextMenu, RecipeCard },
mixins: [clickaway],
props: {
item: Object,
item_type: {type: String, default: 'Blank Item Type'}, // TODO update translations to handle plural translations
draggable: {type: Boolean, default: false},
title: {type: String, default: 'name'},
subtitle: {type: String, default: 'description'},
child_count: {type: String, default: 'numchild'},
children: {type: String, default: 'children'},
recipe_count: {type: String, default: 'numrecipe'},
recipes: {type: String, default: 'recipes'},
move: {type: Boolean, default: false},
merge: {type: Boolean, default: false},
},
data() {
return {
item_image: '',
over: false,
show_menu: false,
dragMenu: undefined,
isError: false,
source: {'id': undefined, 'name': undefined},
target: {'id': undefined, 'name': undefined},
text: {
'hide_children': '',
},
}
},
mounted() {
this.item_image = this.item?.image ?? window.IMAGE_PLACEHOLDER
this.dragMenu = this.$refs.tooltip
this.text.hide_children = this.$t('Hide_' + this.item_type)
},
methods: {
handleDragStart: function(e) {
this.isError = false
e.dataTransfer.setData('source', JSON.stringify(this.item))
},
handleDragEnter: function(e) {
if (!e.currentTarget.contains(e.relatedTarget) && e.relatedTarget != null) {
this.over = true
}
},
handleDragLeave: function(e) {
if (!e.currentTarget.contains(e.relatedTarget)) {
this.over = false
}
},
handleDragDrop: function(e) {
let source = JSON.parse(e.dataTransfer.getData('source'))
if (source.id != this.item.id){
this.source = source
let menuLocation = {getBoundingClientRect: this.generateLocation(e.clientX, e.clientY),}
this.show_menu = true
let popper = createPopper(
menuLocation,
this.dragMenu,
{
placement: 'bottom-start',
modifiers: [
{
name: 'preventOverflow',
options: {
rootBoundary: 'document',
},
},
{
name: 'flip',
options: {
fallbackPlacements: ['bottom-end', 'top-start', 'top-end', 'left-start', 'right-start'],
rootBoundary: 'document',
},
},
],
})
popper.update()
this.over = false
this.$emit({'action': 'drop', 'target': this.item, 'source': this.source})
} else {
this.isError = true
}
},
generateLocation: function (x = 0, y = 0) {
return () => ({
width: 0,
height: 0,
top: y,
right: x,
bottom: y,
left: x,
});
},
closeMenu: function(){
this.show_menu = false
},
}
}
</script>
<style scoped>
.shake {
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
</style>

61
vue/src/components/GenericMultiselect.vue
View File

@ -6,7 +6,7 @@
:clear-on-select="true"
:hide-selected="true"
:preserve-search="true"
:placeholder="placeholder"
:placeholder="lookupPlaceholder"
:label="label"
track-by="id"
:multiple="multiple"
@ -19,60 +19,63 @@
<script>
import Multiselect from 'vue-multiselect'
import {ApiApiFactory} from "@/utils/openapi/api";
import {ApiMixin} from "@/utils/utils";
export default {
name: "GenericMultiselect",
components: {Multiselect},
mixins: [ApiMixin],
data() {
return {
// this.Models and this.Actions inherited from ApiMixin
loading: false,
objects: [],
selected_objects: [],
}
},
props: {
placeholder: String,
search_function: String,
label: String,
placeholder: {type: String, default: undefined},
model: {type: Object, default () {return {}}},
label: {type: String, default: 'name'},
parent_variable: {type: String, default: undefined},
limit: {
type: Number,
default: 10,
},
limit: {type: Number, default: 10,},
sticky_options: {type:Array, default(){return []}},
initial_selection: {type:Array, default(){return []}},
multiple: {type: Boolean, default: true},
tree_api: {type: Boolean, default: false} // api requires params that are unique to TreeMixin
multiple: {type: Boolean, default: true}
},
watch: {
initial_selection: function (newVal, oldVal) { // watch it
this.selected_objects = newVal
if (this.multiple) {
this.selected_objects = newVal
} else if (this.selected_objects != newVal?.[0]) {
// when not using multiple selections need to convert array to value
this.selected_objects = newVal?.[0] ?? null
}
},
},
mounted() {
this.search('')
// when not using multiple selections need to convert array to value
if (!this.multiple & this.selected_objects != this.initial_selection?.[0]) {
this.selected_objects = this.initial_selection?.[0] ?? null
}
},
computed: {
lookupPlaceholder() {
return this.placeholder || this.model.name || this.$t('Search')
},
},
methods: {
// this.genericAPI inherited from ApiMixin
search: function (query) {
let apiClient = new ApiApiFactory()
if (this.tree_api) {
let page = 1
let root = undefined
let tree = undefined
let pageSize = 10
if (query === '') {
query = undefined
}
apiClient[this.search_function](query, root, tree, page, pageSize).then(result => {
this.objects = this.sticky_options.concat(result.data.results)
})
} else {
apiClient[this.search_function]({query: {query: query, limit: this.limit}}).then(result => {
this.objects = this.sticky_options.concat(result.data)
})
let options = {
'page': 1,
'pageSize': 10,
'query': query
}
this.genericAPI(this.model, this.Actions.LIST, options).then((result) => {
this.objects = this.sticky_options.concat(result.data?.results ?? result.data)
})
},
selectionChanged: function () {
this.$emit('change', {var: this.parent_variable, val: this.selected_objects})

178
vue/src/components/GenericSplitLists.vue Normal file
View File

@ -0,0 +1,178 @@
<template>
<div id="app" style="margin-bottom: 4vh">
<div class="row">
<div class="col-md-2 d-none d-md-block">
</div>
<div class="col-xl-8 col-12">
<div class="container-fluid d-flex flex-column flex-grow-1" :class="{'vh-100' : show_split}">
<!-- expanded options box -->
<div class="row flex-shrink-0">
<div class="col col-md-12">
<b-collapse id="collapse_advanced" class="mt-2" v-model="advanced_visible">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-3" style="margin-top: 1vh">
<div class="btn btn-primary btn-block text-uppercase" @click="$emit('item-action', {'action':'new'})">
{{ this.text.new }}
</div>
</div>
<div class="col-md-3" style="margin-top: 1vh">
<button class="btn btn-primary btn-block text-uppercase" @click="resetSearch">
{{ this.text.reset }}
</button>
</div>
<div class="col-md-3" style="position: relative; margin-top: 1vh">
<b-form-checkbox v-model="show_split" name="check-button"
class="shadow-none"
style="position:relative;top: 50%; transform: translateY(-50%);" switch>
{{ this.text.split }}
</b-form-checkbox>
</div>
</div>
</div>
</div>
</b-collapse>
</div>
</div>
<div class="row flex-shrink-0">
<!-- search box -->
<div class="col col-md">
<b-input-group class="mt-3">
<b-input class="form-control" v-model="search_right"
v-bind:placeholder="this.text.search"></b-input>
<b-input-group-append>
<b-button v-b-toggle.collapse_advanced variant="primary" class="shadow-none">
<i class="fas fa-caret-down" v-if="!advanced_visible"></i>
<i class="fas fa-caret-up" v-if="advanced_visible"></i>
</b-button>
</b-input-group-append>
</b-input-group>
</div>
<!-- split side search -->
<div class="col col-md" v-if="show_split">
<b-input-group class="mt-3">
<b-input class="form-control" v-model="search_left"
v-bind:placeholder="this.text.search"></b-input>
</b-input-group>
</div>
</div>
<!-- only show scollbars in split mode -->
<!-- weird behavior when switching to split mode, infinite scoll doesn't trigger if
bottom of page is in viewport can trigger by scrolling page (not column) up -->
<div class="row" :class="{'overflow-hidden' : show_split}">
<div class="col col-md" :class="{'mh-100 overflow-auto' : show_split}">
<slot name="cards-left"></slot>
<infinite-loading
:identifier='left'
@infinite="infiniteHandler($event, 'left')"
spinner="waveDots">
<template v-slot:no-more><span/></template>
</infinite-loading>
</div>
<!-- right side cards -->
<div class="col col-md mh-100 overflow-auto" v-if="show_split">
<slot name="cards-right"></slot>
<infinite-loading
:identifier='right'
@infinite="infiniteHandler($event, 'right')"
spinner="waveDots">
<template v-slot:no-more><span/></template>
</infinite-loading>
</div>
</div>
</div>
</div>
<div class="col-md-2 d-none d-md-block">
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue' // maybe not needed?
import 'bootstrap-vue/dist/bootstrap-vue.css'
import _debounce from 'lodash/debounce'
import InfiniteLoading from 'vue-infinite-loading';
export default {
name: 'GenericSplitLists',
components: {InfiniteLoading},
props: {
list_name: {type: String, default: 'Blank List'}, // TODO update translations to handle plural translations
left_list: {type:Array, default(){return []}},
right_list: {type:Array, default(){return []}},
},
data() {
return {
advanced_visible: false,
show_split: false,
search_right: '',
search_left: '',
right_page: 0,
left_page: 0,
right: +new Date(),
left: +new Date(),
text: {
'new': '',
'name': '',
'reset': this.$t('Reset_Search'),
'split': this.$t('show_split_screen'),
'search': this.$t('Search')
},
}
},
mounted() {
this.dragMenu = this.$refs.tooltip
this.text.new = this.$t('New_' + this.list_name)
},
watch: {
search_right: _debounce(function() {
this.left_page = 0
this.$emit('reset', {'column':'left'})
this.left += 1
}, 700),
search_left: _debounce(function() {
this.right_page = 0
this.$emit('reset', {'column':'right'})
this.right += 1
}, 700),
},
methods: {
resetSearch: function () {
this.search_right = ''
this.search_left = ''
},
infiniteHandler: function($state, col) {
let params = {
'query': (col==='left') ? this.search_right : this.search_left,
'page': (col==='left') ? this.left_page + 1 : this.right_page + 1,
'column': col
}
// TODO: change this to be an emit and watch a prop to determine if loaded or complete
new Promise((callback) => this.$emit('get-list', params, callback)).then((result) => {
this[col+'_page'] += 1
$state.loaded();
if (!result) { // callback needs to return true if handler should continue loading more data
$state.complete();
}
}).catch(() => {
$state.complete();
})
},
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style>
</style>

9
vue/src/components/KeywordCard.vue
View File

@ -11,7 +11,7 @@
@dragleave="handleDragLeave($event)"
@drop="handleDragDrop($event)">
<b-row no-gutters style="height:inherit;">
<b-col no-gutters md="3" style="justify-content: center; height:inherit;">
<b-col no-gutters md="3" style="height:inherit;">
<b-card-img-lazy style="object-fit: cover; height: 10vh;" :src="keyword_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
</b-col>
<b-col no-gutters md="9" style="height:inherit;">
@ -34,9 +34,8 @@
</b-card-text>
</b-card-body>
</b-col>
<div class="card-img-overlay h-100 d-flex flex-column justify-content-right"
style="float:right; text-align: right; padding-top: 10px; padding-right: 5px">
<generic-context-menu style="float:right"
<div class="card-img-overlay justify-content-right h-25 m-0 p-0 text-right">
<generic-context-menu class="p-0"
:show_merge="true"
:show_move="true"
@item-action="$emit('item-action', {'action': $event, 'source': keyword})">
@ -133,7 +132,7 @@ export default {
let source = JSON.parse(e.dataTransfer.getData('source'))
if (source.id != this.keyword.id){
this.source = source
let menuLocation = {getBoundingClientRect: this.generateLocation(e.pageX, e.pageY),}
let menuLocation = {getBoundingClientRect: this.generateLocation(e.clientX, e.clientY),}
this.show_menu = true
let popper = createPopper(
menuLocation,

37
vue/src/components/Modals/CheckboxInput.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<div>
<b-form-checkbox v-model="new_value">{{label}}</b-form-checkbox>
</div>
</template>
<script>
export default {
name: 'CheckboxInput',
props: {
field: {type: String, default: 'You Forgot To Set Field Name'},
label: {type: String, default: 'Checkbox Field'},
value: {type: Boolean, default: false},
show_move: {type: Boolean, default: false},
show_merge: {type: Boolean, default: false},
},
data() {
return {
new_value: undefined,
}
},
mounted() {
this.new_value = this.value
},
watch: {
'new_value': function () {
this.$root.$emit('change', this.field, this.new_value)
},
},
methods: {
Button: function(e) {
this.$bvModal.show('modal')
}
}
}
</script>

105
vue/src/components/Modals/GenericModalForm.vue Normal file
View File

@ -0,0 +1,105 @@
<template>
<div>
<b-modal class="modal" id="modal" @hidden="cancelAction">
<template v-slot:modal-title><h4>{{form.title}}</h4></template>
<div v-for="(f, i) in form.fields" v-bind:key=i>
<p v-if="f.type=='instruction'">{{f.label}}</p>
<lookup-input v-if="f.type=='lookup'"
:label="f.label"
:value="f.value"
:field="f.field"
:model="listModel(f.list)"
:sticky_options="f.sticky_options || undefined"
@change="storeValue"/> <!-- TODO add ability to create new items associated with lookup -->
<!-- TODO: add emoji field -->
<checkbox-input v-if="f.type=='checkbox'"
:label="f.label"
:value="f.value"
:field="f.field"/>
<text-input v-if="f.type=='text'"
:label="f.label"
:value="f.value"
:field="f.field"
:placeholder="f.placeholder"/>
</div>
<template v-slot:modal-footer>
<b-button class="float-right mx-1" variant="secondary" v-on:click="cancelAction">{{$t('Cancel')}}</b-button>
<b-button class="float-right mx-1" variant="primary" v-on:click="doAction">{{form.ok_label}}</b-button>
</template>
</b-modal>
</div>
</template>
<script>
import Vue from 'vue'
import {BootstrapVue} from 'bootstrap-vue'
import {getForm} from "@/utils/utils";
Vue.use(BootstrapVue)
import {Models} from "@/utils/models";
import CheckboxInput from "@/components/Modals/CheckboxInput";
import LookupInput from "@/components/Modals/LookupInput";
import TextInput from "@/components/Modals/TextInput";
export default {
name: 'GenericModalForm',
components: {CheckboxInput, LookupInput, TextInput},
props: {
model: {required: true, type: Object, default: function() {}},
action: {required: true, type: Object, default: function() {}},
item1: {type: Object, default: function() {}},
item2: {type: Object, default: function() {}},
show: {required: true, type: Boolean, default: false},
},
data() {
return {
form_data: {},
form: {},
dirty: false
}
},
mounted() {
this.$root.$on('change', this.storeValue); // modal is outside Vue instance(?) so have to listen at root of component
},
computed: {
buttonLabel() {
return this.buttons[this.action].label;
},
},
watch: {
'show': function () {
if (this.show) {
this.form = getForm(this.model, this.action, this.item1, this.item2)
this.dirty = true
this.$bvModal.show('modal')
} else {
this.$bvModal.hide('modal')
this.form_data = {}
}
},
},
methods: {
doAction: function(){
this.dirty = false
this.$emit('finish-action', {'form_data': this.form_data })
},
cancelAction: function() {
if (this.dirty) {
this.dirty = false
this.$emit('finish-action', 'cancel')
}
},
storeValue: function(field, value) {
this.form_data[field] = value
},
listModel: function(m) {
if (m === 'self') {
return this.model
} else {
return Models[m]
}
}
}
}
</script>

55
vue/src/components/Modals/LookupInput.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<div>
<b-form-group
v-bind:label="label"
class="mb-3">
<generic-multiselect
@change="new_value=$event.val['id']"
:initial_selection="[]"
:model="model"
:multiple="false"
:sticky_options="sticky_options"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
:placeholder="modelName">
</generic-multiselect>
</div>
</template>
<script>
import GenericMultiselect from "@/components/GenericMultiselect";
export default {
name: 'LookupInput',
components: {GenericMultiselect},
props: {
field: {type: String, default: 'You Forgot To Set Field Name'},
label: {type: String, default: ''},
value: {type: Object, default () {return {}}},
model: {type: Object, default () {return {}}},
sticky_options: {type:Array, default(){return []}},
},
data() {
return {
new_value: undefined,
}
},
mounted() {
this.new_value = this.value.id
},
computed: {
modelName() {
return this?.model?.name ?? this.$t('Search')
}
},
watch: {
'new_value': function () {
this.$root.$emit('change', this.field, this.new_value)
},
},
methods: {
Button: function(e) {
this.$bvModal.show('modal')
}
}
}
</script>

45
vue/src/components/Modals/TextInput.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div>
<b-form-group
v-bind:label="label"
class="mb-3">
<b-form-input
v-model="new_value"
type="string"
:placeholder="placeholder"
></b-form-input>
</b-form-group>
</div>
</template>
<script>
export default {
name: 'TextInput',
props: {
field: {type: String, default: 'You Forgot To Set Field Name'},
label: {type: String, default: 'Text Field'},
value: {type: String, default: ''},
placeholder: {type: String, default: 'You Should Add Placeholder Text'},
show_merge: {type: Boolean, default: false},
},
data() {
return {
new_value: undefined,
}
},
mounted() {
this.new_value = this.value
},
watch: {
'new_value': function () {
this.$root.$emit('change', this.field, this.new_value)
},
},
methods: {
Button: function(e) {
this.$bvModal.show('modal')
}
}
}
</script>

4
vue/src/components/RecipeCard.vue
View File

@ -39,10 +39,10 @@
<b-badge pill variant="info" v-if="!recipe.internal">{{ $t('External') }}</b-badge>
<b-badge pill variant="success"
<!-- <b-badge pill variant="success"
v-if="Date.parse(recipe.created_at) > new Date(Date.now() - (7 * (1000 * 60 * 60 * 24)))">
{{ $t('New') }}
</b-badge>
</b-badge> -->
</template>
<template v-else>{{ meal_plan.note }}</template>

31
vue/src/locales/en.json
View File

@ -95,12 +95,31 @@
"Move": "Move",
"Merge": "Merge",
"Parent": "Parent",
"delete_confimation": "Are you sure that you want to delete {kw} and all of it's children?",
"delete_confirmation": "Are you sure that you want to delete {source}?",
"move_confirmation": "Move {child} to parent {parent}",
"merge_confirmation": "Replace {source} with {target}",
"move_selection": "Select a parent to move {child} to.",
"merge_selection": "Replace all occurences of {source} with the selected {type}.",
"Advanced Search Settings": "Advanced Search Settings",
"Download": "Download",
"Root": "Root"
"move_selection": "Select a parent {type} to move {source} to.",
"merge_selection": "Replace all occurrences of {source} with the selected {type}.",
"Root": "Root",
"Ignore_Shopping": "Ignore Shopping",
"Shopping_Category": "Shopping Category",
"Edit_Food": "Edit Food",
"Move_Food": "Move Food",
"New_Food": "New Food",
"Hide_Food": "Hide Food",
"Delete_Food": "Delete Food",
"No_ID": "ID not found, cannot delete.",
"Meal_Plan_Days": "Future meal plans",
"merge_title": "Merge {type}",
"move_title": "Move {type}",
"Food": "Food",
"Recipe_Book": "Recipe Book",
"del_confirmation_tree": "Are you sure that you want to delete {source} and all of it's children?",
"delete_title": "Delete {type}",
"create_title": "New {type}",
"edit_title": "Edit {type}",
"Name": "Name",
"Description": "Description",
"Recipe": "Recipe",
"tree_root": "Root of Tree"
}

319
vue/src/utils/models.js Normal file
View File

@ -0,0 +1,319 @@
/*
* Utility CLASS to define model configurations
* */
import i18n from "@/i18n";
// TODO this needs rethought and simplified
// maybe a function that returns a single dictionary based on action?
export class Models {
// Arrays correspond to ORDERED list of parameters required by ApiApiFactory
// Inner arrays are used to construct a dictionary of key:value pairs
// MODEL configurations will override MODEL_TYPE configurations with will override ACTION configurations
// MODEL_TYPES - inherited by MODELS, inherits and takes precedence over ACTIONS
static TREE = {
'list': {
'params': ['query', 'root', 'tree', 'page', 'pageSize'],
'config': {
'root': {
'default': {
'function': 'CONDITIONAL',
'check': 'query',
'operator': 'not_exist',
'true': 0,
'false': undefined
}
},
'tree': {'default': undefined},
},
},
'delete': {
"form": {
'instruction': {
'form_field': true,
'type': 'instruction',
'function': 'translate',
'phrase': "del_confimation_tree",
'params':[
{
'token': 'source',
'from':'item1',
'attribute': "name"
}
]
}
}
},
'move': {
'form': {
'target': {
'form_field': true,
'type': 'lookup',
'field': 'target',
'list': 'self',
'sticky_options': [{'id': 0,'name': i18n.t('tree_root')}]
}
}
}
}
// MODELS - inherits and takes precedence over MODEL_TYPES and ACTIONS
static FOOD = {
'name': i18n.t('Food'), // *OPTIONAL* : parameters will be built model -> model_type -> default
'apiName': 'Food', // *REQUIRED* : the name that is used in api.ts for this model
'model_type': this.TREE, // *OPTIONAL* : model specific params for api, if not present will attempt modeltype_create then default_create
// REQUIRED: unordered array of fields that can be set during create
'create': {
// if not defined partialUpdate will use the same parameters, prepending 'id'
'params': [['name', 'description', 'recipe', 'ignore_shopping', 'supermarket_category']],
'form': {
'name': {
'form_field': true,
'type': 'text',
'field': 'name',
'label': i18n.t('Name'),
'placeholder': ''
},
'description': {
'form_field': true,
'type': 'text',
'field': 'description',
'label': i18n.t('Description'),
'placeholder': ''
},
'recipe': {
'form_field': true,
'type': 'lookup',
'field': 'recipe',
'list': 'RECIPE',
'label': i18n.t('Recipe')
},
'shopping': {
'form_field': true,
'type': 'checkbox',
'field': 'ignore_shopping',
'label': i18n.t('Ignore_Shopping')
},
'shopping_category': {
'form_field': true,
'type': 'lookup',
'field': 'supermarket_category',
'list': 'SHOPPING_CATEGORY',
'label': i18n.t('Shopping_Category')
},
}
},
}
static KEYWORD = {
'name': i18n.t('Keyword'), // *OPTIONAL: parameters will be built model -> model_type -> default
'apiName': 'Keyword',
'model_type': this.TREE
}
static UNIT = {}
static RECIPE = {}
static SHOPPING_LIST = {}
static RECIPE_BOOK = {
'name': i18n.t('Recipe_Book'),
'apiName': 'RecipeBook',
}
static SHOPPING_CATEGORY = {
'name': i18n.t('Shopping_Category'),
'apiName': 'SupermarketCategory',
}
static RECIPE = {
'name': i18n.t('Recipe'),
'apiName': 'Recipe',
'list': {
'params': ['query', 'keywords', 'foods', 'books', 'keywordsOr', 'foodsOr', 'booksOr', 'internal', 'random', '_new', 'page', 'pageSize', 'options'],
'config': {
'foods': {'type':'string'},
'keywords': {'type': 'string'},
'books': {'type': 'string'},
}
},
}
}
export class Actions {
static CREATE = {
"function": "create",
'form': {
'title': {
'function': 'translate',
'phrase': 'create_title',
'params' : [
{
'token': 'type',
'from': 'model',
'attribute':'name'
}
],
},
'ok_label': i18n.t('Save'),
}
}
static UPDATE = {
"function": "partialUpdate",
// special case for update only - updated assumes create form is sufficient, but a different title is required.
"form_title": {
'function': 'translate',
'phrase': 'edit_title',
'params' : [
{
'token': 'type',
'from': 'model',
'attribute':'name'
}
],
},
}
static DELETE = {
"function": "destroy",
'params': ['id'],
'form': {
'title': {
'function': 'translate',
'phrase': 'delete_title',
'params' : [
{
'token': 'type',
'from': 'model',
'attribute':'name'
}
],
},
'ok_label': i18n.t('Delete'),
'instruction': {
'form_field': true,
'type': 'instruction',
'label': {
'function': 'translate',
'phrase': "delete_confirmation",
'params':[
{
'token': 'source',
'from':'item1',
'attribute': "name"
}
]
}
}
}
}
static FETCH = {
"function": "retrieve",
'params': ['id']
}
static LIST = {
"function": "list",
"suffix": "s",
"params": ['query', 'page', 'pageSize'],
"config": {
'query': {'default': undefined},
'page': {'default': 1},
'pageSize': {'default': 25}
}
}
static MERGE = {
"function": "merge",
'params': ['source', 'target'],
"config": {
'source': {'type': 'string'},
'target': {'type': 'string'}
},
'form': {
'title': {
'function': 'translate',
'phrase': 'merge_title',
'params' : [
{
'token': 'type',
'from': 'model',
'attribute':'name'
}
],
},
'ok_label': i18n.t('Merge'),
'instruction': {
'form_field': true,
'type': 'instruction',
'label': {
'function': 'translate',
'phrase': "merge_selection",
'params':[
{
'token': 'source',
'from':'item1',
'attribute': "name"
},
{
'token': 'type',
'from':'model',
'attribute': "name"
},
]
}
},
'target': {
'form_field': true,
'type': 'lookup',
'field': 'target',
'list': 'self'
}
}
}
static MOVE = {
"function": "move",
'params': ['source', 'target'],
"config": {
'source': {'type': 'string'},
'target': {'type': 'string'}
},
'form': {
'title': {
'function': 'translate',
'phrase': 'move_title',
'params' : [
{
'token': 'type',
'from': 'model',
'attribute':'name'
}
],
},
'ok_label': i18n.t('Move'),
'instruction': {
'form_field': true,
'type': 'instruction',
'label': {
'function': 'translate',
'phrase': "move_selection",
'params':[
{
'token': 'source',
'from':'item1',
'attribute': "name"
},
{
'token': 'type',
'from':'model',
'attribute': "name"
},
]
}
},
'target': {
'form_field': true,
'type': 'lookup',
'field': 'target',
'list': 'self'
}
}
}
}

354
vue/src/utils/openapi/api.ts
View File

@ -137,6 +137,30 @@ export interface Food {
* @memberof Food
*/
supermarket_category?: FoodSupermarketCategory | null;
/**
*
* @type {string}
* @memberof Food
*/
image?: string;
/**
*
* @type {string}
* @memberof Food
*/
parent?: string;
/**
*
* @type {number}
* @memberof Food
*/
numchild?: number;
/**
*
* @type {string}
* @memberof Food
*/
numrecipe?: string;
}
/**
*
@ -403,11 +427,73 @@ export interface InlineResponse2001 {
previous?: string | null;
/**
*
* @type {Array<RecipeOverview>}
* @type {Array<Food>}
* @memberof InlineResponse2001
*/
results?: Array<Food>;
}
/**
*
* @export
* @interface InlineResponse2002
*/
export interface InlineResponse2002 {
/**
*
* @type {number}
* @memberof InlineResponse2002
*/
count?: number;
/**
*
* @type {string}
* @memberof InlineResponse2002
*/
next?: string | null;
/**
*
* @type {string}
* @memberof InlineResponse2002
*/
previous?: string | null;
/**
*
* @type {Array<RecipeOverview>}
* @memberof InlineResponse2002
*/
results?: Array<RecipeOverview>;
}
/**
*
* @export
* @interface InlineResponse2003
*/
export interface InlineResponse2003 {
/**
*
* @type {number}
* @memberof InlineResponse2003
*/
count?: number;
/**
*
* @type {string}
* @memberof InlineResponse2003
*/
next?: string | null;
/**
*
* @type {string}
* @memberof InlineResponse2003
*/
previous?: string | null;
/**
*
* @type {Array<SupermarketCategoryRelation>}
* @memberof InlineResponse2003
*/
results?: Array<SupermarketCategoryRelation>;
}
/**
*
* @export
@ -1692,6 +1778,30 @@ export interface StepFood {
* @memberof StepFood
*/
supermarket_category?: FoodSupermarketCategory | null;
/**
*
* @type {string}
* @memberof StepFood
*/
image?: string;
/**
*
* @type {string}
* @memberof StepFood
*/
parent?: string;
/**
*
* @type {number}
* @memberof StepFood
*/
numchild?: number;
/**
*
* @type {string}
* @memberof StepFood
*/
numrecipe?: string;
}
/**
*
@ -3927,10 +4037,15 @@ export const ApiApiAxiosParamCreator = function (configuration?: Configuration)
},
/**
*
* @param {string} [query] Query string matched against food name.
* @param {number} [root] Return first level children of food with ID [int]. Integer 0 will return root foods.
* @param {number} [tree] Return all self and children of food with ID [int].
* @param {number} [page] A page number within the paginated result set.
* @param {number} [pageSize] Number of results to return per page.
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
listFoods: async (options: any = {}): Promise<RequestArgs> => {
listFoods: async (query?: string, root?: number, tree?: number, page?: number, pageSize?: number, options: any = {}): Promise<RequestArgs> => {
const localVarPath = `/api/food/`;
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
@ -3943,6 +4058,26 @@ export const ApiApiAxiosParamCreator = function (configuration?: Configuration)
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
if (query !== undefined) {
localVarQueryParameter['query'] = query;
}
if (root !== undefined) {
localVarQueryParameter['root'] = root;
}
if (tree !== undefined) {
localVarQueryParameter['tree'] = tree;
}
if (page !== undefined) {
localVarQueryParameter['page'] = page;
}
if (pageSize !== undefined) {
localVarQueryParameter['page_size'] = pageSize;
}
setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
@ -4418,10 +4553,12 @@ export const ApiApiAxiosParamCreator = function (configuration?: Configuration)
},
/**
*
* @param {number} [page] A page number within the paginated result set.
* @param {number} [pageSize] Number of results to return per page.
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
listSupermarketCategoryRelations: async (options: any = {}): Promise<RequestArgs> => {
listSupermarketCategoryRelations: async (page?: number, pageSize?: number, options: any = {}): Promise<RequestArgs> => {
const localVarPath = `/api/supermarket-category-relation/`;
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
@ -4434,6 +4571,14 @@ export const ApiApiAxiosParamCreator = function (configuration?: Configuration)
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
if (page !== undefined) {
localVarQueryParameter['page'] = page;
}
if (pageSize !== undefined) {
localVarQueryParameter['page_size'] = pageSize;
}
setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
@ -4706,6 +4851,47 @@ export const ApiApiAxiosParamCreator = function (configuration?: Configuration)
options: localVarRequestOptions,
};
},
/**
*
* @param {string} id A unique integer value identifying this food.
* @param {string} target
* @param {Food} [food]
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
mergeFood: async (id: string, target: string, food?: Food, options: any = {}): Promise<RequestArgs> => {
// verify required parameter 'id' is not null or undefined
assertParamExists('mergeFood', 'id', id)
// verify required parameter 'target' is not null or undefined
assertParamExists('mergeFood', 'target', target)
const localVarPath = `/api/food/{id}/merge/{target}/`
.replace(`{${"id"}}`, encodeURIComponent(String(id)))
.replace(`{${"target"}}`, encodeURIComponent(String(target)));
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
let baseOptions;
if (configuration) {
baseOptions = configuration.baseOptions;
}
const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
localVarHeaderParameter['Content-Type'] = 'application/json';
setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
localVarRequestOptions.data = serializeDataIfNeeded(food, localVarRequestOptions, configuration)
return {
url: toPathString(localVarUrlObj),
options: localVarRequestOptions,
};
},
/**
*
* @param {string} id A unique integer value identifying this keyword.
@ -4747,6 +4933,47 @@ export const ApiApiAxiosParamCreator = function (configuration?: Configuration)
options: localVarRequestOptions,
};
},
/**
*
* @param {string} id A unique integer value identifying this food.
* @param {string} parent
* @param {Food} [food]
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
moveFood: async (id: string, parent: string, food?: Food, options: any = {}): Promise<RequestArgs> => {
// verify required parameter 'id' is not null or undefined
assertParamExists('moveFood', 'id', id)
// verify required parameter 'parent' is not null or undefined
assertParamExists('moveFood', 'parent', parent)
const localVarPath = `/api/food/{id}/move/{parent}/`
.replace(`{${"id"}}`, encodeURIComponent(String(id)))
.replace(`{${"parent"}}`, encodeURIComponent(String(parent)));
// use dummy base URL string because the URL constructor only accepts absolute URLs.
const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
let baseOptions;
if (configuration) {
baseOptions = configuration.baseOptions;
}
const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
localVarHeaderParameter['Content-Type'] = 'application/json';
setSearchParams(localVarUrlObj, localVarQueryParameter, options.query);
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
localVarRequestOptions.data = serializeDataIfNeeded(food, localVarRequestOptions, configuration)
return {
url: toPathString(localVarUrlObj),
options: localVarRequestOptions,
};
},
/**
*
* @param {string} id A unique integer value identifying this keyword.
@ -7990,11 +8217,16 @@ export const ApiApiFp = function(configuration?: Configuration) {
},
/**
*
* @param {string} [query] Query string matched against food name.
* @param {number} [root] Return first level children of food with ID [int]. Integer 0 will return root foods.
* @param {number} [tree] Return all self and children of food with ID [int].
* @param {number} [page] A page number within the paginated result set.
* @param {number} [pageSize] Number of results to return per page.
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async listFoods(options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<Food>>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.listFoods(options);
async listFoods(query?: string, root?: number, tree?: number, page?: number, pageSize?: number, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<InlineResponse2001>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.listFoods(query, root, tree, page, pageSize, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
@ -8082,7 +8314,7 @@ export const ApiApiFp = function(configuration?: Configuration) {
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async listRecipes(query?: string, keywords?: string, foods?: string, books?: string, keywordsOr?: string, foodsOr?: string, booksOr?: string, internal?: string, random?: string, _new?: string, page?: number, pageSize?: number, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<InlineResponse2001>> {
async listRecipes(query?: string, keywords?: string, foods?: string, books?: string, keywordsOr?: string, foodsOr?: string, booksOr?: string, internal?: string, random?: string, _new?: string, page?: number, pageSize?: number, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<InlineResponse2002>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.listRecipes(query, keywords, foods, books, keywordsOr, foodsOr, booksOr, internal, random, _new, page, pageSize, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
@ -8133,11 +8365,13 @@ export const ApiApiFp = function(configuration?: Configuration) {
},
/**
*
* @param {number} [page] A page number within the paginated result set.
* @param {number} [pageSize] Number of results to return per page.
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async listSupermarketCategoryRelations(options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<SupermarketCategoryRelation>>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.listSupermarketCategoryRelations(options);
async listSupermarketCategoryRelations(page?: number, pageSize?: number, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<InlineResponse2003>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.listSupermarketCategoryRelations(page, pageSize, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
@ -8221,6 +8455,18 @@ export const ApiApiFp = function(configuration?: Configuration) {
const localVarAxiosArgs = await localVarAxiosParamCreator.listViewLogs(options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
*
* @param {string} id A unique integer value identifying this food.
* @param {string} target
* @param {Food} [food]
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async mergeFood(id: string, target: string, food?: Food, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Food>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.mergeFood(id, target, food, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
*
* @param {string} id A unique integer value identifying this keyword.
@ -8233,6 +8479,18 @@ export const ApiApiFp = function(configuration?: Configuration) {
const localVarAxiosArgs = await localVarAxiosParamCreator.mergeKeyword(id, target, keyword, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
*
* @param {string} id A unique integer value identifying this food.
* @param {string} parent
* @param {Food} [food]
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async moveFood(id: string, parent: string, food?: Food, options?: any): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Food>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.moveFood(id, parent, food, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
*
* @param {string} id A unique integer value identifying this keyword.
@ -9512,11 +9770,16 @@ export const ApiApiFactory = function (configuration?: Configuration, basePath?:
},
/**
*
* @param {string} [query] Query string matched against food name.
* @param {number} [root] Return first level children of food with ID [int]. Integer 0 will return root foods.
* @param {number} [tree] Return all self and children of food with ID [int].
* @param {number} [page] A page number within the paginated result set.
* @param {number} [pageSize] Number of results to return per page.
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
listFoods(options?: any): AxiosPromise<Array<Food>> {
return localVarFp.listFoods(options).then((request) => request(axios, basePath));
listFoods(query?: string, root?: number, tree?: number, page?: number, pageSize?: number, options?: any): AxiosPromise<InlineResponse2001> {
return localVarFp.listFoods(query, root, tree, page, pageSize, options).then((request) => request(axios, basePath));
},
/**
*
@ -9596,7 +9859,7 @@ export const ApiApiFactory = function (configuration?: Configuration, basePath?:
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
listRecipes(query?: string, keywords?: string, foods?: string, books?: string, keywordsOr?: string, foodsOr?: string, booksOr?: string, internal?: string, random?: string, _new?: string, page?: number, pageSize?: number, options?: any): AxiosPromise<InlineResponse2001> {
listRecipes(query?: string, keywords?: string, foods?: string, books?: string, keywordsOr?: string, foodsOr?: string, booksOr?: string, internal?: string, random?: string, _new?: string, page?: number, pageSize?: number, options?: any): AxiosPromise<InlineResponse2002> {
return localVarFp.listRecipes(query, keywords, foods, books, keywordsOr, foodsOr, booksOr, internal, random, _new, page, pageSize, options).then((request) => request(axios, basePath));
},
/**
@ -9641,11 +9904,13 @@ export const ApiApiFactory = function (configuration?: Configuration, basePath?:
},
/**
*
* @param {number} [page] A page number within the paginated result set.
* @param {number} [pageSize] Number of results to return per page.
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
listSupermarketCategoryRelations(options?: any): AxiosPromise<Array<SupermarketCategoryRelation>> {
return localVarFp.listSupermarketCategoryRelations(options).then((request) => request(axios, basePath));
listSupermarketCategoryRelations(page?: number, pageSize?: number, options?: any): AxiosPromise<InlineResponse2003> {
return localVarFp.listSupermarketCategoryRelations(page, pageSize, options).then((request) => request(axios, basePath));
},
/**
*
@ -9719,6 +9984,17 @@ export const ApiApiFactory = function (configuration?: Configuration, basePath?:
listViewLogs(options?: any): AxiosPromise<Array<ViewLog>> {
return localVarFp.listViewLogs(options).then((request) => request(axios, basePath));
},
/**
*
* @param {string} id A unique integer value identifying this food.
* @param {string} target
* @param {Food} [food]
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
mergeFood(id: string, target: string, food?: Food, options?: any): AxiosPromise<Food> {
return localVarFp.mergeFood(id, target, food, options).then((request) => request(axios, basePath));
},
/**
*
* @param {string} id A unique integer value identifying this keyword.
@ -9730,6 +10006,17 @@ export const ApiApiFactory = function (configuration?: Configuration, basePath?:
mergeKeyword(id: string, target: string, keyword?: Keyword, options?: any): AxiosPromise<Keyword> {
return localVarFp.mergeKeyword(id, target, keyword, options).then((request) => request(axios, basePath));
},
/**
*
* @param {string} id A unique integer value identifying this food.
* @param {string} parent
* @param {Food} [food]
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
moveFood(id: string, parent: string, food?: Food, options?: any): AxiosPromise<Food> {
return localVarFp.moveFood(id, parent, food, options).then((request) => request(axios, basePath));
},
/**
*
* @param {string} id A unique integer value identifying this keyword.
@ -11036,12 +11323,17 @@ export class ApiApi extends BaseAPI {
/**
*
* @param {string} [query] Query string matched against food name.
* @param {number} [root] Return first level children of food with ID [int]. Integer 0 will return root foods.
* @param {number} [tree] Return all self and children of food with ID [int].
* @param {number} [page] A page number within the paginated result set.
* @param {number} [pageSize] Number of results to return per page.
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof ApiApi
*/
public listFoods(options?: any) {
return ApiApiFp(this.configuration).listFoods(options).then((request) => request(this.axios, this.basePath));
public listFoods(query?: string, root?: number, tree?: number, page?: number, pageSize?: number, options?: any) {
return ApiApiFp(this.configuration).listFoods(query, root, tree, page, pageSize, options).then((request) => request(this.axios, this.basePath));
}
/**
@ -11193,12 +11485,14 @@ export class ApiApi extends BaseAPI {
/**
*
* @param {number} [page] A page number within the paginated result set.
* @param {number} [pageSize] Number of results to return per page.
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof ApiApi
*/
public listSupermarketCategoryRelations(options?: any) {
return ApiApiFp(this.configuration).listSupermarketCategoryRelations(options).then((request) => request(this.axios, this.basePath));
public listSupermarketCategoryRelations(page?: number, pageSize?: number, options?: any) {
return ApiApiFp(this.configuration).listSupermarketCategoryRelations(page, pageSize, options).then((request) => request(this.axios, this.basePath));
}
/**
@ -11291,6 +11585,19 @@ export class ApiApi extends BaseAPI {
return ApiApiFp(this.configuration).listViewLogs(options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {string} id A unique integer value identifying this food.
* @param {string} target
* @param {Food} [food]
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof ApiApi
*/
public mergeFood(id: string, target: string, food?: Food, options?: any) {
return ApiApiFp(this.configuration).mergeFood(id, target, food, options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {string} id A unique integer value identifying this keyword.
@ -11304,6 +11611,19 @@ export class ApiApi extends BaseAPI {
return ApiApiFp(this.configuration).mergeKeyword(id, target, keyword, options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {string} id A unique integer value identifying this food.
* @param {string} parent
* @param {Food} [food]
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof ApiApi
*/
public moveFood(id: string, parent: string, food?: Food, options?: any) {
return ApiApiFp(this.configuration).moveFood(id, parent, food, options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {string} id A unique integer value identifying this keyword.

250
vue/src/utils/utils.js
View File

@ -48,7 +48,7 @@ export class StandardToasts {
makeToast(i18n.tc('Success'), i18n.tc('success_deleting_resource'), 'success')
break;
case StandardToasts.FAIL_CREATE:
makeToast(i18n.tc('Failure'), i18n.tc('success_creating_resource'), 'danger')
makeToast(i18n.tc('Failure'), i18n.tc('err_creating_resource'), 'danger')
break;
case StandardToasts.FAIL_FETCH:
makeToast(i18n.tc('Failure'), i18n.tc('err_fetching_resource'), 'danger')
@ -152,3 +152,251 @@ export function roundDecimals(num) {
let decimals = ((getUserPreference('user_fractions')) ? getUserPreference('user_fractions') : 2);
return +(Math.round(num + `e+${decimals}`) + `e-${decimals}`);
}
/*
* Utility functions to use OpenAPIs generically
* */
import {ApiApiFactory} from "@/utils/openapi/api.ts"; // TODO: is it possible to only import inside the Mixin?
import axios from "axios";
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
import { Actions, Models } from './models';
export const ApiMixin = {
data() {
return {
Models: Models,
Actions: Actions
}
},
methods: {
genericAPI: function(model, action, options) {
let setup = getConfig(model, action)
let func = setup.function
let config = setup?.config ?? {}
let params = setup?.params ?? []
let parameters = []
let this_value = undefined
params.forEach(function (item, index) {
if (Array.isArray(item)) {
this_value = {}
// if the value is an array, convert it to a dictionary of key:value
// filtered based on OPTIONS passed
// maybe map/reduce is better?
for (const [k, v] of Object.entries(options)) {
if (item.includes(k)) {
this_value[k] = formatParam(config?.[k], v)
}
}
} else {
this_value = formatParam(config?.[item], options?.[item] ?? undefined)
}
// if no value is found so far, get the default if it exists
if (this_value === undefined) {
this_value = getDefault(config?.[item], options)
}
parameters.push(this_value)
});
let apiClient = new ApiApiFactory()
return apiClient[func](...parameters)
}
}
}
// /*
// * local functions for ApiMixin
// * */
function formatParam(config, value) {
if (config) {
for (const [k, v] of Object.entries(config)) {
switch(k) {
case 'type':
switch(v) {
case 'string':
if (value !== undefined){
value = String(value)
}
break;
case 'integer':
value = parseInt(value)
}
break;
}
}
}
return value
}
function getDefault(config, options) {
let value = undefined
value = config?.default ?? undefined
if (typeof(value) === 'object') {
let condition = false
switch(value.function) {
// CONDITIONAL case requires 4 keys:
// - check: which other OPTIONS key to check against
// - operator: what type of operation to perform
// - true: what value to assign when true
// - false: what value to assign when false
case 'CONDITIONAL':
switch(value.operator) {
case 'not_exist':
condition = (
(!options?.[value.check] ?? undefined)
|| options?.[value.check]?.length == 0
)
if (condition) {
value = value.true
} else {
value = value.false
}
break;
}
break;
}
}
return value
}
function getConfig(model, action) {
let f = action.function
// if not defined partialUpdate will use params from create
if (f === 'partialUpdate' && !model?.[f]?.params) {
model[f] = {'params': [...['id'], ...model.create.params]}
}
let config = {
'name': model.name,
'apiName': model.apiName,
}
// spread operator merges dictionaries - last item in list takes precedence
config = {...config, ...action, ...model.model_type?.[f], ...model?.[f]}
// nested dictionaries are not merged - so merge again on any nested keys
config.config = {...action?.config, ...model.model_type?.[f]?.config, ...model?.[f]?.config}
config['function'] = f + config.apiName + (config?.suffix ?? '') // parens are required to force optional chaining to evaluate before concat
return config
}
// /*
// * functions for Generic Modal Forms
// * */
export function getForm(model, action, item1, item2) {
let f = action.function
let config = {...action?.form, ...model.model_type?.[f]?.form, ...model?.[f]?.form}
// if not defined partialUpdate will use form from create
if (f === 'partialUpdate' && Object.keys(config).length == 0) {
config = {...Actions.CREATE?.form, ...model.model_type?.['create']?.form, ...model?.['create']?.form}
config['title'] = {...action?.form_title, ...model.model_type?.[f]?.form_title, ...model?.[f]?.form_title}
}
let form = {'fields': []}
let value = ''
for (const [k, v] of Object.entries(config)) {
if (v?.function){
switch(v.function) {
case 'translate':
value = formTranslate(v, model, item1, item2)
}
} else {
value = v
}
if (value?.form_field) {
value['value'] = item1?.[value?.field] ?? undefined
form.fields.push(
{
...value,
...{
'label': formTranslate(value?.label, model, item1, item2),
'placeholder': formTranslate(value?.placeholder, model, item1, item2)
}
}
)
} else {
form[k] = value
}
}
return form
}
function formTranslate(translate, model, item1, item2) {
if (typeof(translate) !== 'object') {return translate}
let phrase = translate.phrase
let options = {}
let obj = undefined
translate?.params.forEach(function (x, index) {
switch(x.from){
case 'item1':
obj = item1
break;
case 'item2':
obj = item2
break;
case 'model':
obj = model
}
options[x.token] = obj[x.attribute]
})
return i18n.t(phrase, options)
}
// /*
// * Utility functions to use manipulate nested components
// * */
import Vue from 'vue'
export const CardMixin = {
methods: {
findCard: function(id, card_list){
let card_length = card_list?.length ?? 0
if (card_length == 0) {
return false
}
let cards = card_list.filter(obj => obj.id == id)
if (cards.length == 1) {
return cards[0]
} else if (cards.length == 0) {
for (const c of card_list.filter(x => x.show_children == true)) {
cards = this.findCard(id, c.children)
if (cards) {
return cards
}
}
} else {
console.log('something terrible happened')
}
},
destroyCard: function(id, card_list) {
let card = this.findCard(id, card_list)
let p_id = card?.parent ?? undefined
if (p_id) {
let parent = this.findCard(p_id, card_list)
if (parent){
Vue.set(parent, 'numchild', parent.numchild - 1)
if (parent.show_children) {
let idx = parent.children.indexOf(parent.children.find(x => x.id === id))
Vue.delete(parent.children, idx)
}
}
}
return card_list.filter(x => x.id != id)
},
refreshCard: function(obj, card_list){
let target = {}
let idx = undefined
target = this.findCard(obj.id, card_list)
if (target?.parent) {
let parent = this.findCard(target.parent, card_list)
if (parent) {
if (parent.show_children){
idx = parent.children.indexOf(parent.children.find(x => x.id === target.id))
Vue.set(parent.children, idx, obj)
}
}
} else if (target) {
idx = card_list.indexOf(card_list.find(x => x.id === target.id))
Vue.set(card_list, idx, obj)
}
},
}
}