kangaroo-and-rabbit/karusic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

[DEV] continue refacto

Browse Source
This commit is contained in:
Edouard DUPIN 2025-02-11 00:10:38 +01:00
parent de61cc156f
commit c65e7d5e25
10 changed files with 1690 additions and 12846 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
back/src/org/kar/karusic/WebLauncherLocal.java
View File

@ -4,6 +4,7 @@ import java.util.logging.LogManager;
import org.kar.archidata.exception.DataAccessException; import org.kar.archidata.exception.DataAccessException;
import org.kar.archidata.tools.ConfigBaseVariable; import org.kar.archidata.tools.ConfigBaseVariable;
import org.kar.karusic.migration.Initialization;
import org.slf4j.Logger; import org.slf4j.Logger;
import org.slf4j.LoggerFactory; import org.slf4j.LoggerFactory;
import org.slf4j.bridge.SLF4JBridgeHandler; import org.slf4j.bridge.SLF4JBridgeHandler;

10888
front/config sample.ts
View File

File diff suppressed because it is too large Load Diff

2916
front/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

6
front/src/components/TopBar/TopBar.tsx
View File

@ -14,6 +14,7 @@ import {
import { import {
LuAlignJustify, LuAlignJustify,
LuArrowBigLeft, LuArrowBigLeft,
LuCircleUserRound,
LuKeySquare, LuKeySquare,
LuLogIn, LuLogIn,
LuLogOut, LuLogOut,
@ -193,10 +194,7 @@ export const TopBar = ({ title, children }: TopBarProps) => {
{session?.state === SessionState.CONNECTED && ( {session?.state === SessionState.CONNECTED && (
<MenuRoot> <MenuRoot>
<MenuTrigger asChild> <MenuTrigger asChild>
<IconButton <IconButton {...BUTTON_TOP_BAR_PROPERTY} width={TOP_BAR_HEIGHT}>
{...BUTTON_TOP_BAR_PROPERTY}
width={TOP_BAR_HEIGHT}
>
<LuCircleUserRound /> <LuCircleUserRound />
</IconButton> </IconButton>
</MenuTrigger> </MenuTrigger>

170
front/src/components/popup/AlbumEditPopUp.tsx
View File

@ -9,12 +9,11 @@ import {
} from 'react-icons/md'; } from 'react-icons/md';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { Album, AlbumResource } from '@/back-api'; import { AlbumResource, AlbumWrite } from '@/back-api';
import { FormCovers } from '@/components/form/FormCovers'; import { FormCovers } from '@/components/form/FormCovers';
import { FormGroup } from '@/components/form/FormGroup'; import { FormGroup } from '@/components/form/FormGroup';
import { FormInput } from '@/components/form/FormInput'; import { FormInput } from '@/components/form/FormInput';
import { FormTextarea } from '@/components/form/FormTextarea'; import { FormTextarea } from '@/components/form/FormTextarea';
import { useFormidable } from '@/components/form/Formidable';
import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp'; import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
import { import {
DialogBody, DialogBody,
@ -28,6 +27,7 @@ import { useServiceContext } from '@/service/ServiceContext';
import { useCountTracksWithAlbumId } from '@/service/Track'; import { useCountTracksWithAlbumId } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { Formidable, useFormidable } from '../formidable';
import { Button } from '../ui/button'; import { Button } from '../ui/button';
export type AlbumEditPopUpProps = {}; export type AlbumEditPopUpProps = {};
@ -64,10 +64,10 @@ export const AlbumEditPopUp = ({}: AlbumEditPopUpProps) => {
}; };
const initialRef = useRef<HTMLButtonElement>(null); const initialRef = useRef<HTMLButtonElement>(null);
const finalRef = useRef<HTMLButtonElement>(null); const finalRef = useRef<HTMLButtonElement>(null);
const form = useFormidable<Album>({ const form = useFormidable<AlbumWrite>({
initialValues: dataAlbum, initialValues: dataAlbum,
}); });
const onSave = async () => { const onSave = async (deltaData: AlbumWrite) => {
if (isNullOrUndefined(albumIdInt)) { if (isNullOrUndefined(albumIdInt)) {
return; return;
} }
@ -149,96 +149,88 @@ export const AlbumEditPopUp = ({}: AlbumEditPopUpProps) => {
{/* <DialogOverlay /> */} {/* <DialogOverlay /> */}
{/* <DialogCloseTrigger /> */} {/* <DialogCloseTrigger /> */}
<DialogContent> <DialogContent>
<DialogHeader>Edit Album</DialogHeader> <Formidable.From form={form} onSubmitDelta={onSave}>
{/* <DialogCloseButton ref={finalRef} /> */} <DialogHeader>Edit Album</DialogHeader>
{/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} gap="0px" paddingLeft="18px"> <DialogBody pb={6} gap="0px" paddingLeft="18px">
{admin && ( {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 /> <FormGroup name="" isRequired label="Id">
Edit <Text>{dataAlbum?.id}</Text>
</> </FormGroup>
) : ( {countTracksOfAnAlbum !== 0 && (
<> <Flex paddingLeft="14px">
<MdAdminPanelSettings /> <MdWarning color="red.600" />
Admin <Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove album {countTracksOfAnAlbum} track(s)
depend on it.
</Text>
</Flex>
)}
<FormGroup name="" 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}
/>
</> </>
)} )}
</Button> {!admin && (
{!admin && form.isFormModified && ( <>
<Button colorScheme="blue" mr={3} onClick={onSave}> <FormInput
Save name="name"
isRequired
label="Title"
ref={initialRef}
/>
<FormTextarea name="description" label="Description" />
<FormInput name="publication" label="Publication" />
<FormCovers
name="covers"
onFilesSelected={onFilesSelected}
onUriSelected={onUriSelected}
onRemove={onRemoveCover}
/>
</>
)}
</DialogBody>
<DialogFooter>
<Button
onClick={() => setAdmin((value) => !value)}
marginRight="auto"
>
{admin ? (
<>
<MdEdit />
Edit
</>
) : (
<>
<MdAdminPanelSettings />
Admin
</>
)}
</Button> </Button>
)} {!admin && form.isFormModified && (
<Button onClick={onClose}>Cancel</Button> <Button colorScheme="blue" mr={3} type="submit">
</DialogFooter> Save
</Button>
)}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter>
</Formidable.From>
</DialogContent> </DialogContent>
</DialogRoot> </DialogRoot>
); );

179
front/src/components/popup/ArtistEditPopUp.tsx
View File

@ -9,12 +9,11 @@ import {
} from 'react-icons/md'; } from 'react-icons/md';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { Artist, ArtistResource } from '@/back-api'; import { ArtistResource, ArtistWrite } from '@/back-api';
import { FormCovers } from '@/components/form/FormCovers'; import { FormCovers } from '@/components/form/FormCovers';
import { FormGroup } from '@/components/form/FormGroup'; import { FormGroup } from '@/components/form/FormGroup';
import { FormInput } from '@/components/form/FormInput'; import { FormInput } from '@/components/form/FormInput';
import { FormTextarea } from '@/components/form/FormTextarea'; import { FormTextarea } from '@/components/form/FormTextarea';
import { useFormidable } from '@/components/form/Formidable';
import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp'; import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
import { import {
DialogBody, DialogBody,
@ -28,6 +27,8 @@ import { useServiceContext } from '@/service/ServiceContext';
import { useCountTracksOfAnArtist } from '@/service/Track'; import { useCountTracksOfAnArtist } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { Formidable, useFormidable } from '../formidable';
export type ArtistEditPopUpProps = {}; export type ArtistEditPopUpProps = {};
export const ArtistEditPopUp = ({}: ArtistEditPopUpProps) => { export const ArtistEditPopUp = ({}: ArtistEditPopUpProps) => {
@ -62,10 +63,10 @@ export const ArtistEditPopUp = ({}: ArtistEditPopUpProps) => {
}; };
const initialRef = useRef<HTMLButtonElement>(null); const initialRef = useRef<HTMLButtonElement>(null);
const finalRef = useRef<HTMLButtonElement>(null); const finalRef = useRef<HTMLButtonElement>(null);
const form = useFormidable<Artist>({ const form = useFormidable<ArtistWrite>({
initialValues: dataArtist, initialValues: dataArtist,
}); });
const onSave = async () => { const onSave = async (data: ArtistWrite) => {
if (isNullOrUndefined(artistIdInt)) { if (isNullOrUndefined(artistIdInt)) {
return; return;
} }
@ -145,100 +146,92 @@ export const ArtistEditPopUp = ({}: ArtistEditPopUpProps) => {
> >
{/* <DialogOverlay /> */} {/* <DialogOverlay /> */}
<DialogContent> <DialogContent>
<DialogHeader>Edit Artist</DialogHeader> <Formidable.From form={form} onSubmitDelta={onSave}>
{/* <DialogCloseButton ref={finalRef} /> */} <DialogHeader>Edit Artist</DialogHeader>
{/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} gap="0px" paddingLeft="18px"> <DialogBody pb={6} gap="0px" paddingLeft="18px">
{admin && ( {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 /> <FormGroup name="" isRequired label="Id">
Edit <Text>{dataArtist?.id}</Text>
</> </FormGroup>
) : ( {countTracksOnAnArtist !== 0 && (
<> <Flex paddingLeft="14px">
<MdAdminPanelSettings /> <MdWarning color="red.600" />
Admin <Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove artist {countTracksOnAnArtist} track(s)
depend on it.
</Text>
</Flex>
)}
<FormGroup name="" 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}
/>
</> </>
)} )}
</Button> {!admin && (
{!admin && form.isFormModified && ( <>
<Button colorScheme="blue" mr={3} onClick={onSave}> <FormInput
Save name="name"
isRequired
label="Artist name"
ref={initialRef}
/>
<FormTextarea name="description" label="Description" />
<FormInput name="firstName" label="First Name" />
<FormInput name="surname" label="SurName" />
<FormInput name="birth" label="Birth date" />
<FormInput name="death" label="Death date" />
<FormCovers
name="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> </Button>
)} {!admin && form.isFormModified && (
<Button onClick={onClose}>Cancel</Button> <Button colorScheme="blue" mr={3} type="submit">
</DialogFooter> Save
</Button>
)}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter>
</Formidable.From>
</DialogContent> </DialogContent>
</DialogRoot> </DialogRoot>
); );

165
front/src/components/popup/GenderEditPopUp.tsx
View File

@ -9,12 +9,11 @@ import {
} from 'react-icons/md'; } from 'react-icons/md';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { Gender, GenderResource } from '@/back-api'; import { GenderResource, GenderWrite } from '@/back-api';
import { FormCovers } from '@/components/form/FormCovers'; import { FormCovers } from '@/components/form/FormCovers';
import { FormGroup } from '@/components/form/FormGroup'; import { FormGroup } from '@/components/form/FormGroup';
import { FormInput } from '@/components/form/FormInput'; import { FormInput } from '@/components/form/FormInput';
import { FormTextarea } from '@/components/form/FormTextarea'; import { FormTextarea } from '@/components/form/FormTextarea';
import { useFormidable } from '@/components/form/Formidable';
import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp'; import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
import { import {
DialogBody, DialogBody,
@ -28,6 +27,8 @@ import { useServiceContext } from '@/service/ServiceContext';
import { useCountTracksOfAGender } from '@/service/Track'; import { useCountTracksOfAGender } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { Formidable, useFormidable } from '../formidable';
export type GenderEditPopUpProps = {}; export type GenderEditPopUpProps = {};
export const GenderEditPopUp = ({}: GenderEditPopUpProps) => { export const GenderEditPopUp = ({}: GenderEditPopUpProps) => {
@ -62,10 +63,10 @@ export const GenderEditPopUp = ({}: GenderEditPopUpProps) => {
}; };
const initialRef = useRef<HTMLButtonElement>(null); const initialRef = useRef<HTMLButtonElement>(null);
const finalRef = useRef<HTMLButtonElement>(null); const finalRef = useRef<HTMLButtonElement>(null);
const form = useFormidable<Gender>({ const form = useFormidable<GenderWrite>({
initialValues: dataGender, initialValues: dataGender,
}); });
const onSave = async () => { const onSave = async (data: GenderWrite) => {
if (isNullOrUndefined(genderIdInt)) { if (isNullOrUndefined(genderIdInt)) {
return; return;
} }
@ -144,91 +145,87 @@ export const GenderEditPopUp = ({}: GenderEditPopUpProps) => {
> >
{/* <DialogOverlay /> */} {/* <DialogOverlay /> */}
<DialogContent> <DialogContent>
<DialogHeader>Edit Gender</DialogHeader> <Formidable.From form={form} onSubmitDelta={onSave}>
{/* <DialogCloseButton ref={finalRef} /> */} <DialogHeader>Edit Gender</DialogHeader>
{/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} gap="0px" paddingLeft="18px"> <DialogBody pb={6} gap="0px" paddingLeft="18px">
{admin && ( {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 /> <FormGroup name="" isRequired label="Id">
Edit <Text>{dataGender?.id}</Text>
</> </FormGroup>
) : ( {countTracksOnAGender !== 0 && (
<> <Flex paddingLeft="14px">
<MdAdminPanelSettings /> <MdWarning color="red.600" />
Admin <Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove gender {countTracksOnAGender} track(s)
depend on it.
</Text>
</Flex>
)}
<FormGroup name="" 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}
/>
</> </>
)} )}
</Button> {!admin && (
{!admin && form.isFormModified && ( <>
<Button colorScheme="blue" mr={3} onClick={onSave}> <FormInput
Save name="name"
isRequired
label="Gender name"
ref={initialRef}
/>
<FormTextarea name="description" label="Description" />
<FormCovers
name="covers"
onFilesSelected={onFilesSelected}
onUriSelected={onUriSelected}
onRemove={onRemoveCover}
/>
</>
)}
</DialogBody>
<DialogFooter>
<Button
onClick={() => setAdmin((value) => !value)}
marginRight="auto"
>
{admin ? (
<>
<MdEdit />
Edit
</>
) : (
<>
<MdAdminPanelSettings />
Admin
</>
)}
</Button> </Button>
)} {!admin && form.isFormModified && (
<Button onClick={onClose}>Cancel</Button> <Button colorScheme="blue" mr={3} type="submit">
</DialogFooter> Save
</Button>
)}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter>
</Formidable.From>
</DialogContent> </DialogContent>
</DialogRoot> </DialogRoot>
); );

184
front/src/components/popup/TrackEditPopUp.tsx
View File

@ -4,14 +4,13 @@ import { Button, Text, useDisclosure } from '@chakra-ui/react';
import { MdAdminPanelSettings, MdDeleteForever, MdEdit } from 'react-icons/md'; import { MdAdminPanelSettings, MdDeleteForever, MdEdit } from 'react-icons/md';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { Track, TrackResource } from '@/back-api'; import { TrackResource, TrackWrite } from '@/back-api';
import { FormGroup } from '@/components/form/FormGroup'; import { FormGroup } from '@/components/form/FormGroup';
import { FormInput } from '@/components/form/FormInput'; import { FormInput } from '@/components/form/FormInput';
import { FormNumber } from '@/components/form/FormNumber'; import { FormNumber } from '@/components/form/FormNumber';
import { FormSelect } from '@/components/form/FormSelect'; import { FormSelect } from '@/components/form/FormSelect';
import { FormSelectMultiple } from '@/components/form/FormSelectMultiple'; import { FormSelectMultiple } from '@/components/form/FormSelectMultiple';
import { FormTextarea } from '@/components/form/FormTextarea'; import { FormTextarea } from '@/components/form/FormTextarea';
import { useFormidable } from '@/components/form/Formidable';
import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp'; import { ConfirmPopUp } from '@/components/popup/ConfirmPopUp';
import { import {
DialogBody, DialogBody,
@ -27,6 +26,8 @@ import { useServiceContext } from '@/service/ServiceContext';
import { useSpecificTrack, useTrackService } from '@/service/Track'; import { useSpecificTrack, useTrackService } from '@/service/Track';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { Formidable, useFormidable } from '../formidable';
export type TrackEditPopUpProps = {}; export type TrackEditPopUpProps = {};
export const TrackEditPopUp = ({}: TrackEditPopUpProps) => { export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
@ -63,14 +64,14 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
}; };
const initialRef = useRef<HTMLButtonElement>(null); const initialRef = useRef<HTMLButtonElement>(null);
const finalRef = useRef<HTMLButtonElement>(null); const finalRef = useRef<HTMLButtonElement>(null);
const form = useFormidable<Track>({ const form = useFormidable<TrackWrite>({
//onSubmit, //onSubmit,
//onValuesChange, //onValuesChange,
initialValues: dataTrack, initialValues: dataTrack,
//onValid: () => console.log('onValid'), //onValid: () => console.log('onValid'),
//onInvalid: () => console.log('onInvalid'), //onInvalid: () => console.log('onInvalid'),
}); });
const onSave = async () => { const onSave = async (data: TrackWrite) => {
if (isNullOrUndefined(trackIdInt)) { if (isNullOrUndefined(trackIdInt)) {
return; return;
} }
@ -97,104 +98,93 @@ export const TrackEditPopUp = ({}: TrackEditPopUpProps) => {
> >
{/* <DialogOverlay /> */} {/* <DialogOverlay /> */}
<DialogContent> <DialogContent>
<DialogHeader>Edit Track</DialogHeader> <Formidable.From form={form} onSubmitDelta={onSave}>
{/* <DialogCloseButton ref={finalRef} /> */} <DialogHeader>Edit Track</DialogHeader>
{/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} gap="0px" paddingLeft="18px"> <DialogBody pb={6} gap="0px" paddingLeft="18px">
{admin && ( {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 /> <FormGroup name="" isRequired label="Id">
Edit <Text>{dataTrack?.id}</Text>
</> </FormGroup>
) : ( <FormGroup name="" label="Data Id">
<> <Text>{dataTrack?.dataId}</Text>
<MdAdminPanelSettings /> </FormGroup>
Admin <FormGroup name="" 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}
/>
</> </>
)} )}
</Button> {!admin && (
{!admin && form.isFormModified && ( <>
<Button colorScheme="blue" mr={3} onClick={onSave}> <FormInput
Save name="name"
isRequired
label="Title"
ref={initialRef}
/>
<FormTextarea name="description" label="Description" />
<FormSelect
name="genderId"
options={dataGenders}
label="Gender"
/>
<FormSelectMultiple
name="artists"
options={dataArtist}
label="Artist(s)"
/>
<FormSelect name="albumId" options={dataAlbums} label="Album" />
<FormNumber
name="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> </Button>
)} {!admin && form.isFormModified && (
<Button onClick={onClose}>Cancel</Button> <Button colorScheme="blue" mr={3} type="submit">
</DialogFooter> Save
</Button>
)}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter>
</Formidable.From>
</DialogContent> </DialogContent>
</DialogRoot> </DialogRoot>
); );

17
front/src/scene/home/AddPage.tsx
View File

@ -18,7 +18,7 @@ import {
import { PageLayout } from '@/components/Layout/PageLayout'; import { PageLayout } from '@/components/Layout/PageLayout';
import { TopBar } from '@/components/TopBar/TopBar'; import { TopBar } from '@/components/TopBar/TopBar';
import { FormSelect } from '@/components/form/FormSelect'; import { FormSelect } from '@/components/form/FormSelect';
import { useFormidable } from '@/components/form/Formidable'; import { Formidable, useFormidable } from '@/components/formidable';
import { PopUpUploadProgress } from '@/components/popup/PopUpUploadProgress'; import { PopUpUploadProgress } from '@/components/popup/PopUpUploadProgress';
import { useAlbumService, useOrderedAlbums } from '@/service/Album'; import { useAlbumService, useOrderedAlbums } from '@/service/Album';
import { useArtistService, useOrderedArtists } from '@/service/Artist'; import { useArtistService, useOrderedArtists } from '@/service/Artist';
@ -443,20 +443,18 @@ export const AddPage = () => {
</Flex> </Flex>
</Flex> </Flex>
{parsedElement && parsedElement.length !== 0 && ( {parsedElement && parsedElement.length !== 0 && (
<> <Formidable.From form={form} onSubmit={sendFile}>
<Text fontSize="30px">Meta-data:</Text> <Text fontSize="30px">Meta-data:</Text>
<FormSelect <FormSelect
label="Gender" label="Gender"
form={form} name="genderId"
variableName="genderId"
options={dataGenders} options={dataGenders}
keyInputValue="name" keyInputValue="name"
addNewItem={addNewGender} addNewItem={addNewGender}
/> />
<FormSelect <FormSelect
label="Artist" label="Artist"
form={form} name="artistId"
variableName="artistId"
options={dataArtist} options={dataArtist}
keyInputValue="name" keyInputValue="name"
addNewItem={addNewArtist} addNewItem={addNewArtist}
@ -464,8 +462,7 @@ export const AddPage = () => {
/> />
<FormSelect <FormSelect
label="Album" label="Album"
form={form} name="albumId"
variableName="albumId"
options={dataAlbums} options={dataAlbums}
keyInputValue="name" keyInputValue="name"
addNewItem={addNewAlbum} addNewItem={addNewAlbum}
@ -533,7 +530,7 @@ export const AddPage = () => {
<Flex marginY="15px"> <Flex marginY="15px">
<Button <Button
colorPalette="brand" colorPalette="brand"
onClick={sendFile} type="submit"
disabled={!needSend} disabled={!needSend}
marginLeft="auto" marginLeft="auto"
marginRight="30px" marginRight="30px"
@ -541,7 +538,7 @@ export const AddPage = () => {
<MdCloudUpload /> Upload <MdCloudUpload /> Upload
</Button> </Button>
</Flex> </Flex>
</> </Formidable.From>
)} )}
{listFileInBdd && ( {listFileInBdd && (

10
front/src/scene/home/HomePage.tsx
View File

@ -20,31 +20,31 @@ const homeList: HomeListType[] = [
id: 1, id: 1,
name: 'Genders', name: 'Genders',
icon: <LuCrown style={{ width: '100px', height: '100px' }} />, icon: <LuCrown style={{ width: '100px', height: '100px' }} />,
to: 'gender', to: '/gender',
}, },
{ {
id: 2, id: 2,
name: 'Artists', name: 'Artists',
icon: <MdGroup style={{ width: '100px', height: '100px' }} />, icon: <MdGroup style={{ width: '100px', height: '100px' }} />,
to: 'artist', to: '/artist',
}, },
{ {
id: 3, id: 3,
name: 'Albums', name: 'Albums',
icon: <LuDisc3 style={{ width: '100px', height: '100px' }} />, icon: <LuDisc3 style={{ width: '100px', height: '100px' }} />,
to: 'album', to: '/album',
}, },
{ {
id: 4, id: 4,
name: 'Tracks', name: 'Tracks',
icon: <LuFileAudio style={{ width: '100px', height: '100px' }} />, icon: <LuFileAudio style={{ width: '100px', height: '100px' }} />,
to: 'track', to: '/track',
}, },
{ {
id: 5, id: 5,
name: 'Playlists', name: 'Playlists',
icon: <LuEar style={{ width: '100px', height: '100px' }} />, icon: <LuEar style={{ width: '100px', height: '100px' }} />,
to: 'playlists', to: '/playlists',
}, },
]; ];