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 { 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 (
<DialogRoot
//initialFocusRef={initialRef}
@ -103,7 +157,7 @@ export const MediaEditPopUp = ({}: MediaEditPopUpProps) => {
<MdEdit />
Edit
</Tabs.Trigger>
<Tabs.Trigger value="admin">
<Tabs.Trigger value="admin" colorPalette="@danger">
<MdAdminPanelSettings />
Admin
</Tabs.Trigger>
@ -136,6 +190,13 @@ export const MediaEditPopUp = ({}: MediaEditPopUpProps) => {
min={0}
max={1000}
/>
<FormCovers
name="covers"
label="Covers"
onFilesSelected={onFilesSelected}
onUriSelected={onUriSelected}
onRemove={onRemoveCover}
/>
</Tabs.Content>
{/* ---------------------- Other Tabs --------------------------- */}
<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 {
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) => {
{/* <DialogCloseButton ref={finalRef} /> */}
<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">
<Text>{dataSeason?.id}</Text>
</FormGroupShow>
@ -161,8 +192,8 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => {
<Flex paddingLeft="14px">
<MdWarning color="red.600" />
<Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove Season {seasonCountVideo} Media(s)
depend on it.
Can not remove Season {seasonCountVideo} Media(s) depend
on it.
</Text>
</Flex>
)}
@ -183,50 +214,18 @@ export const SeasonEditPopUp = ({}: SeasonEditPopUpProps) => {
confirmTitle="Remove"
onConfirm={onRemove}
/>
</>
)}
{!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}
/>
</>
)}
</Tabs.Content>
</Tabs.Root>
</DialogBody>
<DialogFooter>
<Button
onClick={() => setAdmin((value) => !value)}
marginRight="auto"
>
{admin ? (
<>
<MdEdit />
Edit
</>
) : (
<>
<MdAdminPanelSettings />
Admin
</>
)}
<Button onClick={onClose} marginRight="auto">
Cancel
</Button>
{!admin && form.isFormModified && (
<Button colorScheme="blue" mr={3} type="submit">
{form.isFormModified && (
<Button colorPalette="blue" type="submit">
Save
</Button>
)}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter>
</Formidable.From>
</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 {
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) => {
{/* <DialogCloseButton ref={finalRef} /> */}
<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">
<Text>{dataSeries?.id}</Text>
</FormGroupShow>
@ -161,8 +188,8 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
<Flex paddingLeft="14px">
<MdWarning color="red.600" />
<Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove Series {seasonCountVideo} Media(s)
depend on it.
Can not remove Series {seasonCountVideo} Media(s) depend
on it.
</Text>
</Flex>
)}
@ -173,7 +200,7 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
colorPalette="@danger"
disabled={seasonCountVideo !== 0}
>
<MdDeleteForever /> Remove Media
<MdDeleteForever /> Remove Series (not check)
</Button>
</FormGroupShow>
<ConfirmPopUp
@ -183,54 +210,18 @@ export const SeriesEditPopUp = ({}: SeriesEditPopUpProps) => {
confirmTitle="Remove"
onConfirm={onRemove}
/>
</>
)}
{!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}
/>
</>
)}
</Tabs.Content>
</Tabs.Root>
</DialogBody>
<DialogFooter>
<Button
onClick={() => setAdmin((value) => !value)}
marginRight="auto"
colorPalette={admin ? undefined : '@danger'}
>
{admin ? (
<>
<MdEdit />
Edit
</>
) : (
<>
<MdAdminPanelSettings />
Admin
</>
)}
<Button onClick={onClose} marginRight="auto">
Cancel
</Button>
{!admin && form.isFormModified && (
<Button colorScheme="blue" mr={3} type="submit">
{form.isFormModified && (
<Button colorPalette="blue" type="submit">
Save
</Button>
)}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter>
</Formidable.From>
</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 {
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) => {
{/* <DialogCloseButton ref={finalRef} /> */}
<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">
<Text>{dataType?.id}</Text>
</FormGroupShow>
@ -158,8 +190,8 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => {
<Flex paddingLeft="14px">
<MdWarning color="red.600" />
<Text paddingLeft="6px" color="red.600" fontWeight="bold">
Can not remove Type {countVideoWithType} Media(s)
depend on it.
Can not remove Type {countVideoWithType} Media(s) depend
on it.
</Text>
</Flex>
)}
@ -180,49 +212,18 @@ export const TypeEditPopUp = ({}: TypeEditPopUpProps) => {
confirmTitle="Remove"
onConfirm={onRemove}
/>
</>
)}
{!admin && (
<>
<FormInput
name="name"
isRequired
label="Type name"
ref={initialRef}
/>
<FormTextarea name="description" label="Description" />
<FormCovers
name="covers"
onFilesSelected={onFilesSelected}
onUriSelected={onUriSelected}
onRemove={onRemoveCover}
/>
</>
)}
</Tabs.Content>
</Tabs.Root>
</DialogBody>
<DialogFooter>
<Button
onClick={() => setAdmin((value) => !value)}
marginRight="auto"
>
{admin ? (
<>
<MdEdit />
Edit
</>
) : (
<>
<MdAdminPanelSettings />
Admin
</>
)}
<Button onClick={onClose} marginRight="auto">
Cancel
</Button>
{!admin && form.isFormModified && (
<Button colorScheme="blue" mr={3} type="submit">
{form.isFormModified && (
<Button colorPalette="blue" type="submit">
Save
</Button>
)}
<Button onClick={onClose}>Cancel</Button>
</DialogFooter>
</Formidable.From>
</DialogContent>

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

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

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 { 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 {

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 { 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 = () => {

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 { 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';

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

@ -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 = () => {
<TopBar title="Type detail">
<Button
{...BUTTON_TOP_BAR_PROPERTY}
onClick={() => navigate(`/Type/${typeId}/edit-type/${typeId}`)}
onClick={() => navigate(`edit-type/${typeId}`)}
>
<MdEdit />
</Button>
@ -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 = () => {
<EmptyEnd />
</HStack>
<Routes>
<Route path="edit-media/:MediaId" element={<MediaEditPopUp />} />
<Route path="edit-type/:TypeId" element={<TypeEditPopUp />} />
<Route path="edit-media/:mediaId" element={<MediaEditPopUp />} />
<Route path="edit-type/:typeId" element={<TypeEditPopUp />} />
{/* This permit to correct the Path */}
<Route
path="*"
element={<Navigate to={`/type/${typeId}`} replace />}
/>
</Routes>
</PageLayout>
</>

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

@ -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) => (
<Flex
align="flex-start"
width={{ lg: "200px", base: "160px" }}
height={{ lg: "280px", base: "200px" }}
width={{ lg: '200px', base: '160px' }}
height={{ lg: '280px', base: '200px' }}
border="1px"
borderColor="brand.900"
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 { 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 { SeriesEditPopUp } from '@/components/popup/SeriesEditPopUp';
import { DisplaySeason } from '@/components/season/DisplaySeason';
import { useColorModeValue } from '@/components/ui/color-mode';
import {
@ -68,11 +74,7 @@ export const TypesSeriesDetailPage = () => {
<TopBar title="Series detail">
<Button
{...BUTTON_TOP_BAR_PROPERTY}
onClick={() =>
navigate(
`/Type/${typeId}/series/${seriesId}/edit-series/${seriesId}`
)
}
onClick={() => navigate(`edit-series/${seriesId}`)}
>
<MdEdit />
</Button>
@ -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 = () => {
</HStack>
<Routes>
<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 />} /> */}
{/* This permit to correct the Path */}
<Route
path="*"
element={
<Navigate to={`/type/${typeId}/series/${seriesId}`} replace />
}
/>
</Routes>
</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 { 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 = () => {
<TopBar title="season detail">
<Button
{...BUTTON_TOP_BAR_PROPERTY}
onClick={() =>
navigate(
`/Type/${typeId}/series/${seriesId}/season/${seasonId}/edit-season/${seasonId}`
)
}
onClick={() => navigate(`edit-season/${seasonId}`)}
>
<MdEdit />
</Button>
@ -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 = () => {
</HStack>
<Routes>
<Route path="edit-media/:mediaId" element={<MediaEditPopUp />} />
<Route path="edit-type/:typeId" element={<TypeEditPopUp />} />
{/* <Route path="edit-season/:seasonId" element={<TypeSeasonPopUp />} /> */}
{/* <Route path="edit-type/:typeId" element={<TypeEditPopUp />} /> */}
<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>
</PageLayout>
</>

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

@ -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 };
};

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

@ -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)) {

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

@ -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);
}