remove unavailable criterias values when updating filtered items
gitea/publik-base-theme/pipeline/head This commit looks good Details

This commit is contained in:
Corentin Sechet 2023-03-08 15:13:50 +01:00
parent 2a3f4aea47
commit 82c803d424
2 changed files with 35 additions and 10 deletions

View File

@ -180,4 +180,8 @@
&--pagination {
@extend .cell-items-pagination;
}
&--criteria-option[aria-disabled=true] {
display: none;
}
}

View File

@ -95,15 +95,6 @@ $(() => {
updatePagination(0)
const queryParams = (new URL(document.location)).searchParams;
$cell.find('select[data-criteria]').each((_, element) => {
const $element = $(element)
$element.select2()
const criteriaValues = queryParams.get(element.dataset.criteria)
if (criteriaValues !== null) {
$element.val(criteriaValues.split(','))
$element.trigger('change')
}
})
$cell.find('select[data-criteria]').on('change', evt => {
let selectedCriterias = []
@ -132,15 +123,45 @@ $(() => {
}
})
for(const select of $cell.find('select[data-criteria]')) {
const criteriaId = select.dataset.criteria
const availableValues = new Set()
for(const item of $cell.find(`.theme-activities--item.filtered[data-criteria-${criteriaId}]`)) {
const criteriaValues = item.getAttribute(`data-criteria-${criteriaId}`).split(',')
for (const value of criteriaValues) {
availableValues.add(value)
}
}
for (const option of select.options) {
option.disabled = !availableValues.has(option.value)
}
}
const filteredResults = $cell.find(`.theme-activities--item.filtered`)
$cell.find(".theme-activities--no-result").prop('hidden', filteredResults.length !== 0)
updatePagination(0)
})
$cell.find('select[data-criteria]').each((_, element) => {
const $element = $(element)
$element.select2({
templateResult: (data, container) => {
container.classList.add('theme-activities--criteria-option')
return data.text
}
})
const criteriaValues = queryParams.get(element.dataset.criteria)
if (criteriaValues !== null) {
$element.val(criteriaValues.split(','))
$element.trigger('change')
}
})
$cell.find('.theme-activities--item-label').on('click', evt => {
$(evt.target).closest('.theme-activities--item').toggleClass('collapsed')
})
})
</script>