From 0efa09eff3c60252d071e32d94c8cbb1692494b4 Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Fri, 26 Jul 2024 05:43:49 +0200 Subject: [PATCH] list events in side pane --- dist/index.js | 144 ++++++++++++------- src/View/ChatPages/calendarPage.tsx | 35 ++++- src/View/ChatPages/taskPage.tsx | 6 +- src/ViewModel/Chat/chatViewModel.ts | 3 +- src/ViewModel/Pages/calendarPageViewModel.ts | 17 ++- 5 files changed, 142 insertions(+), 63 deletions(-) diff --git a/dist/index.js b/dist/index.js index 8ac2e560..45d5422f 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1587,13 +1587,14 @@ // src/ViewModel/Pages/calendarPageViewModel.ts var CalendarPageViewModel = class { // init - constructor(coreViewModel, storageModel2, calendarModel, boardAndTasksModel) { + constructor(coreViewModel, storageModel2, calendarModel, boardAndTasksModel, chatViewModel) { this.coreViewModel = coreViewModel; this.storageModel = storageModel2; this.calendarModel = calendarModel; this.boardsAndTasksModel = boardAndTasksModel; + this.chatViewModel = chatViewModel; bulkSubscribe([this.selectedYear, this.selectedMonth], () => { - this.loadTasks(); + this.loadMonthTasks(); }); boardAndTasksModel.taskHandlerManager.addHandler( (taskFileContent) => { @@ -1604,6 +1605,7 @@ storageModel; calendarModel; boardsAndTasksModel; + chatViewModel; // data get monthString() { return CalendarModel.getMonthString( @@ -1620,7 +1622,7 @@ selectedMonth = new State(0); selectedDate = new State(0); monthGrid = new State(void 0); - selectedTaskViewModel = new State(void 0); + taskViewModelsToShow = new ListState(); // view getTaskMapState = (taskFileContent) => { if (this.monthGrid.value == null) return null; @@ -1673,7 +1675,7 @@ }; // storage // load - loadTasks = () => { + loadMonthTasks = () => { this.monthGrid.value = this.calendarModel.generateMonthGrid( this.selectedYear.value, this.selectedMonth.value, @@ -1687,7 +1689,7 @@ } }; loadData = () => { - this.loadTasks(); + this.loadMonthTasks(); this.showToday(); }; }; @@ -2217,7 +2219,8 @@ coreViewModel, this.storageModel, this.chatModel.fileModel.boardsAndTasksModel.calendarModel, - this.chatModel.fileModel.boardsAndTasksModel + this.chatModel.fileModel.boardsAndTasksModel, + this ); this.taskPageViewModel = new TaskPageViewModel( this.coreViewModel, @@ -2572,6 +2575,51 @@ }))); } + // src/View/Components/taskEntry.tsx + function TaskEntry(taskViewModel) { + const details = { + description: taskViewModel.description.value || "---", + priority_high: taskViewModel.priority.value || "---", + category: taskViewModel.category.value || "---", + clock_loader_40: taskViewModel.status.value || "---", + calendar_month: taskViewModel.date.value || "---", + schedule: taskViewModel.time.value || "---" + }; + const view = /* @__PURE__ */ createElement( + "button", + { + draggable: "true", + class: "tile flex-no", + style: "user-select: none; -webkit-user-select: none", + "on:click": taskViewModel.open, + "on:dragstart": taskViewModel.dragStart + }, + /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { "subscribe:innerText": taskViewModel.name }), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement( + "div", + { + class: "grid secondary", + style: "grid-template-columns: repeat(2, 1fr); column-gap: 1rem; row-gap: .5rem" + }, + ...Object.entries(details).map((entry) => /* @__PURE__ */ createElement( + "span", + { + class: "flex-row align-center width-100 flex-no clip", + style: "gap: 1rem" + }, + /* @__PURE__ */ createElement("span", { class: "icon", style: "font-size: 1.1rem" }, entry[0]), + /* @__PURE__ */ createElement("span", { class: "ellipsis" }, entry[1]) + )) + )) + ); + taskViewModel.index.subscribe((newIndex) => { + view.style.order = newIndex; + }); + return view; + } + var TaskViewModelToEntry = (taskViewModel) => { + return TaskEntry(taskViewModel); + }; + // src/View/ChatPages/calendarPage.tsx function CalendarPage(calendarPageViewModel) { calendarPageViewModel.loadData(); @@ -2588,6 +2636,27 @@ } } ); + const sidePaneContent = createProxyState( + [ + calendarPageViewModel.selectedYear, + calendarPageViewModel.selectedMonth, + calendarPageViewModel.selectedDate + ], + () => { + const listState = calendarPageViewModel.monthGrid.value?.days[calendarPageViewModel.selectedDate.toString()]; + if (listState == void 0) { + return /* @__PURE__ */ createElement("div", null); + } else { + return /* @__PURE__ */ createElement( + "div", + { + class: "flex-column gap", + "children:append": [listState, TaskViewModelToEntry] + } + ); + } + } + ); return /* @__PURE__ */ createElement("div", { id: "calendar-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement( "button", { @@ -2637,7 +2706,14 @@ "aria-label": translations.chatPage.task.createTaskButtonAudioLabel }, /* @__PURE__ */ createElement("span", { class: "icon" }, "add") - ))), /* @__PURE__ */ createElement("div", { class: "content", "children:set": mainContent }))), /* @__PURE__ */ createElement("div", { class: "pane-wrapper side" }, /* @__PURE__ */ createElement("div", { class: "pane" }, "hello"))); + ))), /* @__PURE__ */ createElement("div", { class: "content", "children:set": mainContent }))), /* @__PURE__ */ createElement( + "div", + { + class: "pane-wrapper side background", + "set:color": calendarPageViewModel.chatViewModel.displayedColor + }, + /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "content", "children:set": sidePaneContent })) + )); } // src/View/Components/ribbonButton.tsx @@ -3026,51 +3102,6 @@ } }; - // src/View/Components/taskEntry.tsx - function TaskEntry(taskViewModel) { - const details = { - description: taskViewModel.description.value || "---", - priority_high: taskViewModel.priority.value || "---", - category: taskViewModel.category.value || "---", - clock_loader_40: taskViewModel.status.value || "---", - calendar_month: taskViewModel.date.value || "---", - schedule: taskViewModel.time.value || "---" - }; - const view = /* @__PURE__ */ createElement( - "button", - { - draggable: "true", - class: "tile flex-no", - style: "user-select: none; -webkit-user-select: none", - "on:click": taskViewModel.open, - "on:dragstart": taskViewModel.dragStart - }, - /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { "subscribe:innerText": taskViewModel.name }), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement( - "div", - { - class: "grid secondary", - style: "grid-template-columns: repeat(2, 1fr); column-gap: 1rem; row-gap: .5rem" - }, - ...Object.entries(details).map((entry) => /* @__PURE__ */ createElement( - "span", - { - class: "flex-row align-center width-100 flex-no clip", - style: "gap: 1rem" - }, - /* @__PURE__ */ createElement("span", { class: "icon", style: "font-size: 1.1rem" }, entry[0]), - /* @__PURE__ */ createElement("span", { class: "ellipsis" }, entry[1]) - )) - )) - ); - taskViewModel.index.subscribe((newIndex) => { - view.style.order = newIndex; - }); - return view; - } - var TaskViewModelToEntry = (taskViewModel) => { - return TaskEntry(taskViewModel); - }; - // src/View/ChatPages/boardKanbanPage.tsx function BoardKanbanPage(boardViewModel) { return PropertyValueList( @@ -3620,7 +3651,14 @@ ] } ))) - ), /* @__PURE__ */ createElement("div", { id: "board-content", class: "pane-wrapper", "children:set": paneContent })); + ), /* @__PURE__ */ createElement( + "div", + { + id: "board-content", + class: "pane-wrapper", + "children:set": paneContent + } + )); } // src/View/chatPage.tsx diff --git a/src/View/ChatPages/calendarPage.tsx b/src/View/ChatPages/calendarPage.tsx index fca88b76..af4fd23d 100644 --- a/src/View/ChatPages/calendarPage.tsx +++ b/src/View/ChatPages/calendarPage.tsx @@ -4,6 +4,7 @@ import * as React from "bloatless-react"; import CalendarPageViewModel from "../../ViewModel/Pages/calendarPageViewModel"; import { MonthGrid } from "../Components/monthGrid"; +import { TaskViewModelToEntry } from "../Components/taskEntry"; import { translations } from "../translations"; export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) { @@ -23,6 +24,31 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) { } ); + const sidePaneContent = React.createProxyState( + [ + calendarPageViewModel.selectedYear, + calendarPageViewModel.selectedMonth, + calendarPageViewModel.selectedDate, + ], + () => { + const listState = + calendarPageViewModel.monthGrid.value?.days[ + calendarPageViewModel.selectedDate.toString() + ]; + + if (listState == undefined) { + return
; + } else { + return ( +
+ ); + } + } + ); + return (
@@ -97,8 +123,13 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
-
-
hello
+
+
+
+
); diff --git a/src/View/ChatPages/taskPage.tsx b/src/View/ChatPages/taskPage.tsx index ac9d662b..378b5587 100644 --- a/src/View/ChatPages/taskPage.tsx +++ b/src/View/ChatPages/taskPage.tsx @@ -83,7 +83,11 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) { -
+
); } diff --git a/src/ViewModel/Chat/chatViewModel.ts b/src/ViewModel/Chat/chatViewModel.ts index d15c6729..0bf673ef 100644 --- a/src/ViewModel/Chat/chatViewModel.ts +++ b/src/ViewModel/Chat/chatViewModel.ts @@ -100,7 +100,8 @@ export default class ChatViewModel { coreViewModel, this.storageModel, this.chatModel.fileModel.boardsAndTasksModel.calendarModel, - this.chatModel.fileModel.boardsAndTasksModel + this.chatModel.fileModel.boardsAndTasksModel, + this ); this.taskPageViewModel = new TaskPageViewModel( this.coreViewModel, diff --git a/src/ViewModel/Pages/calendarPageViewModel.ts b/src/ViewModel/Pages/calendarPageViewModel.ts index f01263cf..65886a45 100644 --- a/src/ViewModel/Pages/calendarPageViewModel.ts +++ b/src/ViewModel/Pages/calendarPageViewModel.ts @@ -5,6 +5,7 @@ import BoardsAndTasksModel, { } from "../../Model/Files/boardsAndTasksModel"; import CalendarModel, { MonthGrid } from "../../Model/Files/calendarModel"; +import ChatViewModel from "../Chat/chatViewModel"; import CoreViewModel from "../Global/coreViewModel"; import StorageModel from "../../Model/Global/storageModel"; import TaskViewModel from "./taskViewModel"; @@ -14,6 +15,8 @@ export default class CalendarPageViewModel { calendarModel: CalendarModel; boardsAndTasksModel: BoardsAndTasksModel; + chatViewModel: ChatViewModel; + // data get monthString(): string { return CalendarModel.getMonthString( @@ -35,8 +38,7 @@ export default class CalendarPageViewModel { monthGrid: React.State> | undefined> = new React.State(undefined); - selectedTaskViewModel: React.State = - new React.State(undefined); + taskViewModelsToShow: React.ListState = new React.ListState(); // view getTaskMapState = ( @@ -106,7 +108,7 @@ export default class CalendarPageViewModel { // storage // load - loadTasks = (): void => { + loadMonthTasks = (): void => { this.monthGrid.value = this.calendarModel.generateMonthGrid( this.selectedYear.value, this.selectedMonth.value, @@ -123,7 +125,7 @@ export default class CalendarPageViewModel { }; loadData = (): void => { - this.loadTasks(); + this.loadMonthTasks(); this.showToday(); }; @@ -132,14 +134,17 @@ export default class CalendarPageViewModel { public coreViewModel: CoreViewModel, storageModel: StorageModel, calendarModel: CalendarModel, - boardAndTasksModel: BoardsAndTasksModel + boardAndTasksModel: BoardsAndTasksModel, + chatViewModel: ChatViewModel ) { this.storageModel = storageModel; this.calendarModel = calendarModel; this.boardsAndTasksModel = boardAndTasksModel; + this.chatViewModel = chatViewModel; + React.bulkSubscribe([this.selectedYear, this.selectedMonth], () => { - this.loadTasks(); + this.loadMonthTasks(); }); // handlers