Попытка сделать Drag-n-Drop

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<string>) => {
   if (ev.data === 'close_csat') {
     console.log('should output');
-    setCsatStore({ isOpened: false, questions: [] });
+    setTimeout(() => {
+      setCsatStore({ ...useCsatStore(), isOpened: false });
+    }, 0);
   }
 });
 

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),

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)),

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`);
       }}
     >

src/components/Button.tsx

@@ -1,5 +1,5 @@
 import { ComponentProps } from '@/jsxCore/types';
-
+import './button.scss'
 interface ButtonProps extends ComponentProps {
   text?: string;
   icon?: string;

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,18 +70,51 @@ 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);
     setIsInput(true);
   };
 
   return (
-    <div class="kanban-card">
+    <div
+      class="kanban-card"
+      style={`left: ${props.x}px; top: ${props.y}px`}
+      ON_mousedown={(ev: PointerEvent) => {
+        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' && (
         <div
           class="kanban-card__delete-button"
@@ -118,6 +155,7 @@ export const KanbanCard = (props: KanbanCardProps) => {
         />
       ) : (
         <div
+          className="kanban-card__title"
           ON_dblclick={editCallback}
           ON_contextmenu={(ev: Event) => {
             editCallback();

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) => {
           </div>
         )}
       </div>
-      {columnData.cards.map((cardData) => {
-        return (
-          <KanbanCard
-            key={`card_${cardData.id}`}
-            card={cardData}
-            columnId={props.columnId}
-            columnIdx={props.columnIndex}
-          />
-        );
-      })}
 
       {activeBoard?.myRole !== 'viewer' && !isInputOpened && (
         <Button

src/components/ModalDialog.tsx

@@ -17,9 +17,9 @@ export const ModalDialog = (props: ModalDialogProps) => {
   if (!props.isOpened) {
     return <div style="display:none" />;
   }
-  console.log("I AM OPENED")
+  console.log('I AM OPENED');
   return (
-    <div class="full-screen-dark">
+    <div class="full-screen-dark" ON_click={props.closeCallback}>
       <div class="modal-dialog">
         <div class="modal-dialog__header-block">
           <div className="modal-dialog__title-wrapper">

src/components/button.scss

@@ -0,0 +1,42 @@
+.button {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  border-radius: 3px;
+  height: 32px;
+  padding-right: 8px;
+  padding-left: 8px;
+  padding-top: 5px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  width: max-content;
+  user-select: none;
+  transition: background-color 0.3s ease, opacity 0.3s ease;
+}
+.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;
+}

src/components/kanbanCard.scss

@@ -1,9 +1,10 @@
 .kanban-card {
+  position: absolute;
   border-radius: 8px;
-  position: sticky;
   background-color: white;
   padding: 4px 6px;
   display: flex;
+  width: 256px;
   flex-direction: column;
   align-items: start;
   justify-content: start;
@@ -39,3 +40,6 @@
 .kanban-card:hover .kanban-card__delete-button {
   opacity: 100;
 }
+.kanban-card__title {
+  user-select: none;
+}

src/containers/KanbanBoard.tsx

@@ -10,11 +10,14 @@ import { useState } from '@/jsxCore/hooks';
 import { Input } from '@/components/Input';
 import { createColumn } from '@/api/columnsCards';
 import { showToast } from '@/stores/toastNotificationStore';
+import { KanbanCard } from '@/components/KanbanCard';
+import { setDndStore, useDndStore } from '@/stores/dndStore';
 
 const NewColumnButton = () => {
   const activeBoardStore = useActiveBoardStore() as ActiveBoard;
   const [isOpened, setIsOpened] = useState(false);
   const [newColumnName, setNewColumnName] = useState('');
+
   const submitNewColumn = (value: string) => {
     if (value.length < 3) {
       showToast('Длина имени колонки может быть от 3 символов', 'error');
@@ -94,8 +97,23 @@ type KanbanBoardProps = ComponentProps;
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const KanbanBoard = (props: KanbanBoardProps) => {
   const activeBoardStore = useActiveBoardStore() as ActiveBoard;
+  const [dndPos, setDndPos] = useState([50, 50]);
+  const dndStore = useDndStore();
+  const stopDnd = () => {
+    setDndStore(undefined);
+  };
   return (
     <div class="kanban-board">
+      {dndStore !== undefined && (
+        <div
+          style="z-index:1000; position: fixed; height: 100vh; width: 100vw"
+          ON_mousemove={(ev: PointerEvent) => {
+            setDndPos([ev.x - dndStore.offset[0], ev.y - dndStore.offset[1]]);
+          }}
+          ON_mouseup={stopDnd}
+          ON_mouseleave={stopDnd}
+        />
+      )}
       {activeBoardStore.columns.map((columnData, idx) => {
         return (
           <KanbanColumn
@@ -105,6 +123,15 @@ export const KanbanBoard = (props: KanbanBoardProps) => {
           />
         );
       })}
+      <KanbanCard
+        key="draggable"
+        card={{ deadline: undefined, title: '1234', id: 234 }}
+        isDragging={true}
+        x={dndPos[0]}
+        y={dndPos[1]}
+        columnId={1}
+        columnIdx={0}
+      />
       {activeBoardStore.myRole !== 'viewer' && (
         <NewColumnButton key="create_new_column" />
       )}