diff --git a/frontend/src/kanban-board/kanban-boards.tsx b/frontend/src/kanban-board/kanban-boards.tsx index 19661ad..0e6593f 100644 --- a/frontend/src/kanban-board/kanban-boards.tsx +++ b/frontend/src/kanban-board/kanban-boards.tsx @@ -1,7 +1,9 @@ import React from 'react'; import * as KB from './kanban-board'; -import { IPageStore } from './store'; +import { IPageStore, PageStoreLoadData } from './store'; import { observer } from 'mobx-react-lite'; +import * as TopRightMenuNs from '../misc-components/top-right-menu'; +import { SetIssuesReadingTimestamp } from '../utils/unreaded-provider'; export type Props = { store: IPageStore @@ -19,8 +21,17 @@ export const KanbanBoards = observer((props: Props) => { const board = ; list.push(board); } + const topRightMenuStore = TopRightMenuNs.Store.create({visible: false}); + const onAllReadClick = (e: React.MouseEvent) => { + e.stopPropagation(); + SetIssuesReadingTimestamp(props.store.issueIds); + PageStoreLoadData(props.store); + }; return ( <> + + + {list} ); diff --git a/frontend/src/kanban-board/store.ts b/frontend/src/kanban-board/store.ts index 6dc0ea8..148b3f0 100644 --- a/frontend/src/kanban-board/store.ts +++ b/frontend/src/kanban-board/store.ts @@ -60,6 +60,26 @@ export const PageStore = types.model({ self.loaded = true; } }; +}).views((self) => { + return { + get issueIds(): number[] { + if (!self.data) return []; + const res = [] as number[]; + for (let i = 0; i < self.data.length; i++) { + const iData = self.data[i]; + for (let j = 0; j < iData.data.length; j++) { + const jData = iData.data[j]; + for (let k = 0; k < jData.issues.length; k++) { + const issue = jData.issues[k]; + if (res.indexOf(issue.id) < 0) { + res.push(issue.id); + } + } + } + } + return res; + } + }; }); export async function PageStoreLoadData(store: IPageStore): Promise { diff --git a/frontend/src/misc-components/top-right-menu.module.css b/frontend/src/misc-components/top-right-menu.module.css new file mode 100644 index 0000000..34a5fc6 --- /dev/null +++ b/frontend/src/misc-components/top-right-menu.module.css @@ -0,0 +1,16 @@ +.menuButton { + position: fixed; + width: 45px; + height: 25px; + top: 0px; + left: 0px; +} + +.menu { + background-color: #FFFFFF; + border: 1px solid #000000; + position: fixed; + top: 25px; + left: 0px; + display: none; +} \ No newline at end of file diff --git a/frontend/src/misc-components/top-right-menu.tsx b/frontend/src/misc-components/top-right-menu.tsx new file mode 100644 index 0000000..5bdc5d7 --- /dev/null +++ b/frontend/src/misc-components/top-right-menu.tsx @@ -0,0 +1,55 @@ +import { observer } from 'mobx-react-lite'; +import { Instance, types } from 'mobx-state-tree'; +import React from 'react'; +import Css from './top-right-menu.module.css'; + +export const Store = types.model({ + visible: types.boolean +}).views((self) => { + return { + get style(): React.CSSProperties { + return { + display: self.visible ? 'block' : 'none' + }; + } + }; +}).actions((self) => { + return { + show: () => { + self.visible = true; + }, + hide: () => { + self.visible = false; + }, + toggle: () => { + self.visible = !self.visible; + } + }; +}); + +export type Props = { + store: Instance; + children?: any; +}; + +export const TopRightMenu = observer((props: Props): JSX.Element => { + const menuItems = []; + if (props.children.length > 1) { + for (let key = 0; key < props.children.length; key++) { + const item = props.children[key]; + menuItems.push(
  • {item}
  • ); + } + } else if (props.children) { + menuItems.push(
  • {props.children}
  • ) + } + return ( + <> + +
    +
      + {menuItems} +
    +
    + + ); +}) \ No newline at end of file diff --git a/frontend/src/utils/unreaded-provider.ts b/frontend/src/utils/unreaded-provider.ts index 685f86c..2bf4299 100644 --- a/frontend/src/utils/unreaded-provider.ts +++ b/frontend/src/utils/unreaded-provider.ts @@ -9,6 +9,15 @@ export function SetIssueReadingTimestamp(issueId: number): number { return now; } +export function SetIssuesReadingTimestamp(issueIds: number[]): number { + const now = (new Date()).getTime(); + for (let i = 0; i < issueIds.length; i++) { + const issueId = issueIds[i]; + window.localStorage.setItem(getKey(issueId), String(now)); + } + return now; +} + function getKey(issueId: number): string { return `issue_read_${issueId}`; } \ No newline at end of file