From ecae788cd9b143426da8d72aaababbd5f80d175c Mon Sep 17 00:00:00 2001
From: he3als <65787561+he3als@users.noreply.github.com>
Date: Sat, 17 Aug 2024 02:59:07 +0100
Subject: [PATCH] feat(schedules): mobile support, updated UI

---
 .../components/elements/ItemContainer.tsx     | 17 ++---
 .../components/elements/SwitchV2Container.tsx |  2 +-
 .../server/schedules/DeleteScheduleButton.tsx |  2 +-
 .../server/schedules/EditScheduleModal.tsx    |  2 +-
 .../schedules/ScheduleEditContainer.tsx       | 63 +++++++++----------
 .../server/schedules/ScheduleTaskRow.tsx      | 19 +++---
 6 files changed, 54 insertions(+), 51 deletions(-)

diff --git a/resources/scripts/components/elements/ItemContainer.tsx b/resources/scripts/components/elements/ItemContainer.tsx
index e11b2bb0f..fba9ff21e 100644
--- a/resources/scripts/components/elements/ItemContainer.tsx
+++ b/resources/scripts/components/elements/ItemContainer.tsx
@@ -2,22 +2,25 @@ import { useMemo } from 'react';
 import { v4 } from 'uuid';
 
 export interface ContainerProps {
-    label: string;
+    title: string;
     description: string;
     children: React.ReactNode;
     labelClasses?: string;
+    titleClasses?: string;
+    descriptionClasses?: string;
+    divClasses?: string;
 }
 
-const ItemContainer = ({ label, description, children, labelClasses }: ContainerProps) => {
+const ItemContainer = ({ title, description, children, labelClasses, titleClasses, descriptionClasses, divClasses }: ContainerProps) => {
     const uuid = useMemo(() => v4(), []);
 
     return (
-        <div className='flex items-center justify-between gap-2 bg-[#3333332a] border-[1px] border-[#ffffff0e] p-4 rounded-lg'>
-            <div className='flex flex-col'>
-                <label htmlFor={uuid} className={`text-neutral-300 text-md font-bold ${labelClasses}`}>
-                    {label}
+        <div className={`flex items-center justify-between gap-2 bg-[#3333332a] border-[1px] border-[#ffffff0e] p-4 rounded-lg ${divClasses}`}>
+            <div className={`flex flex-col ${labelClasses}`}>
+                <label htmlFor={uuid} className={`text-neutral-300 text-md font-bold ${titleClasses}`}>
+                    {title}
                 </label>
-                <label htmlFor={uuid} className={`text-neutral-500 text-sm font-semibold ${labelClasses}`}>
+                <label htmlFor={uuid} className={`text-neutral-500 text-sm font-semibold ${descriptionClasses}`}>
                     {description}
                 </label>
             </div>
diff --git a/resources/scripts/components/elements/SwitchV2Container.tsx b/resources/scripts/components/elements/SwitchV2Container.tsx
index 2a421b312..53e19b12b 100644
--- a/resources/scripts/components/elements/SwitchV2Container.tsx
+++ b/resources/scripts/components/elements/SwitchV2Container.tsx
@@ -12,7 +12,7 @@ export interface SwitchProps {
 
 const SwitchV2Container = ({ name, label, description, defaultChecked, readOnly, onChange }: SwitchProps) => {
     return (
-        <ItemContainer label={label} description={description}>
+        <ItemContainer title={label} description={description}>
             <Switch
                 name={name}
                 onCheckedChange={(checked) => {
diff --git a/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx b/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
index 7a5ee944b..c6080b40b 100644
--- a/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
+++ b/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
@@ -53,7 +53,7 @@ export default ({ scheduleId, onDeleted }: Props) => {
             </Dialog.Confirm>
             <Button.Danger
                 variant={Button.Variants.Secondary}
-                className={'flex-1 sm:flex-none mr-4 border-transparent'}
+                className={'flex-1 sm:flex-none border-transparent'}
                 onClick={() => setVisible(true)}
             >
                 Delete
diff --git a/resources/scripts/components/server/schedules/EditScheduleModal.tsx b/resources/scripts/components/server/schedules/EditScheduleModal.tsx
index 84b7247fd..87cb982a3 100644
--- a/resources/scripts/components/server/schedules/EditScheduleModal.tsx
+++ b/resources/scripts/components/server/schedules/EditScheduleModal.tsx
@@ -122,7 +122,7 @@ const EditScheduleModal = ({ schedule }: Props) => {
                         <a href='https://crontab.guru/' target='_blank' rel='noreferrer'>
                             <ItemContainer
                                 description={'Online editor for cron schedule experessions.'}
-                                label={'Crontab Guru'}
+                                title={'Crontab Guru'}
                                 // defaultChecked={showCheatsheet}
                                 // onChange={() => setShowCheetsheet((s) => !s)}
                                 labelClasses='cursor-pointer'
diff --git a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
index 419c42c07..1381f685c 100644
--- a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
@@ -19,12 +19,10 @@ import getServerSchedule from '@/api/server/schedules/getServerSchedule';
 import { ServerContext } from '@/state/server';
 
 import useFlash from '@/plugins/useFlash';
+import ItemContainer from '@/components/elements/ItemContainer';
 
 const CronBox = ({ title, value }: { title: string; value: string }) => (
-    <div className={`bg-neutral-700 rounded p-3`}>
-        <p className={`text-neutral-300 text-sm`}>{title}</p>
-        <p className={`text-xl font-medium text-neutral-100`}>{value}</p>
-    </div>
+    <ItemContainer title={title} description={value} children={undefined} />
 );
 
 const ActivePill = ({ active }: { active: boolean }) => (
@@ -79,9 +77,9 @@ export default () => {
                 <>
                     <div className={`rounded shadow`}>
                         <div
-                            className={`bg-[#ffffff09] border-[1px] border-[#ffffff11] flex items-center p-6 rounded-2xl`}
+                            className={`bg-[#ffffff09] border-[1px] border-[#ffffff11] flex items-center place-content-between flex-col md:flex-row gap-6 p-6 rounded-2xl mb-6`}
                         >
-                            <div className={`flex-1`}>
+                            <div className={`flex-none self-start`}>
                                 <h3 className={`flex items-center text-neutral-100 text-2xl`}>
                                     {schedule.name}
                                     {schedule.isProcessing ? (
@@ -94,57 +92,58 @@ export default () => {
                                         <ActivePill active={schedule.isActive} />
                                     )}
                                 </h3>
-                                <p className={`mt-1 text-sm text-neutral-200`}>
-                                    Last run at:&nbsp;
+                                <p className={`mt-1 text-sm`}>
+                                    <strong>Last run at:&nbsp;</strong>
                                     {schedule.lastRunAt ? (
                                         format(schedule.lastRunAt, "MMM do 'at' h:mma")
                                     ) : (
-                                        <span className={`text-neutral-300`}>n/a</span>
+                                        <span>N/A</span>
+                                    )}
+
+                                    <br className={`sm:invisible`} />
+                                    
+                                    <strong>Next run at:&nbsp;</strong>
+                                    {schedule.nextRunAt ? (
+                                        format(schedule.nextRunAt, "MMM do 'at' h:mma")
+                                    ) : (
+                                        <span>N/A</span>
                                     )}
-                                    <span className={`ml-4 pl-4 border-l-4 border-neutral-600 py-px`}>
-                                        Next run at:&nbsp;
-                                        {schedule.nextRunAt ? (
-                                            format(schedule.nextRunAt, "MMM do 'at' h:mma")
-                                        ) : (
-                                            <span className={`text-neutral-300`}>n/a</span>
-                                        )}
-                                    </span>
                                 </p>
                             </div>
-                            <div className={`flex sm:block mt-3 sm:mt-0`}>
+                            <div className={`flex flex-col gap-2 md:min-w-60 min-w-full`}>
                                 <Can action={'schedule.update'}>
-                                    <Button.Text className={'flex-1 mr-4'} onClick={toggleEditModal}>
+                                    <Button.Text onClick={toggleEditModal} className={'flex-1'}>
                                         Edit
                                     </Button.Text>
                                     <NewTaskButton schedule={schedule} />
                                 </Can>
                             </div>
                         </div>
-                        <div className={`hidden sm:grid grid-cols-5 md:grid-cols-5 gap-4 mb-4 mt-4`}>
+                        <div className={`hidden sm:grid grid-cols-5 md:grid-cols-5 gap-4 mb-6`}>
                             <CronBox title={'Minute'} value={schedule.cron.minute} />
                             <CronBox title={'Hour'} value={schedule.cron.hour} />
                             <CronBox title={'Day (Month)'} value={schedule.cron.dayOfMonth} />
                             <CronBox title={'Month'} value={schedule.cron.month} />
                             <CronBox title={'Day (Week)'} value={schedule.cron.dayOfWeek} />
                         </div>
-                        <div className={`bg-neutral-700 rounded-b`}>
+                        <div>
                             {schedule.tasks.length > 0
                                 ? schedule.tasks
-                                      .sort((a, b) =>
-                                          a.sequenceId === b.sequenceId ? 0 : a.sequenceId > b.sequenceId ? 1 : -1,
-                                      )
-                                      .map((task) => (
-                                          <ScheduleTaskRow
-                                              key={`${schedule.id}_${task.id}`}
-                                              task={task}
-                                              schedule={schedule}
-                                          />
-                                      ))
+                                    .sort((a, b) =>
+                                        a.sequenceId === b.sequenceId ? 0 : a.sequenceId > b.sequenceId ? 1 : -1,
+                                    )
+                                    .map((task) => (
+                                        <ScheduleTaskRow
+                                            key={`${schedule.id}_${task.id}`}
+                                            task={task}
+                                            schedule={schedule}
+                                        />
+                                    ))
                                 : null}
                         </div>
                     </div>
                     <EditScheduleModal visible={showEditModal} schedule={schedule} onModalDismissed={toggleEditModal} />
-                    <div className={`mt-6 flex sm:justify-end`}>
+                    <div className={`mt-6 gap-3 flex sm:justify-end`}>
                         <Can action={'schedule.delete'}>
                             <DeleteScheduleButton
                                 scheduleId={schedule.id}
diff --git a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
index b86beee5c..71bdadc39 100644
--- a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
@@ -14,6 +14,7 @@ import { Schedule, Task } from '@/api/server/schedules/getServerSchedules';
 import { ServerContext } from '@/state/server';
 
 import useFlash from '@/plugins/useFlash';
+import ItemContainer from '@/components/elements/ItemContainer';
 
 interface Props {
     schedule: Schedule;
@@ -61,7 +62,7 @@ export default ({ schedule, task }: Props) => {
     const [title] = getActionDetails(task.action);
 
     return (
-        <div className={`sm:flex items-center p-3 sm:p-6 border-b border-zinc-800`}>
+        <ItemContainer title={title} description={task.payload} divClasses={`mb-2`}>
             <SpinnerOverlay visible={isLoading} fixed size={'large'} />
             <TaskDetailsModal
                 schedule={schedule}
@@ -79,7 +80,7 @@ export default ({ schedule, task }: Props) => {
                 Are you sure you want to delete this task? This action cannot be undone.
             </ConfirmationModal>
             {/* <FontAwesomeIcon icon={icon} className={`text-lg text-white hidden md:block`} /> */}
-            <div className={`flex-none sm:flex-1 w-full sm:w-auto overflow-x-auto`}>
+            {/* <div className={`flex-none sm:flex-1 w-full sm:w-auto overflow-x-auto`}>
                 <p className={`md:ml-6 text-zinc-200 uppercase text-sm`}>{title}</p>
                 {task.payload && (
                     <div className={`md:ml-6 mt-2`}>
@@ -93,20 +94,20 @@ export default ({ schedule, task }: Props) => {
                         </div>
                     </div>
                 )}
-            </div>
-            <div className={`mt-3 sm:mt-0 flex items-center w-full sm:w-auto`}>
+            </div> */}
+            <div className={`flex flex-none items-end flex-col sm:flex-row`}>
                 {task.continueOnFailure && (
-                    <div className={`mr-6`}>
+                    <div className={`sm:mr-6`}>
                         <div
-                            className={`flex items-center px-2 py-1 bg-yellow-500 text-yellow-800 text-sm rounded-full`}
+                            className={`px-2 py-1 bg-yellow-500 text-yellow-800 text-sm rounded-full`}
                         >
                             Continues on Failure
                         </div>
                     </div>
                 )}
                 {task.sequenceId > 1 && task.timeOffset > 0 && (
-                    <div className={`mr-6`}>
-                        <div className={`flex items-center px-2 py-1 bg-zinc-500 text-sm rounded-full`}>
+                    <div className={`sm:mr-6`}>
+                        <div className={`px-2 py-1 bg-zinc-500 text-sm rounded-full`}>
                             {task.timeOffset}s later
                         </div>
                     </div>
@@ -134,6 +135,6 @@ export default ({ schedule, task }: Props) => {
                     </button>
                 </Can>
             </div>
-        </div>
+        </ItemContainer>
     );
 };