implement board sorting

dist/index.js

@@ -1423,6 +1423,7 @@
     color = new State("standard" /* Standard */);
     isSelected;
     isPresentingSettingsModal = new State(false);
+    index = new State(0);
     // view
     select = () => {
       this.taskPageViewModel.selectBoard(this);
@@ -1437,6 +1438,10 @@
       this.saveSettings();
       this.isPresentingSettingsModal.value = false;
     };
+    updateIndex = () => {
+      const index = this.taskPageViewModel.boardIndexManager.getIndex(this);
+      this.index.value = index;
+    };
     // methods
     saveSettings = () => {
       const newBoardInfoFileContent = TaskModel.createBoardInfoFileContent(
@@ -1477,6 +1482,10 @@
     storageModel;
     taskModel;
     chatViewModel;
+    // data
+    boardIndexManager = new IndexManager(
+      (boardViewModel) => boardViewModel.name.value
+    );
     // state
     newBoardNameInput = new State("");
     boardViewModels = new MapState();
@@ -1498,9 +1507,11 @@
       const boardInfoFileContent = this.taskModel.createBoard(this.newBoardNameInput.value);
       this.newBoardNameInput.value = "";
       this.showBoardInList(boardInfoFileContent);
+      this.updateIndices();
     };
     updateBoard = (boardInfoFileContent) => {
       this.taskModel.updateBoard(boardInfoFileContent);
+      this.updateIndices();
     };
     // view
     showBoardInList = (boardInfo) => {
@@ -1515,6 +1526,12 @@
       this.selectedBoardId.value = void 0;
       this.chatViewModel.resetColor();
     };
+    updateIndices = () => {
+      this.boardIndexManager.update([...this.boardViewModels.value.values()]);
+      for (const boardViewModel of this.boardViewModels.value.values()) {
+        boardViewModel.updateIndex();
+      }
+    };
     // load
     loadData = () => {
       this.boardViewModels.clear();
@@ -1524,6 +1541,7 @@
         if (boardInfo == null) continue;
         this.showBoardInList(boardInfo);
       }
+      this.updateIndices();
     };
     // init
     constructor(taskModel, storageModel2, chatViewModel) {
@@ -1533,6 +1551,7 @@
       taskModel.boardHandlerManager.addHandler(
         (boardInfoFileContent) => {
           this.showBoardInList(boardInfoFileContent);
+          this.updateIndices();
         }
       );
     }
@@ -1574,7 +1593,7 @@
       this.displayedColor.value = this.settingsPageViewModel.color.value;
     };
     updateIndex = () => {
-      const index = this.chatListViewModel.indexManager.getIndex(this);
+      const index = this.chatListViewModel.chatIndexManager.getIndex(this);
       this.index.value = index;
     };
     // load
@@ -1619,12 +1638,13 @@
     chatListModel;
     storageModel;
     settingsViewModel;
+    // data
+    chatIndexManager = new IndexManager(
+      (chatViewModel) => chatViewModel.settingsPageViewModel.primaryChannel.value
+    );
     // state
     newChatPrimaryChannel = new State("");
     chatViewModels = new ListState();
-    indexManager = new IndexManager(
-      (chatViewModel) => chatViewModel.settingsPageViewModel.primaryChannel.value
-    );
     selectedChat = new State(void 0);
     // guards
     cannotCreateChat = createProxyState(
@@ -1657,7 +1677,7 @@
       );
     };
     updateIndices = () => {
-      this.indexManager.update([...this.chatViewModels.value.values()]);
+      this.chatIndexManager.update([...this.chatViewModels.value.values()]);
       for (const chatViewModel of this.chatViewModels.value) {
         chatViewModel.updateIndex();
       }
@@ -2087,6 +2107,9 @@
       /* @__PURE__ */ createElement("span", { class: "shadow", "subscribe:innerText": boardViewModel.name }),
       /* @__PURE__ */ createElement("b", { "subscribe:innerText": boardViewModel.name })
     );
+    boardViewModel.index.subscribe((newIndex) => {
+      view.style.order = newIndex;
+    });
     return view;
   }
   var BoardInfoToEntry = (boardViewModel) => {

src/View/Components/boardEntry.tsx

@@ -16,6 +16,10 @@ export function BoardEntry(boardViewModel: BoardViewModel) {
     </button>
   );
 
+  boardViewModel.index.subscribe((newIndex) => {
+    view.style.order = newIndex;
+  });
+
   return view;
 }
 

src/ViewModel/Chat/chatListViewModel.ts

@@ -12,14 +12,16 @@ export default class ChatListViewModel {
   storageModel: StorageModel;
   settingsViewModel: SettingsViewModel;
 
-  // state
-  newChatPrimaryChannel: React.State<string> = new React.State("");
-  chatViewModels: React.ListState<ChatViewModel> = new React.ListState();
-  indexManager: IndexManager<ChatViewModel> = new IndexManager(
+  // data
+  chatIndexManager: IndexManager<ChatViewModel> = new IndexManager(
     (chatViewModel: ChatViewModel) =>
       chatViewModel.settingsPageViewModel.primaryChannel.value
   );
 
+  // state
+  newChatPrimaryChannel: React.State<string> = new React.State("");
+  chatViewModels: React.ListState<ChatViewModel> = new React.ListState();
+
   selectedChat: React.State<ChatViewModel | undefined> = new React.State<
     ChatViewModel | undefined
   >(undefined);
@@ -61,7 +63,7 @@ export default class ChatListViewModel {
   };
 
   updateIndices = (): void => {
-    this.indexManager.update([...this.chatViewModels.value.values()]);
+    this.chatIndexManager.update([...this.chatViewModels.value.values()]);
     for (const chatViewModel of this.chatViewModels.value) {
       chatViewModel.updateIndex();
     }

src/ViewModel/Chat/chatViewModel.ts

@@ -55,7 +55,7 @@ export default class ChatViewModel {
   };
 
   updateIndex = (): void => {
-    const index: number = this.chatListViewModel.indexManager.getIndex(this);
+    const index: number = this.chatListViewModel.chatIndexManager.getIndex(this);
     this.index.value = index;
   };
 

src/ViewModel/Pages/boardViewModel.ts

@@ -17,6 +17,8 @@ export default class BoardViewModel {
   isSelected: React.State<boolean>;
   isPresentingSettingsModal: React.State<boolean> = new React.State(false);
 
+  index: React.State<number> = new React.State(0);
+
   // view
   select = (): void => {
     this.taskPageViewModel.selectBoard(this);
@@ -35,6 +37,12 @@ export default class BoardViewModel {
     this.isPresentingSettingsModal.value = false;
   };
 
+  updateIndex = (): void => {
+    const index: number =
+      this.taskPageViewModel.boardIndexManager.getIndex(this);
+    this.index.value = index;
+  };
+
   // methods
   saveSettings = (): void => {
     const newBoardInfoFileContent: BoardInfoFileContent =

src/ViewModel/Pages/taskPageViewModel.ts

@@ -8,6 +8,7 @@ import TaskModel, {
 import BoardViewModel from "./boardViewModel";
 import ChatViewModel from "../Chat/chatViewModel";
 import { FileContent } from "../../Model/Files/fileModel";
+import { IndexManager } from "../../Model/Utility/utility";
 import StorageModel from "../../Model/Global/storageModel";
 import { checkMatchesObjectStructure } from "../../Model/Utility/typeSafety";
 
@@ -17,6 +18,11 @@ export default class TaskPageViewModel {
 
   chatViewModel: ChatViewModel;
 
+  // data
+  boardIndexManager: IndexManager<BoardViewModel> = new IndexManager(
+    (boardViewModel: BoardViewModel) => boardViewModel.name.value
+  );
+
   // state
   newBoardNameInput: React.State<string> = new React.State("");
 
@@ -51,10 +57,12 @@ export default class TaskPageViewModel {
     this.newBoardNameInput.value = "";
 
     this.showBoardInList(boardInfoFileContent);
+    this.updateIndices();
   };
 
   updateBoard = (boardInfoFileContent: BoardInfoFileContent): void => {
     this.taskModel.updateBoard(boardInfoFileContent);
+    this.updateIndices();
   };
 
   // view
@@ -73,6 +81,13 @@ export default class TaskPageViewModel {
     this.chatViewModel.resetColor();
   };
 
+  updateIndices = (): void => {
+    this.boardIndexManager.update([...this.boardViewModels.value.values()]);
+    for (const boardViewModel of this.boardViewModels.value.values()) {
+      boardViewModel.updateIndex();
+    }
+  };
+
   // load
   loadData = (): void => {
     this.boardViewModels.clear();
@@ -85,6 +100,8 @@ export default class TaskPageViewModel {
 
       this.showBoardInList(boardInfo);
     }
+
+    this.updateIndices();
   };
 
   // init
@@ -102,6 +119,7 @@ export default class TaskPageViewModel {
     taskModel.boardHandlerManager.addHandler(
       (boardInfoFileContent: BoardInfoFileContent) => {
         this.showBoardInList(boardInfoFileContent);
+        this.updateIndices();
       }
     );
   }