edit supermarket categories
This commit is contained in:
smilerz
@ -329,6 +329,9 @@ class SupermarketCategorySerializer(UniqueFieldsMixin, WritableNestedModelSerial
|
||||
class SupermarketCategoryRelationSerializer(WritableNestedModelSerializer):
|
||||
category = SupermarketCategorySerializer()
|
||||
|
||||
def get_fields(self, *args, **kwargs):
|
||||
return super().get_fields(*args, **kwargs)
|
||||
|
||||
class Meta:
|
||||
model = SupermarketCategoryRelation
|
||||
fields = ('id', 'category', 'supermarket', 'order')
|
||||
|
||||
@ -14,14 +14,16 @@
|
||||
|
||||
<b-tabs content-class="mt-3">
|
||||
<!-- shopping list tab -->
|
||||
<b-tab :title="$t('ShoppingList')" active>
|
||||
<template #title> <b-spinner v-if="loading" type="border" small></b-spinner> {{ $t("ShoppingList") }} </template>
|
||||
<b-tab active>
|
||||
<template #title> <b-spinner v-if="loading" type="border" small></b-spinner> {{ $t("Shopping_list") }} </template>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col col-md-12">
|
||||
<div role="tablist" v-if="items && items.length > 0">
|
||||
<div class="row justify-content-md-center w-75" v-if="entrymode">
|
||||
<div class="col col-md-2 "><b-form-input min="1" type="number" :description="$t('Amount')" v-model="new_item.amount"></b-form-input></div>
|
||||
<div class="col col-md-2 ">
|
||||
<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"
|
||||
@ -106,9 +108,149 @@
|
||||
</table>
|
||||
</b-tab>
|
||||
<!-- settings tab -->
|
||||
<b-tab :title="$t('Supermarkets')">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col col-md-5">
|
||||
<b-card>
|
||||
<template #header>
|
||||
<h4 class="mb-0">
|
||||
{{ $t("Supermarkets") }}
|
||||
<b-button variant="link" class="p-0 m-0 float-right" @click="new_supermarket.entrymode = !new_supermarket.entrymode">
|
||||
<i class="btn fas fa-plus-circle fa-lg px-0 " :class="new_supermarket.entrymode ? 'text-success' : 'text-muted'" />
|
||||
</b-button>
|
||||
</h4>
|
||||
</template>
|
||||
<b-card
|
||||
class="m-1 p-1 no-body"
|
||||
border-variant="success"
|
||||
header-bg-variant="success"
|
||||
header-text-variant="white"
|
||||
align="center"
|
||||
v-if="new_supermarket.entrymode"
|
||||
:header="$t('SupermarketName')"
|
||||
>
|
||||
<div class="input-group">
|
||||
<b-form-input type="text" :placeholder="$t('SupermarketName')" v-model="new_supermarket.value" />
|
||||
<b-button class="input-group-append" variant="success" @click="addSupermarket"><i class="pr-2 pt-1 fas fa-save"></i> {{ $t("Save") }}</b-button>
|
||||
</div>
|
||||
</b-card>
|
||||
|
||||
<b-card-body class="m-0 p-0">
|
||||
<b-card class=" no-body mb-2" v-for="s in supermarkets" v-bind:key="s.id">
|
||||
<b-card-title
|
||||
>{{ s.name }}
|
||||
<b-button
|
||||
variant="link"
|
||||
class="p-0 m-0 float-right"
|
||||
@click="
|
||||
s.editmode = !s.editmode
|
||||
editSupermarket(s)
|
||||
"
|
||||
>
|
||||
<i class="btn fas fa-edit fa-lg px-0 " :class="s.editmode ? 'text-success' : 'text-muted'" />
|
||||
</b-button>
|
||||
</b-card-title>
|
||||
|
||||
<b-card-body class="py-0">
|
||||
<generic-pill :item_list="s.category_to_supermarket" label="category::name" color="info"></generic-pill>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</div>
|
||||
<div class="col col-md-5">
|
||||
<b-card class="no-body">
|
||||
<template #header>
|
||||
<h4 class="mb-0">
|
||||
{{ $t("Shopping_Categories") }}
|
||||
<b-button variant="link" class="p-0 m-0 float-right" @click="new_category.entrymode = !new_category.entrymode">
|
||||
<i class="btn fas fa-plus-circle fa-lg px-0 " :class="new_category.entrymode ? 'text-success' : 'text-muted'" />
|
||||
</b-button>
|
||||
</h4>
|
||||
</template>
|
||||
<b-card
|
||||
class="m-1 p-1 no-body"
|
||||
border-variant="success"
|
||||
header-bg-variant="success"
|
||||
header-text-variant="white"
|
||||
align="center"
|
||||
v-if="new_category.entrymode"
|
||||
:header="$t('CategoryName')"
|
||||
>
|
||||
<div class="input-group">
|
||||
<b-form-input type="text" :placeholder="$t('CategoryName')" v-model="new_category.value" />
|
||||
<b-button class="input-group-append" variant="success" @click="addCategory"><i class="pr-2 pt-1 fas fa-save"></i> {{ $t("Save") }}</b-button>
|
||||
</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
|
||||
v-if="new_supermarket.editmode && supermarketCategory.length === 0"
|
||||
class="m-0 p-0 font-weight-bold no-body"
|
||||
border-variant="success"
|
||||
v-bind:key="-1"
|
||||
/>
|
||||
<draggable
|
||||
class="list-group "
|
||||
:list="supermarketCategory"
|
||||
group="category"
|
||||
@start="drag = true"
|
||||
@end="drag = false"
|
||||
ghost-class="ghost"
|
||||
@change="saveSupermarketCategoryOrder"
|
||||
v-bind="{ animation: 200, disabled: !new_supermarket.editmode }"
|
||||
>
|
||||
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
|
||||
<b-card
|
||||
class="m-0 p-0 font-weight-bold no-body list-group-item"
|
||||
:style="new_supermarket.editmode ? 'cursor:move' : ''"
|
||||
v-for="c in supermarketCategory"
|
||||
v-bind:key="c.id"
|
||||
:border-variant="new_supermarket.editmode ? 'success' : ''"
|
||||
>
|
||||
{{ categoryName(c) }}
|
||||
</b-card>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
<hr style="height:2px;;background-color:black" v-if="new_supermarket.editmode" />
|
||||
<b-card
|
||||
v-if="new_supermarket.editmode && notSupermarketCategory.length === 0"
|
||||
v-bind:key="-2"
|
||||
class="m-0 p-0 font-weight-bold no-body"
|
||||
border-variant="danger"
|
||||
/>
|
||||
<draggable
|
||||
class="list-group "
|
||||
:list="notSupermarketCategory"
|
||||
group="category"
|
||||
v-if="new_supermarket.editmode"
|
||||
@start="drag = true"
|
||||
@end="drag = false"
|
||||
ghost-class="ghost"
|
||||
v-bind="{ animation: 200 }"
|
||||
>
|
||||
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
|
||||
<b-card
|
||||
class="m-0 p-0 font-weight-bold no-body list-group-item"
|
||||
style="cursor:move"
|
||||
v-for="c in notSupermarketCategory"
|
||||
v-bind:key="c.id"
|
||||
:border-variant="'danger'"
|
||||
>
|
||||
{{ categoryName(c) }}
|
||||
</b-card>
|
||||
</transition-group>
|
||||
</draggable>
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
<!-- settings tab -->
|
||||
<b-tab :title="$t('Settings')">
|
||||
<div class="row">
|
||||
<div class="col col-md-4 ">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col col-md-4 col-sm-8 ">
|
||||
<b-card class="no-body">
|
||||
<div class="row">
|
||||
<div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div>
|
||||
@ -214,14 +356,6 @@
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
<div class="col col-md-8">
|
||||
<b-card class=" no-body">
|
||||
put the supermarket stuff here<br />
|
||||
-add supermarkets<br />
|
||||
-add supermarket categories<br />
|
||||
-sort supermarket categories<br />
|
||||
</b-card>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
@ -324,6 +458,8 @@ import ContextMenu from "@/components/ContextMenu/ContextMenu"
|
||||
import ContextMenuItem from "@/components/ContextMenu/ContextMenuItem"
|
||||
import ShoppingLineItem from "@/components/ShoppingLineItem"
|
||||
import GenericMultiselect from "@/components/GenericMultiselect"
|
||||
import GenericPill from "@/components/GenericPill"
|
||||
import draggable from "vuedraggable"
|
||||
|
||||
import { ApiMixin, getUserPreference } from "@/utils/utils"
|
||||
import { ApiApiFactory } from "@/utils/openapi/api"
|
||||
@ -334,7 +470,7 @@ Vue.use(BootstrapVue)
|
||||
export default {
|
||||
name: "ShoppingListView",
|
||||
mixins: [ApiMixin],
|
||||
components: { ContextMenu, ContextMenuItem, ShoppingLineItem, GenericMultiselect },
|
||||
components: { ContextMenu, ContextMenuItem, ShoppingLineItem, GenericMultiselect, GenericPill, draggable },
|
||||
|
||||
data() {
|
||||
return {
|
||||
@ -357,10 +493,12 @@ export default {
|
||||
mealplan_autoexclude_onhand: true,
|
||||
filter_to_supermarket: false,
|
||||
},
|
||||
|
||||
new_supermarket: { entrymode: false, value: undefined, editmode: undefined },
|
||||
new_category: { entrymode: false, value: undefined },
|
||||
autosync_id: undefined,
|
||||
auto_sync_running: false,
|
||||
show_delay: false,
|
||||
drag: false,
|
||||
show_modal: false,
|
||||
fields: ["checked", "amount", "category", "unit", "food", "recipe", "details"],
|
||||
loading: true,
|
||||
@ -448,6 +586,25 @@ export default {
|
||||
Recipes() {
|
||||
return [...new Map(this.items.filter((x) => x.list_recipe).map((item) => [item["list_recipe"], item])).values()]
|
||||
},
|
||||
supermarketCategory() {
|
||||
return this.new_supermarket.editmode ? this.new_supermarket.value.category_to_supermarket : this.shopping_categories
|
||||
},
|
||||
|
||||
notSupermarketCategory() {
|
||||
let supercats = this.new_supermarket.value.category_to_supermarket
|
||||
.map((x) => x.category)
|
||||
.flat()
|
||||
.map((x) => x.id)
|
||||
|
||||
return this.shopping_categories
|
||||
.filter((x) => !supercats.includes(x.id))
|
||||
.map((x) => {
|
||||
return {
|
||||
id: Math.random(),
|
||||
category: x,
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selected_supermarket(newVal, oldVal) {
|
||||
@ -507,9 +664,6 @@ export default {
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
|
||||
})
|
||||
},
|
||||
categoryName: function(value) {
|
||||
return this.shopping_categories.filter((x) => x.id == value)[0]?.name ?? ""
|
||||
},
|
||||
resetFilters: function() {
|
||||
this.selected_supermarket = undefined
|
||||
this.supermarket_categories_only = this.settings.filter_to_supermarket
|
||||
@ -571,6 +725,16 @@ export default {
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)
|
||||
})
|
||||
},
|
||||
editSupermarket(s) {
|
||||
if (!s.editmode) {
|
||||
this.new_supermarket = { entrymode: false, value: undefined, editmode: undefined }
|
||||
this.supermarkets.map((x) => (x.editmode = false))
|
||||
} else {
|
||||
this.new_supermarket.value = s
|
||||
this.new_supermarket.editmode = true
|
||||
this.supermarkets.filter((x) => x.id !== s.id).map((x) => (x.editmode = false))
|
||||
}
|
||||
},
|
||||
foodName: function(value) {
|
||||
return value?.food?.name ?? value?.[0]?.food?.name ?? ""
|
||||
},
|
||||
@ -769,6 +933,108 @@ export default {
|
||||
this.getShoppingList()
|
||||
})
|
||||
},
|
||||
addCategory: function() {
|
||||
let api = new ApiApiFactory()
|
||||
api.createSupermarketCategory({ name: this.new_category.value })
|
||||
.then((result) => {
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
|
||||
this.shopping_categories.push(result.data)
|
||||
this.new_category.value = undefined
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, Object.keys(err))
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
|
||||
})
|
||||
},
|
||||
addSupermarket: function() {
|
||||
let api = new ApiApiFactory()
|
||||
api.createSupermarket({ name: this.new_supermarket.value })
|
||||
.then((result) => {
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
|
||||
this.supermarkets.push(result.data)
|
||||
this.new_supermarket.value = undefined
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, Object.keys(err))
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
|
||||
})
|
||||
},
|
||||
saveSupermarketCategoryOrder(e) {
|
||||
// TODO: all of this complexity should be moved to the backend
|
||||
let apiClient = new ApiApiFactory()
|
||||
let supermarket = this.new_supermarket.value
|
||||
let temp_supermarkets = [...this.supermarkets]
|
||||
const updateMoved = function(supermarket) {
|
||||
var promises = []
|
||||
supermarket.category_to_supermarket.forEach((x, i) => {
|
||||
x.order = i
|
||||
promises.push(apiClient.partialUpdateSupermarketCategoryRelation(x.id, { order: i }))
|
||||
})
|
||||
return Promise.all(promises).then(() => {
|
||||
return supermarket
|
||||
})
|
||||
}
|
||||
|
||||
if ("removed" in e) {
|
||||
// store current value in case it needs rolled back
|
||||
let idx = this.supermarkets.indexOf((x) => x.id === supermarket.id)
|
||||
Vue.set(this.supermarkets, idx, supermarket)
|
||||
apiClient
|
||||
.destroySupermarketCategoryRelation(e.removed.element.id)
|
||||
.then((result) => {
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, Object.keys(err))
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
|
||||
this.supermarkets = temp_supermarkets
|
||||
})
|
||||
}
|
||||
|
||||
if ("added" in e) {
|
||||
let apiClient = new ApiApiFactory()
|
||||
let category = e.added.element.category
|
||||
|
||||
apiClient
|
||||
.createSupermarketCategoryRelation({
|
||||
supermarket: supermarket.id,
|
||||
category: category,
|
||||
order: e.added.element.newIndex,
|
||||
})
|
||||
.then((results) => {
|
||||
this.new_supermarket.value.category_to_supermarket.filter((x) => x.category.id === category.id)[0].id = results.data.id
|
||||
|
||||
return updateMoved(this.new_supermarket.value)
|
||||
})
|
||||
.then((updated_supermarket) => {
|
||||
let idx = this.supermarkets.indexOf((x) => x.id === updated_supermarket.id)
|
||||
Vue.set(this.supermarkets, idx, updated_supermarket)
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, Object.keys(err))
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
|
||||
this.supermarkets = temp_supermarkets
|
||||
})
|
||||
}
|
||||
|
||||
if ("moved" in e) {
|
||||
updateMoved(this.new_supermarket.value)
|
||||
.then((updated_supermarket) => {
|
||||
let idx = this.supermarkets.indexOf((x) => x.id === updated_supermarket.id)
|
||||
Vue.set(this.supermarkets, idx, updated_supermarket)
|
||||
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, Object.keys(err))
|
||||
StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE)
|
||||
this.supermarkets = temp_supermarkets
|
||||
})
|
||||
}
|
||||
},
|
||||
categoryName(item) {
|
||||
return item?.category?.name ?? item.name
|
||||
},
|
||||
updateOnlineStatus(e) {
|
||||
const { type } = e
|
||||
this.online = type === "online"
|
||||
@ -802,4 +1068,9 @@ export default {
|
||||
padding-top: -3em;
|
||||
margin-top: -3em;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
opacity: 0.5;
|
||||
background: #c8ebfb;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,262 +1,294 @@
|
||||
<template>
|
||||
<div row style="margin: 4px">
|
||||
<!-- @[useDrag&&`dragover`] <== this syntax completely shuts off draggable -->
|
||||
<b-card no-body d-flex flex-column :class="{'border border-primary' : over, 'shake': isError}"
|
||||
:style="{'cursor:grab' : useDrag}"
|
||||
:draggable="useDrag"
|
||||
@[useDrag&&`dragover`].prevent
|
||||
@[useDrag&&`dragenter`].prevent
|
||||
@[useDrag&&`dragstart`]="handleDragStart($event)"
|
||||
@[useDrag&&`dragenter`]="handleDragEnter($event)"
|
||||
@[useDrag&&`dragleave`]="handleDragLeave($event)"
|
||||
@[useDrag&&`drop`]="handleDragDrop($event)">
|
||||
<b-row no-gutters >
|
||||
<b-col no-gutters class="col-sm-3">
|
||||
<b-card-img-lazy style="object-fit: cover; height: 6em;" :src="item_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
|
||||
</b-col>
|
||||
<b-col no-gutters class="col-sm-9">
|
||||
<b-card-body class="m-0 py-0">
|
||||
<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>
|
||||
<!-- <span>{{this_item[itemTags.field]}}</span> -->
|
||||
<generic-pill v-for="x in itemTags" :key="x.field"
|
||||
:item_list="item[x.field]"
|
||||
:label="x.label"
|
||||
:color="x.color"/>
|
||||
<generic-ordered-pill v-for="x in itemOrderedTags" :key="x.field"
|
||||
:item_list="item[x.field]"
|
||||
:label="x.label"
|
||||
:color="x.color"
|
||||
:field="x.field"
|
||||
:item="item"
|
||||
@finish-action="finishAction"/>
|
||||
<div class="mt-auto mb-1" align="right">
|
||||
<span v-if="item[child_count]" 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] }} {{ itemName }}</div>
|
||||
<div v-else>{{ text.hide_children }}</div>
|
||||
</span>
|
||||
<span 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>
|
||||
</span>
|
||||
</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">
|
||||
<badges :item="item" :model="model"/>
|
||||
<generic-context-menu class="p-0"
|
||||
:show_merge="useMerge"
|
||||
:show_move="useMove"
|
||||
@item-action="$emit('item-action', {'action': $event, 'source': item})">
|
||||
</generic-context-menu>
|
||||
<div row style="margin: 4px">
|
||||
<!-- @[useDrag&&`dragover`] <== this syntax completely shuts off draggable -->
|
||||
<b-card
|
||||
no-body
|
||||
d-flex
|
||||
flex-column
|
||||
:class="{ 'border border-primary': over, shake: isError }"
|
||||
:style="{ 'cursor:grab': useDrag }"
|
||||
:draggable="useDrag"
|
||||
@[useDrag&&`dragover`].prevent
|
||||
@[useDrag&&`dragenter`].prevent
|
||||
@[useDrag&&`dragstart`]="handleDragStart($event)"
|
||||
@[useDrag&&`dragenter`]="handleDragEnter($event)"
|
||||
@[useDrag&&`dragleave`]="handleDragLeave($event)"
|
||||
@[useDrag&&`drop`]="handleDragDrop($event)"
|
||||
>
|
||||
<b-row no-gutters>
|
||||
<b-col no-gutters class="col-sm-3">
|
||||
<b-card-img-lazy style="object-fit: cover; height: 6em;" :src="item_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
|
||||
</b-col>
|
||||
<b-col no-gutters class="col-sm-9">
|
||||
<b-card-body class="m-0 py-0">
|
||||
<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>
|
||||
<!-- <span>{{this_item[itemTags.field]}}</span> -->
|
||||
<generic-pill v-for="x in itemTags" :key="x.field" :item_list="item[x.field]" :label="x.label" :color="x.color" />
|
||||
<generic-ordered-pill
|
||||
v-for="x in itemOrderedTags"
|
||||
:key="x.field"
|
||||
:item_list="item[x.field]"
|
||||
:label="x.label"
|
||||
:color="x.color"
|
||||
:field="x.field"
|
||||
:item="item"
|
||||
@finish-action="finishAction"
|
||||
/>
|
||||
<div class="mt-auto mb-1" align="right">
|
||||
<span
|
||||
v-if="item[child_count]"
|
||||
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] }} {{ itemName }}</div>
|
||||
<div v-else>{{ text.hide_children }}</div>
|
||||
</span>
|
||||
<span
|
||||
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>
|
||||
</span>
|
||||
</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">
|
||||
<badges :item="item" :model="model" />
|
||||
<generic-context-menu
|
||||
v-if="show_context_menu"
|
||||
class="p-0"
|
||||
:show_merge="useMerge"
|
||||
:show_move="useMove"
|
||||
@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-10 offset-md-2">
|
||||
<generic-horizontal-card v-for="child in item[children]" v-bind:key="child.id" :item="child" :model="model" @item-action="$emit('item-action', $event)">
|
||||
</generic-horizontal-card>
|
||||
</div>
|
||||
</div>
|
||||
</b-row>
|
||||
</b-card>
|
||||
<!-- recursively add child cards -->
|
||||
<div class="row" v-if="item.show_children">
|
||||
<div class="col-md-10 offset-md-2">
|
||||
<generic-horizontal-card v-for="child in item[children]" v-bind:key="child.id"
|
||||
:item="child"
|
||||
:model="model"
|
||||
@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-10 offset-md-2">
|
||||
<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>
|
||||
<!-- conditionally view recipes -->
|
||||
<div class="row" v-if="item.show_recipes">
|
||||
<div class="col-md-10 offset-md-2">
|
||||
<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>
|
||||
</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="useMove"
|
||||
action
|
||||
v-on:click="
|
||||
$emit('item-action', { action: 'move', target: item, source: source })
|
||||
closeMenu()
|
||||
"
|
||||
>
|
||||
<i class="fas fa-expand-arrows-alt fa-fw"></i> <b>{{ $t("Move") }}</b
|
||||
>: <span v-html="$t('move_confirmation', { child: source.name, parent: item.name })"></span>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item
|
||||
v-if="useMerge"
|
||||
action
|
||||
v-on:click="
|
||||
$emit('item-action', { action: 'merge', target: item, source: source })
|
||||
closeMenu()
|
||||
"
|
||||
>
|
||||
<i class="fas fa-compress-arrows-alt fa-fw"></i> <b>{{ $t("Merge") }}</b
|
||||
>: <span v-html="$t('merge_confirmation', { source: source.name, target: item.name })"></span>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item
|
||||
v-if="useMerge"
|
||||
action
|
||||
v-on:click="
|
||||
$emit('item-action', { action: 'merge-automate', target: item, source: source })
|
||||
closeMenu()
|
||||
"
|
||||
>
|
||||
<i class="fas fa-robot fa-fw"></i> <b>{{ $t("Merge") }} & {{ $t("Automate") }}</b
|
||||
>: <span v-html="$t('merge_confirmation', { source: source.name, target: item.name })"></span> {{ $t("create_rule") }}
|
||||
<b-badge v-b-tooltip.hover :title="$t('warning_feature_beta')">BETA</b-badge>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item action v-on:click="closeMenu()">
|
||||
<i class="fas fa-times fa-fw"></i> <b>{{ $t("Cancel") }}</b>
|
||||
</b-list-group-item>
|
||||
<!-- TODO add to shopping list -->
|
||||
<!-- TODO toggle onhand -->
|
||||
</b-list-group>
|
||||
</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="useMove" action v-on:click="$emit('item-action',{'action': 'move', 'target': item, 'source': source}); closeMenu()">
|
||||
<i class="fas fa-expand-arrows-alt fa-fw"></i> <b>{{$t('Move')}}</b>: <span v-html="$t('move_confirmation', {'child': source.name,'parent':item.name})"></span>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item v-if="useMerge" action v-on:click="$emit('item-action',{'action': 'merge', 'target': item, 'source': source}); closeMenu()">
|
||||
<i class="fas fa-compress-arrows-alt fa-fw"></i> <b>{{$t('Merge')}}</b>: <span v-html="$t('merge_confirmation', {'source': source.name,'target':item.name})"></span>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item v-if="useMerge" action v-on:click="$emit('item-action',{'action': 'merge-automate', 'target': item, 'source': source}); closeMenu()">
|
||||
<i class="fas fa-robot fa-fw"></i> <b>{{$t('Merge')}} & {{$t('Automate')}}</b>: <span v-html="$t('merge_confirmation', {'source': source.name,'target':item.name})"></span> {{$t('create_rule')}} <b-badge v-b-tooltip.hover :title="$t('warning_feature_beta')" >BETA</b-badge>
|
||||
</b-list-group-item>
|
||||
<b-list-group-item action v-on:click="closeMenu()">
|
||||
<i class="fas fa-times fa-fw"></i> <b>{{$t('Cancel')}}</b>
|
||||
</b-list-group-item>
|
||||
<!-- TODO add to shopping list -->
|
||||
<!-- TODO toggle onhand -->
|
||||
</b-list-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GenericContextMenu from "@/components/ContextMenu/GenericContextMenu";
|
||||
import Badges from "@/components/Badges";
|
||||
import GenericPill from "@/components/GenericPill";
|
||||
import GenericOrderedPill from "@/components/GenericOrderedPill";
|
||||
import RecipeCard from "@/components/RecipeCard";
|
||||
import { mixin as clickaway } from 'vue-clickaway';
|
||||
import { createPopper } from '@popperjs/core';
|
||||
import GenericContextMenu from "@/components/ContextMenu/GenericContextMenu"
|
||||
import Badges from "@/components/Badges"
|
||||
import GenericPill from "@/components/GenericPill"
|
||||
import GenericOrderedPill from "@/components/GenericOrderedPill"
|
||||
import RecipeCard from "@/components/RecipeCard"
|
||||
import { mixin as clickaway } from "vue-clickaway"
|
||||
import { createPopper } from "@popperjs/core"
|
||||
|
||||
export default {
|
||||
name: "GenericHorizontalCard",
|
||||
components: { GenericContextMenu, RecipeCard, Badges, GenericPill, GenericOrderedPill},
|
||||
mixins: [clickaway],
|
||||
props: {
|
||||
item: {type: Object},
|
||||
model: {type: Object},
|
||||
title: {type: String, default: 'name'}, // this and the following props need to be moved to model.js and made computed values
|
||||
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'}
|
||||
},
|
||||
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.itemName)
|
||||
},
|
||||
computed: {
|
||||
itemName: function() {
|
||||
return this.model?.name ?? "You Forgot To Set Model Name in model.js"
|
||||
name: "GenericHorizontalCard",
|
||||
components: { GenericContextMenu, RecipeCard, Badges, GenericPill, GenericOrderedPill },
|
||||
mixins: [clickaway],
|
||||
props: {
|
||||
item: { type: Object },
|
||||
model: { type: Object },
|
||||
title: { type: String, default: "name" }, // this and the following props need to be moved to model.js and made computed values
|
||||
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" },
|
||||
show_context_menu: { type: Boolean, default: true },
|
||||
},
|
||||
useMove: function() {
|
||||
return (this.model?.['move'] ?? false) ? true : 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: "",
|
||||
},
|
||||
}
|
||||
},
|
||||
useMerge: function() {
|
||||
return (this.model?.['merge'] ?? false) ? true : false
|
||||
mounted() {
|
||||
this.item_image = this.item?.image ?? window.IMAGE_PLACEHOLDER
|
||||
this.dragMenu = this.$refs.tooltip
|
||||
this.text.hide_children = this.$t("Hide_" + this.itemName)
|
||||
},
|
||||
useDrag: function() {
|
||||
return this.useMove || this.useMerge
|
||||
computed: {
|
||||
itemName: function() {
|
||||
return this.model?.name ?? "You Forgot To Set Model Name in model.js"
|
||||
},
|
||||
useMove: function() {
|
||||
return this.model?.["move"] ?? false ? true : false
|
||||
},
|
||||
useMerge: function() {
|
||||
return this.model?.["merge"] ?? false ? true : false
|
||||
},
|
||||
useDrag: function() {
|
||||
return this.useMove || this.useMerge
|
||||
},
|
||||
itemTags: function() {
|
||||
return this.model?.tags ?? []
|
||||
},
|
||||
itemOrderedTags: function() {
|
||||
return this.model?.ordered_tags ?? []
|
||||
},
|
||||
},
|
||||
itemTags: function() {
|
||||
return this.model?.tags ?? []
|
||||
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
|
||||
},
|
||||
finishAction: function(e) {
|
||||
this.$emit("finish-action", e)
|
||||
},
|
||||
},
|
||||
itemOrderedTags: function() {
|
||||
return this.model?.ordered_tags ?? []
|
||||
}
|
||||
},
|
||||
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
|
||||
},
|
||||
finishAction: function(e){
|
||||
this.$emit('finish-action', e)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</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;
|
||||
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);
|
||||
}
|
||||
10%,
|
||||
90% {
|
||||
transform: translate3d(-1px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
80% {
|
||||
transform: translate3d(2px, 0, 0);
|
||||
}
|
||||
20%,
|
||||
80% {
|
||||
transform: translate3d(2px, 0, 0);
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
30%,
|
||||
50%,
|
||||
70% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
|
||||
40%,
|
||||
60% {
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
40%,
|
||||
60% {
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -131,6 +131,7 @@
|
||||
"Root": "Root",
|
||||
"Ignore_Shopping": "Ignore Shopping",
|
||||
"Shopping_Category": "Shopping Category",
|
||||
"Shopping_Categories": "Shopping Categories",
|
||||
"Edit_Food": "Edit Food",
|
||||
"Move_Food": "Move Food",
|
||||
"New_Food": "New Food",
|
||||
@ -258,5 +259,7 @@
|
||||
"err_move_self": "Cannot move item to itself",
|
||||
"nothing": "Nothing to do",
|
||||
"err_merge_self": "Cannot merge item with itself",
|
||||
"show_sql": "Show SQL"
|
||||
"show_sql": "Show SQL",
|
||||
"CategoryName": "Category Name",
|
||||
"SupermarketName": "Supermarket Name"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user