Merge branch 'mealie-recipes:mealie-next' into manage-data-improve-delete-prompt

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
+        // @ts-expect-error the same state is used for different organizer types, which have different requirements
-        await store.actions.createOne({ name: state.name });
+        await store.actions.createOne({ ...state });
       }
 
       const newItem = store.items.value.find((item) => item.name === state.name);

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,

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)">
+        <template v-for="(item, index) in items">
-          <v-list-item-icon v-if="item.icon">
+          <v-list-item :key="index" @click="setValue(item)">
-            <v-icon>{{ item.icon }}</v-icon>
+            <v-list-item-icon v-if="item.icon">
-          </v-list-item-icon>
+              <v-icon>{{ item.icon }}</v-icon>
-          <v-list-item-title>{{ item.text }}</v-list-item-title>
+            </v-list-item-icon>
-        </v-list-item>
+            <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)">
+      <template v-for="(item, index) in items">
-        <v-list-item-icon v-if="item.icon">
+        <v-list-item :key="index" @click="$emit(item.event)">
-          <v-icon>{{ item.icon }}</v-icon>
+          <v-list-item-icon v-if="item.icon">
-        </v-list-item-icon>
+            <v-icon>{{ item.icon }}</v-icon>
-        <v-list-item-title>{{ item.text }}</v-list-item-title>
+          </v-list-item-icon>
-      </v-list-item>
+          <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({

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",

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(() => {

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>

frontend/pages/group/data/foods.vue

@@ -171,7 +171,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>

frontend/pages/group/data/labels.vue

@@ -93,10 +93,7 @@
       @edit-one="editEventHandler"
     >
       <template #button-row>
-        <BaseButton create @click="state.createDialog = true">
+        <BaseButton create @click="state.createDialog = true">{{ $t("general.create") }}</BaseButton>
-          <template #icon> {{ $globals.icons.tags }} </template>
-          {{ $t("general.create") }}
-        </BaseButton>
       </template>
       <template #item.name="{ item }">
         <MultiPurposeLabel v-if="item" :label="item">

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>

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>

frontend/pages/group/data/units.vue

@@ -183,7 +183,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>