Remove unused components and models for improved maintainability
- Deleted redundant components (`AddActionButton`, `AlertBox`, `AlertStack`, `BackButton`, `CancelButton`, and `CollapsableArea`) and related files. - Removed unused models (`Book`, `BookSerie`, `BookTables`, `Character`, and `Chapter`) to reduce codebase clutter. - Updated project structure and references to reflect these removals.
This commit is contained in:
natreex
@@ -1,30 +1,21 @@
|
||||
import {Dispatch, SetStateAction, useContext, useState} from 'react';
|
||||
import {
|
||||
faFire,
|
||||
faFlag,
|
||||
faPuzzlePiece,
|
||||
faScaleBalanced,
|
||||
faTrophy,
|
||||
IconDefinition,
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import {Act as ActType, Incident, PlotPoint} from '@/lib/models/Book';
|
||||
import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
|
||||
import System from '@/lib/models/System';
|
||||
import {BookContext} from '@/context/BookContext';
|
||||
import {SessionContext} from '@/context/SessionContext';
|
||||
import {AlertContext} from '@/context/AlertContext';
|
||||
import CollapsableArea from '@/components/CollapsableArea';
|
||||
import React, {Dispatch, SetStateAction, useContext, useState} from 'react';
|
||||
import {Flag, Flame, LucideIcon, Puzzle, Scale, Trophy} from 'lucide-react';
|
||||
import {Act as ActType, Incident, PlotPoint} from '@/lib/types/book';
|
||||
import {ActChapter, ChapterListProps} from '@/lib/types/chapter';
|
||||
import {apiDelete, apiPost} from '@/lib/api/client';
|
||||
import {isDesktop} from '@/lib/configs';
|
||||
import * as tauri from '@/lib/tauri';
|
||||
import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
|
||||
import {BookContext, BookContextProps} from '@/context/BookContext';
|
||||
import {SessionContext, SessionContextProps} from '@/context/SessionContext';
|
||||
import {AlertContext, AlertContextProps} from '@/context/AlertContext';
|
||||
import Collapse from '@/components/ui/Collapse';
|
||||
import ActDescription from '@/components/book/settings/story/act/ActDescription';
|
||||
import ActChaptersSection from '@/components/book/settings/story/act/ActChaptersSection';
|
||||
import ActIncidents from '@/components/book/settings/story/act/ActIncidents';
|
||||
import ActPlotPoints from '@/components/book/settings/story/act/ActPlotPoints';
|
||||
import {useTranslations} from 'next-intl';
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
import {LangContext, LangContextProps} from "@/context/LangContext";
|
||||
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
|
||||
import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
|
||||
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
|
||||
import {SyncedBook} from "@/lib/models/SyncedBook";
|
||||
import * as tauri from '@/lib/tauri';
|
||||
|
||||
interface ActProps {
|
||||
acts: ActType[];
|
||||
@@ -34,14 +25,12 @@ interface ActProps {
|
||||
|
||||
export default function Act({acts, setActs, mainChapters}: ActProps) {
|
||||
const t = useTranslations('actComponent');
|
||||
const {lang} = useContext<LangContextProps>(LangContext);
|
||||
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
|
||||
const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
|
||||
const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
|
||||
const {book} = useContext(BookContext);
|
||||
const {session} = useContext(SessionContext);
|
||||
const {errorMessage, successMessage} = useContext(AlertContext);
|
||||
|
||||
const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
|
||||
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
|
||||
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
|
||||
const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
|
||||
const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
|
||||
|
||||
const bookId: string | undefined = book?.bookId;
|
||||
const token: string = session.accessToken;
|
||||
|
||||
@@ -77,24 +66,16 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
|
||||
|
||||
async function addIncident(actId: number): Promise<void> {
|
||||
if (newIncidentTitle.trim() === '') return;
|
||||
|
||||
|
||||
try {
|
||||
let incidentId: string;
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
incidentId = await tauri.addIncident(bookId!, newIncidentTitle);
|
||||
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
|
||||
incidentId = await tauri.addIncident(bookId ?? '', newIncidentTitle);
|
||||
} else {
|
||||
incidentId = await System.authPostToServer<string>('book/incident/new', {
|
||||
incidentId = await apiPost<string>('book/incident/new', {
|
||||
bookId,
|
||||
name: newIncidentTitle,
|
||||
}, token, lang);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('add_incident', {data: {
|
||||
bookId,
|
||||
incidentId,
|
||||
name: newIncidentTitle,
|
||||
}});
|
||||
}
|
||||
}
|
||||
if (!incidentId) {
|
||||
errorMessage(t('errorAddIncident'));
|
||||
@@ -108,7 +89,7 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
|
||||
summary: '',
|
||||
chapters: [],
|
||||
};
|
||||
|
||||
|
||||
return {
|
||||
...act,
|
||||
incidents: [...(act.incidents || []), newIncident],
|
||||
@@ -130,15 +111,13 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
|
||||
async function deleteIncident(actId: number, incidentId: string): Promise<void> {
|
||||
try {
|
||||
let response: boolean;
|
||||
const deleteData = { bookId, incidentId, deletedAt: System.timeStampInSeconds() };
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
response = await tauri.removeIncident(deleteData.bookId!, deleteData.incidentId, deleteData.deletedAt);
|
||||
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
|
||||
response = await tauri.removeIncident(bookId ?? '', incidentId, Date.now());
|
||||
} else {
|
||||
response = await System.authDeleteToServer<boolean>('book/incident/remove', deleteData, token, lang);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('remove_incident', {data: deleteData});
|
||||
}
|
||||
response = await apiDelete<boolean>('book/incident/remove', {
|
||||
bookId,
|
||||
incidentId,
|
||||
}, token, lang);
|
||||
}
|
||||
if (!response) {
|
||||
errorMessage(t('errorDeleteIncident'));
|
||||
@@ -169,22 +148,14 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
|
||||
if (newPlotPointTitle.trim() === '') return;
|
||||
try {
|
||||
let plotId: string;
|
||||
const plotData = {
|
||||
bookId,
|
||||
name: newPlotPointTitle,
|
||||
incidentId: selectedIncidentId,
|
||||
};
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
plotId = await tauri.addPlotPoint(plotData.bookId!, plotData.name, plotData.incidentId);
|
||||
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
|
||||
plotId = await tauri.addPlotPoint(bookId ?? '', newPlotPointTitle, selectedIncidentId);
|
||||
} else {
|
||||
plotId = await System.authPostToServer<string>('book/plot/new', plotData, token, lang);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('add_plot_point', {data: {
|
||||
...plotData,
|
||||
plotId,
|
||||
}});
|
||||
}
|
||||
plotId = await apiPost<string>('book/plot/new', {
|
||||
bookId,
|
||||
name: newPlotPointTitle,
|
||||
incidentId: selectedIncidentId,
|
||||
}, token, lang);
|
||||
}
|
||||
if (!plotId) {
|
||||
errorMessage(t('errorAddPlotPoint'));
|
||||
@@ -221,15 +192,12 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
|
||||
async function deletePlotPoint(actId: number, plotPointId: string): Promise<void> {
|
||||
try {
|
||||
let response: boolean;
|
||||
const deleteData = { plotId: plotPointId, bookId, deletedAt: System.timeStampInSeconds() };
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
response = await tauri.removePlotPoint(deleteData.plotId, deleteData.bookId!, deleteData.deletedAt);
|
||||
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
|
||||
response = await tauri.removePlotPoint(plotPointId, bookId ?? '', Date.now());
|
||||
} else {
|
||||
response = await System.authDeleteToServer<boolean>('book/plot/remove', deleteData, token, lang);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('remove_plot_point', {data: deleteData});
|
||||
}
|
||||
response = await apiDelete<boolean>('book/plot/remove', {
|
||||
plotId: plotPointId,
|
||||
}, token, lang);
|
||||
}
|
||||
if (!response) {
|
||||
errorMessage(t('errorDeletePlotPoint'));
|
||||
@@ -269,24 +237,22 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
|
||||
}
|
||||
try {
|
||||
let linkId: string;
|
||||
const linkData = {
|
||||
bookId,
|
||||
chapterId: chapterId,
|
||||
actId: actId,
|
||||
plotId: destination === 'plotPoint' ? itemId : null,
|
||||
incidentId: destination === 'incident' ? itemId : null,
|
||||
};
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
linkId = await tauri.addChapterInformation(linkData as any);
|
||||
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
|
||||
linkId = await tauri.addChapterInformation({
|
||||
chapterId: chapterId,
|
||||
actId: actId,
|
||||
bookId: bookId ?? '',
|
||||
plotId: destination === 'plotPoint' ? itemId : undefined,
|
||||
incidentId: destination === 'incident' ? itemId : undefined,
|
||||
});
|
||||
} else {
|
||||
linkId = await System.authPostToServer<string>('chapter/resume/add', linkData, token, lang);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('add_chapter_information', {data: {
|
||||
...linkData,
|
||||
chapterInfoId: linkId,
|
||||
}});
|
||||
}
|
||||
linkId = await apiPost<string>('chapter/resume/add', {
|
||||
bookId,
|
||||
chapterId: chapterId,
|
||||
actId: actId,
|
||||
plotId: destination === 'plotPoint' ? itemId : null,
|
||||
incidentId: destination === 'incident' ? itemId : null,
|
||||
}, token, lang);
|
||||
}
|
||||
if (!linkId) {
|
||||
errorMessage(t('errorLinkChapter'));
|
||||
@@ -363,15 +329,12 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
|
||||
): Promise<void> {
|
||||
try {
|
||||
let response: boolean;
|
||||
const unlinkData = { chapterInfoId, bookId, deletedAt: System.timeStampInSeconds() };
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
response = await tauri.removeChapterInformation(unlinkData.chapterInfoId, unlinkData.bookId!, unlinkData.deletedAt);
|
||||
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
|
||||
response = await tauri.removeChapterInformation(chapterInfoId, bookId ?? '', Date.now());
|
||||
} else {
|
||||
response = await System.authDeleteToServer<boolean>('chapter/resume/remove', unlinkData, token, lang);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('remove_chapter_information', {data: unlinkData});
|
||||
}
|
||||
response = await apiDelete<boolean>('chapter/resume/remove', {
|
||||
chapterInfoId,
|
||||
}, token, lang);
|
||||
}
|
||||
if (!response) {
|
||||
errorMessage(t('errorUnlinkChapter'));
|
||||
@@ -621,20 +584,20 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
|
||||
);
|
||||
}
|
||||
|
||||
function renderActIcon(actId: number): IconDefinition {
|
||||
function renderActIcon(actId: number): LucideIcon {
|
||||
switch (actId) {
|
||||
case 1:
|
||||
return faFlag;
|
||||
return Flag;
|
||||
case 2:
|
||||
return faFire;
|
||||
return Flame;
|
||||
case 3:
|
||||
return faPuzzlePiece;
|
||||
return Puzzle;
|
||||
case 4:
|
||||
return faScaleBalanced;
|
||||
return Scale;
|
||||
case 5:
|
||||
return faTrophy;
|
||||
return Trophy;
|
||||
default:
|
||||
return faFlag;
|
||||
return Flag;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -658,7 +621,7 @@ export default function Act({acts, setActs, mainChapters}: ActProps) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{acts.map((act: ActType) => (
|
||||
<CollapsableArea key={`act-${act.id}`}
|
||||
<Collapse variant="card" key={`act-${act.id}`}
|
||||
title={renderActTitle(act.id)}
|
||||
icon={renderActIcon(act.id)}
|
||||
children={
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import {ChangeEvent, useContext, useState} from 'react';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faPlus, faTrash, faWarning,} from '@fortawesome/free-solid-svg-icons';
|
||||
import {Issue} from '@/lib/models/Book';
|
||||
import System from '@/lib/models/System';
|
||||
import {BookContext} from '@/context/BookContext';
|
||||
import {SessionContext} from '@/context/SessionContext';
|
||||
import {AlertContext} from '@/context/AlertContext';
|
||||
import CollapsableArea from "@/components/CollapsableArea";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {LangContext, LangContextProps} from "@/context/LangContext";
|
||||
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
|
||||
import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
|
||||
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
|
||||
import {SyncedBook} from "@/lib/models/SyncedBook";
|
||||
import React, {ChangeEvent, useContext, useState} from 'react';
|
||||
import {AlertTriangle, Plus, Trash2} from 'lucide-react';
|
||||
import IconButton from "@/components/ui/IconButton";
|
||||
import {Issue} from '@/lib/types/book';
|
||||
import {apiDelete, apiPost} from '@/lib/api/client';
|
||||
import {isDesktop} from '@/lib/configs';
|
||||
import * as tauri from '@/lib/tauri';
|
||||
import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
|
||||
import {BookContext, BookContextProps} from '@/context/BookContext';
|
||||
import {SessionContext, SessionContextProps} from '@/context/SessionContext';
|
||||
import {AlertContext, AlertContextProps} from '@/context/AlertContext';
|
||||
import Collapse from "@/components/ui/Collapse";
|
||||
import TextInput from "@/components/form/TextInput";
|
||||
import InputField from "@/components/form/InputField";
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
import {LangContext, LangContextProps} from "@/context/LangContext";
|
||||
|
||||
interface IssuesProps {
|
||||
issues: Issue[];
|
||||
@@ -22,14 +22,12 @@ interface IssuesProps {
|
||||
|
||||
export default function Issues({issues, setIssues}: IssuesProps) {
|
||||
const t = useTranslations();
|
||||
const {lang} = useContext<LangContextProps>(LangContext);
|
||||
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
|
||||
const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
|
||||
const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
|
||||
const {book} = useContext(BookContext);
|
||||
const {session} = useContext(SessionContext);
|
||||
const {errorMessage} = useContext(AlertContext);
|
||||
|
||||
const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
|
||||
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
|
||||
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
|
||||
const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
|
||||
const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
|
||||
|
||||
const bookId: string | undefined = book?.bookId;
|
||||
const token: string = session.accessToken;
|
||||
|
||||
@@ -42,21 +40,13 @@ export default function Issues({issues, setIssues}: IssuesProps) {
|
||||
}
|
||||
try {
|
||||
let issueId: string;
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
issueId = await tauri.addIssue(bookId!, newIssueName);
|
||||
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
|
||||
issueId = await tauri.addIssue(bookId ?? '', newIssueName);
|
||||
} else {
|
||||
issueId = await System.authPostToServer<string>('book/issue/add', {
|
||||
issueId = await apiPost<string>('book/issue/add', {
|
||||
bookId,
|
||||
name: newIssueName,
|
||||
}, token, lang);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('add_issue', {data: {
|
||||
bookId,
|
||||
issueId,
|
||||
name: newIssueName,
|
||||
}});
|
||||
}
|
||||
}
|
||||
if (!issueId) {
|
||||
errorMessage(t("issues.errorAdd"));
|
||||
@@ -66,7 +56,7 @@ export default function Issues({issues, setIssues}: IssuesProps) {
|
||||
name: newIssueName,
|
||||
id: issueId,
|
||||
};
|
||||
|
||||
|
||||
setIssues([...issues, newIssue]);
|
||||
setNewIssueName('');
|
||||
} catch (e: unknown) {
|
||||
@@ -81,33 +71,23 @@ export default function Issues({issues, setIssues}: IssuesProps) {
|
||||
async function deleteIssue(issueId: string): Promise<void> {
|
||||
if (issueId === undefined) {
|
||||
errorMessage(t("issues.errorInvalidId"));
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
try {
|
||||
let response: boolean;
|
||||
const deletedAt: number = System.timeStampInSeconds();
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
response = await tauri.removeIssue(bookId!, issueId, deletedAt);
|
||||
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
|
||||
response = await tauri.removeIssue(bookId ?? '', issueId, Date.now());
|
||||
} else {
|
||||
response = await System.authDeleteToServer<boolean>(
|
||||
response = await apiDelete<boolean>(
|
||||
'book/issue/remove',
|
||||
{
|
||||
bookId,
|
||||
issueId,
|
||||
deletedAt,
|
||||
},
|
||||
token,
|
||||
lang
|
||||
);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('remove_issue', {data: {
|
||||
bookId,
|
||||
issueId,
|
||||
deletedAt,
|
||||
}});
|
||||
}
|
||||
}
|
||||
if (response) {
|
||||
const updatedIssues: Issue[] = issues.filter((issue: Issue): boolean => issue.id !== issueId,);
|
||||
@@ -135,51 +115,48 @@ export default function Issues({issues, setIssues}: IssuesProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<CollapsableArea title={t("issues.title")} children={
|
||||
<div className="p-1">
|
||||
<Collapse variant="card" title={t("issues.title")} icon={AlertTriangle}>
|
||||
<div className="space-y-2">
|
||||
{issues && issues.length > 0 ? (
|
||||
issues.map((item: Issue) => (
|
||||
<div
|
||||
className="mb-2 bg-secondary/30 rounded-xl p-3 shadow-sm hover:shadow-md transition-all duration-200"
|
||||
key={`issue-${item.id}`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<input
|
||||
className="flex-1 text-text-primary text-base px-2 py-1 bg-transparent border-b border-secondary/50 focus:outline-none focus:border-primary transition-colors duration-200 placeholder:text-muted/60"
|
||||
value={item.name}
|
||||
onChange={(e) => updateIssueName(item.id, e.target.value)}
|
||||
placeholder={t("issues.issueNamePlaceholder")}
|
||||
/>
|
||||
<button
|
||||
className="p-1.5 ml-2 rounded-lg text-error hover:bg-error/20 hover:scale-110 transition-all duration-200"
|
||||
onClick={() => deleteIssue(item.id)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrash} size="sm"/>
|
||||
</button>
|
||||
issues.map(function (item: Issue): React.JSX.Element {
|
||||
return (
|
||||
<div key={`issue-${item.id}`} className="flex items-center gap-2">
|
||||
<div className="flex-1">
|
||||
<TextInput
|
||||
value={item.name}
|
||||
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
|
||||
updateIssueName(item.id, e.target.value);
|
||||
}}
|
||||
placeholder={t("issues.issueNamePlaceholder")}
|
||||
/>
|
||||
</div>
|
||||
<IconButton icon={Trash2} variant="danger" size="sm"
|
||||
onClick={function (): Promise<void> {
|
||||
return deleteIssue(item.id);
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-text-secondary text-center py-2 text-sm">
|
||||
{t("issues.noIssue")}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center mt-3 bg-secondary/30 p-3 rounded-xl shadow-sm">
|
||||
<input
|
||||
className="flex-1 text-text-primary text-base px-2 py-1 bg-transparent border-b border-secondary/50 focus:outline-none focus:border-primary transition-colors duration-200 placeholder:text-muted/60"
|
||||
value={newIssueName}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => setNewIssueName(e.target.value)}
|
||||
placeholder={t("issues.newIssuePlaceholder")}
|
||||
/>
|
||||
<button
|
||||
className="bg-primary w-9 h-9 rounded-full flex justify-center items-center ml-2 text-text-primary shadow-md hover:shadow-lg hover:scale-110 hover:bg-primary-dark transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
|
||||
onClick={addNewIssue}
|
||||
disabled={newIssueName.trim() === ''}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus}/>
|
||||
</button>
|
||||
</div>
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={newIssueName}
|
||||
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
|
||||
setNewIssueName(e.target.value);
|
||||
}}
|
||||
placeholder={t("issues.newIssuePlaceholder")}
|
||||
/>
|
||||
}
|
||||
actionIcon={Plus}
|
||||
addButtonCallBack={addNewIssue}
|
||||
isAddButtonDisabled={newIssueName.trim() === ''}
|
||||
/>
|
||||
</div>
|
||||
} icon={faWarning}/>
|
||||
</Collapse>
|
||||
);
|
||||
}
|
||||
@@ -1,22 +1,22 @@
|
||||
'use client'
|
||||
|
||||
import {ChangeEvent, useContext, useEffect, useState} from 'react';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faArrowDown, faArrowUp, faBookmark, faMinus, faPlus, faTrash,} from '@fortawesome/free-solid-svg-icons';
|
||||
import {ChapterListProps} from '@/lib/models/Chapter';
|
||||
import System from '@/lib/models/System';
|
||||
import {BookContext} from '@/context/BookContext';
|
||||
import {SessionContext} from '@/context/SessionContext';
|
||||
import {AlertContext} from '@/context/AlertContext';
|
||||
import AlertBox from "@/components/AlertBox";
|
||||
import CollapsableArea from "@/components/CollapsableArea";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {LangContext} from "@/context/LangContext";
|
||||
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
|
||||
import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
|
||||
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
|
||||
import {SyncedBook} from "@/lib/models/SyncedBook";
|
||||
import React, {ChangeEvent, useContext, useEffect, useState} from 'react';
|
||||
import {ArrowDown, ArrowUp, Bookmark, Trash2} from 'lucide-react';
|
||||
import {ChapterListProps} from '@/lib/types/chapter';
|
||||
import {apiDelete, apiPost} from '@/lib/api/client';
|
||||
import {isDesktop} from '@/lib/configs';
|
||||
import * as tauri from '@/lib/tauri';
|
||||
import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
|
||||
import {BookContext, BookContextProps} from '@/context/BookContext';
|
||||
import {SessionContext, SessionContextProps} from '@/context/SessionContext';
|
||||
import {AlertContext, AlertContextProps} from '@/context/AlertContext';
|
||||
import AlertBox from "@/components/ui/AlertBox";
|
||||
import Collapse from "@/components/ui/Collapse";
|
||||
import IconButton from "@/components/ui/IconButton";
|
||||
import TextInput from "@/components/form/TextInput";
|
||||
import OrderInput from "@/components/form/OrderInput";
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
import {LangContext, LangContextProps} from "@/context/LangContext";
|
||||
|
||||
interface MainChapterProps {
|
||||
chapters: ChapterListProps[];
|
||||
@@ -25,14 +25,12 @@ interface MainChapterProps {
|
||||
|
||||
export default function MainChapter({chapters, setChapters}: MainChapterProps) {
|
||||
const t = useTranslations();
|
||||
const {lang} = useContext(LangContext)
|
||||
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
|
||||
const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
|
||||
const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
|
||||
const {book} = useContext(BookContext);
|
||||
const {session} = useContext(SessionContext);
|
||||
const {errorMessage, successMessage} = useContext(AlertContext);
|
||||
|
||||
const {lang}: LangContextProps = useContext<LangContextProps>(LangContext)
|
||||
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
|
||||
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
|
||||
const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
|
||||
const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
|
||||
|
||||
const bookId: string | undefined = book?.bookId;
|
||||
const token: string = session.accessToken;
|
||||
|
||||
@@ -87,20 +85,18 @@ export default function MainChapter({chapters, setChapters}: MainChapterProps) {
|
||||
try {
|
||||
setDeleteConfirmMessage(false);
|
||||
let response: boolean;
|
||||
const deletedAt: number = System.timeStampInSeconds();
|
||||
const deleteData = {
|
||||
bookId,
|
||||
chapterId: chapterIdToRemove,
|
||||
deletedAt,
|
||||
};
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
response = await tauri.removeChapter(deleteData.chapterId, deleteData.bookId!, deleteData.deletedAt);
|
||||
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
|
||||
response = await tauri.removeChapter(chapterIdToRemove, bookId ?? '', Date.now());
|
||||
} else {
|
||||
response = await System.authDeleteToServer<boolean>('chapter/remove', deleteData, token, lang);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('remove_chapter', {data: deleteData});
|
||||
}
|
||||
response = await apiDelete<boolean>(
|
||||
'chapter/remove',
|
||||
{
|
||||
bookId,
|
||||
chapterId: chapterIdToRemove,
|
||||
},
|
||||
token,
|
||||
lang,
|
||||
);
|
||||
}
|
||||
if (!response) {
|
||||
errorMessage(t("mainChapter.errorDelete"));
|
||||
@@ -120,33 +116,33 @@ export default function MainChapter({chapters, setChapters}: MainChapterProps) {
|
||||
if (newChapterTitle.trim() === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
let responseId: string;
|
||||
const chapterData = {
|
||||
bookId: bookId,
|
||||
wordsCount: 0,
|
||||
chapterOrder: newChapterOrder ? newChapterOrder : 0,
|
||||
title: newChapterTitle,
|
||||
};
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
responseId = await tauri.addChapter(chapterData);
|
||||
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
|
||||
responseId = await tauri.addChapter({
|
||||
bookId: bookId ?? '',
|
||||
title: newChapterTitle,
|
||||
chapterOrder: newChapterOrder ? newChapterOrder : 0,
|
||||
});
|
||||
} else {
|
||||
responseId = await System.authPostToServer<string>('chapter/add', chapterData, token);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('add_chapter', {data: {
|
||||
...chapterData,
|
||||
chapterId: responseId,
|
||||
}});
|
||||
}
|
||||
responseId = await apiPost<string>(
|
||||
'chapter/add',
|
||||
{
|
||||
bookId: bookId,
|
||||
wordsCount: 0,
|
||||
chapterOrder: newChapterOrder ? newChapterOrder : 0,
|
||||
title: newChapterTitle,
|
||||
},
|
||||
token,
|
||||
);
|
||||
}
|
||||
if (!responseId) {
|
||||
errorMessage(t("mainChapter.errorAdd"));
|
||||
return;
|
||||
}
|
||||
const newChapter: ChapterListProps = {
|
||||
chapterId: responseId as string,
|
||||
chapterId: responseId,
|
||||
title: newChapterTitle,
|
||||
chapterOrder: newChapterOrder,
|
||||
summary: '',
|
||||
@@ -154,7 +150,7 @@ export default function MainChapter({chapters, setChapters}: MainChapterProps) {
|
||||
};
|
||||
setChapters([...chapters, newChapter]);
|
||||
setNewChapterTitle('');
|
||||
|
||||
|
||||
setNewChapterOrder(newChapterOrder + 1);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
@@ -165,16 +161,6 @@ export default function MainChapter({chapters, setChapters}: MainChapterProps) {
|
||||
}
|
||||
}
|
||||
|
||||
function decrementNewChapterOrder(): void {
|
||||
if (newChapterOrder > 0) {
|
||||
setNewChapterOrder(newChapterOrder - 1);
|
||||
}
|
||||
}
|
||||
|
||||
function incrementNewChapterOrder(): void {
|
||||
setNewChapterOrder(newChapterOrder + 1);
|
||||
}
|
||||
|
||||
useEffect((): void => {
|
||||
const visibleChapters: ChapterListProps[] = chapters
|
||||
.filter((chapter: ChapterListProps): boolean => chapter.chapterOrder !== -1)
|
||||
@@ -196,50 +182,48 @@ export default function MainChapter({chapters, setChapters}: MainChapterProps) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<CollapsableArea icon={faBookmark} title={t("mainChapter.chapters")} children={
|
||||
<Collapse variant="card" icon={Bookmark} title={t("mainChapter.chapters")} children={
|
||||
<div className="space-y-4">
|
||||
{visibleChapters.length > 0 ? (
|
||||
<div>
|
||||
<div className="space-y-2">
|
||||
{visibleChapters.map((item: ChapterListProps, index: number) => (
|
||||
<div key={item.chapterId}
|
||||
className="mb-2 bg-secondary/30 rounded-xl p-3 shadow-sm hover:shadow-md transition-all duration-200">
|
||||
<div className="flex items-center">
|
||||
<span
|
||||
className="bg-primary-dark text-white text-sm w-6 h-6 rounded-full text-center leading-6 mr-2">
|
||||
{item.chapterOrder !== undefined ? item.chapterOrder : index}
|
||||
</span>
|
||||
<input
|
||||
className="flex-1 text-text-primary text-base px-2 py-1 bg-transparent border-b border-secondary/50 focus:outline-none focus:border-primary transition-colors duration-200"
|
||||
<div key={item.chapterId} className="flex items-center gap-2">
|
||||
<span
|
||||
className="text-muted text-xs w-5 h-5 rounded-md bg-tertiary text-center leading-5 shrink-0">
|
||||
{item.chapterOrder !== undefined ? item.chapterOrder : index}
|
||||
</span>
|
||||
<div className="flex-1">
|
||||
<TextInput
|
||||
value={item.title}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => handleChapterTitleChange(item.chapterId, e.target.value)}
|
||||
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
|
||||
handleChapterTitleChange(item.chapterId, e.target.value);
|
||||
}}
|
||||
placeholder={t("mainChapter.chapterTitlePlaceholder")}
|
||||
/>
|
||||
<div className="flex ml-1">
|
||||
<button
|
||||
className={`p-1.5 mx-0.5 rounded-lg hover:bg-secondary/50 transition-all duration-200 ${
|
||||
item.chapterOrder === 0 ? 'text-muted cursor-not-allowed' : 'text-primary hover:scale-110'
|
||||
}`}
|
||||
onClick={(): void => moveChapterUp(index)}
|
||||
disabled={item.chapterOrder === 0}
|
||||
>
|
||||
<FontAwesomeIcon icon={faArrowUp} size="sm"/>
|
||||
</button>
|
||||
<button
|
||||
className="p-1.5 mx-0.5 rounded-lg text-primary hover:bg-secondary/50 hover:scale-110 transition-all duration-200"
|
||||
onClick={(): void => moveChapterDown(index)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faArrowDown} size="sm"/>
|
||||
</button>
|
||||
<button
|
||||
className="p-1.5 mx-0.5 rounded-lg text-error hover:bg-error/20 hover:scale-110 transition-all duration-200"
|
||||
onClick={(): void => {
|
||||
setChapterIdToRemove(item.chapterId);
|
||||
setDeleteConfirmMessage(true);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrash} size="sm"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0">
|
||||
<IconButton
|
||||
icon={ArrowUp}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(): void => moveChapterUp(index)}
|
||||
disabled={item.chapterOrder === 0}
|
||||
/>
|
||||
<IconButton
|
||||
icon={ArrowDown}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={(): void => moveChapterDown(index)}
|
||||
/>
|
||||
<IconButton
|
||||
icon={Trash2}
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={(): void => {
|
||||
setChapterIdToRemove(item.chapterId);
|
||||
setDeleteConfirmMessage(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -250,44 +234,18 @@ export default function MainChapter({chapters, setChapters}: MainChapterProps) {
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="bg-secondary/30 rounded-xl p-3 mt-3 shadow-sm">
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className="flex items-center gap-1 bg-secondary/50 rounded-lg mr-2 px-1 py-0.5 shadow-inner">
|
||||
<button
|
||||
className={`w-6 h-6 rounded-full bg-secondary flex justify-center items-center hover:scale-110 transition-all duration-200 ${
|
||||
newChapterOrder <= 0 ? 'text-muted cursor-not-allowed opacity-50' : 'text-primary hover:bg-secondary-dark'
|
||||
}`}
|
||||
onClick={decrementNewChapterOrder}
|
||||
disabled={newChapterOrder <= 0}
|
||||
>
|
||||
<FontAwesomeIcon icon={faMinus} size="xs"/>
|
||||
</button>
|
||||
<span
|
||||
className="bg-primary-dark text-white text-sm w-6 h-6 rounded-full text-center leading-6 mx-0.5">
|
||||
{newChapterOrder}
|
||||
</span>
|
||||
<button
|
||||
className="w-6 h-6 rounded-full bg-secondary flex justify-center items-center text-primary hover:bg-secondary-dark hover:scale-110 transition-all duration-200"
|
||||
onClick={incrementNewChapterOrder}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} size="xs"/>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
className="flex-1 text-text-primary text-base px-2 py-1 bg-transparent border-b border-secondary/50 focus:outline-none focus:border-primary transition-colors duration-200 placeholder:text-muted/60"
|
||||
value={newChapterTitle}
|
||||
onChange={e => setNewChapterTitle(e.target.value)}
|
||||
placeholder={t("mainChapter.newChapterPlaceholder")}
|
||||
/>
|
||||
<button
|
||||
className="bg-primary w-9 h-9 rounded-full flex justify-center items-center ml-2 text-text-primary shadow-md hover:shadow-lg hover:scale-110 hover:bg-primary-dark transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
|
||||
onClick={addNewChapter}
|
||||
disabled={newChapterTitle.trim() === ''}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} className={'w-5 h-5'}/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<OrderInput
|
||||
value={newChapterTitle}
|
||||
setValue={function (e: ChangeEvent<HTMLInputElement>): void {
|
||||
setNewChapterTitle(e.target.value);
|
||||
}}
|
||||
order={newChapterOrder}
|
||||
setOrder={setNewChapterOrder}
|
||||
placeholder={t("mainChapter.newChapterPlaceholder")}
|
||||
onAdd={addNewChapter}
|
||||
isAddDisabled={newChapterTitle.trim() === ''}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
}/>
|
||||
|
||||
@@ -1,22 +1,21 @@
|
||||
'use client'
|
||||
|
||||
import {createContext, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
|
||||
import {BookContext} from '@/context/BookContext';
|
||||
import {SessionContext} from '@/context/SessionContext';
|
||||
import {AlertContext} from '@/context/AlertContext';
|
||||
import System from '@/lib/models/System';
|
||||
import {Act as ActType, Issue} from '@/lib/models/Book';
|
||||
import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
|
||||
import React, {createContext, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
|
||||
import {BookContext, BookContextProps} from '@/context/BookContext';
|
||||
import {SessionContext, SessionContextProps} from '@/context/SessionContext';
|
||||
import {AlertContext, AlertContextProps} from '@/context/AlertContext';
|
||||
import {apiGet, apiPost} from '@/lib/api/client';
|
||||
import {isDesktop} from '@/lib/configs';
|
||||
import * as tauri from '@/lib/tauri';
|
||||
import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
|
||||
import {Act as ActType, Incident, Issue, PlotPoint} from '@/lib/types/book';
|
||||
import {ActChapter, ChapterListProps} from '@/lib/types/chapter';
|
||||
import MainChapter from "@/components/book/settings/story/MainChapter";
|
||||
import Issues from "@/components/book/settings/story/Issue";
|
||||
import Act from "@/components/book/settings/story/Act";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
import {LangContext, LangContextProps} from "@/context/LangContext";
|
||||
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
|
||||
import {LocalSyncQueueContext, LocalSyncQueueContextProps} from "@/context/SyncQueueContext";
|
||||
import {BooksSyncContext, BooksSyncContextProps} from "@/context/BooksSyncContext";
|
||||
import {SyncedBook} from "@/lib/models/SyncedBook";
|
||||
import * as tauri from '@/lib/tauri';
|
||||
import {SettingRef} from "@/lib/types/settings";
|
||||
|
||||
export const StoryContext = createContext<{
|
||||
acts: ActType[];
|
||||
@@ -43,24 +42,22 @@ interface StoryFetchData {
|
||||
issues: Issue[];
|
||||
}
|
||||
|
||||
export function Story(props: any, ref: any) {
|
||||
export function Story(_props: object, ref: React.ForwardedRef<SettingRef>): React.JSX.Element {
|
||||
const t = useTranslations();
|
||||
const {lang} = useContext<LangContextProps>(LangContext);
|
||||
const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
|
||||
const {addToQueue} = useContext<LocalSyncQueueContextProps>(LocalSyncQueueContext);
|
||||
const {localSyncedBooks} = useContext<BooksSyncContextProps>(BooksSyncContext);
|
||||
const {book} = useContext(BookContext);
|
||||
const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
|
||||
const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
|
||||
const bookId: string = book?.bookId ? book.bookId.toString() : '';
|
||||
const {session} = useContext(SessionContext);
|
||||
const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
|
||||
const userToken: string = session.accessToken;
|
||||
const {errorMessage, successMessage} = useContext(AlertContext);
|
||||
|
||||
const {errorMessage, successMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
|
||||
const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
|
||||
|
||||
const [acts, setActs] = useState<ActType[]>([]);
|
||||
const [issues, setIssues] = useState<Issue[]>([]);
|
||||
const [mainChapters, setMainChapters] = useState<ChapterListProps[]>([]);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
|
||||
useImperativeHandle(ref, function () {
|
||||
useImperativeHandle(ref, function (): SettingRef {
|
||||
return {
|
||||
handleSave: handleSave
|
||||
};
|
||||
@@ -77,10 +74,10 @@ export function Story(props: any, ref: any) {
|
||||
async function getStoryData(): Promise<void> {
|
||||
try {
|
||||
let response: StoryFetchData;
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
|
||||
response = await tauri.getBookStory(bookId) as StoryFetchData;
|
||||
} else {
|
||||
response = await System.authGetQueryToServer<StoryFetchData>(`book/story`, userToken, lang, {
|
||||
response = await apiGet<StoryFetchData>(`book/story`, userToken, lang, {
|
||||
bookid: bookId,
|
||||
});
|
||||
}
|
||||
@@ -101,22 +98,22 @@ export function Story(props: any, ref: any) {
|
||||
}
|
||||
|
||||
function cleanupDeletedChapters(): void {
|
||||
const existingChapterIds: string[] = mainChapters.map(ch => ch.chapterId);
|
||||
const existingChapterIds: string[] = mainChapters.map((ch: ChapterListProps): string => ch.chapterId);
|
||||
|
||||
const updatedActs = acts.map((act: ActType) => {
|
||||
const updatedActs: ActType[] = acts.map((act: ActType): ActType => {
|
||||
const filteredChapters: ActChapter[] = act.chapters?.filter((chapter: ActChapter): boolean =>
|
||||
existingChapterIds.includes(chapter.chapterId)) || [];
|
||||
const updatedIncidents = act.incidents?.map(incident => {
|
||||
const updatedIncidents: Incident[] = act.incidents?.map((incident: Incident): Incident => {
|
||||
return {
|
||||
...incident,
|
||||
chapters: incident.chapters?.filter(chapter =>
|
||||
chapters: incident.chapters?.filter((chapter: ActChapter): boolean =>
|
||||
existingChapterIds.includes(chapter.chapterId)) || []
|
||||
};
|
||||
}) || [];
|
||||
const updatedPlotPoints = act.plotPoints?.map(plotPoint => {
|
||||
const updatedPlotPoints: PlotPoint[] = act.plotPoints?.map((plotPoint: PlotPoint): PlotPoint => {
|
||||
return {
|
||||
...plotPoint,
|
||||
chapters: plotPoint.chapters?.filter(chapter =>
|
||||
chapters: plotPoint.chapters?.filter((chapter: ActChapter): boolean =>
|
||||
existingChapterIds.includes(chapter.chapterId)) || []
|
||||
};
|
||||
}) || [];
|
||||
@@ -133,20 +130,20 @@ export function Story(props: any, ref: any) {
|
||||
async function handleSave(): Promise<void> {
|
||||
try {
|
||||
let response: boolean;
|
||||
const storyData = {
|
||||
bookId,
|
||||
acts,
|
||||
mainChapters,
|
||||
issues,
|
||||
};
|
||||
if (isCurrentlyOffline() || book?.localBook) {
|
||||
response = await tauri.updateBookStory(storyData);
|
||||
if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
|
||||
response = await tauri.updateBookStory({
|
||||
bookId,
|
||||
acts,
|
||||
mainChapters,
|
||||
issues,
|
||||
});
|
||||
} else {
|
||||
response = await System.authPostToServer<boolean>('book/story', storyData, userToken, lang);
|
||||
|
||||
if (localSyncedBooks.find((syncedBook: SyncedBook): boolean => syncedBook.id === bookId)) {
|
||||
addToQueue('update_book_story', {data: storyData});
|
||||
}
|
||||
response = await apiPost<boolean>('book/story', {
|
||||
bookId,
|
||||
acts,
|
||||
mainChapters,
|
||||
issues,
|
||||
}, userToken, lang);
|
||||
}
|
||||
if (!response) {
|
||||
errorMessage(t("story.errorSave"))
|
||||
@@ -186,4 +183,4 @@ export function Story(props: any, ref: any) {
|
||||
);
|
||||
}
|
||||
|
||||
export default forwardRef(Story);
|
||||
export default forwardRef<SettingRef, object>(Story);
|
||||
@@ -1,9 +1,9 @@
|
||||
import {ChangeEvent} from 'react';
|
||||
import {faTrash} from '@fortawesome/free-solid-svg-icons';
|
||||
import {ActChapter} from '@/lib/models/Chapter';
|
||||
import React, {ChangeEvent} from 'react';
|
||||
import {Trash2} from 'lucide-react';
|
||||
import {ActChapter} from '@/lib/types/chapter';
|
||||
import InputField from '@/components/form/InputField';
|
||||
import TexteAreaInput from '@/components/form/TexteAreaInput';
|
||||
import {useTranslations} from 'next-intl';
|
||||
import TextAreaInput from '@/components/form/TextAreaInput';
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
|
||||
interface ActChapterItemProps {
|
||||
chapter: ActChapter;
|
||||
@@ -15,11 +15,10 @@ export default function ActChapterItem({chapter, onUpdateSummary, onUnlink}: Act
|
||||
const t = useTranslations('actComponent');
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-secondary/20 p-4 rounded-xl mb-3 border border-secondary/30 shadow-sm hover:shadow-md transition-all duration-200">
|
||||
<div className="mb-3">
|
||||
<InputField
|
||||
input={
|
||||
<TexteAreaInput
|
||||
<TextAreaInput
|
||||
value={chapter.summary || ''}
|
||||
setValue={(e: ChangeEvent<HTMLTextAreaElement>) =>
|
||||
onUpdateSummary(chapter.chapterId, e.target.value)
|
||||
@@ -27,7 +26,7 @@ export default function ActChapterItem({chapter, onUpdateSummary, onUnlink}: Act
|
||||
placeholder={t('chapterSummaryPlaceholder')}
|
||||
/>
|
||||
}
|
||||
actionIcon={faTrash}
|
||||
actionIcon={Trash2}
|
||||
fieldName={chapter.title}
|
||||
action={(): Promise<void> => onUnlink(chapter.chapterInfoId, chapter.chapterId)}
|
||||
actionLabel={t('remove')}
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import {useState} from 'react';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons';
|
||||
import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
|
||||
import {SelectBoxProps} from '@/shared/interface';
|
||||
import React, {useState} from 'react';
|
||||
import {ActChapter, ChapterListProps} from '@/lib/types/chapter';
|
||||
import SelectBox, {SelectBoxProps} from '@/components/form/SelectBox';
|
||||
import ActChapterItem from './ActChapter';
|
||||
import InputField from '@/components/form/InputField';
|
||||
import SelectBox from '@/components/form/SelectBox';
|
||||
import {useTranslations} from 'next-intl';
|
||||
import Collapse from '@/components/ui/Collapse';
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
|
||||
interface ActChaptersSectionProps {
|
||||
actId: number;
|
||||
@@ -42,52 +40,45 @@ export default function ActChaptersSection({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mb-4">
|
||||
<button
|
||||
className="flex justify-between items-center w-full bg-secondary/50 p-3 rounded-xl text-left hover:bg-secondary transition-all duration-200 shadow-sm"
|
||||
onClick={(): void => onToggleSection(sectionKey)}
|
||||
>
|
||||
<span className="font-bold text-text-primary">{t('chapters')}</span>
|
||||
<FontAwesomeIcon
|
||||
icon={isExpanded ? faChevronUp : faChevronDown}
|
||||
className="text-text-primary w-3.5 h-3.5"
|
||||
/>
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="p-2">
|
||||
{chapters && chapters.length > 0 ? (
|
||||
chapters.map((chapter: ActChapter) => (
|
||||
<Collapse title={t('chapters')} defaultOpen={isExpanded}>
|
||||
<div className="space-y-2">
|
||||
{chapters && chapters.length > 0 ? (
|
||||
chapters.map(function (chapter: ActChapter): React.JSX.Element {
|
||||
return (
|
||||
<ActChapterItem
|
||||
key={`chapter-${chapter.chapterInfoId}`}
|
||||
chapter={chapter}
|
||||
onUpdateSummary={(chapterId, summary) =>
|
||||
onUpdateChapterSummary(chapterId, summary)
|
||||
}
|
||||
onUnlink={(chapterInfoId, chapterId) =>
|
||||
onUnlinkChapter(chapterInfoId, chapterId)
|
||||
}
|
||||
onUpdateSummary={function (chapterId: string, summary: string): void {
|
||||
onUpdateChapterSummary(chapterId, summary);
|
||||
}}
|
||||
onUnlink={function (chapterInfoId: string, chapterId: string): Promise<void> {
|
||||
return onUnlinkChapter(chapterInfoId, chapterId);
|
||||
}}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<p className="text-text-secondary text-center text-sm p-2">
|
||||
{t('noLinkedChapter')}
|
||||
</p>
|
||||
)}
|
||||
<InputField
|
||||
addButtonCallBack={(): Promise<void> => onLinkChapter(actId, selectedChapterId)}
|
||||
input={
|
||||
<SelectBox
|
||||
defaultValue={null}
|
||||
onChangeCallBack={(e) => setSelectedChapterId(e.target.value)}
|
||||
data={mainChaptersData()}
|
||||
placeholder={t('selectChapterPlaceholder')}
|
||||
/>
|
||||
}
|
||||
isAddButtonDisabled={!selectedChapterId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-text-secondary text-center text-sm p-2">
|
||||
{t('noLinkedChapter')}
|
||||
</p>
|
||||
)}
|
||||
<InputField
|
||||
addButtonCallBack={function (): Promise<void> {
|
||||
return onLinkChapter(actId, selectedChapterId);
|
||||
}}
|
||||
input={
|
||||
<SelectBox
|
||||
defaultValue={null}
|
||||
onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
|
||||
setSelectedChapterId(e.target.value);
|
||||
}}
|
||||
data={mainChaptersData()}
|
||||
placeholder={t('selectChapterPlaceholder')}
|
||||
/>
|
||||
}
|
||||
isAddButtonDisabled={!selectedChapterId}
|
||||
/>
|
||||
</div>
|
||||
</Collapse>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import {ChangeEvent} from 'react';
|
||||
import {faTrash} from '@fortawesome/free-solid-svg-icons';
|
||||
import React, {ChangeEvent} from 'react';
|
||||
import {Trash2} from 'lucide-react';
|
||||
import InputField from '@/components/form/InputField';
|
||||
import TexteAreaInput from '@/components/form/TexteAreaInput';
|
||||
import {useTranslations} from 'next-intl';
|
||||
import TextAreaInput from '@/components/form/TextAreaInput';
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
|
||||
interface ActDescriptionProps {
|
||||
actId: number;
|
||||
@@ -44,7 +44,7 @@ export default function ActDescription({actId, summary, onUpdateSummary}: ActDes
|
||||
<InputField
|
||||
fieldName={getActSummaryTitle(actId)}
|
||||
input={
|
||||
<TexteAreaInput
|
||||
<TextAreaInput
|
||||
value={summary || ''}
|
||||
setValue={(e: ChangeEvent<HTMLTextAreaElement>) =>
|
||||
onUpdateSummary(actId, e.target.value)
|
||||
@@ -52,7 +52,7 @@ export default function ActDescription({actId, summary, onUpdateSummary}: ActDes
|
||||
placeholder={getActSummaryPlaceholder(actId)}
|
||||
/>
|
||||
}
|
||||
actionIcon={faTrash}
|
||||
actionIcon={Trash2}
|
||||
actionLabel={t('delete')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
import {useState} from 'react';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faChevronDown, faChevronUp, faPlus, faTrash} from '@fortawesome/free-solid-svg-icons';
|
||||
import {Incident} from '@/lib/models/Book';
|
||||
import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
|
||||
import React, {useState} from 'react';
|
||||
import {ChevronDown, ChevronUp, Plus, Trash2} from 'lucide-react';
|
||||
import {Incident} from '@/lib/types/book';
|
||||
import {ActChapter, ChapterListProps} from '@/lib/types/chapter';
|
||||
import ActChapterItem from './ActChapter';
|
||||
import {useTranslations} from 'next-intl';
|
||||
import IconButton from '@/components/ui/IconButton';
|
||||
import Collapse from '@/components/ui/Collapse';
|
||||
import SelectBox, {SelectBoxProps} from '@/components/form/SelectBox';
|
||||
import InputField from '@/components/form/InputField';
|
||||
import TextInput from '@/components/form/TextInput';
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
|
||||
interface ActIncidentsProps {
|
||||
incidents: Incident[];
|
||||
@@ -48,129 +52,120 @@ export default function ActIncidents({
|
||||
}));
|
||||
}
|
||||
|
||||
function mainChaptersData(): SelectBoxProps[] {
|
||||
return mainChapters.map(function (chapter: ChapterListProps): SelectBoxProps {
|
||||
return {
|
||||
value: chapter.chapterId,
|
||||
label: `${chapter.chapterOrder}. ${chapter.title}`,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mb-4">
|
||||
<button
|
||||
className="flex justify-between items-center w-full bg-secondary/50 p-3 rounded-xl text-left hover:bg-secondary transition-all duration-200 shadow-sm"
|
||||
onClick={(): void => onToggleSection(sectionKey)}
|
||||
>
|
||||
<span className="font-bold text-text-primary">{t('incidentsTitle')}</span>
|
||||
<FontAwesomeIcon
|
||||
icon={isExpanded ? faChevronUp : faChevronDown}
|
||||
className="text-text-primary w-3.5 h-3.5"
|
||||
/>
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="p-2">
|
||||
{incidents && incidents.length > 0 ? (
|
||||
<>
|
||||
{incidents.map((item: Incident) => {
|
||||
const itemKey = `incident_${item.incidentId}`;
|
||||
const isItemExpanded: boolean = expandedItems[itemKey];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`incident-${item.incidentId}`}
|
||||
className="bg-secondary/30 rounded-xl mb-3 overflow-hidden border border-secondary/40 shadow-sm hover:shadow-md transition-all duration-200"
|
||||
>
|
||||
<button
|
||||
className="flex justify-between items-center w-full p-2 text-left"
|
||||
onClick={(): void => toggleItem(itemKey)}
|
||||
>
|
||||
<span className="font-bold text-text-primary">{item.title}</span>
|
||||
<div className="flex items-center">
|
||||
<FontAwesomeIcon
|
||||
icon={isItemExpanded ? faChevronUp : faChevronDown}
|
||||
className="text-text-primary w-3.5 h-3.5 mr-2"
|
||||
/>
|
||||
<button
|
||||
onClick={async (e) => {
|
||||
e.stopPropagation();
|
||||
await onDeleteIncident(actId, item.incidentId);
|
||||
}}
|
||||
className="text-error hover:bg-error/20 p-1.5 rounded-lg transition-all duration-200 hover:scale-110"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrash} className="w-3.5 h-3.5"/>
|
||||
</button>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{isItemExpanded && (
|
||||
<div className="p-3 bg-secondary/20">
|
||||
{item.chapters && item.chapters.length > 0 ? (
|
||||
<>
|
||||
{item.chapters.map((chapter: ActChapter) => (
|
||||
<ActChapterItem
|
||||
key={`inc-chapter-${chapter.chapterId}-${chapter.chapterInfoId}`}
|
||||
chapter={chapter}
|
||||
onUpdateSummary={(chapterId, summary) =>
|
||||
onUpdateChapterSummary(chapterId, summary, item.incidentId)
|
||||
}
|
||||
onUnlink={(chapterInfoId, chapterId) =>
|
||||
onUnlinkChapter(chapterInfoId, chapterId, item.incidentId)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-text-secondary text-center text-sm p-2">
|
||||
{t('noLinkedChapter')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center mt-2">
|
||||
<select
|
||||
onChange={(e) => setSelectedChapterId(e.target.value)}
|
||||
className="flex-1 bg-secondary/50 text-text-primary rounded-xl px-4 py-2.5 mr-2 border border-secondary/50 focus:outline-none focus:ring-4 focus:ring-primary/20 focus:border-primary hover:bg-secondary hover:border-secondary transition-all duration-200"
|
||||
>
|
||||
<option value="">{t('selectChapterPlaceholder')}</option>
|
||||
{mainChapters.map((chapter: ChapterListProps) => (
|
||||
<option key={chapter.chapterId} value={chapter.chapterId}>
|
||||
{`${chapter.chapterOrder}. ${chapter.title}`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
className="bg-primary text-text-primary w-9 h-9 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg hover:scale-110 hover:bg-primary-dark transition-all duration-200"
|
||||
onClick={(): Promise<void> =>
|
||||
onLinkChapter(actId, selectedChapterId, item.incidentId)
|
||||
}
|
||||
disabled={selectedChapterId.length === 0}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} className="w-3.5 h-3.5"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Collapse title={t('incidentsTitle')} defaultOpen={isExpanded}>
|
||||
<div className="space-y-3">
|
||||
{incidents && incidents.length > 0 ? (
|
||||
incidents.map(function (item: Incident): React.JSX.Element {
|
||||
const itemKey: string = `incident_${item.incidentId}`;
|
||||
const isItemExpanded: boolean = expandedItems[itemKey];
|
||||
|
||||
return (
|
||||
<div key={`incident-${item.incidentId}`}
|
||||
className="bg-secondary rounded-xl overflow-hidden">
|
||||
<button
|
||||
className="flex justify-between items-center w-full p-3 text-left"
|
||||
onClick={function (): void {
|
||||
toggleItem(itemKey);
|
||||
}}
|
||||
>
|
||||
<span className="font-bold text-text-primary">{item.title}</span>
|
||||
<div className="flex items-center gap-1">
|
||||
{isItemExpanded
|
||||
? <ChevronUp className="text-primary w-3.5 h-3.5" strokeWidth={1.75}/>
|
||||
: <ChevronDown className="text-primary w-3.5 h-3.5" strokeWidth={1.75}/>
|
||||
}
|
||||
<div onClick={function (e: React.MouseEvent): void {
|
||||
e.stopPropagation();
|
||||
}}>
|
||||
<IconButton
|
||||
icon={Trash2}
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={async function (): Promise<void> {
|
||||
await onDeleteIncident(actId, item.incidentId);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-text-secondary text-center text-sm p-2">
|
||||
{t('noIncidentAdded')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center mt-2">
|
||||
<input
|
||||
type="text"
|
||||
className="flex-1 bg-secondary/50 text-text-primary rounded-xl px-4 py-2.5 mr-2 border border-secondary/50 focus:outline-none focus:ring-4 focus:ring-primary/20 focus:border-primary hover:bg-secondary hover:border-secondary transition-all duration-200 placeholder:text-muted/60"
|
||||
</button>
|
||||
|
||||
{isItemExpanded && (
|
||||
<div className="p-3">
|
||||
{item.chapters && item.chapters.length > 0 ? (
|
||||
item.chapters.map(function (chapter: ActChapter): React.JSX.Element {
|
||||
return (
|
||||
<ActChapterItem
|
||||
key={`inc-chapter-${chapter.chapterId}-${chapter.chapterInfoId}`}
|
||||
chapter={chapter}
|
||||
onUpdateSummary={function (chapterId: string, summary: string): void {
|
||||
onUpdateChapterSummary(chapterId, summary, item.incidentId);
|
||||
}}
|
||||
onUnlink={function (chapterInfoId: string, chapterId: string): Promise<void> {
|
||||
return onUnlinkChapter(chapterInfoId, chapterId, item.incidentId);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-text-secondary text-center text-sm p-2">
|
||||
{t('noLinkedChapter')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<InputField
|
||||
input={
|
||||
<SelectBox
|
||||
defaultValue={null}
|
||||
onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
|
||||
setSelectedChapterId(e.target.value);
|
||||
}}
|
||||
data={mainChaptersData()}
|
||||
placeholder={t('selectChapterPlaceholder')}
|
||||
/>
|
||||
}
|
||||
addButtonCallBack={function (): Promise<void> {
|
||||
return onLinkChapter(actId, selectedChapterId, item.incidentId);
|
||||
}}
|
||||
isAddButtonDisabled={selectedChapterId.length === 0}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-text-secondary text-center text-sm p-2">
|
||||
{t('noIncidentAdded')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<InputField
|
||||
input={
|
||||
<TextInput
|
||||
value={newIncidentTitle}
|
||||
onChange={(e) => setNewIncidentTitle(e.target.value)}
|
||||
setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
|
||||
setNewIncidentTitle(e.target.value);
|
||||
}}
|
||||
placeholder={t('newIncidentPlaceholder')}
|
||||
/>
|
||||
<button
|
||||
className="bg-primary text-text-primary w-9 h-9 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg hover:scale-110 hover:bg-primary-dark transition-all duration-200"
|
||||
onClick={(): Promise<void> => onAddIncident(actId)}
|
||||
disabled={newIncidentTitle.trim() === ''}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} className="w-3.5 h-3.5"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
actionIcon={Plus}
|
||||
addButtonCallBack={function (): Promise<void> {
|
||||
return onAddIncident(actId);
|
||||
}}
|
||||
isAddButtonDisabled={newIncidentTitle.trim() === ''}
|
||||
/>
|
||||
</div>
|
||||
</Collapse>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import {useState} from 'react';
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faChevronDown, faChevronUp, faPlus, faTrash} from '@fortawesome/free-solid-svg-icons';
|
||||
import {Incident, PlotPoint} from '@/lib/models/Book';
|
||||
import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
|
||||
import {SelectBoxProps} from '@/shared/interface';
|
||||
import React, {useState} from 'react';
|
||||
import {ChevronDown, ChevronUp, Plus, Trash2} from 'lucide-react';
|
||||
import {Incident, PlotPoint} from '@/lib/types/book';
|
||||
import {ActChapter, ChapterListProps} from '@/lib/types/chapter';
|
||||
import SelectBox, {SelectBoxProps} from '@/components/form/SelectBox';
|
||||
import ActChapterItem from './ActChapter';
|
||||
import InputField from '@/components/form/InputField';
|
||||
import SelectBox from '@/components/form/SelectBox';
|
||||
import {useTranslations} from 'next-intl';
|
||||
import TextInput from '@/components/form/TextInput';
|
||||
import IconButton from '@/components/ui/IconButton';
|
||||
import Collapse from '@/components/ui/Collapse';
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
|
||||
interface ActPlotPointsProps {
|
||||
plotPoints: PlotPoint[];
|
||||
@@ -65,138 +66,136 @@ export default function ActPlotPoints({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mb-4">
|
||||
<button
|
||||
className="flex justify-between items-center w-full bg-secondary/50 p-3 rounded-xl text-left hover:bg-secondary transition-all duration-200 shadow-sm"
|
||||
onClick={(): void => onToggleSection(sectionKey)}
|
||||
>
|
||||
<span className="font-bold text-text-primary">{t('plotPointsTitle')}</span>
|
||||
<FontAwesomeIcon
|
||||
icon={isExpanded ? faChevronUp : faChevronDown}
|
||||
className="text-text-primary w-3.5 h-3.5"
|
||||
/>
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="p-2">
|
||||
{plotPoints && plotPoints.length > 0 ? (
|
||||
plotPoints.map((item: PlotPoint) => {
|
||||
const itemKey = `plotpoint_${item.plotPointId}`;
|
||||
const isItemExpanded: boolean = expandedItems[itemKey];
|
||||
const linkedIncident: Incident | undefined = incidents.find(
|
||||
(inc: Incident): boolean => inc.incidentId === item.linkedIncidentId
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`plot-point-${item.plotPointId}`}
|
||||
className="bg-secondary/30 rounded-xl mb-3 overflow-hidden border border-secondary/40 shadow-sm hover:shadow-md transition-all duration-200"
|
||||
<Collapse title={t('plotPointsTitle')} defaultOpen={isExpanded}>
|
||||
<div className="space-y-3">
|
||||
{plotPoints && plotPoints.length > 0 ? (
|
||||
plotPoints.map(function (item: PlotPoint): React.JSX.Element {
|
||||
const itemKey: string = `plotpoint_${item.plotPointId}`;
|
||||
const isItemExpanded: boolean = expandedItems[itemKey];
|
||||
const linkedIncident: Incident | undefined = incidents.find(
|
||||
function (inc: Incident): boolean {
|
||||
return inc.incidentId === item.linkedIncidentId;
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<div key={`plot-point-${item.plotPointId}`}
|
||||
className="bg-secondary rounded-xl overflow-hidden">
|
||||
<button
|
||||
className="flex justify-between items-center w-full p-3 text-left"
|
||||
onClick={function (): void {
|
||||
toggleItem(itemKey);
|
||||
}}
|
||||
>
|
||||
<button
|
||||
className="flex justify-between items-center w-full p-2 text-left"
|
||||
onClick={(): void => toggleItem(itemKey)}
|
||||
>
|
||||
<div>
|
||||
<p className="font-bold text-text-primary">{item.title}</p>
|
||||
{linkedIncident && (
|
||||
<p className="text-text-secondary text-sm italic">
|
||||
{t('linkedTo')}: {linkedIncident.title}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<FontAwesomeIcon
|
||||
icon={isItemExpanded ? faChevronUp : faChevronDown}
|
||||
className="text-text-primary w-3.5 h-3.5 mr-2"
|
||||
/>
|
||||
<button
|
||||
onClick={async (e): Promise<void> => {
|
||||
e.stopPropagation();
|
||||
<div>
|
||||
<p className="font-bold text-text-primary">{item.title}</p>
|
||||
{linkedIncident && (
|
||||
<p className="text-text-secondary text-sm italic">
|
||||
{t('linkedTo')}: {linkedIncident.title}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{isItemExpanded
|
||||
? <ChevronUp className="text-primary w-3.5 h-3.5" strokeWidth={1.75}/>
|
||||
: <ChevronDown className="text-primary w-3.5 h-3.5" strokeWidth={1.75}/>
|
||||
}
|
||||
<div onClick={function (e: React.MouseEvent): void {
|
||||
e.stopPropagation();
|
||||
}}>
|
||||
<IconButton
|
||||
icon={Trash2}
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={async function (): Promise<void> {
|
||||
await onDeletePlotPoint(actId, item.plotPointId);
|
||||
}}
|
||||
className="text-error hover:bg-error/20 p-1.5 rounded-lg transition-all duration-200 hover:scale-110"
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrash} className="w-3.5 h-3.5"/>
|
||||
</button>
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{isItemExpanded && (
|
||||
<div className="p-3 bg-secondary/20">
|
||||
{item.chapters && item.chapters.length > 0 ? (
|
||||
item.chapters.map((chapter: ActChapter) => (
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{isItemExpanded && (
|
||||
<div className="p-3">
|
||||
{item.chapters && item.chapters.length > 0 ? (
|
||||
item.chapters.map(function (chapter: ActChapter): React.JSX.Element {
|
||||
return (
|
||||
<ActChapterItem
|
||||
key={`plot-chapter-${chapter.chapterId}-${chapter.chapterInfoId}`}
|
||||
chapter={chapter}
|
||||
onUpdateSummary={(chapterId, summary) =>
|
||||
onUpdateChapterSummary(chapterId, summary, item.plotPointId)
|
||||
}
|
||||
onUnlink={(chapterInfoId, chapterId) =>
|
||||
onUnlinkChapter(chapterInfoId, chapterId, item.plotPointId)
|
||||
}
|
||||
onUpdateSummary={function (chapterId: string, summary: string): void {
|
||||
onUpdateChapterSummary(chapterId, summary, item.plotPointId);
|
||||
}}
|
||||
onUnlink={function (chapterInfoId: string, chapterId: string): Promise<void> {
|
||||
return onUnlinkChapter(chapterInfoId, chapterId, item.plotPointId);
|
||||
}}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<p className="text-text-secondary text-center text-sm p-2">
|
||||
{t('noLinkedChapter')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center mt-2">
|
||||
<select
|
||||
onChange={(e) => setSelectedChapterId(e.target.value)}
|
||||
className="flex-1 bg-secondary/50 text-text-primary rounded-xl px-4 py-2.5 mr-2 border border-secondary/50 focus:outline-none focus:ring-4 focus:ring-primary/20 focus:border-primary hover:bg-secondary hover:border-secondary transition-all duration-200"
|
||||
>
|
||||
<option value="">{t('selectChapterPlaceholder')}</option>
|
||||
{mainChapters.map((chapter: ChapterListProps) => (
|
||||
<option key={chapter.chapterId} value={chapter.chapterId}>
|
||||
{`${chapter.chapterOrder}. ${chapter.title}`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
className="bg-primary text-text-primary w-9 h-9 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed shadow-md hover:shadow-lg hover:scale-110 hover:bg-primary-dark transition-all duration-200"
|
||||
onClick={() => onLinkChapter(actId, selectedChapterId, item.plotPointId)}
|
||||
disabled={!selectedChapterId}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} className="w-3.5 h-3.5"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-text-secondary text-center text-sm p-2">
|
||||
{t('noPlotPointAdded')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-2 space-y-2">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="text"
|
||||
className="flex-1 bg-secondary/50 text-text-primary rounded-xl px-4 py-2.5 border border-secondary/50 focus:outline-none focus:ring-4 focus:ring-primary/20 focus:border-primary hover:bg-secondary hover:border-secondary transition-all duration-200 placeholder:text-muted/60"
|
||||
value={newPlotPointTitle}
|
||||
onChange={(e) => setNewPlotPointTitle(e.target.value)}
|
||||
placeholder={t('newPlotPointPlaceholder')}
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-text-secondary text-center text-sm p-2">
|
||||
{t('noLinkedChapter')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<InputField
|
||||
input={
|
||||
<SelectBox
|
||||
onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
|
||||
setSelectedChapterId(e.target.value);
|
||||
}}
|
||||
data={mainChapters.map(function (chapter: ChapterListProps): SelectBoxProps {
|
||||
return {
|
||||
label: `${chapter.chapterOrder}. ${chapter.title}`,
|
||||
value: chapter.chapterId,
|
||||
};
|
||||
})}
|
||||
defaultValue={selectedChapterId}
|
||||
placeholder={t('selectChapterPlaceholder')}
|
||||
/>
|
||||
}
|
||||
addButtonCallBack={function (): Promise<void> {
|
||||
return onLinkChapter(actId, selectedChapterId, item.plotPointId);
|
||||
}}
|
||||
isAddButtonDisabled={!selectedChapterId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<p className="text-text-secondary text-center text-sm p-2">
|
||||
{t('noPlotPointAdded')}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<TextInput
|
||||
value={newPlotPointTitle}
|
||||
setValue={function (e: React.ChangeEvent<HTMLInputElement>): void {
|
||||
setNewPlotPointTitle(e.target.value);
|
||||
}}
|
||||
placeholder={t('newPlotPointPlaceholder')}
|
||||
/>
|
||||
<InputField
|
||||
input={
|
||||
<SelectBox
|
||||
defaultValue=""
|
||||
onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
|
||||
setSelectedIncidentId(e.target.value);
|
||||
}}
|
||||
data={getIncidentData()}
|
||||
/>
|
||||
</div>
|
||||
<InputField
|
||||
input={
|
||||
<SelectBox
|
||||
defaultValue={``}
|
||||
onChangeCallBack={(e) => setSelectedIncidentId(e.target.value)}
|
||||
data={getIncidentData()}
|
||||
/>
|
||||
}
|
||||
addButtonCallBack={(): Promise<void> => onAddPlotPoint(actId)}
|
||||
isAddButtonDisabled={newPlotPointTitle.trim() === ''}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
actionIcon={Plus}
|
||||
addButtonCallBack={function (): Promise<void> {
|
||||
return onAddPlotPoint(actId);
|
||||
}}
|
||||
isAddButtonDisabled={newPlotPointTitle.trim() === ''}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Collapse>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user