From 4ec0d4b3de601a4553ba69653780def1a8766f44 Mon Sep 17 00:00:00 2001
From: Tania <t.sysueva031291@gmail.com>
Date: Thu, 22 Sep 2022 14:30:47 +1000
Subject: [PATCH 1/2] feat:  add a popup to confirm cancel assigning

---
 app/javascript/api/action-items-api.ts        |  2 +-
 .../action-items/action-items-container.tsx   | 75 +++++++++++++------
 .../pages/action-items/style.module.less      | 25 +++++++
 .../action/action-item/action-item.tsx        | 49 +++++++++++-
 .../columns/card/card-body/style.module.less  | 11 +++
 .../shared/modal-confirm/confirm-comment.tsx  | 17 +++++
 .../modal-confirm/modal-confirm.module.less   | 14 ++++
 .../shared/modal-confirm/modal-confirm.tsx    | 46 ++++++++++++
 .../components/shared/modal/modal.module.less | 60 +++++++++++++++
 .../components/shared/modal/modal.tsx         | 31 ++++++++
 app/javascript/components/style.less          |  4 +
 app/javascript/constants/constants.ts         |  9 +++
 app/javascript/less/variables.less            |  1 +
 package.json                                  |  2 +
 yarn.lock                                     |  5 ++
 15 files changed, 325 insertions(+), 26 deletions(-)
 create mode 100644 app/javascript/components/shared/modal-confirm/confirm-comment.tsx
 create mode 100644 app/javascript/components/shared/modal-confirm/modal-confirm.module.less
 create mode 100644 app/javascript/components/shared/modal-confirm/modal-confirm.tsx
 create mode 100644 app/javascript/components/shared/modal/modal.module.less
 create mode 100644 app/javascript/components/shared/modal/modal.tsx
 create mode 100644 app/javascript/constants/constants.ts

diff --git a/app/javascript/api/action-items-api.ts b/app/javascript/api/action-items-api.ts
index 9bae47f8..503d43bc 100644
--- a/app/javascript/api/action-items-api.ts
+++ b/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 }
diff --git a/app/javascript/components/pages/action-items/action-items-container.tsx b/app/javascript/components/pages/action-items/action-items-container.tsx
index d0e78661..3d2469e2 100644
--- a/app/javascript/components/pages/action-items/action-items-container.tsx
+++ b/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,41 @@ 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 getColumnName = (name: string) => {
     switch (name) {
       case ACTION_ITEM_STATUS.ToDo:
@@ -142,25 +175,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={() => setModalOpen(false)} >
+          <ModalConfirm
+            textModal={TextModal.DeleteAssignment}
+            onConfirm={handleSubmit}
+            onCancel={() => setModalOpen(false)}
+            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>
   );
diff --git a/app/javascript/components/pages/action-items/style.module.less b/app/javascript/components/pages/action-items/style.module.less
index 74a22a71..b57b7127 100644
--- a/app/javascript/components/pages/action-items/style.module.less
+++ b/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;
+}
diff --git a/app/javascript/components/pages/board/columns/action/action-item/action-item.tsx b/app/javascript/components/pages/board/columns/action/action-item/action-item.tsx
index 70ab4fd6..177f5f4d 100644
--- a/app/javascript/components/pages/board/columns/action/action-item/action-item.tsx
+++ b/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}
diff --git a/app/javascript/components/pages/board/columns/card/card-body/style.module.less b/app/javascript/components/pages/board/columns/card/card-body/style.module.less
index 7011a43c..d7881a2a 100644
--- a/app/javascript/components/pages/board/columns/card/card-body/style.module.less
+++ b/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;
+}
diff --git a/app/javascript/components/shared/modal-confirm/confirm-comment.tsx b/app/javascript/components/shared/modal-confirm/confirm-comment.tsx
new file mode 100644
index 00000000..a08087d9
--- /dev/null
+++ b/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;
diff --git a/app/javascript/components/shared/modal-confirm/modal-confirm.module.less b/app/javascript/components/shared/modal-confirm/modal-confirm.module.less
new file mode 100644
index 00000000..1d36b9d5
--- /dev/null
+++ b/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;
+}
diff --git a/app/javascript/components/shared/modal-confirm/modal-confirm.tsx b/app/javascript/components/shared/modal-confirm/modal-confirm.tsx
new file mode 100644
index 00000000..483654d0
--- /dev/null
+++ b/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;
diff --git a/app/javascript/components/shared/modal/modal.module.less b/app/javascript/components/shared/modal/modal.module.less
new file mode 100644
index 00000000..dbc309ae
--- /dev/null
+++ b/app/javascript/components/shared/modal/modal.module.less
@@ -0,0 +1,60 @@
+@secondary-black6: rgba(29, 29, 29, 0.6);
+@white-secondary: #f8f8f7;
+
+.modal {
+  position: fixed;
+  z-index: 99;
+
+  height: 100vh;
+  padding: 30px;
+
+  overflow: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+
+  background-color: @secondary-black6;
+}
+
+.content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  width: 273px;
+  padding: 24px 16px;
+
+  border-radius: 4px;
+  background-color: @white-secondary;
+}
+
+.closeButton {
+  position: absolute;
+  top: 0;
+  right: 8px;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.visuallyHidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
diff --git a/app/javascript/components/shared/modal/modal.tsx b/app/javascript/components/shared/modal/modal.tsx
new file mode 100644
index 00000000..3cff0eeb
--- /dev/null
+++ b/app/javascript/components/shared/modal/modal.tsx
@@ -0,0 +1,31 @@
+import React, {ReactNode} from "react";
+
+import style from "./modal.module.less";
+
+interface ModalProps {
+  className?: string,
+  children?: ReactNode,
+  onClose: () => void,
+}
+
+const Modal: React.FC<ModalProps> = ({className = '', children, onClose}) => {
+  return (
+    <div className={style.modal}>
+      <div className={style.overlay} onClick={() => onClose()}/>
+
+      <div className={style.content}>
+        <span
+          className={style.closeButton}
+          onClick={() => onClose()}
+        >
+          &times;
+          <span className={style.visuallyHidden}>Close modal</span>
+        </span>
+
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default Modal;
diff --git a/app/javascript/components/style.less b/app/javascript/components/style.less
index f091b4b9..996ab639 100644
--- a/app/javascript/components/style.less
+++ b/app/javascript/components/style.less
@@ -132,6 +132,10 @@ a.active {
   background: #e85151;
 }
 
+.delete-button:disabled {
+  opacity: 0.4;
+}
+
 .cancel-button {
   width: 106px;
   background-color: transparent;
diff --git a/app/javascript/constants/constants.ts b/app/javascript/constants/constants.ts
new file mode 100644
index 00000000..43a1c896
--- /dev/null
+++ b/app/javascript/constants/constants.ts
@@ -0,0 +1,9 @@
+export const enum TextModal {
+  DeleteItems = 'Delete file permanently?',
+  DeleteAssignment = 'You are deleting your assignment. Reason why?'
+}
+
+export const enum CommentValues {
+  MinLength = 30,
+  MaxLength = 150,
+}
diff --git a/app/javascript/less/variables.less b/app/javascript/less/variables.less
index 24012b52..083062c1 100644
--- a/app/javascript/less/variables.less
+++ b/app/javascript/less/variables.less
@@ -26,6 +26,7 @@
 @color-light-yellow: #fbf4e9;
 @color-lightest-yellow: #fdfaf4;
 
+@color-red: #ff0000;
 @color-darkest-red: #db2d22;
 @color-dark-red: #ed9690;
 @color-red: #f6cac8;
diff --git a/package.json b/package.json
index 25d4db87..e64c022f 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
     "@svgr/webpack": "^5.5.0",
     "@types/actioncable": "^5.2.7",
     "@types/jest": "^27.4.1",
+    "@types/pluralize": "^0.0.29",
     "@types/react": "^17.0.38",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^17.0.11",
@@ -108,6 +109,7 @@
     "less-loader": "^7.2.0",
     "linkifyjs": "^2.1.9",
     "nanoid": "^3.1.20",
+    "pluralize": "^8.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-apollo": "^3.1.5",
diff --git a/yarn.lock b/yarn.lock
index 609a9bac..439b04dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2021,6 +2021,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/pluralize@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/pluralize/-/pluralize-0.0.29.tgz#6ffa33ed1fc8813c469b859681d09707eb40d03c"
+  integrity sha512-BYOID+l2Aco2nBik+iYS4SZX0Lf20KPILP5RGmM1IgzdwNdTs0eebiFriOPcej1sX9mLnSoiNte5zcFxssgpGA==
+
 "@types/prettier@^2.1.5":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.0.tgz#efcbd41937f9ae7434c714ab698604822d890759"

From 125eaf412d92f9e6b098f75f92f07aec20dc85c6 Mon Sep 17 00:00:00 2001
From: Tania <t.sysueva031291@gmail.com>
Date: Thu, 22 Sep 2022 19:32:58 +1000
Subject: [PATCH 2/2] fix: clear new-action-items after click cancel button

---
 .../pages/action-items/action-items-container.tsx        | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/javascript/components/pages/action-items/action-items-container.tsx b/app/javascript/components/pages/action-items/action-items-container.tsx
index 3d2469e2..800877d5 100644
--- a/app/javascript/components/pages/action-items/action-items-container.tsx
+++ b/app/javascript/components/pages/action-items/action-items-container.tsx
@@ -115,6 +115,11 @@ const ActionItemsContainer: React.FC = () => {
     setModalOpen(false);
     handleDeleteAssignment();
     //handleAddConfirmComment();
+  };
+
+  const handleCancel = () => {
+    setConfirmComment("");
+    setModalOpen(false);
   }
 
   const getColumnName = (name: string) => {
@@ -175,11 +180,11 @@ const ActionItemsContainer: React.FC = () => {
         ))}
       </DragDropContext>
       <div className={isModalOpen ? "modal-visible" : "modal-hidden"}>
-        <Modal onClose={() => setModalOpen(false)} >
+        <Modal onClose={handleCancel} >
           <ModalConfirm
             textModal={TextModal.DeleteAssignment}
             onConfirm={handleSubmit}
-            onCancel={() => setModalOpen(false)}
+            onCancel={handleCancel}
             disabledButton={isShort || isLong}
           >
             <textarea