Add components for Act management and integrate Electron setup

2025-11-16 11:00:04 -05:00
parent e192b6dcc2
commit 8167948881
97 changed files with 25378 additions and 3 deletions
--- a/components/book/settings/story/Issue.tsx
+++ b/components/book/settings/story/Issue.tsx
@@ -0,0 +1,149 @@
+import React, {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";
+
+interface IssuesProps {
+    issues: Issue[];
+    setIssues: React.Dispatch<React.SetStateAction<Issue[]>>;
+}
+
+export default function Issues({issues, setIssues}: IssuesProps) {
+    const t = useTranslations();
+    const {lang} = useContext<LangContextProps>(LangContext);
+    const {book} = useContext(BookContext);
+    const {session} = useContext(SessionContext);
+    const {errorMessage} = useContext(AlertContext);
+    
+    const bookId: string | undefined = book?.bookId;
+    const token: string = session.accessToken;
+    
+    const [newIssueName, setNewIssueName] = useState<string>('');
+    
+    async function addNewIssue(): Promise<void> {
+        if (newIssueName.trim() === '') {
+            errorMessage(t("issues.errorEmptyName"));
+            return;
+        }
+        try {
+            const issueId: string = await System.authPostToServer<string>('book/issue/add', {
+                bookId,
+                name: newIssueName,
+            }, token, lang);
+            if (!issueId) {
+                errorMessage(t("issues.errorAdd"));
+                return;
+            }
+            const newIssue: Issue = {
+                name: newIssueName,
+                id: issueId,
+            };
+            
+            setIssues([...issues, newIssue]);
+            setNewIssueName('');
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t("issues.errorUnknownAdd"));
+            }
+        }
+    }
+    
+    async function deleteIssue(issueId: string): Promise<void> {
+        if (issueId === undefined) {
+            errorMessage(t("issues.errorInvalidId"));
+        }
+        
+        
+        try {
+            const response: boolean = await System.authDeleteToServer<boolean>(
+                'book/issue/remove',
+                {
+                    bookId,
+                    issueId,
+                },
+                token,
+                lang
+            );
+            if (response) {
+                const updatedIssues: Issue[] = issues.filter((issue: Issue): boolean => issue.id !== issueId,);
+                setIssues(updatedIssues);
+            } else {
+                errorMessage(t("issues.errorDelete"));
+            }
+        } catch (e: unknown) {
+            if (e instanceof Error) {
+                errorMessage(e.message);
+            } else {
+                errorMessage(t("issues.errorUnknownDelete"));
+            }
+        }
+    }
+    
+    function updateIssueName(issueId: string, name: string): void {
+        const updatedIssues: Issue[] = issues.map((issue: Issue): Issue => {
+            if (issue.id === issueId) {
+                return {...issue, name};
+            }
+            return issue;
+        });
+        setIssues(updatedIssues);
+    }
+    
+    return (
+        <CollapsableArea title={t("issues.title")} children={
+            <div className="p-1">
+                {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>
+                            </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>
+            </div>
+        } icon={faWarning}/>
+    );
+}