Add components for Act management and integrate Electron setup
This commit is contained in:
natreex
309
components/leftbar/ScribeChapterComponent.tsx
Normal file
309
components/leftbar/ScribeChapterComponent.tsx
Normal file
@@ -0,0 +1,309 @@
|
||||
import {ChapterListProps, ChapterProps} from "@/lib/models/Chapter";
|
||||
import React, {useContext, useEffect, useRef, useState} from "react";
|
||||
import System from "@/lib/models/System";
|
||||
import {BookContext} from "@/context/BookContext";
|
||||
import {AlertContext} from "@/context/AlertContext";
|
||||
import {ChapterContext} from "@/context/ChapterContext";
|
||||
import {SessionContext} from "@/context/SessionContext";
|
||||
import {faSheetPlastic} from "@fortawesome/free-solid-svg-icons";
|
||||
import ListItem from "@/components/ListItem";
|
||||
import AlertBox from "@/components/AlertBox";
|
||||
import {useTranslations} from "next-intl";
|
||||
import InlineAddInput from "@/components/form/InlineAddInput";
|
||||
import {LangContext} from "@/context/LangContext";
|
||||
|
||||
export default function ScribeChapterComponent() {
|
||||
const t = useTranslations();
|
||||
const {lang} = useContext(LangContext)
|
||||
|
||||
const {book} = useContext(BookContext);
|
||||
const {chapter, setChapter} = useContext(ChapterContext);
|
||||
const {errorMessage, successMessage} = useContext(AlertContext);
|
||||
const {session} = useContext(SessionContext);
|
||||
const userToken: string = session?.accessToken ? session?.accessToken : '';
|
||||
|
||||
const [chapters, setChapters] = useState<ChapterListProps[]>([])
|
||||
|
||||
const [newChapterName, setNewChapterName] = useState<string>('');
|
||||
const [newChapterOrder, setNewChapterOrder] = useState<number>(1);
|
||||
|
||||
const [deleteConfirmationMessage, setDeleteConfirmationMessage] = useState<boolean>(false);
|
||||
const [removeChapterId, setRemoveChapterId] = useState<string>('');
|
||||
|
||||
const chapterRefs = useRef<Map<string, HTMLDivElement>>(new Map());
|
||||
const scrollContainerRef = useRef<HTMLUListElement>(null);
|
||||
|
||||
useEffect((): void => {
|
||||
getChapterList().then();
|
||||
}, [book]);
|
||||
|
||||
useEffect((): void => {
|
||||
setNewChapterOrder(getNextChapterOrder());
|
||||
}, [chapters]);
|
||||
|
||||
useEffect((): void => {
|
||||
if (chapter?.chapterId && scrollContainerRef.current) {
|
||||
// Small delay to ensure DOM is ready
|
||||
setTimeout(() => {
|
||||
const element = chapterRefs.current.get(chapter.chapterId);
|
||||
const container = scrollContainerRef.current;
|
||||
|
||||
if (element && container) {
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
const elementRect = element.getBoundingClientRect();
|
||||
|
||||
// Calculate relative position
|
||||
const relativeTop = elementRect.top - containerRect.top + container.scrollTop;
|
||||
const scrollPosition = relativeTop - (containerRect.height / 2) + (elementRect.height / 2);
|
||||
|
||||
container.scrollTo({
|
||||
top: Math.max(0, scrollPosition),
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
}, [chapter?.chapterId]);
|
||||
|
||||
function getNextChapterOrder(): number {
|
||||
const maxOrder: number = Math.max(0, ...chapters.map((chap: ChapterListProps) => chap.chapterOrder ?? 0));
|
||||
return maxOrder + 1;
|
||||
}
|
||||
|
||||
async function getChapterList(): Promise<void> {
|
||||
try {
|
||||
const response: ChapterListProps[] = await System.authGetQueryToServer<ChapterListProps[]>(`book/chapters?id=${book?.bookId}`, userToken, lang);
|
||||
if (response) {
|
||||
setChapters(response);
|
||||
}
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t("scribeChapterComponent.errorFetchChapters"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function getChapter(chapterId: string): Promise<void> {
|
||||
const version: number = chapter?.chapterContent.version ? chapter?.chapterContent.version : 2;
|
||||
try {
|
||||
const response: ChapterProps = await System.authGetQueryToServer<ChapterProps>(`chapter/whole`, userToken, lang, {
|
||||
bookid: book?.bookId,
|
||||
id: chapterId,
|
||||
version: version,
|
||||
});
|
||||
if (!response) {
|
||||
errorMessage(t("scribeChapterComponent.errorFetchChapter"));
|
||||
return;
|
||||
}
|
||||
setChapter(response);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t("scribeChapterComponent.errorFetchChapter"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleChapterUpdate(chapterId: string, title: string, chapterOrder: number): Promise<void> {
|
||||
try {
|
||||
const response: boolean = await System.authPostToServer<boolean>('chapter/update', {
|
||||
chapterId: chapterId,
|
||||
chapterOrder: chapterOrder,
|
||||
title: title,
|
||||
}, userToken, lang);
|
||||
if (!response) {
|
||||
errorMessage(t("scribeChapterComponent.errorChapterUpdate"));
|
||||
return;
|
||||
}
|
||||
successMessage(t("scribeChapterComponent.successUpdate"));
|
||||
setChapters((prevState: ChapterListProps[]): ChapterListProps[] => {
|
||||
return prevState.map((chapter: ChapterListProps): ChapterListProps => {
|
||||
if (chapter.chapterId === chapterId) {
|
||||
chapter.chapterOrder = chapterOrder;
|
||||
chapter.title = title;
|
||||
}
|
||||
return chapter;
|
||||
});
|
||||
});
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(t("scribeChapterComponent.errorChapterUpdateFr"));
|
||||
} else {
|
||||
errorMessage(t("scribeChapterComponent.errorChapterUpdateEn"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteConfirmation(chapterId: string): Promise<void> {
|
||||
setDeleteConfirmationMessage(true);
|
||||
setRemoveChapterId(chapterId);
|
||||
}
|
||||
|
||||
async function handleDeleteChapter(): Promise<void> {
|
||||
try {
|
||||
setDeleteConfirmationMessage(false);
|
||||
const response: boolean = await System.authDeleteToServer<boolean>('chapter/remove', {
|
||||
bookId: book?.bookId,
|
||||
chapterId: removeChapterId,
|
||||
}, userToken, lang);
|
||||
if (!response) {
|
||||
errorMessage(t("scribeChapterComponent.errorChapterDelete"));
|
||||
return;
|
||||
}
|
||||
const updatedChapters: ChapterListProps[] = chapters.filter(
|
||||
(chapter: ChapterListProps): boolean => chapter.chapterId !== removeChapterId,
|
||||
);
|
||||
setChapters(updatedChapters);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t("scribeChapterComponent.unknownErrorChapterDelete"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAddChapter(chapterOrder: number): Promise<void> {
|
||||
if (!newChapterName && chapterOrder >= 0) {
|
||||
errorMessage(t("scribeChapterComponent.errorChapterNameRequired"));
|
||||
return;
|
||||
}
|
||||
const chapterTitle: string = chapterOrder >= 0 ? newChapterName : book?.title as string;
|
||||
try {
|
||||
const chapterId: string = await System.authPostToServer<string>('chapter/add', {
|
||||
bookId: book?.bookId,
|
||||
chapterOrder: chapterOrder,
|
||||
title: chapterTitle
|
||||
}, userToken, lang);
|
||||
if (!chapterId) {
|
||||
errorMessage(t("scribeChapterComponent.errorChapterSubmit", {chapterName: newChapterName}));
|
||||
return;
|
||||
}
|
||||
const newChapter: ChapterListProps = {
|
||||
chapterId: chapterId,
|
||||
title: chapterTitle,
|
||||
chapterOrder: chapterOrder
|
||||
}
|
||||
setChapters((prevState: ChapterListProps[]): ChapterListProps[] => {
|
||||
return [newChapter, ...prevState]
|
||||
})
|
||||
await getChapter(chapterId);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error) {
|
||||
errorMessage(e.message);
|
||||
} else {
|
||||
errorMessage(t("scribeChapterComponent.errorChapterSubmit", {chapterName: newChapterName}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col p-4 min-h-0">
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<div className="h-6 w-1 bg-primary rounded-full"></div>
|
||||
<h3 className="text-lg font-bold text-primary tracking-wide">{t("scribeChapterComponent.sheetHeading")}</h3>
|
||||
</div>
|
||||
<ul className="space-y-2">
|
||||
{
|
||||
chapters.filter((chap: ChapterListProps): boolean => {
|
||||
return chap.chapterOrder !== undefined && chap.chapterOrder < 0;
|
||||
})
|
||||
.sort((a: ChapterListProps, b: ChapterListProps): number => {
|
||||
const aOrder: number = a.chapterOrder ?? 0;
|
||||
const bOrder: number = b.chapterOrder ?? 0;
|
||||
return aOrder - bOrder;
|
||||
}).map((chap: ChapterListProps) => (
|
||||
<div key={chap.chapterId}
|
||||
ref={(el): void => {
|
||||
if (el) {
|
||||
chapterRefs.current.set(chap.chapterId, el);
|
||||
} else {
|
||||
chapterRefs.current.delete(chap.chapterId);
|
||||
}
|
||||
}}>
|
||||
<ListItem icon={faSheetPlastic}
|
||||
onClick={(): Promise<void> => getChapter(chap.chapterId)}
|
||||
selectedId={chapter?.chapterId ?? ''}
|
||||
id={chap.chapterId}
|
||||
text={chap.title}/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
{
|
||||
chapters.filter((chap: ChapterListProps): boolean => {
|
||||
return chap.chapterOrder !== undefined && chap.chapterOrder < 0;
|
||||
}).length === 0 &&
|
||||
<li onClick={(): Promise<void> => handleAddChapter(-1)}
|
||||
className="group p-3 bg-secondary/30 rounded-xl hover:bg-secondary cursor-pointer transition-all hover:shadow-md border border-secondary/30 hover:border-primary/30">
|
||||
<span
|
||||
className="text-sm font-medium text-muted group-hover:text-text-primary transition-colors">
|
||||
{t("scribeChapterComponent.createSheet")}
|
||||
</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col mt-6 min-h-0">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<div className="h-6 w-1 bg-primary rounded-full"></div>
|
||||
<h3 className="text-lg font-bold text-primary tracking-wide">{t("scribeChapterComponent.chaptersHeading")}</h3>
|
||||
</div>
|
||||
<ul ref={scrollContainerRef} className="flex-1 space-y-2 overflow-y-auto pr-2 min-h-0">
|
||||
{
|
||||
chapters.filter((chap: ChapterListProps): boolean => {
|
||||
return !(chap.chapterOrder && chap.chapterOrder < 0);
|
||||
})
|
||||
.sort((a: ChapterListProps, b: ChapterListProps): number => {
|
||||
const aOrder: number = a.chapterOrder ?? 0;
|
||||
const bOrder: number = b.chapterOrder ?? 0;
|
||||
return aOrder - bOrder;
|
||||
}).map((chap: ChapterListProps) => (
|
||||
<div key={chap.chapterId}
|
||||
ref={(el): void => {
|
||||
if (el) {
|
||||
chapterRefs.current.set(chap.chapterId, el);
|
||||
} else {
|
||||
chapterRefs.current.delete(chap.chapterId);
|
||||
}
|
||||
}}>
|
||||
<ListItem onClick={(): Promise<void> => getChapter(chap.chapterId)}
|
||||
isEditable={true}
|
||||
handleUpdate={handleChapterUpdate}
|
||||
handleDelete={handleDeleteConfirmation}
|
||||
selectedId={chapter?.chapterId ?? ''}
|
||||
id={chap.chapterId} text={chap.title}
|
||||
numericalIdentifier={chap.chapterOrder}/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
<div className="mt-2 shrink-0">
|
||||
<InlineAddInput
|
||||
value={newChapterName}
|
||||
setValue={setNewChapterName}
|
||||
numericalValue={newChapterOrder}
|
||||
setNumericalValue={setNewChapterOrder}
|
||||
placeholder={t("scribeChapterComponent.addChapterPlaceholder")}
|
||||
onAdd={async (): Promise<void> => {
|
||||
await handleAddChapter(newChapterOrder);
|
||||
setNewChapterName("");
|
||||
}}
|
||||
showNumericalInput={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
deleteConfirmationMessage &&
|
||||
<AlertBox title={t("scribeChapterComponent.deleteChapterTitle")}
|
||||
message={t("scribeChapterComponent.deleteChapterMessage")}
|
||||
type={"danger"} onConfirm={(): Promise<void> => handleDeleteChapter()}
|
||||
onCancel={(): void => setDeleteConfirmationMessage(false)}/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
137
components/leftbar/ScribeLeftBar.tsx
Normal file
137
components/leftbar/ScribeLeftBar.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {faBookMedical, faBookOpen, faFeather} from "@fortawesome/free-solid-svg-icons";
|
||||
import React, {useContext, useState} from "react";
|
||||
import {BookContext} from "@/context/BookContext";
|
||||
import ScribeChapterComponent from "@/components/leftbar/ScribeChapterComponent";
|
||||
import PanelHeader from "@/components/PanelHeader";
|
||||
import {PanelComponent} from "@/lib/models/Editor";
|
||||
import AddNewBookForm from "@/components/book/AddNewBookForm";
|
||||
import ShortStoryGenerator from "@/components/ShortStoryGenerator";
|
||||
import {SessionContext} from "@/context/SessionContext";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
export default function ScribeLeftBar() {
|
||||
const {book} = useContext(BookContext);
|
||||
const {session} = useContext(SessionContext);
|
||||
const t = useTranslations();
|
||||
|
||||
const [panelHidden, setPanelHidden] = useState<boolean>(false);
|
||||
|
||||
const [currentPanel, setCurrentPanel] = useState<PanelComponent>();
|
||||
|
||||
const [showAddNewBook, setShowAddNewBook] = useState<boolean>(false);
|
||||
const [showGenerateShortModal, setShowGenerateShortModal] = useState<boolean>(false)
|
||||
|
||||
const editorComponents: PanelComponent[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: t("scribeLeftBar.editorComponents.structure.title"),
|
||||
description: t("scribeLeftBar.editorComponents.structure.description"),
|
||||
badge: t("scribeLeftBar.editorComponents.structure.badge"),
|
||||
icon: faBookOpen
|
||||
}
|
||||
/*
|
||||
{
|
||||
id: 2,
|
||||
title: 'Ligne directive',
|
||||
icon: faBookmark,
|
||||
badge: 'LD',
|
||||
description: 'Ligne directrice pour ce chapitre.'
|
||||
}, {
|
||||
id: 3,
|
||||
title: 'Statistique',
|
||||
icon: faChartLine,
|
||||
badge: 'STATS',
|
||||
description: 'Vérification des verbes'
|
||||
}*/
|
||||
]
|
||||
|
||||
const homeComponents: PanelComponent[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: t("scribeLeftBar.homeComponents.addBook.title"),
|
||||
description: t("scribeLeftBar.homeComponents.addBook.description"),
|
||||
badge: t("scribeLeftBar.homeComponents.addBook.badge"),
|
||||
icon: faBookMedical
|
||||
}, {
|
||||
id: 2,
|
||||
title: t("scribeLeftBar.homeComponents.generateStory.title"),
|
||||
icon: faFeather,
|
||||
badge: t("scribeLeftBar.homeComponents.generateStory.badge"),
|
||||
description: t("scribeLeftBar.homeComponents.generateStory.description")
|
||||
},
|
||||
]
|
||||
|
||||
function togglePanel(component: PanelComponent): void {
|
||||
if (panelHidden) {
|
||||
if (currentPanel?.id === component.id) {
|
||||
setPanelHidden(!panelHidden);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
setPanelHidden(true);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="left-panel-container" data-guide={"left-panel-container"} className="flex transition-all duration-300">
|
||||
<div className="bg-tertiary border-r border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
|
||||
{book ? editorComponents.map(component => (
|
||||
<button
|
||||
key={component.id}
|
||||
onClick={(): void => {
|
||||
togglePanel(component);
|
||||
setCurrentPanel(component);
|
||||
}}
|
||||
title={component.title}
|
||||
className={`group relative p-3 rounded-xl transition-all duration-200 ${panelHidden && currentPanel?.id === component.id
|
||||
? 'bg-primary text-text-primary shadow-lg shadow-primary/30'
|
||||
: 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md'}`}
|
||||
>
|
||||
<FontAwesomeIcon icon={component.icon}
|
||||
className={'w-5 h-5 transition-transform duration-200'}/>
|
||||
{panelHidden && currentPanel?.id === component.id && (
|
||||
<div
|
||||
className="absolute -right-1 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-l-full"></div>
|
||||
)}
|
||||
</button>
|
||||
)) : (
|
||||
homeComponents
|
||||
.map((component: PanelComponent) => (
|
||||
<button
|
||||
key={component.id}
|
||||
onClick={() => component.id === 1 ? setShowAddNewBook(true) : component.id === 2 ? setShowGenerateShortModal(true) : session.user?.groupId && session.user?.groupId === 1}
|
||||
title={component.title}
|
||||
className={`group relative p-3 rounded-xl transition-all duration-200 ${panelHidden && currentPanel?.id === component.id
|
||||
? 'bg-primary text-text-primary shadow-lg shadow-primary/30'
|
||||
: 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md'}`}
|
||||
>
|
||||
<FontAwesomeIcon icon={component.icon}
|
||||
className={'w-5 h-5 transition-transform duration-200'}/>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{panelHidden && (
|
||||
<div id="left-panel"
|
||||
className="bg-tertiary/95 backdrop-blur-sm border-r border-secondary/50 h-full min-w-[320px] transition-all duration-300 overflow-y-auto shadow-2xl flex flex-col">
|
||||
<PanelHeader title={currentPanel?.title ?? ''} description={``} badge={``}
|
||||
icon={currentPanel?.icon}
|
||||
callBackAction={async () => setPanelHidden(!panelHidden)}/>
|
||||
{currentPanel?.id === 1 && (
|
||||
<ScribeChapterComponent/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
showAddNewBook &&
|
||||
<AddNewBookForm setCloseForm={setShowAddNewBook}/>
|
||||
}
|
||||
{
|
||||
showGenerateShortModal &&
|
||||
<ShortStoryGenerator onClose={() => setShowGenerateShortModal(false)}/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user