c9cf99e166
- Removed unnecessary React imports. - Adjusted package.json scripts for Electron integration. - Updated components to replace Next.js-specific imports with Electron-compatible alternatives. - Minor tsconfig.json changes for better compatibility.
177 lines
11 KiB
TypeScript
177 lines
11 KiB
TypeScript
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 ActChapterItem from './ActChapter';
|
|
import {useTranslations} from 'next-intl';
|
|
|
|
interface ActIncidentsProps {
|
|
incidents: Incident[];
|
|
actId: number;
|
|
mainChapters: ChapterListProps[];
|
|
newIncidentTitle: string;
|
|
setNewIncidentTitle: (title: string) => void;
|
|
onAddIncident: (actId: number) => Promise<void>;
|
|
onDeleteIncident: (actId: number, incidentId: string) => Promise<void>;
|
|
onLinkChapter: (actId: number, chapterId: string, incidentId: string) => Promise<void>;
|
|
onUpdateChapterSummary: (chapterId: string, summary: string, incidentId: string) => void;
|
|
onUnlinkChapter: (chapterInfoId: string, chapterId: string, incidentId: string) => Promise<void>;
|
|
sectionKey: string;
|
|
isExpanded: boolean;
|
|
onToggleSection: (sectionKey: string) => void;
|
|
}
|
|
|
|
export default function ActIncidents({
|
|
incidents,
|
|
actId,
|
|
mainChapters,
|
|
newIncidentTitle,
|
|
setNewIncidentTitle,
|
|
onAddIncident,
|
|
onDeleteIncident,
|
|
onLinkChapter,
|
|
onUpdateChapterSummary,
|
|
onUnlinkChapter,
|
|
sectionKey,
|
|
isExpanded,
|
|
onToggleSection,
|
|
}: ActIncidentsProps) {
|
|
const t = useTranslations('actComponent');
|
|
const [expandedItems, setExpandedItems] = useState<{ [key: string]: boolean }>({});
|
|
const [selectedChapterId, setSelectedChapterId] = useState<string>('');
|
|
|
|
function toggleItem(itemKey: string): void {
|
|
setExpandedItems(prev => ({
|
|
...prev,
|
|
[itemKey]: !prev[itemKey],
|
|
}));
|
|
}
|
|
|
|
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>
|
|
)}
|
|
</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"
|
|
value={newIncidentTitle}
|
|
onChange={(e) => 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>
|
|
);
|
|
}
|