[WIP] Add a popup to confirm cancel assigning

app/javascript/api/action-items-api.ts

@@ -22,7 +22,7 @@ export const actionItemsApi = {
     return actionItems.data;
   },
 
-  async updateActionItems(id: number, body?: string, assigneeId?: string, status?: string) {
+  async updateActionItems(id: number, assigneeId?: string, body?: string, status?: string) {
     const actionItems = await api.patch<Array<ActionItemType>>(
       `action_items/${id}`,
       { body, assigneeId, status }

app/javascript/components/pages/action-items/action-items-container.tsx

@@ -15,6 +15,10 @@ import {
 import { ActionItem } from "./action/action-item";
 import { actionItemsApi } from "../../../api/action-items-api";
 import "../../style.less";
+import {CommentValues, TextModal} from "../../../constants/constants";
+import Modal from "../../shared/modal/modal";
+import ModalConfirm from "../../shared/modal-confirm/modal-confirm";
+import {cardApi} from "../../../api/card-api";
 
 import style from "./style.module.less";
 
@@ -26,6 +30,8 @@ const ActionItemsContainer: React.FC = () => {
 
   const [isModalOpen, setModalOpen] = useState(false);
   const [cardId, setCardId] = useState<number | null>(null);
+  const [confirmComment, setConfirmComment] = useState("");
+  const [isError, setIsError] = useState(false);
   const columns = [
     ACTION_ITEM_STATUS.ToDo,
     ACTION_ITEM_STATUS.InProgress,
@@ -48,6 +54,10 @@ const ActionItemsContainer: React.FC = () => {
     getActionItems();
   }, []);
 
+
+  const isShort = confirmComment.length <= CommentValues.MinLength;
+  const isLong = confirmComment.length > CommentValues.MaxLength;
+
   const handleOnDragEnd =
     (items: Array<ActionItemType>) => (result: DropResult) => {
       const { destination, draggableId } = result;
@@ -72,18 +82,46 @@ const ActionItemsContainer: React.FC = () => {
       changeStatus();
     };
 
-  const handleDeleteItem = async () => {
-    setModalOpen(false);
+  const handleDeleteAssignment = async () => {
     dispatch(actions.pending());
     try {
-      const response = await actionItemsApi.changeActionItemStatus(Number(cardId), ACTION_ITEM_STATUS.Closed)
+      const response = await actionItemsApi.updateActionItems(Number(cardId), ' ');
       dispatch(actions.setActionItems(response));
+      setIsError(false);
     } catch (error) {
       dispatch(actions.rejected());
-      alert(`Something went wrong. Error ${error}`);
+      setIsError(true);
+      throw new Error(`Something went wrong. Error ${error}`);
+    }
+  };
+
+  const handleAddConfirmComment = async () => {
+    if (cardId) {
+      try {
+        await cardApi.addComment({
+          cardId: cardId,
+          content: confirmComment,
+        });
+        setIsError(false);
+      } catch (error) {
+        setIsError(true);
+        throw new Error(`Something went wrong. Error ${error}`);
+      }
     }
   };
 
+  const handleSubmit = () => {
+    setConfirmComment("");
+    setModalOpen(false);
+    handleDeleteAssignment();
+    //handleAddConfirmComment();
+  };
+
+  const handleCancel = () => {
+    setConfirmComment("");
+    setModalOpen(false);
+  }
+
   const getColumnName = (name: string) => {
     switch (name) {
       case ACTION_ITEM_STATUS.ToDo:
@@ -142,25 +180,21 @@ const ActionItemsContainer: React.FC = () => {
         ))}
       </DragDropContext>
       <div className={isModalOpen ? "modal-visible" : "modal-hidden"}>
-        <div className="modal-content">
-          <div>
-            <h4>Delete file permanently?</h4>
-          </div>
-          <div>
-            <button className="button delete-button" onClick={handleDeleteItem}>
-              Delete
-            </button>
-            <button
-              type="button"
-              className="button cancel-button"
-              onClick={() => {
-                setModalOpen(false);
-              }}
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
+        <Modal onClose={handleCancel} >
+          <ModalConfirm
+            textModal={TextModal.DeleteAssignment}
+            onConfirm={handleSubmit}
+            onCancel={handleCancel}
+            disabledButton={isShort || isLong}
+          >
+            <textarea
+              className={`${style.confirmComment} ${isError && style.errorConfirm}`}
+              value={confirmComment}
+              onChange={(evt) => setConfirmComment(evt.target.value)}
+            />
+            <span className={style.note}>describe your decision at least 30 characters</span>
+          </ModalConfirm>
+        </Modal>
       </div>
     </div>
   );

app/javascript/components/pages/action-items/style.module.less

@@ -1,3 +1,5 @@
+@import "../../../less/variables.less";
+
 .itemsContainer {
   display: flex;
   justify-content: center;
@@ -13,3 +15,26 @@
   display: block;
   padding-bottom: 20px;
 }
+
+.confirmComment {
+  width: 100%;
+  min-height: 80px;
+  resize: none;
+  border: none;
+  background: @color-white;
+  border-radius: 4px;
+  margin-bottom: 5px;
+  padding: 2px;
+}
+
+.errorConfirm {
+  outline: solid 1px @color-red;
+}
+
+.note {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 15px;
+  font-size: 10px;
+  color: @color-darkest-grey;
+}

app/javascript/components/pages/board/columns/action/action-item/action-item.tsx

@@ -11,6 +11,9 @@ import { CardUser } from "../../card/card-user/card-user";
 import ActionItemAssignee from "../action-item-assigne/action-item-assignee";
 import ActionItemEdit from "../action-item-edit/action-item-edit";
 import ActionItemFooter from "../action-item-footer/action-item-footer";
+import pluralize from 'pluralize';
+
+import style from "../../card/comment/style.module.less";
 
 import styleCard from "../../card/style.module.less";
 
@@ -26,6 +29,15 @@ type PropsType = {
   currentBoardSlug: string;
 }
 
+const comments = [
+  {
+    content: "Хорошая была Танюша",
+  },
+  {
+    content: "Краше не было в селе",
+  },
+];
+
 const ActionItem: React.FC<PropsType> = ({
   id,
   body,
@@ -43,6 +55,7 @@ const ActionItem: React.FC<PropsType> = ({
   const [actionItemAssigneeId, setActionItemAssigneeId] = useState(
     assignee?.id ? `${assignee?.id}` : ''
   );
+  const [isCommentsShown, setIsCommentsShown] = useState(false);
 
   useEffect(() => {
     if (!editMode) {
@@ -66,8 +79,12 @@ const ActionItem: React.FC<PropsType> = ({
 
 
   const handleSaveClick = () => {
-    editModeToggle();
-    actionItemsApi.updateActionItems(id, actionItemBody, actionItemAssigneeId)
+    setEditMode(!editMode);
+    try {
+      actionItemsApi.updateActionItems(id, actionItemAssigneeId, actionItemBody)
+    } catch (error) {
+      throw new Error(`Something went wrong. ${error}`);
+    }
   };
 
   const pickColorChevron = (number = 1) => {
@@ -104,6 +121,10 @@ const ActionItem: React.FC<PropsType> = ({
   );
 
 
+  const handleOpenComments = () => {
+    setIsCommentsShown(!isCommentsShown);
+  };
+
   return (
     <div className={`${styleCard[status]} ${styleCard.card}`}>
       <div className={cardStyle.cardBody}>
@@ -160,6 +181,30 @@ const ActionItem: React.FC<PropsType> = ({
         )}
       </div>
 
+      <div>
+        {isCommentsShown ? (
+          <button
+            className={`${!comments.length ? cardStyle.commentsHide : cardStyle.comments}`}
+            onClick={handleOpenComments}>hide comments</button>
+        ) : (
+          <button
+            className={`${!comments.length ? cardStyle.commentsHide : cardStyle.comments}`}
+            onClick={handleOpenComments}>
+            {comments.length > 0 && `see ${comments.length} ${pluralize('comment', comments.length)}`}
+          </button>
+        )}
+      </div>
+
+      {isCommentsShown && (
+        <div className="comments">
+          <div className="comments__wrapper">
+            {comments.map((comment) => (
+              <div className={style.commentText}>{comment.content}</div>
+            ))}
+          </div>
+        </div>
+      )}
+
       {Boolean(currentUser) && isPrevious && !editMode && (
         <ActionItemFooter
           id={id}

app/javascript/components/pages/board/columns/card/card-body/style.module.less

@@ -93,3 +93,14 @@
   color: #ffffff;
   cursor: pointer;
 }
+
+.comments {
+    border: none;
+    background-color: transparent;
+    color: #8d8e8a;
+    cursor: pointer;
+}
+
+.commentsHide {
+  display: none;
+}

app/javascript/components/shared/modal-confirm/confirm-comment.tsx

@@ -0,0 +1,17 @@
+import React, {useState} from "react";
+
+import style from './modal-confirm.module.less';
+
+const ConfirmComment: React.FC = () => {
+  const [confirmComment, setConfirmComment] = useState("");
+  console.log(confirmComment);
+  return (
+    <textarea
+      className={style.confirmComment}
+      value={confirmComment}
+      onChange={(evt) => setConfirmComment(evt.target.value)}
+    />
+  );
+};
+
+export default ConfirmComment;

app/javascript/components/shared/modal-confirm/modal-confirm.module.less

@@ -0,0 +1,14 @@
+.modalTitle {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+
+.buttons button {
+  margin: 0;
+}

app/javascript/components/shared/modal-confirm/modal-confirm.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import style from "./modal-confirm.module.less";
+
+interface ModalConfirmProps {
+  textModal: string,
+  onConfirm: () => void,
+  onCancel: () => void,
+  disabledButton: boolean
+}
+
+const ModalConfirm: React.FC<ModalConfirmProps> = ({
+  textModal,
+  children,
+  onConfirm,
+  onCancel,
+  disabledButton}) => {
+  return (
+    <div>
+      <div>
+        <h4 className={style.modalTitle}>{textModal}</h4>
+      </div>
+
+      {children}
+
+      <div className={style.buttons}>
+        <button
+          className="button delete-button"
+          onClick={() => onConfirm()}
+          disabled={disabledButton}
+        >
+          Confirm
+        </button>
+        <button
+          type="button"
+          className="button cancel-button"
+          onClick={() => onCancel()}
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default ModalConfirm;