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