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/admin/manage/households/index.vue

@@ -5,7 +5,7 @@
       :title="$t('household.create-household')"
       :icon="$globals.icons.household"
     >
-      <template #activator> </template>
+      <template #activator />
       <v-card-text>
         <v-form ref="refNewHouseholdForm">
           <v-select
@@ -14,18 +14,27 @@
             :items="groups"
             rounded
             class="rounded-lg"
-            item-text="name"
+            item-title="name"
             item-value="id"
             :return-object="false"
-            filled
-            :label="$tc('household.household-group')"
+            variant="filled"
+            :label="$t('household.household-group')"
             :rules="[validators.required]"
           />
-          <AutoForm v-model="createHouseholdForm.data" :update-mode="updateMode" :items="createHouseholdForm.items" />
+          <AutoForm
+            v-model="createHouseholdForm.data"
+            :update-mode="updateMode"
+            :items="createHouseholdForm.items"
+          />
         </v-form>
       </v-card-text>
       <template #custom-card-action>
-        <BaseButton type="submit" @click="handleCreateSubmit"> {{ $t("general.create") }} </BaseButton>
+        <BaseButton
+          type="submit"
+          @click="handleCreateSubmit"
+        >
+          {{ $t("general.create") }}
+        </BaseButton>
       </template>
     </BaseDialog>
 
@@ -33,51 +42,63 @@
       v-model="confirmDialog"
       :title="$t('general.confirm')"
       color="error"
+      can-confirm
       @confirm="deleteHousehold(deleteTarget)"
     >
-      <template #activator> </template>
+      <template #activator />
       <v-card-text>
         {{ $t("general.confirm-delete-generic") }}
       </v-card-text>
     </BaseDialog>
 
-    <BaseCardSectionTitle :title="$tc('household.household-management')"> </BaseCardSectionTitle>
+    <BaseCardSectionTitle :title="$t('household.household-management')" />
     <section>
-      <v-toolbar flat color="transparent" class="justify-between">
-        <BaseButton @click="openDialog"> {{ $t("general.create") }} </BaseButton>
+      <v-toolbar
+        flat
+        color="transparent"
+        class="justify-between"
+      >
+        <BaseButton @click="openDialog">
+          {{ $t("general.create") }}
+        </BaseButton>
       </v-toolbar>
 
       <v-data-table
+        v-if="headers && households"
         :headers="headers"
-        :items="households || []"
+        :items="households"
         item-key="id"
         class="elevation-0"
         hide-default-footer
         disable-pagination
         :search="search"
-        @click:row="handleRowClick"
+        @click:row="($event, { item }) => handleRowClick(item)"
       >
-        <template #item.users="{ item }">
-          {{ item.users.length }}
+        <template #[`item.users`]="{ item }">
+          {{ item.users?.length }}
         </template>
-        <template #item.group="{ item }">
+        <template #[`item.group`]="{ item }">
           {{ item.group }}
         </template>
-        <template #item.webhookEnable="{ item }">
-          {{ item.webhooks.length > 0 ? $t("general.yes") : $t("general.no") }}
+        <template #[`item.webhookEnable`]="{ item }">
+          {{ item.webhooks!.length > 0 ? $t("general.yes") : $t("general.no") }}
         </template>
-        <template #item.actions="{ item }">
-          <v-tooltip bottom :disabled="!(item && item.users.length > 0)">
-            <template #activator="{ on, attrs }">
-              <div v-bind="attrs" v-on="on" >
+        <template #[`item.actions`]="{ item }">
+          <v-tooltip
+            bottom
+            :disabled="!(item && item.users!.length > 0)"
+          >
+            <template #activator="{ props }">
+              <div v-bind="props">
                 <v-btn
-                  :disabled="item && item.users.length > 0"
+                  :disabled="item && item.users!.length > 0"
                   class="mr-1"
                   icon
                   color="error"
+                  variant="text"
                   @click.stop="
                     confirmDialog = true;
-                    deleteTarget = item.id;
+                    deleteTarget = +item.id;
                   "
                 >
                   <v-icon>
@@ -86,28 +107,36 @@
                 </v-btn>
               </div>
             </template>
-            <span>{{ $tc("admin.household-delete-note") }}</span>
+            <span>{{ $t("admin.household-delete-note") }}</span>
           </v-tooltip>
         </template>
       </v-data-table>
-      <v-divider></v-divider>
+      <v-divider />
     </section>
   </v-container>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs, useContext, useRouter } from "@nuxtjs/composition-api";
 import { fieldTypes } from "~/composables/forms";
 import { useGroups } from "~/composables/use-groups";
 import { useAdminHouseholds } from "~/composables/use-households";
 import { validators } from "~/composables/use-validators";
-import { HouseholdInDB } from "~/lib/api/types/household";
-import { VForm } from "~/types/vuetify";
+import type { HouseholdInDB } from "~/lib/api/types/household";
+import type { VForm } from "~/types/auto-forms";
 
-export default defineComponent({
-  layout: "admin",
+export default defineNuxtComponent({
   setup() {
-    const { i18n } = useContext();
+    definePageMeta({
+      layout: "admin",
+    });
+
+    const i18n = useI18n();
+
+    // Set page title
+    useSeoMeta({
+      title: i18n.t("household.manage-households"),
+    });
+
     const { groups } = useGroups();
     const { households, refreshAllHouseholds, deleteHousehold, createHousehold } = useAdminHouseholds();
     const refNewHouseholdForm = ref<VForm | null>(null);
@@ -120,16 +149,16 @@ export default defineComponent({
       search: "",
       headers: [
         {
-          text: i18n.t("household.household"),
+          title: i18n.t("household.household"),
           align: "start",
           sortable: false,
           value: "id",
         },
-        { text: i18n.t("general.name"), value: "name" },
-        { text: i18n.t("group.group"), value: "group" },
-        { text: i18n.t("user.total-users"), value: "users" },
-        { text: i18n.t("user.webhooks-enabled"), value: "webhookEnable" },
-        { text: i18n.t("general.delete"), value: "actions" },
+        { title: i18n.t("general.name"), value: "name" },
+        { title: i18n.t("group.group"), value: "group" },
+        { title: i18n.t("user.total-users"), value: "users" },
+        { title: i18n.t("user.webhooks-enabled"), value: "webhookEnable" },
+        { title: i18n.t("general.delete"), value: "actions" },
       ],
       updateMode: false,
       createHouseholdForm: {
@@ -170,21 +199,16 @@ export default defineComponent({
     }
 
     return {
-        ...toRefs(state),
-        refNewHouseholdForm,
-        groups,
-        households,
-        validators,
-        refreshAllHouseholds,
-        deleteHousehold,
-        handleCreateSubmit,
-        openDialog,
-        handleRowClick,
-    };
-  },
-  head() {
-    return {
-      title: this.$t("household.manage-households") as string,
+      ...toRefs(state),
+      refNewHouseholdForm,
+      groups,
+      households,
+      validators,
+      refreshAllHouseholds,
+      deleteHousehold,
+      handleCreateSubmit,
+      openDialog,
+      handleRowClick,
     };
   },
 });