From 267bdcfc73ec2f0397a63a4848fa33e5a4f4ecfa Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Tue, 23 Jul 2024 00:57:40 +0200 Subject: [PATCH] add BoardViewModel --- dist/index.js | 45 ++++++++++++++++------ src/View/ChatPages/taskPage.tsx | 2 +- src/View/Components/boardEntry.tsx | 16 ++++---- src/ViewModel/Chat/chatMessageViewModel.ts | 2 - src/ViewModel/Pages/boardViewModel.ts | 31 +++++++++++++++ src/ViewModel/Pages/taskPageViewModel.ts | 10 +++-- 6 files changed, 80 insertions(+), 26 deletions(-) create mode 100644 src/ViewModel/Pages/boardViewModel.ts diff --git a/dist/index.js b/dist/index.js index fb00156d..32b395d3 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1390,12 +1390,34 @@ } }; + // src/ViewModel/Pages/boardViewModel.ts + var BoardViewModel = class { + taskPageViewModel; + // data + boardInfo; + name = new State(""); + color = new State("standard" /* Standard */); + // load + loadListRelevantData = () => { + this.name.value = this.boardInfo.name; + this.color.value = this.boardInfo.color; + }; + loadData = () => { + }; + // init + constructor(taskPageViewModel, boardInfo) { + this.taskPageViewModel = taskPageViewModel; + this.boardInfo = boardInfo; + this.loadListRelevantData(); + } + }; + // src/ViewModel/Pages/taskPageViewModel.ts var TaskPageViewModel = class { taskModel; // state newBoardNameInput = new State(""); - boards = new ListState(); + boardViewModels = new ListState(); // guards cannotCreateBoard = createProxyState( [this.newBoardNameInput], @@ -1412,15 +1434,16 @@ if (this.cannotCreateBoard.value == true) return; const boardInfoFileContent = this.taskModel.createBoard(this.newBoardNameInput.value); this.newBoardNameInput.value = ""; - this.boards.add(boardInfoFileContent); + this.showBoard(boardInfoFileContent); }; // view showBoard = (boardInfo) => { - this.boards.add(boardInfo); + const boardViewModel = new BoardViewModel(this, boardInfo); + this.boardViewModels.add(boardViewModel); }; // load loadData = () => { - this.boards.clear(); + this.boardViewModels.clear(); const boardIds = this.taskModel.listBoardIds(); for (const boardId of boardIds) { const boardInfo = this.taskModel.getBoardInfo(boardId); @@ -1951,20 +1974,20 @@ } // src/View/Components/boardEntry.tsx - function BoardEntry(boardInfo) { + function BoardEntry(boardViewModel) { const view = /* @__PURE__ */ createElement( "button", { - color: boardInfo.color, + "set:color": boardViewModel.color, class: "tile colored-tile" }, - /* @__PURE__ */ createElement("span", { class: "shadow" }, boardInfo.name), - /* @__PURE__ */ createElement("b", null, boardInfo.name) + /* @__PURE__ */ createElement("span", { class: "shadow", "subscribe:innerText": boardViewModel.name }), + /* @__PURE__ */ createElement("b", { "subscribe:innerText": boardViewModel.name }) ); return view; } - var BoardInfoToEntry = (boardInfo) => { - return BoardEntry(boardInfo); + var BoardInfoToEntry = (boardViewModel) => { + return BoardEntry(boardViewModel); }; // src/View/ChatPages/taskPage.tsx @@ -1991,7 +2014,7 @@ { class: "grid gap", style: "grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))", - "children:append": [taskPageViewModel.boards, BoardInfoToEntry] + "children:append": [taskPageViewModel.boardViewModels, BoardInfoToEntry] } ))), /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "content" }))); } diff --git a/src/View/ChatPages/taskPage.tsx b/src/View/ChatPages/taskPage.tsx index e15092d5..ad5a32f2 100644 --- a/src/View/ChatPages/taskPage.tsx +++ b/src/View/ChatPages/taskPage.tsx @@ -34,7 +34,7 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
diff --git a/src/View/Components/boardEntry.tsx b/src/View/Components/boardEntry.tsx index 33695a87..723fa7a3 100644 --- a/src/View/Components/boardEntry.tsx +++ b/src/View/Components/boardEntry.tsx @@ -1,15 +1,15 @@ import * as React from "bloatless-react"; -import { BoardInfoFileContent } from "../../Model/Files/taskModel"; +import BoardViewModel from "../../ViewModel/Pages/boardViewModel"; -export function BoardEntry(boardInfo: BoardInfoFileContent) { +export function BoardEntry(boardViewModel: BoardViewModel) { const view = ( ); @@ -17,7 +17,7 @@ export function BoardEntry(boardInfo: BoardInfoFileContent) { } export const BoardInfoToEntry: React.StateItemConverter< - BoardInfoFileContent -> = (boardInfo: BoardInfoFileContent) => { - return BoardEntry(boardInfo); + BoardViewModel +> = (boardViewModel: BoardViewModel) => { + return BoardEntry(boardViewModel); }; diff --git a/src/ViewModel/Chat/chatMessageViewModel.ts b/src/ViewModel/Chat/chatMessageViewModel.ts index 54afc40e..0848ffe6 100644 --- a/src/ViewModel/Chat/chatMessageViewModel.ts +++ b/src/ViewModel/Chat/chatMessageViewModel.ts @@ -1,5 +1,3 @@ -// this file is responsible for managing individual chat messages. - import * as React from "bloatless-react"; import { ChatMessage, ChatMessageStatus } from "../../Model/Chat/chatModel"; diff --git a/src/ViewModel/Pages/boardViewModel.ts b/src/ViewModel/Pages/boardViewModel.ts new file mode 100644 index 00000000..501d1cc2 --- /dev/null +++ b/src/ViewModel/Pages/boardViewModel.ts @@ -0,0 +1,31 @@ +import * as React from "bloatless-react"; + +import { BoardInfoFileContent } from "../../Model/Files/taskModel"; +import { Color } from "../../colors"; +import TaskPageViewModel from "./taskPageViewModel"; + +export default class BoardViewModel { + taskPageViewModel: TaskPageViewModel; + + // data + boardInfo: BoardInfoFileContent; + + name: React.State = new React.State(""); + color: React.State = new React.State(Color.Standard); + + // load + loadListRelevantData = (): void => { + this.name.value = this.boardInfo.name; + this.color.value = this.boardInfo.color; + } + + loadData = (): void => {} + + // init + constructor(taskPageViewModel: TaskPageViewModel, boardInfo: BoardInfoFileContent) { + this.taskPageViewModel = taskPageViewModel; + this.boardInfo = boardInfo; + + this.loadListRelevantData(); + } +} diff --git a/src/ViewModel/Pages/taskPageViewModel.ts b/src/ViewModel/Pages/taskPageViewModel.ts index 977cbaee..5d59c5f1 100644 --- a/src/ViewModel/Pages/taskPageViewModel.ts +++ b/src/ViewModel/Pages/taskPageViewModel.ts @@ -5,6 +5,7 @@ import TaskModel, { BoardInfoFileContentReference, } from "../../Model/Files/taskModel"; +import BoardViewModel from "./boardViewModel"; import { FileContent } from "../../Model/Files/fileModel"; import StorageModel from "../../Model/Global/storageModel"; import { checkMatchesObjectStructure } from "../../Model/Utility/typeSafety"; @@ -15,7 +16,7 @@ export default class TaskPageViewModel { // state newBoardNameInput: React.State = new React.State(""); - boards: React.ListState = new React.ListState(); + boardViewModels: React.ListState = new React.ListState(); // guards cannotCreateBoard: React.State = React.createProxyState( @@ -41,17 +42,18 @@ export default class TaskPageViewModel { this.taskModel.createBoard(this.newBoardNameInput.value); this.newBoardNameInput.value = ""; - this.boards.add(boardInfoFileContent); + this.showBoard(boardInfoFileContent); }; // view showBoard = (boardInfo: BoardInfoFileContent): void => { - this.boards.add(boardInfo); + const boardViewModel: BoardViewModel = new BoardViewModel(this, boardInfo); + this.boardViewModels.add(boardViewModel); }; // load loadData = (): void => { - this.boards.clear(); + this.boardViewModels.clear(); const boardIds: string[] = this.taskModel.listBoardIds(); for (const boardId of boardIds) {