CT/src/View/ChatPages/boardPage.tsx

import * as React from "bloatless-react";

import BoardViewModel, {
  BoardPageType,
} from "../../ViewModel/Pages/boardViewModel";

import { BoardKanbanPage } from "./boardKanbanPage";
import { BoardSettingsModal } from "../Modals/boardSettingsModal";
import { BoardStatusGridPage } from "./boardStatusGridPage";
import { BoardViewToggleButton } from "../Components/boardViewToggleButton";
import { SearchModal } from "../Modals/searchModal";
import { TaskSettingsModal } from "../Modals/taskSettingsModal";
import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
import { TaskViewModelToEntry } from "../Components/taskEntry";
import { translations } from "../translations";

export function BoardPage(boardViewModel: BoardViewModel) {
  boardViewModel.loadData();

  // main content
  const mainContent = React.createProxyState(
    [boardViewModel.selectedPage],
    () => {
      switch (boardViewModel.selectedPage.value) {
        case BoardPageType.Kanban: {
          return BoardKanbanPage(boardViewModel);
        }
        case BoardPageType.StatusGrid: {
          return BoardStatusGridPage(boardViewModel);
        }
        default: {
          return (
            <div
              class="task-grid"
              children:append={[
                boardViewModel.filteredTaskViewModels,
                TaskViewModelToEntry,
              ]}
            ></div>
          );
        }
      }
    }
  );

  // task modal
  const taskSettingsModal = React.createProxyState(
    [boardViewModel.selectedTaskViewModel],
    () => {
      if (boardViewModel.selectedTaskViewModel.value == undefined) {
        return <div></div>;
      } else {
        return TaskSettingsModal(boardViewModel.selectedTaskViewModel.value);
      }
    }
  );

  return (
    <div class="pane">
      <div class="toolbar">
        <span>
          <button
            class="ghost"
            aria-label={translations.chatPage.task.closeBoard}
            on:click={boardViewModel.close}
          >
            <span class="icon">arrow_back</span>
          </button>
          <button
            class="ghost"
            aria-label={translations.chatPage.task.boardSettingsHeadline}
            on:click={boardViewModel.showSettings}
          >
            <span class="icon">settings</span>
          </button>
        </span>
        <span class="scroll-h ribbon">
          {BoardViewToggleButton(
            translations.chatPage.task.listViewButtonAudioLabel,
            "view_list",
            BoardPageType.List,
            boardViewModel
          )}
          {BoardViewToggleButton(
            translations.chatPage.task.kanbanViewButtonAudioLabel,
            "view_kanban",
            BoardPageType.Kanban,
            boardViewModel
          )}
          {BoardViewToggleButton(
            translations.chatPage.task.statusViewButtonAudioLabel,
            "grid_view",
            BoardPageType.StatusGrid,
            boardViewModel
          )}
        </span>
        <span>
          <button
            class="ghost"
            aria-label={translations.chatPage.task.filterTasksButtonAudioLabel}
            on:click={boardViewModel.showFilterModal}
          >
            <span class="icon">filter_alt</span>
          </button>
          <button
            class="ghost"
            aria-label={translations.chatPage.task.createTaskButtonAudioLabel}
            on:click={boardViewModel.createTask}
          >
            <span class="icon">add</span>
          </button>
        </span>
      </div>
      <div class="content main-content" children:set={mainContent}></div>

      {BoardSettingsModal(boardViewModel)}
      {SearchModal(
        translations.chatPage.task.filterTasksHeadline,
        boardViewModel.taskViewModels,
        boardViewModel.filteredTaskViewModels,
        TaskViewModelToEntry,
        boardViewModel.getStringsFromTaskViewModel,
        boardViewModel.isPresentingFilterModal
      )}
      <div children:set={taskSettingsModal}></div>
    </div>
  );
}