/* ============================================================ Vazifalar doskasi (Trello uslubida) — ustunlar + kartochkalar + DnD ============================================================ */ /* ---------- Muddat formati (sana + soat) ---------- */ function fmtTaskDue(iso) { if (!iso) return null; const d = new Date(iso); const months = ['yan', 'fev', 'mar', 'apr', 'may', 'iyn', 'iyl', 'avg', 'sen', 'okt', 'noy', 'dek']; const p = n => (n < 10 ? '0' + n : '' + n); return d.getDate() + ' ' + months[d.getMonth()] + ', ' + p(d.getHours()) + ':' + p(d.getMinutes()); } // faqat sana (kun + oy) — kartochkada koʻrsatish uchun function fmtTaskDate(iso) { if (!iso) return null; const d = new Date(iso); const months = ['yan', 'fev', 'mar', 'apr', 'may', 'iyn', 'iyl', 'avg', 'sen', 'okt', 'noy', 'dek']; return d.getDate() + ' ' + months[d.getMonth()]; } function startOfDay(d) { const x = new Date(d); x.setHours(0, 0, 0, 0); return x; } // datetime-local input qiymati (mahalliy vaqt) function toLocalInput(iso) { if (!iso) return ''; const d = new Date(iso); const p = n => (n < 10 ? '0' + n : '' + n); return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) + 'T' + p(d.getHours()) + ':' + p(d.getMinutes()); } // date input qiymati (faqat sana, mahalliy) function toDateInput(iso) { if (!iso) return ''; const d = new Date(iso); const p = n => (n < 10 ? '0' + n : '' + n); return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()); } // date input (faqat sana) → ISO; mahalliy yarim tun function dateInputToIso(v) { if (!v) return null; const [y, m, d] = v.split('-').map(Number); return new Date(y, m - 1, d).toISOString(); } // time input qiymati (HH:MM) — agar soat 00:00 bo'lsa bo'sh (soat ixtiyoriy) function toTimeInput(iso) { if (!iso) return ''; const d = new Date(iso); const p = n => (n < 10 ? '0' + n : '' + n); if (d.getHours() === 0 && d.getMinutes() === 0) return ''; return p(d.getHours()) + ':' + p(d.getMinutes()); } // sana (+ixtiyoriy soat) → ISO; soat bo'sh bo'lsa yarim tun function dateTimeToIso(dateStr, timeStr) { if (!dateStr) return null; const [y, m, d] = dateStr.split('-').map(Number); let hh = 0, mm = 0; if (timeStr) { const t = timeStr.split(':').map(Number); hh = t[0] || 0; mm = t[1] || 0; } return new Date(y, m - 1, d, hh, mm).toISOString(); } // kartochkada sana (+soat, agar belgilangan bo'lsa) function fmtCardDate(iso) { if (!iso) return null; const d = new Date(iso); const months = ['yan', 'fev', 'mar', 'apr', 'may', 'iyn', 'iyl', 'avg', 'sen', 'okt', 'noy', 'dek']; const p = n => (n < 10 ? '0' + n : '' + n); const base = d.getDate() + ' ' + months[d.getMonth()]; return (d.getHours() || d.getMinutes()) ? base + ' ' + p(d.getHours()) + ':' + p(d.getMinutes()) : base; } /* ---------- Bitta vazifa kartasi ---------- */ function TaskCard({ task, onOpen, canDrag, dragging, onDragStart, onDragEnd, onDuplicate, canDuplicate }) { const done = DB.taskCategory(task.listId) === 'done'; const end = task.endDate ? new Date(task.endDate) : null; // Boshlanish va tugash sanasi (+soat) — diapazon ko'rinishida let dateLabel = null; if (task.startDate && task.endDate) dateLabel = fmtCardDate(task.startDate) + ' – ' + fmtCardDate(task.endDate); else if (task.endDate) dateLabel = fmtCardDate(task.endDate); else if (task.startDate) dateLabel = fmtCardDate(task.startDate); let dueState = null; // 'overdue' | 'soon' if (end && !done) { const diff = Math.round((startOfDay(end).getTime() - startOfDay(new Date()).getTime()) / 86400000); if (diff < 0) dueState = 'overdue'; else if (diff <= 2) dueState = 'soon'; } const overdue = dueState === 'overdue'; const dueBg = overdue ? '#F6DCD6' : (dueState === 'soon' ? '#F6E7CF' : 'var(--bg-2)'); const dueInk = overdue ? '#C2453A' : (dueState === 'soon' ? '#A6651E' : 'var(--ink-2)'); const accent = overdue ? '#E8735F' : (dueState === 'soon' ? '#E3A23B' : null); const assignee = task.assigneeId ? DB.userName(task.assigneeId) : null; const labels = task.labels || []; const images = task.images || []; return (
onDragStart(e, task)} onDragEnd={onDragEnd} onClick={() => onOpen(task)} className="ocard" style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderLeft: accent ? ('3px solid ' + accent) : '1px solid var(--border)', borderRadius: 8, padding: '9px 12px', boxShadow: '0 1px 1px rgba(40,28,18,.12)', cursor: canDrag ? 'grab' : 'pointer', opacity: dragging ? .4 : 1, transition: 'box-shadow .15s, transform .12s, border-color .15s', position: 'relative', }}> {canDuplicate && ( )} {labels.length > 0 && (
{labels.map((l, i) => ( ))}
)}
{task.title}
{images.length > 0 && (
{images.slice(0, 4).map((src, i) => (
{i === 3 && images.length > 4 && (
+{images.length - 4}
)}
))}
)} {task.desc && (
Tavsif bor
)}
{dateLabel && ( {dateLabel} {overdue && · kechikdi} )}
{assignee && ( {DB.userAvatar(task.assigneeId) ? {assignee} : {assignee.split(' ').map(s => s[0]).join('').slice(0, 2)} } {assignee} )}
); } /* ---------- Ustun ---------- */ function TaskColumn({ col, tasks, perms, dnd, colDnd, onAddCard, onOpenCard, onEditCol, onDuplicateCard }) { const isOver = dnd.overCol === col.id; const active = dnd.dragging && perms.taskEdit; const colDragging = colDnd.dragging && colDnd.draggingId !== col.id; const colIsOver = colDnd.over === col.id && colDragging; const isColSource = colDnd.draggingId === col.id; const excluded = active ? tasks.filter(t => t.id !== dnd.draggingId) : []; const k = dnd.reorderCol === col.id ? dnd.reorderIndex : null; const barBeforeId = (active && k != null && k < excluded.length) ? excluded[k].id : null; const barAtEnd = active && k != null && k >= excluded.length; function cardDragOver(e, cardId) { if (!active) return; e.preventDefault(); e.stopPropagation(); const rect = e.currentTarget.getBoundingClientRect(); const before = (e.clientY - rect.top) < rect.height / 2; const j = excluded.findIndex(t => t.id === cardId); if (j < 0) return; dnd.setReorder(col.id, before ? j : j + 1); } const Bar = () => (
); return (
{ if (colDragging) { e.preventDefault(); colDnd.setOver(col.id); } }} onDrop={(e) => { if (colDnd.dragging) { e.preventDefault(); colDnd.onDrop(col.id); } }} style={{ flex: '0 0 288px', width: 288, display: 'flex', flexDirection: 'column', height: '100%', opacity: isColSource ? 0.4 : 1, background: 'var(--bg-2)', borderRadius: 14, padding: '10px 8px 8px', border: colIsOver ? `2px solid ${col.color}` : '2px solid transparent', boxShadow: 'var(--sh-1)', transition: 'opacity .15s, border-color .15s' }}>
{perms.taskManageBoard && ( { e.stopPropagation(); colDnd.onStart(e, col.id); }} onDragEnd={colDnd.onEnd} title="Ustunni sudrab joyini almashtiring" aria-label="Ustunni ko'chirish" style={{ display: 'inline-flex', alignItems: 'center', color: 'var(--ink-4)', cursor: 'grab', flex: 'none' }}> )} {col.title} {tasks.length} {col.category === 'done' ? 'Bajarilgan' : 'Jarayonda'}
{perms.taskManageBoard && ( )}
{ if (active) { e.preventDefault(); dnd.setReorder(col.id, excluded.length); } }} onDragLeave={(e) => { if (e.currentTarget === e.target) dnd.setOver(null); }} onDrop={(e) => { e.preventDefault(); dnd.onDrop(col.id); }} style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '2px 4px 6px', display: 'flex', flexDirection: 'column', gap: 8, borderRadius: 'var(--r)', background: isOver && active ? col.color + '0f' : 'transparent', outline: isOver && active ? `2px dashed ${col.color}` : '2px dashed transparent', outlineOffset: -2, transition: 'background .15s, outline-color .15s', }}> {tasks.map(t => ( {barBeforeId === t.id && }
cardDragOver(e, t.id)}>
))} {barAtEnd && } {tasks.length === 0 && !perms.taskAdd && (
Bo'sh
)}
{perms.taskAdd && ( )}
); } /* ---------- Doska ---------- */ function TaskBoard({ tasks, setTasks, taskLists, setTaskLists, perms, showToast, reload }) { const onApiError = (ex) => { showToast((ex && ex.message) || 'Server xatosi'); if (reload) reload(); }; const [mode, setMode] = useState('board'); // 'board' | 'timeline' const [cardModal, setCardModal] = useState(null); // {task} | {create:true, listId} const [colModal, setColModal] = useState(null); // {col} | {create:true} const [draggingId, setDraggingId] = useState(null); const [overCol, setOverCol] = useState(null); const [reorderCol, setReorderCol] = useState(null); const [reorderIndex, setReorderIndex] = useState(null); const [colDragId, setColDragId] = useState(null); // ustun reorder const [colOverId, setColOverId] = useState(null); const [sortBy, setSortBy] = useState('manual'); // 'manual' | 'due' | 'assignee' const [filterAssignee, setFilterAssignee] = useState(''); // '' = barchasi, 'none' = biriktirilmagan, yoki userId const dragRef = useRef(null); // Optimistik yaratilgan (tmp_) kartalar hali serverda yo'q — ular o'chirilsa/ko'chirilsa, // create javobi kelganda serverga qo'llash uchun shu yerda belgilanadi. const pendingDelRef = useRef(new Set()); // tmp_id const pendingMoveRef = useRef(new Map()); // tmp_id -> { listId, index } const cols = useMemo(() => [...taskLists].sort((a, b) => (a.order || 0) - (b.order || 0)), [taskLists]); // Eng chap (birinchi) ustun = "rejalanmagan" — faqat shu ustun muddatsiz vazifa qabul qiladi const backlogId = cols.length ? cols[0].id : null; function taskSort(a, b) { if (sortBy === 'due') { const av = a.endDate ? new Date(a.endDate).getTime() : Infinity; const bv = b.endDate ? new Date(b.endDate).getTime() : Infinity; if (av !== bv) return av - bv; } else if (sortBy === 'assignee') { const an = a.assigneeId ? DB.userName(a.assigneeId) : '￿'; const bn = b.assigneeId ? DB.userName(b.assigneeId) : '￿'; const c = an.localeCompare(bn); if (c) return c; } return (a.order || 0) - (b.order || 0); } const visibleTasks = useMemo(() => { if (!filterAssignee) return tasks; if (filterAssignee === 'none') return tasks.filter(t => !t.assigneeId); return tasks.filter(t => t.assigneeId === filterAssignee); }, [tasks, filterAssignee]); const byList = useMemo(() => { const m = {}; cols.forEach(c => m[c.id] = []); visibleTasks.forEach(t => { if (m[t.listId]) m[t.listId].push(t); }); Object.values(m).forEach(arr => arr.sort(taskSort)); return m; }, [visibleTasks, cols, sortBy]); function onDragStart(e, task) { if (!perms.taskEdit) return; dragRef.current = task; setDraggingId(task.id); e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', task.id); } catch (_) {} } function onDragEnd() { setDraggingId(null); setOverCol(null); setReorderCol(null); setReorderIndex(null); dragRef.current = null; } function setReorder(colId, idx) { setReorderCol(colId); setReorderIndex(idx); setOverCol(colId); } function applyMoveAt(taskId, targetListId, index) { setTasks(prev => { const moving = prev.find(t => t.id === taskId); if (!moving) return prev; const list = prev.filter(t => t.listId === targetListId && t.id !== taskId).sort((a, b) => (a.order || 0) - (b.order || 0)); const idx = index == null ? list.length : Math.max(0, Math.min(index, list.length)); const cat = DB.taskCategory(targetListId); const newMoving = { ...moving, listId: targetListId, completedAt: cat === 'done' ? (moving.completedAt || new Date().toISOString()) : null }; list.splice(idx, 0, newMoving); const pos = {}; list.forEach((t, i) => pos[t.id] = i); return prev.map(t => { if (t.id === taskId) return { ...newMoving, order: pos[taskId] }; if (t.listId === targetListId && pos[t.id] != null) return { ...t, order: pos[t.id] }; return t; }); }); } function onDrop(targetListId) { const t = dragRef.current; const rIdx = (reorderCol === targetListId) ? reorderIndex : null; setOverCol(null); setDraggingId(null); setReorderCol(null); setReorderIndex(null); dragRef.current = null; if (!t || !perms.taskEdit) return; const sameSpot = t.listId === targetListId && rIdx == null; if (sameSpot) return; // Muddatsiz vazifani faqat backlog (birinchi ustun) qabul qiladi if (backlogId && targetListId !== backlogId && !t.endDate) { showToast('Sanasiz vazifa faqat birinchi ustunda turadi — avval tugash sanasini belgilang'); return; } applyMoveAt(t.id, targetListId, rIdx); const col = DB.taskListById(targetListId); if (t.listId !== targetListId && col) showToast(`${t.title} → ${col.title}`); // Hali saqlanmagan (tmp_) karta — server chaqirmaymiz; create javobi kelganda ko'chiriladi. if (String(t.id).startsWith('tmp_')) { pendingMoveRef.current.set(t.id, { listId: targetListId, index: rIdx }); } else { API.moveTask(t.id, targetListId, rIdx == null ? undefined : rIdx).catch(onApiError); } } const dnd = { draggingId, dragging: !!draggingId, overCol, setOver: setOverCol, onDragStart, onDragEnd, onDrop, reorderCol, reorderIndex, setReorder }; /* ----- Ustun reorder (drag) ----- */ function onColDragStart(e, colId) { if (!perms.taskManageBoard) return; setColDragId(colId); e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/col', colId); } catch (_) {} } function onColDragEnd() { setColDragId(null); setColOverId(null); } function onColDrop(targetId) { const src = colDragId; setColDragId(null); setColOverId(null); if (!src || src === targetId || !perms.taskManageBoard) return; const ordered = cols.map(c => c.id); const from = ordered.indexOf(src), to = ordered.indexOf(targetId); if (from < 0 || to < 0) return; ordered.splice(to, 0, ordered.splice(from, 1)[0]); const pos = {}; ordered.forEach((id, i) => pos[id] = i); setTaskLists(prev => prev.map(c => (pos[c.id] != null ? { ...c, order: pos[c.id] } : c))); cols.forEach(c => { if ((c.order || 0) !== pos[c.id]) API.updateTaskList(c.id, { order: pos[c.id] }).catch(onApiError); }); } const colDnd = { dragging: !!colDragId, draggingId: colDragId, over: colOverId, setOver: setColOverId, onStart: onColDragStart, onEnd: onColDragEnd, onDrop: onColDrop }; /* ----- Kartochka saqlash (OPTIMISTIK — modal darrov yopiladi, API fonda) ----- */ async function saveCard(data) { const isEdit = !!cardModal.task; const listId = isEdit ? cardModal.task.listId : cardModal.listId; const asg = DB.USERS.find(u => u.id === data.assigneeId); setCardModal(null); // kutmasdan darrov yopamiz — tez his qilinishi uchun if (isEdit) { const id = cardModal.task.id; const prevTask = cardModal.task; // Darrov mahalliy qo'llaymiz const merged = { ...prevTask, title: data.title, desc: data.desc || '', assigneeId: data.assigneeId || null, assigneeName: asg ? asg.name : (prevTask.assigneeName || null), startDate: data.startDate || null, endDate: data.endDate || null, labels: data.labels || [], images: data.images || [], }; setTasks(prev => prev.map(t => (t.id === id ? merged : t))); showToast('Vazifa yangilandi'); try { const { task } = await API.updateTask(id, data); setTasks(prev => prev.map(t => (t.id === task.id ? task : t))); } catch (ex) { setTasks(prev => prev.map(t => (t.id === id ? prevTask : t))); // orqaga qaytarish showToast(ex.message || 'Saqlashda xatolik'); } return; } // Yaratish — vaqtinchalik karta darrov ko'rinadi, server javobi kelganda almashtiriladi const tempId = 'tmp_' + Date.now() + '_' + Math.random().toString(36).slice(2, 7); const list = DB.taskListById(listId); const optimistic = { id: tempId, title: data.title, desc: data.desc || '', listId, order: 1e9, assigneeId: data.assigneeId || null, assigneeName: asg ? asg.name : null, dueDate: null, startDate: data.startDate || null, endDate: data.endDate || null, completedAt: list && list.category === 'done' ? new Date().toISOString() : null, labels: data.labels || [], images: data.images || [], createdBy: null, createdAt: new Date().toISOString(), _pending: true, }; setTasks(prev => [...prev, optimistic]); showToast('Vazifa qoʼshildi'); try { const { task } = await API.createTask({ ...data, listId }); // Foydalanuvchi karta saqlanguncha uni o'chirgan bo'lsa — serverdan ham o'chiramiz. if (pendingDelRef.current.has(tempId)) { pendingDelRef.current.delete(tempId); pendingMoveRef.current.delete(tempId); API.deleteTask(task.id).catch(() => {}); } else { // Saqlangunча boshqa ustunga ko'chirilgan bo'lsa — serverda ham ko'chiramiz. const mv = pendingMoveRef.current.get(tempId); pendingMoveRef.current.delete(tempId); setTasks(prev => prev.map(t => (t.id === tempId ? { ...task, listId: mv ? mv.listId : task.listId } : t))); if (mv) API.moveTask(task.id, mv.listId, mv.index == null ? undefined : mv.index).catch(onApiError); } } catch (ex) { pendingDelRef.current.delete(tempId); pendingMoveRef.current.delete(tempId); setTasks(prev => prev.filter(t => t.id !== tempId)); // muvaffaqiyatsiz — olib tashlash showToast(ex.message || 'Saqlashda xatolik'); } } // OPTIMISTIK o'chirish — darrov UI'dan olib tashlaymiz, API fonda. async function deleteCard(id) { const removed = tasks.find(t => t.id === id); setTasks(prev => prev.filter(t => t.id !== id)); setCardModal(null); showToast('Vazifa oʼchirildi'); // Hali serverda saqlanmagan (optimistik) karta — create javobi kelganda o'chiriladi. if (String(id).startsWith('tmp_')) { pendingDelRef.current.add(id); return; } try { await API.deleteTask(id); } catch (ex) { if (removed) setTasks(prev => (prev.some(t => t.id === id) ? prev : [...prev, removed])); // qaytarish showToast(ex.message || 'Oʼchirishda xatolik'); } } // Vazifadan nusxa olish — barcha maydonlarni nusxalab, shu ustunга yangi karta qo'shadi async function duplicateCard(task) { if (!perms.taskAdd || !task) return; try { const payload = { title: (task.title || '') + ' (nusxa)', desc: task.desc || '', assigneeId: task.assigneeId || null, dueDate: null, startDate: task.startDate || null, endDate: task.endDate || null, labels: task.labels || [], images: task.images || [], listId: task.listId, }; const { task: created } = await API.createTask(payload); setTasks(prev => [...prev, created]); showToast('Vazifadan nusxa olindi'); } catch (ex) { showToast(ex.message || 'Nusxalashda xatolik'); } } /* ----- Ustun saqlash ----- */ async function saveCol(data) { try { if (colModal.col) { const { taskList } = await API.updateTaskList(colModal.col.id, data); setTaskLists(prev => prev.map(c => (c.id === taskList.id ? taskList : c))); showToast('Ustun yangilandi'); } else { const { taskList } = await API.createTaskList(data); setTaskLists(prev => [...prev, taskList]); showToast('Ustun qoʼshildi'); } setColModal(null); } catch (ex) { showToast(ex.message || 'Saqlashda xatolik'); } } async function deleteCol(id) { const has = tasks.some(t => t.listId === id); if (has) { showToast("Ustunda vazifalar bor — avval ularni koʻchiring"); return; } try { await API.deleteTaskList(id); setTaskLists(prev => prev.filter(c => c.id !== id)); showToast('Ustun oʼchirildi'); setColModal(null); } catch (ex) { showToast(ex.message || 'Oʼchirishda xatolik'); } } const stats = DB.taskStats(tasks); return ( <> {/* Sarlavha + qisqa statistika */}

Vazifalar doskasi

{stats.total} ta vazifa · {stats.doing} jarayonda · {stats.done} bajarilgan
{/* Doska / Timeline almashtirgich */}
{[['board', 'Doska', 'board'], ['timeline', 'Timeline', 'chart']].map(([m, label, icon]) => ( ))}
{perms.taskManageBoard && mode === 'board' && ( )}
{/* Saralash + filtr */}
Filtr: Saralash: {(filterAssignee || sortBy !== 'manual') && ( )}
{visibleTasks.length} ta koʻrsatilmoqda
{mode === 'timeline' ? ( setCardModal({ task })} /> ) : (
{cols.map(col => ( setCardModal({ create: true, listId })} onOpenCard={(task) => setCardModal({ task })} onDuplicateCard={duplicateCard} onEditCol={(c) => setColModal({ col: c })} /> ))} {cols.length === 0 && (
)}
)} {cardModal && (() => { const lid = cardModal.task ? cardModal.task.listId : cardModal.listId; return ( setCardModal(null)} onSave={saveCard} onDelete={deleteCard} /> ); })()} {colModal && ( setColModal(null)} onSave={saveCol} onDelete={deleteCol} /> )} ); } /* ---------- Vazifa modal (yaratish / tahrirlash) ---------- */ function TaskModal({ initial, listId, perms, requireDate, onClose, onSave, onDelete }) { const editing = !!initial; const [title, setTitle] = useState(initial ? initial.title : ''); const [desc, setDesc] = useState(initial ? (initial.desc || '') : ''); const [assigneeId, setAssigneeId] = useState(initial ? (initial.assigneeId || '') : ''); const [startDate, setStartDate] = useState(initial ? toDateInput(initial.startDate) : ''); const [startTime, setStartTime] = useState(initial ? toTimeInput(initial.startDate) : ''); const [endDate, setEndDate] = useState(initial ? toDateInput(initial.endDate) : ''); const [endTime, setEndTime] = useState(initial ? toTimeInput(initial.endDate) : ''); const [labels, setLabels] = useState(initial ? (initial.labels || []) : []); const [images, setImages] = useState(initial ? (initial.images || []) : []); const [imgBusy, setImgBusy] = useState(false); const col = DB.taskListById(listId); const dateOrderBad = startDate && endDate && endDate < startDate; const endMissing = !endDate; // tugash sanasi har doim majburiy const assigneeMissing = !assigneeId; // ijrochi majburiy const canEdit = editing ? perms.taskEdit : perms.taskAdd; const invalid = !title.trim() || assigneeMissing || endMissing || dateOrderBad; function toggleLabel(color) { setLabels(prev => prev.some(l => l.color === color) ? prev.filter(l => l.color !== color) : [...prev, { color }]); } async function addImages(fileList) { const files = Array.from(fileList || []).filter(f => f.type.startsWith('image/')); if (!files.length) return; setImgBusy(true); try { const urls = []; for (const f of files) urls.push(await fileToDataURL(f, 1280, 'image/jpeg', 0.82)); setImages(prev => [...prev, ...urls]); } catch (_) { /* noto'g'ri fayl — e'tiborsiz */ } setImgBusy(false); } function removeImage(idx) { setImages(prev => prev.filter((_, i) => i !== idx)); } function submit() { if (!canEdit || invalid) return; onSave({ title: title.trim(), desc: desc.trim(), assigneeId: assigneeId || null, dueDate: null, startDate: dateTimeToIso(startDate, startTime), endDate: dateTimeToIso(endDate, endTime), labels, images, }); } return (
setTitle(e.target.value)} onKeyDown={e => { if (e.key === 'Enter' && title.trim()) submit(); }} />