From d76905e3304e17574b4f17614502bccc20ffc497 Mon Sep 17 00:00:00 2001 From: Chaitanya Narhare Date: Wed, 3 Jul 2024 12:42:58 +0530 Subject: [PATCH] Feature matching event action item table and org action item table --- public/locales/en/translation.json | 12 +- public/locales/fr/translation.json | 14 +- public/locales/hi/translation.json | 14 +- public/locales/sp/translation.json | 14 +- public/locales/zh/translation.json | 14 +- .../ActionItems/ActionItemsContainer.test.tsx | 29 +++ .../ActionItems/ActionItemsContainer.tsx | 61 ++++- .../EventActionItems.module.css | 50 +++- .../EventActionItems.test.tsx | 169 ++++++++++--- .../EventActionItems/EventActionItems.tsx | 227 ++++++++++++------ .../useEventActionColumnConfig.tsx | 105 +++++++- .../ActionItemUpdateModal.tsx | 71 +++--- 12 files changed, 579 insertions(+), 201 deletions(-) diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index a646c2a47e..5c476464da 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -899,8 +899,16 @@ "actionItemCategory": "Action Item Category", "selectActionItemCategory": "Select an action item category", "selectAssignee": "Select an assignee", - "preCompletionNotes": "Pre Completion Notes", - "postCompletionNotes": "Post Completion Notes", + "assignee": "Assignee", + "assigner": "Assigner", + "preCompletionNotes": "Notes", + "postCompletionNotes": "Completion Notes", + "assignmentDate": "Assignment Date", + "status": "Status", + "actionItemActive": "Active", + "actionItemStatus": "Action Item Status", + "actionItemCompleted": "Action Item Completed", + "markCompletion": "Mark Completion", "actionItemDetails": "Action Item Details", "dueDate": "Due Date", "completionDate": "Completion Date", diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json index 1d41e2c54a..8184e8c476 100644 --- a/public/locales/fr/translation.json +++ b/public/locales/fr/translation.json @@ -906,8 +906,8 @@ "actionItemCategory": "Catégorie d'élément d'action", "selectActionItemCategory": "Sélectionnez une catégorie d'élément d'action", "selectAssignee": "Sélectionnez un responsable", - "preCompletionNotes": "Notes préalables à l'achèvement", - "postCompletionNotes": "Notes post-achèvement", + "preCompletionNotes": "Remarques", + "postCompletionNotes": "Notes d'achèvement", "actionItemDetails": "Détails de l'action", "dueDate": "Date d'échéance", "completionDate": "Date d'achèvement", @@ -918,6 +918,14 @@ "successfulCreation": "Élément d'action créé avec succès", "successfulUpdation": "Élément d'action mis à jour avec succès", "notes": "Remarques", - "save": "Sauvegarder" + "save": "Sauvegarder", + "assignee": "Cessionnaire", + "assigner": "Assigner", + "assignmentDate": "Date d'affectation", + "status": "Statut", + "actionItemActive": "Actif", + "actionItemStatus": "Statut de l'action", + "actionItemCompleted": "Élément d'action terminé", + "markCompletion": "Marquer l'achèvement" } } diff --git a/public/locales/hi/translation.json b/public/locales/hi/translation.json index b01838a702..c407f91ba9 100644 --- a/public/locales/hi/translation.json +++ b/public/locales/hi/translation.json @@ -906,8 +906,8 @@ "actionItemCategory": "कार्य आइटम श्रेणी", "selectActionItemCategory": "एक क्रिया आइटम श्रेणी का चयन करें", "selectAssignee": "एक समनुदेशिती का चयन करें", - "preCompletionNotes": "समापन पूर्व नोट्स", - "postCompletionNotes": "समापन के बाद के नोट्स", + "preCompletionNotes": "टिप्पणियाँ", + "postCompletionNotes": "समापन नोट्स", "actionItemDetails": "कार्रवाई मद विवरण", "dueDate": "नियत तारीख", "completionDate": "पूरा करने की तिथि", @@ -918,6 +918,14 @@ "successfulCreation": "कार्रवाई आइटम सफलतापूर्वक बनाया गया", "successfulUpdation": "कार्रवाई आइटम सफलतापूर्वक अपडेट किया गया", "notes": "टिप्पणियाँ", - "save": "बचाना" + "save": "बचाना", + "assignee": "संपत्ति-भागी", + "assigner": "असाइनर", + "assignmentDate": "असाइनमेंट तिथि", + "status": "स्थिति", + "actionItemActive": "सक्रिय", + "actionItemStatus": "कार्रवाई आइटम स्थिति", + "actionItemCompleted": "कार्रवाई आइटम पूर्ण हुआ", + "markCompletion": "पूर्णता को चिह्नित करें" } } diff --git a/public/locales/sp/translation.json b/public/locales/sp/translation.json index 96345b1567..170d5707ad 100644 --- a/public/locales/sp/translation.json +++ b/public/locales/sp/translation.json @@ -1147,8 +1147,8 @@ "actionItemCategory": "Categoría de elemento de acción", "selectActionItemCategory": "Seleccione una categoría de elemento de acción", "selectAssignee": "Seleccione un asignado", - "preCompletionNotes": "Notas previas a la finalización", - "postCompletionNotes": "Publicar notas de finalización", + "preCompletionNotes": "Notas", + "postCompletionNotes": "Notas finales", "actionItemDetails": "Detalles del elemento de acción", "dueDate": "Fecha de vencimiento", "completionDate": "Fecha de finalización", @@ -1161,6 +1161,14 @@ "successfulCreation": "Elemento de acción creado exitosamente", "successfulUpdation": "Elemento de acción actualizado correctamente", "notes": "Notas", - "save": "Guardar" + "save": "Guardar", + "assignee": "Cesionario", + "assigner": "Asignador", + "assignmentDate": "Fecha de asignación", + "status": "Estado", + "actionItemActive": "Activo", + "actionItemStatus": "Estado del elemento de acción", + "actionItemCompleted": "Elemento de acción completado", + "markCompletion": "Marcar finalización" } } diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json index e8ea831a91..0f2c7affee 100644 --- a/public/locales/zh/translation.json +++ b/public/locales/zh/translation.json @@ -906,8 +906,8 @@ "actionItemCategory": "行动项目类别", "selectActionItemCategory": "选择操作项类别", "selectAssignee": "选择受托人", - "preCompletionNotes": "预完成注释", - "postCompletionNotes": "完成后注释", + "preCompletionNotes": "笔记", + "postCompletionNotes": "完成说明", "actionItemDetails": "行动项目详情", "dueDate": "到期日", "completionDate": "完成日期", @@ -918,6 +918,14 @@ "successfulCreation": "操作项创建成功", "successfulUpdation": "操作项已成功更新", "notes": "笔记", - "save": "节省" + "save": "节省", + "assignee": "受让人", + "assigner": "分配者", + "assignmentDate": "任务分配日期", + "status": "地位", + "actionItemActive": "积极的", + "actionItemStatus": "行动项目状态", + "actionItemCompleted": "行动项目已完成", + "markCompletion": "标记完成" } } diff --git a/src/components/ActionItems/ActionItemsContainer.test.tsx b/src/components/ActionItems/ActionItemsContainer.test.tsx index 9e65523fec..20f941750f 100644 --- a/src/components/ActionItems/ActionItemsContainer.test.tsx +++ b/src/components/ActionItems/ActionItemsContainer.test.tsx @@ -86,6 +86,35 @@ describe('Testing Action Item Categories Component', () => { screen.queryByText(translations.noActionItems), ).not.toBeInTheDocument(); }); + + expect(screen.getByText('#')).toBeInTheDocument(); + expect(screen.getByText(translations.assignee)).toBeInTheDocument(); + expect( + screen.getByText(translations.actionItemCategory), + ).toBeInTheDocument(); + expect( + screen.getByText(translations.preCompletionNotes), + ).toBeInTheDocument(); + expect( + screen.getByText(translations.postCompletionNotes), + ).toBeInTheDocument(); + + await wait(); + expect(screen.getAllByText('Harve Lance')[0]).toBeInTheDocument(); + + const asigneeAnchorElement = screen.getAllByText('Harve Lance')[0]; + expect(asigneeAnchorElement.tagName).toBe('A'); + expect(asigneeAnchorElement).toHaveAttribute('href', '/member/event1'); + + expect(screen.getAllByText('ActionItemCategory 1')[0]).toBeInTheDocument(); + const updateButtons = screen.getAllByTestId('editActionItemModalBtn'); + const previewButtons = screen.getAllByTestId('previewActionItemModalBtn'); + const updateStatusButtons = screen.getAllByTestId( + 'actionItemStatusChangeCheckbox', + ); + expect(updateButtons[0]).toBeInTheDocument(); + expect(previewButtons[0]).toBeInTheDocument(); + expect(updateStatusButtons[0]).toBeInTheDocument(); }); test('component loads correctly with no action items', async () => { diff --git a/src/components/ActionItems/ActionItemsContainer.tsx b/src/components/ActionItems/ActionItemsContainer.tsx index 142c8abc3c..42e57f3822 100644 --- a/src/components/ActionItems/ActionItemsContainer.tsx +++ b/src/components/ActionItems/ActionItemsContainer.tsx @@ -27,6 +27,7 @@ import styles from './ActionItemsContainer.module.css'; import ActionItemUpdateModal from '../../screens/OrganizationActionItems/ActionItemUpdateModal'; import ActionItemPreviewModal from '../../screens/OrganizationActionItems/ActionItemPreviewModal'; import ActionItemDeleteModal from '../../screens/OrganizationActionItems/ActionItemDeleteModal'; +import { Link } from 'react-router-dom'; function actionItemsContainer({ actionItemsConnection, @@ -195,17 +196,26 @@ function actionItemsContainer({ className={`mx-0 border border-light-subtle py-3 ${actionItemsConnection === 'Organization' ? 'rounded-top-4' : 'rounded-top-2'}`} data-testid="actionItemsHeader" > + +
{'#'}
+
{t('assignee')}
{t('preCompletionNotes')}
{t('postCompletionNotes')}
- +
{t('options')}
@@ -238,25 +253,40 @@ function actionItemsContainer({ {actionItemsData?.map((actionItem, index) => (
+ + {index + 1} + - {`${actionItem.assignee.firstName} ${actionItem.assignee.lastName}`} + + {`${actionItem.assignee.firstName} ${actionItem.assignee.lastName}`} + {actionItem.actionItemCategory.name} @@ -281,9 +311,9 @@ function actionItemsContainer({
{actionItem.isCompleted ? ( @@ -312,7 +342,12 @@ function actionItemsContainer({ )}
- +
{ await wait(); expect(screen.getByText('#')).toBeInTheDocument(); - expect(screen.getByText('Assignee')).toBeInTheDocument(); - expect(screen.getByText('Action Item Category')).toBeInTheDocument(); - expect(screen.getByText('Notes')).toBeInTheDocument(); - expect(screen.getByText('Completion Notes')).toBeInTheDocument(); + expect(screen.getByText(translations.assignee)).toBeInTheDocument(); + expect( + screen.getByText(translations.actionItemCategory), + ).toBeInTheDocument(); + expect( + screen.getByText(translations.preCompletionNotes), + ).toBeInTheDocument(); + expect( + screen.getByText(translations.postCompletionNotes), + ).toBeInTheDocument(); await wait(); + const asigneeAnchorElement = screen.getByText('Burton Sanders'); + expect(asigneeAnchorElement.tagName).toBe('A'); + expect(asigneeAnchorElement).toHaveAttribute('href', '/member/123'); + expect(screen.getByText('Burton Sanders')).toBeInTheDocument(); - expect(screen.getByText('Pre Completion Note')).toBeInTheDocument(); - const updateButtons = screen.getAllByText(/Manage Actions/i); + const updateButtons = screen.getAllByTestId('editActionItemModalBtn'); + const previewButtons = screen.getAllByTestId('previewActionItemModalBtn'); + const updateStatusButtons = screen.getAllByTestId( + 'actionItemStatusChangeCheckbox', + ); expect(updateButtons[0]).toBeInTheDocument(); + expect(previewButtons[0]).toBeInTheDocument(); + expect(updateStatusButtons[0]).toBeInTheDocument(); + }); + + test('opens and closes the update and delete modals through the preview modal', async () => { + window.location.assign('/event/111/123'); + render( + + + + + + {} + + + + + , + ); + + await wait(); + + expect( + screen.getAllByTestId('previewActionItemModalBtn')[0], + ).toBeInTheDocument(); + userEvent.click(screen.getAllByTestId('previewActionItemModalBtn')[0]); + + await waitFor(() => { + return expect( + screen.findByTestId('previewActionItemModalCloseBtn'), + ).resolves.toBeInTheDocument(); + }); + + await waitFor(() => { + expect( + screen.getByTestId('deleteActionItemPreviewModalBtn'), + ).toBeInTheDocument(); + }); + userEvent.click(screen.getByTestId('deleteActionItemPreviewModalBtn')); + + await waitFor(() => { + return expect( + screen.findByTestId('actionItemDeleteModalCloseBtn'), + ).resolves.toBeInTheDocument(); + }); + userEvent.click(screen.getByTestId('actionItemDeleteModalCloseBtn')); + + await waitForElementToBeRemoved(() => + screen.queryByTestId('actionItemDeleteModalCloseBtn'), + ); + + expect( + screen.getByTestId('editActionItemPreviewModalBtn'), + ).toBeInTheDocument(); + userEvent.click(screen.getByTestId('editActionItemPreviewModalBtn')); + + await waitFor(() => { + return expect( + screen.findByTestId('updateActionItemModalCloseBtn'), + ).resolves.toBeInTheDocument(); + }); + userEvent.click(screen.getByTestId('updateActionItemModalCloseBtn')); + + await waitForElementToBeRemoved(() => + screen.queryByTestId('updateActionItemModalCloseBtn'), + ); }); test('Testing update action item modal', async () => { @@ -434,7 +520,7 @@ describe('Event Action Items Page', () => { , ); await wait(); - const updateButtons = screen.getAllByText(/Manage Actions/i); + const updateButtons = screen.getAllByTestId('editActionItemModalBtn'); userEvent.click(updateButtons[0]); expect(screen.getByText('Action Item Details')).toBeInTheDocument(); @@ -450,13 +536,6 @@ describe('Event Action Items Page', () => { 'task to be done with high priority', ); - fireEvent.change(screen.getByPlaceholderText('Post Completion Notes'), { - target: { value: 'Done' }, - }); - expect(screen.getByPlaceholderText('Post Completion Notes')).toHaveValue( - 'Done', - ); - fireEvent.change(screen.getByLabelText('Due Date'), { target: { value: '04/05/2024' }, }); @@ -471,7 +550,7 @@ describe('Event Action Items Page', () => { await wait(); - expect(toast.success).toBeCalledWith(translations.successfulUpdation); + expect(toast.success).toBeCalled(); }); test('Testing delete action item modal and delete the record', async () => { window.location.assign('/event/111/123'); @@ -489,13 +568,17 @@ describe('Event Action Items Page', () => { , ); await wait(); - const updateButtons = screen.getAllByText(/Manage Actions/i); - userEvent.click(updateButtons[0]); - - expect(screen.getByText('Action Item Details')).toBeInTheDocument(); + expect( + screen.getAllByTestId('previewActionItemModalBtn')[0], + ).toBeInTheDocument(); + userEvent.click(screen.getAllByTestId('previewActionItemModalBtn')[0]); - expect(screen.getByTestId('deleteActionItemBtn')).toBeInTheDocument(); - userEvent.click(screen.getByTestId('deleteActionItemBtn')); + await waitFor(() => { + expect( + screen.getByTestId('deleteActionItemPreviewModalBtn'), + ).toBeInTheDocument(); + }); + userEvent.click(screen.getByTestId('deleteActionItemPreviewModalBtn')); await wait(); expect( screen.getByText('Do you want to remove this action item?'), @@ -522,20 +605,27 @@ describe('Event Action Items Page', () => { , ); await wait(); - const updateButtons = screen.getAllByText(/Manage Actions/i); - userEvent.click(updateButtons[0]); - - expect(screen.getByText('Action Item Details')).toBeInTheDocument(); + expect( + screen.getAllByTestId('previewActionItemModalBtn')[0], + ).toBeInTheDocument(); + userEvent.click(screen.getAllByTestId('previewActionItemModalBtn')[0]); - expect(screen.getByTestId('deleteActionItemBtn')).toBeInTheDocument(); - userEvent.click(screen.getByTestId('deleteActionItemBtn')); + await waitFor(() => { + expect( + screen.getByTestId('deleteActionItemPreviewModalBtn'), + ).toBeInTheDocument(); + }); + userEvent.click(screen.getByTestId('deleteActionItemPreviewModalBtn')); await wait(); expect( screen.getByText('Do you want to remove this action item?'), ).toBeInTheDocument(); userEvent.click(screen.getByText('No')); await wait(); - expect(screen.getByText('Teresa Bradley')).toBeInTheDocument(); + expect(screen.getByRole('dialog')).toBeInTheDocument(); + expect( + screen.getByText(translations.actionItemDetails), + ).toBeInTheDocument(); }); test('Raises an error when incorrect information is filled while creation', async () => { @@ -593,17 +683,17 @@ describe('Event Action Items Page', () => { , ); await wait(); - const updateButtons = screen.getAllByText(/Manage Actions/i); + const updateButtons = screen.getAllByTestId('editActionItemModalBtn'); userEvent.click(updateButtons[0]); - expect(screen.getByText('Action Item Details')).toBeInTheDocument(); + expect( + screen.getByText(translations.actionItemDetails), + ).toBeInTheDocument(); userEvent.click(screen.getByTestId('updateActionItemFormSubmitBtn')); await wait(); - expect(toast.success).toBeCalledWith(translations.successfulUpdation); - expect(toast.error).toBeCalled(); }); @@ -642,10 +732,8 @@ describe('Event Action Items Page', () => { , ); await wait(); - const updateButton = screen.getByRole('button', { - name: /manage actions/i, - }); - userEvent.click(updateButton); + const updateButtons = screen.getAllByTestId('editActionItemModalBtn'); + userEvent.click(updateButtons[0]); expect(screen.getByText('Action Item Details')).toBeInTheDocument(); const assigneeDropdown = screen.getByTestId( @@ -657,8 +745,9 @@ describe('Event Action Items Page', () => { expect(screen.getByPlaceholderText('Notes')).toHaveValue( 'Pre Completion Note', ); - expect(screen.getByPlaceholderText('Post Completion Notes')).toHaveValue( - 'Post Completion Note', - ); + const editActionItem = screen.getByRole('button', { + name: translations.editActionItem, + }); + expect(editActionItem).toBeInTheDocument(); }); }); diff --git a/src/components/EventManagement/EventActionItems/EventActionItems.tsx b/src/components/EventManagement/EventActionItems/EventActionItems.tsx index 648927f552..0675f933a5 100644 --- a/src/components/EventManagement/EventActionItems/EventActionItems.tsx +++ b/src/components/EventManagement/EventActionItems/EventActionItems.tsx @@ -5,11 +5,10 @@ import type { ChangeEvent } from 'react'; import React, { useEffect, useState } from 'react'; import { Button, Form } from 'react-bootstrap'; import { useTranslation } from 'react-i18next'; -import { Link } from 'react-router-dom'; import { toast } from 'react-toastify'; import styles from './EventActionItems.module.css'; import { DataGrid } from '@mui/x-data-grid'; -import type { GridColDef, GridCellParams } from '@mui/x-data-grid'; +import type { GridCellParams } from '@mui/x-data-grid'; import { Stack } from '@mui/material'; import Modal from 'react-bootstrap/Modal'; import { @@ -29,6 +28,8 @@ import { } from 'GraphQl/Queries/Queries'; import { ACTION_ITEM_LIST_BY_EVENTS } from 'GraphQl/Queries/ActionItemQueries'; import { useEventActionColumnConfig } from './useEventActionColumnConfig'; +import ActionItemPreviewModal from 'screens/OrganizationActionItems/ActionItemPreviewModal'; +import ActionItemDeleteModal from 'screens/OrganizationActionItems/ActionItemDeleteModal'; function eventActionItems(props: { eventId: string }): JSX.Element { const { eventId } = props; @@ -37,6 +38,11 @@ function eventActionItems(props: { eventId: string }): JSX.Element { }); const { t: tCommon } = useTranslation('common'); + const [actionItemPreviewModalIsOpen, setActionItemPreviewModalIsOpen] = + useState(false); + const [actionItemStatusModal, setActionItemStatusModal] = useState(false); + const [isActionItemCompleted, setIsActionItemCompleted] = useState(false); + const [assignmentDate, setAssignmentDate] = useState(new Date()); const [actionItemCreateModalIsOpen, setActionItemCreateModalIsOpen] = useState(false); const [actionItemUpdateModalIsOpen, setActionItemUpdateModalIsOpen] = @@ -86,6 +92,10 @@ function eventActionItems(props: { eventId: string }): JSX.Element { postCompletionNotes: actionItem.postCompletionNotes, isCompleted: actionItem.isCompleted, })); + setActionItemId(actionItem._id); + setDueDate(actionItem.dueDate); + setAssignmentDate(actionItem.assignmentDate); + setCompletionDate(actionItem.completionDate); }; const { data: actionItemCategoriesData, @@ -177,6 +187,7 @@ function eventActionItems(props: { eventId: string }): JSX.Element { }); actionItemsRefetch(); hideUpdateModal(); + hideActionItemStatusModal(); toast.success(t('successfulUpdation')); } catch (error: unknown) { if (error instanceof Error) { @@ -186,25 +197,58 @@ function eventActionItems(props: { eventId: string }): JSX.Element { }; const [removeActionItem] = useMutation(DELETE_ACTION_ITEM_MUTATION); const deleteActionItemHandler = async (): Promise => { - await removeActionItem({ - variables: { - actionItemId, - }, - }); - actionItemsRefetch(); - toggleDeleteModal(); - hideUpdateModal(); - toast.success(t('successfulDeletion')); + try { + await removeActionItem({ + variables: { + actionItemId, + }, + }); + actionItemsRefetch(); + toggleDeleteModal(); + hidePreviewModal(); + toast.success(t('successfulDeletion')); + } catch (error: unknown) { + if (error instanceof Error) { + toast.error(error.message); + console.log(error.message); + } + } + }; + + const handleActionItemStatusChange = ( + actionItem: InterfaceActionItemInfo, + ): void => { + actionItem = { ...actionItem, isCompleted: !actionItem.isCompleted }; + setIsActionItemCompleted(!actionItem.isCompleted); + setActionItemState(actionItem); + setActionItemStatusModal(true); }; - const manageActionsHandler = (params: GridCellParams): void => { + + const showPreviewModal = (actionItem: InterfaceActionItemInfo): void => { + setActionItemState(actionItem); + setActionItemPreviewModalIsOpen(true); + }; + + const handleEditClick = (actionItem: InterfaceActionItemInfo): void => { + setActionItemId(actionItem._id); + setActionItemState(actionItem); showUpdateModal(); - setActionItemId(params.row._id); - setActionItemState(params.row); + }; + + const hidePreviewModal = (): void => { + setActionItemPreviewModalIsOpen(false); + }; + + const hideActionItemStatusModal = (): void => { + setActionItemStatusModal(false); + setActionItemUpdateModalIsOpen(false); }; const { columns } = useEventActionColumnConfig({ eventId, - manageActionsHandler, + handleActionItemStatusChange, + showPreviewModal, + handleEditClick, }); return ( @@ -216,8 +260,10 @@ function eventActionItems(props: { eventId: string }): JSX.Element { data-testid="createEventActionItemBtn" onClick={showCreateModal} > - {t('createActionItem')} + + {tCommon('create')} +
{/* create action item modal */} - - { - setFormState({ - ...formState, - postCompletionNotes: e.target.value, - }); - }} - className="mb-2" - /> -

-

-
+
- -
- {/* delete modal */} + + {/* preview modal */} + + + {/* Delete Modal */} + + + {/* action item status change modal */} - - - {t('deleteActionItem')} - - - {t('deleteActionItemMsg')} - - + +

{t('actionItemStatus')}

- + + +
+ + {isActionItemCompleted + ? t('preCompletionNotes') + : t('postCompletionNotes')} + + { + if (isActionItemCompleted) { + setFormState({ + ...formState, + preCompletionNotes: e.target.value, + }); + } else { + setFormState({ + ...formState, + postCompletionNotes: e.target.value, + }); + } + }} + /> + + +
{actionItemsData && (
@@ -502,10 +571,14 @@ function eventActionItems(props: { eventId: string }): JSX.Element { '& .MuiDataGrid-row.Mui-hovered': { backgroundColor: 'transparent', }, + '& .MuiDataGrid-columnHeaderTitle': { + fontWeight: 700, + }, }} getRowClassName={() => `${styles.rowBackground}`} autoHeight - rowHeight={70} + rowHeight={50} + columnHeaderHeight={40} rows={actionItemsData?.actionItemsByEvent?.map( (item: object, index: number) => ({ ...item, diff --git a/src/components/EventManagement/EventActionItems/useEventActionColumnConfig.tsx b/src/components/EventManagement/EventActionItems/useEventActionColumnConfig.tsx index 043f28f5a6..0db74323f6 100644 --- a/src/components/EventManagement/EventActionItems/useEventActionColumnConfig.tsx +++ b/src/components/EventManagement/EventActionItems/useEventActionColumnConfig.tsx @@ -1,21 +1,45 @@ import React from 'react'; import type { GridCellParams, GridColDef } from '@mui/x-data-grid'; import { Link } from 'react-router-dom'; -import { Button } from 'react-bootstrap'; +import { Button, OverlayTrigger, Popover } from 'react-bootstrap'; import styles from './EventActionItems.module.css'; +import type { InterfaceActionItemInfo } from 'utils/interfaces'; +import { useTranslation } from 'react-i18next'; export type Props = { eventId: string; - manageActionsHandler: (params: GridCellParams) => void; + handleActionItemStatusChange: (actionItem: InterfaceActionItemInfo) => void; + showPreviewModal: (actionItem: InterfaceActionItemInfo) => void; + handleEditClick: (actionItem: InterfaceActionItemInfo) => void; }; type ColumnConfig = { columns: GridColDef[]; }; + +const popover = ( + actionItemId: string, + actionItemNotes: string, +): JSX.Element => { + return ( + + {actionItemNotes} + + ); +}; + export const useEventActionColumnConfig = ({ eventId, - manageActionsHandler, + handleActionItemStatusChange, + showPreviewModal, + handleEditClick, }: Props): ColumnConfig => { + const { t } = useTranslation('translation', { + keyPrefix: 'eventActionItems', + }); const columns: GridColDef[] = [ { field: 'serialNo', @@ -76,7 +100,20 @@ export const useEventActionColumnConfig = ({ flex: 2, sortable: false, renderCell: (params: GridCellParams) => { - return params.row.preCompletionNotes; + const actionItem = params.row; + return ( + + + {actionItem.preCompletionNotes.length > 25 + ? `${actionItem.preCompletionNotes.substring(0, 25)}...` + : actionItem.preCompletionNotes} + + + ); }, }, { @@ -89,7 +126,27 @@ export const useEventActionColumnConfig = ({ flex: 2, sortable: false, renderCell: (params: GridCellParams) => { - return params.row.postCompletionNotes; + const actionItem = params.row; + return actionItem.isCompleted ? ( + + + {actionItem.postCompletionNotes?.length > 25 + ? `${actionItem.postCompletionNotes.substring(0, 25)}...` + : actionItem.postCompletionNotes} + + + ) : ( + + {t('actionItemActive')} + + ); }, }, { @@ -103,14 +160,36 @@ export const useEventActionColumnConfig = ({ sortable: false, renderCell: (params: GridCellParams) => { return ( - +
+ handleActionItemStatusChange(params.row)} + /> + + +
); }, }, diff --git a/src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx b/src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx index 901101e58b..cfb7d4f505 100644 --- a/src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx +++ b/src/screens/OrganizationActionItems/ActionItemUpdateModal.tsx @@ -75,16 +75,18 @@ const ActionItemUpdateModal: React.FC = ({ - {membersData?.map((member, index) => { - const currMemberName = `${member.firstName} ${member.lastName}`; - if (currMemberName !== formState.assignee) { - return ( - - ); - } - })} + {membersData?.map( + (member: InterfaceMemberInfo, index: number) => { + const currMemberName = `${member.firstName} ${member.lastName}`; + if (currMemberName !== formState.assignee) { + return ( + + ); + } + }, + )} @@ -107,36 +109,33 @@ const ActionItemUpdateModal: React.FC = ({ />
-
- { - /* istanbul ignore next */ - if (date) { - setDueDate(date?.toDate()); - } + { + /* istanbul ignore next */ + if (date) { + setDueDate(date?.toDate()); } } - /> -
-
- { - /* istanbul ignore next */ - if (date) { - setCompletionDate(date?.toDate()); - } + } + /> +   + { + /* istanbul ignore next */ + if (date) { + setCompletionDate(date?.toDate()); } } - /> -
+ } + />