fix status grid sorting

dist/index.js

@@ -2550,27 +2550,21 @@
     ))))));
   }
 
-  // src/View/Components/filteredList.tsx
-  function FilteredList(reference, stringEntryObjectConverter, objects, viewBuilder) {
-    const matchingObjects = new ListState();
-    objects.handleAddition((newObject) => {
-      const doesMatch = checkDoesObjectMatchReference(
-        reference,
-        stringEntryObjectConverter(newObject)
-      );
-      if (doesMatch == false) return;
-      matchingObjects.add(newObject);
-      objects.handleRemoval(newObject, () => {
-        matchingObjects.remove(newObject);
-      });
-    });
-    return viewBuilder(matchingObjects);
-  }
-
   // src/View/Components/propertyValueList.tsx
   function PropertyValueList(propertyKey, stringEntryObjectConverter, objects, viewBuilder) {
     const propertyValues = new ListState();
-    function collectValues() {
+    const sortedPropertyValues = createSortedPropertyValueState(propertyValues);
+    objects.subscribe(() => {
+      collectPropertyValuesToState(
+        propertyKey,
+        stringEntryObjectConverter,
+        objects,
+        propertyValues
+      );
+    });
+    return viewBuilder(propertyValues, sortedPropertyValues);
+  }
+  function collectPropertyValuesToState(propertyKey, stringEntryObjectConverter, objects, propertyValues) {
     const values = collectObjectValuesForKey(
       propertyKey,
       stringEntryObjectConverter,
@@ -2586,10 +2580,34 @@
       }
     }
   }
-    objects.subscribe(() => {
-      collectValues();
+  function createSortedPropertyValueState(propertyValues) {
+    return createProxyState(
+      [propertyValues],
+      () => [...propertyValues.value.values()].sort(localeCompare)
+    );
+  }
+  function createPropertyValueIndexState(sortedKeys, key) {
+    return createProxyState(
+      [sortedKeys],
+      () => sortedKeys.value.indexOf(key)
+    );
+  }
+
+  // src/View/Components/filteredList.tsx
+  function FilteredList(reference, stringEntryObjectConverter, objects, viewBuilder) {
+    const matchingObjects = new ListState();
+    objects.handleAddition((newObject) => {
+      const doesMatch = checkDoesObjectMatchReference(
+        reference,
+        stringEntryObjectConverter(newObject)
+      );
+      if (doesMatch == false) return;
+      matchingObjects.add(newObject);
+      objects.handleRemoval(newObject, () => {
+        matchingObjects.remove(newObject);
       });
-    return viewBuilder(propertyValues);
+    });
+    return viewBuilder(matchingObjects);
   }
 
   // src/ViewModel/Utility/taskPropertyBulkChangeViewModel.ts
@@ -2694,15 +2712,11 @@
       "category",
       (taskViewModel) => taskViewModel.task,
       boardViewModel.taskViewModels,
-      (categories) => {
-        const sortedCategories = createProxyState(
-          [categories],
-          () => [...categories.value.values()].sort(localeCompare)
-        );
+      (categories, sortedCategories) => {
         const categoryNameConverter = (categoryName) => {
-          const index = createProxyState(
-            [sortedCategories],
-            () => sortedCategories.value.indexOf(categoryName)
+          const index = createPropertyValueIndexState(
+            sortedCategories,
+            categoryName
           );
           return KanbanBoard(categoryName, index, boardViewModel);
         };
@@ -2773,22 +2787,20 @@
 
   // src/View/ChatPages/boardStatusGridPage.tsx
   function BoardStatusGridPage(boardViewModel) {
-    const categoryRowConverter = (categoryName) => {
-      return CategoryRow(categoryName, statuses, boardViewModel);
-    };
-    const statusNameCellConverter = (statusName) => {
-      return StatusNameCell(statusName, boardViewModel);
-    };
     const statuses = new ListState();
+    const sortedStatuses = createSortedPropertyValueState(statuses);
     boardViewModel.taskViewModels.subscribe(() => {
-      statuses.clear();
-      const statusArray = collectObjectValuesForKey(
+      collectPropertyValuesToState(
         "status",
         (taskViewModel) => taskViewModel.task,
-        [...boardViewModel.taskViewModels.value.values()]
+        boardViewModel.taskViewModels,
+        statuses
       );
-      statuses.add(...statusArray);
     });
+    const statusNameCellConverter = (statusName) => {
+      const index = createPropertyValueIndexState(sortedStatuses, statusName);
+      return StatusNameCell(statusName, index, boardViewModel);
+    };
     return /* @__PURE__ */ createElement("div", { class: "status-page-content" }, /* @__PURE__ */ createElement(
       "div",
       {
@@ -2799,7 +2811,20 @@
       "category",
       (taskViewModel) => taskViewModel.task,
       boardViewModel.filteredTaskViewModels,
-      (categories) => {
+      (categories, sortedCategories) => {
+        const categoryRowConverter = (categoryName) => {
+          const index = createPropertyValueIndexState(
+            sortedCategories,
+            categoryName
+          );
+          return CategoryRow(
+            categoryName,
+            index,
+            statuses,
+            sortedStatuses,
+            boardViewModel
+          );
+        };
         return /* @__PURE__ */ createElement(
           "div",
           {
@@ -2810,7 +2835,7 @@
       }
     ));
   }
-  function StatusNameCell(statusName, boardViewModel) {
+  function StatusNameCell(statusName, index, boardViewModel) {
     const taskViewModelsWithMatchingStatus = new ListState();
     boardViewModel.taskViewModels.handleAddition(
       (taskViewModel) => {
@@ -2826,7 +2851,7 @@
       taskViewModelsWithMatchingStatus,
       statusName
     );
-    return /* @__PURE__ */ createElement("div", { class: "flex-row" }, /* @__PURE__ */ createElement("div", { class: "property-input-wrapper" }, /* @__PURE__ */ createElement(
+    const view = /* @__PURE__ */ createElement("div", { class: "flex-row" }, /* @__PURE__ */ createElement("div", { class: "property-input-wrapper" }, /* @__PURE__ */ createElement(
       "input",
       {
         placeholder: translations.chatPage.task.renameCategoryInputPlaceholder,
@@ -2842,23 +2867,29 @@
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "check")
     )));
+    index.subscribe((newIndex) => {
+      view.style.order = newIndex;
+    });
+    return view;
   }
-  function CategoryRow(categoryName, allStatuses, boardViewModel) {
+  function CategoryRow(categoryName, index, allStatuses, sortedStatuses, boardViewModel) {
     return FilteredList(
       { category: categoryName },
       (taskViewModel) => taskViewModel.task,
       boardViewModel.taskViewModels,
       (taskViewModels) => {
         const statusNameConverter = (statusName) => {
+          const index2 = createPropertyValueIndexState(sortedStatuses, statusName);
           return CategoryStatusColumn(
             categoryName,
             statusName,
+            index2,
             boardViewModel,
             taskViewModels
           );
         };
         const viewModel = new TaskCategoryBulkChangeViewModel(taskViewModels, categoryName);
-        return /* @__PURE__ */ createElement("div", { class: "flex-row flex-no large-gap" }, /* @__PURE__ */ createElement("div", { class: "property-input-wrapper" }, /* @__PURE__ */ createElement(
+        const view = /* @__PURE__ */ createElement("div", { class: "flex-row flex-no large-gap" }, /* @__PURE__ */ createElement("div", { class: "property-input-wrapper" }, /* @__PURE__ */ createElement(
           "input",
           {
             placeholder: translations.chatPage.task.renameCategoryInputPlaceholder,
@@ -2880,10 +2911,14 @@
             "children:append": [allStatuses, statusNameConverter]
           }
         ));
+        index.subscribe((newIndex) => {
+          view.style.order = newIndex;
+        });
+        return view;
       }
     );
   }
-  function CategoryStatusColumn(categoryName, statusName, boardViewModel, taskViewModelsWithMatchingCategory) {
+  function CategoryStatusColumn(categoryName, statusName, index, boardViewModel, taskViewModelsWithMatchingCategory) {
     const taskViewModels = new ListState();
     taskViewModelsWithMatchingCategory.handleAddition((taskViewModel) => {
       const doesMatchStatus = taskViewModel.status.value == statusName;
@@ -2896,7 +2931,7 @@
     function drop() {
       boardViewModel.handleDropWithinBoard(categoryName, statusName);
     }
-    return /* @__PURE__ */ createElement(
+    const view = /* @__PURE__ */ createElement(
       "div",
       {
         class: "status-column gap",
@@ -2905,6 +2940,10 @@
         "children:append": [taskViewModels, TaskViewModelToEntry]
       }
     );
+    index.subscribe((newIndex) => {
+      view.style.order = newIndex;
+    });
+    return view;
   }
 
   // src/View/Components/boardViewToggleButton.tsx

src/View/ChatPages/boardKanbanPage.tsx

@@ -1,13 +1,16 @@
 import * as React from "bloatless-react";
 
+import {
+  PropertyValueList,
+  createPropertyValueIndexState,
+} from "../Components/propertyValueList";
+
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 import { FilteredList } from "../Components/filteredList";
-import { PropertyValueList } from "../Components/propertyValueList";
 import { TaskCategoryBulkChangeViewModel } from "../../ViewModel/Utility/taskPropertyBulkChangeViewModel";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { allowDrop } from "../utility";
-import { localeCompare } from "../../Model/Utility/utility";
 import { translations } from "../translations";
 
 export function BoardKanbanPage(boardViewModel: BoardViewModel) {
@@ -15,18 +18,16 @@ export function BoardKanbanPage(boardViewModel: BoardViewModel) {
     "category",
     (taskViewModel: TaskViewModel) => taskViewModel.task,
     boardViewModel.taskViewModels,
-    (categories: React.ListState<string>) => {
-      const sortedCategories: React.State<string[]> = React.createProxyState(
-        [categories],
-        () => [...categories.value.values()].sort(localeCompare)
-      );
-
+    (
+      categories: React.ListState<string>,
+      sortedCategories: React.State<string[]>
+    ) => {
       const categoryNameConverter: React.StateItemConverter<string> = (
         categoryName: string
       ) => {
-        const index: React.State<number> = React.createProxyState(
-          [sortedCategories],
-          () => sortedCategories.value.indexOf(categoryName)
+        const index: React.State<number> = createPropertyValueIndexState(
+          sortedCategories,
+          categoryName
         );
         return KanbanBoard(categoryName, index, boardViewModel);
       };
@@ -88,7 +89,8 @@ function KanbanBoard(
 
       index.subscribe((newIndex) => {
         view.style.order = newIndex;
-      })
+      });
+      
       return view;
     }
   );

src/View/ChatPages/boardStatusGridPage.tsx

@@ -1,5 +1,11 @@
 import * as React from "bloatless-react";
 
+import {
+  PropertyValueList,
+  collectPropertyValuesToState,
+  createPropertyValueIndexState,
+  createSortedPropertyValueState,
+} from "../Components/propertyValueList";
 import {
   TaskCategoryBulkChangeViewModel,
   TaskStatusBulkChangeViewModel,
@@ -7,37 +13,32 @@ import {
 
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
 import { FilteredList } from "../Components/filteredList";
-import { PropertyValueList } from "../Components/propertyValueList";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { allowDrop } from "../utility";
-import { collectObjectValuesForKey } from "../../Model/Utility/utility";
 import { translations } from "../translations";
 
 export function BoardStatusGridPage(boardViewModel: BoardViewModel) {
-  const categoryRowConverter: React.StateItemConverter<string> = (
-    categoryName: string
-  ) => {
-    return CategoryRow(categoryName, statuses, boardViewModel);
-  };
+  const statuses: React.ListState<string> = new React.ListState();
+  const sortedStatuses: React.State<string[]> =
+    createSortedPropertyValueState(statuses);
+
+  boardViewModel.taskViewModels.subscribe(() => {
+    collectPropertyValuesToState(
+      "status",
+      (taskViewModel: TaskViewModel) => taskViewModel.task,
+      boardViewModel.taskViewModels,
+      statuses
+    );
+  });
 
   const statusNameCellConverter: React.StateItemConverter<string> = (
     statusName: string
   ) => {
-    return StatusNameCell(statusName, boardViewModel);
+    const index = createPropertyValueIndexState(sortedStatuses, statusName);
+    return StatusNameCell(statusName, index, boardViewModel);
   };
 
-  const statuses: React.ListState<string> = new React.ListState();
-  boardViewModel.taskViewModels.subscribe(() => {
-    statuses.clear();
-    const statusArray: string[] = collectObjectValuesForKey(
-      "status",
-      (taskViewModel: TaskViewModel) => taskViewModel.task,
-      [...boardViewModel.taskViewModels.value.values()]
-    );
-    statuses.add(...statusArray);
-  });
-
   return (
     <div class="status-page-content">
       <div
@@ -48,7 +49,27 @@ export function BoardStatusGridPage(boardViewModel: BoardViewModel) {
         "category",
         (taskViewModel: TaskViewModel) => taskViewModel.task,
         boardViewModel.filteredTaskViewModels,
-        (categories: React.ListState<string>) => {
+        (
+          categories: React.ListState<string>,
+          sortedCategories: React.State<string[]>
+        ) => {
+          const categoryRowConverter: React.StateItemConverter<string> = (
+            categoryName: string
+          ) => {
+            const index: React.State<number> = createPropertyValueIndexState(
+              sortedCategories,
+              categoryName
+            );
+
+            return CategoryRow(
+              categoryName,
+              index,
+              statuses,
+              sortedStatuses,
+              boardViewModel
+            );
+          };
+
           return (
             <div
               class="status-grid-wrapper"
@@ -61,7 +82,11 @@ export function BoardStatusGridPage(boardViewModel: BoardViewModel) {
   );
 }
 
-function StatusNameCell(statusName: string, boardViewModel: BoardViewModel) {
+function StatusNameCell(
+  statusName: string,
+  index: React.State<number>,
+  boardViewModel: BoardViewModel
+) {
   const taskViewModelsWithMatchingStatus: React.ListState<TaskViewModel> =
     new React.ListState();
 
@@ -83,7 +108,7 @@ function StatusNameCell(statusName: string, boardViewModel: BoardViewModel) {
       statusName
     );
 
-  return (
+  const view = (
     <div class="flex-row">
       <div class="property-input-wrapper">
         <input
@@ -103,11 +128,19 @@ function StatusNameCell(statusName: string, boardViewModel: BoardViewModel) {
       </div>
     </div>
   );
+
+  index.subscribe((newIndex) => {
+    view.style.order = newIndex;
+  });
+
+  return view;
 }
 
 function CategoryRow(
   categoryName: string,
+  index: React.State<number>,
   allStatuses: React.ListState<string>,
+  sortedStatuses: React.State<string[]>,
   boardViewModel: BoardViewModel
 ) {
   return FilteredList(
@@ -118,9 +151,11 @@ function CategoryRow(
       const statusNameConverter: React.StateItemConverter<string> = (
         statusName: string
       ) => {
+        const index = createPropertyValueIndexState(sortedStatuses, statusName);
         return CategoryStatusColumn(
           categoryName,
           statusName,
+          index,
           boardViewModel,
           taskViewModels
         );
@@ -129,7 +164,7 @@ function CategoryRow(
       const viewModel: TaskCategoryBulkChangeViewModel =
         new TaskCategoryBulkChangeViewModel(taskViewModels, categoryName);
 
-      return (
+      const view = (
         <div class="flex-row flex-no large-gap">
           <div class="property-input-wrapper">
             <input
@@ -154,6 +189,12 @@ function CategoryRow(
           ></div>
         </div>
       );
+
+      index.subscribe((newIndex) => {
+        view.style.order = newIndex;
+      });
+
+      return view;
     }
   );
 }
@@ -161,6 +202,7 @@ function CategoryRow(
 function CategoryStatusColumn(
   categoryName: string,
   statusName: string,
+  index: React.State<number>,
   boardViewModel: BoardViewModel,
   taskViewModelsWithMatchingCategory: React.ListState<TaskViewModel>
 ) {
@@ -180,7 +222,7 @@ function CategoryStatusColumn(
     boardViewModel.handleDropWithinBoard(categoryName, statusName);
   }
 
-  return (
+  const view = (
     <div
       class="status-column gap"
       on:dragover={allowDrop}
@@ -188,4 +230,10 @@ function CategoryStatusColumn(
       children:append={[taskViewModels, TaskViewModelToEntry]}
     ></div>
   );
+
+  index.subscribe((newIndex) => {
+    view.style.order = newIndex;
+  });
+
+  return view;
 }

src/View/Components/propertyValueList.tsx

@@ -3,17 +3,38 @@ import * as React from "bloatless-react";
 import {
   StringEntryObject,
   collectObjectValuesForKey,
+  localeCompare,
 } from "../../Model/Utility/utility";
 
 export function PropertyValueList<T>(
   propertyKey: string,
   stringEntryObjectConverter: (object: T) => StringEntryObject,
   objects: React.ListState<T> | React.MapState<T>,
-  viewBuilder: (keys: React.ListState<string>) => HTMLElement
+  viewBuilder: (
+    keys: React.ListState<string>,
+    sortedKeys: React.State<string[]>
+  ) => HTMLElement
 ) {
   const propertyValues: React.ListState<string> = new React.ListState();
+  const sortedPropertyValues: React.State<string[]> = createSortedPropertyValueState(propertyValues)
+  objects.subscribe(() => {
+    collectPropertyValuesToState(
+      propertyKey,
+      stringEntryObjectConverter,
+      objects,
+      propertyValues
+    );
+  });
 
-  function collectValues() {
+  return viewBuilder(propertyValues, sortedPropertyValues);
+}
+
+export function collectPropertyValuesToState<T>(
+  propertyKey: string,
+  stringEntryObjectConverter: (object: T) => StringEntryObject,
+  objects: React.ListState<T> | React.MapState<T>,
+  propertyValues: React.ListState<string>
+) {
   const values: string[] = collectObjectValuesForKey(
     propertyKey,
     stringEntryObjectConverter,
@@ -29,11 +50,21 @@ export function PropertyValueList<T>(
       propertyValues.remove(displayedValue);
     }
   }
-  }
-
-  objects.subscribe(() => {
-    collectValues();
-  });
-
-  return viewBuilder(propertyValues);
+}
+
+export function createSortedPropertyValueState(
+  propertyValues: React.ListState<string>
+): React.State<string[]> {
+  return React.createProxyState([propertyValues], () =>
+    [...propertyValues.value.values()].sort(localeCompare)
+  );
+}
+
+export function createPropertyValueIndexState(
+  sortedKeys: React.State<string[]>,
+  key: string
+): React.State<number> {
+  return React.createProxyState([sortedKeys], () =>
+    sortedKeys.value.indexOf(key)
+  );
 }