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/components/Domain/Recipe/RecipeDataTable.vue

@@ -3,60 +3,73 @@
     v-model="selected"
     item-key="id"
     show-select
-    sort-by="dateAdded"
-    sort-desc
+    :sort-by="[{ key: 'dateAdded', order: 'desc' }]"
     :headers="headers"
     :items="recipes"
     :items-per-page="15"
     class="elevation-0"
     :loading="loading"
-    @input="setValue(selected)"
   >
-    <template #body.preappend>
-      <tr>
-        <td></td>
-        <td>Hello</td>
-        <td colspan="4"></td>
-      </tr>
+    <template #[`item.name`]="{ item }">
+      <a
+        :href="`/g/${groupSlug}/r/${item.slug}`"
+        style="color: inherit; text-decoration: inherit; "
+        @click="$emit('click')"
+      >{{ item.name }}</a>
     </template>
-    <template #item.name="{ item }">
-      <a :href="`/g/${groupSlug}/r/${item.slug}`" style="color: inherit; text-decoration: inherit; " @click="$emit('click')">{{ item.name }}</a>
+    <template #[`item.tags`]="{ item }">
+      <RecipeChip
+        small
+        :items="item.tags!"
+        :is-category="false"
+        url-prefix="tags"
+        @item-selected="filterItems"
+      />
     </template>
-    <template #item.tags="{ item }">
-      <RecipeChip small :items="item.tags" :is-category="false" url-prefix="tags" @item-selected="filterItems" />
+    <template #[`item.recipeCategory`]="{ item }">
+      <RecipeChip
+        small
+        :items="item.recipeCategory!"
+        @item-selected="filterItems"
+      />
     </template>
-    <template #item.recipeCategory="{ item }">
-      <RecipeChip small :items="item.recipeCategory" @item-selected="filterItems" />
+    <template #[`item.tools`]="{ item }">
+      <RecipeChip
+        small
+        :items="item.tools"
+        url-prefix="tools"
+        @item-selected="filterItems"
+      />
     </template>
-    <template #item.tools="{ item }">
-      <RecipeChip small :items="item.tools" url-prefix="tools" @item-selected="filterItems" />
+    <template #[`item.userId`]="{ item }">
+      <div class="d-flex align-center">
+        <UserAvatar
+          :user-id="item.userId!"
+          :tooltip="false"
+          size="40"
+        />
+        <div class="pl-2">
+          <span class="text-left">
+            {{ getMember(item.userId!) }}
+          </span>
+        </div>
+      </div>
     </template>
-    <template #item.userId="{ item }">
-      <v-list-item class="justify-start">
-        <UserAvatar :user-id="item.userId" :tooltip="false" size="40" />
-        <v-list-item-content class="pl-2">
-          <v-list-item-title class="text-left">
-            {{ getMember(item.userId) }}
-          </v-list-item-title>
-        </v-list-item-content>
-      </v-list-item>
-    </template>
-    <template #item.dateAdded="{ item }">
-      {{ formatDate(item.dateAdded) }}
+    <template #[`item.dateAdded`]="{ item }">
+      {{ formatDate(item.dateAdded!) }}
     </template>
   </v-data-table>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref, useContext, useRouter } from "@nuxtjs/composition-api";
 import UserAvatar from "../User/UserAvatar.vue";
 import RecipeChip from "./RecipeChips.vue";
-import { Recipe, RecipeCategory, RecipeTool } from "~/lib/api/types/recipe";
+import type { Recipe, RecipeCategory, RecipeTool } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
-import { UserSummary } from "~/lib/api/types/user";
-import { RecipeTag } from "~/lib/api/types/household";
+import type { UserSummary } from "~/lib/api/types/user";
+import type { RecipeTag } from "~/lib/api/types/household";
 
-const INPUT_EVENT = "input";
+const INPUT_EVENT = "update:modelValue";
 
 interface ShowHeaders {
   id: boolean;
@@ -70,11 +83,11 @@ interface ShowHeaders {
   dateAdded: boolean;
 }
 
-export default defineComponent({
+export default defineNuxtComponent({
   components: { RecipeChip, UserAvatar },
   props: {
-    value: {
-      type: Array,
+    modelValue: {
+      type: Array as PropType<Recipe[]>,
       required: false,
       default: () => [],
     },
@@ -104,45 +117,48 @@ export default defineComponent({
       },
     },
   },
+  emits: ["click"],
   setup(props, context) {
-    const { $auth, i18n } = useContext();
-    const groupSlug = $auth.user?.groupSlug;
+    const i18n = useI18n();
+    const $auth = useMealieAuth();
+    const groupSlug = $auth.user.value?.groupSlug;
     const router = useRouter();
-    function setValue(value: Recipe[]) {
-      context.emit(INPUT_EVENT, value);
-    }
+    const selected = computed({
+      get: () => props.modelValue,
+      set: value => context.emit(INPUT_EVENT, value),
+    });
 
     const headers = computed(() => {
-      const hdrs = [];
+      const hdrs: Array<{ title: string; value: string; align?: string; sortable?: boolean }> = [];
 
       if (props.showHeaders.id) {
-        hdrs.push({ text: i18n.t("general.id"), value: "id" });
+        hdrs.push({ title: i18n.t("general.id"), value: "id" });
       }
       if (props.showHeaders.owner) {
-        hdrs.push({ text: i18n.t("general.owner"), value: "userId", align: "center" });
+        hdrs.push({ title: i18n.t("general.owner"), value: "userId", align: "center", sortable: true });
       }
-      hdrs.push({ text: i18n.t("general.name"), value: "name" });
+      hdrs.push({ title: i18n.t("general.name"), value: "name", sortable: true });
       if (props.showHeaders.categories) {
-        hdrs.push({ text: i18n.t("recipe.categories"), value: "recipeCategory" });
+        hdrs.push({ title: i18n.t("recipe.categories"), value: "recipeCategory", sortable: true });
       }
 
       if (props.showHeaders.tags) {
-        hdrs.push({ text: i18n.t("tag.tags"), value: "tags" });
+        hdrs.push({ title: i18n.t("tag.tags"), value: "tags", sortable: true });
       }
       if (props.showHeaders.tools) {
-        hdrs.push({ text: i18n.t("tool.tools"), value: "tools" });
+        hdrs.push({ title: i18n.t("tool.tools"), value: "tools", sortable: true });
       }
       if (props.showHeaders.recipeServings) {
-        hdrs.push({ text: i18n.t("recipe.servings"), value: "recipeServings" });
+        hdrs.push({ title: i18n.t("recipe.servings"), value: "recipeServings", sortable: true });
       }
       if (props.showHeaders.recipeYieldQuantity) {
-        hdrs.push({ text: i18n.t("recipe.yield"), value: "recipeYieldQuantity" });
+        hdrs.push({ title: i18n.t("recipe.yield"), value: "recipeYieldQuantity", sortable: true });
       }
       if (props.showHeaders.recipeYield) {
-        hdrs.push({ text: i18n.t("recipe.yield-text"), value: "recipeYield" });
+        hdrs.push({ title: i18n.t("recipe.yield-text"), value: "recipeYield", sortable: true });
       }
       if (props.showHeaders.dateAdded) {
-        hdrs.push({ text: i18n.t("general.date-added"), value: "dateAdded" });
+        hdrs.push({ title: i18n.t("general.date-added"), value: "dateAdded", sortable: true });
       }
 
       return hdrs;
@@ -151,7 +167,8 @@ export default defineComponent({
     function formatDate(date: string) {
       try {
         return i18n.d(Date.parse(date), "medium");
-      } catch {
+      }
+      catch {
         return "";
       }
     }
@@ -181,15 +198,15 @@ export default defineComponent({
 
     function getMember(id: string) {
       if (members.value[0]) {
-        return members.value.find((m) => m.id === id)?.fullName;
+        return members.value.find(m => m.id === id)?.fullName;
       }
 
       return i18n.t("general.none");
     }
 
     return {
+      selected,
       groupSlug,
-      setValue,
       headers,
       formatDate,
       members,
@@ -197,16 +214,5 @@ export default defineComponent({
       filterItems,
     };
   },
-
-  data() {
-    return {
-      selected: [],
-    };
-  },
-  watch: {
-    value(val) {
-      this.selected = val;
-    },
-  },
 });
 </script>