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

add new unit/food from shopping list

Browse Source
This commit is contained in:
smilerz
2021-10-31 13:33:15 -05:00
parent 757fa5e49c
commit 867e2d4fbf
16 changed files with 1061 additions and 1106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
vue/src/apps/ShoppingListView/ShoppingListView.vue
View File

@ -25,24 +25,10 @@
<b-form-input min="1" type="number" :description="$t('Amount')" v-model="new_item.amount"></b-form-input>
</div>
<div class="col col-md-3">
<generic-multiselect
@change="new_item.unit = $event.val"
:model="Models.UNIT"
:multiple="false"
:allow_create="false"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
:placeholder="$t('Unit')"
/>
<lookup-input :form="formUnit" :model="Models.UNIT" @change="new_item.unit = $event" :show_label="false" />
</div>
<div class="col col-md-4">
<generic-multiselect
@change="new_item.food = $event.val"
:model="Models.FOOD"
:multiple="false"
:allow_create="false"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
:placeholder="$t('Food')"
/>
<lookup-input :form="formFood" :model="Models.FOOD" @change="new_item.food = $event" :show_label="false" />
</div>
<div class="col col-md-1 ">
<b-button variant="link" class="px-0">
@ -107,7 +93,7 @@
</tr>
</table>
</b-tab>
<!-- settings tab -->
<!-- supermarkets tab -->
<b-tab :title="$t('Supermarkets')">
<div class="row justify-content-center">
<div class="col col-md-5">
@ -183,9 +169,7 @@
</div>
</b-card>
<b-card-sub-title v-if="new_supermarket.editmode" class="pt-0 pb-3"
>Drag categories to change the order categories appear in shopping list.</b-card-sub-title
>
<b-card-sub-title v-if="new_supermarket.editmode" class="pt-0 pb-3">{{ $t("CategoryInstruction") }}</b-card-sub-title>
<b-card
v-if="new_supermarket.editmode && supermarketCategory.length === 0"
class="m-0 p-0 font-weight-bold no-body"
@ -328,6 +312,20 @@
</em>
</div>
</div>
<div class="row">
<div class="col col-md-6">{{ $t("shopping_recent_days") }}</div>
<div class="col col-md-6 text-right">
<input type="number" size="sm" v-model="settings.shopping_recent_days" @change="saveSettings" />
</div>
</div>
<div class="row sm mb-3">
<div class="col">
<em class="small text-muted">
{{ $t("shopping_recent_days_desc") }}
</em>
</div>
</div>
<div class="row">
<div class="col col-md-6">{{ $t("filter_to_supermarket") }}</div>
<div class="col col-md-6 text-right">
@ -459,6 +457,7 @@ import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem"
import ShoppingLineItem from "@/components/ShoppingLineItem"
import GenericMultiselect from "@/components/GenericMultiselect"
import GenericPill from "@/components/GenericPill"
import LookupInput from "@/components/Modals/LookupInput"
import draggable from "vuedraggable"
import { ApiMixin, getUserPreference } from "@/utils/utils"
@ -470,7 +469,7 @@ Vue.use(BootstrapVue)
export default {
name: "ShoppingListView",
mixins: [ApiMixin],
components: { ContextMenu, ContextMenuItem, ShoppingLineItem, GenericMultiselect, GenericPill, draggable },
components: { ContextMenu, ContextMenuItem, ShoppingLineItem, GenericMultiselect, GenericPill, draggable, LookupInput },
data() {
return {
@ -492,6 +491,7 @@ export default {
mealplan_autoinclude_related: false,
mealplan_autoexclude_onhand: true,
filter_to_supermarket: false,
shopping_recent_days: 7,
},
new_supermarket: { entrymode: false, value: undefined, editmode: undefined },
new_category: { entrymode: false, value: undefined },
@ -577,6 +577,16 @@ export default {
defaultDelay() {
return getUserPreference("default_delay") || 2
},
formUnit() {
let unit = this.Models.SHOPPING_LIST.create.form.unit
unit.value = this.new_item.unit
return unit
},
formFood() {
let food = this.Models.SHOPPING_LIST.create.form.food
food.value = this.new_item.food
return food
},
itemsDelayed() {
return this.items.filter((x) => !x.delay_until || !Date.parse(x?.delay_until) > new Date(Date.now())).length < this.items.length
},
@ -647,6 +657,10 @@ export default {
},
methods: {
// this.genericAPI inherited from ApiMixin
test(e) {
this.new_item.unit = e
console.log(e, this.new_item, this.formUnit)
},
addItem() {
let api = new ApiApiFactory()
api.createShoppingListEntry(this.new_item)

321
vue/src/apps/SupermarketView/SupermarketView.vue
View File

@ -1,201 +1,178 @@
<template>
<!-- TODO: Deprecate -->
<div id="app">
<div class="row">
<div class="col col-md-12">
<h2>{{ $t("Supermarket") }}</h2>
<div id="app">
<multiselect v-model="selected_supermarket" track-by="id" label="name" :options="supermarkets" @input="selectedSupermarketChanged"> </multiselect>
<div class="row">
<b-button class="btn btn-primary btn-block" style="margin-top: 1vh" v-b-modal.modal-supermarket>
{{ $t("Edit") }}
</b-button>
<b-button class="btn btn-success btn-block" @click="selected_supermarket = { new: true, name: '' }" v-b-modal.modal-supermarket>{{ $t("New") }} </b-button>
</div>
</div>
<div class="col col-md-12">
<h2>{{ $t('Supermarket') }}</h2>
<hr />
<multiselect v-model="selected_supermarket" track-by="id" label="name"
:options="supermarkets" @input="selectedSupermarketChanged">
</multiselect>
<div class="row">
<div class="col col-md-6">
<h4>
{{ $t("Categories") }}
<button class="btn btn-success btn-sm" @click="selected_category = { new: true, name: '' }" v-b-modal.modal-category>{{ $t("New") }}</button>
</h4>
<b-button class="btn btn-primary btn-block" style="margin-top: 1vh" v-b-modal.modal-supermarket>
{{ $t('Edit') }}
</b-button>
<b-button class="btn btn-success btn-block" @click="selected_supermarket = {new:true, name:''}"
v-b-modal.modal-supermarket>{{ $t('New') }}
</b-button>
</div>
<draggable :list="selectable_categories" group="supermarket_categories" :empty-insert-threshold="10">
<div v-for="c in selectable_categories" :key="c.id">
<button class="btn btn-block btn-sm btn-primary" style="margin-top: 0.5vh">{{ c.name }}</button>
</div>
</draggable>
</div>
<div class="col col-md-6">
<h4>{{ $t("Selected") }} {{ $t("Categories") }}</h4>
<draggable :list="supermarket_categories" group="supermarket_categories" :empty-insert-threshold="10" @change="selectedCategoriesChanged">
<div v-for="c in supermarket_categories" :key="c.id">
<button class="btn btn-block btn-sm btn-primary" style="margin-top: 0.5vh">{{ c.name }}</button>
</div>
</draggable>
</div>
</div>
<!-- EDIT MODALS -->
<b-modal id="modal-supermarket" v-bind:title="$t('Supermarket')" @ok="supermarketModalOk()">
<label v-if="selected_supermarket !== undefined">
{{ $t("Name") }}
<b-input v-model="selected_supermarket.name"></b-input>
</label>
</b-modal>
<b-modal id="modal-category" v-bind:title="$t('Category')" @ok="categoryModalOk()">
<label v-if="selected_category !== undefined">
{{ $t("Name") }}
<b-input v-model="selected_category.name"></b-input>
</label>
</b-modal>
</div>
<hr>
<div class="row">
<div class="col col-md-6">
<h4>{{ $t('Categories') }}
<button class="btn btn-success btn-sm" @click="selected_category = {new:true, name:''}"
v-b-modal.modal-category>{{ $t('New') }}
</button>
</h4>
<draggable :list="selectable_categories" group="supermarket_categories"
:empty-insert-threshold="10">
<div v-for="c in selectable_categories" :key="c.id">
<button class="btn btn-block btn-sm btn-primary" style="margin-top: 0.5vh">{{ c.name }}</button>
</div>
</draggable>
</div>
<div class="col col-md-6">
<h4>{{ $t('Selected') }} {{ $t('Categories') }}</h4>
<draggable :list="supermarket_categories" group="supermarket_categories"
:empty-insert-threshold="10" @change="selectedCategoriesChanged">
<div v-for="c in supermarket_categories" :key="c.id">
<button class="btn btn-block btn-sm btn-primary" style="margin-top: 0.5vh">{{ c.name }}</button>
</div>
</draggable>
</div>
</div>
<!-- EDIT MODALS -->
<b-modal id="modal-supermarket" v-bind:title="$t('Supermarket')" @ok="supermarketModalOk()">
<label v-if="selected_supermarket !== undefined">
{{ $t('Name') }}
<b-input v-model="selected_supermarket.name"></b-input>
</label>
</b-modal>
<b-modal id="modal-category" v-bind:title="$t('Category')" @ok="categoryModalOk()">
<label v-if="selected_category !== undefined">
{{ $t('Name') }}
<b-input v-model="selected_category.name"></b-input>
</label>
</b-modal>
</div>
</template>
<script>
import Vue from 'vue'
import {BootstrapVue} from 'bootstrap-vue'
import Vue from "vue"
import { BootstrapVue } from "bootstrap-vue"
import 'bootstrap-vue/dist/bootstrap-vue.css'
import "bootstrap-vue/dist/bootstrap-vue.css"
import {ResolveUrlMixin, ToastMixin} from "@/utils/utils";
import { ResolveUrlMixin, ToastMixin } from "@/utils/utils"
import {ApiApiFactory} from "@/utils/openapi/api.ts";
import { ApiApiFactory } from "@/utils/openapi/api.ts"
Vue.use(BootstrapVue)
import draggable from 'vuedraggable'
import draggable from "vuedraggable"
import axios from 'axios'
import Multiselect from "vue-multiselect";
import axios from "axios"
import Multiselect from "vue-multiselect"
axios.defaults.xsrfHeaderName = 'X-CSRFToken'
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFToken"
axios.defaults.xsrfCookieName = "csrftoken"
export default {
name: 'SupermarketView',
mixins: [
ResolveUrlMixin,
ToastMixin,
],
components: {
Multiselect,
draggable
},
data() {
return {
supermarkets: [],
categories: [],
selected_supermarket: {},
selected_category: {},
selectable_categories: [],
supermarket_categories: [],
}
},
mounted() {
this.$i18n.locale = window.CUSTOM_LOCALE
this.loadInitial()
},
methods: {
loadInitial: function () {
let apiClient = new ApiApiFactory()
apiClient.listSupermarkets().then(results => {
this.supermarkets = results.data
})
apiClient.listSupermarketCategorys().then(results => {
this.categories = results.data
this.selectable_categories = this.categories
})
name: "SupermarketView",
mixins: [ResolveUrlMixin, ToastMixin],
components: {
Multiselect,
draggable,
},
selectedCategoriesChanged: function (data) {
let apiClient = new ApiApiFactory()
data() {
return {
supermarkets: [],
categories: [],
if ('removed' in data) {
let relation = this.selected_supermarket.category_to_supermarket.filter((el) => el.category.id === data.removed.element.id)[0]
apiClient.destroySupermarketCategoryRelation(relation.id)
}
selected_supermarket: {},
selected_category: {},
if ('added' in data) {
apiClient.createSupermarketCategoryRelation({
category: data.added.element,
supermarket: this.selected_supermarket.id, order: 0
}).then(results => {
this.selected_supermarket.category_to_supermarket.push(results.data)
})
}
if ('moved' in data || 'added' in data) {
this.supermarket_categories.forEach( (element,index) =>{
let relation = this.selected_supermarket.category_to_supermarket.filter((el) => el.category.id === element.id)[0]
console.log(relation)
apiClient.partialUpdateSupermarketCategoryRelation(relation.id, {order: index})
})
}
selectable_categories: [],
supermarket_categories: [],
}
},
selectedSupermarketChanged: function (supermarket, id) {
this.supermarket_categories = []
this.selectable_categories = this.categories
for (let i of supermarket.category_to_supermarket) {
this.supermarket_categories.push(i.category)
this.selectable_categories = this.selectable_categories.filter(function (el) {
return el.id !== i.category.id
});
}
mounted() {
this.$i18n.locale = window.CUSTOM_LOCALE
this.loadInitial()
},
supermarketModalOk: function () {
let apiClient = new ApiApiFactory()
if (this.selected_supermarket.new) {
apiClient.createSupermarket({name: this.selected_supermarket.name}).then(results => {
this.selected_supermarket = undefined
this.loadInitial()
})
} else {
apiClient.partialUpdateSupermarket(this.selected_supermarket.id, {name: this.selected_supermarket.name})
methods: {
loadInitial: function() {
let apiClient = new ApiApiFactory()
apiClient.listSupermarkets().then((results) => {
this.supermarkets = results.data
})
apiClient.listSupermarketCategorys().then((results) => {
this.categories = results.data
this.selectable_categories = this.categories
})
},
selectedCategoriesChanged: function(data) {
let apiClient = new ApiApiFactory()
}
if ("removed" in data) {
let relation = this.selected_supermarket.category_to_supermarket.filter((el) => el.category.id === data.removed.element.id)[0]
apiClient.destroySupermarketCategoryRelation(relation.id)
}
if ("added" in data) {
apiClient
.createSupermarketCategoryRelation({
category: data.added.element,
supermarket: this.selected_supermarket.id,
order: 0,
})
.then((results) => {
this.selected_supermarket.category_to_supermarket.push(results.data)
})
}
if ("moved" in data || "added" in data) {
this.supermarket_categories.forEach((element, index) => {
let relation = this.selected_supermarket.category_to_supermarket.filter((el) => el.category.id === element.id)[0]
console.log(relation)
apiClient.partialUpdateSupermarketCategoryRelation(relation.id, { order: index })
})
}
},
selectedSupermarketChanged: function(supermarket, id) {
this.supermarket_categories = []
this.selectable_categories = this.categories
for (let i of supermarket.category_to_supermarket) {
this.supermarket_categories.push(i.category)
this.selectable_categories = this.selectable_categories.filter(function(el) {
return el.id !== i.category.id
})
}
},
supermarketModalOk: function() {
let apiClient = new ApiApiFactory()
if (this.selected_supermarket.new) {
apiClient.createSupermarket({ name: this.selected_supermarket.name }).then((results) => {
this.selected_supermarket = undefined
this.loadInitial()
})
} else {
apiClient.partialUpdateSupermarket(this.selected_supermarket.id, { name: this.selected_supermarket.name })
}
},
categoryModalOk: function() {
let apiClient = new ApiApiFactory()
if (this.selected_category.new) {
apiClient.createSupermarketCategory({ name: this.selected_category.name }).then((results) => {
this.selected_category = {}
this.loadInitial()
})
} else {
apiClient.partialUpdateSupermarketCategory(this.selected_category.id, { name: this.selected_category.name })
}
},
},
categoryModalOk: function () {
let apiClient = new ApiApiFactory()
if (this.selected_category.new) {
apiClient.createSupermarketCategory({name: this.selected_category.name}).then(results => {
this.selected_category = {}
this.loadInitial()
})
} else {
apiClient.partialUpdateSupermarketCategory(this.selected_category.id, {name: this.selected_category.name})
}
}
}
}
</script>
<style>
</style>
<style></style>

1
vue/src/components/Modals/GenericModalForm.vue
View File

@ -8,7 +8,6 @@
<p v-if="f.type == 'instruction'">{{ f.label }}</p>
<!-- this lookup is single selection -->
<lookup-input v-if="f.type == 'lookup'" :form="f" :model="listModel(f.list)" @change="storeValue" />
<!-- TODO add ability to create new items associated with lookup -->
<!-- TODO: add multi-selection input list -->
<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" />

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

@ -238,7 +238,6 @@
"mealplan_autoinclude_related_desc": "When adding a meal plan to the shopping list (manually or automatically), include all related recipes.",
"default_delay_desc": "Default number of hours to delay a shopping list entry.",
"filter_to_supermarket": "Filter to Supermarket",
"filter_to_supermarket_desc": "Filter shopping list to only include supermarket categories.",
"Week_Numbers": "Week numbers",
"Show_Week_Numbers": "Show week numbers ?",
"Export_As_ICal": "Export current period to iCal format",
@ -260,6 +259,10 @@
"nothing": "Nothing to do",
"err_merge_self": "Cannot merge item with itself",
"show_sql": "Show SQL",
"filter_to_supermarket_desc": "By default, filter shopping list to only include categories for selected supermarket.",
"CategoryName": "Category Name",
"SupermarketName": "Supermarket Name"
"SupermarketName": "Supermarket Name",
"CategoryInstruction": "Drag categories to change the order categories appear in shopping list.",
"shopping_recent_days_desc": "Days of recent shopping list entries to display.",
"shopping_recent_days": "Recent Days"
}

18
vue/src/utils/models.js
View File

@ -216,6 +216,24 @@ export class Models {
},
create: {
params: [["amount", "unit", "food", "checked"]],
form: {
unit: {
form_field: true,
type: "lookup",
field: "unit",
list: "UNIT",
label: i18n.t("Unit"),
allow_create: true,
},
food: {
form_field: true,
type: "lookup",
field: "food",
list: "FOOD",
label: i18n.t("Food"),
allow_create: true,
},
},
},
}