fix(ui): fix broken ui when shrink

ARAFarm-Lab · Mar 31, 2024 · 47f469b · 47f469b
1 parent 13c8d07
commit 47f469b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/src/pages/home/dashboard/index.tsx b/src/pages/home/dashboard/index.tsx
@@ -16,7 +16,6 @@ import dayjs, { Dayjs } from 'dayjs'
 import { SensorType } from '@/constants/sensor'
 
 import icon from '@/assets/icon.png'
-import { defaultDateTimeFormat } from '@/constants/date'
 import useTabStore from '@/stores/tab'
 import { createLazyRoute } from '@tanstack/react-router'
 
@@ -218,8 +217,9 @@ const Dashboard = () => {
                                         </Grid>
                                     </Grid>
                                     <Grid container direction='column' alignItems='flex-end'>
-                                        <Typography fontSize='sm' textColor={'primary.600'} fontWeight='600'>{dayjs(history.action_at).format(defaultDateTimeFormat)}</Typography>
-                                        <Typography fontSize='sm'>{actionSourceNameMap[history.action_by]}</Typography>
+                                        <Typography fontSize='xs' textColor={'primary.600'} fontWeight='600'>{dayjs(history.action_at).format("DD-MM-YYYY")}</Typography>
+                                        <Typography fontSize='xs' textColor={'primary.600'} fontWeight='600'>{dayjs(history.action_at).format("HH:mm")}</Typography>
+                                        <Typography fontSize='xs'>{actionSourceNameMap[history.action_by]}</Typography>
                                     </Grid>
                                 </Grid>
                             </Card>

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
@@ -29,10 +29,12 @@ const tabs = [
 
 const App = () => {
     return (
-        <Grid container flexDirection='column' sx={{ minHeight: '100vh', background: 'white' }}>
+        // <Box display='flex' flexDirection='column' sx={{ height: '100vh' }}>
+        <Grid flexDirection='column' display='flex' sx={{ minHeight: '100vh', background: 'white' }}>
             <Outlet />
             <BottomNavigation />
         </Grid>
+        // </Box>
     )
 }
 

diff --git a/src/pages/home/schedule/index.tsx b/src/pages/home/schedule/index.tsx
@@ -140,7 +140,6 @@ const Schedule = () => {
 
     const handleEditSchedule = () => {
         if (!expandedSchedule.id) return
-        // console.log(scheduleModeTabMap[scheduleModeIndex])
         updateScheduleMutation.mutate({
             ...expandedSchedule as ScheduledTask,
             name: scheduleName,
@@ -247,7 +246,7 @@ const Schedule = () => {
                         label: 'Simpan',
                         variant: 'solid',
                         color: 'primary',
-                        loading: addScheduleMutation.isPending,
+                        loading: addScheduleMutation.isPending || updateScheduleMutation.isPending,
                         onClick: (expandedSchedule.id || 0) > 0 ? handleEditSchedule : handleSaveSchedule,
                     },
                     {

diff --git a/src/pages/home/schedule/modal/index.tsx b/src/pages/home/schedule/modal/index.tsx
@@ -22,7 +22,7 @@ const modalTransition: Partial<ModalTransition> = {
     exited: { transform: `translateY(100%)` },
 }
 
-const Modal = ({title, isOpen, onClose, children, buttonActions }: ModalProps) => {
+const Modal = ({ title, isOpen, onClose, children, buttonActions }: ModalProps) => {
     return (
         <>
             <Transition in={isOpen} timeout={modalTransitionDelayMs}>
@@ -72,7 +72,7 @@ const Modal = ({title, isOpen, onClose, children, buttonActions }: ModalProps) =
                                             key={index}
                                             variant={action.variant}
                                             color={action.color}
-                                            onClick={action.onClick}
+                                            onClick={action.loading ? () => {} : action.onClick}
                                             loading={action.loading}
                                         >
                                             {action.label}