Enable shift categories to be reordered through drag and drop

beverloo · Mar 4, 2024 · d69036f · d69036f
1 parent 9bb1a2c
commit d69036f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/app/admin/volunteers/shifts/ShiftCategoriesTable.tsx b/app/admin/volunteers/shifts/ShiftCategoriesTable.tsx
@@ -55,7 +55,6 @@ export function ShiftCategoriesTable() {
             field: 'id',
             headerName: /* no header= */ '',
             editable: false,
-            sortable: false,
             width: 50,
 
             // The default shift category cannot be removed, as it's hardcoded in the source when
@@ -66,15 +65,13 @@ export function ShiftCategoriesTable() {
             field: 'name',
             headerName: 'Category',
             editable: true,
-            sortable: true,
             flex: 1,
         },
         {
             field: 'excitement',
             headerAlign: 'center',
             headerName: 'Default excitement',
             editable: true,
-            sortable: true,
             align: 'center',
             width: 200,
 
@@ -90,7 +87,6 @@ export function ShiftCategoriesTable() {
             headerName: 'Colour',
             description: 'Colours that will be assigned to shifts',
             editable: true,
-            sortable: false,
             align: 'center',
             width: 200,
 
@@ -102,7 +98,6 @@ export function ShiftCategoriesTable() {
             headerAlign: 'center',
             headerName: /* no header= */ '',
             editable: true,
-            sortable: false,
             align: 'center',
             width: 50,
 
@@ -133,6 +128,7 @@ export function ShiftCategoriesTable() {
     return (
         <RemoteDataTable columns={columns} endpoint="/api/admin/event/shifts/categories"
                          defaultSort={{ field: 'order', sort: 'asc' }} subject="category"
-                         enableCreate enableDelete enableUpdate pageSize={50} disableFooter />
+                         enableCreate enableDelete enableReorder enableUpdate pageSize={50}
+                         disableFooter />
     );
 }
diff --git a/app/api/admin/event/shifts/categories/[[...id]]/route.ts b/app/api/admin/event/shifts/categories/[[...id]]/route.ts
@@ -142,6 +142,20 @@ createDataTableApi(kEventShiftCategoryRowModel, kEventShiftCategoryContext, {
         };
     },
 
+    async reorder({ order }) {
+        const dbInstance = db;
+        await dbInstance.transaction(async () => {
+            for (let index = 0; index < order.length; ++index) {
+                await db.update(tShiftsCategories)
+                    .set({ shiftCategoryOrder: index })
+                    .where(tShiftsCategories.shiftCategoryId.equals(order[index]))
+                    .executeUpdate();
+            }
+        });
+
+        return { success: true };
+    },
+
     async update({ row }) {
         const affectedRows = await db.update(tShiftsCategories)
             .set({
@@ -158,6 +172,9 @@ createDataTableApi(kEventShiftCategoryRowModel, kEventShiftCategoryContext, {
     },
 
     async writeLog({ id }, mutation, props) {
+        if (mutation === 'Reordered')
+            return;  // no need to log when someone changes the order of categories
+
         const shiftCategoryName = await db.selectFrom(tShiftsCategories)
             .where(tShiftsCategories.shiftCategoryId.equals(id))
             .selectOneColumn(tShiftsCategories.shiftCategoryName)