${escapeHtml(st.name)}
@@ -1278,13 +1241,132 @@ function renderStatusCheckboxes() {
});
html += `
+
+
+
+
+
+
+ ${escapeHtml(pKey)}
+ ${escapeHtml(proj.name || pKey)}
+ (0)
+
+
+
+ •
+
+ •
+
+
+
+
+
+ ${statusRowsHtml}
+
`;
});
container.innerHTML = html;
+ if (typeof lucide !== 'undefined') lucide.createIcons();
updateStatusCounts();
+ updateStatusDropdownLabel();
+ updateProjectStatusDropdownVisibility();
+}
+
+function updateProjectStatusDropdownVisibility() {
+ const items = document.querySelectorAll('.project-status-dropdown-item');
+ const curNorm = (currentProject || '').toUpperCase().trim();
+ items.forEach(item => {
+ const pKey = (item.getAttribute('data-project') || '').toUpperCase().trim();
+ if (!curNorm) {
+ // "Alle Projecten": toon alle toegewezen project dropdowns
+ item.classList.remove('hidden');
+ } else if (curNorm === pKey) {
+ item.classList.remove('hidden');
+ } else if (curNorm === 'DX' && pKey === 'SD') {
+ item.classList.remove('hidden');
+ } else {
+ item.classList.add('hidden');
+ }
+ });
+}
+
+function toggleProjectStatusDropdown(projectKey, force) {
+ const targetKey = (projectKey || '').toUpperCase().trim();
+ const menu = document.getElementById(`statusDropdownMenu_${targetKey}`);
+ const chevron = document.getElementById(`statusDropdownChevron_${targetKey}`);
+ const btn = document.getElementById(`statusDropdownBtn_${targetKey}`);
+ if (!menu) return;
+
+ const willOpen = (typeof force === 'boolean') ? force : menu.classList.contains('hidden');
+
+ // Sluit alle andere geopende status dropdowns
+ closeAllProjectStatusDropdowns(targetKey);
+
+ if (willOpen) {
+ menu.classList.remove('hidden');
+ if (chevron) chevron.classList.add('rotate-180');
+ if (btn) btn.setAttribute('aria-expanded', 'true');
+ updateStatusCounts();
+ } else {
+ menu.classList.add('hidden');
+ if (chevron) chevron.classList.remove('rotate-180');
+ if (btn) btn.setAttribute('aria-expanded', 'false');
+ }
+}
+
+function closeAllProjectStatusDropdowns(exceptKey = '') {
+ const exceptNorm = (exceptKey || '').toUpperCase().trim();
+ (projectStatusesData || []).forEach(proj => {
+ const pKey = (proj.key || '').toUpperCase().trim();
+ if (pKey === exceptNorm) return;
+ const menu = document.getElementById(`statusDropdownMenu_${pKey}`);
+ const chevron = document.getElementById(`statusDropdownChevron_${pKey}`);
+ const btn = document.getElementById(`statusDropdownBtn_${pKey}`);
+ if (menu && !menu.classList.contains('hidden')) {
+ menu.classList.add('hidden');
+ if (chevron) chevron.classList.remove('rotate-180');
+ if (btn) btn.setAttribute('aria-expanded', 'false');
+ }
+ });
+}
+
+// Sluit dropdowns bij klikken buiten dropdowns
+document.addEventListener('click', (e) => {
+ const isInside = e.target.closest('.project-status-dropdown-item');
+ if (!isInside) {
+ closeAllProjectStatusDropdowns();
+ }
+});
+
+function toggleStatusDropdown(force) {
+ if (currentProject) {
+ toggleProjectStatusDropdown(currentProject, force);
+ } else if (projectStatusesData && projectStatusesData.length > 0) {
+ toggleProjectStatusDropdown(projectStatusesData[0].key, force);
+ }
}
function updateStatusCounts() {
@@ -1321,37 +1403,18 @@ function updateStatusCounts() {
});
}
-function toggleStatusDropdown(force) {
- const menu = document.getElementById('statusDropdownMenu');
- const chevron = document.getElementById('statusDropdownChevron');
- const btn = document.getElementById('statusDropdownBtn');
- if (!menu) return;
+function onStatusCheckboxChange(projectKey) {
+ const pNorm = (projectKey || '').toUpperCase().trim();
+ const pKeyLower = pNorm.toLowerCase();
+ const chks = document.querySelectorAll(`.status-checkbox-${pNorm}`);
- 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 {
- 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);
- }
-});
-
-function onStatusCheckboxChange() {
- selectedStatuses.clear();
- const checked = document.querySelectorAll('.status-checkbox:checked');
- checked.forEach(chk => {
- if (chk.value) selectedStatuses.add(chk.value.toLowerCase().trim());
+ chks.forEach(chk => {
+ const val = chk.value.toLowerCase().trim();
+ if (chk.checked) {
+ selectedStatuses.add(val);
+ } else {
+ selectedStatuses.delete(val);
+ }
});
try {
@@ -1364,7 +1427,9 @@ function onStatusCheckboxChange() {
function selectProjectStatuses(projectKey, selectAll) {
const targetKey = (projectKey || '').toUpperCase().trim();
+ const pKeyLower = targetKey.toLowerCase();
const chks = document.querySelectorAll(`.status-checkbox[data-project="${targetKey}"]`);
+
chks.forEach(chk => {
chk.checked = !!selectAll;
const val = chk.value.toLowerCase().trim();
@@ -1383,6 +1448,29 @@ function selectProjectStatuses(projectKey, selectAll) {
applyFilters();
}
+function selectProjectActiveStatuses(projectKey) {
+ const targetKey = (projectKey || '').toUpperCase().trim();
+ const chks = document.querySelectorAll(`.status-checkbox[data-project="${targetKey}"]`);
+
+ chks.forEach(chk => {
+ const isDone = chk.getAttribute('data-is-done') === '1';
+ chk.checked = !isDone;
+ const val = chk.value.toLowerCase().trim();
+ if (!isDone) {
+ selectedStatuses.add(val);
+ } else {
+ selectedStatuses.delete(val);
+ }
+ });
+
+ try {
+ localStorage.setItem('fociz_jira_selected_statuses', JSON.stringify([...selectedStatuses]));
+ } catch (e) {}
+
+ updateStatusDropdownLabel();
+ applyFilters();
+}
+
function selectAllStatuses(selectAll) {
selectedStatuses.clear();
const chks = document.querySelectorAll('.status-checkbox');
@@ -1401,55 +1489,78 @@ function selectAllStatuses(selectAll) {
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 updateStatusDropdownLabel() {
+ let hasAnyCustomFilter = false;
+
+ (projectStatusesData || []).forEach(proj => {
+ const pKey = (proj.key || '').toUpperCase().trim();
+ const pKeyLower = pKey.toLowerCase();
+ const labelEl = document.getElementById(`statusDropdownLabel_${pKey}`);
+ const badgeEl = document.getElementById(`statusDropdownBadge_${pKey}`);
+ if (!labelEl) return;
+
+ const statuses = proj.statuses || [];
+ const total = statuses.length;
+ let selectedCount = 0;
+ let activeTotal = 0;
+ let activeSelected = 0;
+ let singleStatusName = '';
+
+ statuses.forEach(st => {
+ const sNorm = (st.name || '').toLowerCase().trim();
+ const compound = `${pKeyLower}::${sNorm}`;
+ const cat = (st.status_category || '').toLowerCase().trim();
+ const isDone = (cat === 'done' || isDoneStatus(sNorm));
+
+ if (!isDone) activeTotal++;
+
+ if (selectedStatuses.has(compound) || selectedStatuses.has(sNorm)) {
+ selectedCount++;
+ singleStatusName = st.name;
+ if (!isDone) activeSelected++;
+ }
+ });
+
+ if (selectedCount < total) {
+ hasAnyCustomFilter = true;
+ }
+
+ if (selectedCount === total || (total === 0 && selectedCount === 0)) {
+ labelEl.innerText = "Alle statussen";
+ if (badgeEl) {
+ badgeEl.innerText = total;
+ badgeEl.className = "px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400";
+ }
+ } else if (selectedCount === 0) {
+ labelEl.innerText = "Geen";
+ if (badgeEl) {
+ badgeEl.innerText = "0";
+ 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 if (selectedCount === activeTotal && activeSelected === activeTotal && activeTotal > 0) {
+ labelEl.innerText = "Actief";
+ if (badgeEl) {
+ badgeEl.innerText = `${activeSelected}/${total}`;
+ badgeEl.className = "px-1.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 dark:bg-emerald-950/60 text-emerald-700 dark:text-emerald-300";
+ }
+ } else if (selectedCount === 1) {
+ labelEl.innerText = singleStatusName;
+ if (badgeEl) {
+ badgeEl.innerText = `1/${total}`;
+ 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";
+ }
+ } else {
+ labelEl.innerText = `${selectedCount} statussen`;
+ if (badgeEl) {
+ badgeEl.innerText = `${selectedCount}/${total}`;
+ 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";
+ }
}
});
- try {
- localStorage.setItem('fociz_jira_selected_statuses', JSON.stringify([...selectedStatuses]));
- } catch (e) {}
-
- updateStatusDropdownLabel();
- 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 !== '' || document.getElementById('jiraSearchInput')?.value;
+ const isCustom = hasAnyCustomFilter || currentProject !== '' || document.getElementById('jiraSearchInput')?.value;
if (isCustom) btnReset.classList.remove('hidden');
else btnReset.classList.add('hidden');
}
@@ -1465,16 +1576,16 @@ function initStatusSelection() {
let validSaved = false;
if (Array.isArray(saved) && saved.length > 0) {
- saved.forEach(s => {
- if (s) selectedStatuses.add(String(s).toLowerCase().trim());
- });
- if (selectedStatuses.size > 0) {
+ const hasCompound = saved.some(s => String(s).includes('::'));
+ if (hasCompound) {
+ saved.forEach(s => {
+ if (s) selectedStatuses.add(String(s).toLowerCase().trim());
+ });
validSaved = true;
}
}
- if (!validSaved || selectedStatuses.size === 0) {
- selectedStatuses.clear();
+ if (!validSaved) {
// Standaard alle actieve statussen selecteren, gesloten uit conform gebruikerswens
(projectStatusesData || []).forEach(proj => {
const pKeyLower = (proj.key || '').toLowerCase().trim();
@@ -1509,13 +1620,15 @@ function initStatusSelection() {
}
renderStatusCheckboxes();
- updateStatusDropdownLabel();
}
// Project selectie via pill tabs
function selectProject(proj) {
currentProject = (proj || '').trim();
+ closeAllProjectStatusDropdowns();
updateProjectPills();
+ updateProjectStatusDropdownVisibility();
+ updateStatusCounts();
applyFilters();
}
@@ -1882,6 +1995,7 @@ function clearSearch() {
function resetAllFilters() {
currentProject = '';
currentQueue = '';
+ closeAllProjectStatusDropdowns();
selectAllStatuses(true);
const searchInput = document.getElementById('jiraSearchInput');
@@ -1894,7 +2008,8 @@ function resetAllFilters() {
document.getElementById('clearSearchBtn')?.classList.add('hidden');
updateProjectPills();
- updateQueuePills();
+ updateProjectStatusDropdownVisibility();
+ updateStatusCounts();
applyFilters();
}