From 63ac21bce27f8169dc7158861f898b587cd4251b Mon Sep 17 00:00:00 2001
From: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
Date: Tue, 21 Nov 2023 15:31:05 +0100
Subject: [PATCH] feat: Add Categories, Tags and Tools to Manage Data Page
 (#2737)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add categories

* add tags

* 🧹

* 🧹 l18n

* add tools

* remove broken on Hand for tools

* fix for tools onHand not updating from frontend

* tools: re-add "on Hand"

* remove itemized icon from create button

* change combine icon

* add divider to BaseOverflowButton

* divide and conquer

---------

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
---
 .../Domain/Recipe/RecipeOrganizerDialog.vue   |   4 +-
 .../Domain/Recipe/RecipeOrganizerPage.vue     |   5 +-
 .../components/global/BaseOverflowButton.vue  |  38 ++--
 frontend/lang/messages/en-US.json             |  17 +-
 frontend/pages/group/data.vue                 |  20 ++
 frontend/pages/group/data/categories.vue      | 174 ++++++++++++++++
 frontend/pages/group/data/foods.vue           |   2 +-
 frontend/pages/group/data/labels.vue          |   5 +-
 frontend/pages/group/data/tags.vue            | 175 ++++++++++++++++
 frontend/pages/group/data/tools.vue           | 187 ++++++++++++++++++
 frontend/pages/group/data/units.vue           |   2 +-
 11 files changed, 605 insertions(+), 24 deletions(-)
 create mode 100644 frontend/pages/group/data/categories.vue
 create mode 100644 frontend/pages/group/data/tags.vue
 create mode 100644 frontend/pages/group/data/tools.vue

diff --git a/frontend/components/Domain/Recipe/RecipeOrganizerDialog.vue b/frontend/components/Domain/Recipe/RecipeOrganizerDialog.vue
index e4c90090b31a..378cda2b061b 100644
--- a/frontend/components/Domain/Recipe/RecipeOrganizerDialog.vue
+++ b/frontend/components/Domain/Recipe/RecipeOrganizerDialog.vue
@@ -131,8 +131,8 @@ export default defineComponent({
 
     async function select() {
       if (store) {
-        // @ts-ignore - only property really required is the name
-        await store.actions.createOne({ name: state.name });
+        // @ts-expect-error the same state is used for different organizer types, which have different requirements
+        await store.actions.createOne({ ...state });
       }
 
       const newItem = store.items.value.find((item) => item.name === state.name);
diff --git a/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue b/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
index 2f832470b312..9d8c035fd9d9 100644
--- a/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeOrganizerPage.vue
@@ -16,6 +16,7 @@
     <BaseDialog v-if="updateTarget" v-model="dialogs.update" :title="$t('general.update')" @confirm="updateOne()">
       <v-card-text>
         <v-text-field v-model="updateTarget.name" label="Name"> </v-text-field>
+        <v-checkbox v-if="itemType === Organizer.Tool" v-model="updateTarget.onHand" :label="$t('tool.on-hand')"></v-checkbox>
       </v-card-text>
     </BaseDialog>
 
@@ -75,7 +76,7 @@ import Fuse from "fuse.js";
 import { defineComponent, computed, ref, reactive, useContext, useRoute } from "@nuxtjs/composition-api";
 import { useContextPresets } from "~/composables/use-context-presents";
 import RecipeOrganizerDialog from "~/components/Domain/Recipe/RecipeOrganizerDialog.vue";
-import { RecipeOrganizer } from "~/lib/api/types/non-generated";
+import { Organizer, RecipeOrganizer } from "~/lib/api/types/non-generated";
 import { useRouteQuery } from "~/composables/use-router";
 import { deepCopy } from "~/composables/use-utils";
 
@@ -83,6 +84,7 @@ interface GenericItem {
   id: string;
   name: string;
   slug: string;
+  onHand: boolean;
 }
 
 export default defineComponent({
@@ -217,6 +219,7 @@ export default defineComponent({
       updateTarget,
       deleteOne,
       deleteTarget,
+      Organizer,
       presets,
       itemsSorted,
       searchString,
diff --git a/frontend/components/global/BaseOverflowButton.vue b/frontend/components/global/BaseOverflowButton.vue
index d8f1820ba024..6c9aef686a02 100644
--- a/frontend/components/global/BaseOverflowButton.vue
+++ b/frontend/components/global/BaseOverflowButton.vue
@@ -14,33 +14,42 @@
     <!--  Model -->
     <v-list v-if="mode === MODES.model" dense>
       <v-list-item-group v-model="itemGroup">
-        <v-list-item v-for="(item, index) in items" :key="index" @click="setValue(item)">
-          <v-list-item-icon v-if="item.icon">
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-icon>
-          <v-list-item-title>{{ item.text }}</v-list-item-title>
-        </v-list-item>
+        <template v-for="(item, index) in items">
+          <v-list-item :key="index" @click="setValue(item)">
+            <v-list-item-icon v-if="item.icon">
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>{{ item.text }}</v-list-item-title>
+            <v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
+          </v-list-item>
+        </template>
       </v-list-item-group>
     </v-list>
     <!--  Links -->
     <v-list v-else-if="mode === MODES.link" dense>
       <v-list-item-group v-model="itemGroup">
-        <v-list-item v-for="(item, index) in items" :key="index" :to="item.to">
+        <template v-for="(item, index) in items">
+          <v-list-item :key="index" :to="item.to">
           <v-list-item-icon v-if="item.icon">
             <v-icon>{{ item.icon }}</v-icon>
           </v-list-item-icon>
           <v-list-item-title>{{ item.text }}</v-list-item-title>
-        </v-list-item>
+          </v-list-item>
+          <v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
+        </template>
       </v-list-item-group>
     </v-list>
     <!--  Event -->
     <v-list v-else-if="mode === MODES.event" dense>
-      <v-list-item v-for="(item, index) in items" :key="index" @click="$emit(item.event)">
-        <v-list-item-icon v-if="item.icon">
-          <v-icon>{{ item.icon }}</v-icon>
-        </v-list-item-icon>
-        <v-list-item-title>{{ item.text }}</v-list-item-title>
-      </v-list-item>
+      <template v-for="(item, index) in items">
+        <v-list-item :key="index" @click="$emit(item.event)">
+          <v-list-item-icon v-if="item.icon">
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-item-icon>
+          <v-list-item-title>{{ item.text }}</v-list-item-title>
+          <v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
+        </v-list-item>
+      </template>
     </v-list>
   </v-menu>
 </template>
@@ -64,6 +73,7 @@ export interface MenuItem {
   to?: string;
   value?: string;
   event?: string;
+  divider?: boolean;
 }
 
 export default defineComponent({
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index e53f977c35a8..c42c09c00cf9 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -953,7 +953,22 @@
     "select-data": "Select Data",
     "select-language": "Select Language",
     "columns": "Columns",
-    "combine": "Combine"
+    "combine": "Combine",
+    "categories": {
+      "edit-category": "Edit Category",
+      "new-category": "New Category",
+      "category-data": "Category Data"
+    },
+    "tags": {
+      "new-tag": "New Tag",
+      "edit-tag": "Edit Tag",
+      "tag-data": "Tag Data"
+    },
+    "tools": {
+      "new-tool": "New Tool",
+      "edit-tool": "Edit Tool",
+      "tool-data": "Tool Data"
+    }
   },
   "user-registration": {
     "user-registration": "User Registration",
diff --git a/frontend/pages/group/data.vue b/frontend/pages/group/data.vue
index 70349df329ef..1e40c55a7dc4 100644
--- a/frontend/pages/group/data.vue
+++ b/frontend/pages/group/data.vue
@@ -44,6 +44,9 @@ export default defineComponent({
       foods: i18n.tc("general.foods"),
       units: i18n.tc("general.units"),
       labels: i18n.tc("data-pages.labels.labels"),
+      categories: i18n.tc("category.categories"),
+      tags: i18n.tc("tag.tags"),
+      tools: i18n.tc("tool.tools"),
     };
 
     const route = useRoute();
@@ -53,6 +56,7 @@ export default defineComponent({
         text: i18n.t("general.recipes"),
         value: "new",
         to: "/group/data/recipes",
+        divider: true,
       },
       {
         text: i18n.t("general.foods"),
@@ -68,7 +72,23 @@ export default defineComponent({
         text: i18n.t("data-pages.labels.labels"),
         value: "new",
         to: "/group/data/labels",
+        divider: true,
       },
+      {
+        text: i18n.t("category.categories"),
+        value: "new",
+        to: "/group/data/categories",
+      },
+      {
+        text: i18n.t("tag.tags"),
+        value: "new",
+        to: "/group/data/tags",
+      },
+      {
+        text: i18n.t("tool.tools"),
+        value: "new",
+        to: "/group/data/tools",
+      }
     ]);
 
     const buttonText = computed(() => {
diff --git a/frontend/pages/group/data/categories.vue b/frontend/pages/group/data/categories.vue
new file mode 100644
index 000000000000..856178ba8ed3
--- /dev/null
+++ b/frontend/pages/group/data/categories.vue
@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <!-- Create Dialog -->
+    <BaseDialog
+      v-model="state.createDialog"
+      :title="$t('data-pages.categories.new-category')"
+      :icon="$globals.icons.categories"
+      @submit="createCategory"
+    >
+      <v-card-text>
+        <v-form ref="domNewCategoryForm">
+          <v-text-field
+            v-model="createTarget.name"
+            autofocus
+            :label="$t('general.name')"
+            :rules="[validators.required]"
+          ></v-text-field>
+        </v-form>
+      </v-card-text>
+
+    </BaseDialog>
+
+    <!-- Edit Dialog -->
+    <BaseDialog
+      v-model="state.editDialog"
+      :icon="$globals.icons.categories"
+      :title="$t('data-pages.categories.edit-category')"
+      :submit-text="$tc('general.save')"
+      @submit="editSaveCategory"
+    >
+      <v-card-text v-if="editTarget">
+        <div class="mt-4">
+          <v-text-field v-model="editTarget.name" :label="$t('general.name')"> </v-text-field>
+        </div>
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Delete Dialog -->
+    <BaseDialog
+      v-model="state.deleteDialog"
+      :title="$tc('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteCategory"
+    >
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Recipe Data Table -->
+    <BaseCardSectionTitle :icon="$globals.icons.categories" section :title="$tc('data-pages.categories.category-data')"> </BaseCardSectionTitle>
+    <CrudTable
+      :table-config="tableConfig"
+      :headers.sync="tableHeaders"
+      :data="categories || []"
+      :bulk-actions="[]"
+      @delete-one="deleteEventHandler"
+      @edit-one="editEventHandler"
+    >
+      <template #button-row>
+        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
+      </template>
+    </CrudTable>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
+import { validators } from "~/composables/use-validators";
+import { useCategoryStore, useCategoryData } from "~/composables/store";
+import { RecipeCategory } from "~/lib/api/types/admin";
+
+export default defineComponent({
+  setup() {
+    const { i18n } = useContext();
+    const tableConfig = {
+      hideColumns: true,
+      canExport: true,
+    };
+    const tableHeaders = [
+      {
+        text: i18n.t("general.id"),
+        value: "id",
+        show: false,
+      },
+      {
+        text: i18n.t("general.name"),
+        value: "name",
+        show: true,
+      },
+    ];
+
+    const state = reactive({
+      createDialog: false,
+      editDialog: false,
+      deleteDialog: false,
+    });
+    const categoryData = useCategoryData();
+    const categoryStore = useCategoryStore();
+
+
+    // ============================================================
+    // Create Category
+
+    async function createCategory() {
+      // @ts-ignore - only property really required is the name (RecipeOrganizerPage)
+      await categoryStore.actions.createOne({ name: categoryData.data.name });
+      categoryData.reset();
+      state.createDialog = false;
+    }
+
+
+    // ============================================================
+    // Edit Category
+
+    const editTarget = ref<RecipeCategory | null>(null);
+
+    function editEventHandler(item: RecipeCategory) {
+      state.editDialog = true;
+      editTarget.value = item;
+    }
+
+    async function editSaveCategory() {
+      if (!editTarget.value) {
+        return;
+      }
+      await categoryStore.actions.updateOne(editTarget.value);
+      state.editDialog = false;
+    }
+
+
+    // ============================================================
+    // Delete Category
+
+    const deleteTarget = ref<RecipeCategory | null>(null);
+
+    function deleteEventHandler(item: RecipeCategory) {
+      state.deleteDialog = true;
+      deleteTarget.value = item;
+    }
+
+    async function deleteCategory() {
+      if (!deleteTarget.value || deleteTarget.value.id === undefined) {
+        return;
+      }
+      await categoryStore.actions.deleteOne(deleteTarget.value.id);
+      state.deleteDialog = false;
+    }
+
+    return {
+      state,
+      tableConfig,
+      tableHeaders,
+      categories: categoryStore.items,
+      validators,
+
+      // create
+      createTarget: categoryData.data,
+      createCategory,
+
+      // edit
+      editTarget,
+      editEventHandler,
+      editSaveCategory,
+
+      // delete
+      deleteTarget,
+      deleteEventHandler,
+      deleteCategory
+    };
+  },
+});
+</script>
diff --git a/frontend/pages/group/data/foods.vue b/frontend/pages/group/data/foods.vue
index d722f77e203c..642f5e48248c 100644
--- a/frontend/pages/group/data/foods.vue
+++ b/frontend/pages/group/data/foods.vue
@@ -168,7 +168,7 @@
       <template #button-row>
         <BaseButton create @click="createDialog = true" />
         <BaseButton @click="mergeDialog = true">
-          <template #icon> {{ $globals.icons.foods }} </template>
+          <template #icon> {{ $globals.icons.externalLink }} </template>
           {{ $t('data-pages.combine') }}
         </BaseButton>
       </template>
diff --git a/frontend/pages/group/data/labels.vue b/frontend/pages/group/data/labels.vue
index c748d448be09..cc10fb1f6fe1 100644
--- a/frontend/pages/group/data/labels.vue
+++ b/frontend/pages/group/data/labels.vue
@@ -90,10 +90,7 @@
       @edit-one="editEventHandler"
     >
       <template #button-row>
-        <BaseButton create @click="state.createDialog = true">
-          <template #icon> {{ $globals.icons.tags }} </template>
-          {{ $t("general.create") }}
-        </BaseButton>
+        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
       </template>
       <template #item.name="{ item }">
         <MultiPurposeLabel v-if="item" :label="item">
diff --git a/frontend/pages/group/data/tags.vue b/frontend/pages/group/data/tags.vue
new file mode 100644
index 000000000000..b188d2bef314
--- /dev/null
+++ b/frontend/pages/group/data/tags.vue
@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <!-- Create Dialog -->
+    <BaseDialog
+      v-model="state.createDialog"
+      :title="$t('data-pages.tags.new-tag')"
+      :icon="$globals.icons.tags"
+      @submit="createTag"
+    >
+      <v-card-text>
+        <v-form ref="domNewTagForm">
+          <v-text-field
+            v-model="createTarget.name"
+            autofocus
+            :label="$t('general.name')"
+            :rules="[validators.required]"
+          ></v-text-field>
+        </v-form>
+      </v-card-text>
+
+    </BaseDialog>
+
+    <!-- Edit Dialog -->
+    <BaseDialog
+      v-model="state.editDialog"
+      :icon="$globals.icons.tags"
+      :title="$t('data-pages.tags.edit-tag')"
+      :submit-text="$tc('general.save')"
+      @submit="editSaveTag"
+    >
+      <v-card-text v-if="editTarget">
+        <div class="mt-4">
+          <v-text-field v-model="editTarget.name" :label="$t('general.name')"> </v-text-field>
+        </div>
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Delete Dialog -->
+    <BaseDialog
+      v-model="state.deleteDialog"
+      :title="$tc('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteTag"
+    >
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Recipe Data Table -->
+    <BaseCardSectionTitle :icon="$globals.icons.tags" section :title="$tc('data-pages.tags.tag-data')"> </BaseCardSectionTitle>
+    <CrudTable
+      :table-config="tableConfig"
+      :headers.sync="tableHeaders"
+      :data="tags || []"
+      :bulk-actions="[]"
+      @delete-one="deleteEventHandler"
+      @edit-one="editEventHandler"
+    >
+      <template #button-row>
+        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
+      </template>
+    </CrudTable>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
+import { validators } from "~/composables/use-validators";
+import { useTagStore, useTagData } from "~/composables/store";
+import { RecipeTag } from "~/lib/api/types/admin";
+
+export default defineComponent({
+  setup() {
+    const { i18n } = useContext();
+    const tableConfig = {
+      hideColumns: true,
+      canExport: true,
+    };
+    const tableHeaders = [
+      {
+        text: i18n.t("general.id"),
+        value: "id",
+        show: false,
+      },
+      {
+        text: i18n.t("general.name"),
+        value: "name",
+        show: true,
+      },
+    ];
+
+    const state = reactive({
+      createDialog: false,
+      editDialog: false,
+      deleteDialog: false,
+    });
+
+    const tagData = useTagData();
+    const tagStore = useTagStore();
+
+
+    // ============================================================
+    // Create Tag
+
+    async function createTag() {
+      // @ts-ignore - only property really required is the name (RecipeOrganizerPage)
+      await tagStore.actions.createOne({ name: tagData.data.name });
+      tagData.reset();
+      state.createDialog = false;
+    }
+
+
+    // ============================================================
+    // Edit Tag
+
+    const editTarget = ref<RecipeTag | null>(null);
+
+    function editEventHandler(item: RecipeTag) {
+      state.editDialog = true;
+      editTarget.value = item;
+    }
+
+    async function editSaveTag() {
+      if (!editTarget.value) {
+        return;
+      }
+      await tagStore.actions.updateOne(editTarget.value);
+      state.editDialog = false;
+    }
+
+
+    // ============================================================
+    // Delete Tag
+
+    const deleteTarget = ref<RecipeTag | null>(null);
+
+    function deleteEventHandler(item: RecipeTag) {
+      state.deleteDialog = true;
+      deleteTarget.value = item;
+    }
+
+    async function deleteTag() {
+      if (!deleteTarget.value || deleteTarget.value.id === undefined) {
+        return;
+      }
+      await tagStore.actions.deleteOne(deleteTarget.value.id);
+      state.deleteDialog = false;
+    }
+
+    return {
+      state,
+      tableConfig,
+      tableHeaders,
+      tags: tagStore.items,
+      validators,
+
+      // create
+      createTarget: tagData.data,
+      createTag,
+
+      // edit
+      editTarget,
+      editEventHandler,
+      editSaveTag,
+
+      // delete
+      deleteTarget,
+      deleteEventHandler,
+      deleteTag
+    };
+  },
+});
+</script>
diff --git a/frontend/pages/group/data/tools.vue b/frontend/pages/group/data/tools.vue
new file mode 100644
index 000000000000..c8ee33df1319
--- /dev/null
+++ b/frontend/pages/group/data/tools.vue
@@ -0,0 +1,187 @@
+<template>
+  <div>
+    <!-- Create Dialog -->
+    <BaseDialog
+      v-model="state.createDialog"
+      :title="$t('data-pages.tools.new-tool')"
+      :icon="$globals.icons.potSteam"
+      @submit="createTool"
+    >
+      <v-card-text>
+        <v-form ref="domNewToolForm">
+          <v-text-field
+            v-model="createTarget.name"
+            autofocus
+            :label="$t('general.name')"
+            :rules="[validators.required]"
+          ></v-text-field>
+          <v-checkbox v-model="createTarget.onHand" :label="$t('tool.on-hand')">
+          </v-checkbox>
+        </v-form>
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Edit Dialog -->
+    <BaseDialog
+      v-model="state.editDialog"
+      :icon="$globals.icons.potSteam"
+      :title="$t('data-pages.tools.edit-tool')"
+      :submit-text="$tc('general.save')"
+      @submit="editSaveTool"
+    >
+      <v-card-text v-if="editTarget">
+        <div class="mt-4">
+          <v-text-field v-model="editTarget.name" :label="$t('general.name')"> </v-text-field>
+          <v-checkbox v-model="editTarget.onHand" :label="$t('tool.on-hand')"> </v-checkbox>
+        </div>
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Delete Dialog -->
+    <BaseDialog
+      v-model="state.deleteDialog"
+      :title="$tc('general.confirm')"
+      :icon="$globals.icons.alertCircle"
+      color="error"
+      @confirm="deleteTool"
+    >
+      <v-card-text>
+        {{ $t("general.confirm-delete-generic") }}
+      </v-card-text>
+    </BaseDialog>
+
+    <!-- Tool Data Table -->
+    <BaseCardSectionTitle :icon="$globals.icons.potSteam" section :title="$tc('data-pages.tools.tool-data')"> </BaseCardSectionTitle>
+    <CrudTable
+      :table-config="tableConfig"
+      :headers.sync="tableHeaders"
+      :data="tools || []"
+      :bulk-actions="[]"
+      @delete-one="deleteEventHandler"
+      @edit-one="editEventHandler"
+    >
+      <template #button-row>
+        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
+      </template>
+      <template #item.onHand="{ item }">
+        <v-icon :color="item.onHand ? 'success' : undefined">
+          {{ item.onHand ? $globals.icons.check : $globals.icons.close }}
+        </v-icon>
+      </template>
+    </CrudTable>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
+import { validators } from "~/composables/use-validators";
+import { useToolStore, useToolData } from "~/composables/store";
+import { RecipeTool } from "~/lib/api/types/admin";
+
+export default defineComponent({
+  setup() {
+    const { i18n } = useContext();
+    const tableConfig = {
+      hideColumns: true,
+      canExport: true,
+    };
+    const tableHeaders = [
+      {
+        text: i18n.t("general.id"),
+        value: "id",
+        show: false,
+      },
+      {
+        text: i18n.t("general.name"),
+        value: "name",
+        show: true,
+      },
+      {
+        text: i18n.t("tool.on-hand"),
+        value: "onHand",
+        show: true,
+      },
+    ];
+
+    const state = reactive({
+      createDialog: false,
+      editDialog: false,
+      deleteDialog: false,
+    });
+
+    const toolData = useToolData();
+    const toolStore = useToolStore();
+
+
+    // ============================================================
+    // Create Tag
+
+    async function createTool() {
+      // @ts-ignore - only property really required is the name and onHand (RecipeOrganizerPage)
+      await toolStore.actions.createOne({ name: toolData.data.name, onHand: toolData.data.onHand });
+      toolData.reset();
+      state.createDialog = false;
+    }
+
+
+    // ============================================================
+    // Edit Tag
+
+    const editTarget = ref<RecipeTool | null>(null);
+
+    function editEventHandler(item: RecipeTool) {
+      state.editDialog = true;
+      editTarget.value = item;
+    }
+
+    async function editSaveTool() {
+      if (!editTarget.value) {
+        return;
+      }
+      await toolStore.actions.updateOne(editTarget.value);
+      state.editDialog = false;
+    }
+
+
+    // ============================================================
+    // Delete Tag
+
+    const deleteTarget = ref<RecipeTool | null>(null);
+
+    function deleteEventHandler(item: RecipeTool) {
+      state.deleteDialog = true;
+      deleteTarget.value = item;
+    }
+
+    async function deleteTool() {
+      if (!deleteTarget.value || deleteTarget.value.id === undefined) {
+        return;
+      }
+      await toolStore.actions.deleteOne(deleteTarget.value.id);
+      state.deleteDialog = false;
+    }
+
+    return {
+      state,
+      tableConfig,
+      tableHeaders,
+      tools: toolStore.items,
+      validators,
+
+      // create
+      createTarget: toolData.data,
+      createTool,
+
+      // edit
+      editTarget,
+      editEventHandler,
+      editSaveTool,
+
+      // delete
+      deleteTarget,
+      deleteEventHandler,
+      deleteTool
+    };
+  },
+});
+</script>
diff --git a/frontend/pages/group/data/units.vue b/frontend/pages/group/data/units.vue
index 919ba6431455..8e93e22a090d 100644
--- a/frontend/pages/group/data/units.vue
+++ b/frontend/pages/group/data/units.vue
@@ -180,7 +180,7 @@
         <BaseButton create @click="createDialog = true" />
 
         <BaseButton @click="mergeDialog = true">
-          <template #icon> {{ $globals.icons.units }} </template>
+          <template #icon> {{ $globals.icons.externalLink }} </template>
           {{ $t('data-pages.combine') }}
         </BaseButton>
       </template>