Добавлены кнопки

frontend-park-mail-ru · Nov 25, 2024 · ea91f9d · ea91f9d
1 parent a85041f
commit ea91f9d
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 38 deletions.
diff --git a/src/components/KanbanCard.tsx b/src/components/KanbanCard.tsx
@@ -13,11 +13,9 @@ import { setCardDetailsStore } from '@/stores/cardDetailsStore';
 import { Card } from '@/types/card';
 
 interface KanbanCardProps extends ComponentProps {
-  text: string;
-  cardId: number;
+  card: Card;
   columnId: number;
   columnIdx: number;
-  coverImageUrl?: string;
 }
 
 interface EditableProps extends ComponentProps {
@@ -70,6 +68,7 @@ const Editable = (props: EditableProps) => {
 
 export const KanbanCard = (props: KanbanCardProps) => {
   const activeBoard = useActiveBoardStore() as ActiveBoard;
+  const card = props.card;
   const [isInput, setIsInput] = useState(false);
   let timer: number;
   const editCallback = () => {
@@ -83,10 +82,10 @@ export const KanbanCard = (props: KanbanCardProps) => {
         <div
           class="kanban-card__delete-button"
           ON_click={() => {
-            deleteCard(props.cardId).then(() => {
+            deleteCard(card.id).then(() => {
               activeBoard.columns.forEach((column) => {
                 column.cards = column.cards.filter((card) => {
-                  return card.id !== props.cardId;
+                  return card.id !== card.id;
                 });
               });
               setActiveBoardStore(activeBoard);
@@ -96,14 +95,14 @@ export const KanbanCard = (props: KanbanCardProps) => {
           <i class="bi-trash" />
         </div>
       )}
-      {props.coverImageUrl !== undefined ? (
-        <img src={props.coverImageUrl} class="kanban-card__cover"></img>
+      {card.coverImageUrl !== undefined ? (
+        <img src={card.coverImageUrl} class="kanban-card__cover"></img>
       ) : undefined}
       {isInput ? (
         <Editable
           key="editable_card"
-          initialText={props.text}
-          cardId={props.cardId}
+          initialText={card.title}
+          cardId={card.id}
           onNewCard={(crd) => {
             activeBoard.columns[props.columnIdx].cards = activeBoard.columns[
               props.columnIdx
@@ -127,16 +126,17 @@ export const KanbanCard = (props: KanbanCardProps) => {
           ON_click={() => {
             clearTimeout(timer);
             timer = setTimeout(() => {
-              getCardDetails(props.cardId).then((val) => {
+              getCardDetails(card.id).then((val) => {
                 setCardDetailsStore(val);
                 console.log(val);
               });
             }, 300);
           }}
         >
-          {props.text}
+          {card.title}
         </div>
       )}
+      {}
     </div>
   );
 };
diff --git a/src/components/KanbanColumn.tsx b/src/components/KanbanColumn.tsx
@@ -96,11 +96,9 @@ export const KanbanColumn = (props: KanbanColumnProps) => {
         return (
           <KanbanCard
             key={`card_${cardData.id}`}
-            text={cardData.title}
-            cardId={cardData.id}
+            card={cardData}
             columnId={props.columnId}
             columnIdx={props.columnIndex}
-            coverImageUrl={cardData.coverImageUrl}
           />
         );
       })}

diff --git a/src/containers/CardDetails.tsx b/src/containers/CardDetails.tsx
@@ -184,6 +184,37 @@ export const CardDetailsContainer = (props: ComponentProps) => {
   const [newComment, setNewComment] = useState('');
   const [newCheckListField, setNewCheckListField] = useState('');
   const [newAssigned, setNewAssigned] = useState('');
+
+  const addCLF = () => {
+    addCheckListField(cardDetails.card.id, newCheckListField).then((clf) => {
+      if (clf !== undefined) {
+        setNewCheckListField('');
+        cardDetails.checkList.push(clf);
+        setCardDetailsStore(cardDetails);
+      }
+    });
+  };
+
+  const addComm = () => {
+    createComment(cardDetails.card.id, newComment).then((comment) => {
+      if (comment !== undefined) {
+        setNewComment('');
+        cardDetails.comments.push(comment);
+        setCardDetailsStore(cardDetails);
+      }
+    });
+  };
+
+  const addAssigned = () => {
+    assignUser(cardDetails.card.id, newAssigned).then((u) => {
+      if (u !== undefined) {
+        setNewAssigned('');
+        cardDetails.assignedUsers.push(u);
+        setCardDetailsStore(cardDetails);
+      }
+    });
+  };
+
   return (
     <div class="card-details">
       <div class="card-details__left-section">
@@ -199,27 +230,29 @@ export const CardDetailsContainer = (props: ComponentProps) => {
         <Input
           key="checklist_input"
           placeholder="Новый пункт чеклиста"
-          onEnter={(text) => {
-            addCheckListField(cardDetails.card.id, text).then((clf) => {
-              if (clf !== undefined) {
-                cardDetails.checkList.push(clf);
-                setCardDetailsStore(cardDetails);
-              }
-            });
+          onEnter={addCLF}
+          onChanged={(newText) => {
+            setNewCheckListField(newText);
           }}
         />
+        <Button
+          key="checklist_add_btn"
+          callback={addCLF}
+          text="Добавить пункт чеклиста"
+          variant="accent"
+        />
         <h1>Комментарии</h1>
         <Input
           key="comment_input"
           placeholder="Напишите Ваш комментарий"
-          onEnter={(text) => {
-            createComment(cardDetails.card.id, text).then((comment) => {
-              if (comment !== undefined) {
-                cardDetails.comments.push(comment);
-                setCardDetailsStore(cardDetails);
-              }
-            });
-          }}
+          onEnter={addComm}
+          onChanged={setNewComment}
+        />
+        <Button
+          key="comment_btn"
+          callback={addComm}
+          text="Добавить комментарий"
+          variant="accent"
         />
         {cardDetails.comments.map((comment) => {
           return (
@@ -287,17 +320,18 @@ export const CardDetailsContainer = (props: ComponentProps) => {
         })}
         <Input
           key="assign_user"
-          placeholder="Назначить участника"
-          onEnter={(text) => {
-            assignUser(cardDetails.card.id, text).then((u) => {
-              if (u !== undefined) {
-                console.log(u);
-                cardDetails.assignedUsers.push(u);
-                setCardDetailsStore(cardDetails);
-              }
-            });
+          placeholder="Никнейм участника"
+          onEnter={addAssigned}
+          onChanged={(newText) => {
+            setNewAssigned(newText);
           }}
         />
+        <Button
+          key="assign_user_btn"
+          text="Назначить участника"
+          variant="accent"
+          callback={addAssigned}
+        />
       </div>
     </div>
   );