refactored task sorting to inventory server (#1286)

* refactored task sorting to inventory server * added arrows to table head based on the sortKey and direction --------- Co-authored-by: PeterL <[email protected]> Co-authored-by: Marco <[email protected]>
FRINXio · Aug 22, 2023 · 25a19c4 · 25a19c4
1 parent 50ee218
commit 25a19c4
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 26 deletions.
diff --git a/packages/frinx-workflow-ui/src/__generated__/graphql.ts b/packages/frinx-workflow-ui/src/__generated__/graphql.ts
diff --git a/packages/frinx-workflow-ui/src/pages/workflow-list/tasks/task-list.tsx b/packages/frinx-workflow-ui/src/pages/workflow-list/tasks/task-list.tsx
@@ -1,7 +1,6 @@
 import { Button, Container, Flex, Icon, Input, InputGroup, InputLeftElement, useDisclosure } from '@chakra-ui/react';
 import { omitNullValue, usePagination, Pagination, TaskDefinition, useNotifications } from '@frinx/shared';
 import FeatherIcon from 'feather-icons-react';
-import { orderBy } from 'lodash';
 import { gql, useMutation, useQuery } from 'urql';
 import React, { useMemo, useState } from 'react';
 import AddTaskModal from './add-task-modal';
@@ -14,6 +13,8 @@ import {
   DeleteTaskMutationVariables,
   TaskDefinitionsQuery,
   TaskDefinitionsQueryVariables,
+  TasksOrderByInput,
+  SortTasksBy,
 } from '../../../__generated__/graphql';
 
 const taskDefinition: TaskDefinition = {
@@ -35,8 +36,15 @@ const taskDefinition: TaskDefinition = {
 };
 
 const TASK_DEFINITIONS_QUERY = gql`
-  query TaskDefinitions($filter: FilterTaskDefinitionsInput, $before: String, $last: Int, $after: String, $first: Int) {
-    taskDefinitions(filter: $filter, before: $before, last: $last, after: $after, first: $first) {
+  query TaskDefinitions(
+    $filter: FilterTaskDefinitionsInput
+    $orderBy: TasksOrderByInput
+    $before: String
+    $last: Int
+    $after: String
+    $first: Int
+  ) {
+    taskDefinitions(filter: $filter, orderBy: $orderBy, before: $before, last: $last, after: $after, first: $first) {
       edges {
         node {
           id
@@ -85,7 +93,7 @@ const CREATE_TASK_DEFINITION_MUTATION = gql`
 
 const TaskList = () => {
   const context = useMemo(() => ({ additionalTypenames: ['TaskDefinition'] }), []);
-  const [sorted, setSorted] = useState(false);
+  const [orderBy, setOrderBy] = useState<TasksOrderByInput | null>(null);
   const [task, setTask] = useState<TaskDefinition>();
   const [keyword, setKeyword] = useState('');
   const [searchTerm, setSearchTerm] = useState('');
@@ -101,6 +109,7 @@ const TaskList = () => {
       filter: {
         keyword,
       },
+      orderBy,
     },
   });
 
@@ -118,7 +127,9 @@ const TaskList = () => {
     CREATE_TASK_DEFINITION_MUTATION,
   );
 
-  const sortedTasks = taskDefinitions.sort((a, b) => a.name.localeCompare(b.name)) || [].filter(omitNullValue);
+  const handleSort = (value: SortTasksBy) => {
+    setOrderBy({ sortKey: value, direction: orderBy?.direction === 'ASC' ? 'DESC' : 'ASC' });
+  };
 
   const handleTaskModal = (tsk: TaskDefinition) => {
     setTask(tsk);
@@ -152,12 +163,6 @@ const TaskList = () => {
       });
   };
 
-  const sortArray = (key: string) => {
-    const sortedArray = sorted ? orderBy(sortedTasks, [key], ['desc']) : orderBy(sortedTasks, [key], ['asc']);
-    setSorted(!sorted);
-    return sortedArray;
-  };
-
   const addTask = (tsk: TaskDefinition) => {
     if (tsk.name !== '') {
       const ownerEmail = tsk.ownerEmail || '[email protected]';
@@ -214,7 +219,7 @@ const TaskList = () => {
         task={taskDefinition}
       />
       {task && <TaskConfigModal isOpen={taskConfigModal.isOpen} onClose={taskConfigModal.onClose} task={task} />}
-      <Flex marginBottom={8}>
+      <Flex justify="space-between" gap="20px" marginBottom={8}>
         <InputGroup>
           <InputLeftElement>
             <Icon size={20} as={FeatherIcon} icon="Search" color="grey" />
@@ -226,9 +231,8 @@ const TaskList = () => {
             background="white"
           />
         </InputGroup>
-        <Flex gap={2}>
+        <Flex gap={1}>
           <Button
-            marginLeft={4}
             colorScheme="blue"
             onClick={() => {
               setKeyword(searchTerm);
@@ -237,7 +241,6 @@ const TaskList = () => {
             Search
           </Button>
           <Button
-            marginLeft={4}
             colorScheme="red"
             variant="outline"
             onClick={() => {
@@ -247,17 +250,18 @@ const TaskList = () => {
           >
             Reset
           </Button>
-          <Button marginLeft={4} colorScheme="blue" variant="outline" onClick={addTaskModal.onOpen}>
+          <Button colorScheme="blue" variant="outline" onClick={addTaskModal.onOpen}>
             New
           </Button>
         </Flex>
       </Flex>
 
       <TaskTable
-        tasks={sortedTasks}
+        tasks={taskDefinitions}
         onTaskConfigClick={handleTaskModal}
         onTaskDelete={handleDeleteTask}
-        sortArray={sortArray}
+        onSort={handleSort}
+        orderBy={orderBy}
       />
       {taskData && (
         <Pagination

diff --git a/packages/frinx-workflow-ui/src/pages/workflow-list/tasks/task-table.tsx b/packages/frinx-workflow-ui/src/pages/workflow-list/tasks/task-table.tsx
@@ -2,36 +2,56 @@ import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Icon, IconButton, Stack, Td } from '@chakra-ui/react';
 import FeatherIcon from 'feather-icons-react';
 import { TaskDefinition } from '@frinx/shared';
+import { TasksOrderByInput, SortTasksBy } from '../../../__generated__/graphql';
 
 type TaskTableProps = {
   tasks: TaskDefinition[];
-  sortArray: (fieldName: string) => void;
+  orderBy: TasksOrderByInput | null;
+  onSort: (fieldName: SortTasksBy) => void;
   onTaskDelete: (task: TaskDefinition) => void;
   onTaskConfigClick: (task: TaskDefinition) => void;
 };
 
-export default function TaskTable({ sortArray, tasks, onTaskConfigClick, onTaskDelete }: TaskTableProps) {
+export default function TaskTable({ onSort, tasks, orderBy, onTaskConfigClick, onTaskDelete }: TaskTableProps) {
   return (
     <Table background="white">
       <Thead>
         <Tr>
-          <Th onClick={() => sortArray('name')} cursor="pointer">
+          <Th onClick={() => onSort('name')} cursor="pointer">
             Name/Version
+            {orderBy?.sortKey === 'name' && (
+              <Icon as={FeatherIcon} size={40} icon={orderBy.direction === 'ASC' ? 'chevron-down' : 'chevron-up'} />
+            )}
           </Th>
-          <Th onClick={() => sortArray('timeoutPolicy')} cursor="pointer">
+          <Th onClick={() => onSort('timeoutPolicy')} cursor="pointer">
             Timeout Policy
+            {orderBy?.sortKey === 'timeoutPolicy' && (
+              <Icon as={FeatherIcon} size={40} icon={orderBy.direction === 'ASC' ? 'chevron-down' : 'chevron-up'} />
+            )}
           </Th>
-          <Th onClick={() => sortArray('timeoutSeconds')} cursor="pointer">
+          <Th onClick={() => onSort('timeoutSeconds')} cursor="pointer">
             Timeout Seconds
+            {orderBy?.sortKey === 'timeoutSeconds' && (
+              <Icon as={FeatherIcon} size={40} icon={orderBy.direction === 'ASC' ? 'chevron-down' : 'chevron-up'} />
+            )}
           </Th>
-          <Th onClick={() => sortArray('responseTimeoutSeconds')} cursor="pointer">
+          <Th onClick={() => onSort('responseTimeoutSeconds')} cursor="pointer">
             Response Timeout
+            {orderBy?.sortKey === 'responseTimeoutSeconds' && (
+              <Icon as={FeatherIcon} size={40} icon={orderBy.direction === 'ASC' ? 'chevron-down' : 'chevron-up'} />
+            )}
           </Th>
-          <Th onClick={() => sortArray('retryCount')} cursor="pointer">
+          <Th onClick={() => onSort('retryCount')} cursor="pointer">
             Retry Count
+            {orderBy?.sortKey === 'retryCount' && (
+              <Icon as={FeatherIcon} size={40} icon={orderBy.direction === 'ASC' ? 'chevron-down' : 'chevron-up'} />
+            )}
           </Th>
-          <Th onClick={() => sortArray('retryLogic')} cursor="pointer">
+          <Th onClick={() => onSort('retryLogic')} cursor="pointer">
             Retry Logic
+            {orderBy?.sortKey === 'retryLogic' && (
+              <Icon as={FeatherIcon} size={40} icon={orderBy.direction === 'ASC' ? 'chevron-down' : 'chevron-up'} />
+            )}
           </Th>
           <Th textAlign="center">Actions</Th>
         </Tr>