Добавлены поинтеры, внесены изменения в редактирование карточки

frontend-park-mail-ru · Dec 6, 2024 · 38ca4c8 · 38ca4c8
1 parent dacbe1a
commit 38ca4c8
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 116 deletions.
diff --git a/src/components/KanbanCard.tsx b/src/components/KanbanCard.tsx
@@ -121,6 +121,14 @@ export const KanbanCard = (props: KanbanCardProps) => {
       <div
         ref="card"
         className="kanban-card"
+        ON_click={() => {
+          clearTimeout(timer);
+          timer = setTimeout(() => {
+            getCardDetails(card.id).then((val) => {
+              setCardDetailsStore(val);
+            });
+          }, 300);
+        }}
         ON_mousedown={(ev: PointerEvent) => {
           if (!isInput && !editLock) {
             setDragStart([ev.x, ev.y]);
@@ -169,9 +177,10 @@ export const KanbanCard = (props: KanbanCardProps) => {
               });
             }}
           >
-            <i class="bi-trash" />
+            <i class="bi-three-dots" />
           </div>
         )}
+
         {card.coverImageUrl !== undefined ? (
           <img src={card.coverImageUrl} class="kanban-card__cover"></img>
         ) : undefined}
@@ -202,14 +211,6 @@ export const KanbanCard = (props: KanbanCardProps) => {
               editCallback();
               ev.stopPropagation();
             }}
-            ON_click={() => {
-              clearTimeout(timer);
-              timer = setTimeout(() => {
-                getCardDetails(card.id).then((val) => {
-                  setCardDetailsStore(val);
-                });
-              }, 300);
-            }}
           >
             <div>{card.title}</div>
             <div>

diff --git a/src/components/kanbanCard.scss b/src/components/kanbanCard.scss
@@ -7,6 +7,7 @@
   flex-direction: column;
   align-items: start;
   justify-content: start;
+  cursor: pointer;
   box-shadow: 0px 1px 1px #091e4240, 0px 0px 1px #091e424f,
     0px 1px 1px #091e4240, 0px 0px 1px #091e424f; // Позаимствовали у Trello
 }
@@ -41,6 +42,7 @@
 }
 .kanban-card__title {
   user-select: none;
+  cursor: text;
 }
 
 .kanban-card__textarea {

diff --git a/src/containers/CardDetails.tsx b/src/containers/CardDetails.tsx
@@ -218,120 +218,129 @@ export const CardDetailsContainer = (props: ComponentProps) => {
   return (
     <div class="card-details">
       <div class="card-details__left-section">
-        <h2>Чеклист</h2>
-        {cardDetails.checkList.map((field) => {
-          return (
-            <CheckListFieldComponent
-              key={`component_${field.id}`}
-              field={field}
-            />
-          );
-        })}
-        <Input
-          key="checklist_input"
-          placeholder="Новый пункт чеклиста"
-          onEnter={addCLF}
-          onChanged={(newText) => {
-            setNewCheckListField(newText);
-          }}
-        />
-        <Button
-          key="checklist_add_btn"
-          callback={addCLF}
-          text="Добавить пункт чеклиста"
-          variant="accent"
-        />
-        <h1>Комментарии</h1>
-        <Input
-          key="comment_input"
-          placeholder="Напишите Ваш комментарий"
-          onEnter={addComm}
-          onChanged={setNewComment}
-        />
-        <Button
-          key="comment_btn"
-          callback={addComm}
-          text="Добавить комментарий"
-          variant="accent"
-        />
-        {cardDetails.comments.map((comment) => {
-          return (
-            <div className="comment">
-              <div className="comment__author">{comment.createdBy.name}</div>
+        <div class="card-details_block">
+          <h2>Чеклист</h2>
+          {cardDetails.checkList.map((field) => {
+            return (
+              <CheckListFieldComponent
+                key={`component_${field.id}`}
+                field={field}
+              />
+            );
+          })}
+          <Input
+            key="checklist_input"
+            placeholder="Новый пункт чеклиста"
+            onEnter={addCLF}
+            onChanged={(newText) => {
+              setNewCheckListField(newText);
+            }}
+          />
+          <Button
+            key="checklist_add_btn"
+            callback={addCLF}
+            text="Добавить пункт чеклиста"
+            variant="accent"
+          />
+        </div>
+        <div class="card-details_block">
+          <h1>Комментарии</h1>
+          <Input
+            key="comment_input"
+            placeholder="Напишите Ваш комментарий"
+            onEnter={addComm}
+            onChanged={setNewComment}
+          />
+          <Button
+            key="comment_btn"
+            callback={addComm}
+            text="Добавить комментарий"
+            variant="accent"
+          />
+          {cardDetails.comments.map((comment) => {
+            return (
+              <div className="comment">
+                <div className="comment__author">{comment.createdBy.name}</div>
 
-              <div>{comment.text}</div>
-              <div
-                style="cursor: pointer; color:red"
-                ON_click={() => {
-                  deleteComment(comment.id).then((t) => {
-                    if (t) {
-                      cardDetails.comments = cardDetails.comments.filter(
-                        (c) => {
-                          return c.id !== comment.id;
-                        }
-                      );
-                      setCardDetailsStore(cardDetails);
-                    }
-                  });
-                }}
-              >
-                <i class="bi-x-lg" />
+                <div>{comment.text}</div>
+                <div
+                  style="cursor: pointer; color:red"
+                  ON_click={() => {
+                    deleteComment(comment.id).then((t) => {
+                      if (t) {
+                        cardDetails.comments = cardDetails.comments.filter(
+                          (c) => {
+                            return c.id !== comment.id;
+                          }
+                        );
+                        setCardDetailsStore(cardDetails);
+                      }
+                    });
+                  }}
+                >
+                  <i class="bi-x-lg" />
+                </div>
               </div>
-            </div>
-          );
-        })}
+            );
+          })}
+        </div>
       </div>
 
       <div class="card-details__right-section">
-        <h1>Дедлайн</h1>
-        <div>
-          Пожалуйста, вводите дату и время! Если Вы не введёте время, оно не
-          сработает
+        <div class="card-details_block">
+          <h1>Дедлайн</h1>
+          <div>
+            Пожалуйста, вводите дату и время! Если Вы не введёте время, оно не
+            сработает
+          </div>
+          <div style="cursor: pointer; color:red">
+            <DeadlineInput
+              key="deadline_input"
+              deadline={cardDetails.card.deadline}
+              cardId={cardDetails.card.id}
+            />
+          </div>
         </div>
-
-        <DeadlineInput
-          key="deadline_input"
-          deadline={cardDetails.card.deadline}
-          cardId={cardDetails.card.id}
-        />
-        <h1>Назначенные пользователи</h1>
-        {cardDetails.assignedUsers.map((u) => {
-          return (
-            <div style="display: flex; flex-direction: row">
-              <div>{u.name}</div>
-              <div
-                style="cursor: pointer; color:red"
-                ON_click={() => {
-                  deassignUser(cardDetails.card.id, u.id).then((t) => {
-                    if (t) {
-                      cardDetails.assignedUsers =
-                        cardDetails.assignedUsers.filter((au) => {
-                          return au.id !== u.id;
-                        });
-                      setCardDetailsStore(cardDetails);
-                    }
-                  });
-                }}
-              >
-                <i class="bi-x-lg" />
+        <div class="card-details_block">
+          <h1>Назначенные пользователи</h1>
+          {cardDetails.assignedUsers.map((u) => {
+            return (
+              <div style="display: flex; flex-direction: row">
+                <div>{u.name}</div>
+                <div
+                  style="cursor: pointer; color:red"
+                  ON_click={() => {
+                    deassignUser(cardDetails.card.id, u.id).then((t) => {
+                      if (t) {
+                        cardDetails.assignedUsers =
+                          cardDetails.assignedUsers.filter((au) => {
+                            return au.id !== u.id;
+                          });
+                        setCardDetailsStore(cardDetails);
+                      }
+                    });
+                  }}
+                >
+                  <i class="bi-x-lg" />
+                </div>
               </div>
-            </div>
-          );
-        })}
-        <Input
-          key="assign_user"
-          placeholder="Никнейм участника"
-          onEnter={addAssigned}
-          onChanged={(newText) => {
-            setNewAssigned(newText);
-          }}
-        />
-        <Button
-          key="assign_user_btn"
-          text="Назначить участника"
-          variant="accent"
-          callback={addAssigned}
-        />
+            );
+          })}
+          <Input
+            key="assign_user"
+            placeholder="Никнейм участника"
+            onEnter={addAssigned}
+            onChanged={(newText) => {
+              setNewAssigned(newText);
+            }}
+          />
+          <Button
+            key="assign_user_btn"
+            text="Назначить участника"
+            variant="accent"
+            callback={addAssigned}
+          />
+        </div>
       </div>
     </div>
   );

diff --git a/src/containers/cardDetails.scss b/src/containers/cardDetails.scss
@@ -2,6 +2,12 @@
   display: flex;
   flex-direction: row;
   min-width: 70vw;
+  gap: 20px;
+}
+
+.card-details_block {
+  min-height: 140px;
+  max-width: 450px;
 }
 
 .card-details__left-section {

diff --git a/static/img/KarlMarks.jpg b/static/img/KarlMarks.jpg
diff --git a/static/img/KarlMarks1.jpg b/static/img/KarlMarks1.jpg