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

Remove unused components and models for improved maintainability

Browse Source 
- Deleted redundant components (`AddActionButton`, `AlertBox`, `AlertStack`, `BackButton`, `CancelButton`, and `CollapsableArea`) and related files.
- Removed unused models (`Book`, `BookSerie`, `BookTables`, `Character`, and `Chapter`) to reduce codebase clutter.
- Updated project structure and references to reflect these removals.
This commit is contained in:
natreex
2026-03-22 22:37:31 -04:00
parent e8aaef108b
commit 64ed90d993
229 changed files with 15091 additions and 21289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,27 +1,19 @@
'use client'
import {faMapMarkerAlt, faPlus, faShare, faToggleOn, faTrash} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {MapPin, Plus, Share2, ToggleRight, Trash2} from 'lucide-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";
import System from '@/lib/models/System';
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import {AlertContext, AlertContextProps} from "@/context/AlertContext";
import {BookContext, BookContextProps} from "@/context/BookContext";
import {apiDelete, apiGet, apiPatch, apiPost} from '@/lib/api/client';
import InputField from "@/components/form/InputField";
import TextInput from '@/components/form/TextInput';
import TexteAreaInput from "@/components/form/TexteAreaInput";
import {useTranslations} from "next-intl";
import TextAreaInput from "@/components/form/TextAreaInput";
import {useTranslations} from '@/lib/i18n';
import {LangContext, LangContextProps} from "@/context/LangContext";
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 {SeriesLocationElement, SeriesLocationItem, SeriesLocationSubElement} from "@/lib/types/series";
import SeriesImportSelector from "@/components/form/SeriesImportSelector";
import * as tauri from '@/lib/tauri';
import IconButton from "@/components/ui/IconButton";
interface SubElement {
id: string;
@@ -57,16 +49,11 @@ interface LocationComponentProps {
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);
const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
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 {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
const {successMessage, errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
const {book, setBook}: BookContextProps = useContext<BookContextProps>(BookContext);
const currentEntityId: string = entityId || book?.bookId || '';
const isSeriesMode: boolean = entityType === 'series';
const token: string = session.accessToken;
@@ -90,17 +77,17 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
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[]>(
const response: SeriesLocationItem[] = await apiGet<SeriesLocationItem[]>(
'series/location/list',
token,
lang,
@@ -111,7 +98,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
}
} catch (e: unknown) {
if (e instanceof Error) {
console.error('Error loading series locations:', e.message);
errorMessage(e.message);
}
}
}
@@ -119,31 +106,19 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
async function handleToggleTool(enabled: boolean): Promise<void> {
if (isSeriesMode) return;
try {
let response: boolean;
if (isCurrentlyOffline() || book?.localBook) {
response = await tauri.updateBookToolSetting(currentEntityId, 'locations', enabled);
} else {
response = await System.authPatchToServer<boolean>('book/tool-setting', {
bookId: currentEntityId,
toolName: 'locations',
enabled: enabled
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('update_book_tool_setting', {data: {
bookId: currentEntityId,
toolName: 'locations',
enabled: enabled
}});
}
}
const response: boolean = await apiPatch<boolean>('book/tool-setting', {
bookId: currentEntityId,
toolName: 'locations',
enabled: enabled
}, token, lang);
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
locations: enabled,
spells: book.tools?.spells ?? false
}
});
}
@@ -157,17 +132,12 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
async function getAllLocations(): Promise<void> {
try {
if (isSeriesMode) {
let response: SeriesLocationItem[];
if (isCurrentlyOffline() || localSeries) {
response = await tauri.getSeriesLocationList(currentEntityId) as SeriesLocationItem[];
} else {
response = await System.authGetQueryToServer<SeriesLocationItem[]>(
'series/location/list',
token,
lang,
{seriesid: currentEntityId}
);
}
const response: SeriesLocationItem[] = await apiGet<SeriesLocationItem[]>(
'series/location/list',
token,
lang,
{seriesid: currentEntityId}
);
if (response) {
const mappedLocations: LocationProps[] = response.map((loc: SeriesLocationItem): LocationProps => ({
id: loc.id,
@@ -186,14 +156,12 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
setSections(mappedLocations);
}
} else {
let response: LocationListResponse;
if (isCurrentlyOffline() || book?.localBook) {
response = await tauri.getAllLocations(currentEntityId, true) as LocationListResponse;
} else {
response = await System.authGetQueryToServer<LocationListResponse>(`location/all`, token, lang, {
bookid: currentEntityId,
});
}
const response: LocationListResponse = await apiGet<LocationListResponse>(
'location/all',
token,
lang,
{bookid: currentEntityId}
);
if (response) {
setSections(response.locations);
setToolEnabled(response.enabled);
@@ -202,8 +170,8 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
...book, tools: {
characters: book.tools?.characters ?? false,
worlds: book.tools?.worlds ?? false,
spells: book.tools?.spells ?? false,
locations: response.enabled
locations: response.enabled,
spells: book.tools?.spells ?? false
}
});
}
@@ -217,7 +185,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
}
}
}
async function handleAddSection(): Promise<void> {
if (!newSectionName.trim()) {
errorMessage(t('locationComponent.errorSectionNameEmpty'))
@@ -226,47 +194,29 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
try {
let sectionId: string;
if (isSeriesMode) {
const addData = {
seriesId: currentEntityId,
name: newSectionName,
};
if (isCurrentlyOffline() || localSeries) {
sectionId = await tauri.addSeriesLocationSection(addData);
} else {
sectionId = await System.authPostToServer<string>(
'series/location/section/add',
addData,
token,
lang
);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('add_series_location_section', {data: addData});
}
}
sectionId = await apiPost<string>(
'series/location/section/add',
{
seriesId: currentEntityId,
name: newSectionName,
},
token,
lang
);
if (!sectionId) {
errorMessage(t('locationComponent.errorUnknownAddSection'));
return;
}
} else if (isCurrentlyOffline() || book?.localBook) {
sectionId = await tauri.addLocationSection(newSectionName, currentEntityId);
} else {
sectionId = await System.authPostToServer<string>(`location/section/add`, {
sectionId = await apiPost<string>('location/section/add', {
bookId: currentEntityId,
locationName: newSectionName,
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('add_location_section', {data: {
bookId: currentEntityId,
sectionId,
locationName: newSectionName,
}});
if (!sectionId) {
errorMessage(t('locationComponent.errorUnknownAddSection'));
return;
}
}
if (!sectionId) {
errorMessage(t('locationComponent.errorUnknownAddSection'));
return;
}
const newLocation: LocationProps = {
id: sectionId,
name: newSectionName,
@@ -291,50 +241,30 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
try {
let elementId: string;
if (isSeriesMode) {
const addData = {
locationId: sectionId,
name: newElementNames[sectionId],
};
if (isCurrentlyOffline() || localSeries) {
elementId = await tauri.addSeriesLocationElement(addData);
} else {
elementId = await System.authPostToServer<string>(
'series/location/element/add',
addData,
token,
lang
);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('add_series_location_element', {data: addData});
}
}
elementId = await apiPost<string>(
'series/location/element/add',
{
locationId: sectionId,
name: newElementNames[sectionId],
},
token,
lang
);
if (!elementId) {
errorMessage(t('locationComponent.errorUnknownAddElement'));
return;
}
} else if (isCurrentlyOffline() || book?.localBook) {
elementId = await tauri.addLocationElement(sectionId, newElementNames[sectionId]);
} else {
elementId = await System.authPostToServer<string>(`location/element/add`, {
bookId: currentEntityId,
locationId: sectionId,
elementName: newElementNames[sectionId],
},
token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('add_location_element', {data: {
bookId: currentEntityId,
locationId: sectionId,
elementId,
elementName: newElementNames[sectionId],
}});
elementId = await apiPost<string>('location/element/add', {
bookId: currentEntityId,
locationId: sectionId,
elementName: newElementNames[sectionId],
}, token, lang);
if (!elementId) {
errorMessage(t('locationComponent.errorUnknownAddElement'));
return;
}
}
if (!elementId) {
errorMessage(t('locationComponent.errorUnknownAddElement'));
return;
}
const updatedSections: LocationProps[] = [...sections];
const sectionIndex: number = updatedSections.findIndex(
(section: LocationProps): boolean => section.id === sectionId,
@@ -355,7 +285,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
}
}
}
function handleElementChange(
sectionId: string,
elementIndex: number,
@@ -370,7 +300,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
updatedSections[sectionIndex].elements[elementIndex][field] = value;
setSections(updatedSections);
}
async function handleAddSubElement(
sectionId: string,
elementIndex: number,
@@ -384,49 +314,30 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
);
try {
let subElementId: string;
const elementId = sections[sectionIndex].elements[elementIndex].id;
if (isSeriesMode) {
const addData = {
elementId: elementId,
name: newSubElementNames[elementIndex],
};
if (isCurrentlyOffline() || localSeries) {
subElementId = await tauri.addSeriesLocationSubElement(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('add_series_location_sub_element', {data: addData});
}
}
subElementId = await apiPost<string>(
'series/location/sub-element/add',
{
elementId: sections[sectionIndex].elements[elementIndex].id,
name: newSubElementNames[elementIndex],
},
token,
lang
);
if (!subElementId) {
errorMessage(t('locationComponent.errorUnknownAddSubElement'));
return;
}
} else if (isCurrentlyOffline() || book?.localBook) {
subElementId = await tauri.addLocationSubElement(elementId, newSubElementNames[elementIndex]);
} else {
subElementId = await System.authPostToServer<string>(`location/sub-element/add`, {
elementId: elementId,
subElementId = await apiPost<string>('location/sub-element/add', {
elementId: sections[sectionIndex].elements[elementIndex].id,
subElementName: newSubElementNames[elementIndex],
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('add_location_sub_element', {data: {
elementId: elementId,
subElementId,
subElementName: newSubElementNames[elementIndex],
}});
if (!subElementId) {
errorMessage(t('locationComponent.errorUnknownAddSubElement'));
return;
}
}
if (!subElementId) {
errorMessage(t('locationComponent.errorUnknownAddSubElement'));
return;
}
const updatedSections: LocationProps[] = [...sections];
updatedSections[sectionIndex].elements[elementIndex].subElements.push({
id: subElementId,
@@ -460,45 +371,30 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
][field] = value;
setSections(updatedSections);
}
async function handleRemoveElement(
sectionId: string,
elementIndex: number,
): Promise<void> {
try {
let response: boolean;
const elementId = sections.find((section: LocationProps): boolean => section.id === sectionId)
const elementId: string | undefined = sections.find((section: LocationProps): boolean => section.id === sectionId)
?.elements[elementIndex].id;
const deletedAt: number = System.timeStampInSeconds();
let success: boolean;
if (isSeriesMode) {
const deleteData = {elementId: elementId, deletedAt};
if (isCurrentlyOffline() || localSeries) {
response = await tauri.deleteSeriesLocationElement(deleteData.elementId!, deleteData.deletedAt);
} else {
response = await System.authDeleteToServer<boolean>('series/location/element/delete', deleteData, token, lang);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('delete_series_location_element', {data: deleteData});
}
}
} else if (isCurrentlyOffline() || book?.localBook) {
response = await tauri.deleteLocationElement(elementId!, currentEntityId, deletedAt);
} else {
response = await System.authDeleteToServer<boolean>(`location/element/delete`, {
elementId: elementId, bookId: currentEntityId, deletedAt,
success = await apiDelete<boolean>('series/location/element/delete', {
elementId: elementId
}, token, lang);
} else {
success = await apiDelete<boolean>('location/element/delete', {
elementId: elementId,
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('delete_location_element', {data: {
elementId: elementId, bookId: currentEntityId, deletedAt,
}});
}
}
if (!response) {
if (!success) {
errorMessage(t('locationComponent.errorUnknownDeleteElement'));
return;
}
const updatedSections: LocationProps[] = [...sections];
const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId,);
const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId);
updatedSections[sectionIndex].elements.splice(elementIndex, 1);
setSections(updatedSections);
} catch (e: unknown) {
@@ -516,39 +412,25 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
subElementIndex: number,
): Promise<void> {
try {
let response: boolean;
const subElementId = sections.find((section: LocationProps): boolean => section.id === sectionId)?.elements[elementIndex].subElements[subElementIndex].id;
const deletedAt: number = System.timeStampInSeconds();
const subElementId: string | undefined = sections.find((section: LocationProps): boolean => section.id === sectionId)
?.elements[elementIndex].subElements[subElementIndex].id;
let success: boolean;
if (isSeriesMode) {
const deleteData = {subElementId: subElementId, deletedAt};
if (isCurrentlyOffline() || localSeries) {
response = await tauri.deleteSeriesLocationSubElement(deleteData.subElementId!, deleteData.deletedAt);
} else {
response = await System.authDeleteToServer<boolean>('series/location/sub-element/delete', deleteData, token, lang);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('delete_series_location_sub_element', {data: deleteData});
}
}
} else if (isCurrentlyOffline() || book?.localBook) {
response = await tauri.deleteLocationSubElement(subElementId!, currentEntityId, deletedAt);
} else {
response = await System.authDeleteToServer<boolean>(`location/sub-element/delete`, {
subElementId: subElementId, bookId: currentEntityId, deletedAt,
success = await apiDelete<boolean>('series/location/sub-element/delete', {
subElementId: subElementId
}, token, lang);
} else {
success = await apiDelete<boolean>('location/sub-element/delete', {
subElementId: subElementId,
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('delete_location_sub_element', {data: {
subElementId: subElementId, bookId: currentEntityId, deletedAt,
}});
}
}
if (!response) {
if (!success) {
errorMessage(t('locationComponent.errorUnknownDeleteSubElement'));
return;
}
const updatedSections: LocationProps[] = [...sections];
const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId,);
updatedSections[sectionIndex].elements[elementIndex].subElements.splice(subElementIndex, 1,);
const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId);
updatedSections[sectionIndex].elements[elementIndex].subElements.splice(subElementIndex, 1);
setSections(updatedSections);
} catch (e: unknown) {
if (e instanceof Error) {
@@ -561,36 +443,21 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
async function handleRemoveSection(sectionId: string): Promise<void> {
try {
let response: boolean;
const deletedAt: number = System.timeStampInSeconds();
let success: boolean;
if (isSeriesMode) {
const deleteData = {locationId: sectionId, deletedAt};
if (isCurrentlyOffline() || localSeries) {
response = await tauri.deleteSeriesLocation(deleteData.locationId, deleteData.deletedAt);
} else {
response = await System.authDeleteToServer<boolean>('series/location/delete', deleteData, token, lang);
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
addToQueue('delete_series_location', {data: deleteData});
}
}
} else if (isCurrentlyOffline() || book?.localBook) {
response = await tauri.deleteLocationSection(sectionId, currentEntityId, deletedAt);
} else {
response = await System.authDeleteToServer<boolean>(`location/delete`, {
locationId: sectionId, bookId: currentEntityId, deletedAt,
success = await apiDelete<boolean>('series/location/delete', {
locationId: sectionId
}, token, lang);
} else {
success = await apiDelete<boolean>('location/delete', {
locationId: sectionId,
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('delete_location_section', {data: {
locationId: sectionId, bookId: currentEntityId, deletedAt,
}});
}
}
if (!response) {
if (!success) {
errorMessage(t('locationComponent.errorUnknownDeleteSection'));
return;
}
const updatedSections: LocationProps[] = sections.filter((section: LocationProps): boolean => section.id !== sectionId,);
const updatedSections: LocationProps[] = sections.filter((section: LocationProps): boolean => section.id !== sectionId);
setSections(updatedSections);
} catch (e: unknown) {
if (e instanceof Error) {
@@ -603,20 +470,9 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
async function handleSave(): Promise<void> {
try {
let response: boolean;
if (isCurrentlyOffline() || book?.localBook) {
response = await tauri.updateLocations(sections) as boolean;
} else {
response = await System.authPostToServer<boolean>(`location/update`, {
locations: sections,
}, token, lang);
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
addToQueue('update_locations', {data: {
locations: sections,
}});
}
}
const response: boolean = await apiPost<boolean>(`location/update`, {
locations: sections,
}, token, lang);
if (!response) {
errorMessage(t('locationComponent.errorUnknownSave'));
return;
@@ -630,23 +486,23 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
}
}
}
async function handleExportToSeries(section: LocationProps): Promise<void> {
if (!bookSeriesId) return;
try {
const seriesLocationId: string = await System.authPostToServer<string>('series/location/section/add', {
const seriesLocationId: string = await apiPost<string>('series/location/section/add', {
seriesId: bookSeriesId,
name: section.name,
}, token, lang);
if (seriesLocationId) {
const updateResponse: boolean = await System.authPostToServer<boolean>('location/section/update', {
const updateResponse: boolean = await apiPost<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
@@ -661,42 +517,42 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
}
}
}
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', {
const sectionId: string = await apiPost<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', {
const elementId: string = await apiPost<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', {
const subElementId: string = await apiPost<string>('location/sub-element/add', {
elementId: elementId,
subElementName: seriesSubElement.name,
}, token, lang);
if (subElementId) {
importedSubElements.push({
id: subElementId,
@@ -705,7 +561,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
});
}
}
importedElements.push({
id: elementId,
name: seriesElement.name,
@@ -713,7 +569,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
subElements: importedSubElements,
});
}
const newLocation: LocationProps = {
id: sectionId,
name: seriesLocation.name,
@@ -732,9 +588,9 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
return (
<div className="space-y-6">
{showToggle && !isSeriesMode && (
<div className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
<div className="bg-secondary rounded-xl p-4">
<InputField
icon={faToggleOn}
icon={ToggleRight}
fieldName={t('locationComponent.enableTool')}
input={
<ToggleSwitch
@@ -755,13 +611,15 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
<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}))}
.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
input={
@@ -771,45 +629,37 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
placeholder={t("locationComponent.newSectionPlaceholder")}
/>
}
actionIcon={faPlus}
actionIcon={Plus}
actionLabel={t("locationComponent.addSectionLabel")}
addButtonCallBack={handleAddSection}
/>
</div>
</div>
{sections.length > 0 ? (
sections.map((section: LocationProps) => (
<div key={section.id}
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
<div key={section.id} className="space-y-4">
<h3 className="text-lg font-semibold text-text-primary mb-4 flex items-center">
<FontAwesomeIcon icon={faMapMarkerAlt} className="mr-2 w-5 h-5"/>
<MapPin className="mr-2 w-5 h-5" strokeWidth={1.75}/>
{section.name}
<span
className="ml-2 text-sm bg-dark-background text-text-secondary py-0.5 px-2 rounded-full">
className="ml-2 text-sm bg-secondary text-text-secondary py-0.5 px-2 rounded-full">
{section.elements.length || 0}
</span>
<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>
<IconButton icon={Share2} variant="ghost" size="sm" shape="square"
tooltip={t("locationComponent.exportToSeries")}
onClick={(): Promise<void> => handleExportToSeries(section)}/>
)}
<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>
<IconButton icon={Trash2} variant="danger" size="sm" shape="square"
onClick={(): Promise<void> => handleRemoveSection(section.id)}/>
</div>
</h3>
<div className="space-y-4">
{section.elements.length > 0 ? (
section.elements.map((element, elementIndex) => (
<div key={element.id}
className="bg-dark-background rounded-lg p-3 border-l-4 border-primary">
className="bg-secondary rounded-lg p-3 border-l-4 border-primary">
<div className="mb-2">
<InputField
input={
@@ -824,17 +674,17 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
removeButtonCallBack={(): Promise<void> => handleRemoveElement(section.id, elementIndex)}
/>
</div>
<TexteAreaInput
<TextAreaInput
value={element.description}
setValue={(e: React.ChangeEvent<HTMLTextAreaElement>): void => handleElementChange(section.id, elementIndex, 'description', e.target.value)}
placeholder={t("locationComponent.elementDescriptionPlaceholder")}
/>
<div className="mt-4 pt-4 border-t border-secondary/50">
<div className="mt-4 pt-4 border-t border-secondary">
{element.subElements.length > 0 && (
<h4 className="text-sm italic text-text-secondary mb-3">{t("locationComponent.subElementsHeading")}</h4>
)}
{element.subElements.map((subElement: SubElement, subElementIndex: number) => (
<div key={subElement.id}
className="bg-darkest-background rounded-lg p-3 mb-3">
@@ -852,7 +702,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
removeButtonCallBack={(): Promise<void> => handleRemoveSubElement(section.id, elementIndex, subElementIndex)}
/>
</div>
<TexteAreaInput
<TextAreaInput
value={subElement.description}
setValue={(e) =>
handleSubElementChange(section.id, elementIndex, subElementIndex, 'description', e.target.value)
@@ -861,7 +711,7 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
/>
</div>
))}
<InputField
input={
<TextInput
@@ -885,13 +735,16 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
{t("locationComponent.noElementAvailable")}
</div>
)}
<InputField
input={
<TextInput
value={newElementNames[section.id] || ''}
setValue={(e: ChangeEvent<HTMLInputElement>) =>
setNewElementNames({...newElementNames, [section.id]: e.target.value})
setNewElementNames({
...newElementNames,
[section.id]: e.target.value
})
}
placeholder={t("locationComponent.newElementPlaceholder")}
/>
@@ -902,9 +755,8 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
</div>
))
) : (
<div
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-8 border border-secondary/50 text-center">
<p className="text-text-secondary mb-4">{t("locationComponent.noSectionAvailable")}</p>
<div className="text-center py-8">
<p className="text-text-secondary">{t("locationComponent.noSectionAvailable")}</p>
</div>
)}
</>
@@ -913,4 +765,4 @@ export function LocationComponent(props: LocationComponentProps, ref: React.Ref<
);
}
export default forwardRef(LocationComponent);
export default forwardRef(LocationComponent);

157
components/book/settings/locations/editor/LocationEditor.tsx
View File

@@ -1,16 +1,15 @@
'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 {LocationProps, useLocations, UseLocationsConfig} from '@/hooks/settings/useLocations';
import {useTranslations} from '@/lib/i18n';
import {Plus} from 'lucide-react';
import PulseLoader from '@/components/ui/PulseLoader';
import {BookContext, BookContextProps} from '@/context/BookContext';
import {SeriesLocationItem} from '@/lib/types/series';
import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
import AlertBox from '@/components/AlertBox';
import AlertBox from '@/components/ui/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';
@@ -24,17 +23,17 @@ import LocationEditorEdit from './LocationEditorEdit';
*/
export default function LocationEditor(): React.JSX.Element {
const t = useTranslations();
const {book} = useContext(BookContext);
const {book}: BookContextProps = useContext<BookContextProps>(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,
@@ -66,7 +65,7 @@ export default function LocationEditor(): React.JSX.Element {
exitEditMode,
backToList,
} = useLocations(config);
const availableSeriesLocations = useMemo(function (): SeriesLocationItem[] {
return seriesLocations.filter(function (sl: SeriesLocationItem): boolean {
return !sections.some(function (s: LocationProps): boolean {
@@ -74,12 +73,12 @@ export default function LocationEditor(): React.JSX.Element {
});
});
}, [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()) {
@@ -89,15 +88,15 @@ export default function LocationEditor(): React.JSX.Element {
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);
@@ -105,18 +104,14 @@ export default function LocationEditor(): React.JSX.Element {
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>
);
return <PulseLoader size="sm"/>;
}
const selectedSection: LocationProps | undefined = sections[selectedSectionIndex];
const canExport: boolean = Boolean(bookSeriesId && selectedSection && !selectedSection.seriesLocationId);
return (
<div className="flex flex-col h-full">
<ToolDetailHeader
@@ -128,81 +123,67 @@ export default function LocationEditor(): React.JSX.Element {
onEdit={enterEditMode}
onSave={handleSave}
onCancel={handleCancel}
onDelete={function (): void { setShowDeleteConfirm(true); }}
onExport={canExport ? function (): Promise<void> { return exportToSeries(selectedSection!); } : undefined}
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}
/>
}
{/* 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')}
/>
</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}
/>
</>
)}
{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={Plus}
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
@@ -225,7 +206,7 @@ export default function LocationEditor(): React.JSX.Element {
</div>
)}
</div>
{showDeleteConfirm && selectedSection && (
<AlertBox
title={t('locationComponent.deleteTitle')}
@@ -234,7 +215,9 @@ export default function LocationEditor(): React.JSX.Element {
confirmText={t('common.delete')}
cancelText={t('common.cancel')}
onConfirm={handleDelete}
onCancel={function (): void { setShowDeleteConfirm(false); }}
onCancel={function (): void {
setShowDeleteConfirm(false);
}}
/>
)}
</div>

27
components/book/settings/locations/editor/LocationEditorDetail.tsx
View File

@@ -1,9 +1,8 @@
'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';
import {Element, LocationProps, SubElement} from '@/hooks/settings/useLocations';
import {MapPin, Navigation} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
interface LocationEditorDetailProps {
section: LocationProps;
@@ -15,37 +14,39 @@ interface LocationEditorDetailProps {
* PAS de CollapsableArea, PAS de grids
*/
export default function LocationEditorDetail({
section,
}: LocationEditorDetailProps): React.JSX.Element {
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 key={element.id} className="border-b border-secondary 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"/>
<MapPin className="text-primary w-3 h-3" strokeWidth={1.75}/>
<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"/>
<Navigation className="text-muted w-2 h-2 mt-1.5"
strokeWidth={1.75}/>
<div>
<span className="text-text-primary text-xs">{subElement.name}</span>
<span
className="text-text-primary text-xs">{subElement.name}</span>
{subElement.description && (
<p className="text-muted text-xs">{subElement.description}</p>
)}

61
components/book/settings/locations/editor/LocationEditorEdit.tsx
View File

@@ -1,12 +1,11 @@
'use client';
import React, {ChangeEvent} from 'react';
import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
import {Element, LocationProps, 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';
import TextAreaInput from '@/components/form/TextAreaInput';
import {MapPin, Plus} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
interface LocationEditorEditProps {
section: LocationProps;
@@ -28,33 +27,33 @@ interface LocationEditorEditProps {
* 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 {
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 key={element.id} className="bg-tertiary rounded-lg p-3 border border-secondary">
<div className="flex items-center gap-2 mb-2">
<FontAwesomeIcon icon={faMapPin} className="text-primary w-3 h-3"/>
<MapPin className="text-primary w-3 h-3" strokeWidth={1.75}/>
<span className="text-text-secondary text-xs">{t('locationComponent.element')}</span>
</div>
<InputField
input={
<TextInput
@@ -69,9 +68,9 @@ export default function LocationEditorEdit({
return onRemoveElement(section.id, elementIndex);
}}
/>
<div className="mt-2">
<TexteAreaInput
<TextAreaInput
value={element.description}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onUpdateElement(section.id, elementIndex, 'description', e.target.value);
@@ -79,13 +78,13 @@ export default function LocationEditorEdit({
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">
<div className="mt-3 pt-3 border-t border-secondary 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">
<div key={subElement.id} className="bg-secondary rounded p-2">
<InputField
input={
<TextInput
@@ -105,7 +104,7 @@ export default function LocationEditorEdit({
})}
</div>
)}
{/* Ajouter sous-élément */}
<div className="mt-2">
<InputField
@@ -118,7 +117,7 @@ export default function LocationEditorEdit({
placeholder={t('locationComponent.newSubElementPlaceholder')}
/>
}
actionIcon={faPlus}
actionIcon={Plus}
actionLabel={t('locationComponent.addSubElement')}
addButtonCallBack={function (): Promise<void> {
return onAddSubElement(section.id, elementIndex);
@@ -128,7 +127,7 @@ export default function LocationEditorEdit({
</div>
);
})}
{/* Ajouter élément */}
<InputField
fieldName={t('locationComponent.addElement')}
@@ -141,7 +140,7 @@ export default function LocationEditorEdit({
placeholder={t('locationComponent.newElementPlaceholder')}
/>
}
actionIcon={faPlus}
actionIcon={Plus}
addButtonCallBack={function (): Promise<void> {
return onAddElement(section.id);
}}

76
components/book/settings/locations/editor/LocationEditorList.tsx
View File

@@ -1,11 +1,13 @@
'use client';
import React, {useState} from 'react';
import {LocationProps, Element} from '@/hooks/settings/useLocations';
import {Element, LocationProps} 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';
import {MapPin, Plus} from 'lucide-react';
import EmptyState from '@/components/ui/EmptyState';
import EntityListItem from '@/components/ui/EntityListItem';
import AvatarIcon from '@/components/ui/AvatarIcon';
import {useTranslations} from '@/lib/i18n';
interface LocationEditorListProps {
sections: LocationProps[];
@@ -19,19 +21,19 @@ interface LocationEditorListProps {
* PAS de scroll interne (géré par parent ComposerRightBar)
*/
export default function LocationEditorList({
sections,
onSectionClick,
onAddSection,
}: LocationEditorListProps): React.JSX.Element {
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 {
@@ -39,9 +41,9 @@ export default function LocationEditorList({
});
return count;
}
const filteredSections: LocationProps[] = getFilteredSections();
return (
<div className="space-y-3">
<div className="px-2">
@@ -55,55 +57,31 @@ export default function LocationEditorList({
placeholder={t('locationComponent.search')}
/>
}
actionIcon={faPlus}
actionIcon={Plus}
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>
<EmptyState icon={MapPin} title={t('locationComponent.noSectionAvailable')}
description={t('locationComponent.noSectionDescription')}/>
) : (
filteredSections.map(function (section: LocationProps, index: number): React.JSX.Element {
return (
<div
<EntityListItem
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>
size="sm"
onClick={function (): void {
onSectionClick(section, index);
}}
avatar={<AvatarIcon size="sm" icon={MapPin}/>}
title={section.name}
subtitle={t('locationComponent.elementsCount', {count: countTotalElements(section)})}
/>
);
})
)}

97
components/book/settings/locations/settings/LocationSettings.tsx
View File

@@ -1,16 +1,13 @@
'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 {LocationProps, useLocations, UseLocationsConfig} from '@/hooks/settings/useLocations';
import {useTranslations} from '@/lib/i18n';
import PulseLoader from '@/components/ui/PulseLoader';
import {BookContext, BookContextProps} from '@/context/BookContext';
import {SeriesLocationItem} from '@/lib/types/series';
import SeriesImportSelector from '@/components/form/SeriesImportSelector';
import ToolDetailHeader from '@/components/book/settings/ToolDetailHeader';
import AlertBox from '@/components/AlertBox';
import AlertBox from '@/components/ui/AlertBox';
import LocationSettingsList from './LocationSettingsList';
import LocationSettingsDetail from './LocationSettingsDetail';
@@ -19,7 +16,7 @@ import LocationSettingsEdit from './LocationSettingsEdit';
interface LocationSettingsProps {
entityType?: 'book' | 'series';
entityId?: string;
showToggle?: boolean;
toolEnabled?: boolean;
}
/**
@@ -28,23 +25,23 @@ interface LocationSettingsProps {
* Inclut: toggle tool, import from series, export to series
*/
export default function LocationSettings({
entityType = 'book',
entityId,
showToggle = true,
}: LocationSettingsProps): React.JSX.Element {
entityType = 'book',
entityId,
toolEnabled: parentToolEnabled,
}: LocationSettingsProps): React.JSX.Element {
const t = useTranslations();
const {book} = useContext(BookContext);
const {book}: BookContextProps = useContext<BookContextProps>(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,
@@ -77,7 +74,7 @@ export default function LocationSettings({
exitEditMode,
backToList,
} = useLocations(config);
const availableSeriesLocations = useMemo(function (): SeriesLocationItem[] {
return seriesLocations.filter(function (sl: SeriesLocationItem): boolean {
return !sections.some(function (s: LocationProps): boolean {
@@ -85,15 +82,15 @@ export default function LocationSettings({
});
});
}, [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);
@@ -101,18 +98,14 @@ export default function LocationSettings({
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>
);
return <PulseLoader/>;
}
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 */}
@@ -125,37 +118,21 @@ export default function LocationSettings({
onEdit={enterEditMode}
onSave={handleSave}
onCancel={handleCancel}
onDelete={function (): void { setShowDeleteConfirm(true); }}
onExport={canExport ? function (): Promise<void> { return exportToSeries(selectedSection!); } : undefined}
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) && (
{((parentToolEnabled !== undefined ? parentToolEnabled : toolEnabled) || isSeriesMode) && (
<>
{/* Import from series */}
{!isSeriesMode && bookSeriesId && availableSeriesLocations.length > 0 && (
@@ -168,7 +145,7 @@ export default function LocationSettings({
label={t("seriesImport.importFromSeries")}
/>
)}
{/* Liste des sections */}
<LocationSettingsList
sections={sections}
@@ -181,13 +158,13 @@ export default function LocationSettings({
)}
</div>
)}
{viewMode === 'detail' && selectedSection && (
<div className="p-4">
<LocationSettingsDetail section={selectedSection}/>
</div>
)}
{viewMode === 'edit' && selectedSection && (
<div className="p-4">
<LocationSettingsEdit
@@ -210,7 +187,7 @@ export default function LocationSettings({
</div>
)}
</div>
{/* Modal de confirmation de suppression */}
{showDeleteConfirm && selectedSection && (
<AlertBox
@@ -220,7 +197,9 @@ export default function LocationSettings({
confirmText={t('common.delete')}
cancelText={t('common.cancel')}
onConfirm={handleDelete}
onCancel={function (): void { setShowDeleteConfirm(false); }}
onCancel={function (): void {
setShowDeleteConfirm(false);
}}
/>
)}
</div>

63
components/book/settings/locations/settings/LocationSettingsDetail.tsx
View File

@@ -1,72 +1,69 @@
'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';
import {Element, LocationProps, SubElement} from '@/hooks/settings/useLocations';
import {ChevronRight, MapPin, Navigation} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
import DetailHeroSection from '@/components/ui/DetailHeroSection';
interface LocationSettingsDetailProps {
section: LocationProps;
}
export default function LocationSettingsDetail({
section,
}: LocationSettingsDetailProps): React.JSX.Element {
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>
<DetailHeroSection icon={MapPin} title={section.name}>
<p className="text-text-secondary mt-2">
{t("locationComponent.elementsCount", {count: section.elements.length})}
</p>
</DetailHeroSection>
{/* É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"/>
<div
className="text-center py-12 text-text-secondary">
<MapPin className="w-8 h-8 mb-3 opacity-50" strokeWidth={1.75}/>
<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">
<div key={element.id}
className="p-5 bg-tertiary rounded-xl">
{/* 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
className="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center">
<MapPin className="w-5 h-5 text-primary" strokeWidth={1.75}/>
</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'}`}>
<p className={`mb-4 ${element.description ? 'text-text-primary' : 'text-text-dimmed italic'}`}>
{element.description || '—'}
</p>
{/* Sub-elements */}
{element.subElements.length > 0 && (
<div className="pt-4 border-t border-secondary/30">
<div className="pt-4 border-t border-secondary">
<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"/>
<Navigation className="w-3 h-3" strokeWidth={1.75}/>
{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 key={subElement.id}
className="flex items-start gap-2 p-2 bg-secondary rounded-lg">
<ChevronRight className="w-3 h-3 text-primary mt-1 shrink-0"
strokeWidth={1.75}/>
<div className="min-w-0">
<p className="text-text-primary font-medium">{subElement.name}</p>
{subElement.description && (

68
components/book/settings/locations/settings/LocationSettingsEdit.tsx
View File

@@ -1,12 +1,12 @@
'use client';
import React, {ChangeEvent} from 'react';
import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
import {Element, LocationProps, 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';
import TextAreaInput from '@/components/form/TextAreaInput';
import {MapPin, Plus} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
import IconContainer from '@/components/ui/IconContainer';
interface LocationSettingsEditProps {
section: LocationProps;
@@ -28,36 +28,34 @@ interface LocationSettingsEditProps {
* 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 {
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>
<IconContainer icon={MapPin} size="md" shape="circle"/>
<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 key={element.id} className="space-y-3">
<div className="mb-3">
<InputField
fieldName={t("locationComponent.elementName")}
@@ -75,26 +73,26 @@ export default function LocationSettingsEdit({
}}
/>
</div>
<TexteAreaInput
<TextAreaInput
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">
<div className="mt-4 pt-4 border-t border-secondary">
{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 key={subElement.id} className="mb-3">
<div className="mb-2">
<InputField
input={
@@ -111,7 +109,7 @@ export default function LocationSettingsEdit({
}}
/>
</div>
<TexteAreaInput
<TextAreaInput
value={subElement.description}
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
onUpdateSubElement(section.id, elementIndex, subElementIndex, 'description', e.target.value);
@@ -121,7 +119,7 @@ export default function LocationSettingsEdit({
</div>
);
})}
{/* Ajouter sous-élément */}
<InputField
input={
@@ -133,7 +131,7 @@ export default function LocationSettingsEdit({
placeholder={t("locationComponent.newSubElementPlaceholder")}
/>
}
actionIcon={faPlus}
actionIcon={Plus}
actionLabel={t("locationComponent.addSubElement")}
addButtonCallBack={function (): Promise<void> {
return onAddSubElement(section.id, elementIndex);
@@ -143,9 +141,9 @@ export default function LocationSettingsEdit({
</div>
);
})}
{/* Ajouter élément */}
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30">
<div>
<InputField
fieldName={t("locationComponent.addElement")}
input={
@@ -157,7 +155,7 @@ export default function LocationSettingsEdit({
placeholder={t("locationComponent.newElementPlaceholder")}
/>
}
actionIcon={faPlus}
actionIcon={Plus}
actionLabel={t("locationComponent.addElement")}
addButtonCallBack={function (): Promise<void> {
return onAddElement(section.id);

103
components/book/settings/locations/settings/LocationSettingsList.tsx
View File

@@ -1,11 +1,13 @@
'use client';
import React, {ChangeEvent} from 'react';
import {LocationProps, Element} from '@/hooks/settings/useLocations';
import {Element, LocationProps} 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';
import {MapPin, Plus} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';
import EntityListItem from '@/components/ui/EntityListItem';
import EmptyState from '@/components/ui/EmptyState';
import AvatarIcon from '@/components/ui/AvatarIcon';
interface LocationSettingsListProps {
sections: LocationProps[];
@@ -21,14 +23,14 @@ interface LocationSettingsListProps {
* PAS de scroll interne (géré par parent)
*/
export default function LocationSettingsList({
sections,
newSectionName,
onSectionClick,
onAddSection,
onNewSectionNameChange,
}: LocationSettingsListProps): React.JSX.Element {
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 {
@@ -36,67 +38,40 @@ export default function LocationSettingsList({
});
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>
<InputField
input={
<TextInput
value={newSectionName}
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
onNewSectionNameChange(e.target.value);
}}
placeholder={t("locationComponent.newSectionPlaceholder")}
/>
}
actionIcon={Plus}
actionLabel={t("locationComponent.addSectionLabel")}
addButtonCallBack={onAddSection}
/>
<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>
<EmptyState icon={MapPin} title={t("locationComponent.noSectionAvailable")}
description={t("locationComponent.noSectionDescription")}/>
) : (
sections.map(function (section: LocationProps, index: number): React.JSX.Element {
return (
<div
<EntityListItem
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>
onClick={function (): void {
onSectionClick(index);
}}
avatar={<AvatarIcon icon={MapPin}/>}
title={section.name}
subtitle={t("locationComponent.elementsCount", {count: countTotalElements(section)})}
/>
);
})
)}