Skip to content

Commit

Permalink
add details modal
Browse files Browse the repository at this point in the history
  • Loading branch information
meetulr committed Feb 8, 2024
1 parent 96359f8 commit 1911183
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 36 deletions.
4 changes: 4 additions & 0 deletions public/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -290,14 +290,18 @@
"title": "Action Items",
"actionItemCategory": "Action Item Category",
"actionItemDetails": "Action Item Details",
"assignee": "Assignee",
"assigner": "Assigner",
"createActionItem": "Create",
"close": "Close",
"searchByName": "Search By Name",
"preCompletionNotes": "Pre Completion Notes",
"postCompletionNotes": "Post Completion Notes",
"assignmentDate": "Assignment Date",
"dueDate": "Due Date",
"completionDate": "Completion Date",
"isCompleted": "Completed",
"status": "Status",
"latest": "Latest",
"earliest": "Earliest",
"editActionItem": "Edit Action Item",
Expand Down
35 changes: 2 additions & 33 deletions src/GraphQl/Mutations/ActionItemMutations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import gql from 'graphql-tag';
/**
* GraphQL mutation to create an action item.
*
* @param assigneeId - User to whom the ActionItem is assigned.
* @param actionItemCategoryId - ActionItemCategory to which the ActionItem is related.
* @param assigneeId - User to whom the ActionItem is assigned.
* @param preCompletionNotes - Notes prior to completion.
* @param dueDate - Due date.
* @param eventId - Event to which the ActionItem is related.
Expand All @@ -28,25 +28,15 @@ export const CREATE_ACTION_ITEM_MUTATION = gql`
}
) {
_id
creator {
_id
email
}
assignmentDate
dueDate
event {
title
}
isCompleted
}
}
`;

/**
* GraphQL mutation to update an action item.
*
* @param assigneeId - User to whom the ActionItem is assigned.
* @param id - Id of the ActionItem to be updated.
* @param assigneeId - User to whom the ActionItem is assigned.
* @param preCompletionNotes - Notes prior to completion.
* @param postCompletionNotes - Notes on completion.
* @param dueDate - Due date.
Expand Down Expand Up @@ -76,17 +66,6 @@ export const UPDATE_ACTION_ITEM_MUTATION = gql`
}
) {
_id
creator {
_id
email
}
assignmentDate
dueDate
completionDate
event {
title
}
isCompleted
}
}
`;
Expand All @@ -101,16 +80,6 @@ export const DELETE_ACTION_ITEM_MUTATION = gql`
mutation RemoveActionItem($actionItemId: ID!) {
removeActionItem(id: $actionItemId) {
_id
creator {
_id
email
}
assignmentDate
dueDate
event {
title
}
isCompleted
}
}
`;
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,22 @@
width: 100%;
}

.iconContainer {
display: flex;
justify-content: flex-end;
}
.icon {
margin: 1px;
}

.preview {
display: flex;
flex-direction: row;
font-weight: 900;
font-size: 16px;
color: rgb(80, 80, 80);
}

.titlemodal {
color: #707070;
font-weight: 600;
Expand All @@ -61,3 +77,10 @@
border-bottom: 3px solid #31bb6b;
width: 65%;
}

.view {
margin-left: 2%;
font-weight: 600;
font-size: 16px;
color: #707070;
}
111 changes: 108 additions & 3 deletions src/components/ActionItemsContainer/ActionItemsContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,27 +30,53 @@ function actionItemsContainer({
keyPrefix: 'organizationActionItems',
});

const [actionItemPreviewModalIsOpen, setActionItemPreviewModalIsOpen] =
useState(false);
const [actionItemUpdateModalIsOpen, setActionItemUpdateModalIsOpen] =
useState(false);
const [actionItemDeleteModalIsOpen, setActionItemDeleteModalIsOpen] =
useState(false);

const [assignmentDate, setAssignmentDate] = useState<Date | null>(new Date());
const [dueDate, setDueDate] = useState<Date | null>(new Date());
const [completionDate, setCompletionDate] = useState<Date | null>();
const [actionItemId, setActionItemId] = useState('');

const [formState, setFormState] = useState({
assignee: '',
assigner: '',
assigneeId: '',
assignmentDate: '',
preCompletionNotes: '',
postCompletionNotes: '',
isCompleted: false,
});

const showPreviewModal = (actionItem: InterfaceActionItemInfo): void => {
setFormState({
...formState,
assignee: `${actionItem.assignee.firstName} ${actionItem.assignee.lastName}`,
assigner: `${actionItem.assigner.firstName} ${actionItem.assigner.lastName}`,
assigneeId: actionItem.assignee._id,
preCompletionNotes: actionItem.preCompletionNotes,
postCompletionNotes: actionItem.postCompletionNotes,
isCompleted: actionItem.isCompleted,
});
setActionItemId(actionItem._id);
setAssignmentDate(actionItem.assignmentDate);
setDueDate(actionItem.dueDate);
setCompletionDate(actionItem.completionDate);
setActionItemPreviewModalIsOpen(true);
};

const showUpdateModal = (): void => {
setActionItemUpdateModalIsOpen(!actionItemUpdateModalIsOpen);
};

const hidePreviewModal = (): void => {
setActionItemPreviewModalIsOpen(false);
};

const hideUpdateModal = (): void => {
setActionItemId('');
setActionItemUpdateModalIsOpen(!actionItemUpdateModalIsOpen);
Expand Down Expand Up @@ -179,7 +205,7 @@ function actionItemsContainer({
<Button
className="btn btn-sm me-2"
variant="outline-secondary"
// onClick={showDetailsModal}
onClick={() => showPreviewModal(actionItem)}
>
Details
</Button>
Expand Down Expand Up @@ -235,7 +261,6 @@ function actionItemsContainer({
<Form.Group className="mb-3">
<Form.Label>Assignee</Form.Label>
<Form.Select
required
defaultValue=""
onChange={(e) =>
setFormState({ ...formState, assigneeId: e.target.value })
Expand Down Expand Up @@ -307,7 +332,7 @@ function actionItemsContainer({
<div>
<DatePicker
label={t('completionDate')}
className={`${styles.datebox} ms-auto`}
className={styles.datebox}
value={dayjs(completionDate)}
onChange={(date: Dayjs | null): void => {
if (date) {
Expand Down Expand Up @@ -384,6 +409,86 @@ function actionItemsContainer({
</Button>
</Modal.Footer>
</Modal>

{/* preview modal */}
<Modal show={actionItemPreviewModalIsOpen}>
<Modal.Header>
<p className={styles.titlemodal}>{t('actionItemDetails')}</p>
<Button
onClick={hidePreviewModal}
data-testid="previewActionItemModalCloseBtn"
>
<i className="fa fa-times"></i>
</Button>
</Modal.Header>
<Modal.Body>
<Form>
<div>
<p className={styles.preview}>
{t('assignee')}:{' '}
<span className={styles.view}>{formState.assignee}</span>
</p>
<p className={styles.preview}>
{t('assigner')}:{' '}
<span className={styles.view}>{formState.assigner}</span>
</p>
<p className={styles.preview}>
{t('preCompletionNotes')}:
<span className={styles.view}>
{formState.preCompletionNotes}
</span>
</p>
<p className={styles.preview}>
{t('postCompletionNotes')}:
<span className={styles.view}>
{formState.postCompletionNotes}
</span>
</p>
<p className={styles.preview}>
{t('assignmentDate')}:{' '}
<span className={styles.view}>{assignmentDate}</span>
</p>
<p className={styles.preview}>
{t('dueDate')}: <span className={styles.view}>{dueDate}</span>
</p>
<p className={styles.preview}>
{t('completionDate')}:{' '}
<span className={styles.view}>{completionDate}</span>
</p>
<p className={styles.preview}>
{t('status')}:{' '}
<span className={styles.view}>
{formState.isCompleted ? 'Completed' : 'In Progress'}
</span>
</p>
</div>
<div className={styles.iconContainer}>
<Button
size="sm"
data-testid="editActionItemModalBtn"
className={styles.icon}
onClick={() => {
hidePreviewModal();
showUpdateModal();
}}
>
{' '}
<i className="fas fa-edit"></i>
</Button>
<Button
size="sm"
data-testid="deleteActionItemModalBtn"
className={`${styles.icon} ms-2`}
onClick={toggleDeleteModal}
variant="danger"
>
{' '}
<i className="fa fa-trash"></i>
</Button>
</div>
</Form>
</Modal.Body>
</Modal>
</>
);
}
Expand Down

0 comments on commit 1911183

Please sign in to comment.