From 77acd2060b48c9306a4b8f89716d3a1def848f13 Mon Sep 17 00:00:00 2001 From: Edouard DUPIN Date: Wed, 26 Feb 2025 15:45:51 +0100 Subject: [PATCH] [FEAT] set edition pop-up (not full fisished but operational --- front/src/components/popup/MediaEditPopUp.tsx | 65 ++++++++- ...AlbumEditPopUp.tsx => SeasonEditPopUp.tsx} | 123 +++++++++-------- ...rtistEditPopUp.tsx => SeriesEditPopUp.tsx} | 125 ++++++++---------- ...{GenderEditPopUp.tsx => TypeEditPopUp.tsx} | 123 ++++++++--------- front/src/scene/AppRoutes.tsx | 9 +- front/src/scene/onAir/OnAirPage.tsx | 2 +- front/src/scene/season/SeasonDetailPage.tsx | 2 +- .../src/scene/sso/series/SeriesDetailPage.tsx | 6 +- .../sso/series/SeriesSeasonDetailPage.tsx | 2 +- front/src/scene/type/TypesDetailPage.tsx | 27 ++-- front/src/scene/type/TypesPage.tsx | 6 +- .../src/scene/type/TypesSeriesDetailPage.tsx | 31 +++-- .../type/TypesSeriesSeasonDetailPage.tsx | 34 +++-- front/src/service/Season.ts | 22 +-- front/src/service/Series.ts | 2 +- front/src/service/Type.ts | 3 + 16 files changed, 331 insertions(+), 251 deletions(-) rename front/src/components/popup/{AlbumEditPopUp.tsx => SeasonEditPopUp.tsx} (76%) rename front/src/components/popup/{ArtistEditPopUp.tsx => SeriesEditPopUp.tsx} (75%) rename front/src/components/popup/{GenderEditPopUp.tsx => TypeEditPopUp.tsx} (76%) diff --git a/front/src/components/popup/MediaEditPopUp.tsx b/front/src/components/popup/MediaEditPopUp.tsx index 1ec99ad..171ceaf 100644 --- a/front/src/components/popup/MediaEditPopUp.tsx +++ b/front/src/components/popup/MediaEditPopUp.tsx @@ -25,6 +25,7 @@ import { useServiceContext } from '@/service/ServiceContext'; import { useOrderedTypes } from '@/service/Type'; import { isNullOrUndefined } from '@/utils/validator'; +import { FormCovers } from '../form/FormCovers'; import { Formidable, useFormidable } from '../formidable'; export type MediaEditPopUpProps = {}; @@ -43,7 +44,7 @@ export const MediaEditPopUp = ({}: MediaEditPopUpProps) => { const navigate = useNavigate(); const disclosure = useDisclosure(); const onClose = () => { - navigate('../../..', { relative: 'path' }); + navigate('../..', { relative: 'path' }); }; const onRemove = () => { 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 ( { Edit - + Admin @@ -136,6 +190,13 @@ export const MediaEditPopUp = ({}: MediaEditPopUpProps) => { min={0} max={1000} /> + {/* ---------------------- Other Tabs --------------------------- */} diff --git a/front/src/components/popup/AlbumEditPopUp.tsx b/front/src/components/popup/SeasonEditPopUp.tsx similarity index 76% rename from front/src/components/popup/AlbumEditPopUp.tsx rename to front/src/components/popup/SeasonEditPopUp.tsx index 9bc3afe..dbfa11b 100644 --- a/front/src/components/popup/AlbumEditPopUp.tsx +++ b/front/src/components/popup/SeasonEditPopUp.tsx @@ -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 { MdAdminPanelSettings, MdDeleteForever, @@ -22,7 +22,11 @@ import { DialogHeader, DialogRoot, } from '@/components/ui/dialog'; -import { useSeasonCountVideo, useSeasonService, useSpecificSeason } from '@/service/Season'; +import { + useSeasonCountVideo, + useSeasonService, + useSpecificSeason, +} from '@/service/Season'; import { useServiceContext } from '@/service/ServiceContext'; import { isNullOrUndefined } from '@/utils/validator'; @@ -32,30 +36,29 @@ import { Button } from '../ui/button'; export type SeasonEditPopUpProps = {}; export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => { - const { SeasonId } = useParams(); - const SeasonIdInt = isNullOrUndefined(SeasonId) + const { seasonId } = useParams(); + const seasonIdInt = isNullOrUndefined(seasonId) ? undefined - : parseInt(SeasonId, 10); + : parseInt(seasonId, 10); const { session } = useServiceContext(); - const { seasonCountVideo } = useSeasonCountVideo(SeasonIdInt); + const { seasonCountVideo } = useSeasonCountVideo(seasonIdInt); const { store } = useSeasonService(); - const { dataSeason } = useSpecificSeason(SeasonIdInt); - const [admin, setAdmin] = useState(false); + const { dataSeason } = useSpecificSeason(seasonIdInt); const navigate = useNavigate(); const disclosure = useDisclosure(); const onClose = () => { navigate('../../', { relative: 'path' }); }; const onRemove = () => { - if (isNullOrUndefined(SeasonIdInt)) { + if (isNullOrUndefined(seasonIdInt)) { return; } store.remove( - SeasonIdInt, + seasonIdInt, SeasonResource.remove({ restConfig: session.getRestConfig(), params: { - id: SeasonIdInt, + id: seasonIdInt, }, }) ); @@ -68,7 +71,7 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => { deltaConfig: { omit: ['covers'] }, }); const onSave = async (deltaData: SeasonWrite) => { - if (isNullOrUndefined(SeasonIdInt)) { + if (isNullOrUndefined(seasonIdInt)) { return; } console.log(`onSave = ${JSON.stringify(deltaData, null, 2)}`); @@ -77,17 +80,17 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => { restConfig: session.getRestConfig(), data: deltaData, params: { - id: SeasonIdInt, + id: seasonIdInt, }, }) ); }; const onUriSelected = (uri: string) => { - if (isNullOrUndefined(SeasonIdInt)) { + if (isNullOrUndefined(seasonIdInt)) { return; } - console.error("not implemented"); + console.error('not implemented'); // store.update( // SeasonResource.uploadCover({ // restConfig: session.getRestConfig(), @@ -105,7 +108,7 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => { files.forEach((element) => { console.log(`Select file: '${element.name}'`); }); - if (isNullOrUndefined(SeasonIdInt)) { + if (isNullOrUndefined(seasonIdInt)) { return; } store.update( @@ -115,7 +118,7 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => { file: files[0], }, params: { - id: SeasonIdInt, + id: seasonIdInt, }, }) ); @@ -124,14 +127,14 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => { if (isNullOrUndefined(dataSeason?.covers)) { return; } - if (isNullOrUndefined(SeasonIdInt)) { + if (isNullOrUndefined(seasonIdInt)) { return; } store.update( SeasonResource.removeCover({ restConfig: session.getRestConfig(), params: { - id: SeasonIdInt, + id: seasonIdInt, coverId: dataSeason.covers[index], }, }) @@ -152,8 +155,36 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => { {/* */} - {admin && ( - <> + + + + + Edit + + + + Admin + + + {/* ---------------------- Other Tabs --------------------------- */} + + + + + + {/* ---------------------- Other Tabs --------------------------- */} + {dataSeason?.id} @@ -161,8 +192,8 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => { - Can not remove Season {seasonCountVideo} Media(s) - depend on it. + Can not remove Season {seasonCountVideo} Media(s) depend + on it. )} @@ -183,50 +214,18 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => { confirmTitle="Remove" onConfirm={onRemove} /> - - )} - {!admin && ( - <> - - - - - - )} + + - - {!admin && form.isFormModified && ( - )} - diff --git a/front/src/components/popup/ArtistEditPopUp.tsx b/front/src/components/popup/SeriesEditPopUp.tsx similarity index 75% rename from front/src/components/popup/ArtistEditPopUp.tsx rename to front/src/components/popup/SeriesEditPopUp.tsx index 69cc314..05cd06f 100644 --- a/front/src/components/popup/ArtistEditPopUp.tsx +++ b/front/src/components/popup/SeriesEditPopUp.tsx @@ -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 { MdAdminPanelSettings, MdDeleteForever, @@ -21,41 +21,40 @@ import { DialogHeader, DialogRoot, } from '@/components/ui/dialog'; +import { useSeasonCountVideo } from '@/service'; import { useSeriesService, useSpecificSeries } from '@/service/Series'; import { useServiceContext } from '@/service/ServiceContext'; import { isNullOrUndefined } from '@/utils/validator'; -import { useSeasonCountVideo } from '@/service'; import { FormGroupShow } from '../form/FormGroup'; import { Formidable, useFormidable } from '../formidable'; export type SeriesEditPopUpProps = {}; export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => { - const { SeriesId } = useParams(); - const SeriesIdInt = isNullOrUndefined(SeriesId) + const { seriesId } = useParams(); + const seriesIdInt = isNullOrUndefined(seriesId) ? undefined - : parseInt(SeriesId, 10); + : parseInt(seriesId, 10); const { session } = useServiceContext(); - const { seasonCountVideo } = useSeasonCountVideo(SeriesIdInt); + const { seasonCountVideo } = useSeasonCountVideo(seriesIdInt); const { store } = useSeriesService(); - const { dataSeries } = useSpecificSeries(SeriesIdInt); - const [admin, setAdmin] = useState(false); + const { dataSeries } = useSpecificSeries(seriesIdInt); const navigate = useNavigate(); const disclosure = useDisclosure(); const onClose = () => { navigate('../../', { relative: 'path' }); }; const onRemove = () => { - if (isNullOrUndefined(SeriesIdInt)) { + if (isNullOrUndefined(seriesIdInt)) { return; } store.remove( - SeriesIdInt, + seriesIdInt, SeriesResource.remove({ restConfig: session.getRestConfig(), params: { - id: SeriesIdInt, + id: seriesIdInt, }, }) ); @@ -68,7 +67,7 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => { deltaConfig: { omit: ['covers'] }, }); const onSave = async (dataDelta: SeriesWrite) => { - if (isNullOrUndefined(SeriesIdInt)) { + if (isNullOrUndefined(seriesIdInt)) { return; } console.log(`onSave = ${JSON.stringify(dataDelta, null, 2)}`); @@ -77,17 +76,17 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => { restConfig: session.getRestConfig(), data: dataDelta, params: { - id: SeriesIdInt, + id: seriesIdInt, }, }) ); }; const onUriSelected = (uri: string) => { - if (isNullOrUndefined(SeriesIdInt)) { + if (isNullOrUndefined(seriesIdInt)) { return; } - console.error("Not implemented"); + console.error('Not implemented'); // store.update( // SeriesResource.uploadCover({ // restConfig: session.getRestConfig(), @@ -104,7 +103,7 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => { files.forEach((element) => { console.log(`Select file: '${element.name}'`); }); - if (isNullOrUndefined(SeriesIdInt)) { + if (isNullOrUndefined(seriesIdInt)) { return; } store.update( @@ -114,7 +113,7 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => { file: files[0], }, params: { - id: SeriesIdInt, + id: seriesIdInt, }, }) ); @@ -123,14 +122,14 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => { if (isNullOrUndefined(dataSeries?.covers)) { return; } - if (isNullOrUndefined(SeriesIdInt)) { + if (isNullOrUndefined(seriesIdInt)) { return; } store.update( SeriesResource.removeCover({ restConfig: session.getRestConfig(), params: { - id: SeriesIdInt, + id: seriesIdInt, coverId: dataSeries.covers[index], }, }) @@ -152,8 +151,36 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => { {/* */} - {admin && ( - <> + + + + + Edit + + + + Admin + + + {/* ---------------------- Other Tabs --------------------------- */} + + + + + + {/* ---------------------- Other Tabs --------------------------- */} + {dataSeries?.id} @@ -161,8 +188,8 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => { - Can not remove Series {seasonCountVideo} Media(s) - depend on it. + Can not remove Series {seasonCountVideo} Media(s) depend + on it. )} @@ -173,7 +200,7 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => { colorPalette="@danger" disabled={seasonCountVideo !== 0} > - Remove Media + Remove Series (not check) { confirmTitle="Remove" onConfirm={onRemove} /> - - )} - {!admin && ( - <> - - - - - - - - - )} + + - - {!admin && form.isFormModified && ( - )} - diff --git a/front/src/components/popup/GenderEditPopUp.tsx b/front/src/components/popup/TypeEditPopUp.tsx similarity index 76% rename from front/src/components/popup/GenderEditPopUp.tsx rename to front/src/components/popup/TypeEditPopUp.tsx index b1738a1..1499ac1 100644 --- a/front/src/components/popup/GenderEditPopUp.tsx +++ b/front/src/components/popup/TypeEditPopUp.tsx @@ -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 { MdAdminPanelSettings, MdDeleteForever, @@ -21,7 +21,12 @@ import { DialogHeader, DialogRoot, } from '@/components/ui/dialog'; -import { useServiceContext, useSpecificType, useTypeCountVideo, useTypeService } from '@/service'; +import { + useServiceContext, + useSpecificType, + useTypeCountVideo, + useTypeService, +} from '@/service'; import { isNullOrUndefined } from '@/utils/validator'; import { FormGroupShow } from '../form/FormGroup'; @@ -30,30 +35,29 @@ import { Formidable, useFormidable } from '../formidable'; export type TypeEditPopUpProps = {}; export const TypeEditPopUp = ({}: TypeEditPopUpProps) => { - const { TypeId } = useParams(); - const TypeIdInt = isNullOrUndefined(TypeId) + const { typeId } = useParams(); + const typeIdInt = isNullOrUndefined(typeId) ? undefined - : parseInt(TypeId, 10); + : parseInt(typeId, 10); const { session } = useServiceContext(); - const { countVideoWithType } = useTypeCountVideo(TypeIdInt); + const { countVideoWithType } = useTypeCountVideo(typeIdInt); const { store } = useTypeService(); - const { dataType } = useSpecificType(TypeIdInt); - const [admin, setAdmin] = useState(false); + const { dataType } = useSpecificType(typeIdInt); const navigate = useNavigate(); const disclosure = useDisclosure(); const onClose = () => { navigate('../../', { relative: 'path' }); }; const onRemove = () => { - if (isNullOrUndefined(TypeIdInt)) { + if (isNullOrUndefined(typeIdInt)) { return; } store.remove( - TypeIdInt, + typeIdInt, TypeResource.remove({ restConfig: session.getRestConfig(), params: { - id: TypeIdInt, + id: typeIdInt, }, }) ); @@ -66,7 +70,7 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => { deltaConfig: { omit: ['covers'] }, }); const onSave = async (dataDelta: TypeWrite) => { - if (isNullOrUndefined(TypeIdInt)) { + if (isNullOrUndefined(typeIdInt)) { return; } console.log(`onSave = ${JSON.stringify(dataDelta, null, 2)}`); @@ -75,16 +79,16 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => { restConfig: session.getRestConfig(), data: dataDelta, params: { - id: TypeIdInt, + id: typeIdInt, }, }) ); }; const onUriSelected = (uri: string) => { - if (isNullOrUndefined(TypeIdInt)) { + if (isNullOrUndefined(typeIdInt)) { return; } - console.error("Not implemented"); + console.error('Not implemented'); // store.update( // TypeResource.uploadCover({ // restConfig: session.getRestConfig(), @@ -101,7 +105,7 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => { files.forEach((element) => { console.log(`Select file: '${element.name}'`); }); - if (isNullOrUndefined(TypeIdInt)) { + if (isNullOrUndefined(typeIdInt)) { return; } store.update( @@ -111,7 +115,7 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => { file: files[0], }, params: { - id: TypeIdInt, + id: typeIdInt, }, }) ); @@ -120,14 +124,14 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => { if (isNullOrUndefined(dataType?.covers)) { return; } - if (isNullOrUndefined(TypeIdInt)) { + if (isNullOrUndefined(typeIdInt)) { return; } store.update( TypeResource.removeCover({ restConfig: session.getRestConfig(), params: { - id: TypeIdInt, + id: typeIdInt, coverId: dataType.covers[index], }, }) @@ -149,8 +153,36 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => { {/* */} - {admin && ( - <> + + + + + Edit + + + + Admin + + + {/* ---------------------- Other Tabs --------------------------- */} + + + + + + {/* ---------------------- Other Tabs --------------------------- */} + {dataType?.id} @@ -158,8 +190,8 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => { - Can not remove Type {countVideoWithType} Media(s) - depend on it. + Can not remove Type {countVideoWithType} Media(s) depend + on it. )} @@ -180,49 +212,18 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => { confirmTitle="Remove" onConfirm={onRemove} /> - - )} - {!admin && ( - <> - - - - - )} + + - - {!admin && form.isFormModified && ( - )} - diff --git a/front/src/scene/AppRoutes.tsx b/front/src/scene/AppRoutes.tsx index 2a8daba..8bf29e5 100644 --- a/front/src/scene/AppRoutes.tsx +++ b/front/src/scene/AppRoutes.tsx @@ -39,13 +39,12 @@ export const AppRoutes = () => { } /> } /> } /> - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> } /> - ) : ( } /> )} diff --git a/front/src/scene/onAir/OnAirPage.tsx b/front/src/scene/onAir/OnAirPage.tsx index 066caf7..b25a8a3 100644 --- a/front/src/scene/onAir/OnAirPage.tsx +++ b/front/src/scene/onAir/OnAirPage.tsx @@ -13,8 +13,8 @@ import { PageLayout } from '@/components/Layout/PageLayout'; import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { DisplayMediaFullId } from '@/components/media/DisplayMediaFullId'; -import { SeasonEditPopUp } from '@/components/popup/AlbumEditPopUp'; import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp'; +import { SeasonEditPopUp } from '@/components/popup/SeasonEditPopUp'; import { Button } from '@/components/ui/button'; import { useColorModeValue } from '@/components/ui/color-mode'; import { BASE_WRAP_SPACING } from '@/constants/genericSpacing'; diff --git a/front/src/scene/season/SeasonDetailPage.tsx b/front/src/scene/season/SeasonDetailPage.tsx index 930e369..925c50a 100644 --- a/front/src/scene/season/SeasonDetailPage.tsx +++ b/front/src/scene/season/SeasonDetailPage.tsx @@ -8,8 +8,8 @@ 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 { SeasonEditPopUp } from '@/components/popup/AlbumEditPopUp'; import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp'; +import { SeasonEditPopUp } from '@/components/popup/SeasonEditPopUp'; import { useColorModeValue } from '@/components/ui/color-mode'; import { BASE_WRAP_SPACING } from '@/constants/genericSpacing'; import { diff --git a/front/src/scene/sso/series/SeriesDetailPage.tsx b/front/src/scene/sso/series/SeriesDetailPage.tsx index b909f6f..35c80e1 100644 --- a/front/src/scene/sso/series/SeriesDetailPage.tsx +++ b/front/src/scene/sso/series/SeriesDetailPage.tsx @@ -7,11 +7,9 @@ import { Covers } from '@/components/Cover'; import { EmptyEnd } from '@/components/EmptyEnd'; import { PageLayout } from '@/components/Layout/PageLayout'; import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter'; -import { SeriesEditPopUp } from '@/components/popup/ArtistEditPopUp'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; -import { - BASE_WRAP_SPACING -} from '@/constants/genericSpacing'; +import { SeriesEditPopUp } from '@/components/popup/SeriesEditPopUp'; +import { BASE_WRAP_SPACING } from '@/constants/genericSpacing'; import { useSpecificSeries } from '@/service'; export const SeriesDetailPage = () => { diff --git a/front/src/scene/sso/series/SeriesSeasonDetailPage.tsx b/front/src/scene/sso/series/SeriesSeasonDetailPage.tsx index 9be8cf4..8f5e7f1 100644 --- a/front/src/scene/sso/series/SeriesSeasonDetailPage.tsx +++ b/front/src/scene/sso/series/SeriesSeasonDetailPage.tsx @@ -8,8 +8,8 @@ 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 { SeasonEditPopUp } from '@/components/popup/AlbumEditPopUp'; import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp'; +import { SeasonEditPopUp } from '@/components/popup/SeasonEditPopUp'; import { useActivePlaylistService } from '@/service/ActivePlaylist'; import { useSeasonVideo, useSpecificSeason } from '@/service/Season'; import { useSpecificSeries } from '@/service/Series'; diff --git a/front/src/scene/type/TypesDetailPage.tsx b/front/src/scene/type/TypesDetailPage.tsx index a9ccfef..723a2e4 100644 --- a/front/src/scene/type/TypesDetailPage.tsx +++ b/front/src/scene/type/TypesDetailPage.tsx @@ -1,7 +1,13 @@ import { Box, Button, Flex, HStack, 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'; +import { + Navigate, + Route, + Routes, + useNavigate, + useParams, +} from 'react-router-dom'; import { Covers } from '@/components/Cover'; 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 { useMediasOfAType } from '@/service/Media'; import { DisplayMediaFull } from '@/components/media/DisplayMediaFull'; -import { TypeEditPopUp } from '@/components/popup/GenderEditPopUp'; import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp'; +import { TypeEditPopUp } from '@/components/popup/TypeEditPopUp'; import { DisplaySeries } from '@/components/series/DisplaySeries'; import { useColorModeValue } from '@/components/ui/color-mode'; import { @@ -45,7 +51,7 @@ export const TypeDetailPage = () => { playInList(currentPlay, listMediaId); }; const onSelectSeriesItem = (seriesId: number) => { - navigate(`/type/${typeId}/series/${seriesId}`); + navigate(`series/${seriesId}`); }; console.log(`dataType = ${JSON.stringify(dataType, null, 2)}`); @@ -64,7 +70,7 @@ export const TypeDetailPage = () => { @@ -117,7 +123,7 @@ export const TypeDetailPage = () => { // { // name: 'Edit', // onClick: () => { - // navigate(`/Type/${TypeId}/edit-media/${data.id}`); + // navigate(`/Type/${TypeId}/media/${data.id}/edit`); // }, // }, // { name: 'Add Playlist', onClick: () => {} }, @@ -146,7 +152,7 @@ export const TypeDetailPage = () => { { name: 'Edit', onClick: () => { - navigate(`/Type/${typeId}/edit-media/${data.id}`); + navigate(`edit-media/${data.id}`); }, }, { name: 'Add Playlist', onClick: () => {} }, @@ -157,8 +163,13 @@ export const TypeDetailPage = () => { - } /> - } /> + } /> + } /> + {/* This permit to correct the Path */} + } + /> diff --git a/front/src/scene/type/TypesPage.tsx b/front/src/scene/type/TypesPage.tsx index 30f91a7..44b0482 100644 --- a/front/src/scene/type/TypesPage.tsx +++ b/front/src/scene/type/TypesPage.tsx @@ -17,7 +17,7 @@ export const TypesPage = () => { const { isLoading, dataTypes } = useOrderedTypes(filterTitle); const navigate = useNavigate(); const onSelectItem = (TypeId: number) => { - navigate(`/Type/${TypeId}`); + navigate(`/type/${TypeId}`); }; if (isLoading) { @@ -45,8 +45,8 @@ export const TypesPage = () => { {dataTypes.map((data) => ( { @@ -129,7 +131,7 @@ export const TypesSeriesDetailPage = () => { // { // name: 'Edit', // onClick: () => { - // navigate(`/Type/${TypeId}/edit-media/${data.id}`); + // navigate(`edit-media/${data.id}`); // }, // }, // { name: 'Add Playlist', onClick: () => {} }, @@ -168,9 +170,7 @@ export const TypesSeriesDetailPage = () => { { name: 'Edit', onClick: () => { - navigate( - `/type/${typeId}/series/${seriesId}/edit-media/${data.id}` - ); + navigate(`media/${data.id}/edit`); }, }, { name: 'Add Playlist', onClick: () => {} }, @@ -182,8 +182,15 @@ export const TypesSeriesDetailPage = () => { } /> - } /> + } /> {/* } /> */} + {/* This permit to correct the Path */} + + } + /> diff --git a/front/src/scene/type/TypesSeriesSeasonDetailPage.tsx b/front/src/scene/type/TypesSeriesSeasonDetailPage.tsx index 0e546e5..4105d25 100644 --- a/front/src/scene/type/TypesSeriesSeasonDetailPage.tsx +++ b/front/src/scene/type/TypesSeriesSeasonDetailPage.tsx @@ -1,7 +1,13 @@ import { Box, Button, Flex, HStack, 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'; +import { + Navigate, + Route, + Routes, + useNavigate, + useParams, +} from 'react-router-dom'; import { Covers } from '@/components/Cover'; import { EmptyEnd } from '@/components/EmptyEnd'; @@ -9,8 +15,8 @@ import { PageLayout } from '@/components/Layout/PageLayout'; import { PageLayoutInfoCenter } from '@/components/Layout/PageLayoutInfoCenter'; import { BUTTON_TOP_BAR_PROPERTY, TopBar } from '@/components/TopBar/TopBar'; import { DisplayMediaListFull } from '@/components/media/DisplayMediaListFull'; -import { TypeEditPopUp } from '@/components/popup/GenderEditPopUp'; import { MediaEditPopUp } from '@/components/popup/MediaEditPopUp'; +import { SeasonEditPopUp } from '@/components/popup/SeasonEditPopUp'; import { useColorModeValue } from '@/components/ui/color-mode'; import { useActivePlaylistService, @@ -67,11 +73,7 @@ export const TypesSeriesSeasonDetailPage = () => { @@ -130,9 +132,7 @@ export const TypesSeriesSeasonDetailPage = () => { { name: 'Edit', onClick: () => { - navigate( - `/type/${typeId}/series/${seriesId}/season/${seasonId}/edit-media/${data.id}` - ); + navigate(`edit-media/${data.id}`); }, }, { name: 'Add Playlist', onClick: () => {} }, @@ -144,8 +144,18 @@ export const TypesSeriesSeasonDetailPage = () => { } /> - } /> - {/* } /> */} + {/* } /> */} + } /> + {/* This permit to correct the Path */} + + } + /> diff --git a/front/src/service/Season.ts b/front/src/service/Season.ts index f36a0c8..2c86fe4 100644 --- a/front/src/service/Season.ts +++ b/front/src/service/Season.ts @@ -6,6 +6,7 @@ import { SessionServiceProps } from '@/service/session'; import { DataStoreType, useDataStore } from '@/utils/data-store'; import { DataTools, TypeCheck } from '@/utils/data-tools'; import { isNullOrUndefined } from '@/utils/validator'; + import { useMediaService } from './Media'; export type SeasonServiceProps = { @@ -41,6 +42,9 @@ export const useOrderedSeasons = (titleFilter?: string) => { const { store } = useSeasonService(); const dataSeasons = useMemo(() => { let tmpData = store.data; + if (tmpData === undefined) { + return []; + } if (!isNullOrUndefined(titleFilter)) { tmpData = DataTools.getNameLike(tmpData, titleFilter); } @@ -66,7 +70,6 @@ export const useSpecificSeason = (id: number | undefined) => { return { dataSeason }; }; - export const useSeasonVideo = (id?: number) => { const { store } = useSeasonService(); const seasonVideo = useMemo(() => { @@ -94,16 +97,13 @@ export const useSeasonCountVideo = (seasonId?: number) => { if (seasonId === undefined) { return 0; } - return DataTools.count( - store.data, - [ - { - check: TypeCheck.EQUAL, - key: 'seasonId', - value: seasonId, - }, - ] - ); + return DataTools.count(store.data, [ + { + check: TypeCheck.EQUAL, + key: 'seasonId', + value: seasonId, + }, + ]); }, [store.data, seasonId]); return { isLoading: store.isLoading, seasonCountVideo }; }; diff --git a/front/src/service/Series.ts b/front/src/service/Series.ts index d3db21d..326dc5b 100644 --- a/front/src/service/Series.ts +++ b/front/src/service/Series.ts @@ -43,7 +43,7 @@ export const useOrderedSeries = (nameFilter?: string) => { const { store } = useSeriesService(); const dataSeries = useMemo(() => { let tmpData = store.data; - if (tmpData == undefined) { + if (tmpData === undefined) { return []; } if (!isNullOrUndefined(nameFilter)) { diff --git a/front/src/service/Type.ts b/front/src/service/Type.ts index 9c9e4a0..46fe200 100644 --- a/front/src/service/Type.ts +++ b/front/src/service/Type.ts @@ -42,6 +42,9 @@ export const useOrderedTypes = (titleFilter?: string) => { const { store } = useTypeService(); const dataTypes = useMemo(() => { let tmpData = store.data; + if (tmpData === undefined) { + return []; + } if (!isNullOrUndefined(titleFilter)) { tmpData = DataTools.getNameLike(tmpData, titleFilter); }