Compare commits
2 Commits
83bfeda4ca
...
12223347d3
| Author | SHA1 | Date | |
|---|---|---|---|
| 12223347d3 | |||
| f9019ec508 |
@ -29,14 +29,7 @@
|
||||
"*.{ts,tsx,js,jsx,json}": "prettier --write"
|
||||
},
|
||||
"dependencies": {
|
||||
"@chakra-ui/cli": "3.3.1",
|
||||
"@chakra-ui/react": "3.3.1",
|
||||
"@emotion/react": "11.14.0",
|
||||
"allotment": "1.20.2",
|
||||
"css-mediaquery": "0.1.2",
|
||||
"dayjs": "1.11.13",
|
||||
"history": "5.3.0",
|
||||
"next-themes": "^0.4.4",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
"react-error-boundary": "5.0.0",
|
||||
@ -48,7 +41,6 @@
|
||||
"zustand": "5.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@chakra-ui/styled-system": "^2.12.0",
|
||||
"@playwright/test": "1.49.1",
|
||||
"@storybook/addon-actions": "8.4.7",
|
||||
"@storybook/addon-essentials": "8.4.7",
|
||||
@ -80,7 +72,6 @@
|
||||
"lint-staged": "15.3.0",
|
||||
"npm-check-updates": "^17.1.13",
|
||||
"prettier": "3.4.2",
|
||||
"puppeteer": "24.0.0",
|
||||
"react-is": "19.0.0",
|
||||
"storybook": "8.4.7",
|
||||
"ts-node": "10.9.2",
|
||||
|
||||
2068
front/pnpm-lock.yaml
generated
2068
front/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,128 +1,109 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
ChakraProvider,
|
||||
DialogBody,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogRoot,
|
||||
DialogTrigger,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectRoot,
|
||||
SelectTrigger,
|
||||
SelectValueText,
|
||||
Stack,
|
||||
Text,
|
||||
useDisclosure,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import { environment } from '@/environment';
|
||||
import { App as SpaApp } from '@/scene/App';
|
||||
import { USERS, USERS_COLLECTION } from '@/service/session';
|
||||
import { hashLocalData } from '@/utils/sso';
|
||||
import { Toaster } from './components/ui/toaster';
|
||||
import { systemTheme } from './theme/theme';
|
||||
import { CloseButton } from './components/ui/close-button';
|
||||
import { FullPage } from './ui';
|
||||
|
||||
const AppEnvHint = () => {
|
||||
const dialog = useDisclosure();
|
||||
const [selectUserTest, setSelectUserTest] = useState<string>('NO_USER');
|
||||
//const setUser = useRightsStore((store) => store.setUser);
|
||||
const buildEnv =
|
||||
process.env.NODE_ENV === 'development'
|
||||
? 'Development'
|
||||
: import.meta.env.VITE_DEV_ENV_NAME;
|
||||
const envName: Array<string> = [];
|
||||
!!buildEnv && envName.push(buildEnv);
|
||||
if (!envName.length) {
|
||||
return null;
|
||||
}
|
||||
const handleChange = (selectedOption) => {
|
||||
console.log(`SELECT: [${selectedOption.target.value}]`);
|
||||
setSelectUserTest(selectedOption.target.value);
|
||||
};
|
||||
const onClose = () => {
|
||||
dialog.onClose();
|
||||
if (selectUserTest == 'NO_USER') {
|
||||
window.location.href = `/${environment.applName}/sso/${hashLocalData()}/false/__LOGOUT__`;
|
||||
} else {
|
||||
window.location.href = `/${environment.applName}/sso/${hashLocalData()}/true/${USERS[selectUserTest]}`;
|
||||
}
|
||||
};
|
||||
// const AppEnvHint = () => {
|
||||
// const dialog = useDisclosure();
|
||||
// const [selectUserTest, setSelectUserTest] = useState<string>('NO_USER');
|
||||
// //const setUser = useRightsStore((store) => store.setUser);
|
||||
// const buildEnv =
|
||||
// process.env.NODE_ENV === 'development'
|
||||
// ? 'Development'
|
||||
// : import.meta.env.VITE_DEV_ENV_NAME;
|
||||
// const envName: Array<string> = [];
|
||||
// !!buildEnv && envName.push(buildEnv);
|
||||
// if (!envName.length) {
|
||||
// return null;
|
||||
// }
|
||||
// const handleChange = (selectedOption) => {
|
||||
// console.log(`SELECT: [${selectedOption.target.value}]`);
|
||||
// setSelectUserTest(selectedOption.target.value);
|
||||
// };
|
||||
// const onClose = () => {
|
||||
// dialog.onClose();
|
||||
// if (selectUserTest == 'NO_USER') {
|
||||
// window.location.href = `/${environment.applName}/sso/${hashLocalData()}/false/__LOGOUT__`;
|
||||
// } else {
|
||||
// window.location.href = `/${environment.applName}/sso/${hashLocalData()}/true/${USERS[selectUserTest]}`;
|
||||
// }
|
||||
// };
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
as="button"
|
||||
zIndex="100000"
|
||||
position="fixed"
|
||||
top="0"
|
||||
insetStart="0"
|
||||
insetEnd="0"
|
||||
h="2px"
|
||||
bg="warning.400"
|
||||
cursor="pointer"
|
||||
data-test-id="devtools"
|
||||
onClick={dialog.onOpen}
|
||||
>
|
||||
<Text
|
||||
position="fixed"
|
||||
top="0"
|
||||
insetStart="4"
|
||||
bg="warning.400"
|
||||
color="warning.900"
|
||||
fontSize="0.6rem"
|
||||
fontWeight="bold"
|
||||
px="10px"
|
||||
marginLeft="25%"
|
||||
borderBottomStartRadius="sm"
|
||||
borderBottomEndRadius="sm"
|
||||
textTransform="uppercase"
|
||||
>
|
||||
{envName.join(' : ')}
|
||||
</Text>
|
||||
</Box >
|
||||
<DialogRoot open={dialog.open} onOpenChange={dialog.onClose}>
|
||||
<DialogContent>
|
||||
<DialogHeader>Outils développeurs</DialogHeader>
|
||||
<DialogBody>
|
||||
<Stack>
|
||||
<Text>User</Text>
|
||||
<SelectRoot onChange={handleChange} collection={USERS_COLLECTION}>
|
||||
<SelectTrigger>
|
||||
<SelectValueText placeholder="Select test user" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{USERS_COLLECTION.items.map((value) => (
|
||||
<SelectItem item={value} key={value.value}>
|
||||
{value.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</SelectRoot>
|
||||
</Stack>
|
||||
</DialogBody>
|
||||
<DialogFooter>
|
||||
<Button onClick={onClose}>Close</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</DialogRoot>
|
||||
</>
|
||||
);
|
||||
};
|
||||
// return (
|
||||
// <>
|
||||
// <div style={{
|
||||
// zIndex: "100000",
|
||||
// position: "fixed",
|
||||
// top: "0",
|
||||
// height: "2px",
|
||||
// background: "warning.400",
|
||||
// cursor: "pointer"
|
||||
// }}
|
||||
// data-test-id="devtools"
|
||||
// onClick={dialog.onOpen}
|
||||
// >
|
||||
// <div style={{
|
||||
// position: "fixed",
|
||||
// top: "0",
|
||||
// background: "warning.400",
|
||||
// color: "warning.900",
|
||||
// fontSize: "0.6rem",
|
||||
// fontWeight: "bold",
|
||||
// paddingLeft: "10px",
|
||||
// paddingRight: "10px",
|
||||
// marginLeft: "25%",
|
||||
// borderRadius: "10px 0 10px 0",
|
||||
// textTransform: "uppercase",
|
||||
// }}
|
||||
// >
|
||||
// {envName.join(' : ')}
|
||||
// </div>
|
||||
// </div>
|
||||
// <Dialog.Root open={dialog.open} onOpenChange={dialog.onClose}>
|
||||
// <Dialog.Trigger asChild>
|
||||
// <Button>
|
||||
// {dialog.open ? "Close" : "Open"} Dialog
|
||||
// </Button>
|
||||
// </Dialog.Trigger>
|
||||
// <Portal>
|
||||
// <Dialog.Backdrop />
|
||||
// <Dialog.Positioner>
|
||||
// <Dialog.Content>
|
||||
// <Dialog.Title>Outils développeurs</Dialog.Title>
|
||||
// <Dialog.Description>
|
||||
// <HStack>
|
||||
// <Text>User</Text>
|
||||
// <Select.Root onChange={handleChange} collection={USERS_COLLECTION}>
|
||||
// <Select.Trigger>
|
||||
// <SelectValueText placeholder="Select test user" />
|
||||
// </Select.Trigger>
|
||||
// <Select.Content>
|
||||
// {USERS_COLLECTION.items.map((value) => (
|
||||
// <Select.Item item={value} key={value.value}>
|
||||
// {value.label}
|
||||
// </Select.Item>
|
||||
// ))}
|
||||
// </Select.Content>
|
||||
// </Select.Root>
|
||||
// </HStack>
|
||||
// </Dialog.Description>
|
||||
// <Dialog.CloseTrigger>
|
||||
// <Button onClick={onClose}>Apply</Button>
|
||||
// </Dialog.CloseTrigger>
|
||||
// </Dialog.Content>
|
||||
// </Dialog.Positioner>
|
||||
// </Portal>
|
||||
// </Dialog.Root>
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
|
||||
const App = () => {
|
||||
|
||||
return (
|
||||
<ChakraProvider value={systemTheme}>
|
||||
<AppEnvHint />
|
||||
<SpaApp />
|
||||
<Toaster />
|
||||
</ChakraProvider>
|
||||
<FullPage data-test-id="Full-root-page">
|
||||
{/* <AppEnvHint /> */}
|
||||
<SpaApp data-test-id="app" />
|
||||
{/* <Toaster /> */}
|
||||
</FullPage>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
import { SyntheticEvent, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
IconButton,
|
||||
SliderTrack,
|
||||
Text,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import {
|
||||
MdFastForward,
|
||||
MdFastRewind,
|
||||
@ -28,10 +22,10 @@ import { useSpecificArtists } from '@/service/Artist';
|
||||
import { useSpecificGender } from '@/service/Gender';
|
||||
import { useSpecificTrack } from '@/service/Track';
|
||||
import { DataUrlAccess } from '@/utils/data-url-access';
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
import { isNullOrUndefined } from '@/utils/validator';
|
||||
import { Icon } from './Icon';
|
||||
import { Slider } from './ui/slider';
|
||||
import { Flex, Text } from '@/ui';
|
||||
|
||||
export enum PlayMode {
|
||||
PLAY_ONE,
|
||||
@ -41,10 +35,10 @@ export enum PlayMode {
|
||||
}
|
||||
|
||||
const playModeIcon = {
|
||||
[PlayMode.PLAY_ONE]: <MdLooksOne style={{ width: "100%", height: "100%" }} />,
|
||||
[PlayMode.PLAY_ALL]: <MdTrendingFlat style={{ width: "100%", height: "100%" }} />,
|
||||
[PlayMode.PLAY_ONE_LOOP]: <MdRepeatOne style={{ width: "100%", height: "100%" }} />,
|
||||
[PlayMode.PLAY_ALL_LOOP]: <MdRepeat style={{ width: "100%", height: "100%" }} />,
|
||||
[PlayMode.PLAY_ONE]: <MdLooksOne size="30px" />,
|
||||
[PlayMode.PLAY_ALL]: <MdTrendingFlat size="30px" />,
|
||||
[PlayMode.PLAY_ONE_LOOP]: <MdRepeatOne size="30px" />,
|
||||
[PlayMode.PLAY_ALL_LOOP]: <MdRepeat size="30px" />,
|
||||
};
|
||||
|
||||
export type AudioPlayerProps = {};
|
||||
@ -83,11 +77,12 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
|
||||
: ''
|
||||
);
|
||||
}, [dataTrack, setMediaSource]);
|
||||
const backColor = useColorModeValue('back.100', 'back.800');
|
||||
const backColor = useColorThemeValue('back.100', 'back.800');
|
||||
const configButton = {
|
||||
borderRadius: 'full',
|
||||
backgroundColor: 'transparent',
|
||||
backgroundColor: '#00000000',
|
||||
_hover: {
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: 'brand.500',
|
||||
},
|
||||
width: "50px",
|
||||
@ -205,141 +200,133 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
|
||||
const onChangeStateToPause = () => {
|
||||
setIsPlaying(false);
|
||||
};
|
||||
const marks = () => {
|
||||
const minutes = Math.floor(duration / 60);
|
||||
const result: number[] = [];
|
||||
for (let i = 1; i <= minutes; i++) {
|
||||
result.push(60 * i);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{!isNullOrUndefined(trackOffset) && (
|
||||
<Flex
|
||||
position="absolute"
|
||||
height="150px"
|
||||
minHeight="150px"
|
||||
paddingY="5px"
|
||||
paddingX="10px"
|
||||
marginX="15px"
|
||||
bottom={0}
|
||||
left={0}
|
||||
right={0}
|
||||
zIndex={1000}
|
||||
borderWidth="1px"
|
||||
borderColor="brand.900"
|
||||
bgColor={backColor}
|
||||
borderTopRadius="10px"
|
||||
style={{
|
||||
position: "absolute",
|
||||
height: "150px",
|
||||
minHeight: "150px",
|
||||
padding: "5px 10px 5px 10px",
|
||||
margin: "0 15px 0 15px",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 1000,
|
||||
borderWidth: "1px",
|
||||
borderColor: "brand.900",
|
||||
backgroundColor: backColor,
|
||||
borderRadius: "10px 10px 0 0",
|
||||
}}
|
||||
direction="column"
|
||||
>
|
||||
<Text
|
||||
alignContent="left"
|
||||
fontSize="20px"
|
||||
fontWeight="bold"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
style={{
|
||||
alignContent: "left",
|
||||
userSelect: "none",
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
// noOfLines={1}
|
||||
>
|
||||
{dataTrack?.name ?? '???'}
|
||||
</Text>
|
||||
<Text
|
||||
alignContent="left"
|
||||
fontSize="16px"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
// noOfLines={1}
|
||||
style={{
|
||||
alignContent: "left",
|
||||
userSelect: "none",
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
//noOfLines:1
|
||||
}}
|
||||
>
|
||||
{dataArtists.map((data) => data.name).join(', ')} /{' '}
|
||||
{dataAlbum && dataAlbum?.name}
|
||||
{dataGender && ` / ${dataGender.name}`}
|
||||
</Text>
|
||||
<Box width="full" paddingX="15px">
|
||||
<Slider
|
||||
<Flex style={{ width: "full", padding: "0 15px 0 15px" }}>
|
||||
<>TODO ... </>
|
||||
{/* <Slider.Root
|
||||
defaultValue={[0]}
|
||||
value={[timeProgress]}
|
||||
min={0}
|
||||
max={duration}
|
||||
step={0.1}
|
||||
onValueChange={(e) => onSeek(e.value)}
|
||||
onChange={onSeek}
|
||||
variant="outline"
|
||||
colorPalette="brand"
|
||||
marks={marks()}
|
||||
//focusCapture={false}
|
||||
// focusThumbOnChange={false}
|
||||
>
|
||||
<SliderTrack bg="brand.200" height="10px" borderRadius="full">
|
||||
<SliderTrack bg="gray.200" height="10px" borderRadius="full">
|
||||
{/ * <SliderFilledTrack bg="brand.600" /> * /}
|
||||
</SliderTrack>
|
||||
</Slider>
|
||||
</Box>
|
||||
</Slider.Root> */}
|
||||
</Flex>
|
||||
<Flex>
|
||||
<Text
|
||||
alignContent="left"
|
||||
fontSize="16px"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
// noOfLines={1}
|
||||
style={{
|
||||
alignContent: "left",
|
||||
userSelect: "none",
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
// noOfLines={1},
|
||||
}}
|
||||
>
|
||||
{formatTime(timeProgress)}
|
||||
</Text>
|
||||
<Text alignContent="left" fontSize="16px" userSelect="none">
|
||||
<Text fontSize="16px" style={{ alignContent: "left", userSelect: "none" }}>
|
||||
{formatTime(duration)}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex gap="5px">
|
||||
{/* <Flex gap="5px">
|
||||
<IconButton
|
||||
{...configButton}
|
||||
aria-label={'Play'}
|
||||
onClick={onPlay}
|
||||
variant="ghost"
|
||||
>
|
||||
{isPlaying ? (
|
||||
<MdPause style={{ width: "100%", height: "100%" }} />
|
||||
<MdPause size="30px" />
|
||||
) : (
|
||||
<MdPlayArrow style={{ width: "100%", height: "100%" }} />
|
||||
<MdPlayArrow size="30px" />
|
||||
)}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
{...configButton}
|
||||
aria-label={'Stop'}
|
||||
onClick={onStop}
|
||||
variant="ghost"
|
||||
><MdStop style={{ width: "100%", height: "100%" }} /></IconButton>
|
||||
><MdStop size="30px" /></IconButton>
|
||||
<IconButton
|
||||
{...configButton}
|
||||
aria-label={'Previous track'}
|
||||
onClick={onNavigatePrevious}
|
||||
marginLeft="auto"
|
||||
variant="ghost"
|
||||
><MdNavigateBefore style={{ width: "100%", height: "100%" }} /> </IconButton>
|
||||
><MdNavigateBefore size="30px" /> </IconButton>
|
||||
<IconButton
|
||||
{...configButton}
|
||||
aria-label={'jump 15sec in past'}
|
||||
onClick={onFastRewind}
|
||||
variant="ghost"
|
||||
><MdFastRewind style={{ width: "100%", height: "100%" }} /></IconButton>
|
||||
><MdFastRewind size="30px" /></IconButton>
|
||||
<IconButton
|
||||
{...configButton}
|
||||
aria-label={'jump 15sec in future'}
|
||||
onClick={onFastForward}
|
||||
variant="ghost"
|
||||
><MdFastForward style={{ width: "100%", height: "100%" }} /></IconButton>
|
||||
<IconButton
|
||||
{...configButton}
|
||||
aria-label={'Next track'}
|
||||
marginRight="auto"
|
||||
onClick={onNavigateNext}
|
||||
variant="ghost"
|
||||
><MdNavigateNext style={{ width: "100%", height: "100%" }} /></IconButton>
|
||||
<IconButton
|
||||
{...configButton}
|
||||
aria-label={'continue to the end'}
|
||||
onClick={onTypePlay}
|
||||
variant="ghost"
|
||||
>{playModeIcon[playingMode]}</IconButton>
|
||||
</Flex>
|
||||
</Flex> */}
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
import { ReactElement, useEffect, useState } from 'react';
|
||||
|
||||
import { Box, BoxProps, Flex, FlexProps } from '@chakra-ui/react';
|
||||
import { Image } from '@chakra-ui/react';
|
||||
import { CSSProperties, ReactElement, useEffect, useState } from 'react';
|
||||
|
||||
import { DataUrlAccess } from '@/utils/data-url-access';
|
||||
import { Icon } from './Icon';
|
||||
import { ObjectId } from '@/back-api';
|
||||
import { DivProps, Flex } from '@/ui';
|
||||
|
||||
export type CoversProps = Omit<BoxProps, "iconEmpty"> & {
|
||||
export type CoversProps = Omit<DivProps, "iconEmpty"> & {
|
||||
data?: ObjectId[];
|
||||
size?: BoxProps["width"];
|
||||
size?: CSSProperties["width"];
|
||||
iconEmpty?: ReactElement;
|
||||
slideshow?: boolean;
|
||||
};
|
||||
@ -45,26 +43,28 @@ export const Covers = ({
|
||||
return <Icon icon={iconEmpty} sizeIcon={size} />;
|
||||
} else {
|
||||
return (
|
||||
<Box
|
||||
width={size}
|
||||
height={size}
|
||||
minHeight={size}
|
||||
minWidth={size}
|
||||
borderColor="blue"
|
||||
borderWidth="1px"
|
||||
margin="auto"
|
||||
<Flex
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
minHeight: size,
|
||||
minWidth: size,
|
||||
borderColor: "blue",
|
||||
borderWidth: "1px",
|
||||
margin: "auto",
|
||||
}}
|
||||
{...rest}
|
||||
></Box>
|
||||
></Flex>
|
||||
);
|
||||
}
|
||||
}
|
||||
if (slideshow === false || data.length === 1) {
|
||||
const url = DataUrlAccess.getThumbnailUrl(data[0]);
|
||||
return <Image loading="lazy" src={url} maxWidth={size} boxSize={size} /*{...rest}*/ />;
|
||||
return <></>;//<image loading="lazy" src={url} maxWidth={size} boxSize={size} /*{...rest}*/ />;
|
||||
}
|
||||
const urlCurrent = DataUrlAccess.getThumbnailUrl(data[currentImageIndex]);
|
||||
const urlPrevious = DataUrlAccess.getThumbnailUrl(data[previousImageIndex]);
|
||||
return <Flex
|
||||
return <></>/*<Flex
|
||||
position="relative"
|
||||
// {...rest}
|
||||
maxWidth={size}
|
||||
@ -95,5 +95,5 @@ export const Covers = ({
|
||||
opacity={topOpacity}
|
||||
zIndex={2}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>*/
|
||||
};
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
import { Box } from '@chakra-ui/react';
|
||||
import { Flex } from "@/ui";
|
||||
|
||||
export const EmptyEnd = () => {
|
||||
return (
|
||||
<Box
|
||||
width="full"
|
||||
height="25%"
|
||||
minHeight="250px"
|
||||
<Flex
|
||||
style={{
|
||||
width: "full",
|
||||
height: "25%",
|
||||
minHeight: "250px",
|
||||
}}
|
||||
// borderWidth="1px"
|
||||
// borderColor="red"
|
||||
></Box>
|
||||
></Flex>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
FlexProps,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import { Flex, FlexProps } from '@/ui';
|
||||
import { forwardRef, ReactNode } from 'react';
|
||||
|
||||
export type IconProps = FlexProps & {
|
||||
@ -12,27 +9,31 @@ export type IconProps = FlexProps & {
|
||||
};
|
||||
|
||||
export const Icon = forwardRef<HTMLDivElement, IconProps>(
|
||||
({ icon: IconEl, color, sizeIcon = '1em', ...rest }, ref) => {
|
||||
({ icon: IconEl, color, sizeIcon = '1em', style, ...rest }, ref) => {
|
||||
return (
|
||||
<Flex flex="none"
|
||||
minWidth={sizeIcon}
|
||||
minHeight={sizeIcon}
|
||||
maxWidth={sizeIcon}
|
||||
maxHeight={sizeIcon}
|
||||
<Flex
|
||||
align="center"
|
||||
padding="1px"
|
||||
ref={ref}
|
||||
style={{
|
||||
flex: "none",
|
||||
minWidth: sizeIcon,
|
||||
minHeight: sizeIcon,
|
||||
maxWidth: sizeIcon,
|
||||
maxHeight: sizeIcon,
|
||||
padding: "1px",
|
||||
...style
|
||||
}}
|
||||
{...rest}>
|
||||
<Box
|
||||
marginX="auto"
|
||||
width="100%"
|
||||
minWidth="100%"
|
||||
height="100%"
|
||||
color={color}
|
||||
asChild
|
||||
<Flex
|
||||
style={{
|
||||
margin: "0 auto 0 auto",
|
||||
width: "100%",
|
||||
minWidth: "100%",
|
||||
height: "100%",
|
||||
color: color,
|
||||
}}
|
||||
>
|
||||
{IconEl}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { ReactNode, useEffect } from 'react';
|
||||
|
||||
import { Flex, Image } from '@chakra-ui/react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
import background from '@/assets/images/ikon.svg';
|
||||
import { TOP_BAR_HEIGHT } from '@/components/TopBar/TopBar';
|
||||
import { Flex } from '@/ui';
|
||||
|
||||
export type LayoutProps = React.PropsWithChildren<unknown> & {
|
||||
topBar?: ReactNode;
|
||||
@ -20,30 +20,33 @@ export const PageLayout = ({ children }: LayoutProps) => {
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
minH={`calc(100vh - ${TOP_BAR_HEIGHT})`}
|
||||
maxH={`calc(100vh - ${TOP_BAR_HEIGHT})`}
|
||||
position="absolute"
|
||||
top={TOP_BAR_HEIGHT}
|
||||
bottom={0}
|
||||
left={0}
|
||||
right={0}
|
||||
minWidth="300px"
|
||||
zIndex={-1}
|
||||
style={{
|
||||
position: "absolute",
|
||||
minHeight: `calc(100vh - ${TOP_BAR_HEIGHT})`,
|
||||
maxHeight: `calc(100vh - ${TOP_BAR_HEIGHT})`,
|
||||
top: TOP_BAR_HEIGHT,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
minWidth: "300px",
|
||||
zIndex: -1,
|
||||
}}
|
||||
>
|
||||
<Image src={background} boxSize="90%" margin="auto" opacity="30%" />
|
||||
{/* <Image src={background} boxSize="90%" margin="auto" opacity="30%" /> */}
|
||||
</Flex>
|
||||
<Flex
|
||||
direction="column"
|
||||
overflowX="auto"
|
||||
overflowY="auto"
|
||||
minH={`calc(100vh - ${TOP_BAR_HEIGHT})`}
|
||||
maxH={`calc(100vh - ${TOP_BAR_HEIGHT})`}
|
||||
position="absolute"
|
||||
top={TOP_BAR_HEIGHT}
|
||||
bottom={0}
|
||||
left={0}
|
||||
right={0}
|
||||
minWidth="300px"
|
||||
style={{
|
||||
overflow: "auto",
|
||||
minHeight: `calc(100vh - ${TOP_BAR_HEIGHT})`,
|
||||
maxHeight: `calc(100vh - ${TOP_BAR_HEIGHT})`,
|
||||
position: "absolute",
|
||||
top: TOP_BAR_HEIGHT,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
minWidth: "300px",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Flex>
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
import React, { ReactNode, useEffect } from 'react';
|
||||
import { CSSProperties, useEffect } from 'react';
|
||||
|
||||
import { Flex, FlexProps } from '@chakra-ui/react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
import { PageLayout } from '@/components/Layout/PageLayout';
|
||||
import { colors } from '@/theme/colors';
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
import { Flex, FlexProps } from '@/ui';
|
||||
|
||||
export type LayoutProps = FlexProps & {
|
||||
children: ReactNode;
|
||||
width?: CSSProperties['width'];
|
||||
};
|
||||
|
||||
export const PageLayoutInfoCenter = ({
|
||||
children,
|
||||
width = '25%',
|
||||
width = "75%",
|
||||
style,
|
||||
...rest
|
||||
}: LayoutProps) => {
|
||||
const { pathname } = useLocation();
|
||||
@ -26,14 +27,17 @@ export const PageLayoutInfoCenter = ({
|
||||
<PageLayout>
|
||||
<Flex
|
||||
direction="column"
|
||||
margin="auto"
|
||||
minWidth={width}
|
||||
border="back.900"
|
||||
borderWidth="1px"
|
||||
borderRadius="8px"
|
||||
padding="10px"
|
||||
boxShadow={'0px 0px 16px ' + colors.back[900]}
|
||||
backgroundColor={useColorModeValue('#FFFFFF', '#000000')}
|
||||
style={{
|
||||
margin: "auto",
|
||||
width,
|
||||
border: "back.900",
|
||||
borderWidth: "1px",
|
||||
borderRadius: "8px",
|
||||
padding: "10px",
|
||||
boxShadow: '0px 0px 16px ' + colors.back[900],
|
||||
backgroundColor: useColorThemeValue('#FFFFFF', '#000000'),
|
||||
...style
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import {
|
||||
Group,
|
||||
Input,
|
||||
} from '@chakra-ui/react';
|
||||
import { MdSearch } from 'react-icons/md';
|
||||
|
||||
export type SearchInputProps = {
|
||||
@ -42,15 +38,15 @@ export const SearchInput = ({
|
||||
onSubmitValue(inputData);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<Group maxWidth="200px" marginLeft="auto" {...searchInputProperty}>
|
||||
<MdSearch color="gray.300" />
|
||||
<Input
|
||||
onFocus={onFocusKeep}
|
||||
onBlur={() => setTimeout(() => onFocusLost(), 200)}
|
||||
onChange={onChange}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
</Group>
|
||||
return (<></>
|
||||
//<Group maxWidth="200px" marginLeft="auto" {...searchInputProperty}>
|
||||
// <MdSearch color="gray.300" />
|
||||
// <Input
|
||||
// onFocus={onFocusKeep}
|
||||
// onBlur={() => setTimeout(() => onFocusLost(), 200)}
|
||||
// onChange={onChange}
|
||||
// onSubmit={onSubmit}
|
||||
// />
|
||||
//</Group>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,20 +1,9 @@
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
HStack,
|
||||
IconButton,
|
||||
Text,
|
||||
useDisclosure,
|
||||
Button,
|
||||
ConditionalValue,
|
||||
Span,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import {
|
||||
LuAlignJustify,
|
||||
LuArrowBigLeft,
|
||||
LuKeySquare,
|
||||
LuLogIn,
|
||||
LuLogOut,
|
||||
LuMoon,
|
||||
@ -26,25 +15,17 @@ import { useNavigate } from 'react-router-dom';
|
||||
import { useServiceContext } from '@/service/ServiceContext';
|
||||
import { SessionState } from '@/service/SessionState';
|
||||
import { colors } from '@/theme/colors';
|
||||
import { requestOpenSite, requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso';
|
||||
import { requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso';
|
||||
import { useSessionService } from '@/service/session';
|
||||
import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle } from 'react-icons/md';
|
||||
import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/menu';
|
||||
import { useColorMode, useColorModeValue } from '@/components/ui/color-mode';
|
||||
import {
|
||||
DrawerBody,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerRoot,
|
||||
} from '@/components/ui/drawer';
|
||||
import { useColorThemeValue, useTheme } from '@/theme/ThemeContext';
|
||||
import { useDisclosure } from '@/utils/disclosure';
|
||||
import { Button, Flex, Text } from '@/ui';
|
||||
|
||||
export const TOP_BAR_HEIGHT = '50px';
|
||||
|
||||
export const BUTTON_TOP_BAR_PROPERTY = {
|
||||
variant: "ghost" as ConditionalValue<"ghost" | "outline" | "solid" | "subtle" | "surface" | "plain" | undefined>,
|
||||
//colorPalette: "brand",
|
||||
fontSize: '20px',
|
||||
textTransform: 'uppercase',
|
||||
theme: '@menu',
|
||||
height: TOP_BAR_HEIGHT,
|
||||
};
|
||||
|
||||
@ -54,11 +35,11 @@ export type TopBarProps = {
|
||||
};
|
||||
|
||||
export const TopBar = ({ title, children }: TopBarProps) => {
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const { clearToken } = useSessionService();
|
||||
|
||||
const { session } = useServiceContext();
|
||||
const backColor = useColorModeValue('back.100', 'back.800');
|
||||
const backColor = useColorThemeValue('back.100', 'back.800');
|
||||
const drawerDisclose = useDisclosure();
|
||||
const onChangeTheme = () => {
|
||||
drawerDisclose.onOpen();
|
||||
@ -76,9 +57,6 @@ export const TopBar = ({ title, children }: TopBarProps) => {
|
||||
clearToken();
|
||||
requestSignOut();
|
||||
};
|
||||
const onKarso = (): void => {
|
||||
requestOpenSite();
|
||||
};
|
||||
const onSelectAdd = () => {
|
||||
navigate('/add');
|
||||
};
|
||||
@ -96,106 +74,104 @@ export const TopBar = ({ title, children }: TopBarProps) => {
|
||||
};
|
||||
return (
|
||||
<Flex
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
height={TOP_BAR_HEIGHT}
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
backgroundColor={backColor}
|
||||
gap="2"
|
||||
px="2"
|
||||
boxShadow={'0px 2px 4px ' + colors.back[900]}
|
||||
zIndex={200}
|
||||
align="center"
|
||||
justify="space-between"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: TOP_BAR_HEIGHT,
|
||||
backgroundColor: backColor,
|
||||
padding: "0 2 0 2",
|
||||
boxShadow: `0px 2px 4px ${colors.back[900]}`,
|
||||
zIndex: 200,
|
||||
}}
|
||||
>
|
||||
<Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onChangeTheme}>
|
||||
<HStack>
|
||||
<LuAlignJustify />
|
||||
<Text paddingLeft="3px" fontWeight="bold">
|
||||
Karusic
|
||||
</Text>
|
||||
</HStack>
|
||||
<LuAlignJustify />
|
||||
<Text style={{ padding: "0 0 0 3px" }} fontWeight="bold">
|
||||
Karusic
|
||||
</Text>
|
||||
</Button>
|
||||
{title && (
|
||||
<Text
|
||||
fontSize="20px"
|
||||
fontWeight="bold"
|
||||
textTransform="uppercase"
|
||||
marginRight="auto"
|
||||
userSelect="none"
|
||||
color="brand.500"
|
||||
style={{
|
||||
textTransform: "uppercase",
|
||||
marginRight: "auto",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
{children}
|
||||
<Flex right="0">
|
||||
<Flex style={{ right: 0 }}>
|
||||
{session?.state !== SessionState.CONNECTED && (
|
||||
<>
|
||||
<Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onSignIn}>
|
||||
<Button {...BUTTON_TOP_BAR_PROPERTY} /*{...THEME.Button.primary}*/ onClick={onSignIn}>
|
||||
<LuLogIn />
|
||||
<Text paddingLeft="3px" fontWeight="bold">
|
||||
<Text style={{ paddingLeft: "0 0 0 3px" }} fontWeight="bold">
|
||||
Sign-in
|
||||
</Text>
|
||||
</Button>
|
||||
<Button
|
||||
{...BUTTON_TOP_BAR_PROPERTY}
|
||||
onClick={onSignUp}
|
||||
disabled={true}
|
||||
// disabled={true}
|
||||
>
|
||||
<MdMore />
|
||||
<Text paddingLeft="3px" fontWeight="bold">
|
||||
<Text style={{ padding: "0 0 0 3px" }} fontWeight="bold">
|
||||
Sign-up
|
||||
</Text>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{session?.state === SessionState.CONNECTED && (
|
||||
<MenuRoot>
|
||||
<MenuTrigger asChild>
|
||||
{/* {session?.state === SessionState.CONNECTED && (
|
||||
<Menu.Root>
|
||||
<Menu.Trigger asChild>
|
||||
<IconButton
|
||||
asChild
|
||||
as={IconButton}
|
||||
aria-label="Options"
|
||||
{...BUTTON_TOP_BAR_PROPERTY}
|
||||
width={TOP_BAR_HEIGHT}
|
||||
><MdSupervisedUserCircle /></IconButton>
|
||||
</MenuTrigger>
|
||||
<MenuContent>
|
||||
<MenuItem value="user" valueText="user" color={useColorModeValue('brand.800', 'brand.200')}>
|
||||
</Menu.Trigger>
|
||||
<Menu.Content>
|
||||
<Menu.Item value="user" valueText="user" _hover={{}} color={useColorModeValue('brand.800', 'brand.200')}>
|
||||
<MdSupervisedUserCircle />
|
||||
<Box flex="1">Sign in as {session?.login ?? 'Fail'}</Box>
|
||||
</MenuItem>
|
||||
<MenuItem value="Settings" valueText="Settings" onClick={onSettings}><LuSettings />Settings</MenuItem>
|
||||
<MenuItem value="Help" valueText="Help" onClick={onHelp}><MdHelp /> Help</MenuItem>
|
||||
<MenuItem value="Sign-out" valueText="Sign-out" onClick={onSignOut}>
|
||||
</Menu.Item>
|
||||
<Menu.Item value="Settings" valueText="Settings" onClick={onSettings}><LuSettings />Settings</Menu.Item>
|
||||
<Menu.Item value="Help" valueText="Help" onClick={onHelp}><MdHelp /> Help</Menu.Item>
|
||||
<Menu.Item value="Sign-out" valueText="Sign-out" onClick={onSignOut}>
|
||||
<LuLogOut /> Sign-out
|
||||
</MenuItem>
|
||||
<MenuItem value="karso" valueText="Karso" onClick={onKarso}>
|
||||
<LuKeySquare /> Karso (SSO)
|
||||
</MenuItem>
|
||||
</Menu.Item>
|
||||
{colorMode === 'light' ? (
|
||||
<MenuItem value="set-dark" valueText="set-dark" onClick={toggleColorMode}>
|
||||
<Menu.Item value="set-dark" valueText="set-dark" onClick={toggleColorMode}>
|
||||
<LuMoon /> Set dark mode
|
||||
</MenuItem>
|
||||
</Menu.Item>
|
||||
) : (
|
||||
<MenuItem value="set-light" valueText="set-light" onClick={toggleColorMode}>
|
||||
<Menu.Item value="set-light" valueText="set-light" onClick={toggleColorMode}>
|
||||
<LuSun /> Set light mode
|
||||
</MenuItem>
|
||||
</Menu.Item>
|
||||
)}
|
||||
</MenuContent>
|
||||
</MenuRoot>
|
||||
)}
|
||||
</Menu.Content>
|
||||
</Menu.Root>
|
||||
)} */}
|
||||
</Flex>
|
||||
<DrawerRoot
|
||||
{/* <Drawer.Root
|
||||
placement="start"
|
||||
onOpenChange={drawerDisclose.onClose}
|
||||
open={drawerDisclose.open}
|
||||
data-testid="top-bar_drawer-root"
|
||||
>
|
||||
<DrawerContent
|
||||
data-testid="top-bar_drawer-content">
|
||||
<DrawerHeader
|
||||
<Drawer.Content
|
||||
data-test-id="top-bar_drawer-content">
|
||||
<Drawer.Header
|
||||
paddingY="auto"
|
||||
as="button"
|
||||
onClick={drawerDisclose.onClose}
|
||||
@ -204,57 +180,52 @@ export const TopBar = ({ title, children }: TopBarProps) => {
|
||||
color={useColorModeValue('brand.900', 'brand.50')}
|
||||
textTransform="uppercase"
|
||||
>
|
||||
<HStack
|
||||
{...BUTTON_TOP_BAR_PROPERTY} cursor="pointer">
|
||||
<HStack height={TOP_BAR_HEIGHT}>
|
||||
<LuArrowBigLeft />
|
||||
<Span paddingLeft="3px">
|
||||
<Text as="span" paddingLeft="3px">
|
||||
Karusic
|
||||
</Span>
|
||||
</Text>
|
||||
</HStack>
|
||||
</DrawerHeader>
|
||||
<DrawerBody paddingX="0px">
|
||||
<Box marginY="3" />
|
||||
</Drawer.Header>
|
||||
<Drawer.Body paddingX="0px">
|
||||
<Button
|
||||
background="#00000000"
|
||||
borderRadius="0px"
|
||||
onClick={onSelectHome}
|
||||
width="full"
|
||||
{...BUTTON_TOP_BAR_PROPERTY}
|
||||
>
|
||||
<MdHome style={{ width: "45px", height: "45px" }} />
|
||||
<MdHome />
|
||||
<Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
|
||||
Home
|
||||
</Text>
|
||||
</Button>
|
||||
<Box marginY="5" marginX="10" height="2px" background="brand.600" />
|
||||
<hr />
|
||||
<Button
|
||||
background="#00000000"
|
||||
borderRadius="0px"
|
||||
onClick={onSelectOnAir}
|
||||
width="full"
|
||||
{...BUTTON_TOP_BAR_PROPERTY}
|
||||
>
|
||||
<MdOutlinePlaylistPlay style={{ width: "45px", height: "45px" }} />
|
||||
<MdOutlinePlaylistPlay />
|
||||
<Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
|
||||
On air
|
||||
</Text>
|
||||
</Button>
|
||||
<Box marginY="5" marginX="10" height="2px" background="brand.600" />
|
||||
<hr />
|
||||
<Button
|
||||
background="#00000000"
|
||||
borderRadius="0px"
|
||||
onClick={onSelectAdd}
|
||||
width="full"
|
||||
{...BUTTON_TOP_BAR_PROPERTY}
|
||||
>
|
||||
<MdOutlineUploadFile style={{ width: "45px", height: "45px" }} />
|
||||
<MdOutlineUploadFile />
|
||||
<Text paddingLeft="3px" fontWeight="bold" marginRight="auto">
|
||||
Add Media
|
||||
</Text>
|
||||
</Button>
|
||||
</DrawerBody>
|
||||
</DrawerContent>
|
||||
</DrawerRoot>
|
||||
</Drawer.Body>
|
||||
</Drawer.Content>
|
||||
</Drawer.Root> */}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import { Flex, Span, Text } from '@chakra-ui/react';
|
||||
|
||||
import { LuDisc3 } from 'react-icons/lu';
|
||||
|
||||
import { Album } from '@/back-api';
|
||||
import { Covers } from '@/components/Cover';
|
||||
import { useCountTracksWithAlbumId } from '@/service/Track';
|
||||
import { BASE_WRAP_ICON_SIZE } from '@/constants/genericSpacing';
|
||||
import { Flex, Text } from '@/ui';
|
||||
import { Span } from '@/ui/Span';
|
||||
|
||||
export type DisplayAlbumProps = {
|
||||
dataAlbum?: Album;
|
||||
@ -25,7 +27,7 @@ export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
|
||||
data={dataAlbum?.covers}
|
||||
size={BASE_WRAP_ICON_SIZE}
|
||||
flex={1}
|
||||
iconEmpty={<LuDisc3 />}
|
||||
// TODO: iconEmpty={LuDisc3}
|
||||
/>
|
||||
<Flex
|
||||
direction="column"
|
||||
@ -33,26 +35,33 @@ export const DisplayAlbum = ({ dataAlbum }: DisplayAlbumProps) => {
|
||||
//maxWidth="150px"
|
||||
height="full"
|
||||
paddingLeft="5px"
|
||||
overflowX="hidden"
|
||||
flex={1}
|
||||
style={{
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Span
|
||||
textAlign="left"
|
||||
// align="left"
|
||||
fontSize="20px"
|
||||
fontWeight="bold"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
style={{
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
// noOfLines={[1, 2]}
|
||||
>
|
||||
{dataAlbum?.name}
|
||||
</Span>
|
||||
<Span
|
||||
textAlign="left"
|
||||
// align="left"
|
||||
fontSize="15px"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
style={{
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
// noOfLines={1}
|
||||
>
|
||||
{countTracksOfAnAlbum} track{countTracksOfAnAlbum >= 1 && 's'}
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
import { ReactNode, useState } from 'react';
|
||||
|
||||
import { LuMenu } from 'react-icons/lu';
|
||||
import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '../ui/menu';
|
||||
import { Button } from '../ui/button';
|
||||
|
||||
|
||||
export type MenuElement = {
|
||||
icon?: ReactNode;
|
||||
name: string;
|
||||
onClick: () => void;
|
||||
};
|
||||
@ -16,31 +12,28 @@ export type ContextMenuProps = {
|
||||
};
|
||||
|
||||
export const ContextMenu = ({ elements }: ContextMenuProps) => {
|
||||
if (!elements) {
|
||||
return <></>;
|
||||
}
|
||||
return (
|
||||
<MenuRoot
|
||||
data-testid="context-menu">
|
||||
<MenuTrigger asChild
|
||||
marginY="auto"
|
||||
marginRight="4px"
|
||||
data-testid="context-menu_trigger">
|
||||
{/* This is very stupid, we need to set as span to prevent a button in button... WTF */}
|
||||
<Button variant="ghost" color="brand.500">
|
||||
<LuMenu />
|
||||
</Button>
|
||||
</MenuTrigger>
|
||||
<MenuContent
|
||||
data-testid="context-menu_content">
|
||||
{elements?.map((data) => (
|
||||
<MenuItem key={data.name} value={data.name} onClick={data.onClick} height="65px" fontSize="25px"
|
||||
data-test-id="context-menu_item" >
|
||||
{data.icon}
|
||||
{data.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</MenuContent>
|
||||
</MenuRoot >
|
||||
);
|
||||
// if (!elements) {
|
||||
return <></>;
|
||||
// }
|
||||
// return (
|
||||
// <Menu.Root
|
||||
// data-testid="context-menu">
|
||||
// <Menu.Trigger asChild
|
||||
// data-testid="context-menu_trigger">
|
||||
// {/* This is very stupid, we need to set as span to prevent a button in button... WTF */}
|
||||
// <Button {...THEME.Button.primary} >
|
||||
// <LuMenu />
|
||||
// </Button>
|
||||
// </Menu.Trigger>
|
||||
// <Menu.Content
|
||||
// data-testid="context-menu_content">
|
||||
// {elements?.map((data) => (
|
||||
// <Menu.Item key={data.name} value={data.name} onClick={data.onClick}
|
||||
// data-testid="context-menu_item">
|
||||
// {data.name}
|
||||
// </Menu.Item>
|
||||
// ))}
|
||||
// </Menu.Content>
|
||||
// </Menu.Root >
|
||||
//);
|
||||
};
|
||||
|
||||
@ -3,14 +3,7 @@ import {
|
||||
RefObject,
|
||||
} from 'react';
|
||||
|
||||
import {
|
||||
Box,
|
||||
BoxProps,
|
||||
Center,
|
||||
Flex,
|
||||
HStack,
|
||||
Image,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import {
|
||||
MdHighlightOff,
|
||||
MdUploadFile,
|
||||
@ -19,6 +12,7 @@ import {
|
||||
import { FormGroup } from '@/components/form/FormGroup';
|
||||
import { UseFormidableReturn } from '@/components/form/Formidable';
|
||||
import { DataUrlAccess } from '@/utils/data-url-access';
|
||||
import { Flex, FlexProps } from '@/ui';
|
||||
|
||||
export type DragNdropProps = {
|
||||
onFilesSelected?: (file: File[]) => void;
|
||||
@ -58,40 +52,42 @@ export const DragNdrop = ({
|
||||
onUriSelected(listUri);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
width={width}
|
||||
height={height}
|
||||
border="2px"
|
||||
borderRadius="5px"
|
||||
borderStyle="dashed"
|
||||
onDrop={handleDrop}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
>
|
||||
<label htmlFor="browse">
|
||||
<Box paddingY="15%" height="100%" cursor="pointer">
|
||||
<Center>
|
||||
<MdUploadFile size="50%" />
|
||||
</Center>
|
||||
<Center>
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
id="browse"
|
||||
onChange={handleFileChange}
|
||||
//accept=".pdf,.docx,.pptx,.txt,.xlsx"
|
||||
multiple
|
||||
/>
|
||||
Browse files
|
||||
</Center>
|
||||
</Box>
|
||||
</label>
|
||||
</Box>
|
||||
);
|
||||
return <></>;
|
||||
/*
|
||||
return (
|
||||
<Box
|
||||
width={width}
|
||||
height={height}
|
||||
border="2px"
|
||||
borderRadius="5px"
|
||||
borderStyle="dashed"
|
||||
onDrop={handleDrop}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
>
|
||||
<label htmlFor="browse">
|
||||
<Box paddingY="15%" height="100%" cursor="pointer">
|
||||
<Center>
|
||||
<MdUploadFile size="50%" />
|
||||
</Center>
|
||||
<Center>
|
||||
<input
|
||||
type="file"
|
||||
hidden
|
||||
id="browse"
|
||||
onChange={handleFileChange}
|
||||
//accept=".pdf,.docx,.pptx,.txt,.xlsx"
|
||||
multiple
|
||||
/>
|
||||
Browse files
|
||||
</Center>
|
||||
</Box>
|
||||
</label>
|
||||
</Box>
|
||||
);
|
||||
*/
|
||||
};
|
||||
|
||||
export type CenterIconProps = BoxProps & {
|
||||
export type CenterIconProps = FlexProps & {
|
||||
icon: any;
|
||||
sizeIcon?: string;
|
||||
};
|
||||
@ -99,19 +95,22 @@ export type CenterIconProps = BoxProps & {
|
||||
export const CenterIcon = ({
|
||||
icon: IconEl,
|
||||
sizeIcon = '15px',
|
||||
style,
|
||||
...rest
|
||||
}: CenterIconProps) => {
|
||||
return (
|
||||
<Box position="relative" w={sizeIcon} h={sizeIcon} flex="none" {...rest}>
|
||||
<Box
|
||||
<Flex style={{ position: "relative", width: sizeIcon, height: sizeIcon, flex: "none", ...style }}
|
||||
{...rest}>
|
||||
{/*<Flex
|
||||
as={IconEl}
|
||||
w={sizeIcon}
|
||||
h={sizeIcon}
|
||||
position="absolute"
|
||||
top="50%"
|
||||
left="50%"
|
||||
transform="translate(-50%, -50%)"
|
||||
>{IconEl}</Box>
|
||||
</Box>
|
||||
/>*/}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
@ -142,20 +141,21 @@ export const FormCovers = ({
|
||||
isModify={form.isModify[variableName]}
|
||||
onRestore={() => form.restoreValue({ [variableName]: true })}
|
||||
{...rest}
|
||||
>
|
||||
<HStack wrap="wrap" width="full">
|
||||
> <></>
|
||||
{/* <HStack wrap="wrap" width="full">
|
||||
{urls.map((data, index) => (
|
||||
<Flex align="flex-start" key={data}>
|
||||
<Box width="125px" height="125px" position="relative">
|
||||
<Box width="125px" height="125px" position="absolute">
|
||||
<CenterIcon
|
||||
icon={MdHighlightOff}
|
||||
width="125px"
|
||||
sizeIcon="100%"
|
||||
zIndex="+1"
|
||||
color="#00000020"
|
||||
_hover={{ color: 'red' }}
|
||||
onClick={() => onRemove && onRemove(index)}
|
||||
><MdHighlightOff /></CenterIcon>
|
||||
/>
|
||||
</Box>
|
||||
<Image loading="lazy" src={data} boxSize="full" />
|
||||
</Box>
|
||||
@ -169,7 +169,7 @@ export const FormCovers = ({
|
||||
onUriSelected={onUriSelected}
|
||||
/>
|
||||
</Flex>
|
||||
</HStack>
|
||||
</HStack> */}
|
||||
</FormGroup>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Flex, Text } from '@/ui';
|
||||
import { Span } from '@/ui/Span';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
import { Flex, Text } from '@chakra-ui/react';
|
||||
import { MdErrorOutline, MdHelpOutline, MdRefresh } from 'react-icons/md';
|
||||
|
||||
export type FormGroupProps = {
|
||||
@ -23,20 +24,22 @@ export const FormGroup = ({
|
||||
onRestore,
|
||||
}: FormGroupProps) => (
|
||||
<Flex
|
||||
borderLeftWidth="3px"
|
||||
borderLeftColor={error ? 'red' : isModify ? 'blue' : '#00000000'}
|
||||
style={{
|
||||
borderLeftWidth: "3px",
|
||||
borderLeftColor: error ? 'red' : isModify ? 'blue' : '#00000000',
|
||||
}}
|
||||
paddingLeft="7px"
|
||||
paddingY="4px"
|
||||
padding="0 4px"
|
||||
direction="column"
|
||||
>
|
||||
<Flex direction="row" width="full" gap="52px">
|
||||
{!!label && (
|
||||
<Text marginRight="auto" fontWeight="bold">
|
||||
<Text style={{ marginRight: "auto" }} fontWeight="bold">
|
||||
{label}{' '}
|
||||
{isRequired && (
|
||||
<Text as="span" color="red.600">
|
||||
<Span color="red.600">
|
||||
*
|
||||
</Text>
|
||||
</Span>
|
||||
)}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import { RefObject } from 'react';
|
||||
|
||||
import { Input } from '@chakra-ui/react';
|
||||
|
||||
import { FormGroup } from '@/components/form/FormGroup';
|
||||
import { UseFormidableReturn } from '@/components/form/Formidable';
|
||||
import { Input } from '@/ui';
|
||||
|
||||
export type FormInputProps = {
|
||||
form: UseFormidableReturn;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { RefObject } from 'react';
|
||||
|
||||
|
||||
import { FormGroup } from '@/components/form/FormGroup';
|
||||
import { UseFormidableReturn } from '@/components/form/Formidable';
|
||||
import { NumberInputField, NumberInputProps, NumberInputRoot } from '../ui/number-input';
|
||||
|
||||
export type FormNumberProps = Pick<
|
||||
NumberInputProps,
|
||||
NumberInput.RootProps,
|
||||
'step' | 'defaultValue' | 'min' | 'max'
|
||||
> & {
|
||||
form: UseFormidableReturn;
|
||||
@ -27,26 +27,24 @@ export const FormNumber = ({
|
||||
defaultValue,
|
||||
...rest
|
||||
}: FormNumberProps) => {
|
||||
const onEvent = (value) => {
|
||||
form.setValues({ [variableName]: value.value });
|
||||
}
|
||||
return (
|
||||
<FormGroup
|
||||
isModify={form.isModify[variableName]}
|
||||
onRestore={() => form.restoreValue({ [variableName]: true })}
|
||||
{...rest}
|
||||
>
|
||||
<NumberInputRoot
|
||||
<></>
|
||||
{/* <NumberInput.Root
|
||||
ref={ref}
|
||||
value={form.values[variableName]}
|
||||
onValueChange={onEvent}
|
||||
onValueChange={(value) => form.setValues({ [variableName]: value })}
|
||||
step={step}
|
||||
defaultValue={defaultValue}
|
||||
min={min}
|
||||
max={max}
|
||||
>
|
||||
<NumberInputField />
|
||||
</NumberInputRoot>
|
||||
<NumberInput.Input />
|
||||
</NumberInput.Root> */}
|
||||
</FormGroup>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { Box } from '@chakra-ui/react';
|
||||
|
||||
import { FormSelect } from '@/components/form/FormSelect';
|
||||
import { useFormidable } from '@/components/form/Formidable';
|
||||
import { Flex } from '@/ui';
|
||||
|
||||
export default {
|
||||
title: 'Components/FormSelect',
|
||||
@ -94,7 +94,7 @@ export const DarkBackground = {
|
||||
render: () => {
|
||||
const form = useFormidable<BasicFormData>({});
|
||||
return (
|
||||
<Box p="4" color="white" bg="gray.800">
|
||||
<Flex style={{ padding: "4", color: "white", background: "gray.800" }}>
|
||||
<FormSelect
|
||||
label="Simple Title for (DarkBackground)"
|
||||
form={form}
|
||||
@ -105,7 +105,7 @@ export const DarkBackground = {
|
||||
{ id: 333, name: 'third item' },
|
||||
]}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { RefObject } from 'react';
|
||||
|
||||
import { Text } from '@chakra-ui/react';
|
||||
|
||||
import { FormGroup } from '@/components/form/FormGroup';
|
||||
import { UseFormidableReturn } from '@/components/form/Formidable';
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { Box } from '@chakra-ui/react';
|
||||
|
||||
import { FormSelectMultiple } from '@/components/form/FormSelectMultiple';
|
||||
import { useFormidable } from '@/components/form/Formidable';
|
||||
import { Flex } from '@/ui';
|
||||
|
||||
export default {
|
||||
title: 'Components/FormSelectMultipleMultiple',
|
||||
@ -94,7 +94,7 @@ export const DarkBackground = {
|
||||
render: () => {
|
||||
const form = useFormidable<BasicFormData>({});
|
||||
return (
|
||||
<Box p="4" color="white" bg="gray.800">
|
||||
<Flex style={{ padding: "4", color: "white", background: "gray.800" }}>
|
||||
<FormSelectMultiple
|
||||
label="Simple Title for (DarkBackground)"
|
||||
form={form}
|
||||
@ -105,7 +105,7 @@ export const DarkBackground = {
|
||||
{ id: 333, name: 'third item' },
|
||||
]}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { RefObject } from 'react';
|
||||
|
||||
import { Textarea } from '@chakra-ui/react';
|
||||
|
||||
import { FormGroup } from '@/components/form/FormGroup';
|
||||
import { UseFormidableReturn } from '@/components/form/Formidable';
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import { Flex, Text } from '@chakra-ui/react';
|
||||
|
||||
import { LuDisc3 } from 'react-icons/lu';
|
||||
|
||||
import { Gender } from '@/back-api';
|
||||
import { Covers } from '@/components/Cover';
|
||||
import { useCountTracksOfAGender } from '@/service/Track';
|
||||
import { Flex, Span, Text } from '@/ui';
|
||||
|
||||
export type DisplayGenderProps = {
|
||||
dataGender?: Gender;
|
||||
@ -23,7 +24,7 @@ export const DisplayGender = ({ dataGender }: DisplayGenderProps) => {
|
||||
data={dataGender?.covers}
|
||||
size="100"
|
||||
height="full"
|
||||
iconEmpty={<LuDisc3 />}
|
||||
//TODO: iconEmpty={LuDisc3}
|
||||
/>
|
||||
<Flex
|
||||
direction="column"
|
||||
@ -31,31 +32,36 @@ export const DisplayGender = ({ dataGender }: DisplayGenderProps) => {
|
||||
maxWidth="150px"
|
||||
height="full"
|
||||
paddingLeft="5px"
|
||||
overflowX="hidden"
|
||||
style={{
|
||||
overflowX: "hidden"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as="span"
|
||||
alignContent="left"
|
||||
<Span
|
||||
fontSize="20px"
|
||||
fontWeight="bold"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
style={{
|
||||
userSelect: "none",
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
alignContent: "left",
|
||||
}}
|
||||
|
||||
//TODO: noOfLines={[1, 2]}
|
||||
>
|
||||
{dataGender?.name}
|
||||
</Text>
|
||||
<Text
|
||||
as="span"
|
||||
alignContent="left"
|
||||
</Span>
|
||||
<Span
|
||||
fontSize="15px"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
style={{
|
||||
userSelect: "none",
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
alignContent: "left",
|
||||
}}
|
||||
//TODO: noOfLines={1}
|
||||
>
|
||||
{countTracksOnAGender} track{countTracksOnAGender >= 1 && 's'}
|
||||
</Text>
|
||||
</Span>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
import { useRef, useState } from 'react';
|
||||
|
||||
import {
|
||||
Flex,
|
||||
Text,
|
||||
useDisclosure,
|
||||
} from '@chakra-ui/react';
|
||||
import {
|
||||
MdAdminPanelSettings,
|
||||
MdDeleteForever,
|
||||
@ -24,9 +19,7 @@ import { useAlbumService, useSpecificAlbum } from '@/service/Album';
|
||||
import { useServiceContext } from '@/service/ServiceContext';
|
||||
import { useCountTracksWithAlbumId } from '@/service/Track';
|
||||
import { isNullOrUndefined } from '@/utils/validator';
|
||||
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
|
||||
import { Button } from '../ui/button';
|
||||
|
||||
import { useDisclosure } from '@/utils/disclosure';
|
||||
|
||||
export type AlbumEditPopUpProps = {};
|
||||
|
||||
@ -135,109 +128,110 @@ export const AlbumEditPopUp = ({ }: AlbumEditPopUpProps) => {
|
||||
})
|
||||
);
|
||||
};
|
||||
return (
|
||||
<DialogRoot
|
||||
//initialFocusRef={initialRef}
|
||||
//finalFocusRef={finalRef}
|
||||
//closeOnOverlayClick={false}
|
||||
//onOpenChange={onClose}
|
||||
open={true}
|
||||
data-testid="album-edit-pop-up"
|
||||
>
|
||||
{/* <DialogOverlay /> */}
|
||||
{/* <DialogCloseTrigger /> */}
|
||||
<DialogContent>
|
||||
<DialogHeader>Edit Album</DialogHeader>
|
||||
{/* <DialogCloseButton ref={finalRef} /> */}
|
||||
return <></>;
|
||||
// return (
|
||||
// <Dialog.Root
|
||||
// //initialFocusRef={initialRef}
|
||||
// //finalFocusRef={finalRef}
|
||||
// //closeOnOverlayClick={false}
|
||||
// onOpenChange={onClose}
|
||||
// open={true}
|
||||
// data-testid="album-edit-pop-up"
|
||||
// >
|
||||
// {/* <DialogOverlay /> */}
|
||||
// {/* <DialogCloseTrigger /> */}
|
||||
// <Dialog.Content>
|
||||
// <Dialog.Header>Edit Album</Dialog.Header>
|
||||
// {/* <DialogCloseButton ref={finalRef} /> */}
|
||||
|
||||
<DialogBody pb={6} gap="0px" paddingLeft="18px">
|
||||
{admin && (
|
||||
<>
|
||||
<FormGroup isRequired label="Id">
|
||||
<Text>{dataAlbum?.id}</Text>
|
||||
</FormGroup>
|
||||
{countTracksOfAnAlbum !== 0 && (
|
||||
<Flex paddingLeft="14px">
|
||||
<MdWarning color="red.600" />
|
||||
<Text paddingLeft="6px" color="red.600" fontWeight="bold">
|
||||
Can not remove album {countTracksOfAnAlbum} track(s) depend
|
||||
on it.
|
||||
</Text>
|
||||
</Flex>
|
||||
)}
|
||||
<FormGroup label="Action(s):">
|
||||
<Button
|
||||
onClick={disclosure.onOpen}
|
||||
marginRight="auto"
|
||||
colorPalette="@danger"
|
||||
disabled={countTracksOfAnAlbum !== 0}
|
||||
>
|
||||
<MdDeleteForever /> Remove Media
|
||||
</Button>
|
||||
</FormGroup>
|
||||
<ConfirmPopUp
|
||||
disclosure={disclosure}
|
||||
title="Remove album"
|
||||
body={`Remove Album [${dataAlbum?.id}] ${dataAlbum?.name}`}
|
||||
confirmTitle="Remove"
|
||||
onConfirm={onRemove}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{!admin && (
|
||||
<>
|
||||
<FormInput
|
||||
form={form}
|
||||
variableName="name"
|
||||
isRequired
|
||||
label="Title"
|
||||
ref={initialRef}
|
||||
/>
|
||||
<FormTextarea
|
||||
form={form}
|
||||
variableName="description"
|
||||
label="Description"
|
||||
/>
|
||||
<FormInput
|
||||
form={form}
|
||||
variableName="publication"
|
||||
label="Publication"
|
||||
/>
|
||||
<FormCovers
|
||||
form={form}
|
||||
variableName="covers"
|
||||
onFilesSelected={onFilesSelected}
|
||||
onUriSelected={onUriSelected}
|
||||
onRemove={onRemoveCover}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</DialogBody>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={() => setAdmin((value) => !value)}
|
||||
marginRight="auto"
|
||||
>
|
||||
{admin ? (
|
||||
<>
|
||||
<MdEdit />
|
||||
Edit
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MdAdminPanelSettings />
|
||||
Admin
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{!admin && form.isFormModified && (
|
||||
<Button colorScheme="blue" mr={3} onClick={onSave}>
|
||||
Save
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</DialogRoot>
|
||||
);
|
||||
// <Dialog.Body pb={6} gap="0px" paddingLeft="18px">
|
||||
// {admin && (
|
||||
// <>
|
||||
// <FormGroup isRequired label="Id">
|
||||
// <Text>{dataAlbum?.id}</Text>
|
||||
// </FormGroup>
|
||||
// {countTracksOfAnAlbum !== 0 && (
|
||||
// <Flex paddingLeft="14px">
|
||||
// <MdWarning color="red.600" />
|
||||
// <Text paddingLeft="6px" color="red.600" fontWeight="bold">
|
||||
// Can not remove album {countTracksOfAnAlbum} track(s) depend
|
||||
// on it.
|
||||
// </Text>
|
||||
// </Flex>
|
||||
// )}
|
||||
// <FormGroup label="Action(s):">
|
||||
// <Button
|
||||
// onClick={disclosure.onOpen}
|
||||
// marginRight="auto"
|
||||
// theme="@danger"
|
||||
// disabled={countTracksOfAnAlbum !== 0}
|
||||
// >
|
||||
// <MdDeleteForever /> Remove Media
|
||||
// </Button>
|
||||
// </FormGroup>
|
||||
// <ConfirmPopUp
|
||||
// disclosure={disclosure}
|
||||
// title="Remove album"
|
||||
// body={`Remove Album [${dataAlbum?.id}] ${dataAlbum?.name}`}
|
||||
// confirmTitle="Remove"
|
||||
// onConfirm={onRemove}
|
||||
// />
|
||||
// </>
|
||||
// )}
|
||||
// {!admin && (
|
||||
// <>
|
||||
// <FormInput
|
||||
// form={form}
|
||||
// variableName="name"
|
||||
// isRequired
|
||||
// label="Title"
|
||||
// ref={initialRef}
|
||||
// />
|
||||
// <FormTextarea
|
||||
// form={form}
|
||||
// variableName="description"
|
||||
// label="Description"
|
||||
// />
|
||||
// <FormInput
|
||||
// form={form}
|
||||
// variableName="publication"
|
||||
// label="Publication"
|
||||
// />
|
||||
// <FormCovers
|
||||
// form={form}
|
||||
// variableName="covers"
|
||||
// onFilesSelected={onFilesSelected}
|
||||
// onUriSelected={onUriSelected}
|
||||
// onRemove={onRemoveCover}
|
||||
// />
|
||||
// </>
|
||||
// )}
|
||||
// </Dialog.Body>
|
||||
// <Dialog.Footer>
|
||||
// <Button
|
||||
// onClick={() => setAdmin((value) => !value)}
|
||||
// marginRight="auto"
|
||||
// >
|
||||
// {admin ? (
|
||||
// <>
|
||||
// <MdEdit />
|
||||
// Edit
|
||||
// </>
|
||||
// ) : (
|
||||
// <>
|
||||
// <MdAdminPanelSettings />
|
||||
// Admin
|
||||
// </>
|
||||
// )}
|
||||
// </Button>
|
||||
// {!admin && form.isFormModified && (
|
||||
// <Button colorScheme="blue" mr={3} onClick={onSave}>
|
||||
// Save
|
||||
// </Button>
|
||||
// )}
|
||||
// <Button onClick={onClose}>Cancel</Button>
|
||||
// </Dialog.Footer>
|
||||
// </Dialog.Content>
|
||||
// </Dialog.Root>
|
||||
// );
|
||||
};
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
import { useRef, useState } from 'react';
|
||||
|
||||
import {
|
||||
Flex,
|
||||
Text,
|
||||
useDisclosure,
|
||||
Button,
|
||||
} from '@chakra-ui/react';
|
||||
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
|
||||
|
||||
import {
|
||||
MdAdminPanelSettings,
|
||||
MdDeleteForever,
|
||||
@ -26,6 +20,7 @@ import { useArtistService, useSpecificArtist } from '@/service/Artist';
|
||||
import { useServiceContext } from '@/service/ServiceContext';
|
||||
import { useCountTracksOfAnArtist } from '@/service/Track';
|
||||
import { isNullOrUndefined } from '@/utils/validator';
|
||||
import { useDisclosure } from '@/utils/disclosure';
|
||||
|
||||
export type ArtistEditPopUpProps = {};
|
||||
|
||||
@ -134,111 +129,110 @@ export const ArtistEditPopUp = ({ }: ArtistEditPopUpProps) => {
|
||||
);
|
||||
};
|
||||
return (
|
||||
<DialogRoot
|
||||
//initialFocusRef={initialRef}
|
||||
//finalFocusRef={finalRef}
|
||||
//closeOnOverlayClick={false}
|
||||
onOpenChange={onClose}
|
||||
open={true}
|
||||
data-testid="artist-edit-pop-up"
|
||||
>
|
||||
{/* <DialogOverlay /> */}
|
||||
<DialogContent>
|
||||
<DialogHeader>Edit Artist</DialogHeader>
|
||||
{/* <DialogCloseButton ref={finalRef} /> */}
|
||||
// <Dialog.Root
|
||||
// //initialFocusRef={initialRef}
|
||||
// //finalFocusRef={finalRef}
|
||||
// //closeOnOverlayClick={false}
|
||||
// onOpenChange={onClose}
|
||||
// open={true}
|
||||
// data-testid="artist-edit-pop-up"
|
||||
// >
|
||||
// {/* <DialogOverlay /> */}
|
||||
// <Dialog.Content>
|
||||
// <Dialog.Header>Edit Artist</Dialog.Header>
|
||||
// {/* <DialogCloseButton ref={finalRef} /> */}
|
||||
|
||||
<DialogBody pb={6} gap="0px" paddingLeft="18px">
|
||||
{admin && (
|
||||
<>
|
||||
<FormGroup isRequired label="Id">
|
||||
<Text>{dataArtist?.id}</Text>
|
||||
</FormGroup>
|
||||
{countTracksOnAnArtist !== 0 && (
|
||||
<Flex paddingLeft="14px">
|
||||
<MdWarning color="red.600" />
|
||||
<Text paddingLeft="6px" color="red.600" fontWeight="bold">
|
||||
Can not remove artist {countTracksOnAnArtist} track(s)
|
||||
depend on it.
|
||||
</Text>
|
||||
</Flex>
|
||||
)}
|
||||
<FormGroup label="Action(s):">
|
||||
<Button
|
||||
onClick={disclosure.onOpen}
|
||||
marginRight="auto"
|
||||
colorPalette="@danger"
|
||||
disabled={countTracksOnAnArtist !== 0}
|
||||
>
|
||||
<MdDeleteForever /> Remove Media
|
||||
</Button>
|
||||
</FormGroup>
|
||||
<ConfirmPopUp
|
||||
disclosure={disclosure}
|
||||
title="Remove artist"
|
||||
body={`Remove Artist [${dataArtist?.id}] ${dataArtist?.name}`}
|
||||
confirmTitle="Remove"
|
||||
onConfirm={onRemove}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{!admin && (
|
||||
<>
|
||||
<FormInput
|
||||
form={form}
|
||||
variableName="name"
|
||||
isRequired
|
||||
label="Artist name"
|
||||
ref={initialRef}
|
||||
/>
|
||||
<FormTextarea
|
||||
form={form}
|
||||
variableName="description"
|
||||
label="Description"
|
||||
/>
|
||||
<FormInput
|
||||
form={form}
|
||||
variableName="firstName"
|
||||
label="First Name"
|
||||
/>
|
||||
<FormInput form={form} variableName="surname" label="SurName" />
|
||||
<FormInput form={form} variableName="birth" label="Birth date" />
|
||||
<FormInput form={form} variableName="death" label="Death date" />
|
||||
<FormCovers
|
||||
form={form}
|
||||
variableName="covers"
|
||||
onFilesSelected={onFilesSelected}
|
||||
onUriSelected={onUriSelected}
|
||||
onRemove={onRemoveCover}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</DialogBody>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={() => setAdmin((value) => !value)}
|
||||
marginRight="auto"
|
||||
colorPalette={admin ? undefined : "@danger"}
|
||||
>
|
||||
{admin ? (
|
||||
<>
|
||||
<MdEdit />
|
||||
Edit
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MdAdminPanelSettings />
|
||||
Admin
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{!admin && form.isFormModified && (
|
||||
<Button colorScheme="blue" mr={3} onClick={onSave}>
|
||||
Save
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</DialogRoot>
|
||||
);
|
||||
// <Dialog.Body pb={6} gap="0px" paddingLeft="18px">
|
||||
// {admin && (
|
||||
// <>
|
||||
// <FormGroup isRequired label="Id">
|
||||
// <Text>{dataArtist?.id}</Text>
|
||||
// </FormGroup>
|
||||
// {countTracksOnAnArtist !== 0 && (
|
||||
// <Flex paddingLeft="14px">
|
||||
// <MdWarning color="red.600" />
|
||||
// <Text paddingLeft="6px" color="red.600" fontWeight="bold">
|
||||
// Can not remove artist {countTracksOnAnArtist} track(s)
|
||||
// depend on it.
|
||||
// </Text>
|
||||
// </Flex>
|
||||
// )}
|
||||
// <FormGroup label="Action(s):">
|
||||
// <Button
|
||||
// onClick={disclosure.onOpen}
|
||||
// marginRight="auto"
|
||||
// theme="@danger"
|
||||
// disabled={countTracksOnAnArtist !== 0}
|
||||
// >
|
||||
// <MdDeleteForever /> Remove Media
|
||||
// </Button>
|
||||
// </FormGroup>
|
||||
// <ConfirmPopUp
|
||||
// disclosure={disclosure}
|
||||
// title="Remove artist"
|
||||
// body={`Remove Artist [${dataArtist?.id}] ${dataArtist?.name}`}
|
||||
// confirmTitle="Remove"
|
||||
// onConfirm={onRemove}
|
||||
// />
|
||||
// </>
|
||||
// )}
|
||||
// {!admin && (
|
||||
// <>
|
||||
// <FormInput
|
||||
// form={form}
|
||||
// variableName="name"
|
||||
// isRequired
|
||||
// label="Artist name"
|
||||
// ref={initialRef}
|
||||
// />
|
||||
// <FormTextarea
|
||||
// form={form}
|
||||
// variableName="description"
|
||||
// label="Description"
|
||||
// />
|
||||
// <FormInput
|
||||
// form={form}
|
||||
// variableName="firstName"
|
||||
// label="First Name"
|
||||
// />
|
||||
// <FormInput form={form} variableName="surname" label="SurName" />
|
||||
// <FormInput form={form} variableName="birth" label="Birth date" />
|
||||
// <FormInput form={form} variableName="death" label="Death date" />
|
||||
// <FormCovers
|
||||
// form={form}
|
||||
// variableName="covers"
|
||||
// onFilesSelected={onFilesSelected}
|
||||
// onUriSelected={onUriSelected}
|
||||
// onRemove={onRemoveCover}
|
||||
// />
|
||||
// </>
|
||||
// )}
|
||||
// </Dialog.Body>
|
||||
// <Dialog.Footer>
|
||||
// <Button
|
||||
// onClick={() => setAdmin((value) => !value)}
|
||||
// marginRight="auto"
|
||||
// >
|
||||
// {admin ? (
|
||||
// <>
|
||||
// <MdEdit />
|
||||
// Edit
|
||||
// </>
|
||||
// ) : (
|
||||
// <>
|
||||
// <MdAdminPanelSettings />
|
||||
// Admin
|
||||
// </>
|
||||
// )}
|
||||
// </Button>
|
||||
// {!admin && form.isFormModified && (
|
||||
// <Button colorScheme="blue" mr={3} onClick={onSave}>
|
||||
// Save
|
||||
// </Button>
|
||||
// )}
|
||||
// <Button onClick={onClose}>Cancel</Button>
|
||||
// </Dialog.Footer>
|
||||
// </Dialog.Content>
|
||||
// </Dialog.Root>
|
||||
<></>);
|
||||
};
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
import { UseDisclosureReturn } from '@/utils/disclosure';
|
||||
import { useRef } from 'react';
|
||||
|
||||
import {
|
||||
Button,
|
||||
UseDisclosureReturn,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
|
||||
|
||||
export type ConfirmPopUpProps = {
|
||||
title: string;
|
||||
body: string;
|
||||
@ -26,29 +23,28 @@ export const ConfirmPopUp = ({
|
||||
disclosure.onClose();
|
||||
};
|
||||
const cancelRef = useRef<HTMLButtonElement>(null);
|
||||
return (
|
||||
<DialogRoot role="alertdialog"
|
||||
open={disclosure.open}
|
||||
//leastDestructiveRef={cancelRef}
|
||||
onOpenChange={disclosure.onClose}
|
||||
data-testid="confirm-pop-up"
|
||||
>
|
||||
<DialogContent>
|
||||
<DialogHeader fontSize="lg" fontWeight="bold">
|
||||
{title}
|
||||
</DialogHeader>
|
||||
|
||||
<DialogBody>{body}</DialogBody>
|
||||
|
||||
<DialogFooter>
|
||||
<Button onClick={disclosure.onClose} ref={cancelRef}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button colorScheme="red" onClick={onClickConfirm} ml={3}>
|
||||
{confirmTitle}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</DialogRoot>
|
||||
);
|
||||
return <></>;
|
||||
// return (
|
||||
// <Dialog.Root role="alertdialog"
|
||||
// open={disclosure.open}
|
||||
// //leastDestructiveRef={cancelRef}
|
||||
// onOpenChange={disclosure.onClose}
|
||||
// data-testid="confirm-pop-up"
|
||||
// >
|
||||
// <Dialog.Content>
|
||||
// <Dialog.Header fontSize="lg" fontWeight="bold">
|
||||
// {title}
|
||||
// </Dialog.Header>
|
||||
// <Dialog.Body>{body}</Dialog.Body>
|
||||
// <Dialog.Footer>
|
||||
// <Button onClick={disclosure.onClose} ref={cancelRef}>
|
||||
// Cancel
|
||||
// </Button>
|
||||
// <Button colorScheme="red" onClick={onClickConfirm} ml={3}>
|
||||
// {confirmTitle}
|
||||
// </Button>
|
||||
// </Dialog.Footer>
|
||||
// </Dialog.Content>
|
||||
// </Dialog.Root>
|
||||
// );
|
||||
};
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
import { useRef, useState } from 'react';
|
||||
|
||||
import {
|
||||
Flex,
|
||||
Text,
|
||||
useDisclosure,
|
||||
Button
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import {
|
||||
MdAdminPanelSettings,
|
||||
MdDeleteForever,
|
||||
@ -13,7 +8,6 @@ import {
|
||||
MdWarning,
|
||||
} from 'react-icons/md';
|
||||
|
||||
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import { Gender, GenderResource } from '@/back-api';
|
||||
@ -27,6 +21,7 @@ import { useGenderService, useSpecificGender } from '@/service/Gender';
|
||||
import { useServiceContext } from '@/service/ServiceContext';
|
||||
import { useCountTracksOfAGender } from '@/service/Track';
|
||||
import { isNullOrUndefined } from '@/utils/validator';
|
||||
import { useDisclosure } from '@/utils/disclosure';
|
||||
|
||||
export type GenderEditPopUpProps = {};
|
||||
|
||||
@ -133,103 +128,104 @@ export const GenderEditPopUp = ({ }: GenderEditPopUpProps) => {
|
||||
})
|
||||
);
|
||||
};
|
||||
return (
|
||||
<DialogRoot
|
||||
//initialFocusRef={initialRef}
|
||||
//finalFocusRef={finalRef}
|
||||
//closeOnOverlayClick={false}
|
||||
onOpenChange={onClose}
|
||||
open={true}
|
||||
data-testid="gender-edit-pop-up"
|
||||
>
|
||||
{/* <DialogOverlay /> */}
|
||||
<DialogContent>
|
||||
<DialogHeader>Edit Gender</DialogHeader>
|
||||
{/* <DialogCloseButton ref={finalRef} /> */}
|
||||
return <></>;
|
||||
// return (
|
||||
// <Dialog.Root
|
||||
// //initialFocusRef={initialRef}
|
||||
// //finalFocusRef={finalRef}
|
||||
// //closeOnOverlayClick={false}
|
||||
// onOpenChange={onClose}
|
||||
// open={true}
|
||||
// data-testid="gender-edit-pop-up"
|
||||
// >
|
||||
// {/* <DialogOverlay /> */}
|
||||
// <Dialog.Content>
|
||||
// <Dialog.Header>Edit Gender</Dialog.Header>
|
||||
// {/* <DialogCloseButton ref={finalRef} /> */}
|
||||
|
||||
<DialogBody pb={6} gap="0px" paddingLeft="18px">
|
||||
{admin && (
|
||||
<>
|
||||
<FormGroup isRequired label="Id">
|
||||
<Text>{dataGender?.id}</Text>
|
||||
</FormGroup>
|
||||
{countTracksOnAGender !== 0 && (
|
||||
<Flex paddingLeft="14px">
|
||||
<MdWarning color="red.600" />
|
||||
<Text paddingLeft="6px" color="red.600" fontWeight="bold">
|
||||
Can not remove gender {countTracksOnAGender} track(s) depend
|
||||
on it.
|
||||
</Text>
|
||||
</Flex>
|
||||
)}
|
||||
<FormGroup label="Action(s):">
|
||||
<Button
|
||||
onClick={disclosure.onOpen}
|
||||
marginRight="auto"
|
||||
colorPalette="@danger"
|
||||
disabled={countTracksOnAGender !== 0}
|
||||
>
|
||||
<MdDeleteForever /> Remove gender
|
||||
</Button>
|
||||
</FormGroup>
|
||||
<ConfirmPopUp
|
||||
disclosure={disclosure}
|
||||
title="Remove gender"
|
||||
body={`Remove gender [${dataGender?.id}] ${dataGender?.name}`}
|
||||
confirmTitle="Remove"
|
||||
onConfirm={onRemove}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{!admin && (
|
||||
<>
|
||||
<FormInput
|
||||
form={form}
|
||||
variableName="name"
|
||||
isRequired
|
||||
label="Gender name"
|
||||
ref={initialRef}
|
||||
/>
|
||||
<FormTextarea
|
||||
form={form}
|
||||
variableName="description"
|
||||
label="Description"
|
||||
/>
|
||||
<FormCovers
|
||||
form={form}
|
||||
variableName="covers"
|
||||
onFilesSelected={onFilesSelected}
|
||||
onUriSelected={onUriSelected}
|
||||
onRemove={onRemoveCover}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</DialogBody>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={() => setAdmin((value) => !value)}
|
||||
marginRight="auto"
|
||||
>
|
||||
{admin ? (
|
||||
<>
|
||||
<MdEdit />
|
||||
Edit
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MdAdminPanelSettings />
|
||||
Admin
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{!admin && form.isFormModified && (
|
||||
<Button colorScheme="blue" mr={3} onClick={onSave}>
|
||||
Save
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</DialogRoot>
|
||||
);
|
||||
// <Dialog.Body pb={6} gap="0px" paddingLeft="18px">
|
||||
// {admin && (
|
||||
// <>
|
||||
// <FormGroup isRequired label="Id">
|
||||
// <Text>{dataGender?.id}</Text>
|
||||
// </FormGroup>
|
||||
// {countTracksOnAGender !== 0 && (
|
||||
// <Flex paddingLeft="14px">
|
||||
// <MdWarning color="red.600" />
|
||||
// <Text paddingLeft="6px" color="red.600" fontWeight="bold">
|
||||
// Can not remove gender {countTracksOnAGender} track(s) depend
|
||||
// on it.
|
||||
// </Text>
|
||||
// </Flex>
|
||||
// )}
|
||||
// <FormGroup label="Action(s):">
|
||||
// <Button
|
||||
// onClick={disclosure.onOpen}
|
||||
// marginRight="auto"
|
||||
// theme="@danger"
|
||||
// disabled={countTracksOnAGender !== 0}
|
||||
// >
|
||||
// <MdDeleteForever /> Remove gender
|
||||
// </Button>
|
||||
// </FormGroup>
|
||||
// <ConfirmPopUp
|
||||
// disclosure={disclosure}
|
||||
// title="Remove gender"
|
||||
// body={`Remove gender [${dataGender?.id}] ${dataGender?.name}`}
|
||||
// confirmTitle="Remove"
|
||||
// onConfirm={onRemove}
|
||||
// />
|
||||
// </>
|
||||
// )}
|
||||
// {!admin && (
|
||||
// <>
|
||||
// <FormInput
|
||||
// form={form}
|
||||
// variableName="name"
|
||||
// isRequired
|
||||
// label="Gender name"
|
||||
// ref={initialRef}
|
||||
// />
|
||||
// <FormTextarea
|
||||
// form={form}
|
||||
// variableName="description"
|
||||
// label="Description"
|
||||
// />
|
||||
// <FormCovers
|
||||
// form={form}
|
||||
// variableName="covers"
|
||||
// onFilesSelected={onFilesSelected}
|
||||
// onUriSelected={onUriSelected}
|
||||
// onRemove={onRemoveCover}
|
||||
// />
|
||||
// </>
|
||||
// )}
|
||||
// </Dialog.Body>
|
||||
// <Dialog.Footer>
|
||||
// <Button
|
||||
// onClick={() => setAdmin((value) => !value)}
|
||||
// marginRight="auto"
|
||||
// >
|
||||
// {admin ? (
|
||||
// <>
|
||||
// <MdEdit />
|
||||
// Edit
|
||||
// </>
|
||||
// ) : (
|
||||
// <>
|
||||
// <MdAdminPanelSettings />
|
||||
// Admin
|
||||
// </>
|
||||
// )}
|
||||
// </Button>
|
||||
// {!admin && form.isFormModified && (
|
||||
// <Button colorScheme="blue" mr={3} onClick={onSave}>
|
||||
// Save
|
||||
// </Button>
|
||||
// )}
|
||||
// <Button onClick={onClose}>Cancel</Button>
|
||||
// </Dialog.Footer>
|
||||
// </Dialog.Content>
|
||||
// </Dialog.Root>
|
||||
// );
|
||||
};
|
||||
|
||||
@ -1,14 +1,5 @@
|
||||
import { useRef } from 'react';
|
||||
|
||||
import {
|
||||
Flex,
|
||||
Progress,
|
||||
Text,
|
||||
Button,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
|
||||
|
||||
|
||||
export type PopUpUploadProgressProps = {
|
||||
title: string;
|
||||
@ -41,64 +32,66 @@ export const PopUpUploadProgress = ({
|
||||
}: PopUpUploadProgressProps) => {
|
||||
const initialRef = useRef<HTMLButtonElement>(null);
|
||||
const finalRef = useRef<HTMLButtonElement>(null);
|
||||
return (
|
||||
<DialogRoot
|
||||
//initialFocusRef={initialRef}
|
||||
//finalFocusRef={finalRef}
|
||||
//closeOnOverlayClick={false}
|
||||
onOpenChange={onClose}
|
||||
open={true}
|
||||
data-testid="upload-progress-edit-pop-up"
|
||||
>
|
||||
{/* <DialogOverlay /> */}
|
||||
<DialogContent>
|
||||
<DialogHeader>{title}</DialogHeader>
|
||||
{/* <DialogCloseButton ref={finalRef} /> */}
|
||||
return <></>;
|
||||
|
||||
<DialogBody pb={6} paddingLeft="18px">
|
||||
<Flex direction="column" gap="10px">
|
||||
{isFinished ? (
|
||||
<Text fontSize="20px" fontWeight="bold">
|
||||
All {elements.length} element have been sent
|
||||
</Text>
|
||||
) : (
|
||||
<Text fontSize="20px" fontWeight="bold">
|
||||
[{index + 1}/{elements.length}] {elements[index]}
|
||||
</Text>
|
||||
)}
|
||||
<Progress.Root
|
||||
colorScheme="green"
|
||||
striped
|
||||
value={currentSize}
|
||||
animated
|
||||
max={totalSize}
|
||||
height="24px"
|
||||
/>
|
||||
<Flex>
|
||||
<Text>{currentSize.toLocaleString('fr-FR')} Bytes</Text>
|
||||
<Text marginLeft="auto">
|
||||
{totalSize.toLocaleString('fr-FR')} Bytes
|
||||
</Text>
|
||||
</Flex>
|
||||
{error && (
|
||||
<Text fontWeight="bold" color="darkred">
|
||||
{error}
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
</DialogBody>
|
||||
<DialogFooter>
|
||||
{isFinished ? (
|
||||
<Button onClick={onClose} colorPalette="green">
|
||||
Ok
|
||||
</Button>
|
||||
) : (
|
||||
<Button colorScheme="red" mr={3} onClick={onAbort} ref={initialRef}>
|
||||
Abort
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</DialogRoot>
|
||||
);
|
||||
// return (
|
||||
// <Dialog.Root
|
||||
// //initialFocusRef={initialRef}
|
||||
// //finalFocusRef={finalRef}
|
||||
// //closeOnOverlayClick={false}
|
||||
// onOpenChange={onClose}
|
||||
// open={true}
|
||||
// data-testid="upload-progress-edit-pop-up"
|
||||
// >
|
||||
// {/* <DialogOverlay /> */}
|
||||
// <Dialog.Content>
|
||||
// <Dialog.Header>{title}</Dialog.Header>
|
||||
// {/* <DialogCloseButton ref={finalRef} /> */}
|
||||
|
||||
// <Dialog.Body pb={6} paddingLeft="18px">
|
||||
// <Flex direction="column" gap="10px">
|
||||
// {isFinished ? (
|
||||
// <Text fontSize="20px" fontWeight="bold">
|
||||
// All {elements.length} element have been sent
|
||||
// </Text>
|
||||
// ) : (
|
||||
// <Text fontSize="20px" fontWeight="bold">
|
||||
// [{index + 1}/{elements.length}] {elements[index]}
|
||||
// </Text>
|
||||
// )}
|
||||
// <Progress.Root
|
||||
// colorScheme="green"
|
||||
// striped
|
||||
// value={currentSize}
|
||||
// animated
|
||||
// max={totalSize}
|
||||
// height="24px"
|
||||
// />
|
||||
// <Flex>
|
||||
// <Text>{currentSize.toLocaleString('fr-FR')} Bytes</Text>
|
||||
// <Text marginLeft="auto">
|
||||
// {totalSize.toLocaleString('fr-FR')} Bytes
|
||||
// </Text>
|
||||
// </Flex>
|
||||
// {error && (
|
||||
// <Text fontWeight="bold" color="darkred">
|
||||
// {error}
|
||||
// </Text>
|
||||
// )}
|
||||
// </Flex>
|
||||
// </Dialog.Body>
|
||||
// <Dialog.Footer>
|
||||
// {isFinished ? (
|
||||
// <Button onClick={onClose} theme="@success">
|
||||
// Ok
|
||||
// </Button>
|
||||
// ) : (
|
||||
// <Button colorScheme="red" mr={3} onClick={onAbort} ref={initialRef}>
|
||||
// Abort
|
||||
// </Button>
|
||||
// )}
|
||||
// </Dialog.Footer>
|
||||
// </Dialog.Content>
|
||||
// </Dialog.Root>
|
||||
// );
|
||||
};
|
||||
|
||||
@ -1,12 +1,5 @@
|
||||
import { useRef, useState } from 'react';
|
||||
|
||||
import {
|
||||
Text,
|
||||
useDisclosure,
|
||||
Button,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot } from '@/components/ui/dialog';
|
||||
|
||||
import { MdAdminPanelSettings, MdDeleteForever, MdEdit } from 'react-icons/md';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
@ -26,6 +19,7 @@ import { useOrderedGenders } from '@/service/Gender';
|
||||
import { useServiceContext } from '@/service/ServiceContext';
|
||||
import { useSpecificTrack, useTrackService } from '@/service/Track';
|
||||
import { isNullOrUndefined } from '@/utils/validator';
|
||||
import { useDisclosure } from '@/utils/disclosure';
|
||||
|
||||
export type TrackEditPopUpProps = {};
|
||||
|
||||
@ -86,116 +80,117 @@ export const TrackEditPopUp = ({ }: TrackEditPopUpProps) => {
|
||||
})
|
||||
);
|
||||
};
|
||||
return (
|
||||
<DialogRoot
|
||||
//initialFocusRef={initialRef}
|
||||
//finalFocusRef={finalRef}
|
||||
//closeOnOverlayClick={false}
|
||||
onOpenChange={onClose}
|
||||
open={true}
|
||||
data-testid="track-edit-pop-up"
|
||||
>
|
||||
{/* <DialogOverlay /> */}
|
||||
<DialogContent>
|
||||
<DialogHeader>Edit Track</DialogHeader>
|
||||
{/* <DialogCloseButton ref={finalRef} /> */}
|
||||
return <></>;
|
||||
// return (
|
||||
// <Dialog.Root
|
||||
// //initialFocusRef={initialRef}
|
||||
// //finalFocusRef={finalRef}
|
||||
// //closeOnOverlayClick={false}
|
||||
// onOpenChange={onClose}
|
||||
// open={true}
|
||||
// data-testid="track-edit-pop-up"
|
||||
// >
|
||||
// {/* <DialogOverlay /> */}
|
||||
// <Dialog.Content>
|
||||
// <Dialog.Header>Edit Track</Dialog.Header>
|
||||
// {/* <DialogCloseButton ref={finalRef} /> */}
|
||||
|
||||
<DialogBody pb={6} gap="0px" paddingLeft="18px">
|
||||
{admin && (
|
||||
<>
|
||||
<FormGroup isRequired label="Id">
|
||||
<Text>{dataTrack?.id}</Text>
|
||||
</FormGroup>
|
||||
<FormGroup label="Data Id">
|
||||
<Text>{dataTrack?.dataId}</Text>
|
||||
</FormGroup>
|
||||
<FormGroup label="Action(s):">
|
||||
<Button
|
||||
onClick={disclosure.onOpen}
|
||||
marginRight="auto"
|
||||
colorPalette="@danger"
|
||||
>
|
||||
<MdDeleteForever /> Remove Media
|
||||
</Button>
|
||||
</FormGroup>
|
||||
<ConfirmPopUp
|
||||
disclosure={disclosure}
|
||||
title="Remove track"
|
||||
body={`Remove Media [${dataTrack?.id}] ${dataTrack?.name}`}
|
||||
confirmTitle="Remove"
|
||||
onConfirm={onRemove}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{!admin && (
|
||||
<>
|
||||
<FormInput
|
||||
form={form}
|
||||
variableName="name"
|
||||
isRequired
|
||||
label="Title"
|
||||
ref={initialRef}
|
||||
/>
|
||||
<FormTextarea
|
||||
form={form}
|
||||
variableName="description"
|
||||
label="Description"
|
||||
/>
|
||||
<FormSelect
|
||||
form={form}
|
||||
variableName="genderId"
|
||||
options={dataGenders}
|
||||
label="Gender"
|
||||
/>
|
||||
<FormSelectMultiple
|
||||
form={form}
|
||||
variableName="artists"
|
||||
options={dataArtist}
|
||||
label="Artist(s)"
|
||||
/>
|
||||
<FormSelect
|
||||
form={form}
|
||||
variableName="albumId"
|
||||
options={dataAlbums}
|
||||
label="Album"
|
||||
/>
|
||||
<FormNumber
|
||||
form={form}
|
||||
variableName="track"
|
||||
label="Track n°"
|
||||
step={1}
|
||||
//defaultValue={0}
|
||||
min={0}
|
||||
max={1000}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</DialogBody>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={() => setAdmin((value) => !value)}
|
||||
marginRight="auto"
|
||||
>
|
||||
{admin ? (
|
||||
<>
|
||||
<MdEdit />
|
||||
Edit
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<MdAdminPanelSettings />
|
||||
Admin
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{!admin && form.isFormModified && (
|
||||
<Button colorScheme="blue" mr={3} onClick={onSave}>
|
||||
Save
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={onClose}>Cancel</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</DialogRoot>
|
||||
);
|
||||
// <Dialog.Body pb={6} gap="0px" paddingLeft="18px">
|
||||
// {admin && (
|
||||
// <>
|
||||
// <FormGroup isRequired label="Id">
|
||||
// <Text>{dataTrack?.id}</Text>
|
||||
// </FormGroup>
|
||||
// <FormGroup label="Data Id">
|
||||
// <Text>{dataTrack?.dataId}</Text>
|
||||
// </FormGroup>
|
||||
// <FormGroup label="Action(s):">
|
||||
// <Button
|
||||
// onClick={disclosure.onOpen}
|
||||
// marginRight="auto"
|
||||
// theme="@danger"
|
||||
// >
|
||||
// <MdDeleteForever /> Remove Media
|
||||
// </Button>
|
||||
// </FormGroup>
|
||||
// <ConfirmPopUp
|
||||
// disclosure={disclosure}
|
||||
// title="Remove track"
|
||||
// body={`Remove Media [${dataTrack?.id}] ${dataTrack?.name}`}
|
||||
// confirmTitle="Remove"
|
||||
// onConfirm={onRemove}
|
||||
// />
|
||||
// </>
|
||||
// )}
|
||||
// {!admin && (
|
||||
// <>
|
||||
// <FormInput
|
||||
// form={form}
|
||||
// variableName="name"
|
||||
// isRequired
|
||||
// label="Title"
|
||||
// ref={initialRef}
|
||||
// />
|
||||
// <FormTextarea
|
||||
// form={form}
|
||||
// variableName="description"
|
||||
// label="Description"
|
||||
// />
|
||||
// <FormSelect
|
||||
// form={form}
|
||||
// variableName="genderId"
|
||||
// options={dataGenders}
|
||||
// label="Gender"
|
||||
// />
|
||||
// <FormSelectMultiple
|
||||
// form={form}
|
||||
// variableName="artists"
|
||||
// options={dataArtist}
|
||||
// label="Artist(s)"
|
||||
// />
|
||||
// <FormSelect
|
||||
// form={form}
|
||||
// variableName="albumId"
|
||||
// options={dataAlbums}
|
||||
// label="Album"
|
||||
// />
|
||||
// <FormNumber
|
||||
// form={form}
|
||||
// variableName="track"
|
||||
// label="Track n°"
|
||||
// step={1}
|
||||
// //defaultValue={0}
|
||||
// min={0}
|
||||
// max={1000}
|
||||
// />
|
||||
// </>
|
||||
// )}
|
||||
// </Dialog.Body>
|
||||
// <Dialog.Footer>
|
||||
// <Button
|
||||
// onClick={() => setAdmin((value) => !value)}
|
||||
// marginRight="auto"
|
||||
// >
|
||||
// {admin ? (
|
||||
// <>
|
||||
// <MdEdit />
|
||||
// Edit
|
||||
// </>
|
||||
// ) : (
|
||||
// <>
|
||||
// <MdAdminPanelSettings />
|
||||
// Admin
|
||||
// </>
|
||||
// )}
|
||||
// </Button>
|
||||
// {!admin && form.isFormModified && (
|
||||
// <Button colorScheme="blue" mr={3} onClick={onSave}>
|
||||
// Save
|
||||
// </Button>
|
||||
// )}
|
||||
// <Button onClick={onClose}>Cancel</Button>
|
||||
// </Dialog.Footer>
|
||||
// </Dialog.Content>
|
||||
// </Dialog.Root>
|
||||
// );
|
||||
};
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
import { Box, Button, Flex, Text } from '@chakra-ui/react';
|
||||
import { MdAdd } from 'react-icons/md';
|
||||
|
||||
import { isNullOrUndefined, isNumber } from '@/utils/validator';
|
||||
import { Button, Flex, Text } from '@/ui';
|
||||
|
||||
export type SelectListModel = {
|
||||
id: any;
|
||||
@ -65,56 +65,65 @@ export const SelectList = ({
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<Box position="relative">
|
||||
<Flex style={{ position: "relative" }}>
|
||||
<Flex
|
||||
direction="column"
|
||||
width="full"
|
||||
position="absolute"
|
||||
border="1px"
|
||||
borderColor="black"
|
||||
backgroundColor="gray.700"
|
||||
overflowY="auto"
|
||||
overflowX="hidden"
|
||||
maxHeight="300px"
|
||||
zIndex={300}
|
||||
transform="translateY(1px)"
|
||||
style={{
|
||||
width: "full",
|
||||
position: "absolute",
|
||||
border: "1px",
|
||||
borderColor: "black",
|
||||
backgroundColor: "gray.700",
|
||||
overflowY: "auto",
|
||||
overflowX: "hidden",
|
||||
maxHeight: "300px",
|
||||
zIndex: 300,
|
||||
transform: "translateY(1px)",
|
||||
}}
|
||||
>
|
||||
{displayedValue.length === 0 && (
|
||||
<Text marginX="auto" color="red.500" fontWeight="bold" marginY="10px">
|
||||
<Text fontWeight="bold" color="red.500" style={{ margin: "0 auto" }}>
|
||||
... No element found...
|
||||
</Text>
|
||||
)}
|
||||
{displayedValue.map((data) => (
|
||||
<Button
|
||||
key={data.id}
|
||||
marginY="1px"
|
||||
borderRadius="0px"
|
||||
autoFocus={false}
|
||||
backgroundColor={data.isSelected ? 'green.800' : '0x00000000'}
|
||||
_hover={{ backgroundColor: 'gray.400' }}
|
||||
style={{
|
||||
margin: "1px 0",
|
||||
borderRadius: "0px",
|
||||
//autoFocus: false,
|
||||
backgroundColor: data.isSelected ? 'green.800' : '0x00000000',
|
||||
//_hover={ backgroundColor: 'gray.400' },
|
||||
}}
|
||||
onClick={() => onSelectValue(data)}
|
||||
ref={data.isSelected ? scrollToRef : undefined}
|
||||
//ref={data.isSelected ? scrollToRef : undefined}
|
||||
>
|
||||
<Text marginRight="auto" autoFocus={false}>
|
||||
<Text style={{ margin: "0 auto", }} /*autoFocus={false}*/>
|
||||
{data.name}
|
||||
</Text>
|
||||
</Button>
|
||||
))}
|
||||
{onCreate && search && search.length > 0 && (
|
||||
<Button
|
||||
marginY="1px"
|
||||
borderRadius="0px"
|
||||
autoFocus={false}
|
||||
_hover={{ backgroundColor: 'gray.400' }}
|
||||
style={{
|
||||
margin: "1px 0",
|
||||
borderRadius: "0px",
|
||||
//autoFocus:false,
|
||||
//_hover={ backgroundColor: 'gray.400' }
|
||||
}}
|
||||
onClick={() => onCreate(search)}
|
||||
>
|
||||
<Flex marginRight="auto">
|
||||
<Flex
|
||||
style={{
|
||||
margin: "0 auto",
|
||||
}}>
|
||||
<MdAdd />
|
||||
<Text autoFocus={false}>Create '{search}'</Text>
|
||||
<Text /*autoFocus={false}*/>Create '{search}'</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,18 +1,10 @@
|
||||
import { RefObject, useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Flex,
|
||||
HStack,
|
||||
Input,
|
||||
Spinner,
|
||||
Tag,
|
||||
TagLabel,
|
||||
} from '@chakra-ui/react';
|
||||
import { MdEdit, MdKeyboardArrowDown, MdKeyboardArrowUp } from 'react-icons/md';
|
||||
|
||||
import { SelectList, SelectListModel } from '@/components/select/SelectList';
|
||||
import { isNullOrUndefined } from '@/utils/validator';
|
||||
import { Button, Flex, HStack, Input } from '@/ui';
|
||||
|
||||
export type SelectMultipleProps = {
|
||||
options?: object[];
|
||||
@ -83,7 +75,7 @@ export const SelectMultiple = ({
|
||||
}
|
||||
};
|
||||
if (!options) {
|
||||
return <Spinner />;
|
||||
return <></>;// TODO: <Spinner />;
|
||||
}
|
||||
const onChangeInput = (value: string): void => {
|
||||
setHasSuggestion(false);
|
||||
@ -109,18 +101,19 @@ export const SelectMultiple = ({
|
||||
return (
|
||||
<Flex direction="column" width="full" gap="0px">
|
||||
{selectedOptions && (
|
||||
<HStack wrap="wrap" gap="5px" justify="left" width="full" marginBottom="2px">
|
||||
<HStack style={{ flexWrap: "wrap", /*spacing="5px"*/ justifyContent: "left", width: "full", marginBottom: "2px" }}>
|
||||
{selectedOptions.map((data) => (
|
||||
<Flex align="flex-start" key={data[keyKey]}>
|
||||
<Tag.Root
|
||||
size="xl"
|
||||
{/* <Tag.Root
|
||||
size="md"
|
||||
key="md"
|
||||
borderRadius="5px"
|
||||
variant="surface"
|
||||
backgroundColor="green.800"
|
||||
variant="solid"
|
||||
backgroundColor="green.500"
|
||||
>
|
||||
<Tag.Label>{data[keyValue] ?? `id=${data[keyKey]}`}</Tag.Label>
|
||||
<Tag.CloseTrigger boxSize="5" onClick={() => selectValue(data)} />
|
||||
</Tag.Root>
|
||||
<Tag.CloseTrigger onClick={() => selectValue(data)} />
|
||||
</Tag.Root> */}
|
||||
</Flex>
|
||||
))}
|
||||
</HStack>
|
||||
@ -129,19 +122,24 @@ export const SelectMultiple = ({
|
||||
<Flex>
|
||||
<Input
|
||||
ref={refFocus}
|
||||
width="full"
|
||||
style={{
|
||||
width: "full",
|
||||
borderRadius: "5px 0 0 5px",
|
||||
}}
|
||||
onChange={(e) => onChangeInput(e.target.value)}
|
||||
//onSubmit={onSubmit}
|
||||
onFocus={() => setShowList(true)}
|
||||
onBlur={() => setTimeout(() => setShowList(false), 200)}
|
||||
// TODO: onFocus={() => setShowList(true)}
|
||||
// TODO: onBlur={() => setTimeout(() => setShowList(false), 200)}
|
||||
value={showList ? (currentSearch ?? '') : hasSuggestion ? `suggest: ${currentSearch}` : ''}
|
||||
borderRadius="5px 0 0 5px"
|
||||
|
||||
/>
|
||||
<Button
|
||||
onClick={onOpenClose}
|
||||
variant="outline"
|
||||
borderRadius="0 5px 5px 0"
|
||||
borderWidth="1px 1px 1px 0"
|
||||
//variant="outline"
|
||||
style={{
|
||||
borderRadius: "0 5px 5px 0",
|
||||
borderWidth: "1px 1px 1px 0",
|
||||
}}
|
||||
>
|
||||
{showList ? (
|
||||
<MdKeyboardArrowUp color="gray.300" />
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { RefObject, useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import { Button, Flex, Input, Spinner } from '@chakra-ui/react';
|
||||
import {
|
||||
MdClose,
|
||||
MdEdit,
|
||||
@ -10,6 +9,7 @@ import {
|
||||
|
||||
import { SelectList, SelectListModel } from '@/components/select/SelectList';
|
||||
import { isNullOrUndefined } from '@/utils/validator';
|
||||
import { Button, Flex, Input } from '@/ui';
|
||||
|
||||
export type SelectSingleProps = {
|
||||
options?: object[];
|
||||
@ -70,7 +70,7 @@ export const SelectSingle = ({
|
||||
}
|
||||
};
|
||||
if (!transformedOption) {
|
||||
return <Spinner />;
|
||||
return <></>; // TODO: <Spinner />;
|
||||
}
|
||||
function onChangeInput(value: string): void {
|
||||
setHasSuggestion(false);
|
||||
@ -105,44 +105,49 @@ export const SelectSingle = ({
|
||||
<Flex>
|
||||
<Input
|
||||
ref={refFocus}
|
||||
width="full"
|
||||
style={{
|
||||
width: "full",
|
||||
backgroundColor: showList || !selectedOptions ? undefined : 'green.500',
|
||||
borderRadius: "5px 0 0 5px",
|
||||
}}
|
||||
onChange={(e) => onChangeInput(e.target.value)}
|
||||
onFocus={() => setShowList(true)}
|
||||
onBlur={() => setTimeout(() => setShowList(false), 200)}
|
||||
//onFocus={() => setShowList(true)}
|
||||
//onBlur={() => setTimeout(() => setShowList(false), 200)}
|
||||
value={
|
||||
showList ? (currentSearch ?? '') : (selectedOptions?.name ?? (hasSuggestion ? `suggest: ${currentSearch}` : ''))
|
||||
}
|
||||
backgroundColor={
|
||||
showList || !selectedOptions ? undefined : 'green.800'
|
||||
}
|
||||
borderRadius="5px 0 0 5px"
|
||||
/>
|
||||
<Button
|
||||
onClick={onRemoveItem}
|
||||
variant="outline"
|
||||
borderRadius="0 5px 5px 0"
|
||||
borderWidth="1px 1px 1px 0"
|
||||
// TODO: variant="outline"
|
||||
style={{
|
||||
borderRadius: "0 5px 5px 0",
|
||||
borderWidth: "1px 1px 1px 0",
|
||||
}}
|
||||
>
|
||||
{selectedOptions ? (
|
||||
<MdClose color="gray.300" />
|
||||
) : showList ? (
|
||||
<MdKeyboardArrowUp color="gray.300" />
|
||||
) : hasSuggestion ? (
|
||||
<MdEdit color="gray.300" />
|
||||
) : (
|
||||
<MdKeyboardArrowDown color="gray.300" />
|
||||
)}
|
||||
{
|
||||
selectedOptions ? (
|
||||
<MdClose color="gray.300" />
|
||||
) : showList ? (
|
||||
<MdKeyboardArrowUp color="gray.300" />
|
||||
) : hasSuggestion ? (
|
||||
<MdEdit color="gray.300" />
|
||||
) : (
|
||||
<MdKeyboardArrowDown color="gray.300" />
|
||||
)}
|
||||
</Button>
|
||||
</Flex>
|
||||
{showList && (
|
||||
<SelectList
|
||||
options={transformedOption}
|
||||
selected={selectedOptions ? [selectedOptions] : []}
|
||||
search={currentSearch}
|
||||
onSelectValue={selectValue}
|
||||
onCreate={createNewItem}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
{
|
||||
showList && (
|
||||
<SelectList
|
||||
options={transformedOption}
|
||||
selected={selectedOptions ? [selectedOptions] : []}
|
||||
search={currentSearch}
|
||||
onSelectValue={selectValue}
|
||||
onCreate={createNewItem}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</Flex >
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { Flex, Text } from '@chakra-ui/react';
|
||||
import { LuMusic2, LuPlay } from 'react-icons/lu';
|
||||
|
||||
|
||||
import { Track } from '@/back-api';
|
||||
import { Covers } from '@/components/Cover';
|
||||
import { ContextMenu, MenuElement } from '@/components/contextMenu/ContextMenu';
|
||||
import { useActivePlaylistService } from '@/service/ActivePlaylist';
|
||||
import { Flex, Span } from '@/ui';
|
||||
|
||||
export type DisplayTrackProps = {
|
||||
track: Track;
|
||||
@ -23,9 +23,9 @@ export const DisplayTrack = ({
|
||||
data={track?.covers}
|
||||
size="50"
|
||||
height="full"
|
||||
iconEmpty={
|
||||
trackActive?.id === track.id ? <LuPlay /> : <LuMusic2 />
|
||||
}
|
||||
/* TODO: iconEmpty={
|
||||
trackActive?.id === track.id ? LuPlay : LuMusic2
|
||||
} */
|
||||
onClick={onClick}
|
||||
/>
|
||||
<Flex
|
||||
@ -33,23 +33,26 @@ export const DisplayTrack = ({
|
||||
width="full"
|
||||
height="full"
|
||||
paddingLeft="5px"
|
||||
overflowX="hidden"
|
||||
style={{
|
||||
overflowX: "hidden",
|
||||
}}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Text
|
||||
as="span"
|
||||
alignContent="left"
|
||||
<Span
|
||||
fontSize="20px"
|
||||
fontWeight="bold"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
// TODO: noOfLines={[1, 2]}
|
||||
marginY="auto"
|
||||
color={trackActive?.id === track.id ? 'green.700' : undefined}
|
||||
style={{
|
||||
alignContent: "left",
|
||||
userSelect: "none",
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
// TODO: noOfLines={[1, 2]}
|
||||
margin: "auto 0",
|
||||
}}
|
||||
>
|
||||
[{track.track}] {track.name}
|
||||
</Text>
|
||||
</Span>
|
||||
</Flex>
|
||||
<ContextMenu elements={contextMenu} />
|
||||
</Flex>
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
import { Suspense } from 'react';
|
||||
|
||||
import { Flex, Text } from '@chakra-ui/react';
|
||||
import { LuMusic2, LuPlay } from 'react-icons/lu';
|
||||
|
||||
import { Track } from '@/back-api';
|
||||
import { Covers } from '@/components/Cover';
|
||||
@ -10,6 +7,7 @@ import { useActivePlaylistService } from '@/service/ActivePlaylist';
|
||||
import { useSpecificAlbum } from '@/service/Album';
|
||||
import { useSpecificArtists } from '@/service/Artist';
|
||||
import { useSpecificGender } from '@/service/Gender';
|
||||
import { Flex, Span } from '@/ui';
|
||||
|
||||
export type DisplayTrackProps = {
|
||||
track: Track;
|
||||
@ -30,11 +28,11 @@ export const DisplayTrackFull = ({
|
||||
data-testid="display-track-full">
|
||||
<Covers
|
||||
data={track?.covers}
|
||||
size="60px"
|
||||
size="50"
|
||||
marginY="auto"
|
||||
iconEmpty={
|
||||
trackActive?.id === track.id ? <LuPlay /> : <LuMusic2 />
|
||||
}
|
||||
/* TODO: iconEmpty={
|
||||
trackActive?.id === track.id ? LuPlay : LuMusic2
|
||||
} */
|
||||
onClick={onClick}
|
||||
/>
|
||||
<Flex
|
||||
@ -42,69 +40,78 @@ export const DisplayTrackFull = ({
|
||||
width="full"
|
||||
height="full"
|
||||
paddingLeft="5px"
|
||||
overflowX="hidden"
|
||||
onClick={onClick}
|
||||
style={{
|
||||
overflowX: "hidden",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
as="span"
|
||||
alignContent="left"
|
||||
<Span
|
||||
fontSize="20px"
|
||||
fontWeight="bold"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
// TODO: noOfLines={1}
|
||||
color={trackActive?.id === track.id ? 'green.700' : undefined}
|
||||
style={{
|
||||
alignContent: "left",
|
||||
userSelect: "none",
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
// TODO: noOfLines={1}
|
||||
margin: "auto 0",
|
||||
}}
|
||||
>
|
||||
{track.name} {track.track && ` [${track.track}]`}
|
||||
</Text>
|
||||
</Span>
|
||||
{dataAlbum && (
|
||||
<Text
|
||||
as="span"
|
||||
alignContent="left"
|
||||
<Span
|
||||
fontSize="15px"
|
||||
fontWeight="bold"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
//noOfLines={1}
|
||||
marginY="auto"
|
||||
color={trackActive?.id === track.id ? 'green.700' : undefined}
|
||||
style={{
|
||||
alignContent: "left",
|
||||
userSelect: "none",
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
// TODO: noOfLines={[1, 2]}
|
||||
margin: "auto 0",
|
||||
}}
|
||||
>
|
||||
<Text as="span" fontWeight="normal">Album:</Text> {dataAlbum.name}
|
||||
</Text>
|
||||
<Span fontWeight="normal">Album:</Span> {dataAlbum.name}
|
||||
</Span>
|
||||
)}
|
||||
{dataArtists && (
|
||||
<Text
|
||||
as="span"
|
||||
alignContent="left"
|
||||
<Span
|
||||
fontSize="15px"
|
||||
fontWeight="bold"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
//noOfLines={1}
|
||||
marginY="auto"
|
||||
color={trackActive?.id === track.id ? 'green.700' : undefined}
|
||||
style={{
|
||||
alignContent: "left",
|
||||
userSelect: "none",
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
// TODO: noOfLines={[1, 2]}
|
||||
margin: "auto 0",
|
||||
}}
|
||||
>
|
||||
<Text as="span" fontWeight="normal">Artist(s):</Text> {dataArtists.map((data) => data.name).join(', ')}
|
||||
</Text>
|
||||
<Span fontWeight="normal">Artist(s):</Span> {dataArtists.map((data) => data.name).join(', ')}
|
||||
</Span>
|
||||
)}
|
||||
{dataGender && (
|
||||
<Text
|
||||
as="span"
|
||||
alignContent="left"
|
||||
<Span
|
||||
fontSize="15px"
|
||||
fontWeight="bold"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
//noOfLines={1}
|
||||
marginY="auto"
|
||||
color={trackActive?.id === track.id ? 'green.700' : undefined}
|
||||
style={{
|
||||
alignContent: "left",
|
||||
userSelect: "none",
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
// TODO: noOfLines={[1, 2]}
|
||||
margin: "auto 0",
|
||||
}}
|
||||
>
|
||||
<Text as="span" fontWeight="normal">Gender:</Text> {dataGender.name}
|
||||
</Text>
|
||||
<Span fontWeight="normal">Gender:</Span> {dataGender.name}
|
||||
</Span>
|
||||
)}
|
||||
</Flex>
|
||||
<ContextMenu elements={contextMenu}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { Track } from '@/back-api';
|
||||
import { Covers } from '@/components/Cover';
|
||||
import { MenuElement } from '@/components/contextMenu/ContextMenu';
|
||||
import { useSpecificTrack } from '@/service/Track';
|
||||
import { DisplayTrackFull } from './DisplayTrackFull';
|
||||
|
||||
@ -1,26 +1,29 @@
|
||||
import { Flex, Skeleton } from '@chakra-ui/react';
|
||||
import { Flex } from "@/ui";
|
||||
|
||||
|
||||
export const DisplayTrackSkeleton = () => {
|
||||
return (
|
||||
<Flex direction="row" width="full" height="full">
|
||||
<Skeleton
|
||||
{/* <Skeleton
|
||||
borderRadius="0px"
|
||||
height="50"
|
||||
width="50"
|
||||
minWidth="50"
|
||||
minHeight="50"
|
||||
/>
|
||||
/> */}
|
||||
<Flex
|
||||
direction="column"
|
||||
width="full"
|
||||
height="full"
|
||||
paddingLeft="5px"
|
||||
overflowX="hidden"
|
||||
style={{
|
||||
overflowX: "hidden"
|
||||
}}
|
||||
>
|
||||
{/* <SkeletonText
|
||||
skeletonHeight="20px"
|
||||
noOfLines={1}
|
||||
gap={0}
|
||||
spacing={0}
|
||||
width="50%"
|
||||
marginY="auto"
|
||||
/> */}
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import type { GroupProps, SlotRecipeProps } from "@chakra-ui/react"
|
||||
import { Avatar as ChakraAvatar, Group } from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
|
||||
type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
|
||||
|
||||
export interface AvatarProps extends ChakraAvatar.RootProps {
|
||||
name?: string
|
||||
src?: string
|
||||
srcSet?: string
|
||||
loading?: ImageProps["loading"]
|
||||
icon?: React.ReactElement
|
||||
fallback?: React.ReactNode
|
||||
}
|
||||
|
||||
export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
|
||||
function Avatar(props, ref) {
|
||||
const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
|
||||
props
|
||||
return (
|
||||
<ChakraAvatar.Root ref={ref} {...rest}>
|
||||
<AvatarFallback name={name} icon={icon}>
|
||||
{fallback}
|
||||
</AvatarFallback>
|
||||
<ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
|
||||
{children}
|
||||
</ChakraAvatar.Root>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
|
||||
name?: string
|
||||
icon?: React.ReactElement
|
||||
}
|
||||
|
||||
const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
|
||||
function AvatarFallback(props, ref) {
|
||||
const { name, icon, children, ...rest } = props
|
||||
return (
|
||||
<ChakraAvatar.Fallback ref={ref} {...rest}>
|
||||
{children}
|
||||
{name != null && children == null && <>{getInitials(name)}</>}
|
||||
{name == null && children == null && (
|
||||
<ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>
|
||||
)}
|
||||
</ChakraAvatar.Fallback>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
function getInitials(name: string) {
|
||||
const names = name.trim().split(" ")
|
||||
const firstName = names[0] != null ? names[0] : ""
|
||||
const lastName = names.length > 1 ? names[names.length - 1] : ""
|
||||
return firstName && lastName
|
||||
? `${firstName.charAt(0)}${lastName.charAt(0)}`
|
||||
: firstName.charAt(0)
|
||||
}
|
||||
|
||||
interface AvatarGroupProps extends GroupProps, SlotRecipeProps<"avatar"> {}
|
||||
|
||||
export const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
|
||||
function AvatarGroup(props, ref) {
|
||||
const { size, variant, borderless, ...rest } = props
|
||||
return (
|
||||
<ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
|
||||
<Group gap="0" spaceX="-3" ref={ref} {...rest} />
|
||||
</ChakraAvatar.PropsProvider>
|
||||
)
|
||||
},
|
||||
)
|
||||
@ -1,40 +0,0 @@
|
||||
import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react"
|
||||
import {
|
||||
AbsoluteCenter,
|
||||
Button as ChakraButton,
|
||||
Span,
|
||||
Spinner,
|
||||
} from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
|
||||
interface ButtonLoadingProps {
|
||||
loading?: boolean
|
||||
loadingText?: React.ReactNode
|
||||
}
|
||||
|
||||
export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
|
||||
|
||||
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
function Button(props, ref) {
|
||||
const { loading, disabled, loadingText, children, ...rest } = props
|
||||
return (
|
||||
<ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
|
||||
{loading && !loadingText ? (
|
||||
<>
|
||||
<AbsoluteCenter display="inline-flex">
|
||||
<Spinner size="inherit" color="inherit" />
|
||||
</AbsoluteCenter>
|
||||
<Span opacity={0}>{children}</Span>
|
||||
</>
|
||||
) : loading && loadingText ? (
|
||||
<>
|
||||
<Spinner size="inherit" color="inherit" />
|
||||
{loadingText}
|
||||
</>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</ChakraButton>
|
||||
)
|
||||
},
|
||||
)
|
||||
@ -1,25 +0,0 @@
|
||||
import { Checkbox as ChakraCheckbox } from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
|
||||
export interface CheckboxProps extends ChakraCheckbox.RootProps {
|
||||
icon?: React.ReactNode
|
||||
inputProps?: React.InputHTMLAttributes<HTMLInputElement>
|
||||
rootRef?: React.Ref<HTMLLabelElement>
|
||||
}
|
||||
|
||||
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
function Checkbox(props, ref) {
|
||||
const { icon, children, inputProps, rootRef, ...rest } = props
|
||||
return (
|
||||
<ChakraCheckbox.Root ref={rootRef} {...rest}>
|
||||
<ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
|
||||
<ChakraCheckbox.Control>
|
||||
{icon || <ChakraCheckbox.Indicator />}
|
||||
</ChakraCheckbox.Control>
|
||||
{children != null && (
|
||||
<ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
|
||||
)}
|
||||
</ChakraCheckbox.Root>
|
||||
)
|
||||
},
|
||||
)
|
||||
@ -1,17 +0,0 @@
|
||||
import type { ButtonProps } from "@chakra-ui/react"
|
||||
import { IconButton as ChakraIconButton } from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
import { LuX } from "react-icons/lu"
|
||||
|
||||
export type CloseButtonProps = ButtonProps
|
||||
|
||||
export const CloseButton = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
CloseButtonProps
|
||||
>(function CloseButton(props, ref) {
|
||||
return (
|
||||
<ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
|
||||
{props.children ?? <LuX />}
|
||||
</ChakraIconButton>
|
||||
)
|
||||
})
|
||||
@ -1,75 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import type { IconButtonProps } from "@chakra-ui/react"
|
||||
import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react"
|
||||
import { ThemeProvider, useTheme } from "next-themes"
|
||||
import type { ThemeProviderProps } from "next-themes"
|
||||
import * as React from "react"
|
||||
import { LuMoon, LuSun } from "react-icons/lu"
|
||||
|
||||
export interface ColorModeProviderProps extends ThemeProviderProps {}
|
||||
|
||||
export function ColorModeProvider(props: ColorModeProviderProps) {
|
||||
return (
|
||||
<ThemeProvider attribute="class" disableTransitionOnChange {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export type ColorMode = "light" | "dark"
|
||||
|
||||
export interface UseColorModeReturn {
|
||||
colorMode: ColorMode
|
||||
setColorMode: (colorMode: ColorMode) => void
|
||||
toggleColorMode: () => void
|
||||
}
|
||||
|
||||
export function useColorMode(): UseColorModeReturn {
|
||||
const { resolvedTheme, setTheme } = useTheme()
|
||||
const toggleColorMode = () => {
|
||||
setTheme(resolvedTheme === "light" ? "dark" : "light")
|
||||
}
|
||||
return {
|
||||
colorMode: resolvedTheme as ColorMode,
|
||||
setColorMode: setTheme,
|
||||
toggleColorMode,
|
||||
}
|
||||
}
|
||||
|
||||
export function useColorModeValue<T>(light: T, dark: T) {
|
||||
const { colorMode } = useColorMode()
|
||||
return colorMode === "dark" ? dark : light
|
||||
}
|
||||
|
||||
export function ColorModeIcon() {
|
||||
const { colorMode } = useColorMode()
|
||||
return colorMode === "dark" ? <LuMoon /> : <LuSun />
|
||||
}
|
||||
|
||||
interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
|
||||
|
||||
export const ColorModeButton = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
ColorModeButtonProps
|
||||
>(function ColorModeButton(props, ref) {
|
||||
const { toggleColorMode } = useColorMode()
|
||||
return (
|
||||
<ClientOnly fallback={<Skeleton boxSize="8" />}>
|
||||
<IconButton
|
||||
onClick={toggleColorMode}
|
||||
variant="ghost"
|
||||
aria-label="Toggle color mode"
|
||||
size="sm"
|
||||
ref={ref}
|
||||
{...props}
|
||||
css={{
|
||||
_icon: {
|
||||
width: "5",
|
||||
height: "5",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ColorModeIcon />
|
||||
</IconButton>
|
||||
</ClientOnly>
|
||||
)
|
||||
})
|
||||
@ -1,62 +0,0 @@
|
||||
import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react"
|
||||
import { CloseButton } from "./close-button"
|
||||
import * as React from "react"
|
||||
|
||||
interface DialogContentProps extends ChakraDialog.ContentProps {
|
||||
portalled?: boolean
|
||||
portalRef?: React.RefObject<HTMLElement>
|
||||
backdrop?: boolean
|
||||
}
|
||||
|
||||
export const DialogContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
DialogContentProps
|
||||
>(function DialogContent(props, ref) {
|
||||
const {
|
||||
children,
|
||||
portalled = true,
|
||||
portalRef,
|
||||
backdrop = true,
|
||||
...rest
|
||||
} = props
|
||||
|
||||
return (
|
||||
<Portal disabled={!portalled} container={portalRef}>
|
||||
{backdrop && <ChakraDialog.Backdrop />}
|
||||
<ChakraDialog.Positioner>
|
||||
<ChakraDialog.Content ref={ref} {...rest} asChild={false}>
|
||||
{children}
|
||||
</ChakraDialog.Content>
|
||||
</ChakraDialog.Positioner>
|
||||
</Portal>
|
||||
)
|
||||
})
|
||||
|
||||
export const DialogCloseTrigger = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
ChakraDialog.CloseTriggerProps
|
||||
>(function DialogCloseTrigger(props, ref) {
|
||||
return (
|
||||
<ChakraDialog.CloseTrigger
|
||||
position="absolute"
|
||||
top="2"
|
||||
insetEnd="2"
|
||||
{...props}
|
||||
asChild
|
||||
>
|
||||
<CloseButton size="sm" ref={ref}>
|
||||
{props.children}
|
||||
</CloseButton>
|
||||
</ChakraDialog.CloseTrigger>
|
||||
)
|
||||
})
|
||||
|
||||
export const DialogRoot = ChakraDialog.Root
|
||||
export const DialogFooter = ChakraDialog.Footer
|
||||
export const DialogHeader = ChakraDialog.Header
|
||||
export const DialogBody = ChakraDialog.Body
|
||||
export const DialogBackdrop = ChakraDialog.Backdrop
|
||||
export const DialogTitle = ChakraDialog.Title
|
||||
export const DialogDescription = ChakraDialog.Description
|
||||
export const DialogTrigger = ChakraDialog.Trigger
|
||||
export const DialogActionTrigger = ChakraDialog.ActionTrigger
|
||||
@ -1,52 +0,0 @@
|
||||
import { Drawer as ChakraDrawer, Portal } from "@chakra-ui/react"
|
||||
import { CloseButton } from "./close-button"
|
||||
import * as React from "react"
|
||||
|
||||
interface DrawerContentProps extends ChakraDrawer.ContentProps {
|
||||
portalled?: boolean
|
||||
portalRef?: React.RefObject<HTMLElement>
|
||||
offset?: ChakraDrawer.ContentProps["padding"]
|
||||
}
|
||||
|
||||
export const DrawerContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
DrawerContentProps
|
||||
>(function DrawerContent(props, ref) {
|
||||
const { children, portalled = true, portalRef, offset, ...rest } = props
|
||||
return (
|
||||
<Portal disabled={!portalled} container={portalRef}>
|
||||
<ChakraDrawer.Positioner padding={offset}>
|
||||
<ChakraDrawer.Content ref={ref} {...rest} asChild={false}>
|
||||
{children}
|
||||
</ChakraDrawer.Content>
|
||||
</ChakraDrawer.Positioner>
|
||||
</Portal>
|
||||
)
|
||||
})
|
||||
|
||||
export const DrawerCloseTrigger = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
ChakraDrawer.CloseTriggerProps
|
||||
>(function DrawerCloseTrigger(props, ref) {
|
||||
return (
|
||||
<ChakraDrawer.CloseTrigger
|
||||
position="absolute"
|
||||
top="2"
|
||||
insetEnd="2"
|
||||
{...props}
|
||||
asChild
|
||||
>
|
||||
<CloseButton size="sm" ref={ref} />
|
||||
</ChakraDrawer.CloseTrigger>
|
||||
)
|
||||
})
|
||||
|
||||
export const DrawerTrigger = ChakraDrawer.Trigger
|
||||
export const DrawerRoot = ChakraDrawer.Root
|
||||
export const DrawerFooter = ChakraDrawer.Footer
|
||||
export const DrawerHeader = ChakraDrawer.Header
|
||||
export const DrawerBody = ChakraDrawer.Body
|
||||
export const DrawerBackdrop = ChakraDrawer.Backdrop
|
||||
export const DrawerDescription = ChakraDrawer.Description
|
||||
export const DrawerTitle = ChakraDrawer.Title
|
||||
export const DrawerActionTrigger = ChakraDrawer.ActionTrigger
|
||||
@ -1,33 +0,0 @@
|
||||
import { Field as ChakraField } from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
|
||||
export interface FieldProps extends Omit<ChakraField.RootProps, "label"> {
|
||||
label?: React.ReactNode
|
||||
helperText?: React.ReactNode
|
||||
errorText?: React.ReactNode
|
||||
optionalText?: React.ReactNode
|
||||
}
|
||||
|
||||
export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
|
||||
function Field(props, ref) {
|
||||
const { label, children, helperText, errorText, optionalText, ...rest } =
|
||||
props
|
||||
return (
|
||||
<ChakraField.Root ref={ref} {...rest}>
|
||||
{label && (
|
||||
<ChakraField.Label>
|
||||
{label}
|
||||
<ChakraField.RequiredIndicator fallback={optionalText} />
|
||||
</ChakraField.Label>
|
||||
)}
|
||||
{children}
|
||||
{helperText && (
|
||||
<ChakraField.HelperText>{helperText}</ChakraField.HelperText>
|
||||
)}
|
||||
{errorText && (
|
||||
<ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
|
||||
)}
|
||||
</ChakraField.Root>
|
||||
)
|
||||
},
|
||||
)
|
||||
@ -1,53 +0,0 @@
|
||||
import type { BoxProps, InputElementProps } from "@chakra-ui/react"
|
||||
import { Group, InputElement } from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
|
||||
export interface InputGroupProps extends BoxProps {
|
||||
startElementProps?: InputElementProps
|
||||
endElementProps?: InputElementProps
|
||||
startElement?: React.ReactNode
|
||||
endElement?: React.ReactNode
|
||||
children: React.ReactElement<InputElementProps>
|
||||
startOffset?: InputElementProps["paddingStart"]
|
||||
endOffset?: InputElementProps["paddingEnd"]
|
||||
}
|
||||
|
||||
export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
|
||||
function InputGroup(props, ref) {
|
||||
const {
|
||||
startElement,
|
||||
startElementProps,
|
||||
endElement,
|
||||
endElementProps,
|
||||
children,
|
||||
startOffset = "6px",
|
||||
endOffset = "6px",
|
||||
...rest
|
||||
} = props
|
||||
|
||||
const child =
|
||||
React.Children.only<React.ReactElement<InputElementProps>>(children)
|
||||
|
||||
return (
|
||||
<Group ref={ref} {...rest}>
|
||||
{startElement && (
|
||||
<InputElement pointerEvents="none" {...startElementProps}>
|
||||
{startElement}
|
||||
</InputElement>
|
||||
)}
|
||||
{React.cloneElement(child, {
|
||||
...(startElement && {
|
||||
ps: `calc(var(--input-height) - ${startOffset})`,
|
||||
}),
|
||||
...(endElement && { pe: `calc(var(--input-height) - ${endOffset})` }),
|
||||
...children.props,
|
||||
})}
|
||||
{endElement && (
|
||||
<InputElement placement="end" {...endElementProps}>
|
||||
{endElement}
|
||||
</InputElement>
|
||||
)}
|
||||
</Group>
|
||||
)
|
||||
},
|
||||
)
|
||||
@ -1,110 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { AbsoluteCenter, Menu as ChakraMenu, Portal } from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
import { LuCheck, LuChevronRight } from "react-icons/lu"
|
||||
|
||||
interface MenuContentProps extends ChakraMenu.ContentProps {
|
||||
portalled?: boolean
|
||||
portalRef?: React.RefObject<HTMLElement>
|
||||
}
|
||||
|
||||
export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(
|
||||
function MenuContent(props, ref) {
|
||||
const { portalled = true, portalRef, ...rest } = props
|
||||
return (
|
||||
<Portal disabled={!portalled} container={portalRef}>
|
||||
<ChakraMenu.Positioner>
|
||||
<ChakraMenu.Content ref={ref} {...rest} />
|
||||
</ChakraMenu.Positioner>
|
||||
</Portal>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
export const MenuArrow = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
ChakraMenu.ArrowProps
|
||||
>(function MenuArrow(props, ref) {
|
||||
return (
|
||||
<ChakraMenu.Arrow ref={ref} {...props}>
|
||||
<ChakraMenu.ArrowTip />
|
||||
</ChakraMenu.Arrow>
|
||||
)
|
||||
})
|
||||
|
||||
export const MenuCheckboxItem = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
ChakraMenu.CheckboxItemProps
|
||||
>(function MenuCheckboxItem(props, ref) {
|
||||
return (
|
||||
<ChakraMenu.CheckboxItem ref={ref} {...props}>
|
||||
<ChakraMenu.ItemIndicator hidden={false}>
|
||||
<LuCheck />
|
||||
</ChakraMenu.ItemIndicator>
|
||||
{props.children}
|
||||
</ChakraMenu.CheckboxItem>
|
||||
)
|
||||
})
|
||||
|
||||
export const MenuRadioItem = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
ChakraMenu.RadioItemProps
|
||||
>(function MenuRadioItem(props, ref) {
|
||||
const { children, ...rest } = props
|
||||
return (
|
||||
<ChakraMenu.RadioItem ps="8" ref={ref} {...rest}>
|
||||
<AbsoluteCenter axis="horizontal" left="4" asChild>
|
||||
<ChakraMenu.ItemIndicator>
|
||||
<LuCheck />
|
||||
</ChakraMenu.ItemIndicator>
|
||||
</AbsoluteCenter>
|
||||
<ChakraMenu.ItemText>{children}</ChakraMenu.ItemText>
|
||||
</ChakraMenu.RadioItem>
|
||||
)
|
||||
})
|
||||
|
||||
export const MenuItemGroup = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
ChakraMenu.ItemGroupProps
|
||||
>(function MenuItemGroup(props, ref) {
|
||||
const { title, children, ...rest } = props
|
||||
return (
|
||||
<ChakraMenu.ItemGroup ref={ref} {...rest}>
|
||||
{title && (
|
||||
<ChakraMenu.ItemGroupLabel userSelect="none">
|
||||
{title}
|
||||
</ChakraMenu.ItemGroupLabel>
|
||||
)}
|
||||
{children}
|
||||
</ChakraMenu.ItemGroup>
|
||||
)
|
||||
})
|
||||
|
||||
export interface MenuTriggerItemProps extends ChakraMenu.ItemProps {
|
||||
startIcon?: React.ReactNode
|
||||
}
|
||||
|
||||
export const MenuTriggerItem = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
MenuTriggerItemProps
|
||||
>(function MenuTriggerItem(props, ref) {
|
||||
const { startIcon, children, ...rest } = props
|
||||
return (
|
||||
<ChakraMenu.TriggerItem ref={ref} {...rest}>
|
||||
{startIcon}
|
||||
{children}
|
||||
<LuChevronRight />
|
||||
</ChakraMenu.TriggerItem>
|
||||
)
|
||||
})
|
||||
|
||||
export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup
|
||||
export const MenuContextTrigger = ChakraMenu.ContextTrigger
|
||||
export const MenuRoot = ChakraMenu.Root
|
||||
export const MenuSeparator = ChakraMenu.Separator
|
||||
|
||||
export const MenuItem = ChakraMenu.Item
|
||||
export const MenuItemText = ChakraMenu.ItemText
|
||||
export const MenuItemCommand = ChakraMenu.ItemCommand
|
||||
export const MenuTrigger = ChakraMenu.Trigger
|
||||
@ -1,24 +0,0 @@
|
||||
import { NumberInput as ChakraNumberInput } from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
|
||||
export interface NumberInputProps extends ChakraNumberInput.RootProps {}
|
||||
|
||||
export const NumberInputRoot = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
NumberInputProps
|
||||
>(function NumberInput(props, ref) {
|
||||
const { children, ...rest } = props
|
||||
return (
|
||||
<ChakraNumberInput.Root ref={ref} variant="outline" {...rest}>
|
||||
{children}
|
||||
<ChakraNumberInput.Control>
|
||||
<ChakraNumberInput.IncrementTrigger />
|
||||
<ChakraNumberInput.DecrementTrigger />
|
||||
</ChakraNumberInput.Control>
|
||||
</ChakraNumberInput.Root>
|
||||
)
|
||||
})
|
||||
|
||||
export const NumberInputField = ChakraNumberInput.Input
|
||||
export const NumberInputScrubber = ChakraNumberInput.Scrubber
|
||||
export const NumberInputLabel = ChakraNumberInput.Label
|
||||
@ -1,59 +0,0 @@
|
||||
import { Popover as ChakraPopover, Portal } from "@chakra-ui/react"
|
||||
import { CloseButton } from "./close-button"
|
||||
import * as React from "react"
|
||||
|
||||
interface PopoverContentProps extends ChakraPopover.ContentProps {
|
||||
portalled?: boolean
|
||||
portalRef?: React.RefObject<HTMLElement>
|
||||
}
|
||||
|
||||
export const PopoverContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
PopoverContentProps
|
||||
>(function PopoverContent(props, ref) {
|
||||
const { portalled = true, portalRef, ...rest } = props
|
||||
return (
|
||||
<Portal disabled={!portalled} container={portalRef}>
|
||||
<ChakraPopover.Positioner>
|
||||
<ChakraPopover.Content ref={ref} {...rest} />
|
||||
</ChakraPopover.Positioner>
|
||||
</Portal>
|
||||
)
|
||||
})
|
||||
|
||||
export const PopoverArrow = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
ChakraPopover.ArrowProps
|
||||
>(function PopoverArrow(props, ref) {
|
||||
return (
|
||||
<ChakraPopover.Arrow {...props} ref={ref}>
|
||||
<ChakraPopover.ArrowTip />
|
||||
</ChakraPopover.Arrow>
|
||||
)
|
||||
})
|
||||
|
||||
export const PopoverCloseTrigger = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
ChakraPopover.CloseTriggerProps
|
||||
>(function PopoverCloseTrigger(props, ref) {
|
||||
return (
|
||||
<ChakraPopover.CloseTrigger
|
||||
position="absolute"
|
||||
top="1"
|
||||
insetEnd="1"
|
||||
{...props}
|
||||
asChild
|
||||
ref={ref}
|
||||
>
|
||||
<CloseButton size="sm" />
|
||||
</ChakraPopover.CloseTrigger>
|
||||
)
|
||||
})
|
||||
|
||||
export const PopoverTitle = ChakraPopover.Title
|
||||
export const PopoverDescription = ChakraPopover.Description
|
||||
export const PopoverFooter = ChakraPopover.Footer
|
||||
export const PopoverHeader = ChakraPopover.Header
|
||||
export const PopoverRoot = ChakraPopover.Root
|
||||
export const PopoverBody = ChakraPopover.Body
|
||||
export const PopoverTrigger = ChakraPopover.Trigger
|
||||
@ -1,15 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
|
||||
import {
|
||||
ColorModeProvider,
|
||||
type ColorModeProviderProps,
|
||||
} from "./color-mode"
|
||||
|
||||
export function Provider(props: ColorModeProviderProps) {
|
||||
return (
|
||||
<ChakraProvider value={defaultSystem}>
|
||||
<ColorModeProvider {...props} />
|
||||
</ChakraProvider>
|
||||
)
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
|
||||
export interface RadioProps extends ChakraRadioGroup.ItemProps {
|
||||
rootRef?: React.Ref<HTMLDivElement>
|
||||
inputProps?: React.InputHTMLAttributes<HTMLInputElement>
|
||||
}
|
||||
|
||||
export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
|
||||
function Radio(props, ref) {
|
||||
const { children, inputProps, rootRef, ...rest } = props
|
||||
return (
|
||||
<ChakraRadioGroup.Item ref={rootRef} {...rest}>
|
||||
<ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
|
||||
<ChakraRadioGroup.ItemIndicator />
|
||||
{children && (
|
||||
<ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
|
||||
)}
|
||||
</ChakraRadioGroup.Item>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
export const RadioGroup = ChakraRadioGroup.Root
|
||||
@ -1,82 +0,0 @@
|
||||
import { Slider as ChakraSlider, For, HStack } from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
|
||||
export interface SliderProps extends ChakraSlider.RootProps {
|
||||
marks?: Array<number | { value: number; label: React.ReactNode }>
|
||||
label?: React.ReactNode
|
||||
showValue?: boolean
|
||||
}
|
||||
|
||||
export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
|
||||
function Slider(props, ref) {
|
||||
const { marks: marksProp, label, showValue, ...rest } = props
|
||||
const value = props.defaultValue ?? props.value
|
||||
|
||||
const marks = marksProp?.map((mark) => {
|
||||
if (typeof mark === "number") return { value: mark, label: undefined }
|
||||
return mark
|
||||
})
|
||||
|
||||
const hasMarkLabel = !!marks?.some((mark) => mark.label)
|
||||
|
||||
return (
|
||||
<ChakraSlider.Root ref={ref} thumbAlignment="center" {...rest}>
|
||||
{label && !showValue && (
|
||||
<ChakraSlider.Label>{label}</ChakraSlider.Label>
|
||||
)}
|
||||
{label && showValue && (
|
||||
<HStack justify="space-between">
|
||||
<ChakraSlider.Label>{label}</ChakraSlider.Label>
|
||||
<ChakraSlider.ValueText />
|
||||
</HStack>
|
||||
)}
|
||||
<ChakraSlider.Control data-has-mark-label={hasMarkLabel || undefined}>
|
||||
<ChakraSlider.Track>
|
||||
<ChakraSlider.Range />
|
||||
</ChakraSlider.Track>
|
||||
<SliderThumbs value={value} />
|
||||
<SliderMarks marks={marks} />
|
||||
</ChakraSlider.Control>
|
||||
</ChakraSlider.Root>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
function SliderThumbs(props: { value?: number[] }) {
|
||||
const { value } = props
|
||||
return (
|
||||
<For each={value}>
|
||||
{(_, index) => (
|
||||
<ChakraSlider.Thumb key={index} index={index}>
|
||||
<ChakraSlider.HiddenInput />
|
||||
</ChakraSlider.Thumb>
|
||||
)}
|
||||
</For>
|
||||
)
|
||||
}
|
||||
|
||||
interface SliderMarksProps {
|
||||
marks?: Array<number | { value: number; label: React.ReactNode }>
|
||||
}
|
||||
|
||||
const SliderMarks = React.forwardRef<HTMLDivElement, SliderMarksProps>(
|
||||
function SliderMarks(props, ref) {
|
||||
const { marks } = props
|
||||
if (!marks?.length) return null
|
||||
|
||||
return (
|
||||
<ChakraSlider.MarkerGroup ref={ref}>
|
||||
{marks.map((mark, index) => {
|
||||
const value = typeof mark === "number" ? mark : mark.value
|
||||
const label = typeof mark === "number" ? undefined : mark.label
|
||||
return (
|
||||
<ChakraSlider.Marker key={index} value={value}>
|
||||
<ChakraSlider.MarkerIndicator />
|
||||
{label}
|
||||
</ChakraSlider.Marker>
|
||||
)
|
||||
})}
|
||||
</ChakraSlider.MarkerGroup>
|
||||
)
|
||||
},
|
||||
)
|
||||
@ -1,51 +1,39 @@
|
||||
"use client"
|
||||
|
||||
import { RestErrorResponse } from "@/back-api";
|
||||
import {
|
||||
Toaster as ChakraToaster,
|
||||
Portal,
|
||||
Spinner,
|
||||
Stack,
|
||||
Toast,
|
||||
createToaster,
|
||||
} from "@chakra-ui/react"
|
||||
import { HStack } from "@/ui";
|
||||
|
||||
export const toaster = createToaster({
|
||||
placement: "bottom-end",
|
||||
pauseOnPageIdle: true,
|
||||
})
|
||||
// export const toaster = createToaster({
|
||||
// placement: "bottom-end",
|
||||
// pauseOnPageIdle: true,
|
||||
// })
|
||||
|
||||
export const toasterAPIError = (error: RestErrorResponse) => {
|
||||
toaster.create({
|
||||
title: `[${error.status}] ${error.statusMessage}`,
|
||||
description: error.message,
|
||||
});
|
||||
};
|
||||
// export const toasterAPIError = (error: RestErrorResponse) => {
|
||||
// toaster.create({
|
||||
// title: `[${error.status}] ${error.statusMessage}`,
|
||||
// description: error.message,
|
||||
// });
|
||||
// };
|
||||
|
||||
export const Toaster = () => {
|
||||
return (
|
||||
<Portal>
|
||||
<ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
|
||||
{(toast) => (
|
||||
<Toast.Root width={{ md: "sm" }}>
|
||||
{toast.type === "loading" ? (
|
||||
<Spinner size="sm" color="blue.solid" />
|
||||
) : (
|
||||
<Toast.Indicator />
|
||||
)}
|
||||
<Stack gap="1" flex="1" maxWidth="100%">
|
||||
{toast.title && <Toast.Title>{toast.title}</Toast.Title>}
|
||||
{toast.description && (
|
||||
<Toast.Description>{toast.description}</Toast.Description>
|
||||
)}
|
||||
</Stack>
|
||||
{toast.action && (
|
||||
<Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
|
||||
)}
|
||||
{toast.meta?.closable && <Toast.CloseTrigger />}
|
||||
</Toast.Root>
|
||||
)}
|
||||
</ChakraToaster>
|
||||
</Portal>
|
||||
)
|
||||
}
|
||||
// export const Toaster = () => {
|
||||
// return (
|
||||
// <Portal>
|
||||
// <ArkToaster toaster={toaster}>
|
||||
// {(toast) => (
|
||||
// <Toast.Root>
|
||||
// <HStack spacing="1" style={{ width: "100%" }}>
|
||||
// {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
|
||||
// {toast.description && (
|
||||
// <Toast.Description>{toast.description}</Toast.Description>
|
||||
// )}
|
||||
// </HStack>
|
||||
// {toast.action && (
|
||||
// <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
|
||||
// )}
|
||||
// {toast.meta?.closable && <Toast.CloseTrigger />}
|
||||
// </Toast.Root>
|
||||
// )}
|
||||
// </ArkToaster>
|
||||
// </Portal>
|
||||
// )
|
||||
// }
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
|
||||
import * as React from "react"
|
||||
|
||||
export interface TooltipProps extends ChakraTooltip.RootProps {
|
||||
showArrow?: boolean
|
||||
portalled?: boolean
|
||||
portalRef?: React.RefObject<HTMLElement>
|
||||
content: React.ReactNode
|
||||
contentProps?: ChakraTooltip.ContentProps
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
|
||||
function Tooltip(props, ref) {
|
||||
const {
|
||||
showArrow,
|
||||
children,
|
||||
disabled,
|
||||
portalled = true,
|
||||
content,
|
||||
contentProps,
|
||||
portalRef,
|
||||
...rest
|
||||
} = props
|
||||
|
||||
if (disabled) return children
|
||||
|
||||
return (
|
||||
<ChakraTooltip.Root {...rest}>
|
||||
<ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
|
||||
<Portal disabled={!portalled} container={portalRef}>
|
||||
<ChakraTooltip.Positioner>
|
||||
<ChakraTooltip.Content ref={ref} {...contentProps}>
|
||||
{showArrow && (
|
||||
<ChakraTooltip.Arrow>
|
||||
<ChakraTooltip.ArrowTip />
|
||||
</ChakraTooltip.Arrow>
|
||||
)}
|
||||
{content}
|
||||
</ChakraTooltip.Content>
|
||||
</ChakraTooltip.Positioner>
|
||||
</Portal>
|
||||
</ChakraTooltip.Root>
|
||||
)
|
||||
},
|
||||
)
|
||||
@ -1,28 +0,0 @@
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/fr';
|
||||
import advancedFormat from 'dayjs/plugin/advancedFormat';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
import dayOfYear from 'dayjs/plugin/dayOfYear';
|
||||
import duration from 'dayjs/plugin/duration';
|
||||
import isBetween from 'dayjs/plugin/isBetween';
|
||||
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
|
||||
import isToday from 'dayjs/plugin/isToday';
|
||||
import isTomorrow from 'dayjs/plugin/isTomorrow';
|
||||
import isYesterday from 'dayjs/plugin/isYesterday';
|
||||
import quarterOfYear from 'dayjs/plugin/quarterOfYear';
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import weekOfYear from 'dayjs/plugin/weekOfYear';
|
||||
|
||||
dayjs.locale('fr');
|
||||
dayjs.extend(relativeTime);
|
||||
dayjs.extend(customParseFormat);
|
||||
dayjs.extend(weekOfYear);
|
||||
dayjs.extend(isSameOrAfter);
|
||||
dayjs.extend(isToday);
|
||||
dayjs.extend(isTomorrow);
|
||||
dayjs.extend(isYesterday);
|
||||
dayjs.extend(dayOfYear);
|
||||
dayjs.extend(isBetween);
|
||||
dayjs.extend(advancedFormat);
|
||||
dayjs.extend(quarterOfYear);
|
||||
dayjs.extend(duration);
|
||||
@ -1,2 +0,0 @@
|
||||
import './axios';
|
||||
import './dayjs';
|
||||
@ -1,4 +1,4 @@
|
||||
export const BASE_WRAP_SPACING = { base: "5px", md: "10px", lg: "20px" };
|
||||
export const BASE_WRAP_WIDTH = { base: "90%", md: "45%", lg: "270px" };
|
||||
export const BASE_WRAP_HEIGHT = { base: "75px", lg: "120px" };
|
||||
export const BASE_WRAP_ICON_SIZE = { base: "50px", lg: "100px" };
|
||||
export const BASE_WRAP_SPACING = "5px"; // { base: "5px", md: "10px", lg: "20px" };
|
||||
export const BASE_WRAP_WIDTH = "90%"; // { base: "90%", md: "45%", lg: "270px" };
|
||||
export const BASE_WRAP_HEIGHT = "75px"; // { base: "75px", lg: "120px" };
|
||||
export const BASE_WRAP_ICON_SIZE = "50px";// { base: "50px", lg: "100px" };
|
||||
@ -1,26 +1,27 @@
|
||||
import { Box, Button, Center, Heading, Link, Text } from '@chakra-ui/react';
|
||||
|
||||
import { MdControlCamera } from 'react-icons/md';
|
||||
|
||||
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
|
||||
import { TopBar } from '@/components/TopBar/TopBar';
|
||||
import { Flex, Link, Text } from '@/ui';
|
||||
|
||||
export const Error401 = () => {
|
||||
return (
|
||||
<>
|
||||
<TopBar />
|
||||
<PageLayoutInfoCenter padding="25px">
|
||||
<Center>
|
||||
<MdControlCamera style={{ width: "250px", height: "250px", color: "orange" }} />
|
||||
</Center>
|
||||
<Box textAlign="center">
|
||||
<Heading>Erreur 401</Heading>
|
||||
<PageLayoutInfoCenter padding="25px" width="75%">
|
||||
<Flex align="center">
|
||||
<MdControlCamera size="250px" color="red.600" />
|
||||
</Flex>
|
||||
<Flex style={{ textAlign: "center" }}>
|
||||
<Text fontSize="px">Erreur 401</Text>
|
||||
<Text color="red.600">
|
||||
Vous n'êtes pas autorisé a accéder a ce contenu.
|
||||
</Text>
|
||||
<Link as="a" href="/">
|
||||
<Link href="/">
|
||||
Retour à l'accueil
|
||||
</Link>
|
||||
</Box>
|
||||
</Flex>
|
||||
</PageLayoutInfoCenter>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,24 +1,26 @@
|
||||
import { Box, Button, Center, Heading, Link, Text } from '@chakra-ui/react';
|
||||
import { MdDangerous } from 'react-icons/md';
|
||||
import { MdControlCamera } from 'react-icons/md';
|
||||
|
||||
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
|
||||
import { TopBar } from '@/components/TopBar/TopBar';
|
||||
import { Flex, Link, Text } from '@/ui';
|
||||
|
||||
export const Error403 = () => {
|
||||
return (
|
||||
<>
|
||||
<TopBar />
|
||||
<PageLayoutInfoCenter padding="25px">
|
||||
<Center>
|
||||
<MdDangerous style={{ width: "250px", height: "250px", color: "red" }} />
|
||||
</Center>
|
||||
<Box textAlign="center">
|
||||
<Heading>Erreur 403</Heading>
|
||||
<Text color="orange.600">Cette page vous est interdite</Text>
|
||||
<PageLayoutInfoCenter padding="25px" width="75%">
|
||||
<Flex align="center">
|
||||
<MdControlCamera size="250px" color="red.600" />
|
||||
</Flex>
|
||||
<Flex style={{ textAlign: "center" }}>
|
||||
<Text fontSize="px">Erreur 403</Text>
|
||||
<Text color="red.600">
|
||||
Cette page vous est interdite.
|
||||
</Text>
|
||||
<Link href="/">
|
||||
Retour à l'accueil
|
||||
</Link>
|
||||
</Box>
|
||||
</Flex>
|
||||
</PageLayoutInfoCenter>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
import { Box, Button, Center, Heading, Link, Text } from '@chakra-ui/react';
|
||||
import { MdSignpost } from 'react-icons/md';
|
||||
import { MdControlCamera } from 'react-icons/md';
|
||||
|
||||
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
|
||||
import { TopBar } from '@/components/TopBar/TopBar';
|
||||
import { Flex, Link, Text } from '@/ui';
|
||||
|
||||
export const Error404 = () => {
|
||||
return (
|
||||
<>
|
||||
<TopBar />
|
||||
<PageLayoutInfoCenter padding="25px">
|
||||
<Center>
|
||||
<MdSignpost style={{ width: "250px", height: "250px", color: "aqua" }} />
|
||||
</Center>
|
||||
<Box textAlign="center">
|
||||
<Heading>Erreur 404</Heading>
|
||||
<Text color="gray.600">
|
||||
Cette page n'existe plus ou l'URL a changé
|
||||
<PageLayoutInfoCenter padding="25px" width="75%">
|
||||
<Flex align="center">
|
||||
<MdControlCamera size="250px" color="red.600" />
|
||||
</Flex>
|
||||
<Flex style={{ textAlign: "center" }}>
|
||||
<Text fontSize="px">Erreur 404</Text>
|
||||
<Text color="red.600">
|
||||
Cette page n'existe plus ou l'URL a changé.
|
||||
</Text>
|
||||
<Link href="/">
|
||||
Retour à l'accueil
|
||||
</Link>
|
||||
</Box>
|
||||
</Flex>
|
||||
</PageLayoutInfoCenter>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,30 +1,44 @@
|
||||
import { Button, Flex, Text } from '@/ui';
|
||||
import { useDisclosure } from '@/utils/disclosure';
|
||||
import React, { FC } from 'react';
|
||||
|
||||
import {
|
||||
AlertDescription,
|
||||
AlertTitle,
|
||||
Box,
|
||||
Alert,
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import {
|
||||
FallbackProps,
|
||||
ErrorBoundary as ReactErrorBoundary,
|
||||
} from 'react-error-boundary';
|
||||
import { LuChevronUp, LuChevronDown } from 'react-icons/lu';
|
||||
|
||||
const ErrorFallback = ({ error }: FallbackProps) => {
|
||||
const { open, onToggle } = useDisclosure();
|
||||
return (
|
||||
<Box padding="8" margin="auto">
|
||||
<Alert.Root status="error" borderRadius="md">
|
||||
<Alert.Indicator height="75px" width="75px" />
|
||||
<Box flex="1">
|
||||
<AlertTitle fontWeight="bold" fontSize="35px">An unexpected error has occurred.</AlertTitle>
|
||||
<AlertDescription padding="5" marginTop="3" fontSize="20px" lineHeight="1.4">
|
||||
<br />
|
||||
{error.message}
|
||||
<Flex direction="column" style={{ padding: 4, margin: "auto", backgroundColor: "red.500" }}>
|
||||
<Text color='red'>An unexpected error has occurred.</Text>
|
||||
<Text>Message: {error.message}</Text>
|
||||
{/*
|
||||
<AlertRoot status="error" borderRadius="md">
|
||||
<Flex style={{ flex: "1" }}>
|
||||
<AlertTitle>An unexpected error has occurred.</AlertTitle>
|
||||
<AlertDescription display="block" lineHeight="1.4">
|
||||
<Button
|
||||
//theme="@secondary"
|
||||
color="red.800"
|
||||
//size="sm"
|
||||
onClick={onToggle}
|
||||
>
|
||||
Show details {open ? <LuChevronUp /> : <LuChevronDown />}
|
||||
</Button>
|
||||
<Collapsible.Root open={open}>
|
||||
<Collapsible.Content>
|
||||
<Flex mt={4} fontFamily="monospace">
|
||||
{error.message}
|
||||
</Flex>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
</AlertDescription>
|
||||
</Box>
|
||||
</Alert.Root>
|
||||
</Box>
|
||||
</Flex>
|
||||
</AlertRoot> */}
|
||||
</Flex >
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import { createIcon } from '@chakra-ui/react';
|
||||
|
||||
export const DoubleArrowIcon = createIcon({
|
||||
displayName: 'DoubleArrowIcon',
|
||||
viewBox: '0 0 24 24',
|
||||
path: (
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M1.293 12.207a1 1 0 0 1 0-1.414l6.364-6.364A1 1 0 0 1 9.07 5.843L4.414 10.5h15.172l-4.657-4.657a1 1 0 0 1 1.414-1.414l6.364 6.364a1 1 0 0 1 0 1.414l-6.364 6.364a1 1 0 0 1-1.414-1.414l4.657-4.657H4.414l4.657 4.657a1 1 0 1 1-1.414 1.414l-6.364-6.364Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
),
|
||||
});
|
||||
|
||||
export const DoubleArrowIcon = <></>;
|
||||
// createIcon({
|
||||
// displayName: 'DoubleArrowIcon',
|
||||
// viewBox: '0 0 24 24',
|
||||
// path: (
|
||||
// <path
|
||||
// fillRule="evenodd"
|
||||
// clipRule="evenodd"
|
||||
// d="M1.293 12.207a1 1 0 0 1 0-1.414l6.364-6.364A1 1 0 0 1 9.07 5.843L4.414 10.5h15.172l-4.657-4.657a1 1 0 0 1 1.414-1.414l6.364 6.364a1 1 0 0 1 0 1.414l-6.364 6.364a1 1 0 0 1-1.414-1.414l4.657-4.657H4.414l4.657 4.657a1 1 0 1 1-1.414 1.414l-6.364-6.364Z"
|
||||
// fill="currentColor"
|
||||
// />
|
||||
// ),
|
||||
// });
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
import { StrictMode } from 'react';
|
||||
|
||||
import ReactDOM from 'react-dom/client';
|
||||
|
||||
import App from '@/App';
|
||||
import { ColorModeProvider } from './components/ui/color-mode';
|
||||
|
||||
import { ThemeProvider } from './theme/ThemeContext';
|
||||
// Render the app
|
||||
const rootElement = document.getElementById('root');
|
||||
if (rootElement && !rootElement.innerHTML) {
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<StrictMode>
|
||||
<ColorModeProvider>
|
||||
<App />
|
||||
</ColorModeProvider>
|
||||
</StrictMode>
|
||||
// <StrictMode>
|
||||
<ThemeProvider>
|
||||
<App />
|
||||
</ThemeProvider>
|
||||
// </StrictMode>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { AudioPlayer } from '@/components/AudioPlayer';
|
||||
import { ErrorBoundary } from '@/errors/ErrorBoundary';
|
||||
import { AppRoutes } from '@/scene/AppRoutes';
|
||||
import { Text } from '@/ui';
|
||||
import { ServiceContextProvider } from '@/service/ServiceContext';
|
||||
|
||||
export const App = () => {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { Box, Button, Flex, Text } from '@chakra-ui/react';
|
||||
import { LuDisc3 } from 'react-icons/lu';
|
||||
import { Md1kPlus, MdAdd, MdEdit, MdPlusOne } from 'react-icons/md';
|
||||
|
||||
import { MdEdit } from 'react-icons/md';
|
||||
import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import { Covers } from '@/components/Cover';
|
||||
@ -14,8 +13,9 @@ import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
|
||||
import { useActivePlaylistService } from '@/service/ActivePlaylist';
|
||||
import { useSpecificAlbum } from '@/service/Album';
|
||||
import { useTracksOfAnAlbum } from '@/service/Track';
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';
|
||||
import { Button, Flex, Text } from '@/ui';
|
||||
|
||||
export const AlbumDetailPage = () => {
|
||||
const { albumId } = useParams();
|
||||
@ -46,7 +46,7 @@ export const AlbumDetailPage = () => {
|
||||
return (
|
||||
<>
|
||||
<TopBar title="Album detail" />
|
||||
<PageLayoutInfoCenter>
|
||||
<PageLayoutInfoCenter width="75%">
|
||||
Fail to load artist id: {albumId}
|
||||
</PageLayoutInfoCenter>
|
||||
</>
|
||||
@ -68,17 +68,19 @@ export const AlbumDetailPage = () => {
|
||||
data-testid="Album-detail-page_layout">
|
||||
<Flex
|
||||
direction="row"
|
||||
width="80%"
|
||||
marginX="auto"
|
||||
padding="10px"
|
||||
gap="10px"
|
||||
style={{
|
||||
width: "80%",
|
||||
margin: "0 auto",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Covers
|
||||
data={dataAlbum?.covers}
|
||||
iconEmpty={<LuDisc3 />}
|
||||
// TODO: iconEmpty={LuDisc3}
|
||||
slideshow
|
||||
/>
|
||||
<Flex direction="column" width="80%" marginRight="auto">
|
||||
<Flex direction="column" style={{ width: "80%", marginRight: "auto" }}>
|
||||
<Text fontSize="24px" fontWeight="bold">
|
||||
{dataAlbum?.name}
|
||||
</Text>
|
||||
@ -93,25 +95,27 @@ export const AlbumDetailPage = () => {
|
||||
|
||||
<Flex
|
||||
direction="column"
|
||||
gap={BASE_WRAP_SPACING}
|
||||
marginX="auto"
|
||||
padding="20px"
|
||||
width="80%"
|
||||
data-testid="Album-detail-page_flex-list"
|
||||
gap={BASE_WRAP_SPACING} style={{
|
||||
margin: "0 auto",
|
||||
padding: "20px",
|
||||
width: "80%",
|
||||
}}
|
||||
data-test-id="Album-detail-page_flex-list"
|
||||
>
|
||||
{tracksOnAnAlbum?.map((data) => (
|
||||
<Box
|
||||
minWidth="100%"
|
||||
//height="60px"
|
||||
border="1px"
|
||||
borderColor="brand.900"
|
||||
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
||||
<Flex
|
||||
key={data.id}
|
||||
padding="5px"
|
||||
as="button"
|
||||
_hover={{
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
style={{
|
||||
minWidth: "100%",
|
||||
//height="60px"
|
||||
border: "1px",
|
||||
borderColor: "brand.900",
|
||||
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
|
||||
padding: "5px",
|
||||
// _hover: {
|
||||
// boxShadow: 'outline-over',
|
||||
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
// }
|
||||
}}
|
||||
>
|
||||
<DisplayTrackFull
|
||||
@ -120,20 +124,15 @@ export const AlbumDetailPage = () => {
|
||||
contextMenu={[
|
||||
{
|
||||
name: 'Edit',
|
||||
icon: <MdEdit />,
|
||||
onClick: () => {
|
||||
navigate(`/album/${albumId}/edit-track/${data.id}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: <MdAdd />,
|
||||
name: 'Add Playlist',
|
||||
onClick: () => { }
|
||||
},
|
||||
{ name: 'Add Playlist', onClick: () => { } },
|
||||
]}
|
||||
data-testid="Album-detail-page_display-detail"
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
<EmptyEnd />
|
||||
</Flex>
|
||||
|
||||
@ -9,9 +9,9 @@ import { SearchInput } from '@/components/SearchInput';
|
||||
import { TopBar } from '@/components/TopBar/TopBar';
|
||||
import { DisplayAlbum } from '@/components/album/DisplayAlbum';
|
||||
import { useOrderedAlbums } from '@/service/Album';
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { BASE_WRAP_SPACING, BASE_WRAP_WIDTH, BASE_WRAP_HEIGHT } from '@/constants/genericSpacing';
|
||||
import { Flex, HStack } from '@chakra-ui/react';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
import { BASE_WRAP_WIDTH, BASE_WRAP_HEIGHT } from '@/constants/genericSpacing';
|
||||
import { Button, Flex, HStack } from '@/ui';
|
||||
|
||||
export const AlbumsPage = () => {
|
||||
const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
|
||||
@ -25,7 +25,7 @@ export const AlbumsPage = () => {
|
||||
return (
|
||||
<>
|
||||
<TopBar title="All Albums" />
|
||||
<PageLayoutInfoCenter>No Album available</PageLayoutInfoCenter>
|
||||
<PageLayoutInfoCenter width="75%">No Album available</PageLayoutInfoCenter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -36,29 +36,31 @@ export const AlbumsPage = () => {
|
||||
<SearchInput onChange={setFilterTitle} />
|
||||
</TopBar>
|
||||
<PageLayout>
|
||||
<HStack wrap="wrap" gap={BASE_WRAP_SPACING} marginX="auto" padding="20px" justify="center">
|
||||
<HStack style={{ flexWrap: "wrap", /*spacing={BASE_WRAP_SPACING}*/ margin: "0 auto", padding: "20px", justifyContent: "center" }}>
|
||||
{dataAlbums.map((data) => (
|
||||
<Flex align="flex-start"
|
||||
width={BASE_WRAP_WIDTH}
|
||||
height={BASE_WRAP_HEIGHT}
|
||||
border="1px"
|
||||
borderColor="brand.900"
|
||||
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
||||
<Button
|
||||
key={data.id}
|
||||
padding="5px"
|
||||
as="button"
|
||||
_hover={{
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
style={{
|
||||
width: BASE_WRAP_WIDTH,
|
||||
height: BASE_WRAP_HEIGHT,
|
||||
border: "1px",
|
||||
borderColor: "brand.900",
|
||||
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
|
||||
padding: "5px",
|
||||
// _hover={
|
||||
// boxShadow: 'outline-over',
|
||||
// bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
|
||||
// }
|
||||
alignContent: "flex-start",
|
||||
}}
|
||||
onClick={() => onSelectItem(data.id)}
|
||||
>
|
||||
<DisplayAlbum dataAlbum={data} />
|
||||
</Flex>
|
||||
</Button>
|
||||
))}
|
||||
</HStack>
|
||||
<EmptyEnd />
|
||||
</PageLayout>
|
||||
</PageLayout >
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { Box, Button, Flex, Text } from '@chakra-ui/react';
|
||||
import { LuDisc3, LuUser } from 'react-icons/lu';
|
||||
import { MdAdd, MdEdit, MdPerson } from 'react-icons/md';
|
||||
|
||||
import { MdEdit } from 'react-icons/md';
|
||||
import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import { Covers } from '@/components/Cover';
|
||||
@ -15,7 +14,8 @@ import { useActivePlaylistService } from '@/service/ActivePlaylist';
|
||||
import { useSpecificAlbum } from '@/service/Album';
|
||||
import { useSpecificArtist } from '@/service/Artist';
|
||||
import { useTracksOfAnAlbum } from '@/service/Track';
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
import { Button, Flex, Text } from '@/ui';
|
||||
|
||||
export const ArtistAlbumDetailPage = () => {
|
||||
const { artistId, albumId } = useParams();
|
||||
@ -60,14 +60,19 @@ export const ArtistAlbumDetailPage = () => {
|
||||
<>
|
||||
<Button
|
||||
{...BUTTON_TOP_BAR_PROPERTY}
|
||||
marginRight="auto"
|
||||
|
||||
style={{
|
||||
marginRight: "auto"
|
||||
}}
|
||||
onClick={() => navigate(`/artist/${dataArtist.id}`)}
|
||||
>
|
||||
<Covers
|
||||
data={dataArtist?.covers}
|
||||
size="35px"
|
||||
borderRadius="full"
|
||||
iconEmpty={<MdPerson />}
|
||||
style={{
|
||||
borderRadius: "full",
|
||||
}}
|
||||
// TODO: iconEmpty={MdPerson}
|
||||
/>
|
||||
<Text fontSize="24px" fontWeight="bold">
|
||||
{dataArtist?.name}
|
||||
@ -87,17 +92,20 @@ export const ArtistAlbumDetailPage = () => {
|
||||
<PageLayout>
|
||||
<Flex
|
||||
direction="row"
|
||||
width="80%"
|
||||
marginX="auto"
|
||||
padding="10px"
|
||||
style={{
|
||||
width: "80%",
|
||||
margin: "0 auto",
|
||||
padding: "10px",
|
||||
}}
|
||||
gap="10px"
|
||||
>
|
||||
<Covers
|
||||
data={dataAlbum?.covers}
|
||||
iconEmpty={<LuDisc3 />}
|
||||
// TODO: iconEmpty={LuDisc3}
|
||||
slideshow
|
||||
/>
|
||||
<Flex direction="column" width="80%" marginRight="auto">
|
||||
<Flex direction="column"
|
||||
style={{ width: "80%", marginRight: "auto" }}>
|
||||
<Text fontSize="24px" fontWeight="bold">
|
||||
{dataAlbum?.name}
|
||||
</Text>
|
||||
@ -113,22 +121,28 @@ export const ArtistAlbumDetailPage = () => {
|
||||
<Flex
|
||||
direction="column"
|
||||
gap="20px"
|
||||
marginX="auto"
|
||||
padding="20px"
|
||||
width="80%"
|
||||
|
||||
style={{
|
||||
margin: "0 auto",
|
||||
padding: "20px",
|
||||
width: "80%",
|
||||
}}
|
||||
>
|
||||
{tracksOnAnAlbum?.map((data) => (
|
||||
<Box
|
||||
minWidth="100%"
|
||||
height="60px"
|
||||
border="1px"
|
||||
borderColor="brand.900"
|
||||
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
||||
<Flex
|
||||
key={data.id}
|
||||
padding="5px"
|
||||
_hover={{
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
|
||||
style={{
|
||||
minWidth: "100%",
|
||||
height: "60px",
|
||||
border: "1px",
|
||||
borderColor: "brand.900",
|
||||
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
|
||||
padding: "5px",
|
||||
// _hover: {
|
||||
// boxShadow: 'outline-over',
|
||||
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
// }
|
||||
}}
|
||||
>
|
||||
<DisplayTrack
|
||||
@ -137,21 +151,16 @@ export const ArtistAlbumDetailPage = () => {
|
||||
contextMenu={[
|
||||
{
|
||||
name: 'Edit',
|
||||
icon: <MdEdit />,
|
||||
onClick: () => {
|
||||
navigate(
|
||||
`/artist/${artistIdInt}/album/${albumId}/edit-track/${data.id}`
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: <MdAdd />,
|
||||
name: 'Add Playlist',
|
||||
onClick: () => { }
|
||||
},
|
||||
{ name: 'Add Playlist', onClick: () => { } },
|
||||
]}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
<EmptyEnd />
|
||||
</Flex>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { Button, Flex, Text, HStack } from '@chakra-ui/react';
|
||||
import { LuUser } from 'react-icons/lu';
|
||||
|
||||
import { MdEdit, MdGroup } from 'react-icons/md';
|
||||
import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
@ -12,8 +11,9 @@ import { DisplayAlbumId } from '@/components/album/DisplayAlbumId';
|
||||
import { ArtistEditPopUp } from '@/components/popup/ArtistEditPopUp';
|
||||
import { useSpecificArtist } from '@/service/Artist';
|
||||
import { useAlbumIdsOfAnArtist } from '@/service/Track';
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { BASE_WRAP_HEIGHT, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
import { BASE_WRAP_HEIGHT, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
|
||||
import { Button, Flex, HStack, Text } from '@/ui';
|
||||
|
||||
export const ArtistDetailPage = () => {
|
||||
const { artistId } = useParams();
|
||||
@ -41,7 +41,7 @@ export const ArtistDetailPage = () => {
|
||||
<>
|
||||
<Button
|
||||
{...BUTTON_TOP_BAR_PROPERTY}
|
||||
marginRight="auto"
|
||||
style={{ marginRight: "auto" }}
|
||||
onClick={() => navigate(`/artist/all`)}
|
||||
>
|
||||
<MdGroup height="full" />
|
||||
@ -64,13 +64,13 @@ export const ArtistDetailPage = () => {
|
||||
<Flex
|
||||
direction="row"
|
||||
width="80%"
|
||||
marginX="auto"
|
||||
margin="0 auto"
|
||||
padding="10px"
|
||||
gap="10px"
|
||||
>
|
||||
<Covers
|
||||
data={dataArtist?.covers}
|
||||
iconEmpty={<LuUser />}
|
||||
// TODO: iconEmpty={LuUser}
|
||||
slideshow
|
||||
/>
|
||||
<Flex direction="column" width="80%" marginRight="auto">
|
||||
@ -88,25 +88,27 @@ export const ArtistDetailPage = () => {
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<HStack wrap="wrap" gap={BASE_WRAP_SPACING} marginX="auto" padding="20px" justify="center">
|
||||
<HStack style={{ flexWrap: "wrap", /*spacing={BASE_WRAP_SPACING}*/ margin: "0 auto", padding: "20px", justifyContent: "center" }}>
|
||||
{albumIdsOfAnArtist?.map((data) => (
|
||||
<Flex align="flex-start"
|
||||
width={BASE_WRAP_WIDTH}
|
||||
height={BASE_WRAP_HEIGHT}
|
||||
border="1px"
|
||||
borderColor="brand.900"
|
||||
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
||||
<Button
|
||||
key={data}
|
||||
padding="5px"
|
||||
as="button"
|
||||
_hover={{
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
style={{
|
||||
alignContent: "flex-start",
|
||||
width: BASE_WRAP_WIDTH,
|
||||
height: BASE_WRAP_HEIGHT,
|
||||
border: "1px",
|
||||
borderColor: "brand.900",
|
||||
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
|
||||
padding: "5px",
|
||||
// _hover={
|
||||
// boxShadow: 'outline-over',
|
||||
// bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
|
||||
// }
|
||||
}}
|
||||
onClick={() => onSelectItem(data)}
|
||||
>
|
||||
<DisplayAlbumId id={data} key={data} />
|
||||
</Flex>
|
||||
</Button>
|
||||
))}
|
||||
</HStack>
|
||||
<EmptyEnd />
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { Button, Flex, Text, Tooltip, HStack, Span } from '@chakra-ui/react';
|
||||
import { LuUser } from 'react-icons/lu';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { Artist, Track } from '@/back-api';
|
||||
@ -11,13 +9,14 @@ import { PageLayout } from '@/components/Layout/PageLayout';
|
||||
import { SearchInput } from '@/components/SearchInput';
|
||||
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
|
||||
import { useOrderedArtists } from '@/service/Artist';
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { BASE_WRAP_HEIGHT, BASE_WRAP_ICON_SIZE, BASE_WRAP_SPACING, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
import { BASE_WRAP_HEIGHT, BASE_WRAP_ICON_SIZE, BASE_WRAP_WIDTH } from '@/constants/genericSpacing';
|
||||
import { MdOutlineForkRight } from 'react-icons/md';
|
||||
import { useActivePlaylistService } from '@/service/ActivePlaylist';
|
||||
import { shuffleArray } from '@/utils/arrayTools';
|
||||
import { useTrackService } from '@/service/Track';
|
||||
import { DataTools, TypeCheck } from '@/utils/data-tools';
|
||||
import { Button, Flex, HStack, Span, Text } from '@/ui';
|
||||
const LIMIT_RANDOM_VALUES = 25;
|
||||
|
||||
export const ArtistsPage = () => {
|
||||
@ -57,27 +56,27 @@ export const ArtistsPage = () => {
|
||||
<>
|
||||
<TopBar title="All artists">
|
||||
<SearchInput onChange={setFilterName} />
|
||||
<Tooltip.Root aria-label="Random play">
|
||||
<Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onRandomPlay}>
|
||||
<MdOutlineForkRight style={{ width: "100%", height: "100%" }} />
|
||||
</Button>
|
||||
</Tooltip.Root>
|
||||
<Button {...BUTTON_TOP_BAR_PROPERTY} onClick={onRandomPlay}>
|
||||
<MdOutlineForkRight />
|
||||
</Button>
|
||||
</TopBar>
|
||||
<PageLayout>
|
||||
<HStack wrap="wrap" gap={BASE_WRAP_SPACING} marginX="auto" padding="20px" justify="center">
|
||||
<HStack style={{ flexWrap: "wrap", /*spacing={BASE_WRAP_SPACING}*/ margin: "0 auto", padding: "20px", alignContent: "center" }}>
|
||||
{dataArtist?.map((data) => (
|
||||
<Flex align="flex-start"
|
||||
width={BASE_WRAP_WIDTH}
|
||||
height={BASE_WRAP_HEIGHT}
|
||||
border="1px"
|
||||
borderColor="brand.900"
|
||||
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
||||
<Button
|
||||
key={data.id}
|
||||
padding="5px"
|
||||
as="button"
|
||||
_hover={{
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
style={{
|
||||
width: BASE_WRAP_WIDTH,
|
||||
height: BASE_WRAP_HEIGHT,
|
||||
alignContent: "flex-start",
|
||||
border: "1px",
|
||||
borderColor: "brand.900",
|
||||
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
|
||||
padding: "5px",
|
||||
// _hover:{
|
||||
// boxShadow: 'outline-over',
|
||||
// bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
|
||||
// }
|
||||
}}
|
||||
onClick={() => onSelectItem(data)}
|
||||
>
|
||||
@ -85,8 +84,8 @@ export const ArtistsPage = () => {
|
||||
<Covers
|
||||
data={data.covers}
|
||||
size={BASE_WRAP_ICON_SIZE}
|
||||
height="full"
|
||||
iconEmpty={<LuUser />}
|
||||
style={{ height: "full" }}
|
||||
// iconEmpty={LuUser}
|
||||
/>
|
||||
<Flex
|
||||
direction="column"
|
||||
@ -94,18 +93,20 @@ export const ArtistsPage = () => {
|
||||
maxWidth="150px"
|
||||
height="full"
|
||||
paddingLeft="5px"
|
||||
overflowX="hidden"
|
||||
style={{ overflowX: "hidden" }}
|
||||
>
|
||||
<Text
|
||||
textAlign="left"
|
||||
/*align="left"*/
|
||||
/*noOfLines={[1, 2]}*/
|
||||
>
|
||||
<Span
|
||||
fontSize="20px"
|
||||
fontWeight="bold"
|
||||
userSelect="none"
|
||||
marginRight="auto"
|
||||
overflow="hidden"
|
||||
style={{
|
||||
marginRight: "auto",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{data.name}
|
||||
</Span>
|
||||
@ -113,11 +114,11 @@ export const ArtistsPage = () => {
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Button>
|
||||
))}
|
||||
</HStack>
|
||||
<EmptyEnd />
|
||||
</PageLayout >
|
||||
</PageLayout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { Box, Button, Flex, Text } from '@chakra-ui/react';
|
||||
import { LuDisc3 } from 'react-icons/lu';
|
||||
|
||||
import { MdEdit } from 'react-icons/md';
|
||||
import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
@ -10,13 +9,13 @@ import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
|
||||
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
|
||||
import { GenderEditPopUp } from '@/components/popup/GenderEditPopUp';
|
||||
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
|
||||
import { DisplayTrack } from '@/components/track/DisplayTrack';
|
||||
import { DisplayTrackFull } from '@/components/track/DisplayTrackFull';
|
||||
import { useActivePlaylistService } from '@/service/ActivePlaylist';
|
||||
import { useSpecificGender } from '@/service/Gender';
|
||||
import { useTracksOfAGender } from '@/service/Track';
|
||||
//import { useTracksOfAGender } from '@/service/Track';
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
import { Button, Flex, Text } from '@/ui';
|
||||
|
||||
export const GenderDetailPage = () => {
|
||||
const { genderId } = useParams();
|
||||
@ -68,17 +67,19 @@ export const GenderDetailPage = () => {
|
||||
<PageLayout>
|
||||
<Flex
|
||||
direction="row"
|
||||
width="80%"
|
||||
marginX="auto"
|
||||
padding="10px"
|
||||
gap="10px"
|
||||
style={{
|
||||
width: "80%",
|
||||
margin: "0 auto",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Covers
|
||||
data={dataGender?.covers}
|
||||
iconEmpty={<LuDisc3 />}
|
||||
// TODO: iconEmpty={LuDisc3}
|
||||
slideshow
|
||||
/>
|
||||
<Flex direction="column" width="80%" marginRight="auto">
|
||||
<Flex direction="column" style={{ width: "80%", marginRight: "auto" }}>
|
||||
<Text fontSize="24px" fontWeight="bold">
|
||||
{dataGender?.name}
|
||||
</Text>
|
||||
@ -91,23 +92,26 @@ export const GenderDetailPage = () => {
|
||||
<Flex
|
||||
direction="column"
|
||||
gap="20px"
|
||||
marginX="auto"
|
||||
padding="20px"
|
||||
width="80%"
|
||||
style={{
|
||||
margin: "0 auto",
|
||||
padding: "20px",
|
||||
width: "80%",
|
||||
}}
|
||||
>
|
||||
{tracksOnAGender?.map((data) => (
|
||||
<Box
|
||||
minWidth="100%"
|
||||
//height="60px"
|
||||
border="1px"
|
||||
borderColor="brand.900"
|
||||
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
||||
<Flex
|
||||
key={data.id}
|
||||
padding="5px"
|
||||
as="button"
|
||||
_hover={{
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
style={{
|
||||
minWidth: "100%",
|
||||
//height="60px",
|
||||
border: "1px",
|
||||
borderColor: "brand.900",
|
||||
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
|
||||
padding: "5px",
|
||||
// _hover: {
|
||||
// boxShadow: 'outline-over',
|
||||
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
// }
|
||||
}}
|
||||
>
|
||||
<DisplayTrackFull
|
||||
@ -123,7 +127,7 @@ export const GenderDetailPage = () => {
|
||||
{ name: 'Add Playlist', onClick: () => { } },
|
||||
]}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
<EmptyEnd />
|
||||
</Flex>
|
||||
@ -131,7 +135,7 @@ export const GenderDetailPage = () => {
|
||||
<Route path="edit-track/:trackId" element={<TrackEditPopUp />} />
|
||||
<Route path="edit-gender/:genderId" element={<GenderEditPopUp />} />
|
||||
</Routes>
|
||||
</PageLayout >
|
||||
</PageLayout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -9,8 +9,8 @@ import { SearchInput } from '@/components/SearchInput';
|
||||
import { TopBar } from '@/components/TopBar/TopBar';
|
||||
import { DisplayGender } from '@/components/gender/DisplayGender';
|
||||
import { useOrderedGenders } from '@/service/Gender';
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { Flex, HStack } from '@chakra-ui/react';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
import { Flex, HStack } from '@/ui';
|
||||
|
||||
export const GendersPage = () => {
|
||||
const [filterTitle, setFilterTitle] = useState<string | undefined>(undefined);
|
||||
@ -35,20 +35,24 @@ export const GendersPage = () => {
|
||||
<SearchInput onChange={setFilterTitle} />
|
||||
</TopBar>
|
||||
<PageLayout>
|
||||
<HStack wrap="wrap" gap="20px" marginX="auto" padding="20px" justify="center">
|
||||
<HStack style={{
|
||||
// wrap: "wrap",
|
||||
/*spacing="20px"*/ margin: "0 auto 0 auto", padding: "20px", justifyContent: "center"
|
||||
}}>
|
||||
{dataGenders.map((data) => (
|
||||
<Flex align="flex-start"
|
||||
width="270px"
|
||||
height="120px"
|
||||
border="1px"
|
||||
borderColor="brand.900"
|
||||
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
||||
key={data.id}
|
||||
padding="5px"
|
||||
as="button"
|
||||
_hover={{
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
style={{
|
||||
width: "270px",
|
||||
height: "120px",
|
||||
border: "1px",
|
||||
borderColor: "brand.900",
|
||||
//backgroundColor:{useColorModeValue('#FFFFFF88', '#00000088')},
|
||||
padding: "5px",
|
||||
// _hover: {
|
||||
// boxShadow: 'outline-over',
|
||||
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
// }
|
||||
}}
|
||||
onClick={() => onSelectItem(data.id)}
|
||||
>
|
||||
|
||||
@ -1,12 +1,5 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
import {
|
||||
Flex,
|
||||
Input,
|
||||
Table,
|
||||
Text,
|
||||
Button,
|
||||
} from '@chakra-ui/react';
|
||||
import { LuTrash } from 'react-icons/lu';
|
||||
import { MdCloudUpload } from 'react-icons/md';
|
||||
|
||||
@ -32,6 +25,7 @@ import { useGenderService, useOrderedGenders } from '@/service/Gender';
|
||||
import { useServiceContext } from '@/service/ServiceContext';
|
||||
import { useTrackService } from '@/service/Track';
|
||||
import { isNullOrUndefined } from '@/utils/validator';
|
||||
import { Button, Flex, Table, Text } from '@/ui';
|
||||
|
||||
export class ElementList {
|
||||
constructor(
|
||||
@ -121,7 +115,7 @@ export const AddPage = () => {
|
||||
updateNeedSend();
|
||||
};
|
||||
|
||||
const removeElementFromList = (data: FileParsedElement, value: any): void => {
|
||||
const removeElementFromList = (data: FileParsedElement): void => {
|
||||
const parsedElementTmp = [...parsedElement];
|
||||
for (let iii = 0; iii < parsedElementTmp.length; iii++) {
|
||||
if (parsedElementTmp[iii] === data) {
|
||||
@ -420,15 +414,17 @@ export const AddPage = () => {
|
||||
<PageLayout>
|
||||
<Flex
|
||||
direction="column"
|
||||
width="80%"
|
||||
marginX="auto"
|
||||
padding="10px"
|
||||
gap="10px"
|
||||
style={{
|
||||
width: "80%",
|
||||
margin: "0 auto 0 auto",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Flex direction="column" width="full">
|
||||
<Flex direction="column" style={{ width: "full" }}>
|
||||
<Flex>
|
||||
<Text flex={1}>format:</Text>
|
||||
<Text flex={4}>
|
||||
<Text>format:</Text>
|
||||
<Text>
|
||||
The format of the media permit to automatic find meta-data:
|
||||
<br />
|
||||
Artist~album#idTrack-my name of my media.webm
|
||||
@ -437,15 +433,15 @@ export const AddPage = () => {
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex>
|
||||
<Text flex={1}>Media:</Text>
|
||||
<Input
|
||||
<Text>Media:</Text>
|
||||
{/* <Input
|
||||
flex={4}
|
||||
type="file"
|
||||
placeholder="Select a media file"
|
||||
accept=".webm"
|
||||
multiple
|
||||
onChange={onChangeFile}
|
||||
/>
|
||||
/> */}
|
||||
</Flex>
|
||||
</Flex>
|
||||
{parsedElement && parsedElement.length !== 0 && (
|
||||
@ -478,14 +474,12 @@ export const AddPage = () => {
|
||||
suggestion={suggestedAlbum}
|
||||
/>
|
||||
<Table.Root
|
||||
colorPalette="striped"
|
||||
colorScheme="teal"
|
||||
background="gray.700"
|
||||
>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader>track ID</Table.ColumnHeader>
|
||||
<Table.ColumnHeader width="full">Title</Table.ColumnHeader>
|
||||
<Table.ColumnHeader style={{ width: "full" }}>Title</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>actions</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
@ -493,7 +487,7 @@ export const AddPage = () => {
|
||||
{parsedElement.map((data) => (
|
||||
<Table.Row key={data.uniqueId}>
|
||||
<Table.Cell>
|
||||
<Input
|
||||
{/* <Input
|
||||
type="number"
|
||||
pattern="[0-9]{0-4}"
|
||||
placeholder="e?"
|
||||
@ -504,10 +498,10 @@ export const AddPage = () => {
|
||||
? 'darkred'
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
/> */}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Input
|
||||
{/* <Input
|
||||
type="text"
|
||||
placeholder="Name of the Media"
|
||||
value={data.title}
|
||||
@ -515,11 +509,11 @@ export const AddPage = () => {
|
||||
backgroundColor={
|
||||
data.title === '' ? 'darkred' : undefined
|
||||
}
|
||||
/>
|
||||
/> */}
|
||||
{data.nameDetected === true && (
|
||||
<>
|
||||
<br />
|
||||
<Text as="span" color="@danger">
|
||||
<Text style={{ backgroundColor: "red" }}>
|
||||
^^^This title already exist !!!
|
||||
</Text>
|
||||
</>
|
||||
@ -527,8 +521,8 @@ export const AddPage = () => {
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Button
|
||||
onClick={(e) =>
|
||||
removeElementFromList(data, e.target)
|
||||
onClick={() =>
|
||||
removeElementFromList(data)
|
||||
}
|
||||
>
|
||||
<LuTrash /> Remove
|
||||
@ -538,13 +532,14 @@ export const AddPage = () => {
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
<Flex marginY="15px">
|
||||
<Flex style={{ margin: "15px 0 15px 0" }}>
|
||||
<Button
|
||||
colorPalette="brand"
|
||||
//theme="@primary"
|
||||
onClick={sendFile}
|
||||
disabled={!needSend}
|
||||
marginLeft="auto"
|
||||
marginRight="30px"
|
||||
style={{
|
||||
//disabled:!needSend,
|
||||
margin: "0 auto 0 30px"
|
||||
}}
|
||||
>
|
||||
<MdCloudUpload /> Upload
|
||||
</Button>
|
||||
@ -554,14 +549,16 @@ export const AddPage = () => {
|
||||
|
||||
{listFileInBdd && (
|
||||
<Table.Root
|
||||
fontPalette="striped"
|
||||
colorScheme="teal"
|
||||
background="gray.700"
|
||||
//fontPalette="striped"
|
||||
//colorScheme="teal"
|
||||
style={{
|
||||
background: "gray.700"
|
||||
}}
|
||||
>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader>track ID</Table.ColumnHeader>
|
||||
<Table.ColumnHeader width="full">Title</Table.ColumnHeader>
|
||||
<Table.ColumnHeader style={{ width: "full" }}>Title</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>actions</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
@ -597,13 +594,13 @@ export const AddPage = () => {
|
||||
<>
|
||||
<Text fontSize="30px">Rejected:</Text>
|
||||
<Table.Root
|
||||
colorPalette="striped"
|
||||
colorScheme="teal"
|
||||
background="gray.700"
|
||||
//colorPalette="striped"
|
||||
//colorScheme="teal"
|
||||
style={{ background: "gray.700" }}
|
||||
>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader maxWidth="80%">file</Table.ColumnHeader>
|
||||
<Table.ColumnHeader style={{ maxWidth: "80%" }}>file</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>Reason</Table.ColumnHeader>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { ReactElement } from 'react';
|
||||
|
||||
import { Center, Flex, HStack, Text } from '@chakra-ui/react';
|
||||
import { LuCrown, LuDisc3, LuEar, LuFileAudio } from 'react-icons/lu';
|
||||
import { MdGroup } from 'react-icons/md';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
@ -8,7 +7,8 @@ import { useNavigate } from 'react-router-dom';
|
||||
import { PageLayout } from '@/components/Layout/PageLayout';
|
||||
import { TopBar } from '@/components/TopBar/TopBar';
|
||||
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
import { Div, Flex, HStack, Text } from '@/ui';
|
||||
|
||||
type HomeListType = {
|
||||
id: number;
|
||||
@ -58,40 +58,43 @@ export const HomePage = () => {
|
||||
<>
|
||||
<TopBar title="Home" />
|
||||
<PageLayout>
|
||||
<HStack wrap="wrap" gap="20px" marginX="auto" padding="20px" justify="center">
|
||||
<HStack style={{ flexWrap: "wrap", /*spacing="20px"*/ margin: "0 auto", padding: "20px", justify: "center" }}>
|
||||
{homeList.map((data) => (
|
||||
<Flex align="flex-start"
|
||||
width="200px"
|
||||
height="190px"
|
||||
border="1px"
|
||||
borderColor="brand.900"
|
||||
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
||||
key={data.id}
|
||||
padding="5px"
|
||||
as="button"
|
||||
_hover={{
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
style={{
|
||||
width: "200px",
|
||||
height: "190px",
|
||||
border: "1px",
|
||||
borderColor: "brand.900",
|
||||
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
|
||||
padding: "5px",
|
||||
// _hover:{
|
||||
// boxShadow: 'outline-over',
|
||||
// bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
|
||||
// }
|
||||
}}
|
||||
onClick={() => onSelectItem(data)}
|
||||
>
|
||||
<Flex direction="column" width="full" height="full">
|
||||
<Center height="full">{data.icon}</Center>
|
||||
<Center>
|
||||
<Flex direction="column" style={{ width: "full", height: "full" }}>
|
||||
<Div style={{ alignContent: "center", height: "full" }}>{data.icon}</Div>
|
||||
<Div style={{ alignContent: "center", height: "full" }}>
|
||||
<Text
|
||||
fontSize="25px"
|
||||
fontWeight="bold"
|
||||
textTransform="uppercase"
|
||||
userSelect="none"
|
||||
style={{
|
||||
textTransform: "uppercase",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{data.name}
|
||||
</Text>
|
||||
</Center>
|
||||
</Div>
|
||||
</Flex>
|
||||
</Flex>
|
||||
))}
|
||||
</HStack>
|
||||
</PageLayout>
|
||||
</PageLayout >
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
import { Box, Flex, Text } from '@chakra-ui/react';
|
||||
import { Route, Routes, useNavigate } from 'react-router-dom';
|
||||
|
||||
import { EmptyEnd } from '@/components/EmptyEnd';
|
||||
import { PageLayout } from '@/components/Layout/PageLayout';
|
||||
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
|
||||
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
|
||||
import { TopBar } from '@/components/TopBar/TopBar';
|
||||
import { AlbumEditPopUp } from '@/components/popup/AlbumEditPopUp';
|
||||
import { TrackEditPopUp } from '@/components/popup/TrackEditPopUp';
|
||||
import { useActivePlaylistService } from '@/service/ActivePlaylist';
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';
|
||||
import { DisplayTrackFullId } from '@/components/track/DisplayTrackFullId';
|
||||
import { MdCleanHands, MdClear, MdDryCleaning, MdEdit, MdKeyboardDoubleArrowDown, MdKeyboardDoubleArrowUp, MdLeakRemove, MdRemove, MdRemoveFromQueue, MdRemoveShoppingCart } from 'react-icons/md';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { LuTrash2 } from 'react-icons/lu';
|
||||
import { Flex } from '@/ui';
|
||||
|
||||
export const OnAirPage = () => {
|
||||
const { playInList } = useActivePlaylistService();
|
||||
@ -56,39 +53,9 @@ export const OnAirPage = () => {
|
||||
setNewPlaylist(newList);
|
||||
}
|
||||
};
|
||||
const removePreviousTrack = (index: number) => {
|
||||
if (!playTrackList) {
|
||||
console.log('Fail to remove element of on air...');
|
||||
return;
|
||||
}
|
||||
const newList = playTrackList.slice(index);
|
||||
let newPlayed = trackOffset;
|
||||
if (newPlayed != undefined) {
|
||||
if (index < newPlayed) {
|
||||
newPlayed = newPlayed - index;
|
||||
} else {
|
||||
newPlayed = 0;
|
||||
}
|
||||
playInList(newPlayed, newList);
|
||||
} else {
|
||||
setNewPlaylist(newList);
|
||||
}
|
||||
}
|
||||
const removeNextTrack = (index: number) => {
|
||||
if (!playTrackList) {
|
||||
console.log('Fail to remove element of on air...');
|
||||
return;
|
||||
}
|
||||
const newList = playTrackList.slice(0, index + 1);
|
||||
playInList(trackOffset, newList);
|
||||
}
|
||||
|
||||
const clean = () => {
|
||||
setNewPlaylist([]);
|
||||
}
|
||||
|
||||
console.log(`playTrackList = ${JSON.stringify(playTrackList, null, 2)}`);
|
||||
if (!playTrackList || playTrackList.length == 0) {
|
||||
if (!playTrackList) {
|
||||
return (
|
||||
<>
|
||||
<TopBar title="Album detail" />
|
||||
@ -101,35 +68,32 @@ export const OnAirPage = () => {
|
||||
return (
|
||||
<>
|
||||
<TopBar title="On Air ...">
|
||||
<Button
|
||||
{...BUTTON_TOP_BAR_PROPERTY}
|
||||
onClick={clean}
|
||||
>
|
||||
<LuTrash2 />
|
||||
</Button>
|
||||
</TopBar>
|
||||
<PageLayout>
|
||||
<Flex
|
||||
direction="column"
|
||||
gap={BASE_WRAP_SPACING}
|
||||
marginX="auto"
|
||||
padding="20px"
|
||||
width="80%"
|
||||
style={{
|
||||
margin: "0 auto",
|
||||
padding: "20px",
|
||||
width: "80%",
|
||||
}}
|
||||
>
|
||||
{!playTrackList && <>No playing</>}
|
||||
{playTrackList && playTrackList?.map((data, index) => (
|
||||
<Box
|
||||
minWidth="100%"
|
||||
//height="60px"
|
||||
border="1px"
|
||||
borderColor="brand.900"
|
||||
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
||||
{playTrackList && playTrackList?.map((data) => (
|
||||
<Flex
|
||||
key={data}
|
||||
padding="5px"
|
||||
as="button"
|
||||
_hover={{
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
style={{
|
||||
minWidth: "100%",
|
||||
//height:"60px",
|
||||
border: "1px",
|
||||
borderColor: "brand.900",
|
||||
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
|
||||
padding: "5px",
|
||||
// _hover: {
|
||||
// boxShadow: 'outline-over',
|
||||
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
// }
|
||||
}}
|
||||
>
|
||||
<DisplayTrackFullId
|
||||
@ -138,35 +102,19 @@ export const OnAirPage = () => {
|
||||
contextMenu={[
|
||||
{
|
||||
name: 'Edit',
|
||||
icon: <MdEdit />,
|
||||
onClick: () => {
|
||||
navigate(`edit-track/${data}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Remove previous',
|
||||
icon: <MdKeyboardDoubleArrowUp />,
|
||||
onClick: () => {
|
||||
removePreviousTrack(index);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Remove',
|
||||
icon: <MdRemove />,
|
||||
name: 'Remove from playlist',
|
||||
onClick: () => {
|
||||
removeTrack(data);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Remove After',
|
||||
icon: <MdKeyboardDoubleArrowDown />,
|
||||
onClick: () => {
|
||||
removeNextTrack(index);
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
<EmptyEnd />
|
||||
</Flex>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
import { Center, Heading, Image, Text } from '@chakra-ui/react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import avatar_generic from '@/assets/images/avatar_generic.svg';
|
||||
@ -11,6 +10,8 @@ import { SessionState } from '@/service/SessionState';
|
||||
import { useSessionService } from '@/service/session';
|
||||
import { b64_to_utf8 } from '@/utils/sso';
|
||||
|
||||
import { Flex, Text, Image } from '@/ui';
|
||||
|
||||
export const SSOPage = () => {
|
||||
const { data, keepConnected, token } = useParams();
|
||||
console.log(`- data: ${data}`);
|
||||
@ -47,13 +48,11 @@ export const SSOPage = () => {
|
||||
<>
|
||||
<TopBar />
|
||||
<PageLayoutInfoCenter width="35%" gap="15px">
|
||||
<Center w="full">
|
||||
<Heading size="xl">LOGIN (after SSO) </Heading>
|
||||
</Center>
|
||||
<Text>LOGIN (after SSO)</Text>
|
||||
|
||||
<Center w="full">
|
||||
<Image src={avatar_generic} boxSize="150px" borderRadius="full" />
|
||||
</Center>
|
||||
<Flex width="full">
|
||||
<Image href={avatar_generic} boxSize="150px" style={{ borderRadius: "full" }} />
|
||||
</Flex>
|
||||
{token === '__CANCEL__' && (
|
||||
<Text>
|
||||
<b>ERROR: </b> Request cancel of connection !
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
import { ReactElement } from 'react';
|
||||
|
||||
import { Flex, Text, HStack } from '@chakra-ui/react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { PageLayout } from '@/components/Layout/PageLayout';
|
||||
import { TopBar } from '@/components/TopBar/TopBar';
|
||||
import { DataTools, TypeCheck } from '@/utils/data-tools';
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
|
||||
export const alphabet = [
|
||||
'a',
|
||||
@ -54,13 +50,13 @@ export const TrackSelectionPage = () => {
|
||||
height="75px"
|
||||
border="1px"
|
||||
borderColor="brand.900"
|
||||
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
||||
backgroundColor={useColorThemeValue('#FFFFFF88', '#00000088')}
|
||||
key={data}
|
||||
padding="5px"
|
||||
as="button"
|
||||
_hover={{
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
bgColor: useColorThemeValue('#FFFFFFF7', '#000000F7'),
|
||||
}}
|
||||
onClick={() => onSelectItem(data)}
|
||||
>
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
import { ReactElement } from 'react';
|
||||
|
||||
import { Box, Flex } from '@chakra-ui/react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
import { EmptyEnd } from '@/components/EmptyEnd';
|
||||
@ -11,7 +8,8 @@ import { DisplayTrackSkeleton } from '@/components/track/DisplayTrackSkeleton';
|
||||
import { alphabet } from '@/scene/track/TrackSelectionPage';
|
||||
import { useActivePlaylistService } from '@/service/ActivePlaylist';
|
||||
import { useTracksWithStartName } from '@/service/Track';
|
||||
import { useColorModeValue } from '@/components/ui/color-mode';
|
||||
import { useColorThemeValue } from '@/theme/ThemeContext';
|
||||
import { Flex } from '@/ui';
|
||||
|
||||
export const TracksStartLetterDetailPage = () => {
|
||||
const { startLetter } = useParams();
|
||||
@ -50,50 +48,55 @@ export const TracksStartLetterDetailPage = () => {
|
||||
<Flex
|
||||
direction="column"
|
||||
gap="20px"
|
||||
marginX="auto"
|
||||
padding="20px"
|
||||
width="80%"
|
||||
style={{
|
||||
margin: "0 auto",
|
||||
padding: "20px",
|
||||
width: "80%",
|
||||
}}
|
||||
>
|
||||
{isLoading &&
|
||||
[1, 2, 3, 4]?.map((data) => (
|
||||
<Box
|
||||
minWidth="100%"
|
||||
//height="60px"
|
||||
border="1px"
|
||||
borderColor="brand.900"
|
||||
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
||||
<Flex
|
||||
key={data}
|
||||
padding="5px"
|
||||
as="button"
|
||||
_hover={{
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
style={{
|
||||
minWidth: "100%",
|
||||
//height:"60px",
|
||||
border: "1px",
|
||||
borderColor: "brand.900",
|
||||
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
|
||||
padding: "5px",
|
||||
// _hover: {
|
||||
// boxShadow: 'outline-over',
|
||||
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
// }
|
||||
}}
|
||||
>
|
||||
<DisplayTrackSkeleton />
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
{!isLoading &&
|
||||
tracksStartsWith?.map((data) => (
|
||||
<Box
|
||||
minWidth="100%"
|
||||
//height="60px"
|
||||
border="1px"
|
||||
borderColor="brand.900"
|
||||
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}
|
||||
<Flex
|
||||
key={data.id}
|
||||
padding="5px"
|
||||
as="button"
|
||||
_hover={{
|
||||
boxShadow: 'outline-over',
|
||||
bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
style={{
|
||||
minWidth: "100%",
|
||||
//height:"60px",
|
||||
border: "1px",
|
||||
borderColor: "brand.900",
|
||||
backgroundColor: useColorThemeValue('#FFFFFF88', '#00000088'),
|
||||
|
||||
padding: "5px",
|
||||
// _hover: {
|
||||
// boxShadow: 'outline-over',
|
||||
// bgColor: useColorModeValue('#FFFFFFF7', '#000000F7'),
|
||||
// }
|
||||
}}
|
||||
>
|
||||
<DisplayTrackFull
|
||||
track={data}
|
||||
onClick={() => onSelectItem(data.id)}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
<EmptyEnd />
|
||||
</Flex>
|
||||
|
||||
@ -14,7 +14,7 @@ export type ActivePlaylistServiceProps = {
|
||||
trackActive?: Track;
|
||||
setNewPlaylist: (listIds: number[]) => void;
|
||||
setNewPlaylistShuffle: (listIds: number[]) => void;
|
||||
playInList: (id: number | undefined, listIds: number[]) => void;
|
||||
playInList: (id: number, listIds: number[]) => void;
|
||||
play: (id: number) => void;
|
||||
previous: () => void;
|
||||
next: () => void;
|
||||
@ -65,7 +65,7 @@ export const useActivePlaylistServiceWrapped = (
|
||||
[setPlayTrackList, setTrackOffset]
|
||||
);
|
||||
const playInList = useCallback(
|
||||
(id: number | undefined, listIds: number[]) => {
|
||||
(id: number, listIds: number[]) => {
|
||||
console.log(`Request paly in list: ${id} in ${listIds}`);
|
||||
setPlayTrackList(listIds);
|
||||
setTrackOffset(id);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { Album, AlbumResource } from '@/back-api';
|
||||
import { useServiceContext } from '@/service/ServiceContext';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { Track, TrackResource } from '@/back-api';
|
||||
import { useServiceContext } from '@/service/ServiceContext';
|
||||
|
||||
@ -6,16 +6,13 @@ import { useServiceContext } from '@/service/ServiceContext';
|
||||
import { SessionState } from '@/service/SessionState';
|
||||
import { isBrowser } from '@/utils/layout';
|
||||
import { parseToken } from '@/utils/sso';
|
||||
import { createListCollection } from '@chakra-ui/react';
|
||||
|
||||
const TOKEN_KEY = 'karusic-token-key-storage';
|
||||
|
||||
export const USERS_COLLECTION = createListCollection({
|
||||
items: [
|
||||
{ label: "admin", value: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxIiwiYXBwbGljYXRpb24iOiJrYXJ1c2ljIiwiaXNzIjoiS2FyQXV0aCIsInJpZ2h0Ijp7ImthcnVzaWMiOnsiQURNSU4iOnRydWUsIlVTRVIiOnRydWV9fSwibG9naW4iOiJIZWVyb1l1aSIsImV4cCI6MTcyNDIwNjc5NCwiaWF0IjoxNzI0MTY2ODM0fQ.TEST_SIGNATURE_FOR_LOCAL_TEST_AND_TEST_E2E" },
|
||||
{ label: "NO_USER", value: "svelte" },
|
||||
],
|
||||
})
|
||||
export const USERS_COLLECTION = [
|
||||
{ label: "admin", value: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxIiwiYXBwbGljYXRpb24iOiJrYXJ1c2ljIiwiaXNzIjoiS2FyQXV0aCIsInJpZ2h0Ijp7ImthcnVzaWMiOnsiQURNSU4iOnRydWUsIlVTRVIiOnRydWV9fSwibG9naW4iOiJIZWVyb1l1aSIsImV4cCI6MTcyNDIwNjc5NCwiaWF0IjoxNzI0MTY2ODM0fQ.TEST_SIGNATURE_FOR_LOCAL_TEST_AND_TEST_E2E" },
|
||||
{ label: "NO_USER", value: "svelte" },
|
||||
];
|
||||
export const USERS = {
|
||||
admin:
|
||||
'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxIiwiYXBwbGljYXRpb24iOiJrYXJ1c2ljIiwiaXNzIjoiS2FyQXV0aCIsInJpZ2h0Ijp7ImthcnVzaWMiOnsiQURNSU4iOnRydWUsIlVTRVIiOnRydWV9fSwibG9naW4iOiJIZWVyb1l1aSIsImV4cCI6MTcyNDIwNjc5NCwiaWF0IjoxNzI0MTY2ODM0fQ.TEST_SIGNATURE_FOR_LOCAL_TEST_AND_TEST_E2E',
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { ReactElement, ReactNode } from 'react';
|
||||
|
||||
import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
|
||||
import { RenderOptions, render } from '@testing-library/react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
|
||||
|
||||
115
front/src/theme/ThemeContext.tsx
Normal file
115
front/src/theme/ThemeContext.tsx
Normal file
@ -0,0 +1,115 @@
|
||||
|
||||
import { createContext, useContext, useState, useEffect, CSSProperties, ReactNode, useCallback } from "react";
|
||||
import { basicColor } from "./colors";
|
||||
|
||||
type themeContextProps = {
|
||||
theme: string;
|
||||
themeList: string[];
|
||||
setTheme: (string) => void;
|
||||
toggleTheme: () => void;
|
||||
convertStyle: (style: CSSProperties) => CSSProperties,
|
||||
}
|
||||
|
||||
|
||||
const ThemeContext = createContext<themeContextProps>({
|
||||
theme: "error",
|
||||
themeList: ["error"],
|
||||
setTheme: (_: string) => { },
|
||||
toggleTheme: () => { },
|
||||
convertStyle: (style: CSSProperties): CSSProperties => { return style; },
|
||||
});
|
||||
|
||||
const themes = {
|
||||
baseColors: {
|
||||
...basicColor
|
||||
},
|
||||
themeColors: {
|
||||
light: {
|
||||
primary: "#007bff",
|
||||
secondary: "#6c757d",
|
||||
background: "#ffffff",
|
||||
text: "#000000",
|
||||
},
|
||||
dark: {
|
||||
primary: "#375a7f",
|
||||
secondary: "#444444",
|
||||
background: "#181818",
|
||||
text: "#ffffff",
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
export function ThemeProvider({ children, themeList = ["light", "dark"] }: { children: ReactNode, themeList?: string[] }) {
|
||||
const [theme, setTheme] = useState<string>(themeList[0]);
|
||||
const [basicsColor, setBasicsColor] = useState<{ [key: string]: string }>({});
|
||||
|
||||
// update the global CSS wen theme is updated:
|
||||
useEffect(() => {
|
||||
// generates the colors:
|
||||
const baseColor = themes.baseColors;
|
||||
const newBasicsColor: { [key: string]: string } = {}
|
||||
Object.entries(baseColor).forEach(([tableColorName, colorValues]) => {
|
||||
Object.entries(colorValues).forEach(([key, value]) => {
|
||||
const colorName = `${tableColorName}.${key}`;
|
||||
newBasicsColor[colorName] = value;
|
||||
});
|
||||
});
|
||||
setBasicsColor(newBasicsColor);
|
||||
|
||||
const root = document.documentElement;
|
||||
//const currentColorTheme = themes.baseColors[theme];
|
||||
Object.entries(newBasicsColor).forEach(([key, value]) => {
|
||||
const cssKeyValue = `--${key.replace(".", "-")}`;
|
||||
console.log(` generate CSS color: ${cssKeyValue}:${value}`);
|
||||
root.style.setProperty(cssKeyValue, value);
|
||||
});
|
||||
}, [theme, setBasicsColor]);
|
||||
|
||||
const toggleTheme = useCallback(() => {
|
||||
console.log(`plop: ${theme}`);
|
||||
setTheme((previous) => {
|
||||
if (themeList.length <= 1) {
|
||||
return previous;
|
||||
}
|
||||
for (let iii = 0; iii < themeList.length - 1; iii++) {
|
||||
if (themeList[iii] == theme) {
|
||||
return themeList[iii + 1]
|
||||
}
|
||||
}
|
||||
return themeList[0];
|
||||
})
|
||||
}, [setTheme]);
|
||||
|
||||
const convertElementStyle = useCallback((style: CSSProperties, key: string) => {
|
||||
const value = style[key];
|
||||
if (typeof value !== "string") {
|
||||
return;
|
||||
}
|
||||
if (basicsColor[value]) {
|
||||
style[key] = basicsColor[value];
|
||||
}
|
||||
}, [basicsColor]);
|
||||
const convertStyle = useCallback((style: CSSProperties): CSSProperties => {
|
||||
console.log(`plop: ${theme}`);
|
||||
if (!style) {
|
||||
return style;
|
||||
}
|
||||
const out = { ...style }
|
||||
convertElementStyle(out, "background");
|
||||
convertElementStyle(out, "borderColor");
|
||||
convertElementStyle(out, "color");
|
||||
return out;
|
||||
}, [convertElementStyle]);
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, themeList, setTheme, toggleTheme, convertStyle }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
export const useTheme = () => useContext(ThemeContext);
|
||||
|
||||
export function useColorThemeValue<T>(firstTheme: T, secondTheme: T) {
|
||||
const { theme, themeList } = useTheme()
|
||||
return theme === themeList[0] ? firstTheme : secondTheme
|
||||
}
|
||||
@ -1,115 +1,125 @@
|
||||
// Update me with other Tailwind colors or with https://smart-swatch.netlify.app/
|
||||
const brand = {
|
||||
50: '#e3edff',
|
||||
100: '#b6c9fd',
|
||||
200: '#88a5f7',
|
||||
300: '#5a81f2',
|
||||
400: '#2c5ded',
|
||||
500: '#1543d4',
|
||||
600: '#0d34a5',
|
||||
700: '#062577',
|
||||
800: '#02164a',
|
||||
900: '#00071e',
|
||||
};
|
||||
|
||||
type PandaColorModel = {
|
||||
value: string;
|
||||
const back = {
|
||||
50: '#f2f2f2',
|
||||
100: '#d9d9d9',
|
||||
200: '#bfbfbf',
|
||||
300: '#a6a6a6',
|
||||
400: '#8c8c8c',
|
||||
500: '#737373',
|
||||
600: '#595959',
|
||||
700: '#404040',
|
||||
800: '#262626',
|
||||
900: '#0d0d0d',
|
||||
};
|
||||
|
||||
const green = {
|
||||
50: '#f0fdf4',
|
||||
100: '#dcfce7',
|
||||
200: '#bbf7d0',
|
||||
300: '#86efac',
|
||||
400: '#4ade80',
|
||||
500: '#22c55e',
|
||||
600: '#16a34a',
|
||||
700: '#15803d',
|
||||
800: '#166534',
|
||||
900: '#14532d',
|
||||
};
|
||||
const blue = {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
200: '#bfdbfe',
|
||||
300: '#93c5fd',
|
||||
400: '#60a5fa',
|
||||
500: '#3b82f6',
|
||||
600: '#2563eb',
|
||||
700: '#1d4ed8',
|
||||
800: '#1e40af',
|
||||
900: '#1e3a8a',
|
||||
};
|
||||
const orange = {
|
||||
50: '#fff7ed',
|
||||
100: '#ffedd5',
|
||||
200: '#fed7aa',
|
||||
300: '#fdba74',
|
||||
400: '#fb923c',
|
||||
500: '#f97316',
|
||||
600: '#ea580c',
|
||||
700: '#c2410c',
|
||||
800: '#9a3412',
|
||||
900: '#7c2d12',
|
||||
};
|
||||
const red = {
|
||||
50: '#fef2f2',
|
||||
100: '#fee2e2',
|
||||
200: '#fecaca',
|
||||
300: '#fca5a5',
|
||||
400: '#f87171',
|
||||
500: '#ef4444',
|
||||
600: '#dc2626',
|
||||
700: '#b91c1c',
|
||||
800: '#991b1b',
|
||||
900: '#7f1d1d',
|
||||
};
|
||||
const yellow = {
|
||||
50: '#ffffda',
|
||||
100: '#ffffad',
|
||||
200: '#ffff7d',
|
||||
300: '#ffff4b',
|
||||
400: '#ffff1a',
|
||||
500: '#e5e600',
|
||||
600: '#b2b300',
|
||||
700: '#7f8000',
|
||||
800: '#4c4d00',
|
||||
900: '#191b00',
|
||||
};
|
||||
const purple = {
|
||||
50: '#ffe3ff',
|
||||
100: '#ffb2ff',
|
||||
200: '#ff80ff',
|
||||
300: '#fe4efe',
|
||||
400: '#fe20fe',
|
||||
500: '#e50ce4',
|
||||
600: '#b204b1',
|
||||
700: '#80007f',
|
||||
800: '#4e004d',
|
||||
900: '#1d001c',
|
||||
};
|
||||
|
||||
const cyan = {
|
||||
50: '#d6ffff',
|
||||
100: '#aaffff',
|
||||
200: '#7affff',
|
||||
300: '#47ffff',
|
||||
400: '#1affff',
|
||||
500: '#00e5e6',
|
||||
600: '#00b2b3',
|
||||
700: '#008081',
|
||||
800: '#004d4e',
|
||||
900: '#001b1d',
|
||||
}
|
||||
type ThemeModel = {
|
||||
50: PandaColorModel;
|
||||
100: PandaColorModel;
|
||||
200: PandaColorModel;
|
||||
300: PandaColorModel;
|
||||
400: PandaColorModel;
|
||||
500: PandaColorModel;
|
||||
600: PandaColorModel;
|
||||
700: PandaColorModel;
|
||||
800: PandaColorModel;
|
||||
900: PandaColorModel;
|
||||
};
|
||||
|
||||
const back: ThemeModel = {
|
||||
50: { value: '#ebf4fa' },
|
||||
100: { value: '#d1dbe0' },
|
||||
200: { value: '#b6c2c9' },
|
||||
300: { value: '#99aab4' },
|
||||
400: { value: '#7c939e' },
|
||||
500: { value: '#637985' },
|
||||
600: { value: '#4d5e67' },
|
||||
700: { value: '#37444a' },
|
||||
800: { value: '#1f292e' },
|
||||
900: { value: '#020f12' },
|
||||
};
|
||||
|
||||
const brand: ThemeModel = {
|
||||
50: { value: '#e3edff' },
|
||||
100: { value: '#b6c9fd' },
|
||||
200: { value: '#88a5f7' },
|
||||
300: { value: '#5a81f2' },
|
||||
400: { value: '#2c5ded' },
|
||||
500: { value: '#1543d4' },
|
||||
600: { value: '#0d34a5' },
|
||||
700: { value: '#062577' },
|
||||
800: { value: '#02164a' },
|
||||
900: { value: '#00071e' },
|
||||
};
|
||||
const normalText: ThemeModel = {
|
||||
50: { value: '#f2f2f2' },
|
||||
100: { value: '#d9d9d9' },
|
||||
200: { value: '#bfbfbf' },
|
||||
300: { value: '#a6a6a6' },
|
||||
400: { value: '#8c8c8c' },
|
||||
500: { value: '#737373' },
|
||||
600: { value: '#595959' },
|
||||
700: { value: '#404040' },
|
||||
800: { value: '#262626' },
|
||||
900: { value: '#0d0d0d' },
|
||||
};
|
||||
|
||||
const green: ThemeModel = {
|
||||
50: { value: '#f0fdf4' },
|
||||
100: { value: '#dcfce7' },
|
||||
200: { value: '#bbf7d0' },
|
||||
300: { value: '#86efac' },
|
||||
400: { value: '#4ade80' },
|
||||
500: { value: '#22c55e' },
|
||||
600: { value: '#16a34a' },
|
||||
700: { value: '#15803d' },
|
||||
800: { value: '#166534' },
|
||||
900: { value: '#14532d' },
|
||||
};
|
||||
const blue: ThemeModel = {
|
||||
50: { value: '#eff6ff' },
|
||||
100: { value: '#dbeafe' },
|
||||
200: { value: '#bfdbfe' },
|
||||
300: { value: '#93c5fd' },
|
||||
400: { value: '#60a5fa' },
|
||||
500: { value: '#3b82f6' },
|
||||
600: { value: '#2563eb' },
|
||||
700: { value: '#1d4ed8' },
|
||||
800: { value: '#1e40af' },
|
||||
900: { value: '#1e3a8a' },
|
||||
};
|
||||
|
||||
const orange: ThemeModel = {
|
||||
50: { value: '#fff7ed' },
|
||||
100: { value: '#ffedd5' },
|
||||
200: { value: '#fed7aa' },
|
||||
300: { value: '#fdba74' },
|
||||
400: { value: '#fb923c' },
|
||||
500: { value: '#f97316' },
|
||||
600: { value: '#ea580c' },
|
||||
700: { value: '#c2410c' },
|
||||
800: { value: '#9a3412' },
|
||||
900: { value: '#7c2d12' },
|
||||
};
|
||||
const red: ThemeModel = {
|
||||
50: { value: '#fef2f2' },
|
||||
100: { value: '#fee2e2' },
|
||||
200: { value: '#fecaca' },
|
||||
300: { value: '#fca5a5' },
|
||||
400: { value: '#f87171' },
|
||||
500: { value: '#ef4444' },
|
||||
600: { value: '#dc2626' },
|
||||
700: { value: '#b91c1c' },
|
||||
800: { value: '#991b1b' },
|
||||
900: { value: '#7f1d1d' },
|
||||
};
|
||||
export const basicColor = {
|
||||
green, red, orange, back, blue, yellow, purple, cyan
|
||||
}
|
||||
|
||||
export const colors = {
|
||||
// Update me with other Tailwind colors or with https://smart-swatch.netlify.app/
|
||||
|
||||
brand: brand,
|
||||
back: back,
|
||||
text: normalText,
|
||||
success: green,
|
||||
error: red,
|
||||
warning: orange,
|
||||
danger: red,
|
||||
} as const;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
24
front/src/theme/recipes/badge.ts
Normal file
24
front/src/theme/recipes/badge.ts
Normal file
@ -0,0 +1,24 @@
|
||||
export default {
|
||||
sizes: {
|
||||
'2xs': {
|
||||
fontSize: '0.5em',
|
||||
},
|
||||
xs: {
|
||||
fontSize: '0.6em',
|
||||
},
|
||||
sm: {
|
||||
fontSize: '0.7em',
|
||||
},
|
||||
md: {
|
||||
fontSize: '0.8em',
|
||||
textTransform: 'none',
|
||||
},
|
||||
lg: {
|
||||
fontSize: '0.9em',
|
||||
textTransform: 'none',
|
||||
},
|
||||
},
|
||||
defaultProps: {
|
||||
size: 'md',
|
||||
},
|
||||
};
|
||||
103
front/src/theme/recipes/button.ts
Normal file
103
front/src/theme/recipes/button.ts
Normal file
@ -0,0 +1,103 @@
|
||||
|
||||
// https://medium.com/@a.heydari.dev/simplifying-chakra-ui-v3-recipes-vs-chakra-factory-a-developers-perspective-4020b62f1b4d
|
||||
|
||||
// const shimmer = keyframes`
|
||||
// 100% {
|
||||
// transform: translateX(100%);
|
||||
// }
|
||||
// `;
|
||||
|
||||
export const customVariant = ({ bg, bgHover, bgActive, color, colorHover, boxShadowHover }) => {
|
||||
return {
|
||||
bg,
|
||||
color,
|
||||
border: '1px solid transparent',
|
||||
_focus: {
|
||||
border: '1px solid',
|
||||
borderColor: 'black',
|
||||
},
|
||||
_hover: {
|
||||
bg: bgHover,
|
||||
color: colorHover,
|
||||
boxShadow: boxShadowHover,
|
||||
_disabled: {
|
||||
bg,
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
_active: {
|
||||
bg: bgActive,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const buttonTheme = {
|
||||
primary:
|
||||
customVariant({
|
||||
bg: { _light: 'brand.600', _dark: 'brand.300' },
|
||||
bgHover: { _light: 'brand.700', _dark: 'brand.400' },
|
||||
bgActive: { _light: 'brand.600', _dark: 'brand.300' },
|
||||
color: { _light: 'white', _dark: 'brand.900' },
|
||||
colorHover: { _light: 'brand.800', _dark: 'brand.100' },
|
||||
boxShadowHover: 'outline-over'
|
||||
}),
|
||||
secondary:
|
||||
customVariant({
|
||||
bg: { _light: 'brand.100', _dark: 'brand.900' },
|
||||
bgHover: { _light: 'brand.200', _dark: 'brand.800' },
|
||||
bgActive: { _light: 'brand.300', _dark: 'brand.700' },
|
||||
color: { _light: 'brand.700', _dark: 'brand.50' },
|
||||
colorHover: { _light: 'brand.800', _dark: 'brand.100' },
|
||||
boxShadowHover: 'outline-over',
|
||||
}),
|
||||
danger:
|
||||
customVariant({
|
||||
bg: { _light: 'error.600', _dark: 'error.600' },
|
||||
bgHover: { _light: 'error.700', _dark: 'error.500' },
|
||||
bgActive: { _light: 'error.600', _dark: 'error.500' },
|
||||
color: { _light: 'white', _dark: 'error.900' },
|
||||
colorHover: { _light: 'error.700', _dark: 'error.900' },
|
||||
boxShadowHover: 'outline-over',
|
||||
}),
|
||||
success:
|
||||
customVariant({
|
||||
bg: { _light: 'green.300', _dark: 'green.300' },
|
||||
bgHover: { _light: 'green.400', _dark: 'green.400' },
|
||||
bgActive: { _light: 'green.500', _dark: 'green.400' },
|
||||
color: { _light: 'white', _dark: 'green.900' },
|
||||
colorHover: { _light: 'green.500', _dark: 'green.900' },
|
||||
boxShadowHover: 'outline-over',
|
||||
}),
|
||||
progress:
|
||||
{
|
||||
bg: { _light: `brand.500`, _dark: `brand.300` },
|
||||
overflow: 'hidden',
|
||||
/*
|
||||
_after: !props.isLoading
|
||||
? {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
transform: 'translateX(-100%)',
|
||||
bgGradient: `linear(90deg, brand.100/0 0%, brand.100/2 20%, brand.100/5 60%, v.100/0`,
|
||||
}
|
||||
: undefined,
|
||||
*/
|
||||
},
|
||||
|
||||
menu: {
|
||||
bg: 'back.100',
|
||||
color: 'brand.900',
|
||||
borderRadius: 0,
|
||||
border: 0,
|
||||
_hover: { background: 'back.300' },
|
||||
_focus: { border: 'none' },
|
||||
fontSize: '20px',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
};
|
||||
|
||||
export default buttonTheme;
|
||||
5
front/src/theme/recipes/checkbox.ts
Normal file
5
front/src/theme/recipes/checkbox.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
defaultProps: {
|
||||
colorScheme: 'brand',
|
||||
},
|
||||
};
|
||||
29
front/src/theme/recipes/drawer.ts
Normal file
29
front/src/theme/recipes/drawer.ts
Normal file
@ -0,0 +1,29 @@
|
||||
|
||||
|
||||
const drawerRecipe = {
|
||||
base: {
|
||||
bg: { _light: 'white', _dark: 'gray.800' },
|
||||
color: { _light: 'gray.900', _dark: 'whiteAlpha.900' },
|
||||
boxShadow: { _light: 'lg', _dark: 'dark-lg' },
|
||||
padding: 4,
|
||||
borderRadius: 'md',
|
||||
},
|
||||
variants: {
|
||||
variant: {
|
||||
solid: {
|
||||
bg: { _light: 'blue.500', _dark: 'blue.300' },
|
||||
color: 'white',
|
||||
},
|
||||
outline: {
|
||||
border: '1px solid',
|
||||
borderColor: { _light: 'gray.300', _dark: 'whiteAlpha.300' },
|
||||
bg: { _light: 'white', _dark: 'gray.900' },
|
||||
},
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'solid',
|
||||
},
|
||||
};
|
||||
|
||||
export default drawerRecipe;
|
||||
20
front/src/theme/recipes/flex.ts
Normal file
20
front/src/theme/recipes/flex.ts
Normal file
@ -0,0 +1,20 @@
|
||||
|
||||
|
||||
|
||||
const flexTheme = {
|
||||
variants: {
|
||||
variant: {
|
||||
'@menu': {
|
||||
bg: { _light: 'back.100', _dark: 'back.800' },
|
||||
color: { _light: 'brand.900', _dark: 'brand.100' },
|
||||
borderRadius: 0,
|
||||
border: 0,
|
||||
_hover: { background: { _light: 'back.300', _dark: 'back.600' } },
|
||||
_focus: { border: 'none' },
|
||||
fontSize: '20px',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default flexTheme;
|
||||
13
front/src/theme/recipes/index.ts
Normal file
13
front/src/theme/recipes/index.ts
Normal file
@ -0,0 +1,13 @@
|
||||
export { default as Badge } from './badge';
|
||||
export { default as Button } from './button';
|
||||
export { default as Checkbox } from './checkbox';
|
||||
export { default as Input } from './input';
|
||||
//export { default as NumberInput } from './numberInput.ts_';
|
||||
export { default as Popover } from './popover';
|
||||
export { default as Radio } from './radio';
|
||||
export { default as Select } from './select';
|
||||
export { default as Switch } from './switch';
|
||||
export { default as Textarea } from './textarea';
|
||||
//export { default as Modal } from './modal';
|
||||
export { default as Flex } from './flex';
|
||||
export { default as Drawer } from './drawer';
|
||||
20
front/src/theme/recipes/input.ts
Normal file
20
front/src/theme/recipes/input.ts
Normal file
@ -0,0 +1,20 @@
|
||||
|
||||
const inputTheme = {
|
||||
variants: {
|
||||
variant: {
|
||||
outline: {
|
||||
field: {
|
||||
bg: { _light: 'gray.50', _dark: 'whiteAlpha.50' },
|
||||
borderColor: { _light: 'gray.200', _dark: 'whiteAlpha.100' },
|
||||
color: { _light: 'gray.800', _dark: 'gray.50' },
|
||||
_focus: {
|
||||
borderColor: { _light: 'gray.800', _dark: 'gray.50' },
|
||||
boxShadow: `0 0 0 1px gray.800`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default inputTheme;
|
||||
15
front/src/theme/recipes/modal.ts__
Normal file
15
front/src/theme/recipes/modal.ts__
Normal file
@ -0,0 +1,15 @@
|
||||
|
||||
const { definePartsStyle, defineMultiStyleConfig } =
|
||||
createMultiStyleConfigHelpers(parts.keys);
|
||||
|
||||
const baseStyle = definePartsStyle({
|
||||
header: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
const modalTheme = defineMultiStyleConfig({
|
||||
baseStyle,
|
||||
});
|
||||
|
||||
export default modalTheme;
|
||||
77
front/src/theme/recipes/popover.ts
Normal file
77
front/src/theme/recipes/popover.ts
Normal file
@ -0,0 +1,77 @@
|
||||
export default {
|
||||
sizes: {
|
||||
'3xs': {
|
||||
content: {
|
||||
width: '3xs',
|
||||
},
|
||||
},
|
||||
'2xs': {
|
||||
content: {
|
||||
width: '2xs',
|
||||
},
|
||||
},
|
||||
xs: {
|
||||
content: {
|
||||
width: 'xs',
|
||||
},
|
||||
},
|
||||
sm: {
|
||||
content: {
|
||||
width: 'sm',
|
||||
},
|
||||
},
|
||||
md: {
|
||||
content: {
|
||||
width: 'md',
|
||||
},
|
||||
},
|
||||
lg: {
|
||||
content: {
|
||||
width: 'lg',
|
||||
},
|
||||
},
|
||||
xl: {
|
||||
content: {
|
||||
width: 'xl',
|
||||
},
|
||||
},
|
||||
'2xl': {
|
||||
content: {
|
||||
width: '2xl',
|
||||
},
|
||||
},
|
||||
'3xl': {
|
||||
content: {
|
||||
width: '3xl',
|
||||
},
|
||||
},
|
||||
'4xl': {
|
||||
content: {
|
||||
width: '4xl',
|
||||
},
|
||||
},
|
||||
'5xl': {
|
||||
content: {
|
||||
width: '5xl',
|
||||
},
|
||||
},
|
||||
'6xl': {
|
||||
content: {
|
||||
width: '6xl',
|
||||
},
|
||||
},
|
||||
'7xl': {
|
||||
content: {
|
||||
width: '7xl',
|
||||
},
|
||||
},
|
||||
'8xl': {
|
||||
content: {
|
||||
width: '8xl',
|
||||
},
|
||||
},
|
||||
},
|
||||
defaultProps: {
|
||||
size: 'xs',
|
||||
},
|
||||
};
|
||||
5
front/src/theme/recipes/radio.ts
Normal file
5
front/src/theme/recipes/radio.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
defaultProps: {
|
||||
colorScheme: 'brand',
|
||||
},
|
||||
};
|
||||
19
front/src/theme/recipes/select.ts
Normal file
19
front/src/theme/recipes/select.ts
Normal file
@ -0,0 +1,19 @@
|
||||
|
||||
const selectTheme = {
|
||||
variants: {
|
||||
variant: {
|
||||
outline: {
|
||||
field: {
|
||||
bg: { _light: 'gray.50', _dark: 'whiteAlpha.50' },
|
||||
borderColor: { _light: 'blackAlpha.100', _dark: 'whiteAlpha.100' },
|
||||
_focus: {
|
||||
borderColor: { _light: 'brand.500', _dark: 'brand.300' },
|
||||
boxShadow: `0 0 0 1px black`,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default selectTheme;
|
||||
5
front/src/theme/recipes/switch.ts
Normal file
5
front/src/theme/recipes/switch.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
defaultProps: {
|
||||
colorScheme: 'brand',
|
||||
},
|
||||
};
|
||||
16
front/src/theme/recipes/textarea.ts
Normal file
16
front/src/theme/recipes/textarea.ts
Normal file
@ -0,0 +1,16 @@
|
||||
|
||||
const textAreaTheme = {
|
||||
variants: {
|
||||
variant: {
|
||||
outline: {
|
||||
bg: { _light: 'gray.50', _dark: 'whiteAlpha.50' },
|
||||
borderColor: { _light: 'blackAlpha.100', _dark: 'whiteAlpha.100' },
|
||||
_focus: {
|
||||
borderColor: { _light: 'brand.500', _dark: 'brand.300' },
|
||||
boxShadow: `0 0 0 1px brand.500`,
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
export default textAreaTheme;
|
||||
@ -1,76 +0,0 @@
|
||||
import { createSystem, defaultConfig, mergeConfigs, SystemConfig } from "@chakra-ui/react"
|
||||
import { colors } from "./colors"
|
||||
|
||||
const baseTheme: SystemConfig = {
|
||||
globalCss: {
|
||||
body: {
|
||||
overflowY: 'none',
|
||||
bg: { _light: 'back.50', _dark: 'back.700' },
|
||||
color: { _light: 'text.900', _dark: 'text.50' },
|
||||
fontFamily: 'Roboto, Helvetica, Arial, "sans-serif"',
|
||||
},
|
||||
svg: {
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
aspectRatio: "square",
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
slotRecipes: {
|
||||
dialog: {
|
||||
slots: [
|
||||
"header"
|
||||
],
|
||||
base: {
|
||||
header: {
|
||||
fontWeight: "bold",
|
||||
fontSize: "2xl",
|
||||
color: { _dark: "brand.400", _light: "brand.500" }
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
recipes: {
|
||||
button: {
|
||||
base: {
|
||||
borderRadius: 0,
|
||||
_hover: {
|
||||
//boxShadow: "3px 5px 8px gray"
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
tokens: {
|
||||
fonts: {
|
||||
heading: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
|
||||
body: { value: `Roboto, Helvetica, Arial, "sans-serif"` },
|
||||
},
|
||||
colors,
|
||||
},
|
||||
semanticTokens: {
|
||||
colors: {
|
||||
"@danger": {
|
||||
solid: { value: "{colors.danger.500}" },
|
||||
contrast: { value: "{colors.danger.100}" },
|
||||
fg: { value: "{colors.danger.900}" },
|
||||
muted: { value: "{colors.danger.100}" },
|
||||
subtle: { value: "{colors.danger.200}" },
|
||||
emphasized: { value: "{colors.danger.300}" },
|
||||
focusRing: { value: "{colors.danger.500}" },
|
||||
},
|
||||
"brand": {
|
||||
solid: { value: "{colors.brand.500}" },
|
||||
contrast: { value: "{colors.brand.100}" },
|
||||
fg: { value: "{colors.brand.900}" },
|
||||
muted: { value: "{colors.brand.100}" },
|
||||
subtle: { value: "{colors.brand.200}" },
|
||||
emphasized: { value: "{colors.brand.300}" },
|
||||
focusRing: { value: "{colors.brand.500}" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const config = mergeConfigs(defaultConfig, baseTheme);
|
||||
//console.log("defaultConfig: " + JSON.stringify(defaultConfig, null, 2));
|
||||
export const systemTheme = createSystem(config);
|
||||
5
front/src/types/theme.d.ts
vendored
5
front/src/types/theme.d.ts
vendored
@ -1,5 +0,0 @@
|
||||
import { ThemeTypings } from '@chakra-ui/react';
|
||||
|
||||
import { colors } from '@/theme/colors';
|
||||
|
||||
export type ColorSchemes = ThemeTypings['colorSchemes'] | keyof typeof colors;
|
||||
30
front/src/ui/Button.tsx
Normal file
30
front/src/ui/Button.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import { useTheme } from "@/theme/ThemeContext";
|
||||
import { ReactNode, CSSProperties } from "react";
|
||||
|
||||
export type ButtonProps = {
|
||||
children: ReactNode;
|
||||
onClick?: () => void;
|
||||
style?: CSSProperties;
|
||||
};
|
||||
|
||||
export const Button = ({ children, onClick, style }: ButtonProps) => {
|
||||
const { convertStyle } = useTheme();
|
||||
const themedStyle = style ? convertStyle({
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#3182CE',
|
||||
color: '#FFF',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
...style,
|
||||
}) : undefined;
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
style={themedStyle}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
21
front/src/ui/Div.tsx
Normal file
21
front/src/ui/Div.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { useTheme } from '@/theme/ThemeContext';
|
||||
import { CSSProperties, ReactNode } from 'react';
|
||||
|
||||
export type DivProps = {
|
||||
children?: ReactNode;
|
||||
onClick?: () => void;
|
||||
style?: CSSProperties
|
||||
};
|
||||
|
||||
export const Div = ({ children, onClick, style }: DivProps) => {
|
||||
const { convertStyle } = useTheme();
|
||||
const themedStyle = style ? convertStyle(style) : undefined;
|
||||
return (
|
||||
<div
|
||||
onClick={onClick}
|
||||
style={themedStyle}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user