Merge pull request #4 from bekk/SortByName

List Sort By TaskName and ExecutionTime. Backend and frontend
bekk · Aug 30, 2023 · 3a73076 · 3a73076
2 parents 061de31 + a5c4fad
commit 3a73076
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 27 deletions.
diff --git a/...backend/src/main/java/com/github/bekk/dbscheduleruibackend/controller/TestController.java b/...backend/src/main/java/com/github/bekk/dbscheduleruibackend/controller/TestController.java
@@ -1,7 +1,6 @@
 package com.github.bekk.dbscheduleruibackend.controller;
 
 import com.github.bekk.dbscheduleruibackend.model.GetTasksResponse;
-import com.github.bekk.dbscheduleruibackend.model.TaskModel;
 import com.github.bekk.dbscheduleruibackend.model.TaskRequestParams;
 import com.github.bekk.dbscheduleruibackend.model.TaskType;
 import com.github.bekk.dbscheduleruibackend.service.TaskService;
@@ -12,8 +11,6 @@
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
-import java.util.List;
-
 @RestController
 @CrossOrigin(methods = {RequestMethod.GET, RequestMethod.POST}, origins = "*")
 public class TestController {

diff --git a/...i-backend/src/main/java/com/github/bekk/dbscheduleruibackend/model/TaskRequestParams.java b/...i-backend/src/main/java/com/github/bekk/dbscheduleruibackend/model/TaskRequestParams.java
@@ -5,15 +5,18 @@ public class TaskRequestParams {
     private TaskFilter filter;
     private int pageNumber;
     private int size;
+    private TaskSort sorting;
+    private boolean asc;
 
     public TaskRequestParams() {
     }
 
-    public TaskRequestParams(TaskFilter filter, int pageNumber, int size) {
-        System.out.println(size);
+    public TaskRequestParams(TaskFilter filter, int pageNumber, int size, TaskSort sorting, boolean asc) {
         this.filter = filter;
         this.pageNumber = pageNumber;
         this.size = size;
+        this.sorting = sorting;
+        this.asc = asc;
     }
 
     public TaskFilter getFilter() {
@@ -40,9 +43,29 @@ public void setSize(int size) {
         this.size = size;
     }
 
+    public TaskSort getSorting() {
+        return sorting;
+    }
+
+    public void setSorting(TaskSort sorting) {
+        this.sorting = sorting;
+    }
+
+    public boolean isAsc() {
+        return asc;
+    }
+
+    public void setAsc(boolean asc) {
+        this.asc = asc;
+    }
+
     public enum TaskFilter {
         FAILED,
         RUNNING,
         SCHEDULED;
     }
+    public enum TaskSort {
+        DEFAULT,
+        NAME;
+    }
 }
diff --git a/...er-ui-backend/src/main/java/com/github/bekk/dbscheduleruibackend/service/TaskService.java b/...er-ui-backend/src/main/java/com/github/bekk/dbscheduleruibackend/service/TaskService.java
@@ -12,17 +12,15 @@
 import com.github.kagkarlsson.scheduler.Scheduler;
 import com.github.kagkarlsson.scheduler.task.TaskInstance;
 import com.github.kagkarlsson.scheduler.task.TaskInstanceId;
+
+import java.util.*;
 import java.util.stream.Collectors;
 import org.springframework.http.HttpStatus;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import org.springframework.web.server.ResponseStatusException;
 
 import java.time.Instant;
-import java.util.ArrayList;
-import java.util.List;
-import java.util.Optional;
-import java.util.UUID;
 
 @Service
 public class TaskService {
@@ -37,7 +35,7 @@ public TaskService(Scheduler scheduler) {
 
 public void runTaskNow(String taskId, String taskName) {
     Optional<ScheduledExecution<Object>> scheduledExecutionOpt = scheduler.getScheduledExecution(TaskInstanceId.of(taskName, taskId));
-    
+
     if (scheduledExecutionOpt.isPresent()) {
         TaskInstanceId taskInstance = scheduledExecutionOpt.get().getTaskInstance();
         scheduler.reschedule(taskInstance, Instant.now());
@@ -101,9 +99,21 @@ public GetTasksResponse getAllTasks(TaskRequestParams params) {
             return true;
         }).collect(Collectors.toList());
 
+        if (params.getSorting() == TaskRequestParams.TaskSort.NAME) {
+            tasks.sort((task1, task2) -> {
+                int comparisonResult = task1.getTaskName().compareTo(task2.getTaskName());
+                return params.isAsc() ? comparisonResult : -comparisonResult;
+            });
+        }else if(params.getSorting() == TaskRequestParams.TaskSort.DEFAULT){
+            tasks.sort((task1, task2) -> {
+                int comparisonResult = task1.getExecutionTime().compareTo(task2.getExecutionTime());
+                return params.isAsc() ? comparisonResult : -comparisonResult;
+            });
+        }
+
         int totalTasks = tasks.size();
         int numberOfPages = (int) Math.ceil((double) totalTasks / params.getSize());
-        
+
         int startIndex = params.getPageNumber() * params.getSize();
         int endIndex = Math.min(startIndex + params.getSize(), totalTasks);
 
@@ -112,5 +122,4 @@ public GetTasksResponse getAllTasks(TaskRequestParams params) {
         return new GetTasksResponse(totalTasks, numberOfPages, pagedTasks);
     }
 
-
 }
diff --git a/db-scheduler-ui-frontend/src/components/SortButton.tsx b/db-scheduler-ui-frontend/src/components/SortButton.tsx
@@ -0,0 +1,34 @@
+import { Text } from '@chakra-ui/react';
+import React from 'react';
+import { ChevronDownIcon } from '@chakra-ui/icons';
+import { SortBy } from 'src/services/getTasks';
+
+export const SortButton: React.FC<{
+  title: string;
+  name: SortBy;
+  currentSort: SortBy;
+  setCurrentSort: (sorting: SortBy) => void;
+  sortAsc: boolean;
+  setSortAsc: (sortAsc: boolean) => void;
+}> = ({ title, currentSort, setCurrentSort, name, sortAsc, setSortAsc }) => (
+  <Text
+    as="button"
+    flex="2"
+    textAlign="left"
+    fontSize={'sm'}
+    _active={{ color: '#000000', fontWeight: 'semibold' }}
+    onClick={() =>
+      currentSort === name ? setSortAsc(!sortAsc) : setCurrentSort(name)
+    }
+    fontWeight={currentSort === name ? 'bold' : 'normal'}
+  >
+    {title}
+    <ChevronDownIcon
+      fontSize={'xl'}
+      transform={
+        sortAsc || currentSort !== name ? 'rotate(0deg)' : 'rotate(180deg)'
+      }
+      transition="transform 0.3s ease-in-out"
+    />
+  </Text>
+);
diff --git a/db-scheduler-ui-frontend/src/components/TaskAccordionButton.tsx b/db-scheduler-ui-frontend/src/components/TaskAccordionButton.tsx
@@ -44,13 +44,15 @@ export const TaskAccordionButton: React.FC<TaskAccordionButtonProps> = ({
           <Box textAlign="left" flex="2">
             {taskInstance}
           </Box>
-          <Box flex="1">{new Date(executionTime)?.toLocaleString()}</Box>
+
           <HStack
-            flex="1"
+            flex="2"
             textAlign="left"
             justifyContent={'flex-end'}
             flexDirection={'row'}
           >
+
+            <Box flex="1">{new Date(executionTime)?.toLocaleString()}</Box>
             <TaskRunButton
               taskName={taskName}
               taskInstance={taskInstance}

diff --git a/db-scheduler-ui-frontend/src/components/TaskList.tsx b/db-scheduler-ui-frontend/src/components/TaskList.tsx
@@ -5,25 +5,33 @@ import TaskCard from './TaskCard';
 import {
   FilterBy,
   PaginationParams,
+  SortBy,
   TASK_QUERY_KEY,
   getTasks,
 } from 'src/services/getTasks';
 
 import { useQuery } from '@tanstack/react-query';
 import PaginationButtons from 'src/components/PaginationButtons';
 import { FilterBox } from 'src/components/FilterBox';
+import { SortButton } from 'src/components/SortButton';
 
 const TaskList: React.FC = () => {
   const [currentFilter, setCurrentFilter] = useState<FilterBy>(FilterBy.All);
   const [page, setPage] = useState<PaginationParams>({
     limit: 10,
     pageNumber: 0,
   });
+  const [currentSort, setCurrentSort] = useState<SortBy>(SortBy.Default);
+  const [sortAsc, setSortAsc] = useState<boolean>(true);
   const { data, refetch } = useQuery(
-    [TASK_QUERY_KEY, currentFilter, page],
-    () => getTasks(currentFilter, page),
+    [TASK_QUERY_KEY, currentFilter, page, currentSort, sortAsc],
+    () => getTasks(currentFilter, page, currentSort, sortAsc),
   );
 
+  useEffect(() => {
+    setSortAsc(true);
+  }, [currentSort]);
+
   useEffect(() => {
     if (data?.numberOfPages && page.pageNumber + 1 > data?.numberOfPages) {
       setPage((prev) => {
@@ -49,15 +57,25 @@ const TaskList: React.FC = () => {
         <Box flex="1" textAlign="left" textColor={'#484848'} fontSize={'sm'}>
           Status
         </Box>
-        <Box flex="2" textAlign="left" textColor={'#484848'} fontSize={'sm'}>
-          Task Name
-        </Box>
+        <SortButton
+          currentSort={currentSort}
+          setCurrentSort={setCurrentSort}
+          sortAsc={sortAsc}
+          setSortAsc={setSortAsc}
+          title={'Task Name'}
+          name={SortBy.Name}
+        />
         <Box flex="2" textAlign="left" textColor={'#484848'} fontSize={'sm'}>
           Task-ID
         </Box>
-        <Box flex="2" textAlign="left" textColor={'#484848'} fontSize={'sm'}>
-          Next Execution Time
-        </Box>
+        <SortButton
+          currentSort={currentSort}
+          setCurrentSort={setCurrentSort}
+          sortAsc={sortAsc}
+          setSortAsc={setSortAsc}
+          title={'Next Execution Time'}
+          name={SortBy.Default}
+        />
       </HStack>
       <Accordion allowMultiple>
         {data?.tasks?.map((task) => (

diff --git a/db-scheduler-ui-frontend/src/services/getTasks.ts b/db-scheduler-ui-frontend/src/services/getTasks.ts
@@ -14,19 +14,27 @@ export interface PaginationParams {
   limit: number;
 }
 
+export enum SortBy {
+  Default = 'Default',
+  Name = 'Name',
+}
+
 export const TASK_QUERY_KEY = `tasks`;
 
 export const getTasks = async (
   filter = FilterBy.All, 
-  { pageNumber = 1, limit = 10 }: PaginationParams
+  { pageNumber = 1, limit = 10 }: PaginationParams,
+  sorting = SortBy.Default,
+  isAsc = true
 ): Promise<TasksResponse> => {
   const queryParams = new URLSearchParams();
-  if (filter !== FilterBy.All) {
-    queryParams.append('filter', filter.toUpperCase());
-  }
+
+  queryParams.append('filter', filter.toUpperCase());
   queryParams.append('page', pageNumber.toString());
   queryParams.append('size', limit.toString());
-
+  queryParams.append('sorting', sorting.toUpperCase());
+  queryParams.append('asc', isAsc.toString());
+
   const response = await fetch(`${API_BASE_URL}/tasks?${queryParams}`, {
     method: 'GET',
     headers: {