updated programming page

markdavella · Apr 17, 2024 · d900702 · d900702
1 parent e633099
commit d900702
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 69 deletions.
diff --git a/web/src/components/channel_config/ChannelProgrammingConfig.tsx b/web/src/components/channel_config/ChannelProgrammingConfig.tsx
@@ -1,14 +1,10 @@
-import { Box, Button, Paper, Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import { DateTimePicker } from '@mui/x-date-pickers';
 import dayjs, { Dayjs } from 'dayjs';
 import { createContext, useState } from 'react';
 import { useSlideSchedule } from '../../hooks/programming_controls/useSlideSchedule.ts';
 import { usePreloadedChannelEdit } from '../../hooks/usePreloadedChannel.ts';
-import {
-  resetLineup,
-  setChannelStartTime,
-} from '../../store/channelEditor/actions.ts';
-import useStore from '../../store/index.ts';
+import { setChannelStartTime } from '../../store/channelEditor/actions.ts';
 import AddProgrammingButton from './AddProgrammingButton.tsx';
 import AdjustScheduleControls from './AdjustScheduleControls.tsx';
 import ChannelProgrammingList from './ChannelProgrammingList.tsx';
@@ -28,7 +24,6 @@ export const ScheduleControlsContext = createContext<ScheduleControlsType>({
 export function ChannelProgrammingConfig() {
   const { currentEntity: channel } = usePreloadedChannelEdit();
 
-  const programsDirty = useStore((s) => s.channelEditor.dirty.programs);
   const slideSchedule = useSlideSchedule();
 
   const handleStartTimeChange = (value: Dayjs | null) => {
@@ -56,60 +51,52 @@ export function ChannelProgrammingConfig() {
       }}
     >
       <Box display="flex" flexDirection="column">
-        <Paper sx={{ p: 2 }}>
-          <Box display="flex" justifyContent={'flex-start'}></Box>
+        <Box display="flex" justifyContent={'flex-start'}></Box>
 
-          <Stack
-            direction={{ xs: 'column', sm: 'row' }}
-            gap={{ xs: 1 }}
-            sx={{
-              display: 'flex',
-              pt: 1,
-              mb: 2,
-              columnGap: 1,
-              alignItems: 'center',
-            }}
-          >
-            <Box sx={{ mr: { sm: 2 }, flexGrow: 1 }}>
-              <DateTimePicker
-                label="Programming Start"
-                value={startTime}
-                onChange={(newDateTime) => handleStartTimeChange(newDateTime)}
-                slotProps={{ textField: { size: 'small' } }}
-              />
-            </Box>
-            {showScheduleControls && (
-              <Stack
-                direction={{ xs: 'column', sm: 'row' }}
-                sx={{
-                  display: 'flex',
-                  pt: 1,
-                  mb: 2,
-                  columnGap: 1,
-                  alignItems: 'center',
-                  justifyContent: 'flex-end',
-                  flexGrow: 1,
-                }}
-              >
-                <AdjustScheduleControls />
-              </Stack>
-            )}
-            <Button
-              variant="contained"
-              onClick={() => resetLineup()}
-              disabled={!programsDirty}
+        <Stack
+          direction={{ xs: 'column', sm: 'row' }}
+          gap={{ xs: 1 }}
+          sx={{
+            display: 'flex',
+            pt: 1,
+            mb: 2,
+            columnGap: 1,
+            alignItems: 'center',
+          }}
+        >
+          <Box sx={{ mr: { sm: 2 }, flexGrow: 1 }}>
+            <DateTimePicker
+              label="Programming Start"
+              value={startTime}
+              onChange={(newDateTime) => handleStartTimeChange(newDateTime)}
+              slotProps={{ textField: { size: 'small' } }}
+            />
+          </Box>
+          {showScheduleControls && (
+            <Stack
+              direction={{ xs: 'column', sm: 'row' }}
+              sx={{
+                display: 'flex',
+                pt: 1,
+                mb: 2,
+                columnGap: 1,
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+                flexGrow: 1,
+              }}
             >
-              Reset
-            </Button>
-            <ChannelProgrammingTools />
-            <ChannelProgrammingSort />
-            <AddProgrammingButton />
-          </Stack>
+              <AdjustScheduleControls />
+            </Stack>
+          )}
 
-          <ChannelProgrammingList
-            virtualListProps={{ width: '100%', height: 600, itemSize: 35 }}
-          />
-        </Paper>
+          <ChannelProgrammingTools />
+          <ChannelProgrammingSort />
+          <AddProgrammingButton />
+        </Stack>
+
+        <ChannelProgrammingList
+          virtualListProps={{ width: '100%', height: 600, itemSize: 35 }}
+        />
       </Box>
     </ScheduleControlsContext.Provider>
   );

diff --git a/web/src/pages/channels/ChannelProgrammingPage.tsx b/web/src/pages/channels/ChannelProgrammingPage.tsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   CircularProgress,
+  Paper,
   Snackbar,
   Typography,
 } from '@mui/material';
@@ -11,14 +12,17 @@ import { UpdateChannelProgrammingRequest } from '@tunarr/types/api';
 import { ZodiosError } from '@zodios/core';
 import { chain, findIndex, first, isUndefined, map } from 'lodash-es';
 import { useState } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
 import Breadcrumbs from '../../components/Breadcrumbs.tsx';
 import { ChannelProgrammingConfig } from '../../components/channel_config/ChannelProgrammingConfig.tsx';
 import { apiClient } from '../../external/api.ts';
 import { channelProgramUniqueId } from '../../helpers/util.ts';
 import { usePreloadedChannelEdit } from '../../hooks/usePreloadedChannel.ts';
 import { useUpdateChannel } from '../../hooks/useUpdateChannel.ts';
-import { resetCurrentLineup } from '../../store/channelEditor/actions.ts';
+import {
+  resetCurrentLineup,
+  resetLineup,
+} from '../../store/channelEditor/actions.ts';
+import useStore from '../../store/index.ts';
 
 type MutateArgs = {
   channelId: string;
@@ -38,6 +42,8 @@ export default function ChannelProgrammingPage() {
     programList: newLineup,
   } = usePreloadedChannelEdit();
 
+  const programsDirty = useStore((s) => s.channelEditor.dirty.programs);
+
   const queryClient = useQueryClient();
   const theme = useTheme();
 
@@ -148,15 +154,30 @@ export default function ChannelProgrammingPage() {
       <Typography variant="h4" sx={{ mb: 2 }}>
         Channel {channel.number} Programming
       </Typography>
-      <ChannelProgrammingConfig />
-      <Box sx={{ display: 'flex', justifyContent: 'end', pt: 1, columnGap: 1 }}>
-        <Button variant="contained" to="/channels" component={RouterLink}>
-          Cancel
-        </Button>
-        <Button variant="contained" onClick={() => onSave()}>
-          Save
-        </Button>
-      </Box>
+      <Paper sx={{ p: 2 }}>
+        <ChannelProgrammingConfig />
+
+        <Box
+          sx={{ display: 'flex', justifyContent: 'end', pt: 1, columnGap: 1 }}
+        >
+          {programsDirty && (
+            <Button
+              variant="contained"
+              onClick={() => resetLineup()}
+              disabled={!programsDirty}
+            >
+              Reset Changes
+            </Button>
+          )}
+          <Button
+            variant="contained"
+            onClick={() => onSave()}
+            disabled={!programsDirty}
+          >
+            Save
+          </Button>
+        </Box>
+      </Paper>
     </div>
   );
 }