fix: call order is not persistent for user officers (#1294)

Co-authored-by: Farai Mutambara <71100224+mutambaraf@users.noreply.github.com>

Author: 2 people

apps/backend/src/datasources/postgres/CallDataSource.ts

@@ -175,6 +175,9 @@ export default class PostgresCallDataSource implements CallDataSource {
         .where('s.short_code', filter.proposalStatusShortCode)
         .distinctOn('call.call_id');
     }
+    if (filter?.isOrdered) {
+      query.orderBy('sort_order');
+    }
 
     return query.then((callDB: CallRecord[]) => {
       return callDB.map((call) => createCallObject(call));
@@ -439,7 +442,7 @@ export default class PostgresCallDataSource implements CallDataSource {
   }
   async setNewSortOrder(data: CallOrderArray): Promise<number> {
     return await database
-      .update({ sort_order: data.sort_order })
+      .update({ sort_order: data.sort_order + 1 })
       .from('call')
       .where({ call_id: data.callId });
   }

apps/backend/src/resolvers/queries/CallsQuery.ts

@@ -58,6 +58,9 @@ export class CallsFilter {
 
   @Field(() => Boolean, { nullable: true })
   public isCallUpcoming?: boolean;
+
+  @Field(() => Boolean, { nullable: true })
+  public isOrdered?: boolean;
 }
 
 @Resolver()

apps/e2e/cypress/e2e/calls.cy.ts

@@ -897,6 +897,59 @@ context('Calls tests', () => {
       cy.contains(newCall.shortCode);
     });
 
+    it('Order of calls persists ', () => {
+      cy.createCall({
+        ...newInactiveCall,
+        esiTemplateId: esiTemplateId,
+        proposalWorkflowId: workflowId,
+      });
+      let firstTableRowTextBeforeSorting: string;
+      let firstTableRowTextAfterSorting: string;
+      cy.contains('Calls').click();
+      cy.get('[data-cy="call-status-filter"]').click();
+      cy.get('[role="listbox"]').contains('Open/Upcoming').click();
+
+      cy.finishedLoading();
+
+      cy.get('[data-cy="order-calls-button"]').first().click();
+      cy.contains('Drag to order calls');
+      cy.get('[data-cy="call-list-drag-item"]')
+        .first()
+        .then((element) => {
+          firstTableRowTextBeforeSorting = element.text();
+        });
+      //reorder
+      cy.get('[data-cy="call-list-drag-item"]')
+        .first()
+        .dragElement([
+          { direction: 'left', length: 0 },
+          { direction: 'down', length: 1 },
+        ]);
+
+      cy.get('[data-cy="call-list-drag-item"]')
+        .last()
+        .then((element) => {
+          firstTableRowTextAfterSorting = element.text();
+          expect(firstTableRowTextBeforeSorting).not.equal(
+            firstTableRowTextAfterSorting
+          );
+        });
+
+      cy.contains('Proposals').click();
+      cy.contains('Calls').click();
+
+      cy.get('[data-cy="call-status-filter"]').click();
+      cy.get('[role="listbox"]').contains('Open/Upcoming').click();
+
+      cy.finishedLoading();
+
+      cy.get('[data-cy="order-calls-button"]').first().click();
+      cy.contains('Drag to order calls');
+      cy.get('[data-cy="call-list-drag-item"]').first();
+
+      cy.contains(newCall.shortCode);
+    });
+
     it('User officer can filter calls by their status', () => {
       cy.createCall({
         ...newInactiveCall,

apps/frontend/src/components/call/CallsTable.tsx

@@ -349,7 +349,11 @@ const CallsTable = ({ confirm, isArchivedTab }: CallTableProps) => {
       result.source.index,
       result.destination.index
     );
-    setCalls(callsWithUpdatedOrder);
+    setCalls(
+      callsWithUpdatedOrder.sort((a, b) =>
+        a.sort_order > b.sort_order ? -1 : 1
+      )
+    );
     const callOrderList = callsWithUpdatedOrder.map((item, index) => ({
       callId: item.id,
       sort_order: index,
@@ -360,6 +364,13 @@ const CallsTable = ({ confirm, isArchivedTab }: CallTableProps) => {
     });
   };
 
+  const getCallOrder = (): void => {
+    setCallsFilter(() => ({
+      ...getFilterStatus(callStatus as CallStatusFilters, isArchivedTab),
+      isOrdered: true,
+    }));
+  };
+
   return (
     <div data-cy="calls-table">
       <Grid container spacing={2}>
@@ -381,7 +392,12 @@ const CallsTable = ({ confirm, isArchivedTab }: CallTableProps) => {
             control={
               <Switch
                 checked={isCallReorderMode}
-                onChange={(): void => setIsCallReorderMode(!isCallReorderMode)}
+                onChange={(): void => {
+                  if (!isCallReorderMode) {
+                    getCallOrder();
+                  }
+                  setIsCallReorderMode(!isCallReorderMode);
+                }}
               />
             }
             label="Order calls mode"
@@ -395,12 +411,7 @@ const CallsTable = ({ confirm, isArchivedTab }: CallTableProps) => {
             Drag to order calls
           </Typography>
           <Paper>
-            <CallReorder
-              items={calls.sort((a, b) =>
-                a.sort_order > b.sort_order ? 1 : -1
-              )}
-              onDragEnd={onDragEnd}
-            />
+            <CallReorder items={calls} onDragEnd={onDragEnd} />
           </Paper>
         </div>
       )}

apps/frontend/src/components/proposal/ProposalChooseCall.tsx

@@ -25,32 +25,25 @@ const ProposalChooseCall = () => {
     navigate(url);
   };
   function getDashBoardCallFilter(): CallsFilter {
-    return isInternalUser
-      ? {
-          isActive: true,
-          isEnded: false,
-          isActiveInternal: true,
-        }
-      : {
-          isActive: true,
-          isEnded: false,
-        };
+    return {
+      isActive: true,
+      isEnded: false,
+      isActiveInternal: isInternalUser,
+      isOrdered: true,
+    };
   }
   const { calls } = useCallsData(getDashBoardCallFilter());
-  const callsOrdered = calls.sort((a, b) =>
-    a.sort_order > b.sort_order ? 1 : -1
-  );
 
   return (
     <StyledContainer>
       <StyledPaper>
         <Typography variant="h6" component="h2" gutterBottom>
-          {callsOrdered.length !== 0
+          {calls.length !== 0
             ? 'Select a call'
             : 'There are no calls open at this time'}
         </Typography>
         <List data-cy="call-list">
-          {callsOrdered.map((call) => {
+          {calls.map((call) => {
             const timeRemainingText = timeRemaining(new Date(call.endCall));
             const InternalCalltimeRemainingText = timeRemaining(
               new Date(call.endCallInternal)