fix: Sort Food by Label on Data Management Page (#4631)

mealie-recipes · Dec 10, 2024 · 02a545d · 02a545d
1 parent eecda1b
commit 02a545d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/frontend/components/global/CrudTable.vue b/frontend/components/global/CrudTable.vue
@@ -99,6 +99,8 @@ export interface TableHeaders {
   value: string;
   show: boolean;
   align?: string;
+  sortable?: boolean;
+  sort?: (a: any, b: any) => number;
 }
 
 export interface BulkAction {

diff --git a/frontend/pages/group/data/foods.vue b/frontend/pages/group/data/foods.vue
@@ -290,6 +290,7 @@ import MultiPurposeLabel from "~/components/Domain/ShoppingList/MultiPurposeLabe
 import { useLocales } from "~/composables/use-locales";
 import { useFoodStore, useLabelStore } from "~/composables/store";
 import { VForm } from "~/types/vuetify";
+import { MultiPurposeLabelOut } from "~/lib/api/types/labels";
 
 export default defineComponent({
   components: { MultiPurposeLabel, RecipeDataAliasManagerDialog },
@@ -325,6 +326,11 @@ export default defineComponent({
         text: i18n.tc("shopping-list.label"),
         value: "label",
         show: true,
+        sort: (label1: MultiPurposeLabelOut | null, label2: MultiPurposeLabelOut | null) => {
+          const label1Name = label1?.name || "";
+          const label2Name = label2?.name || "";
+          return label1Name.localeCompare(label2Name);
+        },
       },
       {
         text: i18n.tc("tool.on-hand"),