Skip to content

Commit

Permalink
feat: add a popup to confirm cancel assigning
Browse files Browse the repository at this point in the history
  • Loading branch information
Tata-Sysueva committed Sep 22, 2022
1 parent 13eff6d commit 4303083
Show file tree
Hide file tree
Showing 15 changed files with 327 additions and 28 deletions.
2 changes: 1 addition & 1 deletion app/javascript/api/action-items-api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,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 }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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,
Expand All @@ -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;
Expand All @@ -72,18 +82,41 @@ const ActionItemsContainer: React.FC = () => {
changeStatus();
};

const handleDeleteItem = () => {
setModalOpen(false);
const handleDeleteAssignment = async () => {
dispatch(actions.pending());
try {
actionItemsApi
.changeActionItemStatus(Number(cardId), ACTION_ITEM_STATUS.Closed)
.then((response) => dispatch(actions.setActionItems(response)));
} catch {
const response = await actionItemsApi.updateActionItems(Number(cardId), ' ');
dispatch(actions.setActionItems(response));
setIsError(false);
} catch (error) {
dispatch(actions.rejected());
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:
Expand Down Expand Up @@ -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>
);
Expand Down
25 changes: 25 additions & 0 deletions app/javascript/components/pages/action-items/style.module.less
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import "../../../less/variables.less";

.itemsContainer {
display: flex;
justify-content: center;
Expand All @@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,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";

type PropsType = {
id: number
Expand All @@ -25,6 +28,15 @@ type PropsType = {
currentBoardSlug: string;
}

const comments = [
{
content: "Хорошая была Танюша",
},
{
content: "Краше не было в селе",
},
];

const ActionItem: React.FC<PropsType> = ({
id,
body,
Expand All @@ -42,6 +54,7 @@ const ActionItem: React.FC<PropsType> = ({
const [actionItemAssigneeId, setActionItemAssigneeId] = useState(
assignee?.id ? `${assignee?.id}` : ''
);
const [isCommentsShown, setIsCommentsShown] = useState(false);

useEffect(() => {
if (!editMode) {
Expand All @@ -65,8 +78,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) => {
Expand Down Expand Up @@ -103,6 +120,10 @@ const ActionItem: React.FC<PropsType> = ({
);


const handleOpenComments = () => {
setIsCommentsShown(!isCommentsShown);
};

return (
<div className={`${styleCard[status]} ${styleCard.card}`}>
<div className={cardStyle.cardBody}>
Expand Down Expand Up @@ -159,6 +180,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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -92,3 +92,14 @@
color: #ffffff;
cursor: pointer;
}

.comments {
border: none;
background-color: transparent;
color: #8d8e8a;
cursor: pointer;
}

.commentsHide {
display: none;
}
17 changes: 17 additions & 0 deletions app/javascript/components/shared/modal-confirm/confirm-comment.tsx
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.modalTitle {
margin-bottom: 20px;
text-align: center;
}

.buttons {
display: flex;
justify-content: center;
gap: 20px;
}

.buttons button {
margin: 0;
}
46 changes: 46 additions & 0 deletions app/javascript/components/shared/modal-confirm/modal-confirm.tsx
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 4303083

Please sign in to comment.