interaktivna Tablica radnih sati, db

frontend/src/components/dashboard/TaskCreateModal.jsx

@@ -1,8 +1,9 @@
-import { useEffect, useState } from 'preact/hooks';
-import { createTask, getStatusLabel } from '../../stores/taskStore';
+import { useEffect, useMemo, useState } from 'preact/hooks';
+import { createTask, fetchTaskTemplates, getStatusLabel } from '../../stores/taskStore';
 import { formatEntityCode, formatPurposeLabel } from '../../lib/displayIds';
+import ModalShell from '../ui/ModalShell';
 
-const STATUS_OPTIONS = ['aktivan', 'servis', 'neaktivan'];
+const STATUS_OPTIONS = ['aktivan', 'servis', 'zavrsen', 'neaktivan'];
 
 const INITIAL_FORM = {
     title: '',
@@ -15,48 +16,107 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
     const [form, setForm] = useState(INITIAL_FORM);
     const [submitting, setSubmitting] = useState(false);
     const [error, setError] = useState('');
+    const [templateMode, setTemplateMode] = useState(false);
+    const [templateLoading, setTemplateLoading] = useState(false);
+    const [templateId, setTemplateId] = useState('');
+    const [templates, setTemplates] = useState([]);
+
+    const selectedTemplate = useMemo(
+        () => templates.find((template) => String(template.id) === String(templateId)) || null,
+        [templates, templateId]
+    );
 
     useEffect(() => {
         if (!open) {
             setForm(INITIAL_FORM);
             setSubmitting(false);
             setError('');
+            setTemplateMode(false);
+            setTemplateId('');
+            setTemplates([]);
+            setTemplateLoading(false);
         }
     }, [open]);
 
+    useEffect(() => {
+        if (!selectedTemplate) return;
+        setForm((prev) => ({
+            ...prev,
+            title: selectedTemplate.title || '',
+            description: selectedTemplate.description || '',
+            status: 'aktivan',
+            work_order: '',
+        }));
+    }, [selectedTemplate]);
+
     if (!open) return null;
 
     function setField(name, value) {
         setForm((prev) => ({ ...prev, [name]: value }));
     }
 
+    async function enableTemplateMode() {
+        if (templateMode) {
+            setTemplateMode(false);
+            setTemplateId('');
+            setForm(INITIAL_FORM);
+            return;
+        }
+        setError('');
+        setTemplateLoading(true);
+        try {
+            const fetched = await fetchTaskTemplates();
+            setTemplates(fetched);
+            setTemplateMode(true);
+        } catch (err) {
+            setError(err?.message || 'Neuspješno učitavanje templatea.');
+        } finally {
+            setTemplateLoading(false);
+        }
+    }
+
     async function submit(event) {
         event.preventDefault();
         setError('');
 
-        const title = String(form.title || '').trim();
-        if (!title) {
-            setError('Naslov zadatka je obavezan.');
-            return;
-        }
-        if (form.status === 'neaktivan' && !form.work_order) {
-            setError('Putni nalog je obavezan prije zatvaranja zadatka.');
-            return;
-        }
         if (!contextCrane?.id) {
             setError('Odaberite dizalicu u Servisnom kontekstu prije kreiranja zadatka.');
             return;
         }
 
-        setSubmitting(true);
-        try {
-            await createTask({
+        let payload;
+        if (templateMode) {
+            if (!templateId) {
+                setError('Odaberite template za unos zadatka.');
+                return;
+            }
+            payload = {
+                template_id: templateId,
+                vehicle: contextCrane.id,
+                work_order: null,
+            };
+        } else {
+            const title = String(form.title || '').trim();
+            if (!title) {
+                setError('Naslov zadatka je obavezan.');
+                return;
+            }
+            if ((form.status === 'neaktivan' || form.status === 'zavrsen') && !form.work_order) {
+                setError('Putni nalog je obavezan prije zatvaranja zadatka.');
+                return;
+            }
+            payload = {
                 title,
                 description: String(form.description || '').trim(),
                 status: form.status || 'aktivan',
                 vehicle: contextCrane.id,
                 work_order: form.work_order || null,
-            });
+            };
+        }
+
+        setSubmitting(true);
+        try {
+            await createTask(payload);
             await onSuccess?.();
             onClose?.();
         } catch (err) {
@@ -67,15 +127,13 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
     }
 
     return (
-        <div
-            className="fixed inset-0 z-50 overflow-y-auto bg-slate-950/15 p-4 pt-20 backdrop-blur-[2px]"
-            onClick={onClose}
+        <ModalShell
+            onClose={onClose}
+            overlayClassName="z-50 overflow-y-auto p-4 pt-20"
+            contentClassName="flex items-start justify-center min-h-full"
+            panelClassName="w-full max-w-2xl rounded-xl border border-border-hairline bg-canvas-elevated shadow-xl overflow-hidden max-h-[calc(100vh-2rem)]"
         >
-            <div className="flex min-h-full items-start justify-center">
-                <div
-                    className="w-full max-w-xl max-h-[calc(100vh-2rem)] overflow-hidden rounded-xl border border-border-hairline bg-canvas-elevated shadow-xl"
-                    onClick={(event) => event.stopPropagation()}
-                >
+            <div className="w-full flex flex-col">
                 <div className="flex items-center justify-between border-b border-border-hairline px-5 py-4">
                     <div>
                         <h3 className="text-lg font-semibold text-text-main">Novi radni zadatak</h3>
@@ -83,26 +141,60 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
                             Kontekst dizalice: {contextCrane?.registration_number || 'Nije odabrana'}
                         </p>
                     </div>
-                    <button
-                        type="button"
-                        onClick={onClose}
-                        className="rounded-md px-2 py-1 text-sm text-text-muted hover:bg-canvas-deep"
-                        aria-label="Zatvori modal"
-                    >
-                        ✕
-                    </button>
+                    <div className="flex items-center gap-2">
+                        <button
+                            type="button"
+                            onClick={enableTemplateMode}
+                            disabled={templateLoading || submitting}
+                            className="rounded-md border border-border-hairline px-3 py-1 text-xs font-medium text-text-main hover:bg-canvas-deep disabled:opacity-60"
+                        >
+                            {templateMode ? 'Ručni unos' : 'Unos iz templatea'}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            className="rounded-md px-2 py-1 text-sm text-text-muted hover:bg-canvas-deep"
+                            aria-label="Zatvori modal"
+                        >
+                            ✕
+                        </button>
+                    </div>
                 </div>
 
                 <form onSubmit={submit} className="max-h-[calc(100vh-8rem)] space-y-4 overflow-y-auto px-5 py-4">
+                    {templateMode && (
+                        <label className="flex flex-col gap-1 text-sm">
+                            <span className="font-medium text-text-main">Template zadatka *</span>
+                            <select
+                                value={templateId}
+                                onChange={(event) => setTemplateId(event.currentTarget.value)}
+                                disabled={submitting || templateLoading}
+                                className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
+                            >
+                                <option value="">— Odaberite template —</option>
+                                {templates.map((template) => (
+                                    <option key={template.id} value={String(template.id)}>
+                                        {template.title}
+                                    </option>
+                                ))}
+                            </select>
+                            {selectedTemplate && (
+                                <span className="text-[11px] text-text-muted">
+                                    Generirat će se do 10 servisnih zapisa iz predloška (vidljivo u tablici Servisni zapisi).
+                                </span>
+                            )}
+                        </label>
+                    )}
+
                     <label className="flex flex-col gap-1 text-sm">
                         <span className="font-medium text-text-main">Naslov zadatka *</span>
                         <input
                             type="text"
                             value={form.title}
                             onInput={(event) => setField('title', event.currentTarget.value)}
-                            disabled={submitting}
+                            disabled={submitting || templateMode}
                             className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
-                            required
+                            required={!templateMode}
                         />
                     </label>
 
@@ -112,7 +204,7 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
                             rows={3}
                             value={form.description}
                             onInput={(event) => setField('description', event.currentTarget.value)}
-                            disabled={submitting}
+                            disabled={submitting || templateMode}
                             className="resize-none rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
                         />
                     </label>
@@ -123,7 +215,7 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
                             <select
                                 value={form.status}
                                 onChange={(event) => setField('status', event.currentTarget.value)}
-                                disabled={submitting}
+                                disabled={submitting || templateMode}
                                 className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
                             >
                                 {STATUS_OPTIONS.map((status) => (
@@ -139,7 +231,7 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
                             <select
                                 value={form.work_order}
                                 onChange={(event) => setField('work_order', event.currentTarget.value)}
-                                disabled={submitting}
+                                disabled={submitting || templateMode}
                                 className="rounded-lg border border-border-hairline bg-canvas-base px-3 py-2 text-text-main disabled:opacity-50"
                             >
                                 <option value="">— Bez povezanog naloga —</option>
@@ -149,6 +241,11 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
                                     </option>
                                 ))}
                             </select>
+                            {templateMode && (
+                                <span className="text-[11px] text-text-muted">
+                                    Kod template unosa nalog nije obavezan i backend ga neće automatski povezati.
+                                </span>
+                            )}
                             {workOrders.length === 0 && (
                                 <span className="text-[11px] text-amber-600">
                                     Nema dostupnih naloga za odabranu dizalicu.
@@ -175,14 +272,13 @@ export default function TaskCreateModal({ open, workOrders = [], contextCrane =
                         <button
                             type="submit"
                             className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"
-                            disabled={submitting}
+                            disabled={submitting || templateLoading}
                         >
                             {submitting ? 'Spremanje...' : 'Kreiraj radni zadatak'}
                         </button>
                     </div>
                 </form>
-                </div>
             </div>
-        </div>
+        </ModalShell>
     );
 }