feat: Migrate to Nuxt 3 framework (#5184)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/pages/group/data/units.vue

@@ -1,25 +1,53 @@
 <template>
   <div>
     <!-- Merge Dialog -->
-    <BaseDialog v-model="mergeDialog" :icon="$globals.icons.units" :title="$t('data-pages.units.combine-unit')" @confirm="mergeUnits">
+    <BaseDialog
+      v-model="mergeDialog"
+      :icon="$globals.icons.units"
+      :title="$t('data-pages.units.combine-unit')"
+      can-confirm
+      @confirm="mergeUnits"
+    >
       <v-card-text>
-      <i18n path="data-pages.units.combine-unit-description">
-        <template #source-unit-will-be-deleted>
-          <strong> {{ $t('data-pages.recipes.source-unit-will-be-deleted') }} </strong>
-        </template>
-      </i18n>
+        <i18n-t keypath="data-pages.units.combine-unit-description">
+          <template #source-unit-will-be-deleted>
+            <strong> {{ $t('data-pages.recipes.source-unit-will-be-deleted') }} </strong>
+          </template>
+        </i18n-t>
 
-        <v-autocomplete v-model="fromUnit" return-object :items="store" item-text="id" :label="$t('data-pages.units.source-unit')">
-          <template #selection="{ item }"> {{ item.name }}</template>
-          <template #item="{ item }"> {{ item.name }} </template>
+        <v-autocomplete
+          v-model="fromUnit"
+          return-object
+          :items="store"
+          item-title="id"
+          :label="$t('data-pages.units.source-unit')"
+        >
+          <template #chip="{ item }">
+            {{ item.raw.name }}
+          </template>
+          <template #item="{ item }">
+            {{ item.raw.name }}
+          </template>
         </v-autocomplete>
-        <v-autocomplete v-model="toUnit" return-object :items="store" item-text="id" :label="$t('data-pages.units.target-unit')">
-          <template #selection="{ item }"> {{ item.name }}</template>
-          <template #item="{ item }"> {{ item.name }} </template>
+        <v-autocomplete
+          v-model="toUnit"
+          return-object
+          :items="store"
+          item-title="id"
+          :label="$t('data-pages.units.target-unit')"
+        >
+          <template #chip="{ item }">
+            {{ item.raw.name }}
+          </template>
+          <template #item="{ item }">
+            {{ item.raw.name }}
+          </template>
         </v-autocomplete>
 
         <template v-if="canMerge && fromUnit && toUnit">
-          <div class="text-center">{{ $t('data-pages.units.merging-unit-into-unit', [fromUnit.name, toUnit.name]) }}</div>
+          <div class="text-center">
+            {{ $t('data-pages.units.merging-unit-into-unit', [fromUnit.name, toUnit.name]) }}
+          </div>
         </template>
       </v-card-text>
     </BaseDialog>
@@ -30,7 +58,8 @@
       :icon="$globals.icons.units"
       :title="$t('data-pages.units.create-unit')"
       :submit-icon="$globals.icons.save"
-      :submit-text="$tc('general.save')"
+      :submit-text="$t('general.save')"
+      can-submit
       @submit="createUnit"
     >
       <v-card-text>
@@ -41,25 +70,36 @@
             :label="$t('general.name')"
             :hint="$t('data-pages.units.example-unit-singular')"
             :rules="[validators.required]"
-          ></v-text-field>
+          />
           <v-text-field
             v-model="createTarget.pluralName"
             :label="$t('general.plural-name')"
             :hint="$t('data-pages.units.example-unit-plural')"
-          ></v-text-field>
+          />
           <v-text-field
             v-model="createTarget.abbreviation"
             :label="$t('data-pages.units.abbreviation')"
             :hint="$t('data-pages.units.example-unit-abbreviation-singular')"
-          ></v-text-field>
+          />
           <v-text-field
             v-model="createTarget.pluralAbbreviation"
             :label="$t('data-pages.units.plural-abbreviation')"
             :hint="$t('data-pages.units.example-unit-abbreviation-plural')"
-          ></v-text-field>
-          <v-text-field v-model="createTarget.description" :label="$t('data-pages.units.description')"></v-text-field>
-          <v-checkbox v-model="createTarget.fraction" hide-details :label="$t('data-pages.units.display-as-fraction')"></v-checkbox>
-          <v-checkbox v-model="createTarget.useAbbreviation" hide-details :label="$t('data-pages.units.use-abbreviation')"></v-checkbox>
+          />
+          <v-text-field
+            v-model="createTarget.description"
+            :label="$t('data-pages.units.description')"
+          />
+          <v-checkbox
+            v-model="createTarget.fraction"
+            hide-details
+            :label="$t('data-pages.units.display-as-fraction')"
+          />
+          <v-checkbox
+            v-model="createTarget.useAbbreviation"
+            hide-details
+            :label="$t('data-pages.units.use-abbreviation')"
+          />
         </v-form>
       </v-card-text>
     </BaseDialog>
@@ -69,6 +109,7 @@
       v-if="editTarget"
       :value="aliasManagerDialog"
       :data="editTarget"
+      can-submit
       @submit="updateUnitAlias"
       @cancel="aliasManagerDialog = false"
     />
@@ -79,7 +120,8 @@
       :icon="$globals.icons.units"
       :title="$t('data-pages.units.edit-unit')"
       :submit-icon="$globals.icons.save"
-      :submit-text="$tc('general.save')"
+      :submit-text="$t('general.save')"
+      can-submit
       @submit="editSaveUnit"
     >
       <v-card-text v-if="editTarget">
@@ -89,43 +131,65 @@
             :label="$t('general.name')"
             :hint="$t('data-pages.units.example-unit-singular')"
             :rules="[validators.required]"
-          ></v-text-field>
+          />
           <v-text-field
             v-model="editTarget.pluralName"
             :label="$t('general.plural-name')"
             :hint="$t('data-pages.units.example-unit-plural')"
-          ></v-text-field>
+          />
           <v-text-field
             v-model="editTarget.abbreviation"
             :label="$t('data-pages.units.abbreviation')"
             :hint="$t('data-pages.units.example-unit-abbreviation-singular')"
-          ></v-text-field>
+          />
           <v-text-field
             v-model="editTarget.pluralAbbreviation"
             :label="$t('data-pages.units.plural-abbreviation')"
             :hint="$t('data-pages.units.example-unit-abbreviation-plural')"
-          ></v-text-field>
-          <v-text-field v-model="editTarget.description" :label="$t('data-pages.units.description')"></v-text-field>
-          <v-checkbox v-model="editTarget.fraction" hide-details :label="$t('data-pages.units.display-as-fraction')"></v-checkbox>
-          <v-checkbox v-model="editTarget.useAbbreviation" hide-details :label="$t('data-pages.units.use-abbreviation')"></v-checkbox>
+          />
+          <v-text-field
+            v-model="editTarget.description"
+            :label="$t('data-pages.units.description')"
+          />
+          <v-checkbox
+            v-model="editTarget.fraction"
+            hide-details
+            :label="$t('data-pages.units.display-as-fraction')"
+          />
+          <v-checkbox
+            v-model="editTarget.useAbbreviation"
+            hide-details
+            :label="$t('data-pages.units.use-abbreviation')"
+          />
         </v-form>
       </v-card-text>
       <template #custom-card-action>
-        <BaseButton edit @click="aliasManagerEventHandler">{{ $t('data-pages.manage-aliases') }}</BaseButton>
+        <BaseButton
+          edit
+          @click="aliasManagerEventHandler"
+        >
+          {{ $t('data-pages.manage-aliases') }}
+        </BaseButton>
       </template>
     </BaseDialog>
 
     <!-- Delete Dialog -->
     <BaseDialog
       v-model="deleteDialog"
-      :title="$tc('general.confirm')"
+      :title="$t('general.confirm')"
       :icon="$globals.icons.alertCircle"
       color="error"
+      can-confirm
       @confirm="deleteUnit"
     >
       <v-card-text>
         {{ $t("general.confirm-delete-generic") }}
-        <p v-if="deleteTarget" class="mt-4 ml-4">{{ deleteTarget.name }}</p>
+        <p
+          v-if="deleteTarget"
+          class="mt-4 ml-4"
+        >
+          {{ deleteTarget.name }}
+        </p>
       </v-card-text>
     </BaseDialog>
 
@@ -133,20 +197,25 @@
     <BaseDialog
       v-model="bulkDeleteDialog"
       width="650px"
-      :title="$tc('general.confirm')"
+      :title="$t('general.confirm')"
       :icon="$globals.icons.alertCircle"
       color="error"
+      can-confirm
       @confirm="deleteSelected"
     >
       <v-card-text>
-        <p class="h4">{{ $t('general.confirm-delete-generic-items') }}</p>
-        <v-card outlined>
-          <v-virtual-scroll height="400" item-height="25" :items="bulkDeleteTarget">
+        <p class="h4">
+          {{ $t('general.confirm-delete-generic-items') }}
+        </p>
+        <v-card variant="outlined">
+          <v-virtual-scroll
+            height="400"
+            item-height="25"
+            :items="bulkDeleteTarget"
+          >
             <template #default="{ item }">
               <v-list-item class="pb-2">
-                <v-list-item-content>
-                  <v-list-item-title>{{ item.name }}</v-list-item-title>
-                </v-list-item-content>
+                <v-list-item-title>{{ item.name }}</v-list-item-title>
               </v-list-item>
             </template>
           </v-virtual-scroll>
@@ -154,11 +223,12 @@
       </v-card-text>
     </BaseDialog>
 
-    <!-- Seed Dialog-->
+    <!-- Seed Dialog -->
     <BaseDialog
       v-model="seedDialog"
       :icon="$globals.icons.foods"
-      :title="$tc('data-pages.seed-data')"
+      :title="$t('data-pages.seed-data')"
+      can-confirm
       @confirm="seedDatabase"
     >
       <v-card-text>
@@ -168,36 +238,42 @@
         <v-autocomplete
           v-model="locale"
           :items="locales"
-          item-text="name"
+          item-title="name"
           :label="$t('data-pages.select-language')"
           class="my-3"
           hide-details
-          outlined
+          variant="outlined"
           offset
         >
           <template #item="{ item }">
-            <v-list-item-content>
-              <v-list-item-title> {{ item.name }} </v-list-item-title>
-              <v-list-item-subtitle>
-                {{ item.progress }}% {{ $tc("language-dialog.translated") }}
-              </v-list-item-subtitle>
-            </v-list-item-content>
+            <v-list-item-title> {{ item.raw.name }} </v-list-item-title>
+            <v-list-item-subtitle>
+              {{ item.raw.progress }}% {{ $t("language-dialog.translated") }}
+            </v-list-item-subtitle>
           </template>
         </v-autocomplete>
 
-        <v-alert v-if="store && store.length > 0" type="error" class="mb-0 text-body-2">
+        <v-alert
+          v-if="store && store.length > 0"
+          type="error"
+          class="mb-0 text-body-2"
+        >
           {{ $t("data-pages.foods.seed-dialog-warning") }}
         </v-alert>
       </v-card-text>
     </BaseDialog>
 
     <!-- Data Table -->
-    <BaseCardSectionTitle :icon="$globals.icons.units" section :title="$tc('data-pages.units.unit-data')"> </BaseCardSectionTitle>
+    <BaseCardSectionTitle
+      :icon="$globals.icons.units"
+      section
+      :title="$t('data-pages.units.unit-data')"
+    />
     <CrudTable
+      v-model:headers="tableHeaders"
       :table-config="tableConfig"
-      :headers.sync="tableHeaders"
       :data="store"
-      :bulk-actions="[{icon: $globals.icons.delete, text: $tc('general.delete'), event: 'delete-selected'}]"
+      :bulk-actions="[{ icon: $globals.icons.delete, text: $t('general.delete'), event: 'delete-selected' }]"
       initial-sort="createdAt"
       initial-sort-desc
       @delete-one="deleteEventHandler"
@@ -206,29 +282,36 @@
       @delete-selected="bulkDeleteEventHandler"
     >
       <template #button-row>
-        <BaseButton create @click="createDialog = true" />
+        <BaseButton
+          create
+          @click="createDialog = true"
+        />
 
         <BaseButton @click="mergeDialog = true">
-          <template #icon> {{ $globals.icons.externalLink }} </template>
+          <template #icon>
+            {{ $globals.icons.externalLink }}
+          </template>
           {{ $t('data-pages.combine') }}
         </BaseButton>
       </template>
-      <template #item.useAbbreviation="{ item }">
+      <template #[`item.useAbbreviation`]="{ item }">
         <v-icon :color="item.useAbbreviation ? 'success' : undefined">
           {{ item.useAbbreviation ? $globals.icons.check : $globals.icons.close }}
         </v-icon>
       </template>
-      <template #item.fraction="{ item }">
+      <template #[`item.fraction`]="{ item }">
         <v-icon :color="item.fraction ? 'success' : undefined">
           {{ item.fraction ? $globals.icons.check : $globals.icons.close }}
         </v-icon>
       </template>
-      <template #item.createdAt="{ item }">
+      <template #[`item.createdAt`]="{ item }">
         {{ formatDate(item.createdAt) }}
       </template>
       <template #button-bottom>
         <BaseButton @click="seedDialog = true">
-          <template #icon> {{ $globals.icons.database }} </template>
+          <template #icon>
+            {{ $globals.icons.database }}
+          </template>
           {{ $t('data-pages.seed') }}
         </BaseButton>
       </template>
@@ -237,21 +320,21 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref, useContext } from "@nuxtjs/composition-api";
 import type { LocaleObject } from "@nuxtjs/i18n";
 import RecipeDataAliasManagerDialog from "~/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue";
 import { validators } from "~/composables/use-validators";
 import { useUserApi } from "~/composables/api";
-import { CreateIngredientUnit, IngredientUnit, IngredientUnitAlias } from "~/lib/api/types/recipe";
+import type { CreateIngredientUnit, IngredientUnit, IngredientUnitAlias } from "~/lib/api/types/recipe";
 import { useLocales } from "~/composables/use-locales";
 import { useUnitStore } from "~/composables/store";
-import { VForm } from "~/types/vuetify";
+import type { VForm } from "~/types/auto-forms";
 
-export default defineComponent({
+export default defineNuxtComponent({
   components: { RecipeDataAliasManagerDialog },
   setup() {
     const userApi = useUserApi();
-    const { i18n } = useContext();
+    const i18n = useI18n();
+
     const tableConfig = {
       hideColumns: true,
       canExport: true,
@@ -266,26 +349,31 @@ export default defineComponent({
         text: i18n.t("general.name"),
         value: "name",
         show: true,
+        sortable: true,
       },
       {
         text: i18n.t("general.plural-name"),
         value: "pluralName",
         show: true,
+        sortable: true,
       },
       {
         text: i18n.t("data-pages.units.abbreviation"),
         value: "abbreviation",
         show: true,
+        sortable: true,
       },
       {
         text: i18n.t("data-pages.units.plural-abbreviation"),
         value: "pluralAbbreviation",
         show: true,
+        sortable: true,
       },
       {
         text: i18n.t("data-pages.units.use-abbv"),
         value: "useAbbreviation",
         show: true,
+        sortable: true,
       },
       {
         text: i18n.t("data-pages.units.description"),
@@ -296,18 +384,21 @@ export default defineComponent({
         text: i18n.t("data-pages.units.fraction"),
         value: "fraction",
         show: true,
+        sortable: true,
       },
       {
-        text: i18n.tc("general.date-added"),
+        text: i18n.t("general.date-added"),
         value: "createdAt",
         show: false,
+        sortable: true,
       },
     ];
 
     function formatDate(date: string) {
       try {
         return i18n.d(Date.parse(date), "medium");
-      } catch {
+      }
+      catch {
         return "";
       }
     }
@@ -450,8 +541,8 @@ export default defineComponent({
       locale.value = currentLocale.value;
     });
 
-    const locales = LOCALES.filter((locale) =>
-      (i18n.locales as LocaleObject[]).map((i18nLocale) => i18nLocale.code).includes(locale.value)
+    const locales = LOCALES.filter(locale =>
+      (i18n.locales.value as LocaleObject[]).map(i18nLocale => i18nLocale.code).includes(locale.value),
     );
 
     async function seedDatabase() {