add month grid

src/View/ChatPages/boardPage.tsx

@@ -119,7 +119,7 @@ export function BoardPage(boardViewModel: BoardViewModel) {
         boardViewModel.taskViewModels,
         boardViewModel.filteredTaskViewModels,
         TaskViewModelToEntry,
-        boardViewModel.getStringsFromTaskViewModel,
+        TaskViewModel.getStringsForFilter,
         boardViewModel.isPresentingFilterModal
       )}
       <div children:set={taskSettingsModal}></div>

src/View/ChatPages/calendarPage.css

@@ -0,0 +1,61 @@
+#chat-page
+  > div
+  > #main
+  > #calendar-page
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  .input-wrapper {
+  display: flex;
+
+  padding: var(--gap-between-tiles);
+  gap: var(--gap-between-tiles);
+}
+
+#chat-page
+  > div
+  > #main
+  > #calendar-page
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  .input-wrapper
+  > input {
+  min-height: unset;
+  height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
+
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+#calendar-page .input-wrapper > input::-webkit-outer-spin-button,
+#calendar-page .input-wrapper > input::-webkit-innner-spin-button {
+  appearance: none;
+  -webkit-appearance: none;
+
+  margin: 0px;
+}
+
+#chat-page
+  > div
+  > #main
+  > #calendar-page
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  .input-wrapper
+  > .year-input {
+  width: 4.4rem;
+}
+
+#chat-page
+  > div
+  > #main
+  > #calendar-page
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  .input-wrapper
+  > .month-input {
+  width: 3.1rem;
+}

src/View/ChatPages/calendarPage.tsx

@@ -1,9 +1,101 @@
+import "./calendarPage.css";
+
 import * as React from "bloatless-react";
 
 import CalendarPageViewModel from "../../ViewModel/Pages/calendarPageViewModel";
+import { MonthGrid } from "../Components/monthGrid";
+import { TaskViewModelToEntry } from "../Components/taskEntry";
+import { createPropertyValueIndexState } from "../Components/propertyValueList";
+import { translations } from "../translations";
 
 export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
   calendarPageViewModel.loadData();
 
-  return <div id="calendar-page"></div>;
+  const mainContent = React.createProxyState(
+    [calendarPageViewModel.monthGrid],
+    () => {
+      if (calendarPageViewModel.monthGrid.value == undefined) {
+        return <div></div>;
+      } else {
+        return MonthGrid(calendarPageViewModel.monthGrid.value);
+      }
+    }
+  );
+
+  return (
+    <div id="calendar-page">
+      <div class="pane-wrapper">
+        <div class="pane">
+          <div class="toolbar">
+            <span>
+              <button
+                class="ghost"
+                aria-label={
+                  translations.chatPage.calendar.todayButtonAudioLabel
+                }
+                on:click={calendarPageViewModel.showToday}
+              >
+                <span class="icon">today</span>
+              </button>
+            </span>
+            <span>
+              <button
+                class="ghost"
+                aria-label={
+                  translations.chatPage.calendar.previousMonthButtonAudioLabel
+                }
+                on:click={calendarPageViewModel.showPreviousMonth}
+              >
+                <span class="icon">arrow_back</span>
+              </button>
+              <span class="input-wrapper">
+                <input
+                  class="year-input"
+                  type="number"
+                  aria-label={
+                    translations.chatPage.calendar.yearInputAudioLabel
+                  }
+                  placeholder={
+                    translations.chatPage.calendar.yearInputPlaceholder
+                  }
+                  bind:value={calendarPageViewModel.selectedYear}
+                ></input>
+                <input
+                  class="month-input"
+                  type="number"
+                  aria-label={
+                    translations.chatPage.calendar.monthInputAudioLabel
+                  }
+                  placeholder={
+                    translations.chatPage.calendar.monthInputPlaceholder
+                  }
+                  bind:value={calendarPageViewModel.selectedMonth}
+                ></input>
+              </span>
+              <button
+                class="ghost"
+                aria-label={
+                  translations.chatPage.calendar.nextMonthButtonAudioLabel
+                }
+                on:click={calendarPageViewModel.showNextMonth}
+              >
+                <span class="icon">arrow_forward</span>
+              </button>
+            </span>
+            <span>
+              <button
+                class="ghost"
+                aria-label={
+                  translations.chatPage.task.createTaskButtonAudioLabel
+                }
+              >
+                <span class="icon">add</span>
+              </button>
+            </span>
+          </div>
+          <div class="content" children:set={mainContent}></div>
+        </div>
+      </div>
+    </div>
+  );
 }

src/View/Components/monthGrid.css

@@ -0,0 +1,25 @@
+.month-grid-wrapper {
+  display: grid;
+  gap: var(--gap-between-tiles);
+
+  height: 100%;
+
+  animation: slide-up var(--animation-duration);
+
+  grid-template-columns: repeat(7, minmax(0px, 1fr));
+  grid-auto-rows: 1fr;
+}
+
+.month-grid-wrapper .tile > div {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    width: 100%;
+}
+
+@media (max-width: 640px) {
+  .month-grid-wrapper .tile {
+    padding: 4px;
+  }
+}

src/View/Components/monthGrid.tsx

@@ -0,0 +1,39 @@
+import "./monthGrid.css";
+
+import * as React from "bloatless-react";
+import { MonthGrid } from "../../Model/Files/calendarModel";
+import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
+
+export function MonthGrid<T>(monthGrid: MonthGrid<React.MapState<T>>) {
+  const offsetElements: HTMLElement[] = [];
+  for (let i = 0; i < monthGrid.offset; i++) {
+    offsetElements.push(<div></div>);
+  }
+
+  const converter: React.StateItemConverter<TaskViewModel> = (
+    taskViewModel
+  ) => {
+    return <span class="ellipsis secondary">{taskViewModel.task.name}</span>;
+  };
+
+  return (
+    <div class="month-grid-wrapper">
+      {...offsetElements}
+      {...Object.entries(monthGrid.days).map((entry) => {
+        const [date, mapState] = entry;
+
+        return (
+          <button class="tile">
+            <div>
+              <b>{date}</b>
+              <div
+                class="flex-column gap clip"
+                children:append={[mapState, converter]}
+              ></div>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

src/View/Components/textSpan.tsx

@@ -0,0 +1,7 @@
+import * as React from "bloatless-react";
+
+export const StringToTextSpan: React.StateItemConverter<string> = (
+  string: string
+) => {
+  return <span>{string}</span>
+};

src/View/chatPage.css

@@ -195,6 +195,11 @@ body[showing-chat] #chat-page-wrapper {
   padding: 0px;
 }
 
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span {
+  display: flex;
+  align-items: center;
+}
+
 #chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar > span.title {
   padding-left: var(--content-padding);
 }

src/View/translations.ts

@@ -185,6 +185,19 @@ const englishTranslations = {
 
       renameCategoryInputPlaceholder: "Rename category,"
     },
+
+    calendar: {
+      todayButtonAudioLabel: "go to today",
+
+      previousMonthButtonAudioLabel: "previous month",
+      nextMonthButtonAudioLabel: "next month",
+
+      yearInputAudioLabel: "year",
+      monthInputAudioLabel: "month",
+
+      yearInputPlaceholder: "2000",
+      monthInputPlaceholder: "01",
+    }
   },
 };