Feature matching event action item table and org action item table

PalisadoesFoundation · Jul 3, 2024 · d76905e · d76905e
1 parent 311801f
commit d76905e
Show file tree

Hide file tree

Showing 12 changed files with 579 additions and 201 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,38 +196,52 @@ function actionItemsContainer({
             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={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>
@@ -238,25 +253,40 @@ 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={2}
                 >
@@ -281,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 ? (
@@ -312,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"

diff --git a/src/components/EventManagement/EventActionItems/EventActionItems.module.css b/src/components/EventManagement/EventActionItems/EventActionItems.module.css
@@ -3,6 +3,11 @@
     width: 98%;
   }
 }
+.actionItemModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
 .modalContent {
   width: 670px;
   max-width: 680px;
@@ -71,6 +76,10 @@
   height: 50px !important;
   border-radius: 100% !important;
 }
+.datagrid {
+  overflow: auto;
+  border-radius: 10px;
+}
 .tableHead {
   background-color: #31bb6b !important;
   color: white;
@@ -94,9 +103,8 @@
   background-color: var(--bs-white);
 }
 .tableHeader {
-  background-color: var(--bs-primary);
-  color: var(--bs-white);
-  font-size: 16px;
+  color: var(--bs-black);
+  font-size: var(--bs-body-font-size);
 }
 .addButton {
   width: 7em;
@@ -128,18 +136,33 @@
   color: var(--bs-gray-600);
   font-weight: 600;
   font-size: 20px;
-  margin-top: 1rem;
+  margin-bottom: 20px;
+  padding-bottom: 5px;
+  border-bottom: 3px solid var(--bs-primary);
   width: 65%;
 }
 
 .editDelBtns {
-  display: flex;
-  justify-content: space-around;
+  margin-top: 15px;
+  border: 1px solid var(--bs-gray-300);
+  box-shadow: 0 2px 2px var(--bs-gray-300);
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: var(--bs-primary);
+  width: 100%;
+  font-size: 16px;
+  color: var(--bs-white);
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
 }
 
 .greenregbtn {
-  margin-bottom: 20px;
-  margin-left: 85%;
+  margin-left: 93%;
 }
 
 .datatable {
@@ -148,6 +171,17 @@
 
 .datediv {
   display: flex;
+  flex-direction: row;
+}
+.datebox {
+  width: 90%;
+  border-radius: 7px;
+  outline: none;
+  box-shadow: none;
+}
+.actionItemsOptionsButton {
+  width: 24px;
+  height: 24px;
 }
 
 @-webkit-keyframes load8 {