From b1d637684214b942c47626bad371b9b32cd54018 Mon Sep 17 00:00:00 2001 From: DeDxYk594 Date: Fri, 29 Nov 2024 01:01:03 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=8B=D1=82=D0=BA=D0=B0=20?= =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D1=82=D1=8C=20Drag-n-Drop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 6 +- src/api/boards.ts | 1 + src/api/mocks/activeBoard.ts | 1 + src/components/BoardCard.tsx | 2 + src/components/Button.tsx | 2 +- src/components/KanbanCard.tsx | 40 ++++++++- src/components/KanbanColumn.tsx | 12 +-- src/components/ModalDialog.tsx | 4 +- src/components/button.scss | 42 +++++++++ src/components/kanbanCard.scss | 6 +- src/containers/KanbanBoard.tsx | 27 ++++++ src/containers/LeftPanel.tsx | 152 +++++++++++++++++--------------- src/containers/leftPanel.scss | 4 +- src/containers/navBar.scss | 2 +- src/index.scss | 48 +++------- src/jsxCore/hooks.ts | 2 - src/screens/CsatPoll.tsx | 2 +- src/screens/MainApp.tsx | 9 +- src/stores/dndStore.ts | 13 +++ src/types/activeBoard.ts | 1 + 20 files changed, 242 insertions(+), 134 deletions(-) create mode 100644 src/components/button.scss create mode 100644 src/stores/dndStore.ts diff --git a/src/App.tsx b/src/App.tsx index fd7af87..64aed00 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,7 +10,7 @@ import { updateMe } from './stores/meStore'; import { getFlagRoutes } from './routes/routesFlag'; import { CsatPoll } from './screens/CsatPoll'; import { CsatResults } from './screens/CsatResults'; -import { setCsatStore } from './stores/csatStore'; +import { setCsatStore, useCsatStore } from './stores/csatStore'; const App: IComponentFunction = () => { const routerStore = useRouterStore(); @@ -38,7 +38,9 @@ setTimeout(() => { window.addEventListener('message', (ev: MessageEvent) => { if (ev.data === 'close_csat') { console.log('should output'); - setCsatStore({ isOpened: false, questions: [] }); + setTimeout(() => { + setCsatStore({ ...useCsatStore(), isOpened: false }); + }, 0); } }); diff --git a/src/api/boards.ts b/src/api/boards.ts index ff58e1c..fb7e99d 100644 --- a/src/api/boards.ts +++ b/src/api/boards.ts @@ -84,6 +84,7 @@ export const getBoardContent = async ( id: boardContentResponse.boardInfo.id, title: boardContentResponse.boardInfo.name, columns, // обновленный массив columns + cards: boardContentResponse.allCards.map(decodeCard), myRole: boardContentResponse.myRole, lastUpdate: new Date(boardContentResponse.boardInfo.updatedAt), lastVisit: new Date(boardContentResponse.boardInfo.updatedAt), diff --git a/src/api/mocks/activeBoard.ts b/src/api/mocks/activeBoard.ts index e6f0d91..7c5229c 100644 --- a/src/api/mocks/activeBoard.ts +++ b/src/api/mocks/activeBoard.ts @@ -22,6 +22,7 @@ export const activeBoardMock: ActiveBoard = { ], }, ], + cards: [], // TODO myRole: 'admin', lastVisit: new Date(Date.UTC(2004, 7, 10)), lastUpdate: new Date(Date.UTC(2024, 7, 10)), diff --git a/src/components/BoardCard.tsx b/src/components/BoardCard.tsx index 6d4d8b5..e485ef1 100644 --- a/src/components/BoardCard.tsx +++ b/src/components/BoardCard.tsx @@ -7,6 +7,7 @@ import { useActiveBoardStore } from '@/stores/activeBoardStore'; interface BoardCardProps extends ComponentProps { board: Board; + onSelect: () => void; } /** @@ -24,6 +25,7 @@ export const BoardCard = (props: BoardCardProps) => { activeBoard?.id === props.board.id ? 'board-card__active' : '', ]} ON_click={() => { + props.onSelect(); goToUrl(`/app/board_${props.board.id}/kanban`); }} > diff --git a/src/components/Button.tsx b/src/components/Button.tsx index eb049af..7fe9bb0 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,5 +1,5 @@ import { ComponentProps } from '@/jsxCore/types'; - +import './button.scss' interface ButtonProps extends ComponentProps { text?: string; icon?: string; diff --git a/src/components/KanbanCard.tsx b/src/components/KanbanCard.tsx index 060a21d..9992b87 100644 --- a/src/components/KanbanCard.tsx +++ b/src/components/KanbanCard.tsx @@ -11,11 +11,15 @@ import { Button } from './Button'; import { getCardDetails } from '@/api/cardDetails'; import { setCardDetailsStore } from '@/stores/cardDetailsStore'; import { Card } from '@/types/card'; +import { setDndStore, useDndStore } from '@/stores/dndStore'; interface KanbanCardProps extends ComponentProps { card: Card; columnId: number; columnIdx: number; + isDragging: boolean; + x: number; + y: number; } interface EditableProps extends ComponentProps { @@ -66,10 +70,16 @@ const Editable = (props: EditableProps) => { ); }; +const DND_THRESHOLD = 10; + export const KanbanCard = (props: KanbanCardProps) => { const activeBoard = useActiveBoardStore() as ActiveBoard; const card = props.card; const [isInput, setIsInput] = useState(false); + const [dragStart, setDragStart] = useState< + [x: number, y: number] | undefined + >(undefined); + const [dragOffset, setDragOffset] = useState<[x: number, y: number]>([0, 0]); let timer: number; const editCallback = () => { clearTimeout(timer); @@ -77,7 +87,34 @@ export const KanbanCard = (props: KanbanCardProps) => { }; return ( -
+
{ + setDragStart([ev.x, ev.y]); + setDragOffset([ev.offsetX, ev.offsetY]); + }} + ON_mousemove={(ev: PointerEvent) => { + if (dragStart !== undefined) { + if ( + Math.sqrt( + Math.pow(dragStart[0] - ev.x, 2) + + Math.pow(dragStart[1] - ev.y, 2) + ) > DND_THRESHOLD + ) { + const dndStore = useDndStore(); + if (dndStore === undefined) { + setDndStore({ type: 'card', offset: dragOffset }); + console.log('offset', dragOffset); + setDragStart(undefined); + } + } + } + }} + ON_mouseleave={() => { + setDragStart(undefined); + }} + > {activeBoard.myRole !== 'viewer' && (
{ /> ) : (
{ editCallback(); diff --git a/src/components/KanbanColumn.tsx b/src/components/KanbanColumn.tsx index 8a6075c..0b45dcd 100644 --- a/src/components/KanbanColumn.tsx +++ b/src/components/KanbanColumn.tsx @@ -1,5 +1,4 @@ import { ComponentProps } from '@/jsxCore/types'; -import { KanbanCard } from '@/components/KanbanCard'; import { setActiveBoardStore, useActiveBoardStore, @@ -22,6 +21,7 @@ export const KanbanColumn = (props: KanbanColumnProps) => { const [newCardText, setNewCardText] = useState(''); const activeBoard = useActiveBoardStore() as ActiveBoard; const columnData = activeBoard.columns[props.columnIndex]; + const submitCreateCard = (newText: string) => { if (newText.length < 3) { showToast('Длина текста в карточке может быть от 3 символов', 'error'); @@ -92,16 +92,6 @@ export const KanbanColumn = (props: KanbanColumnProps) => {
)}
- {columnData.cards.map((cardData) => { - return ( - - ); - })} {activeBoard?.myRole !== 'viewer' && !isInputOpened && (
-
-
- Мои доски + )}
-
-
- {boards.length > 0 ? ( - boards.map((board) => { - return ; - }) - ) : ( -
- У Вас нет досок. Создайте доску или попросите коллегу добавить Вас - на доску! +
+
+ Мои доски
- )} +
+
+ {boards.length > 0 ? ( + boards.map((board) => { + return ( + + ); + }) + ) : ( +
+ У Вас нет досок. Создайте доску или попросите коллегу добавить + Вас на доску! +
+ )} +
-
- + + ); }; diff --git a/src/containers/leftPanel.scss b/src/containers/leftPanel.scss index 5917b95..48e24c3 100644 --- a/src/containers/leftPanel.scss +++ b/src/containers/leftPanel.scss @@ -3,7 +3,7 @@ background-color: #e2e2e2; height: 100vh; padding: 0px 10px; - z-index: 5; + z-index: 40; overflow-y: auto; } @media screen and (max-width: 800px) { @@ -14,7 +14,7 @@ @media screen and (min-width: 800px) { .left-menu { padding: 0px 20px; - width: 243px; + width: 246px; } } diff --git a/src/containers/navBar.scss b/src/containers/navBar.scss index 24727ea..260fb73 100644 --- a/src/containers/navBar.scss +++ b/src/containers/navBar.scss @@ -12,7 +12,7 @@ justify-content: space-between; align-items: center; background: rgba(200, 200, 200, 0.5); - z-index: 10; + z-index: 50; position: fixed; column-gap: 10px; padding: 0 10px; diff --git a/src/index.scss b/src/index.scss index 8841da1..b88122f 100644 --- a/src/index.scss +++ b/src/index.scss @@ -35,45 +35,17 @@ justify-content: space-around; } -.button { - margin-top: 4px; - margin-bottom: 4px; - border-radius: 3px; - height: 32px; - padding-right: 8px; - padding-left: 8px; - padding-top: 5px; - cursor: pointer; +.left-panel-dark { + position: fixed; + top: 0; + left: 246px; + width: 100vw; + height: 100vh; + z-index: 100; + background-color: rgba(0, 0, 0, 0.4); display: flex; - flex-direction: row; - width: max-content; -} -.button:hover { - opacity: 0.9; -} -.button__default { - background-color: var(--color-default); -} -.button__negative { - color: white; - background-color: var(--color-negative); -} -.button__positive { - color: white; - background-color: var(--color-positive); -} -.button__accent { - color: white; - background-color: var(--color-accent); -} -.button__transparent { - background-color: rgba(0, 0, 0, 0); -} -.button__transparent:hover { - background-color: rgba(0, 0, 0, 0.15); -} -.button__icon { - margin-top: 1px; + align-items: center; + justify-content: space-around; } .input { diff --git a/src/jsxCore/hooks.ts b/src/jsxCore/hooks.ts index cca1c5e..3a5e6b9 100644 --- a/src/jsxCore/hooks.ts +++ b/src/jsxCore/hooks.ts @@ -77,8 +77,6 @@ export function defineStore( storeSubscribers.get(storeName)?.add(activeInstance); } } - console.log(storeName, activeInstance); - console.log(storeSubscribers); return storeMap.get(storeName); }; const setStore = (newStoreContent: S) => { diff --git a/src/screens/CsatPoll.tsx b/src/screens/CsatPoll.tsx index 5e522f7..2b864dd 100644 --- a/src/screens/CsatPoll.tsx +++ b/src/screens/CsatPoll.tsx @@ -95,7 +95,7 @@ export const CsatPoll = (props: ComponentProps) => { text="Закрыть" variant="accent" callback={() => { - postMessage('close_csat'); + window.parent.postMessage('close_csat'); }} />
diff --git a/src/screens/MainApp.tsx b/src/screens/MainApp.tsx index a306c73..06d4671 100644 --- a/src/screens/MainApp.tsx +++ b/src/screens/MainApp.tsx @@ -88,7 +88,14 @@ export const MainApp = (props: MainAppProps) => { )} - {leftPanelOpened && } + {leftPanelOpened && ( + { + setLeftPanelOpened(false); + }} + /> + )} {cardDetails !== undefined && ( ( + 'dnd_store', + undefined +); diff --git a/src/types/activeBoard.ts b/src/types/activeBoard.ts index 4652a0c..851d05a 100644 --- a/src/types/activeBoard.ts +++ b/src/types/activeBoard.ts @@ -10,6 +10,7 @@ export interface BoardColumn { export interface ActiveBoard extends Board { columns: BoardColumn[]; + cards: Card[]; myRole: 'viewer' | 'editor' | 'editor_chief' | 'admin'; users?: UserToBoard[]; }