96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
import * as React from "bloatless-react";
|
|
|
|
import { BoardInfoToEntry } from "../Components/boardEntry";
|
|
import { BoardPage } from "./boardPage";
|
|
import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel";
|
|
import { translations } from "../translations";
|
|
|
|
export function TaskPage(taskPageViewModel: TaskPageViewModel) {
|
|
taskPageViewModel.loadData();
|
|
|
|
const paneContent = React.createProxyState(
|
|
[taskPageViewModel.selectedBoardId],
|
|
() => {
|
|
const selectedBoardId = taskPageViewModel.selectedBoardId.value;
|
|
if (selectedBoardId == undefined) {
|
|
return (
|
|
<div class="pane align-center justify-center">
|
|
<span class="secondary">
|
|
{translations.chatPage.task.noBoardSelected}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
const selectedBoard =
|
|
taskPageViewModel.boardViewModels.value.get(selectedBoardId);
|
|
if (selectedBoard == undefined) {
|
|
return (
|
|
<div class="pane align-center justify-center">
|
|
<span class="secondary">
|
|
{translations.chatPage.task.boardNotFound}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return BoardPage(selectedBoard);
|
|
}
|
|
);
|
|
|
|
const listPaneWrapper = (
|
|
<div class="pane-wrapper side">
|
|
<div class="pane">
|
|
<div class="toolbar">
|
|
<div class="flex-row width-input">
|
|
<input
|
|
bind:value={taskPageViewModel.newBoardNameInput}
|
|
on:enter={taskPageViewModel.createBoard}
|
|
placeholder={translations.chatPage.task.newBoardNamePlaceholder}
|
|
></input>
|
|
<button
|
|
class="primary"
|
|
aria-label={
|
|
translations.chatPage.task.createBoardButtonAudioLabel
|
|
}
|
|
on:click={taskPageViewModel.createBoard}
|
|
toggle:disabled={taskPageViewModel.cannotCreateBoard}
|
|
>
|
|
<span class="icon">add</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<div
|
|
class="grid gap"
|
|
style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
|
|
children:append={[
|
|
taskPageViewModel.boardViewModels,
|
|
BoardInfoToEntry,
|
|
]}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const mainPageWrapper = (
|
|
<div class="pane-wrapper" children:set={paneContent}></div>
|
|
);
|
|
|
|
React.bulkSubscribe([taskPageViewModel.selectedBoardId], () => {
|
|
const selectedBoard = taskPageViewModel.selectedBoardId.value;
|
|
if (selectedBoard == undefined) {
|
|
listPaneWrapper.scrollIntoView();
|
|
} else {
|
|
mainPageWrapper.scrollIntoView();
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div id="task-page">
|
|
{listPaneWrapper}
|
|
{mainPageWrapper}
|
|
</div>
|
|
);
|
|
}
|