natgitadm/ERitors-Scribe-Desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove CharacterComponent and CharacterDetail components

Browse Source 
- Deleted `CharacterComponent` and `CharacterDetail` files from the project.
- Refactored related logic to improve code maintainability and reduce redundancy.
This commit is contained in:
natreex
2026-02-05 14:12:08 -05:00
parent cec5830360
commit 209dc6f85a
133 changed files with 17673 additions and 3110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

437
components/book/settings/locations/LocationComponent.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import {faMapMarkerAlt, faPlus, faToggleOn, faTrash} from '@fortawesome/free-solid-svg-icons';
import {faMapMarkerAlt, faPlus, faShare, faToggleOn, faTrash} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
import React, {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
import {SessionContext} from "@/context/SessionContext";
import {AlertContext} from "@/context/AlertContext";
import {BookContext} from "@/context/BookContext";
@@ -15,7 +15,12 @@ import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
import {SyncedBook} from "@/lib/models/SyncedBook";
import {SeriesContext, SeriesContextProps} from "@/context/SeriesContext";
import {SeriesSyncContext, SeriesSyncContextProps} from "@/context/SeriesSyncContext";
import {SyncedSeries} from "@/lib/models/SyncedSeries";
import ToggleSwitch from "@/components/form/ToggleSwitch";
import {SeriesLocationElement, SeriesLocationItem, SeriesLocationSubElement} from "@/lib/models/Series";
import SeriesImportSelector from "@/components/form/SeriesImportSelector";
interface SubElement {
id: string;
@@ -34,6 +39,7 @@ interface LocationProps {
id: string;
name: string;
elements: Element[];
seriesLocationId?: string | null;
}
interface LocationListResponse {
@@ -41,7 +47,14 @@ interface LocationListResponse {
enabled: boolean;
}
export function LocationComponent({showToggle = true}: {showToggle?: boolean}, ref: any) {
interface LocationComponentProps {
showToggle?: boolean;
entityType?: 'book' | 'series';
entityId?: string;
}
export function LocationComponent(props: LocationComponentProps, ref: React.Ref<{ handleSave: () => Promise<void> }>) {
const {showToggle = true, entityType = 'book', entityId} = props;
const t = useTranslations();
const {lang} = useContext<LangContextProps>(LangContext);
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
@@ -50,44 +63,77 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
const {session} = useContext(SessionContext);
const {successMessage, errorMessage} = useContext(AlertContext);
const {book, setBook} = useContext(BookContext);
const {seriesId, localSeries} = useContext<SeriesContextProps>(SeriesContext);
const {localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
const bookId: string | undefined = book?.bookId;
const currentEntityId: string = entityId || book?.bookId || '';
const isSeriesMode: boolean = entityType === 'series';
const token: string = session.accessToken;
const [sections, setSections] = useState<LocationProps[]>([]);
const [seriesLocations, setSeriesLocations] = useState<SeriesLocationItem[]>([]);
const [newSectionName, setNewSectionName] = useState<string>('');
const [newElementNames, setNewElementNames] = useState<{ [key: string]: string }>({});
const [newSubElementNames, setNewSubElementNames] = useState<{ [key: string]: string }>({});
const [toolEnabled, setToolEnabled] = useState<boolean>(book?.tools?.locations ?? false);
const [toolEnabled, setToolEnabled] = useState<boolean>(isSeriesMode ? true : (book?.tools?.locations ?? false));
const bookSeriesId: string | null = book?.seriesId || null;
useImperativeHandle(ref, function () {
return {
handleSave: handleSave,
};
});
useEffect((): void => {
getAllLocations().then();
}, []);
if (currentEntityId) {
getAllLocations().then();
}
}, [currentEntityId]);
useEffect((): void => {
if (bookSeriesId && !isSeriesMode) {
getSeriesLocations().then();
}
}, [bookSeriesId]);
async function getSeriesLocations(): Promise<void> {
if (!bookSeriesId) return;
try {
const response: SeriesLocationItem[] = await System.authGetQueryToServer<SeriesLocationItem[]>(
'series/location/list',
token,
lang,
{seriesid: bookSeriesId}
);
if (response) {
setSeriesLocations(response);
}
} catch (e: unknown) {
if (e instanceof Error) {
console.error('Error loading series locations:', e.message);
}
}
}
async function handleToggleTool(enabled: boolean): Promise<void> {
if (isSeriesMode) return;
try {
let response: boolean;
if (isCurrentlyOffline() || book?.localBook) {
response = await window.electron.invoke<boolean>('db:book:tool:update', {
bookId: bookId,
bookId: currentEntityId,
toolName: 'locations',
enabled: enabled
});
} else {
response = await System.authPatchToServer<boolean>('book/tool-setting', {
bookId: bookId,
bookId: currentEntityId,
toolName: 'locations',
enabled: enabled
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('db:book:tool:update', {
bookId: bookId,
bookId: currentEntityId,
toolName: 'locations',
enabled: enabled
});
@@ -95,12 +141,14 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
}
if (response && setBook && book) {
setToolEnabled(enabled);
setBook({...book, tools: {
characters: book.tools?.characters ?? false,
worlds: book.tools?.worlds ?? false,
spells: book.tools?.spells ?? false,
locations: enabled
}});
setBook({
...book, tools: {
characters: book.tools?.characters ?? false,
worlds: book.tools?.worlds ?? false,
spells: book.tools?.spells ?? false,
locations: enabled
}
});
}
} catch (e: unknown) {
if (e instanceof Error) {
@@ -111,28 +159,61 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
async function getAllLocations(): Promise<void> {
try {
let response: LocationListResponse;
if (isCurrentlyOffline()) {
response = await window.electron.invoke<LocationListResponse>('db:location:all', {bookid: bookId});
} else {
if (book?.localBook) {
response = await window.electron.invoke<LocationListResponse>('db:location:all', {bookid: bookId});
if (isSeriesMode) {
let response: SeriesLocationItem[];
if (isCurrentlyOffline() || localSeries) {
response = await window.electron.invoke<SeriesLocationItem[]>('db:series:location:list', {seriesId: currentEntityId});
} else {
response = await System.authGetQueryToServer<LocationListResponse>(`location/all`, token, lang, {
bookid: bookId,
});
response = await System.authGetQueryToServer<SeriesLocationItem[]>(
'series/location/list',
token,
lang,
{seriesid: currentEntityId}
);
}
}
if (response) {
setSections(response.locations);
setToolEnabled(response.enabled);
if (setBook && book) {
setBook({...book, tools: {
characters: book.tools?.characters ?? false,
worlds: book.tools?.worlds ?? false,
spells: book.tools?.spells ?? false,
locations: response.enabled
}});
if (response) {
const mappedLocations: LocationProps[] = response.map((loc: SeriesLocationItem): LocationProps => ({
id: loc.id,
name: loc.name,
elements: loc.elements.map((elem: SeriesLocationElement) => ({
id: elem.id,
name: elem.name,
description: elem.description,
subElements: elem.subElements.map((sub: SeriesLocationSubElement) => ({
id: sub.id,
name: sub.name,
description: sub.description,
})),
})),
}));
setSections(mappedLocations);
}
} else {
let response: LocationListResponse;
if (isCurrentlyOffline()) {
response = await window.electron.invoke<LocationListResponse>('db:location:all', {bookid: currentEntityId});
} else {
if (book?.localBook) {
response = await window.electron.invoke<LocationListResponse>('db:location:all', {bookid: currentEntityId});
} else {
response = await System.authGetQueryToServer<LocationListResponse>(`location/all`, token, lang, {
bookid: currentEntityId,
});
}
}
if (response) {
setSections(response.locations);
setToolEnabled(response.enabled);
if (setBook && book) {
setBook({
...book, tools: {
characters: book.tools?.characters ?? false,
worlds: book.tools?.worlds ?? false,
spells: book.tools?.spells ?? false,
locations: response.enabled
}
});
}
}
}
} catch (e: unknown) {
@@ -143,7 +224,7 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
}
}
}
async function handleAddSection(): Promise<void> {
if (!newSectionName.trim()) {
errorMessage(t('locationComponent.errorSectionNameEmpty'))
@@ -151,20 +232,42 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
}
try {
let sectionId: string;
if (isCurrentlyOffline() || book?.localBook) {
if (isSeriesMode) {
const addData = {
seriesId: currentEntityId,
name: newSectionName,
};
if (isCurrentlyOffline() || localSeries) {
sectionId = await window.electron.invoke<string>('db:series:location:section:add', addData);
} else {
sectionId = await System.authPostToServer<string>(
'series/location/section/add',
addData,
token,
lang
);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('db:series:location:section:add', addData);
}
}
if (!sectionId) {
errorMessage(t('locationComponent.errorUnknownAddSection'));
return;
}
} else if (isCurrentlyOffline() || book?.localBook) {
sectionId = await window.electron.invoke<string>('db:location:section:add', {
bookId: bookId,
bookId: currentEntityId,
locationName: newSectionName,
});
} else {
sectionId = await System.authPostToServer<string>(`location/section/add`, {
bookId: bookId,
bookId: currentEntityId,
locationName: newSectionName,
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('db:location:section:add', {
bookId: bookId,
bookId: currentEntityId,
sectionId,
locationName: newSectionName,
});
@@ -189,7 +292,7 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
}
}
}
async function handleAddElement(sectionId: string): Promise<void> {
if (!newElementNames[sectionId]?.trim()) {
errorMessage(t('locationComponent.errorElementNameEmpty'))
@@ -197,23 +300,45 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
}
try {
let elementId: string;
if (isCurrentlyOffline() || book?.localBook) {
if (isSeriesMode) {
const addData = {
locationId: sectionId,
name: newElementNames[sectionId],
};
if (isCurrentlyOffline() || localSeries) {
elementId = await window.electron.invoke<string>('db:series:location:element:add', addData);
} else {
elementId = await System.authPostToServer<string>(
'series/location/element/add',
addData,
token,
lang
);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('db:series:location:element:add', addData);
}
}
if (!elementId) {
errorMessage(t('locationComponent.errorUnknownAddElement'));
return;
}
} else if (isCurrentlyOffline() || book?.localBook) {
elementId = await window.electron.invoke<string>('db:location:element:add', {
bookId: bookId,
bookId: currentEntityId,
locationId: sectionId,
elementName: newElementNames[sectionId],
});
} else {
elementId = await System.authPostToServer<string>(`location/element/add`, {
bookId: bookId,
bookId: currentEntityId,
locationId: sectionId,
elementName: newElementNames[sectionId],
},
token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('db:location:element:add', {
bookId: bookId,
bookId: currentEntityId,
locationId: sectionId,
elementId,
elementName: newElementNames[sectionId],
@@ -244,7 +369,7 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
}
}
}
function handleElementChange(
sectionId: string,
elementIndex: number,
@@ -259,7 +384,7 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
updatedSections[sectionIndex].elements[elementIndex][field] = value;
setSections(updatedSections);
}
async function handleAddSubElement(
sectionId: string,
elementIndex: number,
@@ -274,7 +399,29 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
try {
let subElementId: string;
const elementId = sections[sectionIndex].elements[elementIndex].id;
if (isCurrentlyOffline() || book?.localBook) {
if (isSeriesMode) {
const addData = {
elementId: elementId,
name: newSubElementNames[elementIndex],
};
if (isCurrentlyOffline() || localSeries) {
subElementId = await window.electron.invoke<string>('db:series:location:subelement:add', addData);
} else {
subElementId = await System.authPostToServer<string>(
'series/location/sub-element/add',
addData,
token,
lang
);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('db:series:location:subelement:add', addData);
}
}
if (!subElementId) {
errorMessage(t('locationComponent.errorUnknownAddSubElement'));
return;
}
} else if (isCurrentlyOffline() || book?.localBook) {
subElementId = await window.electron.invoke<string>('db:location:subelement:add', {
elementId: elementId,
subElementName: newSubElementNames[elementIndex],
@@ -285,7 +432,7 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
subElementName: newSubElementNames[elementIndex],
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('db:location:subelement:add', {
elementId: elementId,
subElementId,
@@ -330,7 +477,7 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
][field] = value;
setSections(updatedSections);
}
async function handleRemoveElement(
sectionId: string,
elementIndex: number,
@@ -339,7 +486,17 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
let response: boolean;
const elementId = sections.find((section: LocationProps): boolean => section.id === sectionId)
?.elements[elementIndex].id;
if (isCurrentlyOffline() || book?.localBook) {
if (isSeriesMode) {
const deleteData = {elementId: elementId};
if (isCurrentlyOffline() || localSeries) {
response = await window.electron.invoke<boolean>('db:series:location:element:delete', deleteData);
} else {
response = await System.authDeleteToServer<boolean>('series/location/element/delete', deleteData, token, lang);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('db:series:location:element:delete', deleteData);
}
}
} else if (isCurrentlyOffline() || book?.localBook) {
response = await window.electron.invoke<boolean>('db:location:element:delete', {
elementId: elementId,
});
@@ -348,7 +505,7 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
elementId: elementId,
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('db:location:element:delete', {
elementId: elementId,
});
@@ -379,7 +536,17 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
try {
let response: boolean;
const subElementId = sections.find((section: LocationProps): boolean => section.id === sectionId)?.elements[elementIndex].subElements[subElementIndex].id;
if (isCurrentlyOffline() || book?.localBook) {
if (isSeriesMode) {
const deleteData = {subElementId: subElementId};
if (isCurrentlyOffline() || localSeries) {
response = await window.electron.invoke<boolean>('db:series:location:subelement:delete', deleteData);
} else {
response = await System.authDeleteToServer<boolean>('series/location/sub-element/delete', deleteData, token, lang);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('db:series:location:subelement:delete', deleteData);
}
}
} else if (isCurrentlyOffline() || book?.localBook) {
response = await window.electron.invoke<boolean>('db:location:subelement:delete', {
subElementId: subElementId,
});
@@ -388,7 +555,7 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
subElementId: subElementId,
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('db:location:subelement:delete', {
subElementId: subElementId,
});
@@ -414,7 +581,17 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
async function handleRemoveSection(sectionId: string): Promise<void> {
try {
let response: boolean;
if (isCurrentlyOffline() || book?.localBook) {
if (isSeriesMode) {
const deleteData = {locationId: sectionId};
if (isCurrentlyOffline() || localSeries) {
response = await window.electron.invoke<boolean>('db:series:location:delete', deleteData);
} else {
response = await System.authDeleteToServer<boolean>('series/location/delete', deleteData, token, lang);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('db:series:location:delete', deleteData);
}
}
} else if (isCurrentlyOffline() || book?.localBook) {
response = await window.electron.invoke<boolean>('db:location:delete', {
locationId: sectionId,
});
@@ -423,7 +600,7 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
locationId: sectionId,
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('db:location:delete', {
locationId: sectionId,
});
@@ -456,7 +633,7 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
locations: sections,
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('db:location:update', {
locations: sections,
});
@@ -476,9 +653,107 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
}
}
async function handleExportToSeries(section: LocationProps): Promise<void> {
if (!bookSeriesId) return;
try {
const seriesLocationId: string = await System.authPostToServer<string>('series/location/section/add', {
seriesId: bookSeriesId,
name: section.name,
}, token, lang);
if (seriesLocationId) {
const updateResponse: boolean = await System.authPostToServer<boolean>('location/section/update', {
sectionId: section.id,
sectionName: section.name,
seriesLocationId: seriesLocationId,
}, token, lang);
if (updateResponse) {
setSections(sections.map((s: LocationProps): LocationProps =>
s.id === section.id ? {...s, seriesLocationId: seriesLocationId} : s
));
await getSeriesLocations();
successMessage(t("locationComponent.exportSuccess"));
}
}
} catch (e: unknown) {
if (e instanceof Error) {
errorMessage(e.message);
}
}
}
async function handleImportFromSeries(seriesLocationId: string): Promise<void> {
const seriesLocation: SeriesLocationItem | undefined = seriesLocations.find((location: SeriesLocationItem): boolean => location.id === seriesLocationId);
if (!seriesLocation) return;
try {
const sectionId: string = await System.authPostToServer<string>('location/section/add', {
bookId: currentEntityId,
locationName: seriesLocation.name,
seriesLocationId: seriesLocationId,
}, token, lang);
if (!sectionId) {
errorMessage(t('locationComponent.importError'));
return;
}
const importedElements: Element[] = [];
for (const seriesElement of seriesLocation.elements) {
const elementId: string = await System.authPostToServer<string>('location/element/add', {
bookId: currentEntityId,
locationId: sectionId,
elementName: seriesElement.name,
}, token, lang);
if (!elementId) continue;
const importedSubElements: SubElement[] = [];
for (const seriesSubElement of seriesElement.subElements) {
const subElementId: string = await System.authPostToServer<string>('location/sub-element/add', {
elementId: elementId,
subElementName: seriesSubElement.name,
}, token, lang);
if (subElementId) {
importedSubElements.push({
id: subElementId,
name: seriesSubElement.name,
description: seriesSubElement.description,
});
}
}
importedElements.push({
id: elementId,
name: seriesElement.name,
description: seriesElement.description,
subElements: importedSubElements,
});
}
const newLocation: LocationProps = {
id: sectionId,
name: seriesLocation.name,
elements: importedElements,
seriesLocationId: seriesLocationId,
};
setSections([...sections, newLocation]);
successMessage(t('locationComponent.importSuccess'));
} catch (e: unknown) {
if (e instanceof Error) {
errorMessage(e.message);
}
}
}
return (
<div className="space-y-6">
{showToggle && (
{showToggle && !isSeriesMode && (
<div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
<InputField
icon={faToggleOn}
@@ -495,8 +770,19 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
</p>
</div>
)}
{toolEnabled && (
{(toolEnabled || isSeriesMode) && (
<>
{!isSeriesMode && bookSeriesId &&
seriesLocations.filter((seriesLocation: SeriesLocationItem): boolean => !sections.some((section: LocationProps): boolean => section.seriesLocationId === seriesLocation.id)).length > 0 && (
<SeriesImportSelector
availableItems={seriesLocations
.filter((seriesLocation: SeriesLocationItem): boolean => !sections.some((section: LocationProps): boolean => section.seriesLocationId === seriesLocation.id))
.map((seriesLocation: SeriesLocationItem) => ({id: seriesLocation.id, name: seriesLocation.name}))}
onImport={handleImportFromSeries}
placeholder={t("seriesImport.selectElement")}
label={t("seriesImport.importFromSeries")}
/>
)}
<div className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
<div className="grid grid-cols-1 gap-4 mb-4">
<InputField
@@ -525,10 +811,21 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
className="ml-2 text-sm bg-dark-background text-text-secondary py-0.5 px-2 rounded-full">
{section.elements.length || 0}
</span>
<button onClick={(): Promise<void> => handleRemoveSection(section.id)}
className="ml-auto bg-dark-background text-text-primary rounded-full p-1.5 hover:bg-secondary transition-colors shadow-md">
<FontAwesomeIcon icon={faTrash} className={'w-5 h-5'}/>
</button>
<div className="ml-auto flex items-center gap-2">
{!isSeriesMode && bookSeriesId && !section.seriesLocationId && (
<button
onClick={(): Promise<void> => handleExportToSeries(section)}
title={t("locationComponent.exportToSeries")}
className="bg-blue-500/90 text-text-primary rounded-full p-1.5 hover:bg-blue-500 transition-colors shadow-md"
>
<FontAwesomeIcon icon={faShare} className={'w-5 h-5'}/>
</button>
)}
<button onClick={(): Promise<void> => handleRemoveSection(section.id)}
className="bg-dark-background text-text-primary rounded-full p-1.5 hover:bg-secondary transition-colors shadow-md">
<FontAwesomeIcon icon={faTrash} className={'w-5 h-5'}/>
</button>
</div>
</h3>
<div className="space-y-4">
{section.elements.length > 0 ? (
@@ -638,4 +935,4 @@ export function LocationComponent({showToggle = true}: {showToggle?: boolean}, r
);
}
export default forwardRef(LocationComponent);
export default forwardRef(LocationComponent);

242
components/book/settings/locations/editor/LocationEditor.tsx Normal file
View File

@@ -0,0 +1,242 @@
'use client';
import React, {useCallback, useContext, useMemo, useState} from 'react';
import {useLocations, UseLocationsConfig, LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
import {useTranslations} from 'next-intl';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faSpinner, faPlus, faToggleOn} from '@fortawesome/free-solid-svg-icons';
import {BookContext} from '@/context/BookContext';
import {SeriesLocationItem} from '@/lib/models/Series';
import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
import AlertBox from '@/components/AlertBox';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import ToggleSwitch from '@/components/form/ToggleSwitch';
import SeriesImportSelector from '@/components/form/SeriesImportSelector';
import LocationEditorList from './LocationEditorList';
import LocationEditorDetail from './LocationEditorDetail';
import LocationEditorEdit from './LocationEditorEdit';
/**
* LocationEditor - Orchestrateur pour ComposerRightBar
* Mêmes fonctionnalités que LocationSettings, layout condensé
* Inclut: toggle tool, import from series, export to series
*/
export default function LocationEditor(): React.JSX.Element {
const t = useTranslations();
const {book} = useContext(BookContext);
const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
const [showAddForm, setShowAddForm] = useState<boolean>(false);
const config: UseLocationsConfig = useMemo(function (): UseLocationsConfig {
return {
entityType: 'book',
entityId: book?.bookId || '',
};
}, [book?.bookId]);
const {
sections,
seriesLocations,
toolEnabled,
isLoading,
bookSeriesId,
newSectionName,
newElementNames,
newSubElementNames,
viewMode,
selectedSectionIndex,
addSection,
addElement,
addSubElement,
removeSection,
removeElement,
removeSubElement,
updateElement,
updateSubElement,
saveLocations,
toggleTool,
importFromSeries,
exportToSeries,
setNewSectionName,
setNewElementNames,
setNewSubElementNames,
enterDetailMode,
enterEditMode,
exitEditMode,
backToList,
} = useLocations(config);
const availableSeriesLocations = useMemo(function (): SeriesLocationItem[] {
return seriesLocations.filter(function (sl: SeriesLocationItem): boolean {
return !sections.some(function (s: LocationProps): boolean {
return s.seriesLocationId === sl.id;
});
});
}, [seriesLocations, sections]);
// Wrapper pour convertir LocationProps en index
const handleSectionClick = useCallback(function (section: LocationProps, index: number): void {
enterDetailMode(index);
}, [enterDetailMode]);
// Gestion de l'ajout
async function handleAddSection(): Promise<void> {
if (newSectionName.trim()) {
await addSection();
setShowAddForm(false);
} else {
setShowAddForm(true);
}
}
async function handleSave(): Promise<void> {
await exitEditMode(true);
}
function handleCancel(): void {
exitEditMode(false);
}
async function handleDelete(): Promise<void> {
if (selectedSectionIndex >= 0 && sections[selectedSectionIndex]) {
await removeSection(sections[selectedSectionIndex].id);
setShowDeleteConfirm(false);
backToList();
}
}
if (isLoading) {
return (
<div className="flex items-center justify-center py-8">
<FontAwesomeIcon icon={faSpinner} className="w-6 h-6 text-primary animate-spin"/>
</div>
);
}
const selectedSection: LocationProps | undefined = sections[selectedSectionIndex];
const canExport: boolean = Boolean(bookSeriesId && selectedSection && !selectedSection.seriesLocationId);
return (
<div className="flex flex-col h-full">
<ToolDetailHeader
title={selectedSection?.name || ''}
defaultTitle={t('locationComponent.newSection')}
viewMode={viewMode}
isNew={false}
onBack={backToList}
onEdit={enterEditMode}
onSave={handleSave}
onCancel={handleCancel}
onDelete={function (): void { setShowDeleteConfirm(true); }}
onExport={canExport ? function (): Promise<void> { return exportToSeries(selectedSection!); } : undefined}
showExport={canExport}
showDelete={Boolean(selectedSection)}
/>
<div className="flex-1 overflow-y-auto">
{viewMode === 'list' && (
<div className="space-y-3 p-2">
{/* Toggle tool */}
<div className="bg-secondary/20 rounded-lg p-3 border border-secondary/30">
<InputField
icon={faToggleOn}
fieldName={t('locationComponent.enableTool')}
input={
<ToggleSwitch
checked={toolEnabled}
onChange={toggleTool}
/>
}
/>
</div>
{toolEnabled && (
<>
{/* Import from series */}
{bookSeriesId && availableSeriesLocations.length > 0 && (
<SeriesImportSelector
availableItems={availableSeriesLocations.map(function (sl: SeriesLocationItem) {
return {id: sl.id, name: sl.name};
})}
onImport={importFromSeries}
placeholder={t('seriesImport.selectElement')}
label={t('seriesImport.importFromSeries')}
/>
)}
{showAddForm && (
<div className="px-2">
<InputField
input={
<TextInput
value={newSectionName}
setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
setNewSectionName(e.target.value);
}}
placeholder={t('locationComponent.newSectionPlaceholder')}
/>
}
actionIcon={faPlus}
actionLabel={t('locationComponent.addSectionLabel')}
addButtonCallBack={async function (): Promise<void> {
await addSection();
setShowAddForm(false);
}}
/>
</div>
)}
<LocationEditorList
sections={sections}
onSectionClick={handleSectionClick}
onAddSection={handleAddSection}
/>
</>
)}
</div>
)}
{viewMode === 'detail' && selectedSection && (
<div className="p-4">
<LocationEditorDetail section={selectedSection}/>
</div>
)}
{viewMode === 'edit' && selectedSection && (
<div className="p-4">
<LocationEditorEdit
section={selectedSection}
newElementNames={newElementNames}
newSubElementNames={newSubElementNames}
onAddElement={addElement}
onAddSubElement={addSubElement}
onRemoveElement={removeElement}
onRemoveSubElement={removeSubElement}
onUpdateElement={updateElement}
onUpdateSubElement={updateSubElement}
onNewElementNameChange={function (sectionId: string, name: string): void {
setNewElementNames({...newElementNames, [sectionId]: name});
}}
onNewSubElementNameChange={function (elementIndex: number, name: string): void {
setNewSubElementNames({...newSubElementNames, [elementIndex]: name});
}}
/>
</div>
)}
</div>
{showDeleteConfirm && selectedSection && (
<AlertBox
title={t('locationComponent.deleteTitle')}
message={t('locationComponent.deleteMessage', {name: selectedSection.name})}
type="danger"
confirmText={t('common.delete')}
cancelText={t('common.cancel')}
onConfirm={handleDelete}
onCancel={function (): void { setShowDeleteConfirm(false); }}
/>
)}
</div>
);
}

65
components/book/settings/locations/editor/LocationEditorDetail.tsx Normal file
View File

@@ -0,0 +1,65 @@
'use client';
import React from 'react';
import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faLocationDot, faMapPin} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';
interface LocationEditorDetailProps {
section: LocationProps;
}
/**
* LocationEditorDetail - Version sidebar lecture seule
* Layout linéaire simple, juste les infos essentielles empilées
* PAS de CollapsableArea, PAS de grids
*/
export default function LocationEditorDetail({
section,
}: LocationEditorDetailProps): React.JSX.Element {
const t = useTranslations();
return (
<div>
<h3 className="text-text-primary font-semibold text-base mb-4">{section.name}</h3>
{section.elements.length === 0 ? (
<p className="text-muted text-sm">{t('locationComponent.noElementAvailable')}</p>
) : (
<div className="space-y-4">
{section.elements.map(function (element: Element): React.JSX.Element {
return (
<div key={element.id} className="border-b border-secondary/30 pb-3 last:border-b-0">
<div className="flex items-center gap-2 mb-1">
<FontAwesomeIcon icon={faMapPin} className="text-primary w-3 h-3"/>
<span className="text-text-primary font-medium text-sm">{element.name}</span>
</div>
{element.description && (
<p className="text-text-secondary text-xs ml-5 mb-2">{element.description}</p>
)}
{element.subElements.length > 0 && (
<div className="ml-5 mt-2 space-y-1">
{element.subElements.map(function (subElement: SubElement): React.JSX.Element {
return (
<div key={subElement.id} className="flex items-start gap-2">
<FontAwesomeIcon icon={faLocationDot} className="text-muted w-2 h-2 mt-1.5"/>
<div>
<span className="text-text-primary text-xs">{subElement.name}</span>
{subElement.description && (
<p className="text-muted text-xs">{subElement.description}</p>
)}
</div>
</div>
);
})}
</div>
)}
</div>
);
})}
</div>
)}
</div>
);
}

151
components/book/settings/locations/editor/LocationEditorEdit.tsx Normal file
View File

@@ -0,0 +1,151 @@
'use client';
import React, {ChangeEvent} from 'react';
import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import TexteAreaInput from '@/components/form/TexteAreaInput';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faMapPin, faPlus} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';
interface LocationEditorEditProps {
section: LocationProps;
newElementNames: { [key: string]: string };
newSubElementNames: { [key: string]: string };
onAddElement: (sectionId: string) => Promise<void>;
onAddSubElement: (sectionId: string, elementIndex: number) => Promise<void>;
onRemoveElement: (sectionId: string, elementIndex: number) => Promise<void>;
onRemoveSubElement: (sectionId: string, elementIndex: number, subElementIndex: number) => Promise<void>;
onUpdateElement: (sectionId: string, elementIndex: number, field: keyof Element, value: string) => void;
onUpdateSubElement: (sectionId: string, elementIndex: number, subElementIndex: number, field: keyof SubElement, value: string) => void;
onNewElementNameChange: (sectionId: string, name: string) => void;
onNewSubElementNameChange: (elementIndex: number, name: string) => void;
}
/**
* LocationEditorEdit - Version sidebar édition
* Layout linéaire simple, champs empilés verticalement
* PAS de CollapsableArea, PAS de grids
*/
export default function LocationEditorEdit({
section,
newElementNames,
newSubElementNames,
onAddElement,
onAddSubElement,
onRemoveElement,
onRemoveSubElement,
onUpdateElement,
onUpdateSubElement,
onNewElementNameChange,
onNewSubElementNameChange,
}: LocationEditorEditProps): React.JSX.Element {
const t = useTranslations();
return (
<div className="space-y-4">
<h3 className="text-text-primary font-semibold text-base">{section.name}</h3>
{/* Éléments existants */}
{section.elements.map(function (element: Element, elementIndex: number): React.JSX.Element {
return (
<div key={element.id} className="bg-secondary/20 rounded-lg p-3 border border-secondary/30">
<div className="flex items-center gap-2 mb-2">
<FontAwesomeIcon icon={faMapPin} className="text-primary w-3 h-3"/>
<span className="text-text-secondary text-xs">{t('locationComponent.element')}</span>
</div>
<InputField
input={
<TextInput
value={element.name}
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
onUpdateElement(section.id, elementIndex, 'name', e.target.value);
}}
placeholder={t('locationComponent.elementNamePlaceholder')}
/>
}
removeButtonCallBack={function (): Promise<void> {
return onRemoveElement(section.id, elementIndex);
}}
/>
<div className="mt-2">
<TexteAreaInput
value={element.description}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onUpdateElement(section.id, elementIndex, 'description', e.target.value);
}}
placeholder={t('locationComponent.elementDescriptionPlaceholder')}
/>
</div>
{/* Sous-éléments */}
{element.subElements.length > 0 && (
<div className="mt-3 pt-3 border-t border-secondary/30 space-y-2">
{element.subElements.map(function (subElement: SubElement, subElementIndex: number): React.JSX.Element {
return (
<div key={subElement.id} className="bg-dark-background/50 rounded p-2">
<InputField
input={
<TextInput
value={subElement.name}
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
onUpdateSubElement(section.id, elementIndex, subElementIndex, 'name', e.target.value);
}}
placeholder={t('locationComponent.subElementNamePlaceholder')}
/>
}
removeButtonCallBack={function (): Promise<void> {
return onRemoveSubElement(section.id, elementIndex, subElementIndex);
}}
/>
</div>
);
})}
</div>
)}
{/* Ajouter sous-élément */}
<div className="mt-2">
<InputField
input={
<TextInput
value={newSubElementNames[elementIndex] || ''}
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
onNewSubElementNameChange(elementIndex, e.target.value);
}}
placeholder={t('locationComponent.newSubElementPlaceholder')}
/>
}
actionIcon={faPlus}
actionLabel={t('locationComponent.addSubElement')}
addButtonCallBack={function (): Promise<void> {
return onAddSubElement(section.id, elementIndex);
}}
/>
</div>
</div>
);
})}
{/* Ajouter élément */}
<InputField
fieldName={t('locationComponent.addElement')}
input={
<TextInput
value={newElementNames[section.id] || ''}
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
onNewElementNameChange(section.id, e.target.value);
}}
placeholder={t('locationComponent.newElementPlaceholder')}
/>
}
actionIcon={faPlus}
addButtonCallBack={function (): Promise<void> {
return onAddElement(section.id);
}}
/>
</div>
);
}

113
components/book/settings/locations/editor/LocationEditorList.tsx Normal file
View File

@@ -0,0 +1,113 @@
'use client';
import React, {useState} from 'react';
import {LocationProps, Element} from '@/hooks/settings/useLocations';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faChevronRight, faMapMarkerAlt, faPlus} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';
interface LocationEditorListProps {
sections: LocationProps[];
onSectionClick: (section: LocationProps, index: number) => void;
onAddSection: () => void;
}
/**
* LocationEditorList - Liste des sections pour ComposerRightBar
* Version compacte avec liste cliquable (même pattern que CharacterEditorList)
* PAS de scroll interne (géré par parent ComposerRightBar)
*/
export default function LocationEditorList({
sections,
onSectionClick,
onAddSection,
}: LocationEditorListProps): React.JSX.Element {
const t = useTranslations();
const [searchQuery, setSearchQuery] = useState<string>('');
function getFilteredSections(): LocationProps[] {
return sections.filter(function (section: LocationProps): boolean {
return section.name.toLowerCase().includes(searchQuery.toLowerCase());
});
}
function countTotalElements(section: LocationProps): number {
let count: number = section.elements.length;
section.elements.forEach(function (element: Element): void {
count += element.subElements.length;
});
return count;
}
const filteredSections: LocationProps[] = getFilteredSections();
return (
<div className="space-y-3">
<div className="px-2">
<InputField
input={
<TextInput
value={searchQuery}
setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
setSearchQuery(e.target.value);
}}
placeholder={t('locationComponent.search')}
/>
}
actionIcon={faPlus}
actionLabel={t('locationComponent.addSectionLabel')}
addButtonCallBack={async function (): Promise<void> {
onAddSection();
}}
/>
</div>
<div className="px-2 space-y-2">
{filteredSections.length === 0 ? (
<div className="flex flex-col items-center justify-center py-8 text-center">
<div className="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3">
<FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-8 h-8"/>
</div>
<h3 className="text-text-primary font-semibold text-base mb-1">
{t('locationComponent.noSectionAvailable')}
</h3>
<p className="text-muted text-sm max-w-xs">
{t('locationComponent.noSectionDescription')}
</p>
</div>
) : (
filteredSections.map(function (section: LocationProps, index: number): React.JSX.Element {
return (
<div
key={section.id}
onClick={function (): void { onSectionClick(section, index); }}
className="group flex items-center p-3 bg-secondary/30 rounded-lg border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md transition-all duration-200 hover:border-primary/50"
>
<div className="w-10 h-10 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-sm group-hover:scale-110 transition-transform flex items-center justify-center">
<FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-5 h-5"/>
</div>
<div className="ml-3 flex-1 min-w-0">
<div className="text-text-primary font-semibold text-sm group-hover:text-primary transition-colors truncate">
{section.name}
</div>
<div className="text-muted text-xs truncate">
{t('locationComponent.elementsCount', {count: countTotalElements(section)})}
</div>
</div>
<div className="w-6 flex justify-center">
<FontAwesomeIcon
icon={faChevronRight}
className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-3 h-3"
/>
</div>
</div>
);
})
)}
</div>
</div>
);
}

228
components/book/settings/locations/settings/LocationSettings.tsx Normal file
View File

@@ -0,0 +1,228 @@
'use client';
import React, {useContext, useMemo, useState} from 'react';
import {useLocations, UseLocationsConfig, LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
import {useTranslations} from 'next-intl';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
import {BookContext} from '@/context/BookContext';
import {SeriesLocationItem} from '@/lib/models/Series';
import InputField from '@/components/form/InputField';
import ToggleSwitch from '@/components/form/ToggleSwitch';
import SeriesImportSelector from '@/components/form/SeriesImportSelector';
import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
import AlertBox from '@/components/AlertBox';
import LocationSettingsList from './LocationSettingsList';
import LocationSettingsDetail from './LocationSettingsDetail';
import LocationSettingsEdit from './LocationSettingsEdit';
interface LocationSettingsProps {
entityType?: 'book' | 'series';
entityId?: string;
showToggle?: boolean;
}
/**
* LocationSettings - Orchestrateur pour BookSetting/SerieSetting
* Gère le viewMode (list/detail/edit) et coordonne les sous-composants
* Inclut: toggle tool, import from series, export to series
*/
export default function LocationSettings({
entityType = 'book',
entityId,
showToggle = true,
}: LocationSettingsProps): React.JSX.Element {
const t = useTranslations();
const {book} = useContext(BookContext);
const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
const resolvedEntityId: string = entityId || book?.bookId || '';
const config: UseLocationsConfig = useMemo(function (): UseLocationsConfig {
return {
entityType,
entityId: resolvedEntityId,
};
}, [entityType, resolvedEntityId]);
const {
sections,
seriesLocations,
toolEnabled,
isLoading,
isSeriesMode,
bookSeriesId,
newSectionName,
newElementNames,
newSubElementNames,
viewMode,
selectedSectionIndex,
addSection,
addElement,
addSubElement,
removeSection,
removeElement,
removeSubElement,
updateElement,
updateSubElement,
saveLocations,
toggleTool,
importFromSeries,
exportToSeries,
setNewSectionName,
setNewElementNames,
setNewSubElementNames,
enterDetailMode,
enterEditMode,
exitEditMode,
backToList,
} = useLocations(config);
const availableSeriesLocations = useMemo(function (): SeriesLocationItem[] {
return seriesLocations.filter(function (sl: SeriesLocationItem): boolean {
return !sections.some(function (s: LocationProps): boolean {
return s.seriesLocationId === sl.id;
});
});
}, [seriesLocations, sections]);
async function handleSave(): Promise<void> {
await exitEditMode(true);
}
function handleCancel(): void {
exitEditMode(false);
}
async function handleDelete(): Promise<void> {
if (selectedSectionIndex >= 0 && sections[selectedSectionIndex]) {
await removeSection(sections[selectedSectionIndex].id);
setShowDeleteConfirm(false);
backToList();
}
}
if (isLoading) {
return (
<div className="flex items-center justify-center py-12">
<FontAwesomeIcon icon={faSpinner} className="w-8 h-8 text-primary animate-spin"/>
</div>
);
}
const selectedSection: LocationProps | undefined = sections[selectedSectionIndex];
const canExport: boolean = Boolean(bookSeriesId && selectedSection && !selectedSection.seriesLocationId);
return (
<div className="flex flex-col h-full">
{/* Header - uniquement pour detail/edit */}
<ToolDetailHeader
title={selectedSection?.name || ''}
defaultTitle={t('locationComponent.newSection')}
viewMode={viewMode}
isNew={false}
onBack={backToList}
onEdit={enterEditMode}
onSave={handleSave}
onCancel={handleCancel}
onDelete={function (): void { setShowDeleteConfirm(true); }}
onExport={canExport ? function (): Promise<void> { return exportToSeries(selectedSection!); } : undefined}
showExport={canExport}
showDelete={Boolean(selectedSection)}
/>
{/* Contenu principal */}
<div className="flex-1 overflow-y-auto">
{viewMode === 'list' && (
<div className="space-y-5 p-4">
{/* Toggle tool */}
{showToggle && !isSeriesMode && (
<div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
<InputField
icon={faToggleOn}
fieldName={t('locationComponent.enableTool')}
input={
<ToggleSwitch
checked={toolEnabled}
onChange={toggleTool}
/>
}
/>
<p className="text-muted text-sm mt-2">
{t('locationComponent.enableToolDescription')}
</p>
</div>
)}
{/* Contenu si outil activé */}
{(toolEnabled || isSeriesMode) && (
<>
{/* Import from series */}
{!isSeriesMode && bookSeriesId && availableSeriesLocations.length > 0 && (
<SeriesImportSelector
availableItems={availableSeriesLocations.map(function (sl: SeriesLocationItem) {
return {id: sl.id, name: sl.name};
})}
onImport={importFromSeries}
placeholder={t("seriesImport.selectElement")}
label={t("seriesImport.importFromSeries")}
/>
)}
{/* Liste des sections */}
<LocationSettingsList
sections={sections}
newSectionName={newSectionName}
onSectionClick={enterDetailMode}
onAddSection={addSection}
onNewSectionNameChange={setNewSectionName}
/>
</>
)}
</div>
)}
{viewMode === 'detail' && selectedSection && (
<div className="p-4">
<LocationSettingsDetail section={selectedSection}/>
</div>
)}
{viewMode === 'edit' && selectedSection && (
<div className="p-4">
<LocationSettingsEdit
section={selectedSection}
newElementNames={newElementNames}
newSubElementNames={newSubElementNames}
onAddElement={addElement}
onAddSubElement={addSubElement}
onRemoveElement={removeElement}
onRemoveSubElement={removeSubElement}
onUpdateElement={updateElement}
onUpdateSubElement={updateSubElement}
onNewElementNameChange={function (sectionId: string, name: string): void {
setNewElementNames({...newElementNames, [sectionId]: name});
}}
onNewSubElementNameChange={function (elementIndex: number, name: string): void {
setNewSubElementNames({...newSubElementNames, [elementIndex]: name});
}}
/>
</div>
)}
</div>
{/* Modal de confirmation de suppression */}
{showDeleteConfirm && selectedSection && (
<AlertBox
title={t('locationComponent.deleteTitle')}
message={t('locationComponent.deleteMessage', {name: selectedSection.name})}
type="danger"
confirmText={t('common.delete')}
cancelText={t('common.cancel')}
onConfirm={handleDelete}
onCancel={function (): void { setShowDeleteConfirm(false); }}
/>
)}
</div>
);
}

89
components/book/settings/locations/settings/LocationSettingsDetail.tsx Normal file
View File

@@ -0,0 +1,89 @@
'use client';
import React from 'react';
import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faMapMarkerAlt, faMapPin, faLocationDot, faChevronRight} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';
interface LocationSettingsDetailProps {
section: LocationProps;
}
export default function LocationSettingsDetail({
section,
}: LocationSettingsDetailProps): React.JSX.Element {
const t = useTranslations();
return (
<div className="space-y-6 px-2 pb-4">
{/* Hero Section */}
<div className="p-6 bg-gradient-to-r from-primary/10 via-secondary/20 to-transparent rounded-2xl border border-secondary/30">
<div className="flex items-start gap-4">
<div className="w-16 h-16 rounded-xl bg-primary/20 flex items-center justify-center shrink-0">
<FontAwesomeIcon icon={faMapMarkerAlt} className="w-8 h-8 text-primary"/>
</div>
<div className="flex-1 min-w-0">
<h2 className="text-2xl font-bold text-text-primary">{section.name}</h2>
<p className="text-text-secondary mt-2">
{t("locationComponent.elementsCount", {count: section.elements.length})}
</p>
</div>
</div>
</div>
{/* Éléments en grille */}
{section.elements.length === 0 ? (
<div className="text-center py-12 text-text-secondary bg-secondary/10 rounded-xl border border-secondary/20">
<FontAwesomeIcon icon={faMapPin} className="w-8 h-8 mb-3 opacity-50"/>
<p>{t("locationComponent.noElementAvailable")}</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{section.elements.map(function (element: Element): React.JSX.Element {
return (
<div key={element.id} className="p-5 bg-secondary/20 rounded-xl border border-secondary/30 hover:border-primary/30 transition-colors">
{/* Element header */}
<div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center">
<FontAwesomeIcon icon={faMapPin} className="w-5 h-5 text-primary"/>
</div>
<h3 className="text-text-primary font-semibold text-lg">{element.name}</h3>
</div>
{/* Description */}
<p className={`mb-4 ${element.description ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
{element.description || '—'}
</p>
{/* Sub-elements */}
{element.subElements.length > 0 && (
<div className="pt-4 border-t border-secondary/30">
<h4 className="text-text-secondary text-xs uppercase tracking-wide mb-3 flex items-center gap-2">
<FontAwesomeIcon icon={faLocationDot} className="w-3 h-3"/>
{t("locationComponent.subElementsHeading")} ({element.subElements.length})
</h4>
<div className="space-y-2">
{element.subElements.map(function (subElement: SubElement): React.JSX.Element {
return (
<div key={subElement.id} className="flex items-start gap-2 p-2 bg-dark-background/30 rounded-lg">
<FontAwesomeIcon icon={faChevronRight} className="w-3 h-3 text-primary mt-1 shrink-0"/>
<div className="min-w-0">
<p className="text-text-primary font-medium">{subElement.name}</p>
{subElement.description && (
<p className="text-text-secondary text-sm mt-1">{subElement.description}</p>
)}
</div>
</div>
);
})}
</div>
</div>
)}
</div>
);
})}
</div>
)}
</div>
);
}

169
components/book/settings/locations/settings/LocationSettingsEdit.tsx Normal file
View File

@@ -0,0 +1,169 @@
'use client';
import React, {ChangeEvent} from 'react';
import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import TexteAreaInput from '@/components/form/TexteAreaInput';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faMapMarkerAlt, faPlus, faTrash} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';
interface LocationSettingsEditProps {
section: LocationProps;
newElementNames: { [key: string]: string };
newSubElementNames: { [key: string]: string };
onAddElement: (sectionId: string) => Promise<void>;
onAddSubElement: (sectionId: string, elementIndex: number) => Promise<void>;
onRemoveElement: (sectionId: string, elementIndex: number) => Promise<void>;
onRemoveSubElement: (sectionId: string, elementIndex: number, subElementIndex: number) => Promise<void>;
onUpdateElement: (sectionId: string, elementIndex: number, field: keyof Element, value: string) => void;
onUpdateSubElement: (sectionId: string, elementIndex: number, subElementIndex: number, field: keyof SubElement, value: string) => void;
onNewElementNameChange: (sectionId: string, name: string) => void;
onNewSubElementNameChange: (elementIndex: number, name: string) => void;
}
/**
* LocationSettingsEdit - Vue édition pour BookSetting/SerieSetting
* Permet d'éditer les éléments et sous-éléments
* PAS de scroll interne (géré par parent)
*/
export default function LocationSettingsEdit({
section,
newElementNames,
newSubElementNames,
onAddElement,
onAddSubElement,
onRemoveElement,
onRemoveSubElement,
onUpdateElement,
onUpdateSubElement,
onNewElementNameChange,
onNewSubElementNameChange,
}: LocationSettingsEditProps): React.JSX.Element {
const t = useTranslations();
return (
<div className="space-y-4 px-2 pb-4">
{/* Header de la section */}
<div className="flex items-center gap-3 mb-4">
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
<FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-6 h-6"/>
</div>
<div>
<h2 className="text-text-primary font-bold text-xl">{section.name}</h2>
</div>
</div>
{/* Éléments existants */}
{section.elements.map(function (element: Element, elementIndex: number): React.JSX.Element {
return (
<div key={element.id} className="bg-secondary/30 rounded-xl p-4 border border-secondary/50">
<div className="mb-3">
<InputField
fieldName={t("locationComponent.elementName")}
input={
<TextInput
value={element.name}
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
onUpdateElement(section.id, elementIndex, 'name', e.target.value);
}}
placeholder={t("locationComponent.elementNamePlaceholder")}
/>
}
removeButtonCallBack={function (): Promise<void> {
return onRemoveElement(section.id, elementIndex);
}}
/>
</div>
<TexteAreaInput
value={element.description}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onUpdateElement(section.id, elementIndex, 'description', e.target.value);
}}
placeholder={t("locationComponent.elementDescriptionPlaceholder")}
/>
{/* Sous-éléments */}
<div className="mt-4 pt-4 border-t border-secondary/50">
{element.subElements.length > 0 && (
<h4 className="text-sm italic text-text-secondary mb-3">
{t("locationComponent.subElementsHeading")}
</h4>
)}
{element.subElements.map(function (subElement: SubElement, subElementIndex: number): React.JSX.Element {
return (
<div key={subElement.id} className="bg-dark-background rounded-lg p-3 mb-3">
<div className="mb-2">
<InputField
input={
<TextInput
value={subElement.name}
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
onUpdateSubElement(section.id, elementIndex, subElementIndex, 'name', e.target.value);
}}
placeholder={t("locationComponent.subElementNamePlaceholder")}
/>
}
removeButtonCallBack={function (): Promise<void> {
return onRemoveSubElement(section.id, elementIndex, subElementIndex);
}}
/>
</div>
<TexteAreaInput
value={subElement.description}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onUpdateSubElement(section.id, elementIndex, subElementIndex, 'description', e.target.value);
}}
placeholder={t("locationComponent.subElementDescriptionPlaceholder")}
/>
</div>
);
})}
{/* Ajouter sous-élément */}
<InputField
input={
<TextInput
value={newSubElementNames[elementIndex] || ''}
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
onNewSubElementNameChange(elementIndex, e.target.value);
}}
placeholder={t("locationComponent.newSubElementPlaceholder")}
/>
}
actionIcon={faPlus}
actionLabel={t("locationComponent.addSubElement")}
addButtonCallBack={function (): Promise<void> {
return onAddSubElement(section.id, elementIndex);
}}
/>
</div>
</div>
);
})}
{/* Ajouter élément */}
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
<InputField
fieldName={t("locationComponent.addElement")}
input={
<TextInput
value={newElementNames[section.id] || ''}
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
onNewElementNameChange(section.id, e.target.value);
}}
placeholder={t("locationComponent.newElementPlaceholder")}
/>
}
actionIcon={faPlus}
actionLabel={t("locationComponent.addElement")}
addButtonCallBack={function (): Promise<void> {
return onAddElement(section.id);
}}
/>
</div>
</div>
);
}

106
components/book/settings/locations/settings/LocationSettingsList.tsx Normal file
View File

@@ -0,0 +1,106 @@
'use client';
import React, {ChangeEvent} from 'react';
import {LocationProps, Element} from '@/hooks/settings/useLocations';
import InputField from '@/components/form/InputField';
import TextInput from '@/components/form/TextInput';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faChevronRight, faMapMarkerAlt, faPlus} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';
interface LocationSettingsListProps {
sections: LocationProps[];
newSectionName: string;
onSectionClick: (sectionIndex: number) => void;
onAddSection: () => Promise<void>;
onNewSectionNameChange: (name: string) => void;
}
/**
* LocationSettingsList - Liste des sections de lieux pour BookSetting/SerieSetting
* Inclut recherche et bouton d'ajout
* PAS de scroll interne (géré par parent)
*/
export default function LocationSettingsList({
sections,
newSectionName,
onSectionClick,
onAddSection,
onNewSectionNameChange,
}: LocationSettingsListProps): React.JSX.Element {
const t = useTranslations();
function countTotalElements(section: LocationProps): number {
let count: number = section.elements.length;
section.elements.forEach(function (element: Element): void {
count += element.subElements.length;
});
return count;
}
return (
<div className="space-y-4">
<div className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
<InputField
input={
<TextInput
value={newSectionName}
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
onNewSectionNameChange(e.target.value);
}}
placeholder={t("locationComponent.newSectionPlaceholder")}
/>
}
actionIcon={faPlus}
actionLabel={t("locationComponent.addSectionLabel")}
addButtonCallBack={onAddSection}
/>
</div>
<div className="space-y-2 px-2">
{sections.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-center">
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-4">
<FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-10 h-10"/>
</div>
<h3 className="text-text-primary font-semibold text-lg mb-2">
{t("locationComponent.noSectionAvailable")}
</h3>
<p className="text-muted text-sm max-w-xs">
{t("locationComponent.noSectionDescription")}
</p>
</div>
) : (
sections.map(function (section: LocationProps, index: number): React.JSX.Element {
return (
<div
key={section.id}
onClick={function (): void { onSectionClick(index); }}
className="group flex items-center p-4 bg-secondary/30 rounded-xl border-l-4 border-primary border border-secondary/50 cursor-pointer hover:bg-secondary hover:shadow-md hover:scale-102 transition-all duration-200 hover:border-primary/50"
>
<div className="w-12 h-12 rounded-full border-2 border-primary overflow-hidden bg-secondary shadow-md group-hover:scale-110 transition-transform flex items-center justify-center">
<FontAwesomeIcon icon={faMapMarkerAlt} className="text-primary w-6 h-6"/>
</div>
<div className="ml-4 flex-1 min-w-0">
<div className="text-text-primary font-bold text-base group-hover:text-primary transition-colors">
{section.name}
</div>
<div className="text-text-secondary text-sm mt-0.5">
{t("locationComponent.elementsCount", {count: countTotalElements(section)})}
</div>
</div>
<div className="w-8 flex justify-center">
<FontAwesomeIcon
icon={faChevronRight}
className="text-muted group-hover:text-primary group-hover:translate-x-1 transition-all w-4 h-4"
/>
</div>
</div>
);
})
)}
</div>
</div>
);
}