Event and Organization Action item layouts need to be the same

public/locales/en/translation.json

@@ -266,11 +266,11 @@
     "latest": "Latest",
     "noActionItems": "No Action Items",
     "options": "Options",
-    "preCompletionNotes": "Pre Completion Notes",
+    "preCompletionNotes": "Notes",
     "actionItemActive": "Active",
     "markCompletion": "Mark Completion",
     "actionItemStatus": "Action Item Status",
-    "postCompletionNotes": "Post Completion Notes",
+    "postCompletionNotes": "Completion Notes",
     "selectActionItemCategory": "Select an action item category",
     "selectAssignee": "Select an assignee",
     "status": "Status",
@@ -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",

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"
   }
 }

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": "पूर्णता को चिह्नित करें"
   }
 }

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"
   }
 }

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": "标记完成"
   }
 }

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 () => {
@@ -667,4 +696,34 @@ describe('Testing Action Item Categories Component', () => {
       );
     });
   });
+
+  test('Action Items loads with correct headers', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <ActionItemsContainer {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const actionItemHeaders = screen.getByTestId('actionItemsHeader');
+    expect(actionItemHeaders).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();
+    expect(screen.getByText(translations.options)).toBeInTheDocument();
+  });
 });

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,
@@ -193,39 +194,54 @@ function actionItemsContainer({
         >
           <Row
             className={`mx-0 border border-light-subtle py-3 ${actionItemsConnection === 'Organization' ? 'rounded-top-4' : 'rounded-top-2'}`}
+            data-testid="actionItemsHeader"
           >
+            <Col
+              xs={7}
+              sm={4}
+              md={3}
+              lg={1}
+              className="d-flex align-items-center justify-content-center ps-3 fw-bold"
+            >
+              <div className="ms-2">{'#'}</div>
+            </Col>
             <Col
               xs={7}
               sm={4}
               md={3}
               lg={2}
-              className="align-self-center ps-3 fw-bold"
+              className="d-flex align-items-center justify-content-center ps-3 fw-bold"
             >
               <div className="ms-2">{t('assignee')}</div>
             </Col>
             <Col
-              className="align-self-center fw-bold d-none d-sm-block"
+              className="d-flex align-items-center justify-content-center fw-bold d-none d-sm-flex"
               sm={5}
               md={6}
               lg={2}
             >
               {t('actionItemCategory')}
             </Col>
             <Col
-              className="d-none d-lg-block fw-bold align-self-center"
+              className="d-none d-lg-flex fw-bold d-flex align-items-center justify-content-center "
               md={4}
-              lg={3}
+              lg={2}
             >
               <div className="ms-1">{t('preCompletionNotes')}</div>
             </Col>
             <Col
-              className="d-none d-lg-block fw-bold align-self-center"
+              className="d-none d-lg-flex fw-bold d-flex align-items-center justify-content-center "
               md={4}
-              lg={3}
+              lg={2}
             >
               <div className="ms-3">{t('postCompletionNotes')}</div>
             </Col>
-            <Col xs={5} sm={3} lg={2} className="fw-bold align-self-center">
+            <Col
+              xs={5}
+              sm={3}
+              lg={2}
+              className="fw-bold d-flex align-items-center justify-content-center "
+            >
               <div className="ms-3">{t('options')}</div>
             </Col>
           </Row>
@@ -237,29 +253,44 @@ function actionItemsContainer({
           {actionItemsData?.map((actionItem, index) => (
             <div key={index}>
               <Row className={`${index === 0 ? 'pt-3' : ''} mb-3 mx-2`}>
+                <Col
+                  sm={4}
+                  xs={7}
+                  md={3}
+                  lg={1}
+                  className="d-flex align-items-center justify-content-center text-body-secondary"
+                >
+                  {index + 1}
+                </Col>
                 <Col
                   sm={4}
                   xs={7}
                   md={3}
                   lg={2}
-                  className="align-self-center text-body-secondary"
+                  className="d-flex align-items-center justify-content-center text-body-secondary"
                 >
-                  {`${actionItem.assignee.firstName} ${actionItem.assignee.lastName}`}
+                  <Link
+                    to={`/member/${actionItem?.event?._id}`}
+                    state={{ id: index }}
+                    className={styles.membername}
+                  >
+                    {`${actionItem.assignee.firstName} ${actionItem.assignee.lastName}`}
+                  </Link>
                 </Col>
                 <Col
                   sm={5}
                   md={6}
                   lg={2}
-                  className="p-1 d-none d-sm-block align-self-center text-body-secondary"
+                  className="p-1 d-none d-sm-flex d-flex align-items-center justify-content-center text-body-secondary"
                 >
                   {actionItem.actionItemCategory.name}
                 </Col>
                 <Col
-                  className="p-0 d-none d-lg-block align-self-center text-body-secondary"
+                  className="p-0 d-none d-lg-flex d-flex align-items-center justify-content-center text-body-secondary"
                   md={4}
-                  lg={3}
+                  lg={2}
                 >
-                  <div className="ms-3">
+                  <div className="ms-2">
                     <OverlayTrigger
                       trigger={['hover', 'focus']}
                       placement="right"
@@ -280,9 +311,9 @@ function actionItemsContainer({
                   </div>
                 </Col>
                 <Col
-                  className="p-0 d-none d-lg-block align-self-center text-body-secondary"
+                  className="p-0 d-none d-lg-flex d-flex align-items-center justify-content-center text-body-secondary"
                   md={4}
-                  lg={3}
+                  lg={2}
                 >
                   <div className="ms-3">
                     {actionItem.isCompleted ? (
@@ -311,7 +342,12 @@ function actionItemsContainer({
                     )}
                   </div>
                 </Col>
-                <Col xs={5} sm={3} lg={2} className="p-0 align-self-center">
+                <Col
+                  xs={5}
+                  sm={3}
+                  lg={2}
+                  className="p-0 d-flex align-items-center justify-content-center"
+                >
                   <div className="d-flex align-items-center ms-4 gap-2">
                     <input
                       type="checkbox"