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

[FEAT] set edition pop-up (not full fisished but operational

Browse Source
This commit is contained in:
Edouard DUPIN 2025-02-26 15:45:51 +01:00
parent 88f65f0806
commit 77acd2060b
16 changed files with 331 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
front/src/components/popup/MediaEditPopUp.tsx
View File

@ -25,6 +25,7 @@ import { useServiceContext } from '@/service/ServiceContext';
import { useOrderedTypes } from '@/service/Type'; import { useOrderedTypes } from '@/service/Type';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { FormCovers } from '../form/FormCovers';
import { Formidable, useFormidable } from '../formidable'; import { Formidable, useFormidable } from '../formidable';
export type MediaEditPopUpProps = {}; export type MediaEditPopUpProps = {};
@ -43,7 +44,7 @@ export const MediaEditPopUp = ({}: MediaEditPopUpProps) => {
const navigate = useNavigate(); const navigate = useNavigate();
const disclosure = useDisclosure(); const disclosure = useDisclosure();
const onClose = () => { const onClose = () => {
navigate('../../..', { relative: 'path' }); navigate('../..', { relative: 'path' });
}; };
const onRemove = () => { const onRemove = () => {
if (isNullOrUndefined(mediaIdInt)) { if (isNullOrUndefined(mediaIdInt)) {
@ -81,6 +82,59 @@ export const MediaEditPopUp = ({}: MediaEditPopUpProps) => {
}) })
); );
}; };
const onUriSelected = (uri: string) => {
if (isNullOrUndefined(mediaIdInt)) {
return;
}
console.error('Not implemented');
// store.update(
// TypeResource.uploadCover({
// restConfig: session.getRestConfig(),
// data: {
// uri,
// },
// params: {
// id: TypeIdInt,
// },
// })
// );
};
const onFilesSelected = (files: File[]) => {
files.forEach((element) => {
console.log(`Select file: '${element.name}'`);
});
if (isNullOrUndefined(mediaIdInt)) {
return;
}
store.update(
MediaResource.uploadCover({
restConfig: session.getRestConfig(),
data: {
file: files[0],
},
params: {
id: mediaIdInt,
},
})
);
};
const onRemoveCover = (index: number) => {
if (isNullOrUndefined(dataMedia?.covers)) {
return;
}
if (isNullOrUndefined(mediaIdInt)) {
return;
}
store.update(
MediaResource.removeCover({
restConfig: session.getRestConfig(),
params: {
id: mediaIdInt,
coverId: dataMedia.covers[index],
},
})
);
};
return ( return (
<DialogRoot <DialogRoot
//initialFocusRef={initialRef} //initialFocusRef={initialRef}
@ -103,7 +157,7 @@ export const MediaEditPopUp = ({}: MediaEditPopUpProps) => {
<MdEdit /> <MdEdit />
Edit Edit
</Tabs.Trigger> </Tabs.Trigger>
<Tabs.Trigger value="admin"> <Tabs.Trigger value="admin" colorPalette="@danger">
<MdAdminPanelSettings /> <MdAdminPanelSettings />
Admin Admin
</Tabs.Trigger> </Tabs.Trigger>
@ -136,6 +190,13 @@ export const MediaEditPopUp = ({}: MediaEditPopUpProps) => {
min={0} min={0}
max={1000} max={1000}
/> />
<FormCovers
name="covers"
label="Covers"
onFilesSelected={onFilesSelected}
onUriSelected={onUriSelected}
onRemove={onRemoveCover}
/>
</Tabs.Content> </Tabs.Content>
{/* ---------------------- Other Tabs --------------------------- */} {/* ---------------------- Other Tabs --------------------------- */}
<Tabs.Content value="admin"> <Tabs.Content value="admin">

123
front/src/components/popup/AlbumEditPopUp.tsx → front/src/components/popup/SeasonEditPopUp.tsx
View File

@ -1,6 +1,6 @@
import { useRef, useState } from 'react'; import { useRef } from 'react';
import { Flex, Text, useDisclosure } from '@chakra-ui/react'; import { Flex, Tabs, Text, useDisclosure } from '@chakra-ui/react';
import { import {
MdAdminPanelSettings, MdAdminPanelSettings,
MdDeleteForever, MdDeleteForever,
@ -22,7 +22,11 @@ import {
DialogHeader, DialogHeader,
DialogRoot, DialogRoot,
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { useSeasonCountVideo, useSeasonService, useSpecificSeason } from '@/service/Season'; import {
useSeasonCountVideo,
useSeasonService,
useSpecificSeason,
} from '@/service/Season';
import { useServiceContext } from '@/service/ServiceContext'; import { useServiceContext } from '@/service/ServiceContext';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
@ -32,30 +36,29 @@ import { Button } from '../ui/button';
export type SeasonEditPopUpProps = {}; export type SeasonEditPopUpProps = {};
export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => { export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => {
const { SeasonId } = useParams(); const { seasonId } = useParams();
const SeasonIdInt = isNullOrUndefined(SeasonId) const seasonIdInt = isNullOrUndefined(seasonId)
? undefined ? undefined
: parseInt(SeasonId, 10); : parseInt(seasonId, 10);
const { session } = useServiceContext(); const { session } = useServiceContext();
const { seasonCountVideo } = useSeasonCountVideo(SeasonIdInt); const { seasonCountVideo } = useSeasonCountVideo(seasonIdInt);
const { store } = useSeasonService(); const { store } = useSeasonService();
const { dataSeason } = useSpecificSeason(SeasonIdInt); const { dataSeason } = useSpecificSeason(seasonIdInt);
const [admin, setAdmin] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const disclosure = useDisclosure(); const disclosure = useDisclosure();
const onClose = () => { const onClose = () => {
navigate('../../', { relative: 'path' }); navigate('../../', { relative: 'path' });
}; };
const onRemove = () => { const onRemove = () => {
if (isNullOrUndefined(SeasonIdInt)) { if (isNullOrUndefined(seasonIdInt)) {
return; return;
} }
store.remove( store.remove(
SeasonIdInt, seasonIdInt,
SeasonResource.remove({ SeasonResource.remove({
restConfig: session.getRestConfig(), restConfig: session.getRestConfig(),
params: { params: {
id: SeasonIdInt, id: seasonIdInt,
}, },
}) })
); );
@ -68,7 +71,7 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => {
deltaConfig: { omit: ['covers'] }, deltaConfig: { omit: ['covers'] },
}); });
const onSave = async (deltaData: SeasonWrite) => { const onSave = async (deltaData: SeasonWrite) => {
if (isNullOrUndefined(SeasonIdInt)) { if (isNullOrUndefined(seasonIdInt)) {
return; return;
} }
console.log(`onSave = ${JSON.stringify(deltaData, null, 2)}`); console.log(`onSave = ${JSON.stringify(deltaData, null, 2)}`);
@ -77,17 +80,17 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => {
restConfig: session.getRestConfig(), restConfig: session.getRestConfig(),
data: deltaData, data: deltaData,
params: { params: {
id: SeasonIdInt, id: seasonIdInt,
}, },
}) })
); );
}; };
const onUriSelected = (uri: string) => { const onUriSelected = (uri: string) => {
if (isNullOrUndefined(SeasonIdInt)) { if (isNullOrUndefined(seasonIdInt)) {
return; return;
} }
console.error("not implemented"); console.error('not implemented');
// store.update( // store.update(
// SeasonResource.uploadCover({ // SeasonResource.uploadCover({
// restConfig: session.getRestConfig(), // restConfig: session.getRestConfig(),
@ -105,7 +108,7 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => {
files.forEach((element) => { files.forEach((element) => {
console.log(`Select file: '${element.name}'`); console.log(`Select file: '${element.name}'`);
}); });
if (isNullOrUndefined(SeasonIdInt)) { if (isNullOrUndefined(seasonIdInt)) {
return; return;
} }
store.update( store.update(
@ -115,7 +118,7 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => {
file: files[0], file: files[0],
}, },
params: { params: {
id: SeasonIdInt, id: seasonIdInt,
}, },
}) })
); );
@ -124,14 +127,14 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => {
if (isNullOrUndefined(dataSeason?.covers)) { if (isNullOrUndefined(dataSeason?.covers)) {
return; return;
} }
if (isNullOrUndefined(SeasonIdInt)) { if (isNullOrUndefined(seasonIdInt)) {
return; return;
} }
store.update( store.update(
SeasonResource.removeCover({ SeasonResource.removeCover({
restConfig: session.getRestConfig(), restConfig: session.getRestConfig(),
params: { params: {
id: SeasonIdInt, id: seasonIdInt,
coverId: dataSeason.covers[index], coverId: dataSeason.covers[index],
}, },
}) })
@ -152,8 +155,36 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => {
{/* <DialogCloseButton ref={finalRef} /> */} {/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} gap="0px" paddingLeft="18px"> <DialogBody pb={6} gap="0px" paddingLeft="18px">
{admin && ( <Tabs.Root defaultValue="edit" variant="outline">
<> <Tabs.List>
<Tabs.Trigger value="edit">
<MdEdit />
Edit
</Tabs.Trigger>
<Tabs.Trigger value="admin" colorPalette="@danger">
<MdAdminPanelSettings />
Admin
</Tabs.Trigger>
</Tabs.List>
{/* ---------------------- Other Tabs --------------------------- */}
<Tabs.Content value="edit">
<FormInput
name="name"
isRequired
label="Title"
ref={initialRef}
/>
<FormTextarea name="description" label="Description" />
<FormCovers
name="covers"
label="Covers"
onFilesSelected={onFilesSelected}
onUriSelected={onUriSelected}
onRemove={onRemoveCover}
/>
</Tabs.Content>
{/* ---------------------- Other Tabs --------------------------- */}
<Tabs.Content value="admin">
<FormGroupShow isRequired label="Id"> <FormGroupShow isRequired label="Id">
<Text>{dataSeason?.id}</Text> <Text>{dataSeason?.id}</Text>
</FormGroupShow> </FormGroupShow>
@ -161,8 +192,8 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => {
<Flex paddingLeft="14px"> <Flex paddingLeft="14px">
<MdWarning color="red.600" /> <MdWarning color="red.600" />
<Text paddingLeft="6px" color="red.600" fontWeight="bold"> <Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove Season {seasonCountVideo} Media(s) Can not remove Season {seasonCountVideo} Media(s) depend
depend on it. on it.
</Text> </Text>
</Flex> </Flex>
)} )}
@ -183,50 +214,18 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => {
confirmTitle="Remove" confirmTitle="Remove"
onConfirm={onRemove} onConfirm={onRemove}
/> />
</> </Tabs.Content>
)} </Tabs.Root>
{!admin && (
<>
<FormInput
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> </DialogBody>
<DialogFooter> <DialogFooter>
<Button <Button onClick={onClose} marginRight="auto">
onClick={() => setAdmin((value) => !value)} Cancel
marginRight="auto"
>
{admin ? (
<>
<MdEdit />
Edit
</>
) : (
<>
<MdAdminPanelSettings />
Admin
</>
)}
</Button> </Button>
{!admin && form.isFormModified && ( {form.isFormModified && (
<Button colorScheme="blue" mr={3} type="submit"> <Button colorPalette="blue" type="submit">
Save Save
</Button> </Button>
)} )}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter> </DialogFooter>
</Formidable.From> </Formidable.From>
</DialogContent> </DialogContent>

125
front/src/components/popup/ArtistEditPopUp.tsx → front/src/components/popup/SeriesEditPopUp.tsx
View File

@ -1,6 +1,6 @@
import { useRef, useState } from 'react'; import { useRef } from 'react';
import { Button, Flex, Text, useDisclosure } from '@chakra-ui/react'; import { Button, Flex, Tabs, Text, useDisclosure } from '@chakra-ui/react';
import { import {
MdAdminPanelSettings, MdAdminPanelSettings,
MdDeleteForever, MdDeleteForever,
@ -21,41 +21,40 @@ import {
DialogHeader, DialogHeader,
DialogRoot, DialogRoot,
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { useSeasonCountVideo } from '@/service';
import { useSeriesService, useSpecificSeries } from '@/service/Series'; import { useSeriesService, useSpecificSeries } from '@/service/Series';
import { useServiceContext } from '@/service/ServiceContext'; import { useServiceContext } from '@/service/ServiceContext';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { useSeasonCountVideo } from '@/service';
import { FormGroupShow } from '../form/FormGroup'; import { FormGroupShow } from '../form/FormGroup';
import { Formidable, useFormidable } from '../formidable'; import { Formidable, useFormidable } from '../formidable';
export type SeriesEditPopUpProps = {}; export type SeriesEditPopUpProps = {};
export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => { export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
const { SeriesId } = useParams(); const { seriesId } = useParams();
const SeriesIdInt = isNullOrUndefined(SeriesId) const seriesIdInt = isNullOrUndefined(seriesId)
? undefined ? undefined
: parseInt(SeriesId, 10); : parseInt(seriesId, 10);
const { session } = useServiceContext(); const { session } = useServiceContext();
const { seasonCountVideo } = useSeasonCountVideo(SeriesIdInt); const { seasonCountVideo } = useSeasonCountVideo(seriesIdInt);
const { store } = useSeriesService(); const { store } = useSeriesService();
const { dataSeries } = useSpecificSeries(SeriesIdInt); const { dataSeries } = useSpecificSeries(seriesIdInt);
const [admin, setAdmin] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const disclosure = useDisclosure(); const disclosure = useDisclosure();
const onClose = () => { const onClose = () => {
navigate('../../', { relative: 'path' }); navigate('../../', { relative: 'path' });
}; };
const onRemove = () => { const onRemove = () => {
if (isNullOrUndefined(SeriesIdInt)) { if (isNullOrUndefined(seriesIdInt)) {
return; return;
} }
store.remove( store.remove(
SeriesIdInt, seriesIdInt,
SeriesResource.remove({ SeriesResource.remove({
restConfig: session.getRestConfig(), restConfig: session.getRestConfig(),
params: { params: {
id: SeriesIdInt, id: seriesIdInt,
}, },
}) })
); );
@ -68,7 +67,7 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
deltaConfig: { omit: ['covers'] }, deltaConfig: { omit: ['covers'] },
}); });
const onSave = async (dataDelta: SeriesWrite) => { const onSave = async (dataDelta: SeriesWrite) => {
if (isNullOrUndefined(SeriesIdInt)) { if (isNullOrUndefined(seriesIdInt)) {
return; return;
} }
console.log(`onSave = ${JSON.stringify(dataDelta, null, 2)}`); console.log(`onSave = ${JSON.stringify(dataDelta, null, 2)}`);
@ -77,17 +76,17 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
restConfig: session.getRestConfig(), restConfig: session.getRestConfig(),
data: dataDelta, data: dataDelta,
params: { params: {
id: SeriesIdInt, id: seriesIdInt,
}, },
}) })
); );
}; };
const onUriSelected = (uri: string) => { const onUriSelected = (uri: string) => {
if (isNullOrUndefined(SeriesIdInt)) { if (isNullOrUndefined(seriesIdInt)) {
return; return;
} }
console.error("Not implemented"); console.error('Not implemented');
// store.update( // store.update(
// SeriesResource.uploadCover({ // SeriesResource.uploadCover({
// restConfig: session.getRestConfig(), // restConfig: session.getRestConfig(),
@ -104,7 +103,7 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
files.forEach((element) => { files.forEach((element) => {
console.log(`Select file: '${element.name}'`); console.log(`Select file: '${element.name}'`);
}); });
if (isNullOrUndefined(SeriesIdInt)) { if (isNullOrUndefined(seriesIdInt)) {
return; return;
} }
store.update( store.update(
@ -114,7 +113,7 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
file: files[0], file: files[0],
}, },
params: { params: {
id: SeriesIdInt, id: seriesIdInt,
}, },
}) })
); );
@ -123,14 +122,14 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
if (isNullOrUndefined(dataSeries?.covers)) { if (isNullOrUndefined(dataSeries?.covers)) {
return; return;
} }
if (isNullOrUndefined(SeriesIdInt)) { if (isNullOrUndefined(seriesIdInt)) {
return; return;
} }
store.update( store.update(
SeriesResource.removeCover({ SeriesResource.removeCover({
restConfig: session.getRestConfig(), restConfig: session.getRestConfig(),
params: { params: {
id: SeriesIdInt, id: seriesIdInt,
coverId: dataSeries.covers[index], coverId: dataSeries.covers[index],
}, },
}) })
@ -152,8 +151,36 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
{/* <DialogCloseButton ref={finalRef} /> */} {/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} gap="0px" paddingLeft="18px"> <DialogBody pb={6} gap="0px" paddingLeft="18px">
{admin && ( <Tabs.Root defaultValue="edit" variant="outline">
<> <Tabs.List>
<Tabs.Trigger value="edit">
<MdEdit />
Edit
</Tabs.Trigger>
<Tabs.Trigger value="admin" colorPalette="@danger">
<MdAdminPanelSettings />
Admin
</Tabs.Trigger>
</Tabs.List>
{/* ---------------------- Other Tabs --------------------------- */}
<Tabs.Content value="edit">
<FormInput
name="name"
isRequired
label="Series name"
ref={initialRef}
/>
<FormTextarea name="description" label="Description" />
<FormCovers
name="covers"
label="Covers"
onFilesSelected={onFilesSelected}
onUriSelected={onUriSelected}
onRemove={onRemoveCover}
/>
</Tabs.Content>
{/* ---------------------- Other Tabs --------------------------- */}
<Tabs.Content value="admin">
<FormGroupShow isRequired label="Id"> <FormGroupShow isRequired label="Id">
<Text>{dataSeries?.id}</Text> <Text>{dataSeries?.id}</Text>
</FormGroupShow> </FormGroupShow>
@ -161,8 +188,8 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
<Flex paddingLeft="14px"> <Flex paddingLeft="14px">
<MdWarning color="red.600" /> <MdWarning color="red.600" />
<Text paddingLeft="6px" color="red.600" fontWeight="bold"> <Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove Series {seasonCountVideo} Media(s) Can not remove Series {seasonCountVideo} Media(s) depend
depend on it. on it.
</Text> </Text>
</Flex> </Flex>
)} )}
@ -173,7 +200,7 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
colorPalette="@danger" colorPalette="@danger"
disabled={seasonCountVideo !== 0} disabled={seasonCountVideo !== 0}
> >
<MdDeleteForever /> Remove Media <MdDeleteForever /> Remove Series (not check)
</Button> </Button>
</FormGroupShow> </FormGroupShow>
<ConfirmPopUp <ConfirmPopUp
@ -183,54 +210,18 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
confirmTitle="Remove" confirmTitle="Remove"
onConfirm={onRemove} onConfirm={onRemove}
/> />
</> </Tabs.Content>
)} </Tabs.Root>
{!admin && (
<>
<FormInput
name="name"
isRequired
label="Series 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> </DialogBody>
<DialogFooter> <DialogFooter>
<Button <Button onClick={onClose} marginRight="auto">
onClick={() => setAdmin((value) => !value)} Cancel
marginRight="auto"
colorPalette={admin ? undefined : '@danger'}
>
{admin ? (
<>
<MdEdit />
Edit
</>
) : (
<>
<MdAdminPanelSettings />
Admin
</>
)}
</Button> </Button>
{!admin && form.isFormModified && ( {form.isFormModified && (
<Button colorScheme="blue" mr={3} type="submit"> <Button colorPalette="blue" type="submit">
Save Save
</Button> </Button>
)} )}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter> </DialogFooter>
</Formidable.From> </Formidable.From>
</DialogContent> </DialogContent>

123
front/src/components/popup/GenderEditPopUp.tsx → front/src/components/popup/TypeEditPopUp.tsx
View File

@ -1,6 +1,6 @@
import { useRef, useState } from 'react'; import { useRef } from 'react';
import { Button, Flex, Text, useDisclosure } from '@chakra-ui/react'; import { Button, Flex, Tabs, Text, useDisclosure } from '@chakra-ui/react';
import { import {
MdAdminPanelSettings, MdAdminPanelSettings,
MdDeleteForever, MdDeleteForever,
@ -21,7 +21,12 @@ import {
DialogHeader, DialogHeader,
DialogRoot, DialogRoot,
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import { useServiceContext, useSpecificType, useTypeCountVideo, useTypeService } from '@/service'; import {
useServiceContext,
useSpecificType,
useTypeCountVideo,
useTypeService,
} from '@/service';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { FormGroupShow } from '../form/FormGroup'; import { FormGroupShow } from '../form/FormGroup';
@ -30,30 +35,29 @@ import { Formidable, useFormidable } from '../formidable';
export type TypeEditPopUpProps = {}; export type TypeEditPopUpProps = {};
export const TypeEditPopUp = ({}: TypeEditPopUpProps) => { export const TypeEditPopUp = ({}: TypeEditPopUpProps) => {
const { TypeId } = useParams(); const { typeId } = useParams();
const TypeIdInt = isNullOrUndefined(TypeId) const typeIdInt = isNullOrUndefined(typeId)
? undefined ? undefined
: parseInt(TypeId, 10); : parseInt(typeId, 10);
const { session } = useServiceContext(); const { session } = useServiceContext();
const { countVideoWithType } = useTypeCountVideo(TypeIdInt); const { countVideoWithType } = useTypeCountVideo(typeIdInt);
const { store } = useTypeService(); const { store } = useTypeService();
const { dataType } = useSpecificType(TypeIdInt); const { dataType } = useSpecificType(typeIdInt);
const [admin, setAdmin] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const disclosure = useDisclosure(); const disclosure = useDisclosure();
const onClose = () => { const onClose = () => {
navigate('../../', { relative: 'path' }); navigate('../../', { relative: 'path' });
}; };
const onRemove = () => { const onRemove = () => {
if (isNullOrUndefined(TypeIdInt)) { if (isNullOrUndefined(typeIdInt)) {
return; return;
} }
store.remove( store.remove(
TypeIdInt, typeIdInt,
TypeResource.remove({ TypeResource.remove({
restConfig: session.getRestConfig(), restConfig: session.getRestConfig(),
params: { params: {
id: TypeIdInt, id: typeIdInt,
}, },
}) })
); );
@ -66,7 +70,7 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => {
deltaConfig: { omit: ['covers'] }, deltaConfig: { omit: ['covers'] },
}); });
const onSave = async (dataDelta: TypeWrite) => { const onSave = async (dataDelta: TypeWrite) => {
if (isNullOrUndefined(TypeIdInt)) { if (isNullOrUndefined(typeIdInt)) {
return; return;
} }
console.log(`onSave = ${JSON.stringify(dataDelta, null, 2)}`); console.log(`onSave = ${JSON.stringify(dataDelta, null, 2)}`);
@ -75,16 +79,16 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => {
restConfig: session.getRestConfig(), restConfig: session.getRestConfig(),
data: dataDelta, data: dataDelta,
params: { params: {
id: TypeIdInt, id: typeIdInt,
}, },
}) })
); );
}; };
const onUriSelected = (uri: string) => { const onUriSelected = (uri: string) => {
if (isNullOrUndefined(TypeIdInt)) { if (isNullOrUndefined(typeIdInt)) {
return; return;
} }
console.error("Not implemented"); console.error('Not implemented');
// store.update( // store.update(
// TypeResource.uploadCover({ // TypeResource.uploadCover({
// restConfig: session.getRestConfig(), // restConfig: session.getRestConfig(),
@ -101,7 +105,7 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => {
files.forEach((element) => { files.forEach((element) => {
console.log(`Select file: '${element.name}'`); console.log(`Select file: '${element.name}'`);
}); });
if (isNullOrUndefined(TypeIdInt)) { if (isNullOrUndefined(typeIdInt)) {
return; return;
} }
store.update( store.update(
@ -111,7 +115,7 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => {
file: files[0], file: files[0],
}, },
params: { params: {
id: TypeIdInt, id: typeIdInt,
}, },
}) })
); );
@ -120,14 +124,14 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => {
if (isNullOrUndefined(dataType?.covers)) { if (isNullOrUndefined(dataType?.covers)) {
return; return;
} }
if (isNullOrUndefined(TypeIdInt)) { if (isNullOrUndefined(typeIdInt)) {
return; return;
} }
store.update( store.update(
TypeResource.removeCover({ TypeResource.removeCover({
restConfig: session.getRestConfig(), restConfig: session.getRestConfig(),
params: { params: {
id: TypeIdInt, id: typeIdInt,
coverId: dataType.covers[index], coverId: dataType.covers[index],
}, },
}) })
@ -149,8 +153,36 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => {
{/* <DialogCloseButton ref={finalRef} /> */} {/* <DialogCloseButton ref={finalRef} /> */}
<DialogBody pb={6} gap="0px" paddingLeft="18px"> <DialogBody pb={6} gap="0px" paddingLeft="18px">
{admin && ( <Tabs.Root defaultValue="edit" variant="outline">
<> <Tabs.List>
<Tabs.Trigger value="edit">
<MdEdit />
Edit
</Tabs.Trigger>
<Tabs.Trigger value="admin" colorPalette="@danger">
<MdAdminPanelSettings />
Admin
</Tabs.Trigger>
</Tabs.List>
{/* ---------------------- Other Tabs --------------------------- */}
<Tabs.Content value="edit">
<FormInput
name="name"
isRequired
label="Type name"
ref={initialRef}
/>
<FormTextarea name="description" label="Description" />
<FormCovers
name="covers"
label="Covers"
onFilesSelected={onFilesSelected}
onUriSelected={onUriSelected}
onRemove={onRemoveCover}
/>
</Tabs.Content>
{/* ---------------------- Other Tabs --------------------------- */}
<Tabs.Content value="admin">
<FormGroupShow isRequired label="Id"> <FormGroupShow isRequired label="Id">
<Text>{dataType?.id}</Text> <Text>{dataType?.id}</Text>
</FormGroupShow> </FormGroupShow>
@ -158,8 +190,8 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => {
<Flex paddingLeft="14px"> <Flex paddingLeft="14px">
<MdWarning color="red.600" /> <MdWarning color="red.600" />
<Text paddingLeft="6px" color="red.600" fontWeight="bold"> <Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove Type {countVideoWithType} Media(s) Can not remove Type {countVideoWithType} Media(s) depend
depend on it. on it.
</Text> </Text>
</Flex> </Flex>
)} )}
@ -180,49 +212,18 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => {
confirmTitle="Remove" confirmTitle="Remove"
onConfirm={onRemove} onConfirm={onRemove}
/> />
</> </Tabs.Content>
)} </Tabs.Root>
{!admin && (
<>
<FormInput
name="name"
isRequired
label="Type name"
ref={initialRef}
/>
<FormTextarea name="description" label="Description" />
<FormCovers
name="covers"
onFilesSelected={onFilesSelected}
onUriSelected={onUriSelected}
onRemove={onRemoveCover}
/>
</>
)}
</DialogBody> </DialogBody>
<DialogFooter> <DialogFooter>
<Button <Button onClick={onClose} marginRight="auto">
onClick={() => setAdmin((value) => !value)} Cancel
marginRight="auto"
>
{admin ? (
<>
<MdEdit />
Edit
</>
) : (
<>
<MdAdminPanelSettings />
Admin
</>
)}
</Button> </Button>
{!admin && form.isFormModified && ( {form.isFormModified && (
<Button colorScheme="blue" mr={3} type="submit"> <Button colorPalette="blue" type="submit">
Save Save
</Button> </Button>
)} )}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter> </DialogFooter>
</Formidable.From> </Formidable.From>
</DialogContent> </DialogContent>

9
front/src/scene/AppRoutes.tsx
View File

@ -39,13 +39,12 @@ export const AppRoutes = () => {
<Route path="settings/*" element={<SettingsPage />} /> <Route path="settings/*" element={<SettingsPage />} />
<Route path="add/*" element={<AddPage />} /> <Route path="add/*" element={<AddPage />} />
<Route path="on-air/*" element={<OnAirPage />} /> <Route path="on-air/*" element={<OnAirPage />} />
<Route path="Series/*" element={<SeriesRoutes />} /> <Route path="series/*" element={<SeriesRoutes />} />
<Route path="Season/*" element={<SeasonRoutes />} /> <Route path="season/*" element={<SeasonRoutes />} />
<Route path="Type/*" element={<TypeRoutes />} /> <Route path="type/*" element={<TypeRoutes />} />
<Route path="Media/*" element={<MediaRoutes />} /> <Route path="media/*" element={<MediaRoutes />} />
<Route path="*" element={<Error404 />} /> <Route path="*" element={<Error404 />} />
</> </>
) : ( ) : (
<Route path="*" element={<Error401 />} /> <Route path="*" element={<Error401 />} />
)} )}

2
front/src/scene/onAir/OnAirPage.tsx
View File

@ -13,8 +13,8 @@ import { PageLayout } from '@/components/Layout/PageLayout';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter'; import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { DisplayMediaFullId } from '@/components/media/DisplayMediaFullId'; import { DisplayMediaFullId } from '@/components/media/DisplayMediaFullId';
import { SeasonEditPopUp } from '@/components/popup/AlbumEditPopUp';
import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp'; import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp';
import { SeasonEditPopUp } from '@/components/popup/SeasonEditPopUp';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorModeValue } from '@/components/ui/color-mode';
import { BASE_WRAP_SPACING } from '@/constants/genericSpacing'; import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';

2
front/src/scene/season/SeasonDetailPage.tsx
View File

@ -8,8 +8,8 @@ import { EmptyEnd } from '@/components/EmptyEnd';
import { PageLayout } from '@/components/Layout/PageLayout'; import { PageLayout } from '@/components/Layout/PageLayout';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter'; import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { SeasonEditPopUp } from '@/components/popup/AlbumEditPopUp';
import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp'; import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp';
import { SeasonEditPopUp } from '@/components/popup/SeasonEditPopUp';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorModeValue } from '@/components/ui/color-mode';
import { BASE_WRAP_SPACING } from '@/constants/genericSpacing'; import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';
import { import {

6
front/src/scene/sso/series/SeriesDetailPage.tsx
View File

@ -7,11 +7,9 @@ import { Covers } from '@/components/Cover';
import { EmptyEnd } from '@/components/EmptyEnd'; import { EmptyEnd } from '@/components/EmptyEnd';
import { PageLayout } from '@/components/Layout/PageLayout'; import { PageLayout } from '@/components/Layout/PageLayout';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter'; import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { SeriesEditPopUp } from '@/components/popup/ArtistEditPopUp';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { import { SeriesEditPopUp } from '@/components/popup/SeriesEditPopUp';
BASE_WRAP_SPACING import { BASE_WRAP_SPACING } from '@/constants/genericSpacing';
} from '@/constants/genericSpacing';
import { useSpecificSeries } from '@/service'; import { useSpecificSeries } from '@/service';
export const SeriesDetailPage = () => { export const SeriesDetailPage = () => {

2
front/src/scene/sso/series/SeriesSeasonDetailPage.tsx
View File

@ -8,8 +8,8 @@ import { EmptyEnd } from '@/components/EmptyEnd';
import { PageLayout } from '@/components/Layout/PageLayout'; import { PageLayout } from '@/components/Layout/PageLayout';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter'; import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { SeasonEditPopUp } from '@/components/popup/AlbumEditPopUp';
import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp'; import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp';
import { SeasonEditPopUp } from '@/components/popup/SeasonEditPopUp';
import { useActivePlaylistService } from '@/service/ActivePlaylist'; import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSeasonVideo, useSpecificSeason } from '@/service/Season'; import { useSeasonVideo, useSpecificSeason } from '@/service/Season';
import { useSpecificSeries } from '@/service/Series'; import { useSpecificSeries } from '@/service/Series';

27
front/src/scene/type/TypesDetailPage.tsx
View File

@ -1,7 +1,13 @@
import { Box, Button, Flex, HStack, Text } from '@chakra-ui/react'; import { Box, Button, Flex, HStack, Text } from '@chakra-ui/react';
import { LuDisc3 } from 'react-icons/lu'; import { LuDisc3 } from 'react-icons/lu';
import { MdEdit } from 'react-icons/md'; import { MdEdit } from 'react-icons/md';
import { Route, Routes, useNavigate, useParams } from 'react-router-dom'; import {
Navigate,
Route,
Routes,
useNavigate,
useParams,
} from 'react-router-dom';
import { Covers } from '@/components/Cover'; import { Covers } from '@/components/Cover';
import { EmptyEnd } from '@/components/EmptyEnd'; import { EmptyEnd } from '@/components/EmptyEnd';
@ -10,8 +16,8 @@ import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
//import { useMediasOfAType } from '@/service/Media'; //import { useMediasOfAType } from '@/service/Media';
import { DisplayMediaFull } from '@/components/media/DisplayMediaFull'; import { DisplayMediaFull } from '@/components/media/DisplayMediaFull';
import { TypeEditPopUp } from '@/components/popup/GenderEditPopUp';
import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp'; import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp';
import { TypeEditPopUp } from '@/components/popup/TypeEditPopUp';
import { DisplaySeries } from '@/components/series/DisplaySeries'; import { DisplaySeries } from '@/components/series/DisplaySeries';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorModeValue } from '@/components/ui/color-mode';
import { import {
@ -45,7 +51,7 @@ export const TypeDetailPage = () => {
playInList(currentPlay, listMediaId); playInList(currentPlay, listMediaId);
}; };
const onSelectSeriesItem = (seriesId: number) => { const onSelectSeriesItem = (seriesId: number) => {
navigate(`/type/${typeId}/series/${seriesId}`); navigate(`series/${seriesId}`);
}; };
console.log(`dataType = ${JSON.stringify(dataType, null, 2)}`); console.log(`dataType = ${JSON.stringify(dataType, null, 2)}`);
@ -64,7 +70,7 @@ export const TypeDetailPage = () => {
<TopBar title="Type detail"> <TopBar title="Type detail">
<Button <Button
{...BUTTON_TOP_BAR_PROPERTY} {...BUTTON_TOP_BAR_PROPERTY}
onClick={() => navigate(`/Type/${typeId}/edit-type/${typeId}`)} onClick={() => navigate(`edit-type/${typeId}`)}
> >
<MdEdit /> <MdEdit />
</Button> </Button>
@ -117,7 +123,7 @@ export const TypeDetailPage = () => {
// { // {
// name: 'Edit', // name: 'Edit',
// onClick: () => { // onClick: () => {
// navigate(`/Type/${TypeId}/edit-media/${data.id}`); // navigate(`/Type/${TypeId}/media/${data.id}/edit`);
// }, // },
// }, // },
// { name: 'Add Playlist', onClick: () => {} }, // { name: 'Add Playlist', onClick: () => {} },
@ -146,7 +152,7 @@ export const TypeDetailPage = () => {
{ {
name: 'Edit', name: 'Edit',
onClick: () => { onClick: () => {
navigate(`/Type/${typeId}/edit-media/${data.id}`); navigate(`edit-media/${data.id}`);
}, },
}, },
{ name: 'Add Playlist', onClick: () => {} }, { name: 'Add Playlist', onClick: () => {} },
@ -157,8 +163,13 @@ export const TypeDetailPage = () => {
<EmptyEnd /> <EmptyEnd />
</HStack> </HStack>
<Routes> <Routes>
<Route path="edit-media/:MediaId" element={<MediaEditPopUp />} /> <Route path="edit-media/:mediaId" element={<MediaEditPopUp />} />
<Route path="edit-type/:TypeId" element={<TypeEditPopUp />} /> <Route path="edit-type/:typeId" element={<TypeEditPopUp />} />
{/* This permit to correct the Path */}
<Route
path="*"
element={<Navigate to={`/type/${typeId}`} replace />}
/>
</Routes> </Routes>
</PageLayout> </PageLayout>
</> </>

6
front/src/scene/type/TypesPage.tsx
View File

@ -17,7 +17,7 @@ export const TypesPage = () => {
const { isLoading, dataTypes } = useOrderedTypes(filterTitle); const { isLoading, dataTypes } = useOrderedTypes(filterTitle);
const navigate = useNavigate(); const navigate = useNavigate();
const onSelectItem = (TypeId: number) => { const onSelectItem = (TypeId: number) => {
navigate(`/Type/${TypeId}`); navigate(`/type/${TypeId}`);
}; };
if (isLoading) { if (isLoading) {
@ -45,8 +45,8 @@ export const TypesPage = () => {
{dataTypes.map((data) => ( {dataTypes.map((data) => (
<Flex <Flex
align="flex-start" align="flex-start"
width={{ lg: "200px", base: "160px" }} width={{ lg: '200px', base: '160px' }}
height={{ lg: "280px", base: "200px" }} height={{ lg: '280px', base: '200px' }}
border="1px" border="1px"
borderColor="brand.900" borderColor="brand.900"
backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')} backgroundColor={useColorModeValue('#FFFFFF88', '#00000088')}

31
front/src/scene/type/TypesSeriesDetailPage.tsx
View File

@ -1,7 +1,13 @@
import { Box, Button, Flex, HStack, Text } from '@chakra-ui/react'; import { Box, Button, Flex, HStack, Text } from '@chakra-ui/react';
import { LuDisc3 } from 'react-icons/lu'; import { LuDisc3 } from 'react-icons/lu';
import { MdEdit } from 'react-icons/md'; import { MdEdit } from 'react-icons/md';
import { Route, Routes, useNavigate, useParams } from 'react-router-dom'; import {
Navigate,
Route,
Routes,
useNavigate,
useParams,
} from 'react-router-dom';
import { Covers } from '@/components/Cover'; import { Covers } from '@/components/Cover';
import { EmptyEnd } from '@/components/EmptyEnd'; import { EmptyEnd } from '@/components/EmptyEnd';
@ -10,8 +16,8 @@ import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
//import { useMediasOfAType } from '@/service/Media'; //import { useMediasOfAType } from '@/service/Media';
import { DisplayMediaFull } from '@/components/media/DisplayMediaFull'; import { DisplayMediaFull } from '@/components/media/DisplayMediaFull';
import { TypeEditPopUp } from '@/components/popup/GenderEditPopUp';
import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp'; import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp';
import { SeriesEditPopUp } from '@/components/popup/SeriesEditPopUp';
import { DisplaySeason } from '@/components/season/DisplaySeason'; import { DisplaySeason } from '@/components/season/DisplaySeason';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorModeValue } from '@/components/ui/color-mode';
import { import {
@ -68,11 +74,7 @@ export const TypesSeriesDetailPage = () => {
<TopBar title="Series detail"> <TopBar title="Series detail">
<Button <Button
{...BUTTON_TOP_BAR_PROPERTY} {...BUTTON_TOP_BAR_PROPERTY}
onClick={() => onClick={() => navigate(`edit-series/${seriesId}`)}
navigate(
`/Type/${typeId}/series/${seriesId}/edit-series/${seriesId}`
)
}
> >
<MdEdit /> <MdEdit />
</Button> </Button>
@ -129,7 +131,7 @@ export const TypesSeriesDetailPage = () => {
// { // {
// name: 'Edit', // name: 'Edit',
// onClick: () => { // onClick: () => {
// navigate(`/Type/${TypeId}/edit-media/${data.id}`); // navigate(`edit-media/${data.id}`);
// }, // },
// }, // },
// { name: 'Add Playlist', onClick: () => {} }, // { name: 'Add Playlist', onClick: () => {} },
@ -168,9 +170,7 @@ export const TypesSeriesDetailPage = () => {
{ {
name: 'Edit', name: 'Edit',
onClick: () => { onClick: () => {
navigate( navigate(`media/${data.id}/edit`);
`/type/${typeId}/series/${seriesId}/edit-media/${data.id}`
);
}, },
}, },
{ name: 'Add Playlist', onClick: () => {} }, { name: 'Add Playlist', onClick: () => {} },
@ -182,8 +182,15 @@ export const TypesSeriesDetailPage = () => {
</HStack> </HStack>
<Routes> <Routes>
<Route path="edit-media/:mediaId" element={<MediaEditPopUp />} /> <Route path="edit-media/:mediaId" element={<MediaEditPopUp />} />
<Route path="edit-type/:typeId" element={<TypeEditPopUp />} /> <Route path="edit-series/:seriesId" element={<SeriesEditPopUp />} />
{/* <Route path="edit-season/:seasonId" element={<TypeSeasonPopUp />} /> */} {/* <Route path="edit-season/:seasonId" element={<TypeSeasonPopUp />} /> */}
{/* This permit to correct the Path */}
<Route
path="*"
element={
<Navigate to={`/type/${typeId}/series/${seriesId}`} replace />
}
/>
</Routes> </Routes>
</PageLayout> </PageLayout>
</> </>

34
front/src/scene/type/TypesSeriesSeasonDetailPage.tsx
View File

@ -1,7 +1,13 @@
import { Box, Button, Flex, HStack, Text } from '@chakra-ui/react'; import { Box, Button, Flex, HStack, Text } from '@chakra-ui/react';
import { LuDisc3 } from 'react-icons/lu'; import { LuDisc3 } from 'react-icons/lu';
import { MdEdit } from 'react-icons/md'; import { MdEdit } from 'react-icons/md';
import { Route, Routes, useNavigate, useParams } from 'react-router-dom'; import {
Navigate,
Route,
Routes,
useNavigate,
useParams,
} from 'react-router-dom';
import { Covers } from '@/components/Cover'; import { Covers } from '@/components/Cover';
import { EmptyEnd } from '@/components/EmptyEnd'; import { EmptyEnd } from '@/components/EmptyEnd';
@ -9,8 +15,8 @@ import { PageLayout } from '@/components/Layout/PageLayout';
import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter'; import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter';
import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar';
import { DisplayMediaListFull } from '@/components/media/DisplayMediaListFull'; import { DisplayMediaListFull } from '@/components/media/DisplayMediaListFull';
import { TypeEditPopUp } from '@/components/popup/GenderEditPopUp';
import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp'; import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp';
import { SeasonEditPopUp } from '@/components/popup/SeasonEditPopUp';
import { useColorModeValue } from '@/components/ui/color-mode'; import { useColorModeValue } from '@/components/ui/color-mode';
import { import {
useActivePlaylistService, useActivePlaylistService,
@ -67,11 +73,7 @@ export const TypesSeriesSeasonDetailPage = () => {
<TopBar title="season detail"> <TopBar title="season detail">
<Button <Button
{...BUTTON_TOP_BAR_PROPERTY} {...BUTTON_TOP_BAR_PROPERTY}
onClick={() => onClick={() => navigate(`edit-season/${seasonId}`)}
navigate(
`/Type/${typeId}/series/${seriesId}/season/${seasonId}/edit-season/${seasonId}`
)
}
> >
<MdEdit /> <MdEdit />
</Button> </Button>
@ -130,9 +132,7 @@ export const TypesSeriesSeasonDetailPage = () => {
{ {
name: 'Edit', name: 'Edit',
onClick: () => { onClick: () => {
navigate( navigate(`edit-media/${data.id}`);
`/type/${typeId}/series/${seriesId}/season/${seasonId}/edit-media/${data.id}`
);
}, },
}, },
{ name: 'Add Playlist', onClick: () => {} }, { name: 'Add Playlist', onClick: () => {} },
@ -144,8 +144,18 @@ export const TypesSeriesSeasonDetailPage = () => {
</HStack> </HStack>
<Routes> <Routes>
<Route path="edit-media/:mediaId" element={<MediaEditPopUp />} /> <Route path="edit-media/:mediaId" element={<MediaEditPopUp />} />
<Route path="edit-type/:typeId" element={<TypeEditPopUp />} /> {/* <Route path="edit-type/:typeId" element={<TypeEditPopUp />} /> */}
{/* <Route path="edit-season/:seasonId" element={<TypeSeasonPopUp />} /> */} <Route path="edit-season/:seasonId" element={<SeasonEditPopUp />} />
{/* This permit to correct the Path */}
<Route
path="*"
element={
<Navigate
to={`/Type/${typeId}/series/${seriesId}/season/${seasonId}`}
replace
/>
}
/>
</Routes> </Routes>
</PageLayout> </PageLayout>
</> </>

12
front/src/service/Season.ts
View File

@ -6,6 +6,7 @@ import { SessionServiceProps } from '@/service/session';
import { DataStoreType, useDataStore } from '@/utils/data-store'; import { DataStoreType, useDataStore } from '@/utils/data-store';
import { DataTools, TypeCheck } from '@/utils/data-tools'; import { DataTools, TypeCheck } from '@/utils/data-tools';
import { isNullOrUndefined } from '@/utils/validator'; import { isNullOrUndefined } from '@/utils/validator';
import { useMediaService } from './Media'; import { useMediaService } from './Media';
export type SeasonServiceProps = { export type SeasonServiceProps = {
@ -41,6 +42,9 @@ export const useOrderedSeasons = (titleFilter?: string) => {
const { store } = useSeasonService(); const { store } = useSeasonService();
const dataSeasons = useMemo(() => { const dataSeasons = useMemo(() => {
let tmpData = store.data; let tmpData = store.data;
if (tmpData === undefined) {
return [];
}
if (!isNullOrUndefined(titleFilter)) { if (!isNullOrUndefined(titleFilter)) {
tmpData = DataTools.getNameLike(tmpData, titleFilter); tmpData = DataTools.getNameLike(tmpData, titleFilter);
} }
@ -66,7 +70,6 @@ export const useSpecificSeason = (id: number | undefined) => {
return { dataSeason }; return { dataSeason };
}; };
export const useSeasonVideo = (id?: number) => { export const useSeasonVideo = (id?: number) => {
const { store } = useSeasonService(); const { store } = useSeasonService();
const seasonVideo = useMemo(() => { const seasonVideo = useMemo(() => {
@ -94,16 +97,13 @@ export const useSeasonCountVideo = (seasonId?: number) => {
if (seasonId === undefined) { if (seasonId === undefined) {
return 0; return 0;
} }
return DataTools.count( return DataTools.count(store.data, [
store.data,
[
{ {
check: TypeCheck.EQUAL, check: TypeCheck.EQUAL,
key: 'seasonId', key: 'seasonId',
value: seasonId, value: seasonId,
}, },
] ]);
);
}, [store.data, seasonId]); }, [store.data, seasonId]);
return { isLoading: store.isLoading, seasonCountVideo }; return { isLoading: store.isLoading, seasonCountVideo };
}; };

2
front/src/service/Series.ts
View File

@ -43,7 +43,7 @@ export const useOrderedSeries = (nameFilter?: string) => {
const { store } = useSeriesService(); const { store } = useSeriesService();
const dataSeries = useMemo(() => { const dataSeries = useMemo(() => {
let tmpData = store.data; let tmpData = store.data;
if (tmpData == undefined) { if (tmpData === undefined) {
return []; return [];
} }
if (!isNullOrUndefined(nameFilter)) { if (!isNullOrUndefined(nameFilter)) {

3
front/src/service/Type.ts
View File

@ -42,6 +42,9 @@ export const useOrderedTypes = (titleFilter?: string) => {
const { store } = useTypeService(); const { store } = useTypeService();
const dataTypes = useMemo(() => { const dataTypes = useMemo(() => {
let tmpData = store.data; let tmpData = store.data;
if (tmpData === undefined) {
return [];
}
if (!isNullOrUndefined(titleFilter)) { if (!isNullOrUndefined(titleFilter)) {
tmpData = DataTools.getNameLike(tmpData, titleFilter); tmpData = DataTools.getNameLike(tmpData, titleFilter);
} }