Dev #84

Merged
NiekRabelink merged 2 commits from dev into main 2026-09-15 13:00:29 +00:00
Showing only changes of commit 9cd457971b - Show all commits
+132 -513
View File
@@ -93,106 +93,20 @@ foreach ($allIssues as $iss) {
if (!empty($iss['issue_type'])) { if (!empty($iss['issue_type'])) {
$allTypes[$iss['issue_type']] = $iss['issue_type']; $allTypes[$iss['issue_type']] = $iss['issue_type'];
} }
} if (!empty($iss['status'])) {
$allStatuses[$iss['status']] = $iss['status'];
// Bepaal welke projecten getoond worden: alleen projecten die tickets hebben, plus SD/IN/AAN/GEN
// Geen statussen van projecten die niet gebruikt worden!
$activeProjectKeys = [];
foreach ($coreProjects as $cKey => $cMeta) {
if (isset($usedProjectKeys[$cKey]) || !empty($projectCounts[$cMeta['name']]) || !empty($projectCounts[$cKey])) {
$activeProjectKeys[$cKey] = true;
} }
} }
// Ook eventuele andere gebruikte projecten toevoegen die tickets hebben in $allIssues
foreach ($usedProjectKeys as $uKey => $val) { // Statussen uitbreiden met officiële Jira instantie statussen
$activeProjectKeys[$uKey] = true; $availableStatuses = $jiraData['available_statuses'] ?? [];
if (!empty($availableStatuses)) {
foreach ($availableStatuses as $st) {
if (!empty($st['name'])) {
$allStatuses[$st['name']] = $st['name'];
}
}
} }
// Fallback als er nog geen tickets geladen zijn (bijv. lege sync), toon minimaal de 4 core projecten
if (empty($activeProjectKeys)) {
$activeProjectKeys = array_fill_keys(['SD', 'IN', 'AAN', 'GEN'], true);
}
// Haal projectstatussen op uit jiraData
$rawProjectStatuses = $jiraData['project_statuses'] ?? [];
// Bouw gestructureerde lijst van statussen gegroepeerd per project
$projectStatusesData = [];
$allStatusesMap = [];
foreach (array_keys($activeProjectKeys) as $pKey) {
$pName = $coreProjects[$pKey]['name'] ?? ($allProjects[$pKey]['name'] ?? $pKey);
$pColor = $coreProjects[$pKey]['color'] ?? 'slate';
$pStatuses = [];
// 1. Statussen uit Jira API voor dit project
if (!empty($rawProjectStatuses[$pKey])) {
foreach ($rawProjectStatuses[$pKey] as $st) {
$sName = trim($st['name'] ?? '');
if (empty($sName)) continue;
$sKey = strtolower($sName);
$pStatuses[$sKey] = [
'name' => $sName,
'status_category' => $st['status_category'] ?? 'indeterminate',
'category_name' => $st['category_name'] ?? '',
];
}
}
// 2. Statussen die op de tickets van dit project voorkomen toevoegen/mergen
foreach ($allIssues as $iss) {
$issPKey = strtoupper(trim($iss['project_key'] ?? ''));
if (empty($issPKey) && !empty($iss['key']) && preg_match('/^([A-Z0-9]+)-/i', $iss['key'], $m)) {
$issPKey = strtoupper($m[1]);
}
if ($issPKey === $pKey && !empty($iss['status'])) {
$sName = trim($iss['status']);
$sKey = strtolower($sName);
if (!isset($pStatuses[$sKey])) {
$pStatuses[$sKey] = [
'name' => $sName,
'status_category' => $iss['status_category'] ?? 'indeterminate',
'category_name' => '',
];
}
}
}
// Fallback als een project nog geen statussen heeft
if (empty($pStatuses)) {
$fallback = [
['name' => 'To Do', 'status_category' => 'new'],
['name' => 'In behandeling', 'status_category' => 'indeterminate'],
['name' => 'Gesloten', 'status_category' => 'done'],
];
foreach ($fallback as $fb) {
$pStatuses[strtolower($fb['name'])] = $fb;
}
}
// Sorteren: To Do / Nieuw (1), In behandeling / Uitvoering (2), Gesloten / Gereed (3)
uasort($pStatuses, function($a, $b) {
$order = ['new' => 1, 'indeterminate' => 2, 'done' => 3];
$oa = $order[$a['status_category'] ?? 'indeterminate'] ?? 2;
$ob = $order[$b['status_category'] ?? 'indeterminate'] ?? 2;
if ($oa !== $ob) return $oa - $ob;
return strcasecmp($a['name'], $b['name']);
});
$statusList = array_values($pStatuses);
foreach ($statusList as $st) {
$allStatusesMap[strtolower($st['name'])] = $st;
}
$projectStatusesData[] = [
'key' => $pKey,
'name' => $pName,
'color' => $pColor,
'statuses' => $statusList,
];
}
$allStatusesList = array_values($allStatusesMap);
ksort($allProjects); ksort($allProjects);
ksort($allTypes); ksort($allTypes);
@@ -203,8 +117,6 @@ $userQueueFilters = $jiraData['user_queue_filters'] ?? jira_get_user_queue_prefe
$jiraDataJson = json_encode($jiraData, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); $jiraDataJson = json_encode($jiraData, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
$boardsJson = json_encode($boards, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP); $boardsJson = json_encode($boards, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
$projectStatusesJson = json_encode($projectStatusesData, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
$statusesJson = json_encode($allStatusesList, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
?> ?>
<div class="space-y-6 w-full"> <div class="space-y-6 w-full">
@@ -534,55 +446,51 @@ $statusesJson = json_encode($allStatusesList, JSON_HEX_TAG | JSON_HEX_APOS | JSO
</div> </div>
</div> </div>
<!-- Rij 3: Status Multi-select Dropdown & Zoekveld --> <!-- Rij 3: Tabs, Verberg Gesloten, In behandeling & Zoekveld -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 relative z-30"> <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-3">
<!-- Tabs Navigatie -->
<!-- Linkerkant: Statussen multi-select dropdown --> <div class="flex items-center space-x-1 sm:space-x-1.5 overflow-x-auto pb-1 lg:pb-0">
<div class="flex flex-wrap items-center gap-2 relative z-50"> <button onclick="switchTab('assigned')" id="tabBtn_assigned" class="flex items-center space-x-1.5 px-3 py-1.5 text-xs font-bold rounded-xl transition cursor-pointer bg-indigo-50 dark:bg-indigo-950/50 text-indigo-600 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800/60 flex-shrink-0">
<div class="relative z-50" id="statusDropdownWrapper"> <i data-lucide="user-check" class="w-3.5 h-3.5"></i>
<button <span>Aan mij</span>
type="button" <span id="tabCount_assigned" class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-indigo-200/70 dark:bg-indigo-800/60 text-indigo-800 dark:text-indigo-200">
onclick="toggleStatusDropdown()" <?= count($assignedIssues) ?>
id="statusDropdownBtn" </span>
class="flex items-center space-x-2 px-3.5 py-2 rounded-xl text-xs font-semibold bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 hover:border-slate-300 dark:hover:border-slate-600 text-slate-800 dark:text-slate-200 transition cursor-pointer shadow-2xs"
aria-expanded="false"
>
<i data-lucide="check-square" class="w-3.5 h-3.5 text-indigo-500"></i>
<span>Status:</span>
<span id="statusDropdownLabel" class="font-bold text-indigo-600 dark:text-indigo-400">Alle statussen</span>
<span id="statusDropdownBadge" class="hidden px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-indigo-100 dark:bg-indigo-950/60 text-indigo-700 dark:text-indigo-300"></span>
<i data-lucide="chevron-down" id="statusDropdownChevron" class="w-3.5 h-3.5 text-slate-400 transition-transform duration-200"></i>
</button> </button>
<!-- Dropdown Menu met Checkboxes --> <button onclick="switchTab('team')" id="tabBtn_team" class="flex items-center space-x-1.5 px-3 py-1.5 text-xs font-bold rounded-xl transition cursor-pointer text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/60 border border-transparent flex-shrink-0">
<div <i data-lucide="users" class="w-3.5 h-3.5"></i>
id="statusDropdownMenu" <span>Team & Projecten</span>
class="hidden absolute left-0 top-full mt-2 w-80 sm:w-96 max-w-[95vw] bg-white dark:bg-slate-900 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-800 py-3 px-3.5 z-50 text-xs space-y-2.5" <span id="tabCount_team" class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-200/80 dark:bg-slate-800 text-slate-700 dark:text-slate-300">
> <?= count($teamIssues) ?>
<!-- Quick actions header --> </span>
<div class="flex items-center justify-between pb-2 border-b border-slate-100 dark:border-slate-800">
<span class="font-bold text-slate-900 dark:text-white text-[11px] uppercase tracking-wider">Statussen per Project</span>
<div class="flex items-center space-x-1.5">
<button type="button" onclick="selectAllStatuses(true)" class="px-2 py-0.5 rounded-md text-[10px] font-bold text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-950/60 transition cursor-pointer">
Alles
</button> </button>
<span class="text-slate-300 dark:text-slate-700">•</span>
<button type="button" onclick="selectActiveStatusesOnly()" class="px-2 py-0.5 rounded-md text-[10px] font-bold text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-950/60 transition cursor-pointer" title="Alleen actieve taken (geen gesloten)"> <button onclick="switchTab('in_progress')" id="tabBtn_in_progress" class="flex items-center space-x-1.5 px-3 py-1.5 text-xs font-bold rounded-xl transition cursor-pointer text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/60 border border-transparent flex-shrink-0">
Actief <i data-lucide="clock" class="w-3.5 h-3.5"></i>
<span>In Uitvoering</span>
<span id="tabCount_in_progress" class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-200/80 dark:bg-slate-800 text-slate-700 dark:text-slate-300">
0
</span>
</button> </button>
<span class="text-slate-300 dark:text-slate-700">•</span>
<button type="button" onclick="selectAllStatuses(false)" class="px-2 py-0.5 rounded-md text-[10px] font-bold text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer"> <button onclick="switchTab('done')" id="tabBtn_done" class="flex items-center space-x-1.5 px-3 py-1.5 text-xs font-bold rounded-xl transition cursor-pointer text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/60 border border-transparent flex-shrink-0">
Geen <i data-lucide="check-circle" class="w-3.5 h-3.5"></i>
<span>Afgerond</span>
<span id="tabCount_done" class="px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-200/80 dark:bg-slate-800 text-slate-700 dark:text-slate-300">
0
</span>
</button> </button>
</div> </div>
</div>
<!-- Status Checkboxes List (scrollable, gegroepeerd per project) --> <!-- Status Acties: Verberg Gesloten + Dropdown + Zoeken -->
<div class="max-h-80 overflow-y-auto space-y-2.5 pr-1 custom-scrollbar" id="statusCheckboxList"> <div class="flex flex-wrap items-center gap-2">
<!-- Dynamisch gevuld via renderStatusCheckboxes() --> <!-- Toggle: Verberg Gesloten (Standaard Actief!) -->
</div> <button type="button" onclick="toggleHideClosed()" id="btnHideClosed" class="flex items-center space-x-1.5 px-2.5 py-1.5 rounded-xl text-xs font-bold transition cursor-pointer bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 border border-emerald-300 dark:border-emerald-800/80 shadow-2xs" title="Verberg afgeronde en gesloten tickets">
</div> <i data-lucide="eye-off" id="iconHideClosed" class="w-3.5 h-3.5 text-emerald-600"></i>
</div> <span>Verberg Gesloten</span>
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
</button>
<!-- Actieve filters reset knop als er iets gefilterd is --> <!-- Actieve filters reset knop als er iets gefilterd is -->
<button type="button" onclick="resetAllFilters()" id="btnResetFiltersInline" class="hidden flex items-center space-x-1 px-2.5 py-1.5 rounded-xl text-xs font-semibold text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer"> <button type="button" onclick="resetAllFilters()" id="btnResetFiltersInline" class="hidden flex items-center space-x-1 px-2.5 py-1.5 rounded-xl text-xs font-semibold text-slate-500 hover:text-slate-800 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition cursor-pointer">
@@ -965,23 +873,6 @@ let selectedStatuses = new Set();
let activeUrgentOnly = false; let activeUrgentOnly = false;
let expandedKeys = new Set(); let expandedKeys = new Set();
const ticketStore = new Map(); const ticketStore = new Map();
const projectStatusesData = <?= $projectStatusesJson ?>;
const allJiraStatuses = <?= $statusesJson ?>;
// Hulpfunctie voor deduplicatie van tickets (assigned + team)
function getDeduplicatedIssues() {
const assigned = jiraData.assigned_issues || [];
const team = jiraData.team_issues || [];
const seen = new Set();
const list = [];
[...assigned, ...team].forEach(iss => {
if (iss && iss.key && !seen.has(iss.key)) {
seen.add(iss.key);
list.push(iss);
}
});
return list;
}
function isDoneStatus(st) { function isDoneStatus(st) {
const s = (st || '').toLowerCase().trim(); const s = (st || '').toLowerCase().trim();
@@ -1048,35 +939,7 @@ function toggleJiraFiltersDrawer(forceOpen) {
} }
} }
// Hulpfunctie: Bereken totaal aantal statussen over alle gebruikte projecten // Bepaal aantal actieve filters voor de badge in de rechter onderhoek
function getTotalStatusCount() {
let total = 0;
(projectStatusesData || []).forEach(p => {
total += (p.statuses || []).length;
});
return total;
}
// Hulpfunctie: Bepaal of de status van een ticket geselecteerd is (ondersteunt compound keys en statusnamen)
function isIssueStatusSelected(iss) {
const total = getTotalStatusCount();
if (selectedStatuses.size === 0) return false;
if (selectedStatuses.size >= total) return true;
let issPKey = (iss.project_key || '').toUpperCase().trim();
if (!issPKey && iss.key) {
const m = iss.key.match(/^([A-Z0-9]+)-/i);
if (m) issPKey = m[1].toUpperCase();
}
const issStatus = (iss.status || '').toLowerCase().trim();
const compound = issPKey ? `${issPKey.toLowerCase()}::${issStatus}` : '';
if (compound && selectedStatuses.has(compound)) return true;
if (selectedStatuses.has(issStatus)) return true;
return false;
}
// Bepaal aantal actieve filters voor badge
function updateActiveFilterBadge() { function updateActiveFilterBadge() {
const badge = document.getElementById('activeFilterBadge'); const badge = document.getElementById('activeFilterBadge');
if (!badge) return; if (!badge) return;
@@ -1086,8 +949,8 @@ function updateActiveFilterBadge() {
if (currentQueue && currentQueue !== 'MY_QUEUES') activeCount++; if (currentQueue && currentQueue !== 'MY_QUEUES') activeCount++;
if (document.getElementById('filterType')?.value) activeCount++; if (document.getElementById('filterType')?.value) activeCount++;
if (document.getElementById('filterPriority')?.value) activeCount++; if (document.getElementById('filterPriority')?.value) activeCount++;
const total = getTotalStatusCount(); if (document.getElementById('filterStatus')?.value) activeCount++;
if (selectedStatuses.size > 0 && selectedStatuses.size < total) activeCount++; if (onlyInProgress) activeCount++;
if (activeCount > 0) { if (activeCount > 0) {
badge.innerText = activeCount; badge.innerText = activeCount;
@@ -1097,333 +960,75 @@ function updateActiveFilterBadge() {
} }
} }
// ========================================== // Wissel tussen tabs
// STATUS MULTI-SELECT CHECKBOX DROPDOWN LOGICA (GEGROEPEERD PER PROJECT) function switchTab(tab) {
// ========================================== currentTab = tab;
activeUrgentOnly = false;
function renderStatusCheckboxes() { // Update tab knoppen styling
const container = document.getElementById('statusCheckboxList'); const tabs = ['assigned', 'team', 'in_progress', 'done'];
if (!container) return; tabs.forEach(t => {
const btn = document.getElementById(`tabBtn_${t}`);
if (!projectStatusesData || projectStatusesData.length === 0) { if (!btn) return;
container.innerHTML = '<div class="py-2 text-center text-slate-400 italic text-[11px]">Geen project statussen gevonden</div>'; if (t === tab) {
return; btn.className = "flex items-center space-x-1.5 px-3 py-1.5 text-xs font-bold rounded-xl transition cursor-pointer bg-indigo-50 dark:bg-indigo-950/50 text-indigo-600 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800/60 flex-shrink-0";
}
const colorClasses = {
sky: {
badge: 'bg-sky-100 dark:bg-sky-900/60 text-sky-800 dark:text-sky-200 border border-sky-300 dark:border-sky-800',
hdrBg: 'bg-sky-50/60 dark:bg-sky-950/30'
},
amber: {
badge: 'bg-amber-100 dark:bg-amber-900/60 text-amber-800 dark:text-amber-200 border border-amber-300 dark:border-amber-800',
hdrBg: 'bg-amber-50/60 dark:bg-amber-950/30'
},
emerald: {
badge: 'bg-emerald-100 dark:bg-emerald-900/60 text-emerald-800 dark:text-emerald-200 border border-emerald-300 dark:border-emerald-800',
hdrBg: 'bg-emerald-50/60 dark:bg-emerald-950/30'
},
indigo: {
badge: 'bg-indigo-100 dark:bg-indigo-900/60 text-indigo-800 dark:text-indigo-200 border border-indigo-300 dark:border-indigo-800',
hdrBg: 'bg-indigo-50/60 dark:bg-indigo-950/30'
},
slate: {
badge: 'bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-200 border border-slate-300 dark:border-slate-700',
hdrBg: 'bg-slate-50 dark:bg-slate-800/40'
}
};
let html = '';
projectStatusesData.forEach((proj, pIdx) => {
const pKey = (proj.key || '').toUpperCase();
const pKeyLower = pKey.toLowerCase();
const pColor = proj.color || 'slate';
const styles = colorClasses[pColor] || colorClasses.slate;
const statuses = proj.statuses || [];
html += `
<div class="project-status-group pb-2 mb-2 border-b border-slate-100 dark:border-slate-800/80 last:border-b-0 last:pb-0 last:mb-0">
<div class="flex items-center justify-between px-2 py-1.5 mb-1.5 rounded-lg ${styles.hdrBg}">
<div class="flex items-center space-x-2 min-w-0">
<span class="px-1.5 py-0.5 rounded font-mono text-[10px] font-black ${styles.badge}">${escapeHtml(pKey)}</span>
<span class="font-bold text-slate-800 dark:text-slate-200 text-xs truncate">${escapeHtml(proj.name || pKey)}</span>
<span id="projTotal_${pKey}" class="text-[10px] text-slate-400 font-bold">(0)</span>
</div>
<div class="flex items-center space-x-1.5 text-[10px] flex-shrink-0">
<button type="button" onclick="selectProjectStatuses('${escapeHtml(pKey)}', true)" class="px-1.5 py-0.5 rounded font-semibold text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-950/60 transition cursor-pointer">Alles</button>
<span class="text-slate-300 dark:text-slate-700">•</span>
<button type="button" onclick="selectProjectStatuses('${escapeHtml(pKey)}', false)" class="px-1.5 py-0.5 rounded font-semibold text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition cursor-pointer">Geen</button>
</div>
</div>
<div class="space-y-0.5 pl-1">
`;
statuses.forEach((st, sIdx) => {
const sNorm = (st.name || '').toLowerCase().trim();
const compoundVal = `${pKeyLower}::${sNorm}`;
const cat = (st.status_category || '').toLowerCase().trim();
const isDone = (cat === 'done' || isDoneStatus(sNorm));
const isChecked = selectedStatuses.has(compoundVal) || selectedStatuses.has(sNorm);
if (isChecked) {
selectedStatuses.add(compoundVal);
}
let dotColor = 'bg-blue-500';
if (cat === 'new' || sNorm.includes('to do') || sNorm.includes('open') || sNorm.includes('nieuw')) {
dotColor = 'bg-slate-400';
} else if (isDone) {
dotColor = 'bg-emerald-500';
} else if (sNorm.includes('wacht') || sNorm.includes('klant') || sNorm.includes('pending')) {
dotColor = 'bg-amber-500';
}
const safeKey = `${pKey}_${sNorm.replace(/[^a-z0-9]/gi, '_')}`;
const safeId = `chkStatus_${pIdx}_${sIdx}`;
html += `
<label for="${safeId}" class="flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800/70 cursor-pointer transition select-none group">
<div class="flex items-center space-x-2.5 min-w-0 flex-1">
<input
type="checkbox"
id="${safeId}"
value="${escapeHtml(compoundVal)}"
data-project="${escapeHtml(pKey)}"
data-status="${escapeHtml(sNorm)}"
data-is-done="${isDone ? 1 : 0}"
${isChecked ? 'checked' : ''}
onchange="onStatusCheckboxChange()"
class="status-checkbox w-4 h-4 rounded text-indigo-600 border-slate-300 dark:border-slate-700 focus:ring-indigo-500 cursor-pointer flex-shrink-0"
>
<span class="w-2 h-2 rounded-full ${dotColor} flex-shrink-0"></span>
<span class="font-semibold text-slate-700 dark:text-slate-300 truncate text-xs group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition">${escapeHtml(st.name)}</span>
</div>
<span id="statusCount_${safeKey}" class="text-[10px] font-bold px-1.5 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 ml-2 flex-shrink-0">0</span>
</label>
`;
});
html += `
</div>
</div>
`;
});
container.innerHTML = html;
updateStatusCounts();
}
function updateStatusCounts() {
const all = getDeduplicatedIssues();
(projectStatusesData || []).forEach(proj => {
const pKey = (proj.key || '').toUpperCase().trim();
let projIssues = all.filter(iss => {
let k = (iss.project_key || '').toUpperCase().trim();
if (!k && iss.key) {
const parts = iss.key.split('-');
if (parts.length > 1) k = parts[0].toUpperCase().trim();
}
const pn = (iss.project || '').toUpperCase().trim();
return k === pKey || pn.includes(pKey);
});
// Wachtrij filter meenemen indien actief
if (currentQueue) {
projIssues = projIssues.filter(iss => isIssueInQueue(iss, currentQueue));
}
const projTotalEl = document.getElementById(`projTotal_${pKey}`);
if (projTotalEl) {
projTotalEl.innerText = `(${projIssues.length})`;
}
(proj.statuses || []).forEach(st => {
const sNorm = (st.name || '').toLowerCase().trim();
const safeKey = `${pKey}_${sNorm.replace(/[^a-z0-9]/gi, '_')}`;
const el = document.getElementById(`statusCount_${safeKey}`);
if (el) {
const cnt = projIssues.filter(iss => (iss.status || '').toLowerCase().trim() === sNorm).length;
el.innerText = cnt;
}
});
});
}
function toggleStatusDropdown(force) {
const menu = document.getElementById('statusDropdownMenu');
const chevron = document.getElementById('statusDropdownChevron');
const btn = document.getElementById('statusDropdownBtn');
if (!menu) return;
const willOpen = (typeof force === 'boolean') ? force : menu.classList.contains('hidden');
if (willOpen) {
menu.classList.remove('hidden');
if (chevron) chevron.classList.add('rotate-180');
if (btn) btn.setAttribute('aria-expanded', 'true');
updateStatusCounts();
} else { } else {
menu.classList.add('hidden'); btn.className = "flex items-center space-x-1.5 px-3 py-1.5 text-xs font-bold rounded-xl transition cursor-pointer text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/60 border border-transparent flex-shrink-0";
if (chevron) chevron.classList.remove('rotate-180');
if (btn) btn.setAttribute('aria-expanded', 'false');
} }
}
document.addEventListener('click', (e) => {
const wrapper = document.getElementById('statusDropdownWrapper');
if (wrapper && !wrapper.contains(e.target)) {
toggleStatusDropdown(false);
}
});
function onStatusCheckboxChange() {
selectedStatuses.clear();
const checked = document.querySelectorAll('.status-checkbox:checked');
checked.forEach(chk => {
if (chk.value) selectedStatuses.add(chk.value.toLowerCase().trim());
}); });
try {
localStorage.setItem('fociz_jira_selected_statuses', JSON.stringify([...selectedStatuses]));
} catch (e) {}
updateStatusDropdownLabel();
applyFilters(); applyFilters();
} }
function selectProjectStatuses(projectKey, selectAll) { // Toggle: Verberg Gesloten
const targetKey = (projectKey || '').toUpperCase().trim(); function toggleHideClosed() {
const chks = document.querySelectorAll(`.status-checkbox[data-project="${targetKey}"]`); hideClosed = !hideClosed;
chks.forEach(chk => { updateHideClosedButton();
chk.checked = !!selectAll;
const val = chk.value.toLowerCase().trim();
if (selectAll) {
selectedStatuses.add(val);
} else {
selectedStatuses.delete(val);
}
});
try {
localStorage.setItem('fociz_jira_selected_statuses', JSON.stringify([...selectedStatuses]));
} catch (e) {}
updateStatusDropdownLabel();
applyFilters(); applyFilters();
} }
function selectAllStatuses(selectAll) { function updateHideClosedButton() {
selectedStatuses.clear(); const btn = document.getElementById('btnHideClosed');
const chks = document.querySelectorAll('.status-checkbox'); if (!btn) return;
chks.forEach(chk => { if (hideClosed) {
chk.checked = !!selectAll; btn.className = "flex items-center space-x-1.5 px-2.5 py-1.5 rounded-xl text-xs font-bold transition cursor-pointer bg-emerald-50 dark:bg-emerald-950/40 text-emerald-700 dark:text-emerald-300 border border-emerald-300 dark:border-emerald-800/80 shadow-2xs";
if (selectAll && chk.value) { btn.innerHTML = `<i data-lucide="eye-off" class="w-3.5 h-3.5 text-emerald-600"></i><span>Verberg Gesloten</span><span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>`;
selectedStatuses.add(chk.value.toLowerCase().trim()); } else {
btn.className = "flex items-center space-x-1.5 px-2.5 py-1.5 rounded-xl text-xs font-semibold transition cursor-pointer bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-700 border border-slate-200 dark:border-slate-700";
btn.innerHTML = `<i data-lucide="eye" class="w-3.5 h-3.5 text-slate-400"></i><span>Toon Ook Gesloten</span>`;
} }
}); if (typeof lucide !== 'undefined') lucide.createIcons();
}
try { // Toggle: Snelfilter Alleen In Behandeling
localStorage.setItem('fociz_jira_selected_statuses', JSON.stringify([...selectedStatuses])); function toggleOnlyInProgress() {
} catch (e) {} onlyInProgress = !onlyInProgress;
updateOnlyInProgressButton();
updateStatusDropdownLabel();
applyFilters(); applyFilters();
} }
function selectActiveStatusesOnly() { function updateOnlyInProgressButton() {
selectedStatuses.clear(); const btn = document.getElementById('btnOnlyInProgress');
const chks = document.querySelectorAll('.status-checkbox'); if (!btn) return;
chks.forEach(chk => { if (onlyInProgress) {
const isDone = chk.getAttribute('data-is-done') === '1'; btn.className = "flex items-center space-x-1.5 px-2.5 py-1.5 rounded-xl text-xs font-bold transition cursor-pointer bg-blue-600 text-white shadow-xs";
chk.checked = !isDone; btn.innerHTML = `<i data-lucide="play" class="w-3 h-3 text-white fill-white"></i><span>In behandeling (Actief)</span>`;
if (!isDone && chk.value) { } else {
selectedStatuses.add(chk.value.toLowerCase().trim()); btn.className = "flex items-center space-x-1.5 px-2.5 py-1.5 rounded-xl text-xs font-semibold transition cursor-pointer bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 border border-slate-200 dark:border-slate-700";
btn.innerHTML = `<i data-lucide="play" class="w-3 h-3 text-blue-500"></i><span>In behandeling</span>`;
} }
}); if (typeof lucide !== 'undefined') lucide.createIcons();
}
try { // Status dropdown verandering
localStorage.setItem('fociz_jira_selected_statuses', JSON.stringify([...selectedStatuses])); function onStatusSelectChange(val) {
} catch (e) {} if (val && isDoneStatus(val)) {
hideClosed = false;
updateStatusDropdownLabel(); updateHideClosedButton();
}
applyFilters(); applyFilters();
} }
function updateStatusDropdownLabel() {
const labelEl = document.getElementById('statusDropdownLabel');
const badgeEl = document.getElementById('statusDropdownBadge');
if (!labelEl) return;
const total = getTotalStatusCount();
const selected = selectedStatuses.size;
if (selected === total || (total === 0 && selected === 0)) {
labelEl.innerText = "Alle statussen";
if (badgeEl) badgeEl.classList.add('hidden');
} else if (selected === 0) {
labelEl.innerText = "Geen geselecteerd";
if (badgeEl) {
badgeEl.innerText = "0";
badgeEl.classList.remove('hidden');
badgeEl.className = "px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-100 dark:bg-rose-950/60 text-rose-700 dark:text-rose-300";
}
} else {
labelEl.innerText = `${selected} statussen`;
if (badgeEl) {
badgeEl.innerText = `${selected}/${total}`;
badgeEl.classList.remove('hidden');
badgeEl.className = "px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-indigo-100 dark:bg-indigo-950/60 text-indigo-700 dark:text-indigo-300";
}
}
const btnReset = document.getElementById('btnResetFiltersInline');
if (btnReset) {
const isCustom = selected < total || currentProject !== '' || (currentQueue !== '' && currentQueue !== 'MY_QUEUES') || document.getElementById('jiraSearchInput')?.value;
if (isCustom) btnReset.classList.remove('hidden');
else btnReset.classList.add('hidden');
}
}
function initStatusSelection() {
selectedStatuses = new Set();
let saved = null;
try {
const raw = localStorage.getItem('fociz_jira_selected_statuses');
if (raw) saved = JSON.parse(raw);
} catch (e) {}
if (Array.isArray(saved) && saved.length > 0) {
saved.forEach(s => {
if (s) selectedStatuses.add(String(s).toLowerCase().trim());
});
} else {
// Standaard alle actieve statussen selecteren, gesloten uit conform gebruikerswens
(projectStatusesData || []).forEach(proj => {
const pKeyLower = (proj.key || '').toLowerCase().trim();
(proj.statuses || []).forEach(st => {
const sNorm = (st.name || '').toLowerCase().trim();
const cat = (st.status_category || '').toLowerCase().trim();
const isDone = (cat === 'done' || isDoneStatus(sNorm));
if (!isDone) {
selectedStatuses.add(`${pKeyLower}::${sNorm}`);
}
});
});
if (selectedStatuses.size === 0) {
(projectStatusesData || []).forEach(proj => {
const pKeyLower = (proj.key || '').toLowerCase().trim();
(proj.statuses || []).forEach(st => {
const sNorm = (st.name || '').toLowerCase().trim();
selectedStatuses.add(`${pKeyLower}::${sNorm}`);
});
});
}
}
renderStatusCheckboxes();
updateStatusDropdownLabel();
}
// Project selectie via pill tabs // Project selectie via pill tabs
function selectProject(proj) { function selectProject(proj) {
currentProject = (proj || '').trim(); currentProject = (proj || '').trim();
@@ -1537,14 +1142,21 @@ function updateQueuePills() {
} }
function updateProjectCounts() { function updateProjectCounts() {
const all = getDeduplicatedIssues(); const assigned = jiraData.assigned_issues || [];
const total = getTotalStatusCount(); const team = jiraData.team_issues || [];
let currentList = all; const all = [...assigned, ...team];
if (selectedStatuses.size > 0 && selectedStatuses.size < total) { let currentList = all;
currentList = currentList.filter(iss => isIssueStatusSelected(iss)); if (currentTab === 'assigned') currentList = assigned;
} else if (selectedStatuses.size === 0) { else if (currentTab === 'team') currentList = team;
currentList = []; else if (currentTab === 'in_progress') {
currentList = all.filter(iss => isInProgressStatus(iss.status, iss.status_category));
} else if (currentTab === 'done') {
currentList = all.filter(iss => isDoneStatus(iss.status) || (iss.status_category || '').toLowerCase() === 'done');
}
if (hideClosed && currentTab !== 'done') {
currentList = currentList.filter(iss => !isDoneStatus(iss.status) && (iss.status_category || '').toLowerCase() !== 'done');
} }
const elAll = document.getElementById('projCount_all'); const elAll = document.getElementById('projCount_all');
@@ -1569,14 +1181,21 @@ function updateProjectCounts() {
} }
function updateQueueCounts() { function updateQueueCounts() {
const all = getDeduplicatedIssues(); const assigned = jiraData.assigned_issues || [];
const total = getTotalStatusCount(); const team = jiraData.team_issues || [];
let currentList = all; const all = [...assigned, ...team];
if (selectedStatuses.size > 0 && selectedStatuses.size < total) { let currentList = all;
currentList = currentList.filter(iss => isIssueStatusSelected(iss)); if (currentTab === 'assigned') currentList = assigned;
} else if (selectedStatuses.size === 0) { else if (currentTab === 'team') currentList = team;
currentList = []; else if (currentTab === 'in_progress') {
currentList = all.filter(iss => isInProgressStatus(iss.status, iss.status_category));
} else if (currentTab === 'done') {
currentList = all.filter(iss => isDoneStatus(iss.status) || (iss.status_category || '').toLowerCase() === 'done');
}
if (hideClosed && currentTab !== 'done') {
currentList = currentList.filter(iss => !isDoneStatus(iss.status) && (iss.status_category || '').toLowerCase() !== 'done');
} }
if (currentProject) { if (currentProject) {
@@ -1685,11 +1304,11 @@ function applyFilters() {
const issPKey = (iss.project_key || '').toUpperCase().trim(); const issPKey = (iss.project_key || '').toUpperCase().trim();
const issPName = (iss.project || '').toLowerCase().trim(); const issPName = (iss.project || '').toLowerCase().trim();
const issStatus = (iss.status || '').toLowerCase().trim(); const issStatus = (iss.status || '').toLowerCase().trim();
const issCat = (iss.status_category || '').toLowerCase().trim();
// 1. Status Filter via Checkboxes // 1. Verberg Gesloten filter (als tab niet 'done' is en er niet expliciet een gesloten status gekozen is)
const totalStatuses = getTotalStatusCount(); if (currentTab !== 'done' && hideClosed && !isDoneStatus(statusVal)) {
if (selectedStatuses.size > 0 && selectedStatuses.size < totalStatuses) { if (issCat === 'done' || isDoneStatus(issStatus)) {
if (!isIssueStatusSelected(iss)) {
return false; return false;
} }
} else if (selectedStatuses.size === 0) { } else if (selectedStatuses.size === 0) {