Make Kanban status changes accessible and remove false send success
This commit is contained in:
@@ -2,11 +2,11 @@ import { useDeadlineClock } from '../hooks/useDeadlineClock';
|
||||
import { deadlineInfo } from '../services/tenderCalendar';
|
||||
import React, { useState } from 'react';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import { Kanban, User, Calendar, MapPin, Star, Plus, ArrowRight, Eye } from 'lucide-react';
|
||||
import { Kanban, User, Calendar, MapPin, Eye } from 'lucide-react';
|
||||
|
||||
export const KanbanBoard = () => {
|
||||
const now = useDeadlineClock();
|
||||
const { tenders, updateKanbanStatus, setActiveTenderDetail, teamMembers } = useApp();
|
||||
const { tenders, updateKanbanStatus, setActiveTenderDetail, teamMembers, savingCount, saveError } = useApp();
|
||||
const [selectedPersonel, setSelectedPersonel] = useState('');
|
||||
const [draggedTenderId, setDraggedTenderId] = useState(null);
|
||||
|
||||
@@ -36,6 +36,7 @@ export const KanbanBoard = () => {
|
||||
});
|
||||
|
||||
const handleDragStart = (e, id) => {
|
||||
if(savingCount > 0){e.preventDefault();return;}
|
||||
e.dataTransfer.setData('tenderId', id);
|
||||
setDraggedTenderId(id);
|
||||
};
|
||||
@@ -46,6 +47,7 @@ export const KanbanBoard = () => {
|
||||
|
||||
const handleDrop = (e, columnId) => {
|
||||
e.preventDefault();
|
||||
if(savingCount > 0)return;
|
||||
const id = e.dataTransfer.getData('tenderId') || draggedTenderId;
|
||||
if (id) {
|
||||
updateKanbanStatus(id, columnId);
|
||||
@@ -64,15 +66,16 @@ export const KanbanBoard = () => {
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-black text-slate-900">Ekip Kanban Takip Panosu</h1>
|
||||
<p className="text-xs text-slate-500">Kartları kolonlar arasında sürükleyerek ihale süreçlerinizi yönetin.</p>
|
||||
<p className="text-xs text-slate-500">Kartın durumunu seçerek veya kartı kolonlar arasında sürükleyerek süreci yönetin.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Personnel Filter & Slack Notification Buttons */}
|
||||
{/* Personnel filter */}
|
||||
<div className="flex items-center gap-3 w-full sm:w-auto">
|
||||
<div className="flex items-center gap-2 bg-slate-50 border border-slate-300 rounded-xl px-3 py-1.5 text-xs">
|
||||
<User className="w-4 h-4 text-slate-400" />
|
||||
<select
|
||||
aria-label="Sorumluya göre filtrele"
|
||||
value={selectedPersonel}
|
||||
onChange={(e) => setSelectedPersonel(e.target.value)}
|
||||
className="bg-transparent font-semibold text-slate-800 outline-none"
|
||||
@@ -82,16 +85,12 @@ export const KanbanBoard = () => {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => alert('Slack & Teams kanalına Kanban güncel durumu başarıyla gönderildi!')}
|
||||
className="bg-slate-900 hover:bg-slate-800 text-white font-bold text-xs px-3.5 py-2 rounded-xl flex items-center gap-1.5 transition-colors shadow-xs shrink-0"
|
||||
title="Slack & Teams Ekip Kanalına Bildirim Gönder"
|
||||
>
|
||||
<span>💬 Slack/Teams'e Gönder</span>
|
||||
</button>
|
||||
<p className="text-xs text-slate-500">Slack/Teams gönderimi bu panoda desteklenmiyor.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{savingCount > 0 && <p role="status" className="text-sm text-blue-800">Değişiklik kaydediliyor…</p>}
|
||||
{saveError && <p role="alert" className="text-sm text-red-700">{saveError}</p>}
|
||||
{/* Kanban Columns Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-3.5 overflow-x-auto pb-4">
|
||||
{columns.map(col => {
|
||||
@@ -122,7 +121,7 @@ export const KanbanBoard = () => {
|
||||
colTenders.map(t => (
|
||||
<div
|
||||
key={t.id}
|
||||
draggable
|
||||
draggable={savingCount === 0}
|
||||
onDragStart={(e) => handleDragStart(e, t.id)}
|
||||
className="bg-white rounded-xl p-3 border border-slate-200 shadow-xs hover:shadow-md cursor-grab active:cursor-grabbing space-y-2 transition-all group"
|
||||
>
|
||||
@@ -141,18 +140,19 @@ export const KanbanBoard = () => {
|
||||
<button
|
||||
onClick={() => setActiveTenderDetail(t)}
|
||||
className="text-slate-400 hover:text-blue-600 p-0.5"
|
||||
aria-label={`${t.ikn} ihale detayını aç`}
|
||||
title="Detayı Aç"
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h4
|
||||
<button type="button"
|
||||
onClick={() => setActiveTenderDetail(t)}
|
||||
className="font-bold text-xs text-slate-900 line-clamp-2 hover:text-blue-600 cursor-pointer leading-snug"
|
||||
className="text-left font-bold text-xs text-slate-900 line-clamp-2 hover:text-blue-600 cursor-pointer leading-snug"
|
||||
>
|
||||
{t.baslik}
|
||||
</h4>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center justify-between text-[10px] text-slate-500 font-medium">
|
||||
<span className="flex items-center gap-1">
|
||||
@@ -163,10 +163,19 @@ export const KanbanBoard = () => {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<label className="block text-[10px] font-semibold text-slate-600">İş akışı durumu
|
||||
<select aria-label={`${t.ikn} iş akışı durumu`} value={col.id} disabled={savingCount > 0}
|
||||
onChange={e=>updateKanbanStatus(t.id,e.target.value)}
|
||||
className="block w-full mt-1 border rounded p-1.5 bg-slate-50 disabled:opacity-50">
|
||||
{columns.map(column=><option key={column.id} value={column.id}>{column.title}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
{/* Personnel Select on Card */}
|
||||
<div className="pt-1.5 border-t border-slate-100 flex items-center justify-between text-[10px]">
|
||||
<span className="text-slate-400">Atanan:</span>
|
||||
<select
|
||||
aria-label={`${t.ikn} sorumlusu`}
|
||||
disabled={savingCount > 0}
|
||||
value={t.atananPersonel || ''}
|
||||
onChange={(e) => updateKanbanStatus(t.id, col.id, e.target.value)}
|
||||
className="bg-slate-50 border border-slate-200 rounded px-1.5 py-0.5 text-[10px] font-bold text-slate-800"
|
||||
|
||||
Reference in New Issue
Block a user