From 02a545dcb5ae8ff441e60b11c01b41f944efb7e4 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 10 Dec 2024 08:10:07 -0600
Subject: [PATCH] fix: Sort Food by Label on Data Management Page (#4631)

---
 frontend/components/global/CrudTable.vue | 2 ++
 frontend/pages/group/data/foods.vue      | 6 ++++++
 2 files changed, 8 insertions(+)

diff --git a/frontend/components/global/CrudTable.vue b/frontend/components/global/CrudTable.vue
index 1c7bfe3c9..6e427220d 100644
--- 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
index cb41a09bd..bdc2c4848 100644
--- 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"),