Allow tags/categories/tools deletion (#1142)

* feat: allow tags/categories/tools deletion

* Use gray color for delete action

frontend/components/Domain/Recipe/RecipeCategoryTagToolContextMenu.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="text-center">
+    <BaseDialog
+      v-model="ItemDeleteDialog"
+      :title="`Delete ${itemName}`"
+      color="error"
+      :icon="$globals.icons.alertCircle"
+      @confirm="deleteItem()"
+    >
+      <v-card-text> Are you sure you want to delete this {{ itemName }}? </v-card-text>
+    </BaseDialog>
+    <v-menu
+      offset-y
+      left
+      :bottom="!menuTop"
+      :nudge-bottom="!menuTop ? '5' : '0'"
+      :top="menuTop"
+      :nudge-top="menuTop ? '5' : '0'"
+      allow-overflow
+      close-delay="125"
+      open-on-hover
+      content-class="d-print-none"
+    >
+      <template #activator="{ on, attrs }">
+        <v-btn :fab="fab" :small="fab" :color="color" :icon="!fab" dark v-bind="attrs" v-on="on" @click.prevent>
+          <v-icon>{{ icon }}</v-icon>
+        </v-btn>
+      </template>
+      <v-list dense>
+        <v-list-item v-for="(item, index) in menuItems" :key="index" @click="contextMenuEventHandler(item.event)">
+          <v-list-item-icon>
+            <v-icon :color="item.color" v-text="item.icon"></v-icon>
+          </v-list-item-icon>
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
+import { useUserApi } from "~/composables/api";
+
+export interface ContextMenuIncludes {
+  delete: boolean;
+}
+
+export interface ContextMenuItem {
+  title: string;
+  icon: string;
+  color: string | undefined;
+  event: string;
+}
+
+const ItemTypes = {
+  tag: "tags",
+  category: "categories",
+  tool: "tools",
+};
+
+export default defineComponent({
+  props: {
+    itemType: {
+      type: String as () => string,
+      required: true,
+    },
+    useItems: {
+      type: Object as () => ContextMenuIncludes,
+      default: () => ({
+        delete: true,
+      }),
+    },
+    // Append items are added at the end of the useItems list
+    appendItems: {
+      type: Array as () => ContextMenuItem[],
+      default: () => [],
+    },
+    // Append items are added at the beginning of the useItems list
+    leadingItems: {
+      type: Array as () => ContextMenuItem[],
+      default: () => [],
+    },
+    menuTop: {
+      type: Boolean,
+      default: true,
+    },
+    fab: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
+      default: "primary",
+    },
+    slug: {
+      type: String,
+      required: true,
+    },
+    menuIcon: {
+      type: String,
+      default: null,
+    },
+    name: {
+      required: true,
+      type: String,
+    },
+    id: {
+      required: true,
+      type: String,
+    },
+  },
+  setup(props, context) {
+    const api = useUserApi();
+
+    const state = reactive({
+      ItemDeleteDialog: false,
+      loading: false,
+      menuItems: [] as ContextMenuItem[],
+      itemName: "tag",
+    });
+
+    const { i18n, $globals } = useContext();
+
+    let apiRoute = "tags" as "tags" | "categories" | "tools";
+
+    switch (props.itemType) {
+      case ItemTypes.tag:
+        state.itemName = "tag";
+        apiRoute = "tags";
+        break;
+      case ItemTypes.category:
+        state.itemName = "category";
+        apiRoute = "categories";
+        break;
+      case ItemTypes.tool:
+        state.itemName = "tool";
+        apiRoute = "tools";
+        break;
+      default:
+        break;
+    }
+
+    // ===========================================================================
+    // Context Menu Setup
+
+    const defaultItems: { [key: string]: ContextMenuItem } = {
+      delete: {
+        title: i18n.t("general.delete") as string,
+        icon: $globals.icons.delete,
+        color: undefined,
+        event: "delete",
+      },
+    };
+
+    // Get Default Menu Items Specified in Props
+    for (const [key, value] of Object.entries(props.useItems)) {
+      if (value) {
+        const item = defaultItems[key];
+        if (item) {
+          state.menuItems.push(item);
+        }
+      }
+    }
+
+    // Add leading and Apppending Items
+    state.menuItems = [...props.leadingItems, ...state.menuItems, ...props.appendItems];
+
+    const icon = props.menuIcon || $globals.icons.dotsVertical;
+
+    async function deleteItem() {
+      await api[apiRoute].deleteOne(props.id);
+      context.emit("delete", props.id);
+    }
+
+    // Note: Print is handled as an event in the parent component
+    const eventHandlers: { [key: string]: () => void } = {
+      delete: () => {
+        state.ItemDeleteDialog = true;
+      },
+    };
+
+    function contextMenuEventHandler(eventKey: string) {
+      const handler = eventHandlers[eventKey];
+
+      if (handler && typeof handler === "function") {
+        handler();
+        state.loading = false;
+        return;
+      }
+
+      context.emit(eventKey);
+      state.loading = false;
+    }
+
+    return {
+      ...toRefs(state),
+      contextMenuEventHandler,
+      deleteItem,
+      icon,
+    };
+  },
+});
+</script>

frontend/components/Domain/Recipe/RecipeCategoryTagToolPage.vue

@@ -16,8 +16,20 @@
               <v-icon>
                 {{ icon }}
               </v-icon>
-              <v-card-title class="py-1">{{ item.name }}</v-card-title>
+              <v-card-title class="py-1">
+                {{ item.name }}
+              </v-card-title>
               <v-spacer></v-spacer>
+              <RecipeCategoryTagToolContextMenu
+                :id="item.id"
+                :item-type="itemType"
+                :slug="item.slug"
+                :name="item.name"
+                :use-items="{
+                  delete: true,
+                }"
+                @delete="$emit('delete', item.id)"
+              />
             </v-card-actions>
           </v-card>
         </v-col>
@@ -28,6 +40,7 @@
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs, useContext, computed, useMeta } from "@nuxtjs/composition-api";
+import RecipeCategoryTagToolContextMenu from "./RecipeCategoryTagToolContextMenu.vue";
 
 type ItemType = "tags" | "categories" | "tools";
 
@@ -38,11 +51,13 @@ const ItemTypes = {
 };
 
 interface GenericItem {
+  id: string;
   name: string;
   slug: string;
 }
 
 export default defineComponent({
+  components: { RecipeCategoryTagToolContextMenu },
   props: {
     itemType: {
       type: String as () => ItemType,

frontend/pages/recipes/categories/index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <RecipeCategoryTagToolPage v-if="categories" :items="categories" item-type="categories" />
+    <RecipeCategoryTagToolPage v-if="categories" :items="categories" item-type="categories" @delete="removeCat" />
   </v-container>
 </template>
 
@@ -8,6 +8,7 @@
 import { defineComponent, useAsync } from "@nuxtjs/composition-api";
 import RecipeCategoryTagToolPage from "~/components/Domain/Recipe/RecipeCategoryTagToolPage.vue";
 import { useUserApi } from "~/composables/api";
+import { useAsyncKey } from "~/composables/use-utils";
 
 export default defineComponent({
   components: {
@@ -21,10 +22,22 @@ export default defineComponent({
       if (data) {
         return data;
       }
-    });
+    }, useAsyncKey());
+
+    function removeCat(id: string) {
+      if (categories.value) {
+        for (let i = 0; i < categories.value.length; i++) {
+          if (categories.value[i].id === id) {
+            categories.value.splice(i, 1);
+            break;
+          }
+        }
+      }
+    }
 
     return {
       categories,
+      removeCat,
     };
   },
 });

frontend/pages/recipes/tags/index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <RecipeCategoryTagToolPage v-if="tools" :items="tools" item-type="tags" />
+    <RecipeCategoryTagToolPage v-if="tools" :items="tools" item-type="tags" @delete="removeTag" />
   </v-container>
 </template>
 
@@ -8,6 +8,7 @@
 import { defineComponent, useAsync } from "@nuxtjs/composition-api";
 import RecipeCategoryTagToolPage from "~/components/Domain/Recipe/RecipeCategoryTagToolPage.vue";
 import { useUserApi } from "~/composables/api";
+import { useAsyncKey } from "~/composables/use-utils";
 
 export default defineComponent({
   components: {
@@ -21,9 +22,22 @@ export default defineComponent({
       if (data) {
         return data;
       }
-    });
+    }, useAsyncKey());
+
+    function removeTag(id: string) {
+      if (tools.value) {
+        for (let i = 0; i < tools.value.length; i++) {
+          if (tools.value[i].id === id) {
+            tools.value.splice(i, 1);
+            break;
+          }
+        }
+      }
+    }
+
     return {
       tools,
+      removeTag,
     };
   },
 });

frontend/pages/recipes/tools/index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <RecipeCategoryTagToolPage v-if="tools" :items="tools" item-type="tools" />
+    <RecipeCategoryTagToolPage v-if="tools" :items="tools" item-type="tools" @delete="removeTool" />
   </v-container>
 </template>
 
@@ -8,6 +8,7 @@
 import { defineComponent, useAsync } from "@nuxtjs/composition-api";
 import RecipeCategoryTagToolPage from "~/components/Domain/Recipe/RecipeCategoryTagToolPage.vue";
 import { useUserApi } from "~/composables/api";
+import { useAsyncKey } from "~/composables/use-utils";
 
 export default defineComponent({
   components: {
@@ -21,9 +22,22 @@ export default defineComponent({
       if (data) {
         return data;
       }
-    });
+    }, useAsyncKey());
+
+    function removeTool(id: string) {
+      if (tools.value) {
+        for (let i = 0; i < tools.value.length; i++) {
+          if (tools.value[i].id === id) {
+            tools.value.splice(i, 1);
+            break;
+          }
+        }
+      }
+    }
+
     return {
       tools,
+      removeTool,
     };
   },
 });