Add enable/disable management for book tools (characters, worlds, and locations)
- Introduced toggling functionality for managing `characters`, `worlds`, and `locations` tool availability per book. - Updated `CharacterComponent`, `WorldSetting`, and `LocationComponent` with toggle switches for tool enablement. - Added `book_tools` database table and related schema migration for storing tool settings. - Extended API calls, models, and IPC handlers to support tool enablement states. - Localized new strings for English with supporting descriptions and messages. - Adjusted conditional rendering logic across components to respect tool enablement.
This commit is contained in:
natreex
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
import {Dispatch, forwardRef, SetStateAction, useContext, useEffect, useImperativeHandle, useState} from 'react';
|
||||
import {Attribute, CharacterProps} from "@/lib/models/Character";
|
||||
import {Attribute, CharacterProps, CharacterListResponse} from "@/lib/models/Character";
|
||||
import {SessionContext} from "@/context/SessionContext";
|
||||
import CharacterList from './CharacterList';
|
||||
import System from '@/lib/models/System';
|
||||
@@ -13,6 +13,7 @@ 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 ToggleSwitch from "@/components/form/ToggleSwitch";
|
||||
|
||||
interface CharacterDetailProps {
|
||||
selectedCharacter: CharacterProps | null;
|
||||
@@ -47,17 +48,18 @@ const initialCharacterState: CharacterProps = {
|
||||
motivations: [],
|
||||
};
|
||||
|
||||
export function CharacterComponent(props: any, ref: any) {
|
||||
export function CharacterComponent({showToggle = true}: {showToggle?: boolean}, ref: any) {
|
||||
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 {book} = useContext(BookContext);
|
||||
const {book, setBook} = useContext(BookContext);
|
||||
const {errorMessage, successMessage} = useContext(AlertContext);
|
||||
const [characters, setCharacters] = useState<CharacterProps[]>([]);
|
||||
const [selectedCharacter, setSelectedCharacter] = useState<CharacterProps | null>(null);
|
||||
const [toolEnabled, setToolEnabled] = useState<boolean>(book?.tools?.characters ?? false);
|
||||
|
||||
useImperativeHandle(ref, function () {
|
||||
return {
|
||||
@@ -68,23 +70,61 @@ export function CharacterComponent(props: any, ref: any) {
|
||||
useEffect((): void => {
|
||||
getCharacters().then();
|
||||
}, []);
|
||||
|
||||
async function handleToggleTool(enabled: boolean): Promise<void> {
|
||||
try {
|
||||
let response: boolean;
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
response = await window.electron.invoke<boolean>('db:book:tool:update', {
|
||||
bookId: book?.bookId,
|
||||
toolName: 'characters',
|
||||
enabled: enabled
|
||||
});
|
||||
} else {
|
||||
response = await System.authPatchToServer<boolean>('book/tool-setting', {
|
||||
bookId: book?.bookId,
|
||||
toolName: 'characters',
|
||||
enabled: enabled
|
||||
}, session.accessToken, lang);
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === book?.bookId)) {
|
||||
addToQueue('db:book:tool:update', {
|
||||
bookId: book?.bookId,
|
||||
toolName: 'characters',
|
||||
enabled: enabled
|
||||
});
|
||||
}
|
||||
}
|
||||
if (response && setBook && book) {
|
||||
setToolEnabled(enabled);
|
||||
setBook({...book, tools: {...book.tools, characters: enabled}});
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function getCharacters(): Promise<void> {
|
||||
try {
|
||||
let response: CharacterProps[];
|
||||
let response: CharacterListResponse;
|
||||
if (isCurrentlyOffline()) {
|
||||
response = await window.electron.invoke<CharacterProps[]>('db:character:list', {bookid: book?.bookId});
|
||||
response = await window.electron.invoke<CharacterListResponse>('db:character:list', {bookid: book?.bookId});
|
||||
} else {
|
||||
if (book?.localBook) {
|
||||
response = await window.electron.invoke<CharacterProps[]>('db:character:list', {bookid: book?.bookId});
|
||||
response = await window.electron.invoke<CharacterListResponse>('db:character:list', {bookid: book?.bookId});
|
||||
} else {
|
||||
response = await System.authGetQueryToServer<CharacterProps[]>(`character/list`, session.accessToken, lang, {
|
||||
response = await System.authGetQueryToServer<CharacterListResponse>(`character/list`, session.accessToken, lang, {
|
||||
bookid: book?.bookId,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (response) {
|
||||
setCharacters(response);
|
||||
setCharacters(response.characters);
|
||||
setToolEnabled(response.enabled);
|
||||
if (setBook && book) {
|
||||
setBook({...book, tools: {...book.tools, characters: response.enabled}});
|
||||
}
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
@@ -317,21 +357,35 @@ export function CharacterComponent(props: any, ref: any) {
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{selectedCharacter ? (
|
||||
<CharacterDetail
|
||||
selectedCharacter={selectedCharacter}
|
||||
setSelectedCharacter={setSelectedCharacter}
|
||||
handleAddElement={handleAddElement}
|
||||
handleRemoveElement={handleRemoveElement}
|
||||
handleCharacterChange={handleCharacterChange}
|
||||
handleSaveCharacter={handleSaveCharacter}
|
||||
/>
|
||||
) : (
|
||||
<CharacterList
|
||||
characters={characters}
|
||||
handleAddCharacter={handleAddCharacter}
|
||||
handleCharacterClick={handleCharacterClick}
|
||||
/>
|
||||
{showToggle && (
|
||||
<div className="bg-secondary/20 rounded-xl p-4 shadow-inner border border-secondary/30">
|
||||
<ToggleSwitch
|
||||
enabled={toolEnabled}
|
||||
setEnabled={handleToggleTool}
|
||||
label={t('characterComponent.enableTool')}
|
||||
description={t('characterComponent.enableToolDescription')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{toolEnabled && (
|
||||
<>
|
||||
{selectedCharacter ? (
|
||||
<CharacterDetail
|
||||
selectedCharacter={selectedCharacter}
|
||||
setSelectedCharacter={setSelectedCharacter}
|
||||
handleAddElement={handleAddElement}
|
||||
handleRemoveElement={handleRemoveElement}
|
||||
handleCharacterChange={handleCharacterChange}
|
||||
handleSaveCharacter={handleSaveCharacter}
|
||||
/>
|
||||
) : (
|
||||
<CharacterList
|
||||
characters={characters}
|
||||
handleAddCharacter={handleAddCharacter}
|
||||
handleCharacterClick={handleCharacterClick}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -15,6 +15,7 @@ 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 ToggleSwitch from "@/components/form/ToggleSwitch";
|
||||
|
||||
interface SubElement {
|
||||
id: string;
|
||||
@@ -35,7 +36,12 @@ interface LocationProps {
|
||||
elements: Element[];
|
||||
}
|
||||
|
||||
export function LocationComponent(props: any, ref: any) {
|
||||
interface LocationListResponse {
|
||||
locations: LocationProps[];
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export function LocationComponent({showToggle = true}: {showToggle?: boolean}, ref: any) {
|
||||
const t = useTranslations();
|
||||
const {lang} = useContext<LangContextProps>(LangContext);
|
||||
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
|
||||
@@ -43,15 +49,16 @@ export function LocationComponent(props: any, ref: any) {
|
||||
const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
|
||||
const {session} = useContext(SessionContext);
|
||||
const {successMessage, errorMessage} = useContext(AlertContext);
|
||||
const {book} = useContext(BookContext);
|
||||
|
||||
const {book, setBook} = useContext(BookContext);
|
||||
|
||||
const bookId: string | undefined = book?.bookId;
|
||||
const token: string = session.accessToken;
|
||||
|
||||
|
||||
const [sections, setSections] = useState<LocationProps[]>([]);
|
||||
const [newSectionName, setNewSectionName] = useState<string>('');
|
||||
const [newElementNames, setNewElementNames] = useState<{ [key: string]: string }>({});
|
||||
const [newSubElementNames, setNewSubElementNames] = useState<{ [key: string]: string }>({});
|
||||
const [toolEnabled, setToolEnabled] = useState<boolean>(book?.tools?.locations ?? false);
|
||||
|
||||
useImperativeHandle(ref, function () {
|
||||
return {
|
||||
@@ -62,23 +69,61 @@ export function LocationComponent(props: any, ref: any) {
|
||||
useEffect((): void => {
|
||||
getAllLocations().then();
|
||||
}, []);
|
||||
|
||||
|
||||
async function handleToggleTool(enabled: boolean): Promise<void> {
|
||||
try {
|
||||
let response: boolean;
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
response = await window.electron.invoke<boolean>('db:book:tool:update', {
|
||||
bookId: bookId,
|
||||
toolName: 'locations',
|
||||
enabled: enabled
|
||||
});
|
||||
} else {
|
||||
response = await System.authPatchToServer<boolean>('book/tool-setting', {
|
||||
bookId: bookId,
|
||||
toolName: 'locations',
|
||||
enabled: enabled
|
||||
}, token, lang);
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('db:book:tool:update', {
|
||||
bookId: bookId,
|
||||
toolName: 'locations',
|
||||
enabled: enabled
|
||||
});
|
||||
}
|
||||
}
|
||||
if (response && setBook && book) {
|
||||
setToolEnabled(enabled);
|
||||
setBook({...book, tools: {...book.tools, locations: enabled}});
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function getAllLocations(): Promise<void> {
|
||||
try {
|
||||
let response: LocationProps[];
|
||||
let response: LocationListResponse;
|
||||
if (isCurrentlyOffline()) {
|
||||
response = await window.electron.invoke<LocationProps[]>('db:location:all', {bookid: bookId});
|
||||
response = await window.electron.invoke<LocationListResponse>('db:location:all', {bookid: bookId});
|
||||
} else {
|
||||
if (book?.localBook) {
|
||||
response = await window.electron.invoke<LocationProps[]>('db:location:all', {bookid: bookId});
|
||||
response = await window.electron.invoke<LocationListResponse>('db:location:all', {bookid: bookId});
|
||||
} else {
|
||||
response = await System.authGetQueryToServer<LocationProps[]>(`location/all`, token, lang, {
|
||||
response = await System.authGetQueryToServer<LocationListResponse>(`location/all`, token, lang, {
|
||||
bookid: bookId,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (response && response.length > 0) {
|
||||
setSections(response);
|
||||
if (response) {
|
||||
setSections(response.locations);
|
||||
setToolEnabled(response.enabled);
|
||||
if (setBook && book) {
|
||||
setBook({...book, tools: {...book.tools, locations: response.enabled}});
|
||||
}
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
@@ -423,140 +468,154 @@ export function LocationComponent(props: any, ref: any) {
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<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={
|
||||
<TextInput
|
||||
value={newSectionName}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) => setNewSectionName(e.target.value)}
|
||||
placeholder={t("locationComponent.newSectionPlaceholder")}
|
||||
/>
|
||||
}
|
||||
actionIcon={faPlus}
|
||||
actionLabel={t("locationComponent.addSectionLabel")}
|
||||
addButtonCallBack={handleAddSection}
|
||||
{showToggle && (
|
||||
<div className="bg-secondary/20 rounded-xl p-4 shadow-inner border border-secondary/30">
|
||||
<ToggleSwitch
|
||||
enabled={toolEnabled}
|
||||
setEnabled={handleToggleTool}
|
||||
label={t('locationComponent.enableTool')}
|
||||
description={t('locationComponent.enableToolDescription')}
|
||||
/>
|
||||
</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">
|
||||
<h3 className="text-lg font-semibold text-text-primary mb-4 flex items-center">
|
||||
<FontAwesomeIcon icon={faMapMarkerAlt} className="mr-2 w-5 h-5"/>
|
||||
{section.name}
|
||||
<span
|
||||
className="ml-2 text-sm bg-dark-background text-text-secondary py-0.5 px-2 rounded-full">
|
||||
{section.elements.length || 0}
|
||||
</span>
|
||||
<button onClick={(): Promise<void> => handleRemoveSection(section.id)}
|
||||
className="ml-auto bg-dark-background text-text-primary rounded-full p-1.5 hover:bg-secondary transition-colors shadow-md">
|
||||
<FontAwesomeIcon icon={faTrash} className={'w-5 h-5'}/>
|
||||
</button>
|
||||
</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">
|
||||
<div className="mb-2">
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={element.name}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
handleElementChange(section.id, elementIndex, 'name', e.target.value)
|
||||
}
|
||||
placeholder={t("locationComponent.elementNamePlaceholder")}
|
||||
/>
|
||||
}
|
||||
removeButtonCallBack={(): Promise<void> => handleRemoveElement(section.id, elementIndex)}
|
||||
/>
|
||||
</div>
|
||||
<TexteAreaInput
|
||||
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">
|
||||
{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">
|
||||
<div className="mb-2">
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={subElement.name}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>): void =>
|
||||
handleSubElementChange(section.id, elementIndex, subElementIndex, 'name', e.target.value)
|
||||
}
|
||||
placeholder={t("locationComponent.subElementNamePlaceholder")}
|
||||
/>
|
||||
}
|
||||
removeButtonCallBack={(): Promise<void> => handleRemoveSubElement(section.id, elementIndex, subElementIndex)}
|
||||
/>
|
||||
</div>
|
||||
<TexteAreaInput
|
||||
value={subElement.description}
|
||||
setValue={(e) =>
|
||||
handleSubElementChange(section.id, elementIndex, subElementIndex, 'description', e.target.value)
|
||||
}
|
||||
placeholder={t("locationComponent.subElementDescriptionPlaceholder")}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={newSubElementNames[elementIndex] || ''}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setNewSubElementNames({
|
||||
...newSubElementNames,
|
||||
[elementIndex]: e.target.value
|
||||
})
|
||||
}
|
||||
placeholder={t("locationComponent.newSubElementPlaceholder")}
|
||||
/>
|
||||
}
|
||||
addButtonCallBack={(): Promise<void> => handleAddSubElement(section.id, elementIndex)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-4 text-text-secondary italic">
|
||||
{t("locationComponent.noElementAvailable")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
)}
|
||||
{toolEnabled && (
|
||||
<>
|
||||
<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={
|
||||
<TextInput
|
||||
value={newElementNames[section.id] || ''}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setNewElementNames({...newElementNames, [section.id]: e.target.value})
|
||||
}
|
||||
placeholder={t("locationComponent.newElementPlaceholder")}
|
||||
value={newSectionName}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) => setNewSectionName(e.target.value)}
|
||||
placeholder={t("locationComponent.newSectionPlaceholder")}
|
||||
/>
|
||||
}
|
||||
addButtonCallBack={(): Promise<void> => handleAddElement(section.id)}
|
||||
actionIcon={faPlus}
|
||||
actionLabel={t("locationComponent.addSectionLabel")}
|
||||
addButtonCallBack={handleAddSection}
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{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">
|
||||
<h3 className="text-lg font-semibold text-text-primary mb-4 flex items-center">
|
||||
<FontAwesomeIcon icon={faMapMarkerAlt} className="mr-2 w-5 h-5"/>
|
||||
{section.name}
|
||||
<span
|
||||
className="ml-2 text-sm bg-dark-background text-text-secondary py-0.5 px-2 rounded-full">
|
||||
{section.elements.length || 0}
|
||||
</span>
|
||||
<button onClick={(): Promise<void> => handleRemoveSection(section.id)}
|
||||
className="ml-auto bg-dark-background text-text-primary rounded-full p-1.5 hover:bg-secondary transition-colors shadow-md">
|
||||
<FontAwesomeIcon icon={faTrash} className={'w-5 h-5'}/>
|
||||
</button>
|
||||
</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">
|
||||
<div className="mb-2">
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={element.name}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
handleElementChange(section.id, elementIndex, 'name', e.target.value)
|
||||
}
|
||||
placeholder={t("locationComponent.elementNamePlaceholder")}
|
||||
/>
|
||||
}
|
||||
removeButtonCallBack={(): Promise<void> => handleRemoveElement(section.id, elementIndex)}
|
||||
/>
|
||||
</div>
|
||||
<TexteAreaInput
|
||||
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">
|
||||
{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">
|
||||
<div className="mb-2">
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={subElement.name}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>): void =>
|
||||
handleSubElementChange(section.id, elementIndex, subElementIndex, 'name', e.target.value)
|
||||
}
|
||||
placeholder={t("locationComponent.subElementNamePlaceholder")}
|
||||
/>
|
||||
}
|
||||
removeButtonCallBack={(): Promise<void> => handleRemoveSubElement(section.id, elementIndex, subElementIndex)}
|
||||
/>
|
||||
</div>
|
||||
<TexteAreaInput
|
||||
value={subElement.description}
|
||||
setValue={(e) =>
|
||||
handleSubElementChange(section.id, elementIndex, subElementIndex, 'description', e.target.value)
|
||||
}
|
||||
placeholder={t("locationComponent.subElementDescriptionPlaceholder")}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={newSubElementNames[elementIndex] || ''}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setNewSubElementNames({
|
||||
...newSubElementNames,
|
||||
[elementIndex]: e.target.value
|
||||
})
|
||||
}
|
||||
placeholder={t("locationComponent.newSubElementPlaceholder")}
|
||||
/>
|
||||
}
|
||||
addButtonCallBack={(): Promise<void> => handleAddSubElement(section.id, elementIndex)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-4 text-text-secondary italic">
|
||||
{t("locationComponent.noElementAvailable")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={newElementNames[section.id] || ''}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) =>
|
||||
setNewElementNames({...newElementNames, [section.id]: e.target.value})
|
||||
}
|
||||
placeholder={t("locationComponent.newElementPlaceholder")}
|
||||
/>
|
||||
}
|
||||
addButtonCallBack={(): Promise<void> => handleAddElement(section.id)}
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,7 +7,7 @@ import {BookContext} from "@/context/BookContext";
|
||||
import {AlertContext} from "@/context/AlertContext";
|
||||
import {SelectBoxProps} from "@/shared/interface";
|
||||
import System from "@/lib/models/System";
|
||||
import {elementSections, WorldProps} from "@/lib/models/World";
|
||||
import {elementSections, WorldProps, WorldListResponse} from "@/lib/models/World";
|
||||
import {SessionContext} from "@/context/SessionContext";
|
||||
import InputField from "@/components/form/InputField";
|
||||
import TextInput from '@/components/form/TextInput';
|
||||
@@ -20,6 +20,7 @@ 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 ToggleSwitch from "@/components/form/ToggleSwitch";
|
||||
|
||||
export interface ElementSection {
|
||||
title: string;
|
||||
@@ -27,7 +28,7 @@ export interface ElementSection {
|
||||
icon: IconDefinition;
|
||||
}
|
||||
|
||||
export function WorldSetting(props: any, ref: any) {
|
||||
export function WorldSetting({showToggle = true}: {showToggle?: boolean}, ref: any) {
|
||||
const t = useTranslations();
|
||||
const {lang} = useContext<LangContextProps>(LangContext);
|
||||
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
|
||||
@@ -35,14 +36,15 @@ export function WorldSetting(props: any, ref: any) {
|
||||
const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
|
||||
const {errorMessage, successMessage} = useContext(AlertContext);
|
||||
const {session} = useContext(SessionContext);
|
||||
const {book} = useContext(BookContext);
|
||||
const {book, setBook} = useContext(BookContext);
|
||||
const bookId: string = book?.bookId ? book.bookId.toString() : '';
|
||||
|
||||
|
||||
const [worlds, setWorlds] = useState<WorldProps[]>([]);
|
||||
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);
|
||||
|
||||
useImperativeHandle(ref, function () {
|
||||
return {
|
||||
@@ -53,24 +55,62 @@ export function WorldSetting(props: any, ref: any) {
|
||||
useEffect((): void => {
|
||||
getWorlds().then();
|
||||
}, []);
|
||||
|
||||
|
||||
async function handleToggleTool(enabled: boolean): Promise<void> {
|
||||
try {
|
||||
let response: boolean;
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
response = await window.electron.invoke<boolean>('db:book:tool:update', {
|
||||
bookId: bookId,
|
||||
toolName: 'worlds',
|
||||
enabled: enabled
|
||||
});
|
||||
} else {
|
||||
response = await System.authPatchToServer<boolean>('book/tool-setting', {
|
||||
bookId: bookId,
|
||||
toolName: 'worlds',
|
||||
enabled: enabled
|
||||
}, session.accessToken, lang);
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('db:book:tool:update', {
|
||||
bookId: bookId,
|
||||
toolName: 'worlds',
|
||||
enabled: enabled
|
||||
});
|
||||
}
|
||||
}
|
||||
if (response && setBook && book) {
|
||||
setToolEnabled(enabled);
|
||||
setBook({...book, tools: {...book.tools, worlds: enabled}});
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function getWorlds() {
|
||||
try {
|
||||
let response: WorldProps[];
|
||||
let response: WorldListResponse;
|
||||
if (isCurrentlyOffline()) {
|
||||
response = await window.electron.invoke<WorldProps[]>('db:book:worlds:get', {bookid: bookId});
|
||||
response = await window.electron.invoke<WorldListResponse>('db:book:worlds:get', {bookid: bookId});
|
||||
} else {
|
||||
if (book?.localBook) {
|
||||
response = await window.electron.invoke<WorldProps[]>('db:book:worlds:get', {bookid: bookId});
|
||||
response = await window.electron.invoke<WorldListResponse>('db:book:worlds:get', {bookid: bookId});
|
||||
} else {
|
||||
response = await System.authGetQueryToServer<WorldProps[]>(`book/worlds`, session.accessToken, lang, {
|
||||
response = await System.authGetQueryToServer<WorldListResponse>(`book/worlds`, session.accessToken, lang, {
|
||||
bookid: bookId,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (response) {
|
||||
setWorlds(response);
|
||||
const formattedWorlds: SelectBoxProps[] = response.map(
|
||||
setWorlds(response.worlds);
|
||||
setToolEnabled(response.enabled);
|
||||
if (setBook && book) {
|
||||
setBook({...book, tools: {...book.tools, worlds: response.enabled}});
|
||||
}
|
||||
const formattedWorlds: SelectBoxProps[] = response.worlds.map(
|
||||
(world: WorldProps): SelectBoxProps => ({
|
||||
label: world.name,
|
||||
value: world.id.toString(),
|
||||
@@ -193,156 +233,170 @@ export function WorldSetting(props: any, ref: any) {
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<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);
|
||||
}
|
||||
}}
|
||||
data={worldsSelector.length > 0 ? worldsSelector : [{
|
||||
label: t("worldSetting.noWorldAvailable"),
|
||||
value: '0'
|
||||
}]}
|
||||
defaultValue={worlds[selectedWorldIndex]?.id.toString() || '0'}
|
||||
placeholder={t("worldSetting.selectWorldPlaceholder")}
|
||||
/>
|
||||
}
|
||||
actionIcon={faPlus}
|
||||
actionLabel={t("worldSetting.addWorldLabel")}
|
||||
action={async () => setShowAddNewWorld(!showAddNewWorld)}
|
||||
{showToggle && (
|
||||
<div className="bg-secondary/20 rounded-xl p-4 shadow-inner border border-secondary/30">
|
||||
<ToggleSwitch
|
||||
enabled={toolEnabled}
|
||||
setEnabled={handleToggleTool}
|
||||
label={t('worldSetting.enableTool')}
|
||||
description={t('worldSetting.enableToolDescription')}
|
||||
/>
|
||||
|
||||
{showAddNewWorld && (
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={newWorldName}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) => setNewWorldName(e.target.value)}
|
||||
placeholder={t("worldSetting.newWorldPlaceholder")}
|
||||
/>
|
||||
}
|
||||
actionIcon={faPlus}
|
||||
actionLabel={t("worldSetting.createWorldLabel")}
|
||||
addButtonCallBack={handleAddNewWorld}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{worlds.length > 0 && worlds[selectedWorldIndex] ? (
|
||||
<WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex}}>
|
||||
<div
|
||||
className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-5 border border-secondary/50 shadow-lg">
|
||||
<div className="mb-4">
|
||||
)}
|
||||
{toolEnabled && (
|
||||
<>
|
||||
<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.worldName")}
|
||||
fieldName={t("worldSetting.selectWorld")}
|
||||
input={
|
||||
<TextInput
|
||||
value={worlds[selectedWorldIndex].name}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) => {
|
||||
const updatedWorlds: WorldProps[] = [...worlds];
|
||||
updatedWorlds[selectedWorldIndex].name = e.target.value
|
||||
setWorlds(updatedWorlds);
|
||||
<SelectBox
|
||||
onChangeCallBack={(e) => {
|
||||
const worldId = e.target.value;
|
||||
const index = worlds.findIndex(world => world.id.toString() === worldId);
|
||||
if (index !== -1) {
|
||||
setSelectedWorldIndex(index);
|
||||
}
|
||||
}}
|
||||
placeholder={t("worldSetting.worldNamePlaceholder")}
|
||||
data={worldsSelector.length > 0 ? worldsSelector : [{
|
||||
label: t("worldSetting.noWorldAvailable"),
|
||||
value: '0'
|
||||
}]}
|
||||
defaultValue={worlds[selectedWorldIndex]?.id.toString() || '0'}
|
||||
placeholder={t("worldSetting.selectWorldPlaceholder")}
|
||||
/>
|
||||
}
|
||||
actionIcon={faPlus}
|
||||
actionLabel={t("worldSetting.addWorldLabel")}
|
||||
action={async () => setShowAddNewWorld(!showAddNewWorld)}
|
||||
/>
|
||||
</div>
|
||||
<InputField
|
||||
fieldName={t("worldSetting.worldHistory")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].history || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'history')}
|
||||
placeholder={t("worldSetting.worldHistoryPlaceholder")}
|
||||
|
||||
{showAddNewWorld && (
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={newWorldName}
|
||||
setValue={(e: ChangeEvent<HTMLInputElement>) => setNewWorldName(e.target.value)}
|
||||
placeholder={t("worldSetting.newWorldPlaceholder")}
|
||||
/>
|
||||
}
|
||||
actionIcon={faPlus}
|
||||
actionLabel={t("worldSetting.createWorldLabel")}
|
||||
addButtonCallBack={handleAddNewWorld}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<InputField
|
||||
fieldName={t("worldSetting.politics")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].politics || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'politics')}
|
||||
placeholder={t("worldSetting.politicsPlaceholder")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<InputField
|
||||
fieldName={t("worldSetting.economy")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].economy || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'economy')}
|
||||
placeholder={t("worldSetting.economyPlaceholder")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<InputField
|
||||
fieldName={t("worldSetting.religion")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].religion || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'religion')}
|
||||
placeholder={t("worldSetting.religionPlaceholder")}
|
||||
|
||||
{worlds.length > 0 && worlds[selectedWorldIndex] ? (
|
||||
<WorldContext.Provider value={{worlds, setWorlds, selectedWorldIndex}}>
|
||||
<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);
|
||||
}}
|
||||
placeholder={t("worldSetting.worldNamePlaceholder")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<InputField
|
||||
fieldName={t("worldSetting.languages")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].languages || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'languages')}
|
||||
placeholder={t("worldSetting.languagesPlaceholder")}
|
||||
</div>
|
||||
<InputField
|
||||
fieldName={t("worldSetting.worldHistory")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].history || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'history')}
|
||||
placeholder={t("worldSetting.worldHistoryPlaceholder")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<InputField
|
||||
fieldName={t("worldSetting.politics")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].politics || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'politics')}
|
||||
placeholder={t("worldSetting.politicsPlaceholder")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<InputField
|
||||
fieldName={t("worldSetting.economy")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].economy || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'economy')}
|
||||
placeholder={t("worldSetting.economyPlaceholder")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<InputField
|
||||
fieldName={t("worldSetting.religion")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].religion || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'religion')}
|
||||
placeholder={t("worldSetting.religionPlaceholder")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<InputField
|
||||
fieldName={t("worldSetting.languages")}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
value={worlds[selectedWorldIndex].languages || ''}
|
||||
setValue={(e) => handleInputChange(e.target.value, 'languages')}
|
||||
placeholder={t("worldSetting.languagesPlaceholder")}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{elementSections.map((section, index) => (
|
||||
<div key={index}
|
||||
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
|
||||
<h3 className="text-lg font-semibold text-text-primary mb-4 flex items-center">
|
||||
<FontAwesomeIcon icon={section.icon} className="mr-2 w-5 h-5"/>
|
||||
{section.title}
|
||||
<span
|
||||
className="ml-2 text-sm bg-dark-background text-text-secondary py-0.5 px-2 rounded-full">
|
||||
{worlds[selectedWorldIndex][section.section]?.length || 0}
|
||||
</span>
|
||||
</h3>
|
||||
<WorldElementComponent
|
||||
sectionLabel={section.title}
|
||||
sectionType={section.section}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</WorldContext.Provider>
|
||||
) : (
|
||||
<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("worldSetting.noWorldAvailable")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{elementSections.map((section, index) => (
|
||||
<div key={index}
|
||||
className="bg-tertiary/90 backdrop-blur-sm rounded-xl shadow-lg p-4 border border-secondary/50">
|
||||
<h3 className="text-lg font-semibold text-text-primary mb-4 flex items-center">
|
||||
<FontAwesomeIcon icon={section.icon} className="mr-2 w-5 h-5"/>
|
||||
{section.title}
|
||||
<span
|
||||
className="ml-2 text-sm bg-dark-background text-text-secondary py-0.5 px-2 rounded-full">
|
||||
{worlds[selectedWorldIndex][section.section]?.length || 0}
|
||||
</span>
|
||||
</h3>
|
||||
<WorldElementComponent
|
||||
sectionLabel={section.title}
|
||||
sectionType={section.section}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</WorldContext.Provider>
|
||||
) : (
|
||||
<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("worldSetting.noWorldAvailable")}</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user