fix: multiple regressions on data management page (#5758)

frontend/components/Domain/Recipe/RecipeDataTable.vue

@@ -3,12 +3,13 @@
     v-model="selected"
     item-key="id"
     show-select
-    :sort-by="[{ key: 'dateAdded', order: 'desc' }]"
+    :sort-by="sortBy"
     :headers="headers"
     :items="recipes"
     :items-per-page="15"
     class="elevation-0"
     :loading="loading"
+    return-object
   >
     <template #[`item.name`]="{ item }">
       <a
@@ -117,7 +118,7 @@ export default defineNuxtComponent({
       },
     },
   },
-  emits: ["click"],
+  emits: ["click", "update:modelValue"],
   setup(props, context) {
     const i18n = useI18n();
     const $auth = useMealieAuth();
@@ -128,6 +129,9 @@ export default defineNuxtComponent({
       set: value => context.emit(INPUT_EVENT, value),
     });
 
+    // Initialize sort state with default sorting by dateAdded descending
+    const sortBy = ref([{ key: "dateAdded", order: "desc" }]);
+
     const headers = computed(() => {
       const hdrs: Array<{ title: string; value: string; align?: string; sortable?: boolean }> = [];
 
@@ -206,6 +210,7 @@ export default defineNuxtComponent({
 
     return {
       selected,
+      sortBy,
       groupSlug,
       headers,
       formatDate,

frontend/pages/group/data/foods.vue

@@ -126,7 +126,7 @@
     <!-- Alias Sub-Dialog -->
     <RecipeDataAliasManagerDialog
       v-if="editTarget"
-      :value="aliasManagerDialog"
+      v-model="aliasManagerDialog"
       :data="editTarget"
       @submit="updateFoodAlias"
       @cancel="aliasManagerDialog = false"

frontend/pages/group/data/tags.vue

@@ -44,6 +44,7 @@
       :title="$t('general.confirm')"
       :icon="$globals.icons.alertCircle"
       color="error"
+      can-confirm
       @confirm="deleteTag"
     >
       <v-card-text>

frontend/pages/group/data/tools.vue

@@ -52,6 +52,7 @@
       :title="$t('general.confirm')"
       :icon="$globals.icons.alertCircle"
       color="error"
+      can-confirm
       @confirm="deleteTool"
     >
       <v-card-text>

frontend/pages/group/data/units.vue

@@ -19,30 +19,16 @@
           v-model="fromUnit"
           return-object
           :items="store"
-          item-title="id"
+          item-title="name"
           :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-title="id"
+          item-title="name"
           :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">