Typing and Density settings
This commit is contained in:
Sean Edmunds
@@ -3,17 +3,16 @@ import {
|
||||
Divider,
|
||||
Group,
|
||||
Modal,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from '@mantine/core';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { modalClasses, selectClasses, textInputClasses } from 'styles';
|
||||
import { modalClasses, textInputClasses } from 'styles';
|
||||
import type { Theme } from 'types';
|
||||
import ThemeMiniCard from './ThemeMiniCard';
|
||||
import TimeOfDay from './TimeOfDay';
|
||||
|
||||
function ThemePlaylistModal({
|
||||
opened,
|
||||
@@ -35,12 +34,12 @@ function ThemePlaylistModal({
|
||||
const { theme, isMobile, modalStyle } = useCommonHooks();
|
||||
const [themeList, setThemeList] = useState<any>('[]');
|
||||
useEffect(() => {
|
||||
if (selectedPlaylist.themeList) {
|
||||
if (selectedPlaylist?.themeList) {
|
||||
setThemeList(JSON.parse(selectedPlaylist?.themeList));
|
||||
}
|
||||
}, [selectedPlaylist]);
|
||||
|
||||
if (selectedPlaylist.name === undefined) {
|
||||
if (selectedPlaylist?.name === undefined) {
|
||||
setSelectedPlaylist({
|
||||
name: 'New Playlist',
|
||||
themeList: '[]',
|
||||
@@ -69,8 +68,8 @@ function ThemePlaylistModal({
|
||||
<TextInput
|
||||
className={textInputClasses.default}
|
||||
classNames={textInputClasses}
|
||||
value={selectedPlaylist.name}
|
||||
disabled={selectedPlaylist.name === 'Time of Day'}
|
||||
value={selectedPlaylist?.name}
|
||||
disabled={selectedPlaylist?.name === 'Time of Day'}
|
||||
onChange={(e) =>
|
||||
setSelectedPlaylist({ ...selectedPlaylist, name: e.target.value })
|
||||
}
|
||||
@@ -89,194 +88,71 @@ function ThemePlaylistModal({
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pt={8}>
|
||||
{selectedPlaylist.name === 'Time of Day' ? (
|
||||
<Stack>
|
||||
<Group>
|
||||
<Text w={'100px'}>00:00-05:59</Text>
|
||||
<Select
|
||||
labelProps={{ display: 'none' }}
|
||||
placeholder='Select Theme'
|
||||
defaultValue={themeList['0']}
|
||||
data={allThemes?.map((theme: Theme) => {
|
||||
return {
|
||||
value: `${theme.id}`,
|
||||
label: theme.name,
|
||||
};
|
||||
})}
|
||||
classNames={{
|
||||
input: selectClasses.menuSelectInput,
|
||||
label: selectClasses.menuSelectLabel,
|
||||
options: selectClasses.menuSelectOptions,
|
||||
option: selectClasses.menuSelectOption,
|
||||
}}
|
||||
onChange={(data) => {
|
||||
const newThemeList = themeList;
|
||||
newThemeList['0'] = data;
|
||||
createPlaylist({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/themePlaylists',
|
||||
body: {
|
||||
id: selectedPlaylist.id,
|
||||
name: selectedPlaylist.name,
|
||||
themeList: JSON.stringify(newThemeList),
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Group w={'100%'}>
|
||||
<Text w={'100px'}>06:00-11:59</Text>
|
||||
<Select
|
||||
labelProps={{ display: 'none' }}
|
||||
placeholder='Select Theme'
|
||||
defaultValue={themeList['1']}
|
||||
data={allThemes?.map((theme: Theme) => {
|
||||
return {
|
||||
value: `${theme.id}`,
|
||||
label: theme.name,
|
||||
};
|
||||
})}
|
||||
classNames={{
|
||||
input: selectClasses.menuSelectInput,
|
||||
label: selectClasses.menuSelectLabel,
|
||||
options: selectClasses.menuSelectOptions,
|
||||
option: selectClasses.menuSelectOption,
|
||||
}}
|
||||
onChange={(data) => {
|
||||
const newThemeList = themeList;
|
||||
newThemeList['1'] = data;
|
||||
createPlaylist({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/themePlaylists',
|
||||
body: {
|
||||
id: selectedPlaylist.id,
|
||||
name: selectedPlaylist.name,
|
||||
themeList: JSON.stringify(newThemeList),
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Group w={'100%'}>
|
||||
<Text w={'100px'}>12:00-17:59</Text>
|
||||
<Select
|
||||
labelProps={{ display: 'none' }}
|
||||
placeholder='Select Theme'
|
||||
defaultValue={themeList['2']}
|
||||
data={allThemes?.map((theme: Theme) => {
|
||||
return {
|
||||
value: `${theme.id}`,
|
||||
label: theme.name,
|
||||
};
|
||||
})}
|
||||
classNames={{
|
||||
input: selectClasses.menuSelectInput,
|
||||
label: selectClasses.menuSelectLabel,
|
||||
options: selectClasses.menuSelectOptions,
|
||||
option: selectClasses.menuSelectOption,
|
||||
}}
|
||||
onChange={(data) => {
|
||||
const newThemeList = themeList;
|
||||
newThemeList['2'] = data;
|
||||
createPlaylist({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/themePlaylists',
|
||||
body: {
|
||||
id: selectedPlaylist.id,
|
||||
name: selectedPlaylist.name,
|
||||
themeList: JSON.stringify(newThemeList),
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Group w={'100%'}>
|
||||
<Text w={'100px'}>18:00-23:59</Text>
|
||||
<Select
|
||||
labelProps={{ display: 'none' }}
|
||||
placeholder='Select Theme'
|
||||
defaultValue={themeList['3']}
|
||||
data={allThemes?.map((theme: Theme) => {
|
||||
return {
|
||||
value: `${theme.id}`,
|
||||
label: theme.name,
|
||||
};
|
||||
})}
|
||||
classNames={{
|
||||
input: selectClasses.menuSelectInput,
|
||||
label: selectClasses.menuSelectLabel,
|
||||
options: selectClasses.menuSelectOptions,
|
||||
option: selectClasses.menuSelectOption,
|
||||
}}
|
||||
onChange={(data) => {
|
||||
const newThemeList = themeList;
|
||||
newThemeList['3'] = data;
|
||||
createPlaylist({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/themePlaylists',
|
||||
body: {
|
||||
id: selectedPlaylist.id,
|
||||
name: selectedPlaylist.name,
|
||||
themeList: JSON.stringify(newThemeList),
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</Stack>
|
||||
{selectedPlaylist?.name === 'Time of Day' ? (
|
||||
<TimeOfDay
|
||||
createPlaylist={createPlaylist}
|
||||
themeList={themeList}
|
||||
allThemes={allThemes}
|
||||
selectedPlaylist={selectedPlaylist}
|
||||
/>
|
||||
) : (
|
||||
<SimpleGrid cols={3}>
|
||||
{selectedPlaylist.name !== 'Time of Day' &&
|
||||
allThemes?.map((miniTheme: Theme) => {
|
||||
const newThemeList = themeList;
|
||||
return (
|
||||
<Group
|
||||
key={miniTheme.id}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
filter:
|
||||
newThemeList && !newThemeList?.includes(miniTheme.id)
|
||||
? 'saturate(0)'
|
||||
: undefined,
|
||||
}}
|
||||
onClick={() => {
|
||||
const newSelectedPlaylist = { ...selectedPlaylist };
|
||||
if (themeList?.includes(miniTheme.id)) {
|
||||
newThemeList.splice(themeList.indexOf(miniTheme.id), 1);
|
||||
} else {
|
||||
newThemeList.push(miniTheme.id);
|
||||
}
|
||||
newSelectedPlaylist.themeList = JSON.stringify(newThemeList);
|
||||
setSelectedPlaylist(newSelectedPlaylist);
|
||||
}}
|
||||
>
|
||||
<ThemeMiniCard allThemes={allThemes} item={Number(miniTheme.id)} />
|
||||
</Group>
|
||||
);
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<>
|
||||
<SimpleGrid cols={3}>
|
||||
{selectedPlaylist?.name !== 'Time of Day' &&
|
||||
allThemes?.map((miniTheme: Theme) => {
|
||||
const newThemeList = themeList;
|
||||
return (
|
||||
<Group
|
||||
key={miniTheme.id}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
filter:
|
||||
newThemeList && !newThemeList?.includes(miniTheme.id)
|
||||
? 'saturate(0)'
|
||||
: undefined,
|
||||
}}
|
||||
onClick={() => {
|
||||
const newSelectedPlaylist = { ...selectedPlaylist };
|
||||
if (themeList?.includes(miniTheme.id)) {
|
||||
newThemeList.splice(themeList.indexOf(miniTheme.id), 1);
|
||||
} else {
|
||||
newThemeList.push(miniTheme.id);
|
||||
}
|
||||
newSelectedPlaylist.themeList = JSON.stringify(newThemeList);
|
||||
setSelectedPlaylist(newSelectedPlaylist);
|
||||
}}
|
||||
>
|
||||
<ThemeMiniCard
|
||||
allThemes={allThemes}
|
||||
item={Number(miniTheme.id)}
|
||||
/>
|
||||
</Group>
|
||||
);
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Divider color='black' my='sm' />
|
||||
<Group>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={handleSavePlaylist}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
handleClose();
|
||||
setThemeList('[]');
|
||||
setSelectedPlaylist({});
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</>
|
||||
)}
|
||||
<Divider color='black' my='sm' />
|
||||
<Group>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={handleSavePlaylist}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
handleClose();
|
||||
setThemeList('[]');
|
||||
setSelectedPlaylist({});
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
|
||||
Reference in New Issue
Block a user