Add components for Act management and integrate Electron setup
This commit is contained in:
natreex
444
components/book/settings/locations/LocationComponent.tsx
Normal file
444
components/book/settings/locations/LocationComponent.tsx
Normal file
@@ -0,0 +1,444 @@
|
||||
'use client'
|
||||
import {faMapMarkerAlt, faPlus, faTrash} from '@fortawesome/free-solid-svg-icons';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import React, {ChangeEvent, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
|
||||
import {SessionContext} from "@/context/SessionContext";
|
||||
import {AlertContext} from "@/context/AlertContext";
|
||||
import {BookContext} from "@/context/BookContext";
|
||||
import System from '@/lib/models/System';
|
||||
import InputField from "@/components/form/InputField";
|
||||
import TextInput from '@/components/form/TextInput';
|
||||
import TexteAreaInput from "@/components/form/TexteAreaInput";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {LangContext, LangContextProps} from "@/context/LangContext";
|
||||
|
||||
interface SubElement {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface Element {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
subElements: SubElement[];
|
||||
}
|
||||
|
||||
interface LocationProps {
|
||||
id: string;
|
||||
name: string;
|
||||
elements: Element[];
|
||||
}
|
||||
|
||||
export function LocationComponent(props: any, ref: any) {
|
||||
const t = useTranslations();
|
||||
const {lang} = useContext<LangContextProps>(LangContext);
|
||||
const {session} = useContext(SessionContext);
|
||||
const {successMessage, errorMessage} = useContext(AlertContext);
|
||||
const {book} = 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 }>({});
|
||||
|
||||
useImperativeHandle(ref, function () {
|
||||
return {
|
||||
handleSave: handleSave,
|
||||
};
|
||||
});
|
||||
|
||||
useEffect((): void => {
|
||||
getAllLocations().then();
|
||||
}, []);
|
||||
|
||||
async function getAllLocations(): Promise<void> {
|
||||
try {
|
||||
const response: LocationProps[] = await System.authGetQueryToServer<LocationProps[]>(`location/all`, token, lang, {
|
||||
bookid: bookId,
|
||||
});
|
||||
if (response && response.length > 0) {
|
||||
setSections(response);
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t('locationComponent.errorUnknownFetchLocations'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAddSection(): Promise<void> {
|
||||
if (!newSectionName.trim()) {
|
||||
errorMessage(t('locationComponent.errorSectionNameEmpty'))
|
||||
return
|
||||
}
|
||||
try {
|
||||
const sectionId: string = await System.authPostToServer<string>(`location/section/add`, {
|
||||
bookId: bookId,
|
||||
locationName: newSectionName,
|
||||
}, token, lang);
|
||||
if (!sectionId) {
|
||||
errorMessage(t('locationComponent.errorUnknownAddSection'));
|
||||
return;
|
||||
}
|
||||
const newLocation: LocationProps = {
|
||||
id: sectionId,
|
||||
name: newSectionName,
|
||||
elements: [],
|
||||
};
|
||||
setSections([...sections, newLocation]);
|
||||
setNewSectionName('');
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t('locationComponent.errorUnknownAddSection'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAddElement(sectionId: string): Promise<void> {
|
||||
if (!newElementNames[sectionId]?.trim()) {
|
||||
errorMessage(t('locationComponent.errorElementNameEmpty'))
|
||||
return
|
||||
}
|
||||
try {
|
||||
const elementId: string = await System.authPostToServer<string>(`location/element/add`, {
|
||||
bookId: bookId,
|
||||
locationId: sectionId,
|
||||
elementName: newElementNames[sectionId],
|
||||
},
|
||||
token, lang);
|
||||
if (!elementId) {
|
||||
errorMessage(t('locationComponent.errorUnknownAddElement'));
|
||||
return;
|
||||
}
|
||||
const updatedSections: LocationProps[] = [...sections];
|
||||
const sectionIndex: number = updatedSections.findIndex(
|
||||
(section: LocationProps): boolean => section.id === sectionId,
|
||||
);
|
||||
updatedSections[sectionIndex].elements.push({
|
||||
id: elementId,
|
||||
name: newElementNames[sectionId],
|
||||
description: '',
|
||||
subElements: [],
|
||||
});
|
||||
setSections(updatedSections);
|
||||
setNewElementNames({...newElementNames, [sectionId]: ''});
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t('locationComponent.errorUnknownAddElement'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleElementChange(
|
||||
sectionId: string,
|
||||
elementIndex: number,
|
||||
field: keyof Element,
|
||||
value: string,
|
||||
): void {
|
||||
const updatedSections: LocationProps[] = [...sections];
|
||||
const sectionIndex: number = updatedSections.findIndex(
|
||||
(section: LocationProps): boolean => section.id === sectionId,
|
||||
);
|
||||
// @ts-ignore
|
||||
updatedSections[sectionIndex].elements[elementIndex][field] = value;
|
||||
setSections(updatedSections);
|
||||
}
|
||||
|
||||
async function handleAddSubElement(
|
||||
sectionId: string,
|
||||
elementIndex: number,
|
||||
): Promise<void> {
|
||||
if (!newSubElementNames[elementIndex]?.trim()) {
|
||||
errorMessage(t('locationComponent.errorSubElementNameEmpty'))
|
||||
return
|
||||
}
|
||||
const sectionIndex: number = sections.findIndex(
|
||||
(section: LocationProps): boolean => section.id === sectionId,
|
||||
);
|
||||
try {
|
||||
const subElementId: string = await System.authPostToServer<string>(`location/sub-element/add`, {
|
||||
elementId: sections[sectionIndex].elements[elementIndex].id,
|
||||
subElementName: newSubElementNames[elementIndex],
|
||||
}, token, lang);
|
||||
if (!subElementId) {
|
||||
errorMessage(t('locationComponent.errorUnknownAddSubElement'));
|
||||
return;
|
||||
}
|
||||
const updatedSections: LocationProps[] = [...sections];
|
||||
updatedSections[sectionIndex].elements[elementIndex].subElements.push({
|
||||
id: subElementId,
|
||||
name: newSubElementNames[elementIndex],
|
||||
description: '',
|
||||
});
|
||||
setSections(updatedSections);
|
||||
setNewSubElementNames({...newSubElementNames, [elementIndex]: ''});
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t('locationComponent.errorUnknownAddSubElement'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleSubElementChange(
|
||||
sectionId: string,
|
||||
elementIndex: number,
|
||||
subElementIndex: number,
|
||||
field: keyof SubElement,
|
||||
value: string,
|
||||
): void {
|
||||
const updatedSections: LocationProps[] = [...sections];
|
||||
const sectionIndex: number = updatedSections.findIndex(
|
||||
(section: LocationProps): boolean => section.id === sectionId,
|
||||
);
|
||||
updatedSections[sectionIndex].elements[elementIndex].subElements[
|
||||
subElementIndex
|
||||
][field] = value;
|
||||
setSections(updatedSections);
|
||||
}
|
||||
|
||||
async function handleRemoveElement(
|
||||
sectionId: string,
|
||||
elementIndex: number,
|
||||
): Promise<void> {
|
||||
try {
|
||||
const response: boolean = await System.authDeleteToServer<boolean>(`location/element/delete`, {
|
||||
elementId: sections.find((section: LocationProps): boolean => section.id === sectionId)
|
||||
?.elements[elementIndex].id,
|
||||
}, token, lang);
|
||||
if (!response) {
|
||||
errorMessage(t('locationComponent.errorUnknownDeleteElement'));
|
||||
return;
|
||||
}
|
||||
const updatedSections: LocationProps[] = [...sections];
|
||||
const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId,);
|
||||
updatedSections[sectionIndex].elements.splice(elementIndex, 1);
|
||||
setSections(updatedSections);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t('locationComponent.errorUnknownDeleteElement'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemoveSubElement(
|
||||
sectionId: string,
|
||||
elementIndex: number,
|
||||
subElementIndex: number,
|
||||
): Promise<void> {
|
||||
try {
|
||||
const response: boolean = await System.authDeleteToServer<boolean>(`location/sub-element/delete`, {
|
||||
subElementId: sections.find((section: LocationProps): boolean => section.id === sectionId)?.elements[elementIndex].subElements[subElementIndex].id,
|
||||
}, token, lang);
|
||||
if (!response) {
|
||||
errorMessage(t('locationComponent.errorUnknownDeleteSubElement'));
|
||||
return;
|
||||
}
|
||||
const updatedSections: LocationProps[] = [...sections];
|
||||
const sectionIndex: number = updatedSections.findIndex((section: LocationProps): boolean => section.id === sectionId,);
|
||||
updatedSections[sectionIndex].elements[elementIndex].subElements.splice(subElementIndex, 1,);
|
||||
setSections(updatedSections);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t('locationComponent.errorUnknownDeleteSubElement'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemoveSection(sectionId: string): Promise<void> {
|
||||
try {
|
||||
const response: boolean = await System.authDeleteToServer<boolean>(`location/delete`, {
|
||||
locationId: sectionId,
|
||||
}, token, lang);
|
||||
if (!response) {
|
||||
errorMessage(t('locationComponent.errorUnknownDeleteSection'));
|
||||
return;
|
||||
}
|
||||
const updatedSections: LocationProps[] = sections.filter((section: LocationProps): boolean => section.id !== sectionId,);
|
||||
setSections(updatedSections);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t('locationComponent.errorUnknownDeleteSection'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave(): Promise<void> {
|
||||
try {
|
||||
const response: boolean = await System.authPostToServer<boolean>(`location/update`, {
|
||||
locations: sections,
|
||||
}, token, lang);
|
||||
if (!response) {
|
||||
errorMessage(t('locationComponent.errorUnknownSave'));
|
||||
return;
|
||||
}
|
||||
successMessage(t('locationComponent.successSave'));
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t('locationComponent.errorUnknownSave'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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}
|
||||
/>
|
||||
</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>
|
||||
)}
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
export default forwardRef(LocationComponent);
|
||||
Reference in New Issue
Block a user