From c885e3df14c4377273e6abbdffcfde106863c534 Mon Sep 17 00:00:00 2001
From: Aaron Chong <aaronchongth@gmail.com>
Date: Sat, 9 Sep 2023 02:13:28 +0800
Subject: [PATCH] Feature/scheduling month day (#765)

* Show month and day view

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* Turn off auto refresh when viewing schedule

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* Format date correctly to match with the frontend format

Signed-off-by: angatupyry <fierrofenix@gmail.com>

* Auto refresh to be determined in the interval creation effect

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* Changing name to be explicit for panel

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

---------

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>
Signed-off-by: angatupyry <fierrofenix@gmail.com>
Co-authored-by: angatupyry <fierrofenix@gmail.com>
---
 .../routes/tasks/scheduled_tasks.py           |  7 ++-
 .../src/components/tasks/tasks-app.tsx        | 47 ++++++++++++++-----
 2 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/packages/api-server/api_server/routes/tasks/scheduled_tasks.py b/packages/api-server/api_server/routes/tasks/scheduled_tasks.py
index e524cd604..44aee63d3 100644
--- a/packages/api-server/api_server/routes/tasks/scheduled_tasks.py
+++ b/packages/api-server/api_server/routes/tasks/scheduled_tasks.py
@@ -26,7 +26,12 @@ class PostScheduledTaskRequest(BaseModel):
 
 
 def datetime_to_date_format(date: datetime) -> str:
-    return date.date().strftime("%m/%d/%Y").lstrip("0")
+    # input 09/08/2023
+    formatted_date = date.date().strftime("%m/%d/%Y").lstrip("0")
+    parts = formatted_date.split("/")
+    parts[1] = parts[1].lstrip("0")
+    # output 9/8/2023
+    return "/".join(parts)
 
 
 async def schedule_task(task: ttm.ScheduledTask, task_repo: TaskRepository):
diff --git a/packages/dashboard/src/components/tasks/tasks-app.tsx b/packages/dashboard/src/components/tasks/tasks-app.tsx
index 1822058ee..f433df939 100644
--- a/packages/dashboard/src/components/tasks/tasks-app.tsx
+++ b/packages/dashboard/src/components/tasks/tasks-app.tsx
@@ -199,6 +199,7 @@ export const TasksApp = React.memo(
       ref: React.Ref<HTMLDivElement>,
     ) => {
       const rmf = React.useContext(RmfAppContext);
+      const [autoRefresh, setAutoRefresh] = React.useState(true);
       const [refreshTaskAppCount, setRefreshTaskAppCount] = React.useState(0);
 
       const uploadFileInputRef = React.useRef<HTMLInputElement>(null);
@@ -211,7 +212,6 @@ export const TasksApp = React.memo(
       );
       const [currentEventId, setCurrentEventId] = React.useState<number>(-1);
       const exceptDateRef = React.useRef<Date>(new Date());
-
       const [tasksState, setTasksState] = React.useState<Tasks>({
         isLoading: true,
         data: [],
@@ -233,6 +233,10 @@ export const TasksApp = React.memo(
       }, []);
 
       React.useEffect(() => {
+        if (!autoRefresh) {
+          return;
+        }
+
         const refreshTaskQueueTable = async () => {
           AppEvents.refreshTaskApp.next();
         };
@@ -243,7 +247,7 @@ export const TasksApp = React.memo(
         return () => {
           clearInterval(refreshInterval);
         };
-      }, []);
+      }, [autoRefresh]);
 
       // TODO: parameterize this variable
       const GET_LIMIT = 10;
@@ -401,9 +405,16 @@ export const TasksApp = React.memo(
         [rmf],
       );
 
-      const [selectedTabIndex, setSelectedTabIndex] = React.useState(0);
-      const handleChange = (_: React.SyntheticEvent, newSelectedTabIndex: number) => {
-        setSelectedTabIndex(newSelectedTabIndex);
+      enum TaskTablePanel {
+        QueueTable = 0,
+        Schedule = 1,
+      }
+
+      const [selectedPanelIndex, setSelectedPanelIndex] = React.useState(TaskTablePanel.QueueTable);
+
+      const handlePanelChange = (_: React.SyntheticEvent, newSelectedTabIndex: number) => {
+        setSelectedPanelIndex(newSelectedTabIndex);
+        setAutoRefresh(newSelectedTabIndex === TaskTablePanel.QueueTable);
       };
 
       const handleSubmitDeleteSchedule: React.MouseEventHandler = async (ev) => {
@@ -500,11 +511,19 @@ export const TasksApp = React.memo(
           }
           {...otherProps}
         >
-          <Tabs value={selectedTabIndex} onChange={handleChange} aria-label="Task App Tabs">
-            <Tab label="Queue" id={tabId(0)} aria-controls={tabPanelId(0)} />
-            <Tab label="Schedule" id={tabId(1)} aria-controls={tabPanelId(1)} />
+          <Tabs value={selectedPanelIndex} onChange={handlePanelChange} aria-label="Task App Tabs">
+            <Tab
+              label="Queue"
+              id={tabId(TaskTablePanel.QueueTable)}
+              aria-controls={tabPanelId(TaskTablePanel.QueueTable)}
+            />
+            <Tab
+              label="Schedule"
+              id={tabId(TaskTablePanel.Schedule)}
+              aria-controls={tabPanelId(TaskTablePanel.Schedule)}
+            />
           </Tabs>
-          <TabPanel selectedTabIndex={selectedTabIndex} index={0}>
+          <TabPanel selectedTabIndex={selectedPanelIndex} index={TaskTablePanel.QueueTable}>
             <TableContainer>
               <TaskDataGridTable
                 tasks={tasksState}
@@ -523,7 +542,7 @@ export const TasksApp = React.memo(
               />
             </TableContainer>
           </TabPanel>
-          <TabPanel selectedTabIndex={selectedTabIndex} index={1}>
+          <TabPanel selectedTabIndex={selectedPanelIndex} index={TaskTablePanel.Schedule}>
             <Scheduler
               // react-scheduler does not support refreshing, workaround by mounting a new instance.
               key={`scheduler-${refreshTaskAppCount}`}
@@ -533,9 +552,13 @@ export const TasksApp = React.memo(
                 weekStartOn: 1,
                 startHour: 0,
                 endHour: 23,
-                step: 120,
+                step: 60,
+              }}
+              day={{
+                startHour: 0,
+                endHour: 23,
+                step: 60,
               }}
-              disableViewNavigator
               draggable={false}
               editable={false}
               getRemoteEvents={getRemoteEvents}