chore: Nuxt 4 upgrade (#7426)

frontend/app/components/Domain/Recipe/RecipeOrganizerDialog.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <BaseDialog
+      v-model="dialog"
+      width="500"
+      :title="properties.title"
+      :icon="properties.icon"
+      can-submit
+      :submit-disabled="!name"
+      @submit="select"
+    >
+      <v-form>
+        <v-card-text>
+          <v-text-field
+            v-model="name"
+            :label="properties.label"
+            :rules="[rules.required]"
+            autofocus
+          />
+          <v-checkbox
+            v-if="itemType === Organizer.Tool"
+            v-model="onHand"
+            :label="$t('tool.on-hand')"
+          />
+        </v-card-text>
+      </v-form>
+    </BaseDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserApi } from "~/composables/api";
+import { useCategoryStore, useTagStore, useToolStore } from "~/composables/store";
+import { type RecipeOrganizer, Organizer } from "~/lib/api/types/non-generated";
+
+const { $globals } = useNuxtApp();
+
+const CREATED_ITEM_EVENT = "created-item";
+
+interface Props {
+  color?: string | null;
+  tagDialog?: boolean;
+  itemType?: RecipeOrganizer;
+}
+const props = withDefaults(defineProps<Props>(), {
+  color: null,
+  tagDialog: true,
+  itemType: "category" as RecipeOrganizer,
+});
+
+const emit = defineEmits<{
+  "created-item": [item: any];
+}>();
+
+const dialog = defineModel<boolean>({ default: false });
+
+const i18n = useI18n();
+
+const name = ref("");
+const onHand = ref(false);
+
+watch(
+  dialog,
+  (val: boolean) => {
+    if (!val) name.value = "";
+  },
+);
+
+const userApi = useUserApi();
+
+const store = (() => {
+  switch (props.itemType) {
+    case Organizer.Tag:
+      return useTagStore();
+    case Organizer.Tool:
+      return useToolStore();
+    default:
+      return useCategoryStore();
+  }
+})();
+
+const properties = computed(() => {
+  switch (props.itemType) {
+    case Organizer.Tag:
+      return {
+        title: i18n.t("tag.create-a-tag"),
+        label: i18n.t("tag.tag-name"),
+        icon: $globals.icons.tags,
+        api: userApi.tags,
+      };
+    case Organizer.Tool:
+      return {
+        title: i18n.t("tool.create-a-tool"),
+        label: i18n.t("tool.tool-name"),
+        icon: $globals.icons.potSteam,
+        api: userApi.tools,
+      };
+    default:
+      return {
+        title: i18n.t("category.create-a-category"),
+        label: i18n.t("category.category-name"),
+        icon: $globals.icons.categories,
+        api: userApi.categories,
+      };
+  }
+});
+
+const rules = {
+  required: (val: string) => !!val || (i18n.t("general.a-name-is-required") as string),
+};
+
+async function select() {
+  if (store) {
+    // @ts-expect-error the same state is used for different organizer types, which have different requirements
+    const newItem = await store.actions.createOne({ name: name.value, onHand: onHand.value });
+    emit(CREATED_ITEM_EVENT, newItem);
+  }
+  dialog.value = false;
+}
+</script>
+
+<style></style>