Remove CharacterComponent and CharacterDetail components
- Deleted `CharacterComponent` and `CharacterDetail` files from the project. - Refactored related logic to improve code maintainability and reduce redundancy.
This commit is contained in:
natreex
@@ -16,12 +16,33 @@ import {BookContext} from "@/context/BookContext";
|
||||
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";
|
||||
|
||||
interface WorldElementInputProps {
|
||||
sectionLabel: string;
|
||||
sectionType: string;
|
||||
}
|
||||
|
||||
function getElementTypeNumber(sectionType: string): number {
|
||||
const typeMap: { [key: string]: number } = {
|
||||
'laws': 0,
|
||||
'biomes': 1,
|
||||
'issues': 2,
|
||||
'customs': 3,
|
||||
'kingdoms': 4,
|
||||
'climate': 5,
|
||||
'resources': 6,
|
||||
'wildlife': 7,
|
||||
'arts': 8,
|
||||
'ethnicGroups': 9,
|
||||
'socialClasses': 10,
|
||||
'importantCharacters': 11,
|
||||
};
|
||||
return typeMap[sectionType] ?? 0;
|
||||
}
|
||||
|
||||
export default function WorldElementComponent({sectionLabel, sectionType}: WorldElementInputProps) {
|
||||
const t = useTranslations();
|
||||
const {lang} = useContext<LangContextProps>(LangContext);
|
||||
@@ -29,9 +50,11 @@ export default function WorldElementComponent({sectionLabel, sectionType}: World
|
||||
const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
|
||||
const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
|
||||
const {book} = useContext(BookContext);
|
||||
const {worlds, setWorlds, selectedWorldIndex} = useContext(WorldContext);
|
||||
const {errorMessage, successMessage} = useContext(AlertContext);
|
||||
const {worlds, setWorlds, selectedWorldIndex, isSeriesMode} = useContext(WorldContext);
|
||||
const {errorMessage} = useContext(AlertContext);
|
||||
const {session} = useContext(SessionContext);
|
||||
const {seriesId, localSeries} = useContext<SeriesContextProps>(SeriesContext);
|
||||
const {localSyncedSeries} = useContext<SeriesSyncContextProps>(SeriesSyncContext);
|
||||
|
||||
const [newElementName, setNewElementName] = useState<string>('');
|
||||
|
||||
@@ -42,7 +65,17 @@ export default function WorldElementComponent({sectionLabel, sectionType}: World
|
||||
try {
|
||||
let response: boolean;
|
||||
const elementId = (worlds[selectedWorldIndex][section] as WorldElement[])[index].id;
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
if (isSeriesMode) {
|
||||
const deleteData = {elementId: elementId};
|
||||
if (isCurrentlyOffline() || localSeries) {
|
||||
response = await window.electron.invoke<boolean>('db:series:world:element:delete', deleteData);
|
||||
} else {
|
||||
response = await System.authDeleteToServer<boolean>('series/world/element/delete', deleteData, session.accessToken, lang);
|
||||
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
|
||||
addToQueue('db:series:world:element:delete', deleteData);
|
||||
}
|
||||
}
|
||||
} else if (isCurrentlyOffline() || book?.localBook) {
|
||||
response = await window.electron.invoke<boolean>('db:book:world:element:remove', {
|
||||
elementId: elementId,
|
||||
});
|
||||
@@ -82,7 +115,30 @@ export default function WorldElementComponent({sectionLabel, sectionType}: World
|
||||
}
|
||||
try {
|
||||
let elementId: string;
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
if (isSeriesMode) {
|
||||
const addData = {
|
||||
worldId: worlds[selectedWorldIndex].id,
|
||||
elementType: getElementTypeNumber(section as string),
|
||||
name: newElementName,
|
||||
};
|
||||
if (isCurrentlyOffline() || localSeries) {
|
||||
elementId = await window.electron.invoke<string>('db:series:world:element:add', addData);
|
||||
} else {
|
||||
elementId = await System.authPostToServer<string>(
|
||||
'series/world/element/add',
|
||||
addData,
|
||||
session.accessToken,
|
||||
lang
|
||||
);
|
||||
if (localSyncedSeries.find((s: SyncedSeries): boolean => s.id === seriesId)) {
|
||||
addToQueue('db:series:world:element:add', addData);
|
||||
}
|
||||
}
|
||||
if (!elementId) {
|
||||
errorMessage(t("worldSetting.unknownError"))
|
||||
return;
|
||||
}
|
||||
} else if (isCurrentlyOffline() || book?.localBook) {
|
||||
elementId = await window.electron.invoke<string>('db:book:world:element:add', {
|
||||
elementType: section,
|
||||
worldId: worlds[selectedWorldIndex].id,
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
'use client'
|
||||
import {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
|
||||
import React, {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {faPlus, faToggleOn, IconDefinition} from "@fortawesome/free-solid-svg-icons";
|
||||
import {faPlus, faShare, faToggleOn, IconDefinition} from "@fortawesome/free-solid-svg-icons";
|
||||
import {WorldContext} from '@/context/WorldContext';
|
||||
import {BookContext} from "@/context/BookContext";
|
||||
import {AlertContext} from "@/context/AlertContext";
|
||||
import {SelectBoxProps} from "@/shared/interface";
|
||||
import System from "@/lib/models/System";
|
||||
import {elementSections, WorldProps, WorldListResponse} from "@/lib/models/World";
|
||||
import {elementSections, WorldListResponse, WorldProps} from "@/lib/models/World";
|
||||
import {SessionContext} from "@/context/SessionContext";
|
||||
import InputField from "@/components/form/InputField";
|
||||
import TextInput from '@/components/form/TextInput';
|
||||
@@ -21,6 +21,9 @@ import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQ
|
||||
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
|
||||
import {SyncedBook} from "@/lib/models/SyncedBook";
|
||||
import ToggleSwitch from "@/components/form/ToggleSwitch";
|
||||
import {SeriesWorldProps, SeriesWorldListItem} from "@/lib/models/Series";
|
||||
import SeriesImportSelector from "@/components/form/SeriesImportSelector";
|
||||
import SyncFieldWrapper from "@/components/form/SyncFieldWrapper";
|
||||
|
||||
export interface ElementSection {
|
||||
title: string;
|
||||
@@ -28,7 +31,14 @@ export interface ElementSection {
|
||||
icon: IconDefinition;
|
||||
}
|
||||
|
||||
export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: any) {
|
||||
interface WorldSettingProps {
|
||||
showToggle?: boolean;
|
||||
entityType?: 'book' | 'series';
|
||||
entityId?: string;
|
||||
}
|
||||
|
||||
export function WorldSetting(props: WorldSettingProps, 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);
|
||||
@@ -37,43 +47,72 @@ export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: a
|
||||
const {errorMessage, successMessage} = useContext(AlertContext);
|
||||
const {session} = useContext(SessionContext);
|
||||
const {book, setBook} = useContext(BookContext);
|
||||
const bookId: string = book?.bookId ? book.bookId.toString() : '';
|
||||
|
||||
const currentEntityId: string = entityId || book?.bookId || '';
|
||||
const isSeriesMode: boolean = entityType === 'series';
|
||||
|
||||
const [worlds, setWorlds] = useState<WorldProps[]>([]);
|
||||
const [seriesWorlds, setSeriesWorlds] = useState<SeriesWorldProps[]>([]);
|
||||
const [newWorldName, setNewWorldName] = useState<string>('');
|
||||
const [selectedWorldIndex, setSelectedWorldIndex] = useState<number>(0);
|
||||
const [worldsSelector, setWorldsSelector] = useState<SelectBoxProps[]>([]);
|
||||
const [showAddNewWorld, setShowAddNewWorld] = useState<boolean>(false);
|
||||
const [toolEnabled, setToolEnabled] = useState<boolean>(book?.tools?.worlds ?? false);
|
||||
|
||||
const [toolEnabled, setToolEnabled] = useState<boolean>(isSeriesMode ? true : (book?.tools?.worlds ?? false));
|
||||
const bookSeriesId: string | null = book?.seriesId || null;
|
||||
|
||||
useImperativeHandle(ref, function () {
|
||||
return {
|
||||
handleSave: handleUpdateWorld,
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
useEffect((): void => {
|
||||
getWorlds().then();
|
||||
}, []);
|
||||
if (currentEntityId) {
|
||||
getWorlds().then();
|
||||
}
|
||||
}, [currentEntityId]);
|
||||
|
||||
useEffect((): void => {
|
||||
if (bookSeriesId && !isSeriesMode && !isCurrentlyOffline()) {
|
||||
getSeriesWorlds().then();
|
||||
}
|
||||
}, [bookSeriesId]);
|
||||
|
||||
async function getSeriesWorlds(): Promise<void> {
|
||||
if (!bookSeriesId || isCurrentlyOffline()) return;
|
||||
try {
|
||||
const response: SeriesWorldProps[] = await System.authGetQueryToServer<SeriesWorldProps[]>('series/world/list', session.accessToken, lang, {
|
||||
seriesid: bookSeriesId
|
||||
});
|
||||
if (response) {
|
||||
setSeriesWorlds(response);
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
console.error('Error loading series worlds:', 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: 'worlds',
|
||||
enabled: enabled
|
||||
});
|
||||
} else {
|
||||
response = await System.authPatchToServer<boolean>('book/tool-setting', {
|
||||
bookId: bookId,
|
||||
bookId: currentEntityId,
|
||||
toolName: 'worlds',
|
||||
enabled: enabled
|
||||
}, session.accessToken, 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: 'worlds',
|
||||
enabled: enabled
|
||||
});
|
||||
@@ -81,11 +120,14 @@ export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: a
|
||||
}
|
||||
if (response && setBook && book) {
|
||||
setToolEnabled(enabled);
|
||||
setBook({...book, tools: {
|
||||
characters: book.tools?.characters ?? false,
|
||||
worlds: enabled,
|
||||
locations: book.tools?.locations ?? false
|
||||
}});
|
||||
setBook({
|
||||
...book, tools: {
|
||||
characters: book.tools?.characters ?? false,
|
||||
worlds: enabled,
|
||||
locations: book.tools?.locations ?? false,
|
||||
spells: book.tools?.spells ?? false
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
@@ -94,37 +136,73 @@ export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: a
|
||||
}
|
||||
}
|
||||
|
||||
async function getWorlds() {
|
||||
async function getWorlds(): Promise<void> {
|
||||
try {
|
||||
let response: WorldListResponse;
|
||||
if (isCurrentlyOffline()) {
|
||||
response = await window.electron.invoke<WorldListResponse>('db:book:worlds:get', {bookid: bookId});
|
||||
if (isSeriesMode) {
|
||||
// Series mode: server only (series are not local)
|
||||
const response: SeriesWorldProps[] = await System.authGetQueryToServer<SeriesWorldProps[]>('series/world/list', session.accessToken, lang, {
|
||||
seriesid: currentEntityId
|
||||
});
|
||||
if (response) {
|
||||
const mappedWorlds: WorldProps[] = response.map((world: SeriesWorldProps): WorldProps => ({
|
||||
id: world.id,
|
||||
name: world.name,
|
||||
history: world.history || '',
|
||||
politics: world.politics || '',
|
||||
economy: world.economy || '',
|
||||
religion: world.religion || '',
|
||||
languages: world.languages || '',
|
||||
laws: world.laws || [],
|
||||
biomes: world.biomes || [],
|
||||
issues: world.issues || [],
|
||||
customs: world.customs || [],
|
||||
kingdoms: world.kingdoms || [],
|
||||
climate: world.climate || [],
|
||||
resources: world.resources || [],
|
||||
wildlife: world.wildlife || [],
|
||||
arts: world.arts || [],
|
||||
ethnicGroups: world.ethnicGroups || [],
|
||||
socialClasses: world.socialClasses || [],
|
||||
importantCharacters: world.importantCharacters || [],
|
||||
}));
|
||||
setWorlds(mappedWorlds);
|
||||
const formattedWorlds: SelectBoxProps[] = response.map((world: SeriesWorldProps): SelectBoxProps => ({
|
||||
label: world.name,
|
||||
value: world.id,
|
||||
}));
|
||||
setWorldsSelector(formattedWorlds);
|
||||
}
|
||||
} else {
|
||||
if (book?.localBook) {
|
||||
response = await window.electron.invoke<WorldListResponse>('db:book:worlds:get', {bookid: bookId});
|
||||
// Book mode: dual offline/online logic
|
||||
let response: WorldListResponse;
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
response = await window.electron.invoke<WorldListResponse>('db:book:worlds:get', {bookid: currentEntityId});
|
||||
} else {
|
||||
response = await System.authGetQueryToServer<WorldListResponse>(`book/worlds`, session.accessToken, lang, {
|
||||
bookid: bookId,
|
||||
response = await System.authGetQueryToServer<WorldListResponse>('book/worlds', session.accessToken, lang, {
|
||||
bookid: currentEntityId,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (response) {
|
||||
setWorlds(response.worlds);
|
||||
setToolEnabled(response.enabled);
|
||||
if (setBook && book) {
|
||||
setBook({...book, tools: {
|
||||
characters: book.tools?.characters ?? false,
|
||||
worlds: response.enabled,
|
||||
locations: book.tools?.locations ?? false
|
||||
}});
|
||||
if (response) {
|
||||
setWorlds(response.worlds);
|
||||
setToolEnabled(response.enabled);
|
||||
if (setBook && book) {
|
||||
setBook({
|
||||
...book, tools: {
|
||||
characters: book.tools?.characters ?? false,
|
||||
worlds: response.enabled,
|
||||
locations: book.tools?.locations ?? false,
|
||||
spells: book.tools?.spells ?? false
|
||||
}
|
||||
});
|
||||
}
|
||||
const formattedWorlds: SelectBoxProps[] = response.worlds.map(
|
||||
(world: WorldProps): SelectBoxProps => ({
|
||||
label: world.name,
|
||||
value: world.id.toString(),
|
||||
}),
|
||||
);
|
||||
setWorldsSelector(formattedWorlds);
|
||||
}
|
||||
const formattedWorlds: SelectBoxProps[] = response.worlds.map(
|
||||
(world: WorldProps): SelectBoxProps => ({
|
||||
label: world.name,
|
||||
value: world.id.toString(),
|
||||
}),
|
||||
);
|
||||
setWorldsSelector(formattedWorlds);
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
@@ -134,38 +212,57 @@ export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: a
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function handleAddNewWorld(): Promise<void> {
|
||||
if (newWorldName.trim() === '') {
|
||||
errorMessage(t("worldSetting.newWorldNameError"));
|
||||
return;
|
||||
}
|
||||
try {
|
||||
let worldId: string;
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
worldId = await window.electron.invoke<string>('db:book:world:add', {
|
||||
let newWorldId: string;
|
||||
if (isSeriesMode) {
|
||||
// Series mode: server only
|
||||
newWorldId = await System.authPostToServer<string>(
|
||||
'series/world/add',
|
||||
{
|
||||
seriesId: currentEntityId,
|
||||
name: newWorldName,
|
||||
},
|
||||
session.accessToken,
|
||||
lang
|
||||
);
|
||||
if (!newWorldId) {
|
||||
errorMessage(t("worldSetting.addWorldError"));
|
||||
return;
|
||||
}
|
||||
} else if (isCurrentlyOffline() || book?.localBook) {
|
||||
// Book mode: offline/local
|
||||
newWorldId = await window.electron.invoke<string>('db:book:world:add', {
|
||||
worldName: newWorldName,
|
||||
bookId: bookId,
|
||||
bookId: currentEntityId,
|
||||
});
|
||||
if (!newWorldId) {
|
||||
errorMessage(t("worldSetting.addWorldError"));
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
worldId = await System.authPostToServer<string>('book/world/add', {
|
||||
// Book mode: online
|
||||
newWorldId = await System.authPostToServer<string>('book/world/add', {
|
||||
worldName: newWorldName,
|
||||
bookId: bookId,
|
||||
bookId: currentEntityId,
|
||||
}, session.accessToken, lang);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
if (!newWorldId) {
|
||||
errorMessage(t("worldSetting.addWorldError"));
|
||||
return;
|
||||
}
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
|
||||
addToQueue('db:book:world:add', {
|
||||
worldName: newWorldName,
|
||||
worldId,
|
||||
bookId: bookId,
|
||||
worldId: newWorldId,
|
||||
bookId: currentEntityId,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!worldId) {
|
||||
errorMessage(t("worldSetting.addWorldError"));
|
||||
return;
|
||||
}
|
||||
const newWorldId: string = worldId;
|
||||
const newWorld: WorldProps = {
|
||||
id: newWorldId,
|
||||
name: newWorldName,
|
||||
@@ -202,23 +299,44 @@ export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: a
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUpdateWorld(): Promise<void> {
|
||||
try {
|
||||
let response: boolean;
|
||||
const worldData = {
|
||||
world: worlds[selectedWorldIndex],
|
||||
bookId: bookId,
|
||||
};
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
response = await window.electron.invoke<boolean>('db:book:world:update', worldData);
|
||||
} else {
|
||||
response = await System.authPatchToServer<boolean>('book/world/update', worldData, session.accessToken, lang);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('db:book:world:update', worldData);
|
||||
async function handleUpdateWorld(): Promise<void> {
|
||||
if (worlds.length === 0) return;
|
||||
try {
|
||||
const currentWorld: WorldProps = worlds[selectedWorldIndex];
|
||||
let response: boolean;
|
||||
|
||||
if (isSeriesMode) {
|
||||
// Series mode: server only
|
||||
response = await System.authPatchToServer<boolean>('series/world/update', {
|
||||
worldId: currentWorld.id,
|
||||
name: currentWorld.name,
|
||||
history: currentWorld.history,
|
||||
politics: currentWorld.politics,
|
||||
economy: currentWorld.economy,
|
||||
religion: currentWorld.religion,
|
||||
languages: currentWorld.languages,
|
||||
}, session.accessToken, lang);
|
||||
} else if (isCurrentlyOffline() || book?.localBook) {
|
||||
// Book mode: offline/local
|
||||
response = await window.electron.invoke<boolean>('db:book:world:update', {
|
||||
world: currentWorld,
|
||||
bookId: currentEntityId,
|
||||
});
|
||||
} else {
|
||||
// Book mode: online
|
||||
response = await System.authPatchToServer<boolean>('book/world/update', {
|
||||
world: currentWorld,
|
||||
bookId: currentEntityId,
|
||||
}, session.accessToken, lang);
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
|
||||
addToQueue('db:book:world:update', {
|
||||
world: currentWorld,
|
||||
bookId: currentEntityId,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!response) {
|
||||
errorMessage(t("worldSetting.updateWorldError"));
|
||||
return;
|
||||
@@ -232,16 +350,130 @@ export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: a
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handleWorldSelect(worldId: string): void {
|
||||
const index: number = worlds.findIndex((world: WorldProps): boolean => world.id === worldId);
|
||||
if (index !== -1) {
|
||||
setSelectedWorldIndex(index);
|
||||
}
|
||||
}
|
||||
|
||||
function handleInputChange(value: string, field: keyof WorldProps) {
|
||||
const updatedWorlds = [...worlds] as WorldProps[];
|
||||
(updatedWorlds[selectedWorldIndex][field] as string) = value;
|
||||
setWorlds(updatedWorlds);
|
||||
}
|
||||
|
||||
|
||||
async function handleExportToSeries(): Promise<void> {
|
||||
if (isCurrentlyOffline()) return;
|
||||
const selectedWorld: WorldProps | undefined = worlds[selectedWorldIndex];
|
||||
if (!selectedWorld || !bookSeriesId) return;
|
||||
|
||||
try {
|
||||
const seriesWorldId: string = await System.authPostToServer<string>('series/world/add', {
|
||||
seriesId: bookSeriesId,
|
||||
world: {
|
||||
name: selectedWorld.name,
|
||||
history: selectedWorld.history || null,
|
||||
politics: selectedWorld.politics || null,
|
||||
economy: selectedWorld.economy || null,
|
||||
religion: selectedWorld.religion || null,
|
||||
languages: selectedWorld.languages || null,
|
||||
}
|
||||
}, session.accessToken, lang);
|
||||
|
||||
if (seriesWorldId) {
|
||||
const updateResponse: boolean = await System.authPostToServer<boolean>('book/world/update', {
|
||||
world: {
|
||||
...selectedWorld,
|
||||
seriesWorldId: seriesWorldId
|
||||
},
|
||||
}, session.accessToken, lang);
|
||||
|
||||
if (updateResponse) {
|
||||
const updatedWorlds: WorldProps[] = [...worlds];
|
||||
updatedWorlds[selectedWorldIndex] = {...selectedWorld, seriesWorldId: seriesWorldId};
|
||||
setWorlds(updatedWorlds);
|
||||
await getSeriesWorlds();
|
||||
successMessage(t("worldSetting.exportSuccess"));
|
||||
}
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleImportFromSeries(seriesWorldId: string): Promise<void> {
|
||||
if (isCurrentlyOffline()) return;
|
||||
const seriesWorld: SeriesWorldListItem | undefined = seriesWorlds.find((w) => w.id === seriesWorldId);
|
||||
if (!seriesWorld) return;
|
||||
|
||||
try {
|
||||
const worldId: string = await System.authPostToServer<string>('book/world/add', {
|
||||
worldName: seriesWorld.name,
|
||||
bookId: currentEntityId,
|
||||
seriesWorldId: seriesWorldId,
|
||||
}, session.accessToken, lang);
|
||||
|
||||
if (!worldId) {
|
||||
errorMessage(t("worldSetting.importError"));
|
||||
return;
|
||||
}
|
||||
|
||||
// Sync to local if book is synced
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === currentEntityId)) {
|
||||
addToQueue('db:book:world:add', {
|
||||
worldName: seriesWorld.name,
|
||||
worldId: worldId,
|
||||
bookId: currentEntityId,
|
||||
});
|
||||
}
|
||||
|
||||
const newWorld: WorldProps = {
|
||||
id: worldId,
|
||||
name: seriesWorld.name,
|
||||
history: seriesWorld.history || '',
|
||||
politics: seriesWorld.politics || '',
|
||||
economy: seriesWorld.economy || '',
|
||||
religion: seriesWorld.religion || '',
|
||||
languages: seriesWorld.languages || '',
|
||||
laws: [],
|
||||
biomes: [],
|
||||
issues: [],
|
||||
customs: [],
|
||||
kingdoms: [],
|
||||
climate: [],
|
||||
resources: [],
|
||||
wildlife: [],
|
||||
arts: [],
|
||||
ethnicGroups: [],
|
||||
socialClasses: [],
|
||||
importantCharacters: [],
|
||||
seriesWorldId: seriesWorldId,
|
||||
};
|
||||
setWorlds([...worlds, newWorld]);
|
||||
setWorldsSelector([
|
||||
...worldsSelector,
|
||||
{label: seriesWorld.name, value: worldId},
|
||||
]);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getSeriesWorldForCurrentWorld(): SeriesWorldProps | null {
|
||||
const currentWorld: WorldProps = worlds[selectedWorldIndex];
|
||||
if (!currentWorld?.seriesWorldId) return null;
|
||||
return seriesWorlds.find((world: SeriesWorldListItem): boolean => world.id === currentWorld.seriesWorldId) || null;
|
||||
}
|
||||
|
||||
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}
|
||||
@@ -258,21 +490,27 @@ export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: a
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{toolEnabled && (
|
||||
{(toolEnabled || isSeriesMode) && (
|
||||
<>
|
||||
<div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
|
||||
{!isSeriesMode && bookSeriesId && !isCurrentlyOffline() &&
|
||||
seriesWorlds.filter((seriesWorld: SeriesWorldProps): boolean => !worlds.some((world: WorldProps): boolean => world.seriesWorldId === seriesWorld.id)).length > 0 && (
|
||||
<SeriesImportSelector
|
||||
availableItems={seriesWorlds
|
||||
.filter((seriesWorld: SeriesWorldProps): boolean => !worlds.some((world: WorldProps): boolean => world.seriesWorldId === seriesWorld.id))
|
||||
.map((seriesWorld: SeriesWorldProps) => ({id: seriesWorld.id, name: seriesWorld.name}))}
|
||||
onImport={handleImportFromSeries}
|
||||
placeholder={t("seriesImport.selectElement")}
|
||||
label={t("seriesImport.importFromSeries")}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
|
||||
<div className="grid grid-cols-1 gap-4 mb-4">
|
||||
<InputField
|
||||
fieldName={t("worldSetting.selectWorld")}
|
||||
input={
|
||||
<SelectBox
|
||||
onChangeCallBack={(e) => {
|
||||
const worldId = e.target.value;
|
||||
const index = worlds.findIndex(world => world.id.toString() === worldId);
|
||||
if (index !== -1) {
|
||||
setSelectedWorldIndex(index);
|
||||
}
|
||||
}}
|
||||
onChangeCallBack={(e) => handleWorldSelect(e.target.value)}
|
||||
data={worldsSelector.length > 0 ? worldsSelector : [{
|
||||
label: t("worldSetting.noWorldAvailable"),
|
||||
value: '0'
|
||||
@@ -300,37 +538,78 @@ export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: a
|
||||
addButtonCallBack={handleAddNewWorld}
|
||||
/>
|
||||
)}
|
||||
{!isSeriesMode && bookSeriesId && !isCurrentlyOffline() && worlds[selectedWorldIndex] && !worlds[selectedWorldIndex].seriesWorldId && (
|
||||
<button
|
||||
onClick={handleExportToSeries}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-blue-500/90 hover:bg-blue-500 rounded-xl border border-blue-600 shadow-md hover:shadow-lg transition-all duration-200"
|
||||
>
|
||||
<FontAwesomeIcon icon={faShare} className="w-4 h-4 text-text-primary"/>
|
||||
<span className="text-text-primary font-medium">{t("worldSetting.exportToSeries")}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{worlds.length > 0 && worlds[selectedWorldIndex] ? (
|
||||
<WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex}}>
|
||||
<WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex, isSeriesMode}}>
|
||||
<div
|
||||
className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
|
||||
<div className="mb-4">
|
||||
<InputField
|
||||
fieldName={t("worldSetting.worldName")}
|
||||
input={
|
||||
<TextInput
|
||||
value={worlds[selectedWorldIndex].name}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) => {
|
||||
const updatedWorlds: WorldProps[] = [...worlds];
|
||||
updatedWorlds[selectedWorldIndex].name = e.target.value
|
||||
setWorlds(updatedWorlds);
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={worlds[selectedWorldIndex].seriesWorldId}
|
||||
seriesValue={getSeriesWorldForCurrentWorld()?.name || ''}
|
||||
currentValue={worlds[selectedWorldIndex].name}
|
||||
bookElementId={worlds[selectedWorldIndex].id}
|
||||
field="name"
|
||||
elementType="world"
|
||||
onDownload={() => {
|
||||
const seriesWorld = getSeriesWorldForCurrentWorld();
|
||||
if (seriesWorld) {
|
||||
const updatedWorlds: WorldProps[] = [...worlds];
|
||||
updatedWorlds[selectedWorldIndex].name = seriesWorld.name;
|
||||
setWorlds(updatedWorlds);
|
||||
}
|
||||
}}
|
||||
placeholder={t("worldSetting.worldNamePlaceholder")}
|
||||
/>
|
||||
onSyncComplete={getSeriesWorlds}
|
||||
>
|
||||
<TextInput
|
||||
value={worlds[selectedWorldIndex].name}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) => {
|
||||
const updatedWorlds: WorldProps[] = [...worlds];
|
||||
updatedWorlds[selectedWorldIndex].name = e.target.value
|
||||
setWorlds(updatedWorlds);
|
||||
}}
|
||||
placeholder={t("worldSetting.worldNamePlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<InputField
|
||||
fieldName={t("worldSetting.worldHistory")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].history || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'history')}
|
||||
placeholder={t("worldSetting.worldHistoryPlaceholder")}
|
||||
/>
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={worlds[selectedWorldIndex].seriesWorldId}
|
||||
seriesValue={getSeriesWorldForCurrentWorld()?.history || ''}
|
||||
currentValue={worlds[selectedWorldIndex].history || ''}
|
||||
bookElementId={worlds[selectedWorldIndex].id}
|
||||
field="history"
|
||||
elementType="world"
|
||||
onDownload={() => {
|
||||
const seriesWorld = getSeriesWorldForCurrentWorld();
|
||||
if (seriesWorld) handleInputChange(seriesWorld.history || '', 'history');
|
||||
}}
|
||||
onSyncComplete={getSeriesWorlds}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].history || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'history')}
|
||||
placeholder={t("worldSetting.worldHistoryPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
@@ -341,21 +620,49 @@ export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: a
|
||||
<InputField
|
||||
fieldName={t("worldSetting.politics")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].politics || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'politics')}
|
||||
placeholder={t("worldSetting.politicsPlaceholder")}
|
||||
/>
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={worlds[selectedWorldIndex].seriesWorldId}
|
||||
seriesValue={getSeriesWorldForCurrentWorld()?.politics || ''}
|
||||
currentValue={worlds[selectedWorldIndex].politics || ''}
|
||||
bookElementId={worlds[selectedWorldIndex].id}
|
||||
field="politics"
|
||||
elementType="world"
|
||||
onDownload={() => {
|
||||
const seriesWorld = getSeriesWorldForCurrentWorld();
|
||||
if (seriesWorld) handleInputChange(seriesWorld.politics || '', 'politics');
|
||||
}}
|
||||
onSyncComplete={getSeriesWorlds}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].politics || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'politics')}
|
||||
placeholder={t("worldSetting.politicsPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
<InputField
|
||||
fieldName={t("worldSetting.economy")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].economy || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'economy')}
|
||||
placeholder={t("worldSetting.economyPlaceholder")}
|
||||
/>
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={worlds[selectedWorldIndex].seriesWorldId}
|
||||
seriesValue={getSeriesWorldForCurrentWorld()?.economy || ''}
|
||||
currentValue={worlds[selectedWorldIndex].economy || ''}
|
||||
bookElementId={worlds[selectedWorldIndex].id}
|
||||
field="economy"
|
||||
elementType="world"
|
||||
onDownload={() => {
|
||||
const seriesWorld = getSeriesWorldForCurrentWorld();
|
||||
if (seriesWorld) handleInputChange(seriesWorld.economy || '', 'economy');
|
||||
}}
|
||||
onSyncComplete={getSeriesWorlds}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].economy || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'economy')}
|
||||
placeholder={t("worldSetting.economyPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
@@ -367,21 +674,49 @@ export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: a
|
||||
<InputField
|
||||
fieldName={t("worldSetting.religion")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].religion || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'religion')}
|
||||
placeholder={t("worldSetting.religionPlaceholder")}
|
||||
/>
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={worlds[selectedWorldIndex].seriesWorldId}
|
||||
seriesValue={getSeriesWorldForCurrentWorld()?.religion || ''}
|
||||
currentValue={worlds[selectedWorldIndex].religion || ''}
|
||||
bookElementId={worlds[selectedWorldIndex].id}
|
||||
field="religion"
|
||||
elementType="world"
|
||||
onDownload={() => {
|
||||
const seriesWorld = getSeriesWorldForCurrentWorld();
|
||||
if (seriesWorld) handleInputChange(seriesWorld.religion || '', 'religion');
|
||||
}}
|
||||
onSyncComplete={getSeriesWorlds}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].religion || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'religion')}
|
||||
placeholder={t("worldSetting.religionPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
<InputField
|
||||
fieldName={t("worldSetting.languages")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].languages || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'languages')}
|
||||
placeholder={t("worldSetting.languagesPlaceholder")}
|
||||
/>
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={worlds[selectedWorldIndex].seriesWorldId}
|
||||
seriesValue={getSeriesWorldForCurrentWorld()?.languages || ''}
|
||||
currentValue={worlds[selectedWorldIndex].languages || ''}
|
||||
bookElementId={worlds[selectedWorldIndex].id}
|
||||
field="languages"
|
||||
elementType="world"
|
||||
onDownload={() => {
|
||||
const seriesWorld = getSeriesWorldForCurrentWorld();
|
||||
if (seriesWorld) handleInputChange(seriesWorld.languages || '', 'languages');
|
||||
}}
|
||||
onSyncComplete={getSeriesWorlds}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].languages || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'languages')}
|
||||
placeholder={t("worldSetting.languagesPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
@@ -417,4 +752,4 @@ export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: a
|
||||
);
|
||||
}
|
||||
|
||||
export default forwardRef(WorldSetting);
|
||||
export default forwardRef(WorldSetting);
|
||||
|
||||
226
components/book/settings/world/editor/WorldEditor.tsx
Normal file
226
components/book/settings/world/editor/WorldEditor.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
'use client';
|
||||
import React, {useCallback, useContext, useMemo, useState} from 'react';
|
||||
import {useWorlds, UseWorldsConfig} from '@/hooks/settings/useWorlds';
|
||||
import {useTranslations} from 'next-intl';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faPlus, faSpinner, faToggleOn} from '@fortawesome/free-solid-svg-icons';
|
||||
import {BookContext} from '@/context/BookContext';
|
||||
import {WorldProps} from '@/lib/models/World';
|
||||
import {SeriesWorldProps} 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 WorldEditorList from './WorldEditorList';
|
||||
import WorldEditorDetail from './WorldEditorDetail';
|
||||
import WorldEditorEdit from './WorldEditorEdit';
|
||||
|
||||
/**
|
||||
* WorldEditor - Orchestrateur pour ComposerRightBar
|
||||
* Mêmes fonctionnalités que WorldSettings, layout condensé
|
||||
* Inclut: toggle tool, import from series, export to series
|
||||
*/
|
||||
export default function WorldEditor(): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
const {book} = useContext(BookContext);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
|
||||
const [showAddForm, setShowAddForm] = useState<boolean>(false);
|
||||
|
||||
const config: UseWorldsConfig = useMemo(function (): UseWorldsConfig {
|
||||
return {
|
||||
entityType: 'book',
|
||||
entityId: book?.bookId || '',
|
||||
};
|
||||
}, [book?.bookId]);
|
||||
|
||||
const {
|
||||
worlds,
|
||||
seriesWorlds,
|
||||
selectedWorldIndex,
|
||||
toolEnabled,
|
||||
isLoading,
|
||||
bookSeriesId,
|
||||
newWorldName,
|
||||
viewMode,
|
||||
saveWorld,
|
||||
updateWorldField,
|
||||
addNewWorld,
|
||||
toggleTool,
|
||||
importFromSeries,
|
||||
exportToSeries,
|
||||
refreshSeriesWorlds,
|
||||
setNewWorldName,
|
||||
setWorlds,
|
||||
getSeriesWorldForCurrentWorld,
|
||||
enterDetailMode,
|
||||
enterEditMode,
|
||||
exitEditMode,
|
||||
backToList,
|
||||
} = useWorlds(config);
|
||||
|
||||
const availableSeriesWorlds = useMemo(function (): SeriesWorldProps[] {
|
||||
return seriesWorlds.filter(function (sw: SeriesWorldProps): boolean {
|
||||
return !worlds.some(function (w: WorldProps): boolean {
|
||||
return w.seriesWorldId === sw.id;
|
||||
});
|
||||
});
|
||||
}, [seriesWorlds, worlds]);
|
||||
|
||||
const handleWorldFieldChange = useCallback(function (field: keyof WorldProps, value: string): void {
|
||||
updateWorldField(field, value);
|
||||
}, [updateWorldField]);
|
||||
|
||||
// Wrapper pour convertir WorldProps en worldId
|
||||
const handleWorldClick = useCallback(function (world: WorldProps): void {
|
||||
enterDetailMode(world.id);
|
||||
}, [enterDetailMode]);
|
||||
|
||||
// Gestion de l'ajout
|
||||
async function handleAddWorld(): Promise<void> {
|
||||
if (newWorldName.trim()) {
|
||||
await addNewWorld();
|
||||
setShowAddForm(false);
|
||||
} else {
|
||||
setShowAddForm(true);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(): Promise<void> {
|
||||
await exitEditMode(true);
|
||||
}
|
||||
|
||||
function handleCancel(): void {
|
||||
exitEditMode(false);
|
||||
}
|
||||
|
||||
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 selectedWorld: WorldProps | undefined = worlds[selectedWorldIndex];
|
||||
const canExport: boolean = Boolean(bookSeriesId && selectedWorld && !selectedWorld.seriesWorldId);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<ToolDetailHeader
|
||||
title={selectedWorld?.name || ''}
|
||||
defaultTitle={t('worldSetting.newWorld')}
|
||||
viewMode={viewMode}
|
||||
isNew={false}
|
||||
onBack={backToList}
|
||||
onEdit={enterEditMode}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
onExport={canExport ? exportToSeries : undefined}
|
||||
showExport={canExport}
|
||||
showDelete={false}
|
||||
/>
|
||||
|
||||
<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('worldSetting.enableTool')}
|
||||
input={
|
||||
<ToggleSwitch
|
||||
checked={toolEnabled}
|
||||
onChange={toggleTool}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{toolEnabled && (
|
||||
<>
|
||||
{/* Import from series */}
|
||||
{bookSeriesId && availableSeriesWorlds.length > 0 && (
|
||||
<SeriesImportSelector
|
||||
availableItems={availableSeriesWorlds.map(function (sw: SeriesWorldProps) {
|
||||
return {id: sw.id, name: sw.name};
|
||||
})}
|
||||
onImport={importFromSeries}
|
||||
placeholder={t('seriesImport.selectElement')}
|
||||
label={t('seriesImport.importFromSeries')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showAddForm && (
|
||||
<div className="px-2">
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={newWorldName}
|
||||
setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
|
||||
setNewWorldName(e.target.value);
|
||||
}}
|
||||
placeholder={t('worldSetting.newWorldPlaceholder')}
|
||||
/>
|
||||
}
|
||||
actionIcon={faPlus}
|
||||
actionLabel={t('worldSetting.createWorldLabel')}
|
||||
addButtonCallBack={async function (): Promise<void> {
|
||||
await addNewWorld();
|
||||
setShowAddForm(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<WorldEditorList
|
||||
worlds={worlds}
|
||||
onWorldClick={handleWorldClick}
|
||||
onAddWorld={handleAddWorld}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewMode === 'detail' && selectedWorld && (
|
||||
<div className="p-4">
|
||||
<WorldEditorDetail
|
||||
world={selectedWorld}
|
||||
seriesWorld={getSeriesWorldForCurrentWorld()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewMode === 'edit' && selectedWorld && (
|
||||
<div className="p-4">
|
||||
<WorldEditorEdit
|
||||
world={selectedWorld}
|
||||
worlds={worlds}
|
||||
selectedWorldIndex={selectedWorldIndex}
|
||||
setWorlds={setWorlds}
|
||||
onWorldFieldChange={handleWorldFieldChange}
|
||||
seriesWorld={getSeriesWorldForCurrentWorld()}
|
||||
onSyncComplete={refreshSeriesWorlds}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showDeleteConfirm && selectedWorld && (
|
||||
<AlertBox
|
||||
title={t('worldSetting.deleteTitle')}
|
||||
message={t('worldSetting.deleteMessage', {name: selectedWorld.name})}
|
||||
type="danger"
|
||||
confirmText={t('common.delete')}
|
||||
cancelText={t('common.cancel')}
|
||||
onConfirm={async function (): Promise<void> { setShowDeleteConfirm(false); }}
|
||||
onCancel={function (): void { setShowDeleteConfirm(false); }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
87
components/book/settings/world/editor/WorldEditorDetail.tsx
Normal file
87
components/book/settings/world/editor/WorldEditorDetail.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import {WorldProps, elementSections, ElementSection, WorldElement} from '@/lib/models/World';
|
||||
import {SeriesWorldProps} from '@/lib/models/Series';
|
||||
import {useTranslations} from 'next-intl';
|
||||
|
||||
interface WorldEditorDetailProps {
|
||||
world: WorldProps;
|
||||
seriesWorld?: SeriesWorldProps | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* WorldEditorDetail - Version sidebar lecture seule
|
||||
* Mêmes fonctionnalités que WorldSettingsDetail, layout linéaire
|
||||
*/
|
||||
export default function WorldEditorDetail({
|
||||
world,
|
||||
seriesWorld,
|
||||
}: WorldEditorDetailProps): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
|
||||
function renderField(label: string, value: string | null | undefined): React.JSX.Element | null {
|
||||
if (!value) return null;
|
||||
return (
|
||||
<div className="mb-3">
|
||||
<span className="text-text-secondary text-xs block mb-1">{label}</span>
|
||||
<p className="text-text-primary text-sm whitespace-pre-wrap">{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function renderElementSection(section: ElementSection): React.JSX.Element | null {
|
||||
const elements: WorldElement[] = world[section.section] as WorldElement[];
|
||||
if (!elements || elements.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div key={section.section} className="border-b border-secondary/30 pb-3">
|
||||
<h4 className="text-text-primary font-medium text-sm mb-2">{section.title}</h4>
|
||||
<div className="space-y-2">
|
||||
{elements.map(function (element: WorldElement): React.JSX.Element {
|
||||
return (
|
||||
<div key={element.id} className="bg-secondary/20 rounded-lg p-2">
|
||||
<p className="text-text-primary font-medium text-sm">{element.name}</p>
|
||||
{element.description && (
|
||||
<p className="text-text-secondary text-xs mt-1">{element.description}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Informations de base */}
|
||||
<div className="border-b border-secondary/30 pb-3">
|
||||
<h3 className="text-text-primary font-semibold text-base mb-3">{world.name}</h3>
|
||||
{renderField(t('worldSetting.worldHistory'), world.history)}
|
||||
</div>
|
||||
|
||||
{/* Politique et économie */}
|
||||
{(world.politics || world.economy) && (
|
||||
<div className="border-b border-secondary/30 pb-3">
|
||||
<h4 className="text-text-primary font-medium text-sm mb-2">{t('worldSetting.politicsEconomy')}</h4>
|
||||
{renderField(t('worldSetting.politics'), world.politics)}
|
||||
{renderField(t('worldSetting.economy'), world.economy)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Religion et langues */}
|
||||
{(world.religion || world.languages) && (
|
||||
<div className="border-b border-secondary/30 pb-3">
|
||||
<h4 className="text-text-primary font-medium text-sm mb-2">{t('worldSetting.cultureLanguages')}</h4>
|
||||
{renderField(t('worldSetting.religion'), world.religion)}
|
||||
{renderField(t('worldSetting.languages'), world.languages)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Sections d'éléments */}
|
||||
{elementSections.map(function (section: ElementSection): React.JSX.Element | null {
|
||||
return renderElementSection(section);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
237
components/book/settings/world/editor/WorldEditorEdit.tsx
Normal file
237
components/book/settings/world/editor/WorldEditorEdit.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
'use client';
|
||||
import React, {ChangeEvent, Dispatch, SetStateAction} from 'react';
|
||||
import {WorldProps, elementSections, ElementSection} from '@/lib/models/World';
|
||||
import {SeriesWorldProps} from '@/lib/models/Series';
|
||||
import {WorldContext} from '@/context/WorldContext';
|
||||
import InputField from '@/components/form/InputField';
|
||||
import TextInput from '@/components/form/TextInput';
|
||||
import TexteAreaInput from '@/components/form/TexteAreaInput';
|
||||
import SyncFieldWrapper from '@/components/form/SyncFieldWrapper';
|
||||
import WorldElementComponent from '@/components/book/settings/world/WorldElement';
|
||||
import {useTranslations} from 'next-intl';
|
||||
|
||||
interface WorldEditorEditProps {
|
||||
world: WorldProps;
|
||||
worlds: WorldProps[];
|
||||
selectedWorldIndex: number;
|
||||
setWorlds: Dispatch<SetStateAction<WorldProps[]>>;
|
||||
onWorldFieldChange: (field: keyof WorldProps, value: string) => void;
|
||||
seriesWorld?: SeriesWorldProps | null;
|
||||
onSyncComplete?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* WorldEditorEdit - Version sidebar édition
|
||||
* Mêmes fonctionnalités que WorldSettingsEdit, layout linéaire
|
||||
* SyncFieldWrapper pour tous les champs
|
||||
*/
|
||||
export default function WorldEditorEdit({
|
||||
world,
|
||||
worlds,
|
||||
selectedWorldIndex,
|
||||
setWorlds,
|
||||
onWorldFieldChange,
|
||||
seriesWorld,
|
||||
onSyncComplete,
|
||||
}: WorldEditorEditProps): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex, isSeriesMode: false}}>
|
||||
<div className="space-y-4">
|
||||
{/* Informations de base */}
|
||||
<div className="border-b border-secondary/30 pb-3">
|
||||
<h4 className="text-text-primary font-medium text-sm mb-3">{t('worldSetting.basicInfo')}</h4>
|
||||
<div className="space-y-3">
|
||||
<InputField
|
||||
fieldName={t("worldSetting.worldName")}
|
||||
input={
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={world.seriesWorldId}
|
||||
seriesValue={seriesWorld?.name || ''}
|
||||
currentValue={world.name}
|
||||
bookElementId={world.id}
|
||||
field="name"
|
||||
elementType="world"
|
||||
onDownload={function (): void {
|
||||
if (seriesWorld) {
|
||||
const updatedWorlds: WorldProps[] = [...worlds];
|
||||
updatedWorlds[selectedWorldIndex].name = seriesWorld.name;
|
||||
setWorlds(updatedWorlds);
|
||||
}
|
||||
}}
|
||||
onSyncComplete={onSyncComplete}
|
||||
>
|
||||
<TextInput
|
||||
value={world.name}
|
||||
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
|
||||
const updatedWorlds: WorldProps[] = [...worlds];
|
||||
updatedWorlds[selectedWorldIndex].name = e.target.value;
|
||||
setWorlds(updatedWorlds);
|
||||
}}
|
||||
placeholder={t("worldSetting.worldNamePlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
|
||||
<InputField
|
||||
fieldName={t("worldSetting.worldHistory")}
|
||||
input={
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={world.seriesWorldId}
|
||||
seriesValue={seriesWorld?.history || ''}
|
||||
currentValue={world.history || ''}
|
||||
bookElementId={world.id}
|
||||
field="history"
|
||||
elementType="world"
|
||||
onDownload={function (): void {
|
||||
if (seriesWorld) onWorldFieldChange('history', seriesWorld.history || '');
|
||||
}}
|
||||
onSyncComplete={onSyncComplete}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={world.history || ''}
|
||||
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
|
||||
onWorldFieldChange('history', e.target.value);
|
||||
}}
|
||||
placeholder={t("worldSetting.worldHistoryPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Politique et économie */}
|
||||
<div className="border-b border-secondary/30 pb-3">
|
||||
<h4 className="text-text-primary font-medium text-sm mb-3">{t('worldSetting.politicsEconomy')}</h4>
|
||||
<div className="space-y-3">
|
||||
<InputField
|
||||
fieldName={t("worldSetting.politics")}
|
||||
input={
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={world.seriesWorldId}
|
||||
seriesValue={seriesWorld?.politics || ''}
|
||||
currentValue={world.politics || ''}
|
||||
bookElementId={world.id}
|
||||
field="politics"
|
||||
elementType="world"
|
||||
onDownload={function (): void {
|
||||
if (seriesWorld) onWorldFieldChange('politics', seriesWorld.politics || '');
|
||||
}}
|
||||
onSyncComplete={onSyncComplete}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={world.politics || ''}
|
||||
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
|
||||
onWorldFieldChange('politics', e.target.value);
|
||||
}}
|
||||
placeholder={t("worldSetting.politicsPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
|
||||
<InputField
|
||||
fieldName={t("worldSetting.economy")}
|
||||
input={
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={world.seriesWorldId}
|
||||
seriesValue={seriesWorld?.economy || ''}
|
||||
currentValue={world.economy || ''}
|
||||
bookElementId={world.id}
|
||||
field="economy"
|
||||
elementType="world"
|
||||
onDownload={function (): void {
|
||||
if (seriesWorld) onWorldFieldChange('economy', seriesWorld.economy || '');
|
||||
}}
|
||||
onSyncComplete={onSyncComplete}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={world.economy || ''}
|
||||
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
|
||||
onWorldFieldChange('economy', e.target.value);
|
||||
}}
|
||||
placeholder={t("worldSetting.economyPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Religion et langues */}
|
||||
<div className="border-b border-secondary/30 pb-3">
|
||||
<h4 className="text-text-primary font-medium text-sm mb-3">{t('worldSetting.cultureLanguages')}</h4>
|
||||
<div className="space-y-3">
|
||||
<InputField
|
||||
fieldName={t("worldSetting.religion")}
|
||||
input={
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={world.seriesWorldId}
|
||||
seriesValue={seriesWorld?.religion || ''}
|
||||
currentValue={world.religion || ''}
|
||||
bookElementId={world.id}
|
||||
field="religion"
|
||||
elementType="world"
|
||||
onDownload={function (): void {
|
||||
if (seriesWorld) onWorldFieldChange('religion', seriesWorld.religion || '');
|
||||
}}
|
||||
onSyncComplete={onSyncComplete}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={world.religion || ''}
|
||||
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
|
||||
onWorldFieldChange('religion', e.target.value);
|
||||
}}
|
||||
placeholder={t("worldSetting.religionPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
|
||||
<InputField
|
||||
fieldName={t("worldSetting.languages")}
|
||||
input={
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={world.seriesWorldId}
|
||||
seriesValue={seriesWorld?.languages || ''}
|
||||
currentValue={world.languages || ''}
|
||||
bookElementId={world.id}
|
||||
field="languages"
|
||||
elementType="world"
|
||||
onDownload={function (): void {
|
||||
if (seriesWorld) onWorldFieldChange('languages', seriesWorld.languages || '');
|
||||
}}
|
||||
onSyncComplete={onSyncComplete}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={world.languages || ''}
|
||||
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
|
||||
onWorldFieldChange('languages', e.target.value);
|
||||
}}
|
||||
placeholder={t("worldSetting.languagesPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sections d'éléments */}
|
||||
{elementSections.map(function (section: ElementSection): React.JSX.Element {
|
||||
return (
|
||||
<div key={section.section} className="border-b border-secondary/30 pb-3 last:border-b-0">
|
||||
<h4 className="text-text-primary font-medium text-sm mb-3">{section.title}</h4>
|
||||
<WorldElementComponent
|
||||
sectionLabel={section.title}
|
||||
sectionType={section.section}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</WorldContext.Provider>
|
||||
);
|
||||
}
|
||||
107
components/book/settings/world/editor/WorldEditorList.tsx
Normal file
107
components/book/settings/world/editor/WorldEditorList.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
'use client';
|
||||
import React, {useState} from 'react';
|
||||
import {WorldProps} from '@/lib/models/World';
|
||||
import InputField from '@/components/form/InputField';
|
||||
import TextInput from '@/components/form/TextInput';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faChevronRight, faGlobe, faPlus} from '@fortawesome/free-solid-svg-icons';
|
||||
import {useTranslations} from 'next-intl';
|
||||
|
||||
interface WorldEditorListProps {
|
||||
worlds: WorldProps[];
|
||||
onWorldClick: (world: WorldProps) => void;
|
||||
onAddWorld: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* WorldEditorList - Liste des mondes pour ComposerRightBar
|
||||
* Version compacte avec liste cliquable (même pattern que CharacterEditorList)
|
||||
* PAS de scroll interne (géré par parent ComposerRightBar)
|
||||
*/
|
||||
export default function WorldEditorList({
|
||||
worlds,
|
||||
onWorldClick,
|
||||
onAddWorld,
|
||||
}: WorldEditorListProps): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
const [searchQuery, setSearchQuery] = useState<string>('');
|
||||
|
||||
function getFilteredWorlds(): WorldProps[] {
|
||||
return worlds.filter(function (world: WorldProps): boolean {
|
||||
return world.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
});
|
||||
}
|
||||
|
||||
const filteredWorlds: WorldProps[] = getFilteredWorlds();
|
||||
|
||||
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('worldSetting.search')}
|
||||
/>
|
||||
}
|
||||
actionIcon={faPlus}
|
||||
actionLabel={t('worldSetting.addWorldLabel')}
|
||||
addButtonCallBack={async function (): Promise<void> {
|
||||
onAddWorld();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="px-2 space-y-2">
|
||||
{filteredWorlds.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={faGlobe} className="text-primary w-8 h-8"/>
|
||||
</div>
|
||||
<h3 className="text-text-primary font-semibold text-base mb-1">
|
||||
{t('worldSetting.noWorldAvailable')}
|
||||
</h3>
|
||||
<p className="text-muted text-sm max-w-xs">
|
||||
{t('worldSetting.noWorldDescription')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredWorlds.map(function (world: WorldProps): React.JSX.Element {
|
||||
return (
|
||||
<div
|
||||
key={world.id}
|
||||
onClick={function (): void { onWorldClick(world); }}
|
||||
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={faGlobe} 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">
|
||||
{world.name}
|
||||
</div>
|
||||
{world.history && (
|
||||
<div className="text-muted text-xs truncate">
|
||||
{world.history.substring(0, 50)}{world.history.length > 50 ? '...' : ''}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
200
components/book/settings/world/settings/WorldSettings.tsx
Normal file
200
components/book/settings/world/settings/WorldSettings.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
'use client';
|
||||
import React, {useCallback, useContext, useMemo, useState} from 'react';
|
||||
import {useWorlds, UseWorldsConfig} from '@/hooks/settings/useWorlds';
|
||||
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 {WorldProps} from '@/lib/models/World';
|
||||
import {SeriesWorldProps} 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 WorldSettingsList from './WorldSettingsList';
|
||||
import WorldSettingsDetail from './WorldSettingsDetail';
|
||||
import WorldSettingsEdit from './WorldSettingsEdit';
|
||||
|
||||
interface WorldSettingsProps {
|
||||
entityType?: 'book' | 'series';
|
||||
entityId?: string;
|
||||
showToggle?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* WorldSettings - 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 WorldSettings({
|
||||
entityType = 'book',
|
||||
entityId,
|
||||
showToggle = true,
|
||||
}: WorldSettingsProps): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
const {book} = useContext(BookContext);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
|
||||
|
||||
const resolvedEntityId: string = entityId || book?.bookId || '';
|
||||
|
||||
const config: UseWorldsConfig = useMemo(function (): UseWorldsConfig {
|
||||
return {
|
||||
entityType,
|
||||
entityId: resolvedEntityId,
|
||||
};
|
||||
}, [entityType, resolvedEntityId]);
|
||||
|
||||
const {
|
||||
worlds,
|
||||
seriesWorlds,
|
||||
selectedWorldIndex,
|
||||
toolEnabled,
|
||||
isLoading,
|
||||
isSeriesMode,
|
||||
bookSeriesId,
|
||||
newWorldName,
|
||||
viewMode,
|
||||
addNewWorld,
|
||||
saveWorld,
|
||||
updateWorldField,
|
||||
toggleTool,
|
||||
importFromSeries,
|
||||
exportToSeries,
|
||||
refreshSeriesWorlds,
|
||||
setNewWorldName,
|
||||
setWorlds,
|
||||
getSeriesWorldForCurrentWorld,
|
||||
enterDetailMode,
|
||||
enterEditMode,
|
||||
exitEditMode,
|
||||
backToList,
|
||||
} = useWorlds(config);
|
||||
|
||||
const availableSeriesWorlds = useMemo(function (): SeriesWorldProps[] {
|
||||
return seriesWorlds.filter(function (sw: SeriesWorldProps): boolean {
|
||||
return !worlds.some(function (w: WorldProps): boolean {
|
||||
return w.seriesWorldId === sw.id;
|
||||
});
|
||||
});
|
||||
}, [seriesWorlds, worlds]);
|
||||
|
||||
const handleWorldFieldChange = useCallback(function (field: keyof WorldProps, value: string): void {
|
||||
updateWorldField(field, value);
|
||||
}, [updateWorldField]);
|
||||
|
||||
async function handleSave(): Promise<void> {
|
||||
await exitEditMode(true);
|
||||
}
|
||||
|
||||
function handleCancel(): void {
|
||||
exitEditMode(false);
|
||||
}
|
||||
|
||||
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 selectedWorld: WorldProps | undefined = worlds[selectedWorldIndex];
|
||||
const canExport: boolean = Boolean(bookSeriesId && selectedWorld && !selectedWorld.seriesWorldId);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Header - uniquement pour detail/edit */}
|
||||
<ToolDetailHeader
|
||||
title={selectedWorld?.name || ''}
|
||||
defaultTitle={t('worldSetting.newWorld')}
|
||||
viewMode={viewMode}
|
||||
isNew={false}
|
||||
onBack={backToList}
|
||||
onEdit={enterEditMode}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
onExport={canExport ? exportToSeries : undefined}
|
||||
showExport={canExport}
|
||||
showDelete={false}
|
||||
/>
|
||||
|
||||
{/* 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('worldSetting.enableTool')}
|
||||
input={
|
||||
<ToggleSwitch
|
||||
checked={toolEnabled}
|
||||
onChange={toggleTool}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<p className="text-muted text-sm mt-2">
|
||||
{t('worldSetting.enableToolDescription')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Contenu si outil activé */}
|
||||
{(toolEnabled || isSeriesMode) && (
|
||||
<>
|
||||
{/* Import from series */}
|
||||
{!isSeriesMode && bookSeriesId && availableSeriesWorlds.length > 0 && (
|
||||
<SeriesImportSelector
|
||||
availableItems={availableSeriesWorlds.map(function (sw: SeriesWorldProps) {
|
||||
return {id: sw.id, name: sw.name};
|
||||
})}
|
||||
onImport={importFromSeries}
|
||||
placeholder={t("seriesImport.selectElement")}
|
||||
label={t("seriesImport.importFromSeries")}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Liste des mondes */}
|
||||
<WorldSettingsList
|
||||
worlds={worlds}
|
||||
onWorldClick={enterDetailMode}
|
||||
onAddWorld={addNewWorld}
|
||||
newWorldName={newWorldName}
|
||||
onNewWorldNameChange={setNewWorldName}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewMode === 'detail' && selectedWorld && (
|
||||
<div className="p-4">
|
||||
<WorldSettingsDetail
|
||||
world={selectedWorld}
|
||||
seriesWorld={getSeriesWorldForCurrentWorld()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewMode === 'edit' && selectedWorld && (
|
||||
<div className="p-4">
|
||||
<WorldSettingsEdit
|
||||
world={selectedWorld}
|
||||
worlds={worlds}
|
||||
selectedWorldIndex={selectedWorldIndex}
|
||||
setWorlds={setWorlds}
|
||||
onWorldFieldChange={handleWorldFieldChange}
|
||||
seriesWorld={getSeriesWorldForCurrentWorld()}
|
||||
isSeriesMode={isSeriesMode}
|
||||
onSyncComplete={refreshSeriesWorlds}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
128
components/book/settings/world/settings/WorldSettingsDetail.tsx
Normal file
128
components/book/settings/world/settings/WorldSettingsDetail.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import {WorldProps, elementSections, ElementSection, WorldElement} from '@/lib/models/World';
|
||||
import {SeriesWorldProps} from '@/lib/models/Series';
|
||||
import CollapsableArea from '@/components/CollapsableArea';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {
|
||||
faGlobe,
|
||||
faLandmark,
|
||||
faBook,
|
||||
faCoins,
|
||||
faChurch,
|
||||
faLanguage,
|
||||
faScroll
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import {useTranslations} from 'next-intl';
|
||||
|
||||
interface WorldSettingsDetailProps {
|
||||
world: WorldProps;
|
||||
seriesWorld?: SeriesWorldProps | null;
|
||||
}
|
||||
|
||||
export default function WorldSettingsDetail({
|
||||
world,
|
||||
seriesWorld,
|
||||
}: WorldSettingsDetailProps): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
|
||||
function renderElementSection(section: ElementSection): React.JSX.Element | null {
|
||||
const elements: WorldElement[] = world[section.section] as WorldElement[];
|
||||
if (!elements || elements.length === 0) return null;
|
||||
|
||||
return (
|
||||
<CollapsableArea key={section.section} title={section.title} icon={section.icon}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
|
||||
{elements.map(function (element: WorldElement): React.JSX.Element {
|
||||
return (
|
||||
<div key={element.id} className="p-4 bg-dark-background/30 rounded-lg border border-secondary/20 hover:border-primary/30 transition-colors">
|
||||
<h4 className="text-text-primary font-semibold">{element.name}</h4>
|
||||
{element.description && (
|
||||
<p className="text-text-secondary text-sm mt-2 line-clamp-3">{element.description}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CollapsableArea>
|
||||
);
|
||||
}
|
||||
|
||||
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={faGlobe} className="w-8 h-8 text-primary"/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h2 className="text-2xl font-bold text-text-primary">{world.name || '—'}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Histoire du monde - Full width */}
|
||||
<div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<FontAwesomeIcon icon={faScroll} className="w-4 h-4 text-primary"/>
|
||||
<h3 className="text-text-primary font-semibold">{t('worldSetting.worldHistory')}</h3>
|
||||
</div>
|
||||
<p className={`whitespace-pre-wrap ${world.history ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
|
||||
{world.history || '—'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Politique & Économie - Side by side */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<FontAwesomeIcon icon={faLandmark} className="w-4 h-4 text-primary"/>
|
||||
<h3 className="text-text-primary font-semibold">{t('worldSetting.politics')}</h3>
|
||||
</div>
|
||||
<p className={`whitespace-pre-wrap ${world.politics ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
|
||||
{world.politics || '—'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<FontAwesomeIcon icon={faCoins} className="w-4 h-4 text-primary"/>
|
||||
<h3 className="text-text-primary font-semibold">{t('worldSetting.economy')}</h3>
|
||||
</div>
|
||||
<p className={`whitespace-pre-wrap ${world.economy ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
|
||||
{world.economy || '—'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Religion & Langues - Side by side */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<FontAwesomeIcon icon={faChurch} className="w-4 h-4 text-primary"/>
|
||||
<h3 className="text-text-primary font-semibold">{t('worldSetting.religion')}</h3>
|
||||
</div>
|
||||
<p className={`whitespace-pre-wrap ${world.religion ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
|
||||
{world.religion || '—'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-5 bg-secondary/20 rounded-xl border border-secondary/30">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<FontAwesomeIcon icon={faLanguage} className="w-4 h-4 text-primary"/>
|
||||
<h3 className="text-text-primary font-semibold">{t('worldSetting.languages')}</h3>
|
||||
</div>
|
||||
<p className={`whitespace-pre-wrap ${world.languages ? 'text-text-primary' : 'text-text-secondary/50 italic'}`}>
|
||||
{world.languages || '—'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sections d'éléments - Grille de cards */}
|
||||
{elementSections.map(function (section: ElementSection): React.JSX.Element | null {
|
||||
return renderElementSection(section);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
240
components/book/settings/world/settings/WorldSettingsEdit.tsx
Normal file
240
components/book/settings/world/settings/WorldSettingsEdit.tsx
Normal file
@@ -0,0 +1,240 @@
|
||||
'use client';
|
||||
import React, {ChangeEvent, Dispatch, SetStateAction} from 'react';
|
||||
import {WorldProps, elementSections, ElementSection} from '@/lib/models/World';
|
||||
import {SeriesWorldProps} from '@/lib/models/Series';
|
||||
import {WorldContext} from '@/context/WorldContext';
|
||||
import CollapsableArea from '@/components/CollapsableArea';
|
||||
import InputField from '@/components/form/InputField';
|
||||
import TextInput from '@/components/form/TextInput';
|
||||
import TexteAreaInput from '@/components/form/TexteAreaInput';
|
||||
import SyncFieldWrapper from '@/components/form/SyncFieldWrapper';
|
||||
import WorldElementComponent from '@/components/book/settings/world/WorldElement';
|
||||
import {faBook, faGlobe, faLandmark} from '@fortawesome/free-solid-svg-icons';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {useTranslations} from 'next-intl';
|
||||
|
||||
interface WorldSettingsEditProps {
|
||||
world: WorldProps;
|
||||
worlds: WorldProps[];
|
||||
selectedWorldIndex: number;
|
||||
setWorlds: Dispatch<SetStateAction<WorldProps[]>>;
|
||||
onWorldFieldChange: (field: keyof WorldProps, value: string) => void;
|
||||
seriesWorld?: SeriesWorldProps | null;
|
||||
isSeriesMode: boolean;
|
||||
onSyncComplete?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* WorldSettingsEdit - Vue édition pour BookSetting/SerieSetting
|
||||
* Tous les champs avec SyncFieldWrapper
|
||||
* PAS de scroll interne (géré par parent)
|
||||
*/
|
||||
export default function WorldSettingsEdit({
|
||||
world,
|
||||
worlds,
|
||||
selectedWorldIndex,
|
||||
setWorlds,
|
||||
onWorldFieldChange,
|
||||
seriesWorld,
|
||||
isSeriesMode,
|
||||
onSyncComplete,
|
||||
}: WorldSettingsEditProps): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex, isSeriesMode}}>
|
||||
<div className="space-y-4 px-2 pb-4">
|
||||
{/* Informations de base */}
|
||||
<CollapsableArea title={t('worldSetting.basicInfo')} icon={faGlobe}>
|
||||
<div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
|
||||
<InputField
|
||||
fieldName={t("worldSetting.worldName")}
|
||||
input={
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={world.seriesWorldId}
|
||||
seriesValue={seriesWorld?.name || ''}
|
||||
currentValue={world.name}
|
||||
bookElementId={world.id}
|
||||
field="name"
|
||||
elementType="world"
|
||||
onDownload={function (): void {
|
||||
if (seriesWorld) {
|
||||
const updatedWorlds: WorldProps[] = [...worlds];
|
||||
updatedWorlds[selectedWorldIndex].name = seriesWorld.name;
|
||||
setWorlds(updatedWorlds);
|
||||
}
|
||||
}}
|
||||
onSyncComplete={onSyncComplete}
|
||||
>
|
||||
<TextInput
|
||||
value={world.name}
|
||||
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
|
||||
const updatedWorlds: WorldProps[] = [...worlds];
|
||||
updatedWorlds[selectedWorldIndex].name = e.target.value;
|
||||
setWorlds(updatedWorlds);
|
||||
}}
|
||||
placeholder={t("worldSetting.worldNamePlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
|
||||
<InputField
|
||||
fieldName={t("worldSetting.worldHistory")}
|
||||
input={
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={world.seriesWorldId}
|
||||
seriesValue={seriesWorld?.history || ''}
|
||||
currentValue={world.history || ''}
|
||||
bookElementId={world.id}
|
||||
field="history"
|
||||
elementType="world"
|
||||
onDownload={function (): void {
|
||||
if (seriesWorld) onWorldFieldChange('history', seriesWorld.history || '');
|
||||
}}
|
||||
onSyncComplete={onSyncComplete}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={world.history || ''}
|
||||
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
|
||||
onWorldFieldChange('history', e.target.value);
|
||||
}}
|
||||
placeholder={t("worldSetting.worldHistoryPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</CollapsableArea>
|
||||
|
||||
{/* Politique et économie */}
|
||||
<CollapsableArea title={t('worldSetting.politicsEconomy')} icon={faLandmark}>
|
||||
<div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
|
||||
<InputField
|
||||
fieldName={t("worldSetting.politics")}
|
||||
input={
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={world.seriesWorldId}
|
||||
seriesValue={seriesWorld?.politics || ''}
|
||||
currentValue={world.politics || ''}
|
||||
bookElementId={world.id}
|
||||
field="politics"
|
||||
elementType="world"
|
||||
onDownload={function (): void {
|
||||
if (seriesWorld) onWorldFieldChange('politics', seriesWorld.politics || '');
|
||||
}}
|
||||
onSyncComplete={onSyncComplete}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={world.politics || ''}
|
||||
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
|
||||
onWorldFieldChange('politics', e.target.value);
|
||||
}}
|
||||
placeholder={t("worldSetting.politicsPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
|
||||
<InputField
|
||||
fieldName={t("worldSetting.economy")}
|
||||
input={
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={world.seriesWorldId}
|
||||
seriesValue={seriesWorld?.economy || ''}
|
||||
currentValue={world.economy || ''}
|
||||
bookElementId={world.id}
|
||||
field="economy"
|
||||
elementType="world"
|
||||
onDownload={function (): void {
|
||||
if (seriesWorld) onWorldFieldChange('economy', seriesWorld.economy || '');
|
||||
}}
|
||||
onSyncComplete={onSyncComplete}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={world.economy || ''}
|
||||
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
|
||||
onWorldFieldChange('economy', e.target.value);
|
||||
}}
|
||||
placeholder={t("worldSetting.economyPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</CollapsableArea>
|
||||
|
||||
{/* Religion et langues */}
|
||||
<CollapsableArea title={t('worldSetting.cultureLanguages')} icon={faBook}>
|
||||
<div className="space-y-4 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
|
||||
<InputField
|
||||
fieldName={t("worldSetting.religion")}
|
||||
input={
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={world.seriesWorldId}
|
||||
seriesValue={seriesWorld?.religion || ''}
|
||||
currentValue={world.religion || ''}
|
||||
bookElementId={world.id}
|
||||
field="religion"
|
||||
elementType="world"
|
||||
onDownload={function (): void {
|
||||
if (seriesWorld) onWorldFieldChange('religion', seriesWorld.religion || '');
|
||||
}}
|
||||
onSyncComplete={onSyncComplete}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={world.religion || ''}
|
||||
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
|
||||
onWorldFieldChange('religion', e.target.value);
|
||||
}}
|
||||
placeholder={t("worldSetting.religionPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
|
||||
<InputField
|
||||
fieldName={t("worldSetting.languages")}
|
||||
input={
|
||||
<SyncFieldWrapper
|
||||
seriesElementId={world.seriesWorldId}
|
||||
seriesValue={seriesWorld?.languages || ''}
|
||||
currentValue={world.languages || ''}
|
||||
bookElementId={world.id}
|
||||
field="languages"
|
||||
elementType="world"
|
||||
onDownload={function (): void {
|
||||
if (seriesWorld) onWorldFieldChange('languages', seriesWorld.languages || '');
|
||||
}}
|
||||
onSyncComplete={onSyncComplete}
|
||||
>
|
||||
<TexteAreaInput
|
||||
value={world.languages || ''}
|
||||
setValue={function (e: ChangeEvent<HTMLTextAreaElement>): void {
|
||||
onWorldFieldChange('languages', e.target.value);
|
||||
}}
|
||||
placeholder={t("worldSetting.languagesPlaceholder")}
|
||||
/>
|
||||
</SyncFieldWrapper>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</CollapsableArea>
|
||||
|
||||
{/* Sections d'éléments */}
|
||||
{elementSections.map(function (section: ElementSection): React.JSX.Element {
|
||||
return (
|
||||
<CollapsableArea key={section.section} title={section.title} icon={section.icon}>
|
||||
<div className="p-4 bg-secondary/20 rounded-xl border border-secondary/30">
|
||||
<WorldElementComponent
|
||||
sectionLabel={section.title}
|
||||
sectionType={section.section}
|
||||
/>
|
||||
</div>
|
||||
</CollapsableArea>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</WorldContext.Provider>
|
||||
);
|
||||
}
|
||||
127
components/book/settings/world/settings/WorldSettingsList.tsx
Normal file
127
components/book/settings/world/settings/WorldSettingsList.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
'use client';
|
||||
import React, {ChangeEvent, useState} from 'react';
|
||||
import {WorldProps} from '@/lib/models/World';
|
||||
import InputField from '@/components/form/InputField';
|
||||
import TextInput from '@/components/form/TextInput';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faChevronRight, faGlobe, faPlus} from '@fortawesome/free-solid-svg-icons';
|
||||
import {useTranslations} from 'next-intl';
|
||||
|
||||
interface WorldSettingsListProps {
|
||||
worlds: WorldProps[];
|
||||
onWorldClick: (worldId: string) => void;
|
||||
onAddWorld: () => Promise<void>;
|
||||
newWorldName: string;
|
||||
onNewWorldNameChange: (name: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* WorldSettingsList - Liste des mondes pour BookSetting/SerieSetting
|
||||
* Liste cliquable avec recherche et formulaire d'ajout
|
||||
* PAS de SelectBox, même pattern que CharacterSettingsList
|
||||
* PAS de scroll interne (géré par parent)
|
||||
*/
|
||||
export default function WorldSettingsList({
|
||||
worlds,
|
||||
onWorldClick,
|
||||
onAddWorld,
|
||||
newWorldName,
|
||||
onNewWorldNameChange,
|
||||
}: WorldSettingsListProps): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
const [searchQuery, setSearchQuery] = useState<string>('');
|
||||
|
||||
function getFilteredWorlds(): WorldProps[] {
|
||||
return worlds.filter(function (world: WorldProps): boolean {
|
||||
return world.name.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
});
|
||||
}
|
||||
|
||||
const filteredWorlds: WorldProps[] = getFilteredWorlds();
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Recherche et ajout */}
|
||||
<div className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={searchQuery}
|
||||
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
|
||||
setSearchQuery(e.target.value);
|
||||
}}
|
||||
placeholder={t('worldSetting.search')}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<InputField
|
||||
fieldName={t('worldSetting.addWorldLabel')}
|
||||
input={
|
||||
<TextInput
|
||||
value={newWorldName}
|
||||
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
|
||||
onNewWorldNameChange(e.target.value);
|
||||
}}
|
||||
placeholder={t('worldSetting.newWorldPlaceholder')}
|
||||
/>
|
||||
}
|
||||
actionIcon={faPlus}
|
||||
actionLabel={t('worldSetting.createWorldLabel')}
|
||||
addButtonCallBack={onAddWorld}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Liste des mondes cliquables */}
|
||||
<div className="space-y-2 px-2">
|
||||
{filteredWorlds.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={faGlobe} className="text-primary w-10 h-10"/>
|
||||
</div>
|
||||
<h3 className="text-text-primary font-semibold text-lg mb-2">
|
||||
{t('worldSetting.noWorldAvailable')}
|
||||
</h3>
|
||||
<p className="text-muted text-sm max-w-xs">
|
||||
{t('worldSetting.noWorldDescription')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredWorlds.map(function (world: WorldProps): React.JSX.Element {
|
||||
return (
|
||||
<div
|
||||
key={world.id}
|
||||
onClick={function (): void { onWorldClick(world.id); }}
|
||||
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={faGlobe} 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">
|
||||
{world.name}
|
||||
</div>
|
||||
{world.history && (
|
||||
<div className="text-text-secondary text-sm mt-0.5 truncate">
|
||||
{world.history.substring(0, 60)}{world.history.length > 60 ? '...' : ''}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user