refactor: unify recipe-organizer components (#1340)

* use generic context menu

* implement organizer stores

* add basic organizer types

* refactor selectors to apply for all organizers

* remove legacy organizer composables

frontend/composables/partials/use-actions-factory.ts

@@ -3,7 +3,7 @@ import { useAsyncKey } from "../use-utils";
 import { BaseCRUDAPI } from "~/api/_base";
 
 type BoundT = {
-  id: string | number;
+  id?: string | number;
 };
 
 interface StoreActions<T extends BoundT> {
@@ -29,7 +29,12 @@ export function useStoreActions<T extends BoundT>(
     loading.value = true;
     const allItems = useAsync(async () => {
       const { data } = await api.getAll();
-      return data;
+
+      if (allRef) {
+        allRef.value = data;
+      }
+
+      return data ?? [];
     }, useAsyncKey());
 
     loading.value = false;
@@ -73,8 +78,8 @@ export function useStoreActions<T extends BoundT>(
 
   async function deleteOne(id: string | number) {
     loading.value = true;
-    const { data } = await api.deleteOne(id);
-    if (data && allRef?.value) {
+    const { response } = await api.deleteOne(id);
+    if (response && allRef?.value) {
       refresh();
     }
     loading.value = false;

frontend/composables/recipes/index.ts

@@ -1,7 +1,6 @@
 export { useFraction } from "./use-fraction";
 export { useRecipe } from "./use-recipe";
 export { useRecipes, recentRecipes, allRecipes, useLazyRecipes, useSorter } from "./use-recipes";
-export { useTags, useCategories, allCategories, allTags } from "./use-tags-categories";
 export { parseIngredientText } from "./use-recipe-ingredients";
 export { useRecipeSearch } from "./use-recipe-search";
 export { useTools } from "./use-recipe-tools";

frontend/composables/recipes/use-tags-categories.ts

@@ -1,65 +0,0 @@
-import { Ref, ref, useAsync } from "@nuxtjs/composition-api";
-import { useUserApi } from "../api";
-import { useAsyncKey } from "../use-utils";
-import { CategoriesAPI } from "~/api/class-interfaces/organizer-categories";
-import { TagsAPI } from "~/api/class-interfaces/organizer-tags";
-import { RecipeTag, RecipeCategory } from "~/types/api-types/recipe";
-
-export const allCategories = ref<RecipeCategory[] | null>([]);
-export const allTags = ref<RecipeTag[] | null>([]);
-
-function baseTagsCategories(
-  reference: Ref<RecipeCategory[] | null> | Ref<RecipeTag[] | null>,
-  api: TagsAPI | CategoriesAPI
-) {
-  function useAsyncGetAll() {
-    useAsync(async () => {
-      await refreshItems();
-    }, useAsyncKey());
-  }
-
-  async function refreshItems() {
-    const { data } = await api.getAll();
-    // @ts-ignore hotfix
-    reference.value = data;
-  }
-
-  async function createOne(payload: { name: string }) {
-    const { data } = await api.createOne(payload);
-    if (data) {
-      refreshItems();
-    }
-  }
-
-  async function deleteOne(slug: string) {
-    const { data } = await api.deleteOne(slug);
-    if (data) {
-      refreshItems();
-    }
-  }
-
-  async function updateOne(slug: string, payload: { name: string }) {
-    // @ts-ignore // TODO: Fix Typescript Issue - Unsure how to fix this while also keeping mixins
-    const { data } = await api.updateOne(slug, payload);
-    if (data) {
-      refreshItems();
-    }
-  }
-
-  return { useAsyncGetAll, refreshItems, createOne, deleteOne, updateOne };
-}
-
-export const useTags = function () {
-  const api = useUserApi();
-  return {
-    allTags,
-    ...baseTagsCategories(allTags, api.tags),
-  };
-};
-export const useCategories = function () {
-  const api = useUserApi();
-  return {
-    allCategories,
-    ...baseTagsCategories(allCategories, api.categories),
-  };
-};

frontend/composables/store/index.ts

@@ -1,3 +1,6 @@
 export { useFoodStore, useFoodData } from "./use-food-store";
 export { useUnitStore, useUnitData } from "./use-unit-store";
 export { useLabelStore, useLabelData } from "./use-label-store";
+export { useToolStore, useToolData } from "./use-tool-store";
+export { useCategoryStore, useCategoryData } from "./use-category-store";
+export { useTagStore, useTagData } from "./use-tag-store";

frontend/composables/store/use-category-store.ts

@@ -0,0 +1,47 @@
+import { reactive, ref, Ref } from "@nuxtjs/composition-api";
+import { useStoreActions } from "../partials/use-actions-factory";
+import { useUserApi } from "~/composables/api";
+import { RecipeCategory } from "~/types/api-types/admin";
+
+const categoryStore: Ref<RecipeCategory[]> = ref([]);
+
+export function useCategoryData() {
+  const data = reactive({
+    id: "",
+    name: "",
+    slug: undefined,
+  });
+
+  function reset() {
+    data.id = "";
+    data.name = "";
+    data.slug = undefined;
+  }
+
+  return {
+    data,
+    reset,
+  };
+}
+
+export function useCategoryStore() {
+  const api = useUserApi();
+  const loading = ref(false);
+
+  const actions = {
+    ...useStoreActions<RecipeCategory>(api.categories, categoryStore, loading),
+    flushStore() {
+      categoryStore.value = [];
+    },
+  };
+
+  if (!categoryStore.value || categoryStore.value?.length === 0) {
+    actions.getAll();
+  }
+
+  return {
+    items: categoryStore,
+    actions,
+    loading,
+  };
+}

frontend/composables/store/use-tag-store.ts

@@ -0,0 +1,47 @@
+import { reactive, ref, Ref } from "@nuxtjs/composition-api";
+import { useStoreActions } from "../partials/use-actions-factory";
+import { useUserApi } from "~/composables/api";
+import { RecipeTag } from "~/types/api-types/admin";
+
+const items: Ref<RecipeTag[]> = ref([]);
+
+export function useTagData() {
+  const data = reactive({
+    id: "",
+    name: "",
+    slug: undefined,
+  });
+
+  function reset() {
+    data.id = "";
+    data.name = "";
+    data.slug = undefined;
+  }
+
+  return {
+    data,
+    reset,
+  };
+}
+
+export function useTagStore() {
+  const api = useUserApi();
+  const loading = ref(false);
+
+  const actions = {
+    ...useStoreActions<RecipeTag>(api.tags, items, loading),
+    flushStore() {
+      items.value = [];
+    },
+  };
+
+  if (!items.value || items.value?.length === 0) {
+    actions.getAll();
+  }
+
+  return {
+    items,
+    actions,
+    loading,
+  };
+}

frontend/composables/store/use-tool-store.ts

@@ -0,0 +1,49 @@
+import { reactive, ref, Ref } from "@nuxtjs/composition-api";
+import { useStoreActions } from "../partials/use-actions-factory";
+import { useUserApi } from "~/composables/api";
+import { RecipeTool } from "~/types/api-types/recipe";
+
+const toolStore: Ref<RecipeTool[]> = ref([]);
+
+export function useToolData() {
+  const data = reactive({
+    id: "",
+    name: "",
+    slug: undefined,
+    onHand: false,
+  });
+
+  function reset() {
+    data.id = "";
+    data.name = "";
+    data.slug = undefined;
+    data.onHand = false;
+  }
+
+  return {
+    data,
+    reset,
+  };
+}
+
+export function useToolStore() {
+  const api = useUserApi();
+  const loading = ref(false);
+
+  const actions = {
+    ...useStoreActions<RecipeTool>(api.tools, toolStore, loading),
+    flushStore() {
+      toolStore.value = [];
+    },
+  };
+
+  if (!toolStore.value || toolStore.value?.length === 0) {
+    actions.getAll();
+  }
+
+  return {
+    items: toolStore,
+    actions,
+    loading,
+  };
+}

frontend/composables/use-context-presents.ts

@@ -0,0 +1,30 @@
+import { useContext } from "@nuxtjs/composition-api";
+
+export interface ContextMenuItem {
+  title: string;
+  icon: string;
+  event: string;
+  color?: string;
+}
+
+export function useContextPresets(): { [key: string]: ContextMenuItem } {
+  const { $globals, i18n } = useContext();
+
+  return {
+    delete: {
+      title: i18n.tc("general.delete"),
+      icon: $globals.icons.delete,
+      event: "delete",
+    },
+    edit: {
+      title: i18n.tc("general.edit"),
+      icon: $globals.icons.edit,
+      event: "edit",
+    },
+    save: {
+      title: i18n.tc("general.save"),
+      icon: $globals.icons.save,
+      event: "save",
+    },
+  };
+}