edit supermarket categories

cookbook/serializer.py

@@ -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')

vue/src/apps/ShoppingListView/ShoppingListView.vue

@@ -14,14 +14,16 @@
 
         <b-tabs content-class="mt-3">
             <!-- shopping list tab -->
-            <b-tab :title="$t('ShoppingList')" active>
+            <b-tab active>
-                <template #title> <b-spinner v-if="loading" type="border" small></b-spinner> {{ $t("ShoppingList") }} </template>
+                <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="row justify-content-center">
-                    <div class="col col-md-4 ">
+                    <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>

vue/src/components/GenericHorizontalCard.vue

@@ -1,262 +1,294 @@
 <template>
-  <div row style="margin: 4px">
+    <div row style="margin: 4px">
-    <!-- @[useDrag&&`dragover`] <== this syntax completely shuts off draggable  -->
+        <!-- @[useDrag&&`dragover`] <== this syntax completely shuts off draggable  -->
-    <b-card no-body d-flex flex-column :class="{'border border-primary' : over, 'shake': isError}"
+        <b-card
-      :style="{'cursor:grab' : useDrag}"
+            no-body
-      :draggable="useDrag"
+            d-flex
-      @[useDrag&&`dragover`].prevent
+            flex-column
-      @[useDrag&&`dragenter`].prevent
+            :class="{ 'border border-primary': over, shake: isError }"
-      @[useDrag&&`dragstart`]="handleDragStart($event)"
+            :style="{ 'cursor:grab': useDrag }"
-      @[useDrag&&`dragenter`]="handleDragEnter($event)"
+            :draggable="useDrag"
-      @[useDrag&&`dragleave`]="handleDragLeave($event)"
+            @[useDrag&&`dragover`].prevent
-      @[useDrag&&`drop`]="handleDragDrop($event)">
+            @[useDrag&&`dragenter`].prevent
-      <b-row no-gutters >  
+            @[useDrag&&`dragstart`]="handleDragStart($event)"
-        <b-col no-gutters class="col-sm-3">
+            @[useDrag&&`dragenter`]="handleDragEnter($event)"
-          <b-card-img-lazy style="object-fit: cover; height: 6em;" :src="item_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
+            @[useDrag&&`dragleave`]="handleDragLeave($event)"
-        </b-col>
+            @[useDrag&&`drop`]="handleDragDrop($event)"
-        <b-col no-gutters class="col-sm-9">
+        >
-            <b-card-body class="m-0 py-0">
+            <b-row no-gutters>
-              <b-card-text class=" h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
+                <b-col no-gutters class="col-sm-3">
-                    <h5 class="m-0 mt-1 text-truncate">{{ item[title] }}</h5>
+                    <b-card-img-lazy style="object-fit: cover; height: 6em;" :src="item_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
-                    <div class= "m-0 text-truncate">{{ item[subtitle] }}</div>
+                </b-col>
-                    <!-- <span>{{this_item[itemTags.field]}}</span> -->
+                <b-col no-gutters class="col-sm-9">
-                    <generic-pill v-for="x in itemTags" :key="x.field"
+                    <b-card-body class="m-0 py-0">
-                      :item_list="item[x.field]"
+                        <b-card-text class=" h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
-                      :label="x.label"
+                            <h5 class="m-0 mt-1 text-truncate">{{ item[title] }}</h5>
-                      :color="x.color"/>
+                            <div class="m-0 text-truncate">{{ item[subtitle] }}</div>
-                    <generic-ordered-pill v-for="x in itemOrderedTags" :key="x.field"
+                            <!-- <span>{{this_item[itemTags.field]}}</span> -->
-                      :item_list="item[x.field]"
+                            <generic-pill v-for="x in itemTags" :key="x.field" :item_list="item[x.field]" :label="x.label" :color="x.color" />
-                      :label="x.label"
+                            <generic-ordered-pill
-                      :color="x.color"
+                                v-for="x in itemOrderedTags"
-                      :field="x.field"
+                                :key="x.field"
-                      :item="item"
+                                :item_list="item[x.field]"
-                      @finish-action="finishAction"/>
+                                :label="x.label"
-                    <div class="mt-auto mb-1" align="right">
+                                :color="x.color"
-                      <span v-if="item[child_count]" class="mx-2 btn btn-link btn-sm" 
+                                :field="x.field"
-                        style="z-index: 800;" v-on:click="$emit('item-action',{'action':'get-children','source':item})">
+                                :item="item"
-                          <div v-if="!item.show_children">{{ item[child_count] }} {{ itemName }}</div>
+                                @finish-action="finishAction"
-                          <div v-else>{{ text.hide_children }}</div>
+                            />
-                      </span>
+                            <div class="mt-auto mb-1" align="right">
-                      <span v-if="item[recipe_count]" class="mx-2 btn btn-link btn-sm" style="z-index: 800;"
+                                <span
-                        v-on:click="$emit('item-action',{'action':'get-recipes','source':item})">
+                                    v-if="item[child_count]"
-                        <div v-if="!item.show_recipes">{{ item[recipe_count] }} {{$t('Recipes')}}</div>
+                                    class="mx-2 btn btn-link btn-sm"
-                        <div v-else>{{$t('Hide_Recipes')}}</div>
+                                    style="z-index: 800;"
-                      </span>
+                                    v-on:click="$emit('item-action', { action: 'get-children', source: item })"
-                    </div>
+                                >
-              </b-card-text>
+                                    <div v-if="!item.show_children">{{ item[child_count] }} {{ itemName }}</div>
-            </b-card-body>
+                                    <div v-else>{{ text.hide_children }}</div>
-        </b-col>
+                                </span>
-        <div class="card-img-overlay justify-content-right h-25 m-0 p-0 text-right">
+                                <span
-          <badges :item="item" :model="model"/>
+                                    v-if="item[recipe_count]"
-          <generic-context-menu  class="p-0"
+                                    class="mx-2 btn btn-link btn-sm"
-            :show_merge="useMerge"
+                                    style="z-index: 800;"
-            :show_move="useMove"
+                                    v-on:click="$emit('item-action', { action: 'get-recipes', source: item })"
-            @item-action="$emit('item-action', {'action': $event, 'source': item})">
+                                >
-          </generic-context-menu>
+                                    <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> 
+        <!-- conditionally view recipes -->
-    </b-card>
+        <div class="row" v-if="item.show_recipes">
-    <!-- recursively add child cards -->
+            <div class="col-md-10 offset-md-2">
-    <div class="row" v-if="item.show_children">
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
-      <div class="col-md-10 offset-md-2">
+                    <recipe-card v-for="r in item[recipes]" v-bind:key="r.id" :recipe="r"> </recipe-card>
-        <generic-horizontal-card v-for="child in item[children]" v-bind:key="child.id"
+                </div>
-          :item="child"
+            </div>
-          :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>
         </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 GenericContextMenu from "@/components/ContextMenu/GenericContextMenu"
-import Badges from "@/components/Badges";
+import Badges from "@/components/Badges"
-import GenericPill from "@/components/GenericPill";
+import GenericPill from "@/components/GenericPill"
-import GenericOrderedPill from "@/components/GenericOrderedPill";
+import GenericOrderedPill from "@/components/GenericOrderedPill"
-import RecipeCard from "@/components/RecipeCard";
+import RecipeCard from "@/components/RecipeCard"
-import { mixin as clickaway } from 'vue-clickaway';
+import { mixin as clickaway } from "vue-clickaway"
-import { createPopper } from '@popperjs/core';
+import { createPopper } from "@popperjs/core"
 
 export default {
-  name: "GenericHorizontalCard",
+    name: "GenericHorizontalCard",
-  components: { GenericContextMenu, RecipeCard, Badges, GenericPill, GenericOrderedPill},
+    components: { GenericContextMenu, RecipeCard, Badges, GenericPill, GenericOrderedPill },
-  mixins: [clickaway],
+    mixins: [clickaway],
-  props: {
+    props: {
-    item: {type: Object},
+        item: { type: Object },
-    model: {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
+        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'},
+        subtitle: { type: String, default: "description" },
-    child_count: {type: String, default: 'numchild'},
+        child_count: { type: String, default: "numchild" },
-    children: {type: String, default: 'children'},
+        children: { type: String, default: "children" },
-    recipe_count: {type: String, default: 'numrecipe'},
+        recipe_count: { type: String, default: "numrecipe" },
-    recipes: {type: String, default: 'recipes'}
+        recipes: { type: String, default: "recipes" },
-  },
+        show_context_menu: { type: Boolean, default: true },
-  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"
     },
-    useMove: function() {
+    data() {
-      return (this.model?.['move'] ?? false) ? true : false
+        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() {
+    mounted() {
-      return (this.model?.['merge'] ?? false) ? true : false
+        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() {
+    computed: {
-      return this.useMove || this.useMerge
+        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() {
+    methods: {
-      return this.model?.tags ?? []
+        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;
+    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-  transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
-  backface-visibility: hidden;
+    backface-visibility: hidden;
-  perspective: 1000px;
+    perspective: 1000px;
 }
 
 @keyframes shake {
-  10%,
+    10%,
-  90% {
+    90% {
-    transform: translate3d(-1px, 0, 0);
+        transform: translate3d(-1px, 0, 0);
-  }
+    }
 
-  20%,
+    20%,
-  80% {
+    80% {
-    transform: translate3d(2px, 0, 0);
+        transform: translate3d(2px, 0, 0);
-  }
+    }
 
-  30%,
+    30%,
-  50%,
+    50%,
-  70% {
+    70% {
-    transform: translate3d(-4px, 0, 0);
+        transform: translate3d(-4px, 0, 0);
-  }
+    }
 
-  40%,
+    40%,
-  60% {
+    60% {
-    transform: translate3d(4px, 0, 0);
+        transform: translate3d(4px, 0, 0);
-  }
+    }
 }
 </style>

vue/src/locales/en.json

@@ -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"
 }