add setting for board name, implement saving settings

dist/index.js

@@ -1408,8 +1408,18 @@
       this.isPresentingSettingsModal.value = true;
     };
     hideSettings = () => {
+      this.saveSettings();
       this.isPresentingSettingsModal.value = false;
     };
+    // methods
+    saveSettings = () => {
+      const newBoardInfoFileContent = TaskModel.createBoardInfoFileContent(
+        this.boardInfo.fileId,
+        this.name.value,
+        this.color.value
+      );
+      this.taskPageViewModel.updateBoard(newBoardInfoFileContent);
+    };
     // load
     loadListRelevantData = () => {
       this.name.value = this.boardInfo.name;
@@ -1456,6 +1466,9 @@
       this.newBoardNameInput.value = "";
       this.showBoardInList(boardInfoFileContent);
     };
+    updateBoard = (boardInfoFileContent) => {
+      this.taskModel.updateBoard(boardInfoFileContent);
+    };
     // view
     showBoardInList = (boardInfo) => {
       const boardViewModel = new BoardViewModel(this, boardInfo);
@@ -2018,14 +2031,7 @@
 
   // src/View/Modals/boardSettingsModal.tsx
   function BoardSettingsModal(boardViewModel) {
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": boardViewModel.isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline)), /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": boardViewModel.isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.task.boardSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.boardNameInputLabel), /* @__PURE__ */ createElement("input", { "bind:value": boardViewModel.name })))), /* @__PURE__ */ createElement("button", { "on:click": boardViewModel.hideSettings }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
-      "button",
-      {
-        "on:click": boardViewModel.hideSettings
-      },
-      translations.general.closeButton,
-      /* @__PURE__ */ createElement("span", { class: "icon" }, "close")
-    )));
   }
 
   // src/View/ChatPages/boardPage.tsx

src/View/Modals/boardSettingsModal.tsx

@@ -8,11 +8,20 @@ export function BoardSettingsModal(boardViewModel: BoardViewModel) {
     <div class="modal" toggle:open={boardViewModel.isPresentingSettingsModal}>
       <div>
         <main>
-          <h2>{translations.chatPage.message.messageInfoHeadline}</h2>
+          <h2>{translations.chatPage.task.boardSettingsHeadline}</h2>
+
+          <label class="tile flex-no">
+            <span class="icon">label</span>
+            <div>
+              <span>{translations.chatPage.task.boardNameInputLabel}</span>
+              <input
+                on:enter={boardViewModel.saveSettings}
+                bind:value={boardViewModel.name}
+              ></input>
+            </div>
+          </label>
         </main>
-        <button
+        <button on:click={boardViewModel.hideSettings}>
-          on:click={boardViewModel.hideSettings}
-        >
           {translations.general.closeButton}
           <span class="icon">close</span>
         </button>

src/ViewModel/Pages/boardViewModel.ts

@@ -1,6 +1,7 @@
 import * as React from "bloatless-react";
 
-import { BoardInfoFileContent } from "../../Model/Files/taskModel";
+import TaskModel, { BoardInfoFileContent } from "../../Model/Files/taskModel";
+
 import { Color } from "../../colors";
 import TaskPageViewModel from "./taskPageViewModel";
 
@@ -30,9 +31,21 @@ export default class BoardViewModel {
   };
 
   hideSettings = (): void => {
+    this.saveSettings();
     this.isPresentingSettingsModal.value = false;
   };
 
+  // methods
+  saveSettings = (): void => {
+    const newBoardInfoFileContent: BoardInfoFileContent =
+      TaskModel.createBoardInfoFileContent(
+        this.boardInfo.fileId,
+        this.name.value,
+        this.color.value
+      );
+    this.taskPageViewModel.updateBoard(newBoardInfoFileContent);
+  };
+
   // load
   loadListRelevantData = (): void => {
     this.name.value = this.boardInfo.name;

src/ViewModel/Pages/taskPageViewModel.ts

@@ -53,6 +53,10 @@ export default class TaskPageViewModel {
     this.showBoardInList(boardInfoFileContent);
   };
 
+  updateBoard = (boardInfoFileContent: BoardInfoFileContent): void => {
+    this.taskModel.updateBoard(boardInfoFileContent);
+  };
+
   // view
   showBoardInList = (boardInfo: BoardInfoFileContent): void => {
     const boardViewModel: BoardViewModel = new BoardViewModel(this, boardInfo);