Alias Manager

frontend/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue

@@ -33,7 +33,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { whenever } from "@vueuse/core";
 import { validators } from "~/composables/use-validators";
 import type { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
@@ -42,86 +42,66 @@ export interface GenericAlias {
   name: string;
 }
 
-export default defineNuxtComponent({
+interface Props {
-  props: {
+  data: IngredientFood | IngredientUnit;
-    modelValue: {
+}
-      type: Boolean,
-      default: false,
-    },
-    data: {
-      type: Object as () => IngredientFood | IngredientUnit,
-      required: true,
-    },
-  },
-  emits: ["submit", "update:modelValue", "cancel"],
-  setup(props, context) {
-    // V-Model Support
-    const dialog = computed({
-      get: () => {
-        return props.modelValue;
-      },
-      set: (val) => {
-        context.emit("update:modelValue", val);
-      },
-    });
 
-    function createAlias() {
+const props = defineProps<Props>();
-      aliases.value.push({
-        name: "",
-      });
-    }
 
-    function deleteAlias(index: number) {
+const emit = defineEmits<{
-      aliases.value.splice(index, 1);
+  submit: [aliases: GenericAlias[]];
-    }
+  cancel: [];
+}>();
 
-    const aliases = ref<GenericAlias[]>(props.data.aliases || []);
+// V-Model Support
-    function initAliases() {
+const dialog = defineModel<boolean>({ default: false });
-      aliases.value = [...props.data.aliases || []];
-      if (!aliases.value.length) {
-        createAlias();
-      }
-    }
 
+function createAlias() {
+  aliases.value.push({
+    name: "",
+  });
+}
+
+function deleteAlias(index: number) {
+  aliases.value.splice(index, 1);
+}
+
+const aliases = ref<GenericAlias[]>(props.data.aliases || []);
+function initAliases() {
+  aliases.value = [...props.data.aliases || []];
+  if (!aliases.value.length) {
+    createAlias();
+  }
+}
+
+initAliases();
+whenever(
+  () => dialog.value,
+  () => {
     initAliases();
-    whenever(
+  },
-      () => props.modelValue,
+);
-      () => {
-        initAliases();
-      },
-    );
 
-    function saveAliases() {
+function saveAliases() {
-      const seenAliasNames: string[] = [];
+  const seenAliasNames: string[] = [];
-      const keepAliases: GenericAlias[] = [];
+  const keepAliases: GenericAlias[] = [];
-      aliases.value.forEach((alias) => {
+  aliases.value.forEach((alias) => {
-        if (
+    if (
-          !alias.name
+      !alias.name
-          || alias.name === props.data.name
+      || alias.name === props.data.name
-          || alias.name === props.data.pluralName
+      || alias.name === props.data.pluralName
-          || alias.name === props.data.abbreviation
+      || alias.name === props.data.abbreviation
-          || alias.name === props.data.pluralAbbreviation
+      || alias.name === props.data.pluralAbbreviation
-          || seenAliasNames.includes(alias.name)
+      || seenAliasNames.includes(alias.name)
-        ) {
+    ) {
-          return;
+      return;
-        }
-
-        keepAliases.push(alias);
-        seenAliasNames.push(alias.name);
-      });
-
-      aliases.value = keepAliases;
-      context.emit("submit", keepAliases);
     }
 
-    return {
+    keepAliases.push(alias);
-      aliases,
+    seenAliasNames.push(alias.name);
-      createAlias,
+  });
-      dialog,
+
-      deleteAlias,
+  aliases.value = keepAliases;
-      saveAliases,
+  emit("submit", keepAliases);
-      validators,
+}
-    };
-  },
-});
 </script>

frontend/pages/group/data/units.vue

@@ -93,7 +93,7 @@
     <!-- Alias Sub-Dialog -->
     <RecipeDataAliasManagerDialog
       v-if="editTarget"
-      :value="aliasManagerDialog"
+      v-model="aliasManagerDialog"
       :data="editTarget"
       can-submit
       @submit="updateUnitAlias"