add sorting

Author: meetulr

src/GraphQl/Mutations/ActionItemMutations.ts

@@ -258,6 +258,67 @@ export const UPDATE_ACTION_ITEM_CATEGORY_MUTATION = gql`
   }
 `;
 
+// to create an action item
+
+export const CREATE_ACTION_ITEM_MUTATION = gql`
+  mutation CreateActionItem(
+    $actionItemCategoryId: ID!
+    $assigneeId: ID!
+    $preCompletionNotes: String
+    $dueDate: Date
+    $eventId: ID
+  ) {
+    createActionItem(
+      actionItemCategoryId: $actionItemCategoryId
+      data: {
+        assigneeId: $assigneeId
+        preCompletionNotes: $preCompletionNotes
+        dueDate: $dueDate
+        eventId: $eventId
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+// to update an action item
+
+export const UPDATE_ACTION_ITEM_MUTATION = gql`
+  mutation UpdateActionItem(
+    $actionItemId: ID!
+    $assigneeId: ID!
+    $preCompletionNotes: String
+    $postCompletionNotes: String
+    $dueDate: Date
+    $completionDate: Date
+    $isCompleted: Boolean
+  ) {
+    updateActionItem(
+      id: $actionItemId
+      data: {
+        assigneeId: $assigneeId
+        preCompletionNotes: $preCompletionNotes
+        postCompletionNotes: $postCompletionNotes
+        dueDate: $dueDate
+        completionDate: $completionDate
+        isCompleted: $isCompleted
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+// to delete an action item
+
+export const DELETE_ACTION_ITEM_MUTATION = gql`
+  mutation RemoveActionItem($actionItemId: ID!) {
+    removeActionItem(id: $actionItemId) {
+      _id
+    }
+  }
+`;
 // to create the event by any organization
 
 export const CREATE_EVENT_MUTATION = gql`
@@ -600,11 +661,6 @@ export const REGISTER_EVENT = gql`
   }
 `;
 
-// Create, update and delete Action Items
-export { CREATE_ACTION_ITEM_MUTATION } from './ActionItemMutations';
-export { UPDATE_ACTION_ITEM_MUTATION } from './ActionItemMutations';
-export { DELETE_ACTION_ITEM_MUTATION } from './ActionItemMutations';
-
 // Changes the role of a event in an organization and add and remove the event from the organization
 export { ADD_EVENT_ATTENDEE } from './EventAttendeeMutations';
 export { REMOVE_EVENT_ATTENDEE } from './EventAttendeeMutations';

src/GraphQl/Mutations/mutations.ts

@@ -102,6 +102,51 @@ export const ACTION_ITEM_CATEGORY_LIST = gql`
   }
 `;
 
+// Query to get the action items list
+
+export const ACTION_ITEM_LIST = gql`
+  query ActionItemsByOrganization(
+    $organizationId: ID!
+    $orderBy: ActionItemsOrderByInput
+  ) {
+    actionItemsByOrganization(
+      organizationId: $organizationId
+      orderBy: $orderBy
+    ) {
+      _id
+      assignee {
+        _id
+        firstName
+        lastName
+      }
+      assigner {
+        _id
+        firstName
+        lastName
+      }
+      actionItemCategory {
+        _id
+        name
+      }
+      preCompletionNotes
+      postCompletionNotes
+      assignmentDate
+      dueDate
+      completionDate
+      isCompleted
+      event {
+        _id
+        title
+      }
+      creator {
+        _id
+        firstName
+        lastName
+      }
+    }
+  }
+`;
+
 // Query to take the User list
 export const USER_LIST = gql`
   query Users(
@@ -593,9 +638,6 @@ export const MEMBERSHIP_REQUEST = gql`
   }
 `;
 
-// get the list of action items for an organization
-export { ACTION_ITEM_LIST } from './ActionItemQueries';
-
 // to take the list of the blocked users
 export { PLUGIN_GET } from './PlugInQueries';
 export { ADVERTISEMENTS_GET } from './PlugInQueries';

src/GraphQl/Queries/ActionItemQueries.ts

@@ -20,11 +20,11 @@ import ActionItemDeleteModal from '../../screens/OrganizationActionItems/ActionI
 function actionItemsContainer({
   actionItemsData,
   membersData,
-  refetch,
+  actionItemsRefetch,
 }: {
   actionItemsData: InterfaceActionItemList | undefined;
   membersData: any;
-  refetch: any;
+  actionItemsRefetch: any;
 }): JSX.Element {
   const { t } = useTranslation('translation', {
     keyPrefix: 'organizationActionItems',
@@ -104,7 +104,7 @@ function actionItemsContainer({
         },
       });
 
-      refetch();
+      actionItemsRefetch();
       hideUpdateModal();
       toast.success(t('successfulUpdation'));
     } catch (error: any) {
@@ -122,7 +122,7 @@ function actionItemsContainer({
         },
       });
 
-      refetch();
+      actionItemsRefetch();
       toggleDeleteModal();
       toast.success(t('successfulDeletion'));
     } catch (error: any) {
@@ -152,7 +152,7 @@ function actionItemsContainer({
         <div className="mx-4 shadow-sm rounded-top-4">
           <Row className="mx-0 border border-light-subtle rounded-top-4 py-3">
             <Col xs={7} sm={4} md={3} lg={3} className="ps-3 fs-5 fw-bold">
-              Assignee
+              <div className="ms-2">Assignee</div>
             </Col>
             <Col
               className="fs-5 fw-bold d-none d-sm-block"
@@ -163,7 +163,7 @@ function actionItemsContainer({
               Action Item Category
             </Col>
             <Col className="d-none d-lg-block fs-5 fw-bold" md={4} lg={3}>
-              Status
+              <div className="ms-3">Status</div>
             </Col>
             <Col xs={5} sm={3} lg={2} className="fs-5 fw-bold">
               Options
@@ -198,7 +198,15 @@ function actionItemsContainer({
                     md={4}
                     lg={3}
                   >
-                    {actionItem.isCompleted ? 'Completed' : 'In Progress'}
+                    <div
+                      className={`lh-base w-50 badge rounded-pill ${
+                        actionItem.isCompleted
+                          ? 'text-bg-success text-white'
+                          : 'text-bg-warning'
+                      }`}
+                    >
+                      {actionItem.isCompleted ? 'Completed' : 'Active'}
+                    </div>
                   </Col>
                   <Col xs={5} sm={3} lg={2} className="p-0">
                     <Button

src/GraphQl/Queries/Queries.ts

@@ -83,7 +83,7 @@ const ActionItemPreviewModal: React.FC<InterfaceActionItemCreateModalProps> = ({
               <p className={styles.preview}>
                 {t('status')}:{' '}
                 <span className={styles.view}>
-                  {formState.isCompleted ? 'Completed' : 'In Progress'}
+                  {formState.isCompleted ? 'Completed' : 'Active'}
                 </span>
               </p>
             </div>

src/components/ActionItemsContainer/ActionItemsContainer.tsx

@@ -121,12 +121,21 @@ hr {
 }
 
 .message {
+  margin-top: 25%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }
 
+.preview {
+  display: flex;
+  flex-direction: row;
+  font-weight: 900;
+  font-size: 16px;
+  color: rgb(80, 80, 80);
+}
+
 .searchForm {
   display: inline;
 }
@@ -141,6 +150,13 @@ hr {
   width: 65%;
 }
 
+.view {
+  margin-left: 2%;
+  font-weight: 600;
+  font-size: 16px;
+  color: #707070;
+}
+
 @media (max-width: 1020px) {
   .btnsContainer {
     flex-direction: column;