Merge branch 'dev' of https://git.webenpcstudio.nl/NiekRabelink/Fociz into dev
This commit is contained in:
@@ -93,107 +93,21 @@ foreach ($allIssues as $iss) {
|
||||
if (!empty($iss['issue_type'])) {
|
||||
$allTypes[$iss['issue_type']] = $iss['issue_type'];
|
||||
}
|
||||
}
|
||||
|
||||
// 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) {
|
||||
$activeProjectKeys[$uKey] = true;
|
||||
}
|
||||
// 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'] ?? '',
|
||||
];
|
||||
if (!empty($iss['status'])) {
|
||||
$allStatuses[$iss['status']] = $iss['status'];
|
||||
}
|
||||
}
|
||||
|
||||
// 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' => '',
|
||||
];
|
||||
// Statussen uitbreiden met officiële Jira instantie statussen
|
||||
$availableStatuses = $jiraData['available_statuses'] ?? [];
|
||||
if (!empty($availableStatuses)) {
|
||||
foreach ($availableStatuses as $st) {
|
||||
if (!empty($st['name'])) {
|
||||
$allStatuses[$st['name']] = $st['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($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);
|
||||
$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">
|
||||
@@ -534,55 +446,51 @@ $statusesJson = json_encode($allStatusesList, JSON_HEX_TAG | JSON_HEX_APOS | JSO
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rij 3: Status Multi-select Dropdown & Zoekveld -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 relative z-30">
|
||||
|
||||
<!-- Linkerkant: Statussen multi-select dropdown -->
|
||||
<div class="flex flex-wrap items-center gap-2 relative z-50">
|
||||
<div class="relative z-50" id="statusDropdownWrapper">
|
||||
<button
|
||||
type="button"
|
||||
onclick="toggleStatusDropdown()"
|
||||
id="statusDropdownBtn"
|
||||
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>
|
||||
<!-- Rij 3: Tabs, Verberg Gesloten, In behandeling & Zoekveld -->
|
||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-3">
|
||||
<!-- Tabs Navigatie -->
|
||||
<div class="flex items-center space-x-1 sm:space-x-1.5 overflow-x-auto pb-1 lg:pb-0">
|
||||
<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">
|
||||
<i data-lucide="user-check" class="w-3.5 h-3.5"></i>
|
||||
<span>Aan mij</span>
|
||||
<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">
|
||||
<?= count($assignedIssues) ?>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- Dropdown Menu met Checkboxes -->
|
||||
<div
|
||||
id="statusDropdownMenu"
|
||||
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"
|
||||
>
|
||||
<!-- Quick actions header -->
|
||||
<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 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">
|
||||
<i data-lucide="users" class="w-3.5 h-3.5"></i>
|
||||
<span>Team & Projecten</span>
|
||||
<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) ?>
|
||||
</span>
|
||||
</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)">
|
||||
Actief
|
||||
|
||||
<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">
|
||||
<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>
|
||||
<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">
|
||||
Geen
|
||||
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Checkboxes List (scrollable, gegroepeerd per project) -->
|
||||
<div class="max-h-80 overflow-y-auto space-y-2.5 pr-1 custom-scrollbar" id="statusCheckboxList">
|
||||
<!-- Dynamisch gevuld via renderStatusCheckboxes() -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Status Acties: Verberg Gesloten + Dropdown + Zoeken -->
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<!-- Toggle: Verberg Gesloten (Standaard Actief!) -->
|
||||
<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">
|
||||
<i data-lucide="eye-off" id="iconHideClosed" 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>
|
||||
</button>
|
||||
|
||||
<!-- 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">
|
||||
@@ -965,23 +873,6 @@ let selectedStatuses = new Set();
|
||||
let activeUrgentOnly = false;
|
||||
let expandedKeys = new Set();
|
||||
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) {
|
||||
const s = (st || '').toLowerCase().trim();
|
||||
@@ -1048,35 +939,7 @@ function toggleJiraFiltersDrawer(forceOpen) {
|
||||
}
|
||||
}
|
||||
|
||||
// Hulpfunctie: Bereken totaal aantal statussen over alle gebruikte projecten
|
||||
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
|
||||
// Bepaal aantal actieve filters voor de badge in de rechter onderhoek
|
||||
function updateActiveFilterBadge() {
|
||||
const badge = document.getElementById('activeFilterBadge');
|
||||
if (!badge) return;
|
||||
@@ -1086,8 +949,8 @@ function updateActiveFilterBadge() {
|
||||
if (currentQueue && currentQueue !== 'MY_QUEUES') activeCount++;
|
||||
if (document.getElementById('filterType')?.value) activeCount++;
|
||||
if (document.getElementById('filterPriority')?.value) activeCount++;
|
||||
const total = getTotalStatusCount();
|
||||
if (selectedStatuses.size > 0 && selectedStatuses.size < total) activeCount++;
|
||||
if (document.getElementById('filterStatus')?.value) activeCount++;
|
||||
if (onlyInProgress) activeCount++;
|
||||
|
||||
if (activeCount > 0) {
|
||||
badge.innerText = activeCount;
|
||||
@@ -1097,333 +960,75 @@ function updateActiveFilterBadge() {
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// STATUS MULTI-SELECT CHECKBOX DROPDOWN LOGICA (GEGROEPEERD PER PROJECT)
|
||||
// ==========================================
|
||||
// Wissel tussen tabs
|
||||
function switchTab(tab) {
|
||||
currentTab = tab;
|
||||
activeUrgentOnly = false;
|
||||
|
||||
function renderStatusCheckboxes() {
|
||||
const container = document.getElementById('statusCheckboxList');
|
||||
if (!container) return;
|
||||
|
||||
if (!projectStatusesData || projectStatusesData.length === 0) {
|
||||
container.innerHTML = '<div class="py-2 text-center text-slate-400 italic text-[11px]">Geen project statussen gevonden</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
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();
|
||||
// Update tab knoppen styling
|
||||
const tabs = ['assigned', 'team', 'in_progress', 'done'];
|
||||
tabs.forEach(t => {
|
||||
const btn = document.getElementById(`tabBtn_${t}`);
|
||||
if (!btn) return;
|
||||
if (t === tab) {
|
||||
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";
|
||||
} else {
|
||||
menu.classList.add('hidden');
|
||||
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);
|
||||
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";
|
||||
}
|
||||
});
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
function selectProjectStatuses(projectKey, selectAll) {
|
||||
const targetKey = (projectKey || '').toUpperCase().trim();
|
||||
const chks = document.querySelectorAll(`.status-checkbox[data-project="${targetKey}"]`);
|
||||
chks.forEach(chk => {
|
||||
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();
|
||||
// Toggle: Verberg Gesloten
|
||||
function toggleHideClosed() {
|
||||
hideClosed = !hideClosed;
|
||||
updateHideClosedButton();
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function selectAllStatuses(selectAll) {
|
||||
selectedStatuses.clear();
|
||||
const chks = document.querySelectorAll('.status-checkbox');
|
||||
chks.forEach(chk => {
|
||||
chk.checked = !!selectAll;
|
||||
if (selectAll && chk.value) {
|
||||
selectedStatuses.add(chk.value.toLowerCase().trim());
|
||||
function updateHideClosedButton() {
|
||||
const btn = document.getElementById('btnHideClosed');
|
||||
if (!btn) return;
|
||||
if (hideClosed) {
|
||||
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";
|
||||
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>`;
|
||||
} 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 {
|
||||
localStorage.setItem('fociz_jira_selected_statuses', JSON.stringify([...selectedStatuses]));
|
||||
} catch (e) {}
|
||||
|
||||
updateStatusDropdownLabel();
|
||||
// Toggle: Snelfilter Alleen In Behandeling
|
||||
function toggleOnlyInProgress() {
|
||||
onlyInProgress = !onlyInProgress;
|
||||
updateOnlyInProgressButton();
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function selectActiveStatusesOnly() {
|
||||
selectedStatuses.clear();
|
||||
const chks = document.querySelectorAll('.status-checkbox');
|
||||
chks.forEach(chk => {
|
||||
const isDone = chk.getAttribute('data-is-done') === '1';
|
||||
chk.checked = !isDone;
|
||||
if (!isDone && chk.value) {
|
||||
selectedStatuses.add(chk.value.toLowerCase().trim());
|
||||
function updateOnlyInProgressButton() {
|
||||
const btn = document.getElementById('btnOnlyInProgress');
|
||||
if (!btn) return;
|
||||
if (onlyInProgress) {
|
||||
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";
|
||||
btn.innerHTML = `<i data-lucide="play" class="w-3 h-3 text-white fill-white"></i><span>In behandeling (Actief)</span>`;
|
||||
} 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-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 {
|
||||
localStorage.setItem('fociz_jira_selected_statuses', JSON.stringify([...selectedStatuses]));
|
||||
} catch (e) {}
|
||||
|
||||
updateStatusDropdownLabel();
|
||||
// Status dropdown verandering
|
||||
function onStatusSelectChange(val) {
|
||||
if (val && isDoneStatus(val)) {
|
||||
hideClosed = false;
|
||||
updateHideClosedButton();
|
||||
}
|
||||
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
|
||||
function selectProject(proj) {
|
||||
currentProject = (proj || '').trim();
|
||||
@@ -1537,14 +1142,21 @@ function updateQueuePills() {
|
||||
}
|
||||
|
||||
function updateProjectCounts() {
|
||||
const all = getDeduplicatedIssues();
|
||||
const total = getTotalStatusCount();
|
||||
let currentList = all;
|
||||
const assigned = jiraData.assigned_issues || [];
|
||||
const team = jiraData.team_issues || [];
|
||||
const all = [...assigned, ...team];
|
||||
|
||||
if (selectedStatuses.size > 0 && selectedStatuses.size < total) {
|
||||
currentList = currentList.filter(iss => isIssueStatusSelected(iss));
|
||||
} else if (selectedStatuses.size === 0) {
|
||||
currentList = [];
|
||||
let currentList = all;
|
||||
if (currentTab === 'assigned') currentList = assigned;
|
||||
else if (currentTab === 'team') currentList = team;
|
||||
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');
|
||||
@@ -1569,14 +1181,21 @@ function updateProjectCounts() {
|
||||
}
|
||||
|
||||
function updateQueueCounts() {
|
||||
const all = getDeduplicatedIssues();
|
||||
const total = getTotalStatusCount();
|
||||
let currentList = all;
|
||||
const assigned = jiraData.assigned_issues || [];
|
||||
const team = jiraData.team_issues || [];
|
||||
const all = [...assigned, ...team];
|
||||
|
||||
if (selectedStatuses.size > 0 && selectedStatuses.size < total) {
|
||||
currentList = currentList.filter(iss => isIssueStatusSelected(iss));
|
||||
} else if (selectedStatuses.size === 0) {
|
||||
currentList = [];
|
||||
let currentList = all;
|
||||
if (currentTab === 'assigned') currentList = assigned;
|
||||
else if (currentTab === 'team') currentList = team;
|
||||
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) {
|
||||
@@ -1685,11 +1304,11 @@ function applyFilters() {
|
||||
const issPKey = (iss.project_key || '').toUpperCase().trim();
|
||||
const issPName = (iss.project || '').toLowerCase().trim();
|
||||
const issStatus = (iss.status || '').toLowerCase().trim();
|
||||
const issCat = (iss.status_category || '').toLowerCase().trim();
|
||||
|
||||
// 1. Status Filter via Checkboxes
|
||||
const totalStatuses = getTotalStatusCount();
|
||||
if (selectedStatuses.size > 0 && selectedStatuses.size < totalStatuses) {
|
||||
if (!isIssueStatusSelected(iss)) {
|
||||
// 1. Verberg Gesloten filter (als tab niet 'done' is en er niet expliciet een gesloten status gekozen is)
|
||||
if (currentTab !== 'done' && hideClosed && !isDoneStatus(statusVal)) {
|
||||
if (issCat === 'done' || isDoneStatus(issStatus)) {
|
||||
return false;
|
||||
}
|
||||
} else if (selectedStatuses.size === 0) {
|
||||
|
||||
Reference in New Issue
Block a user