bachir/drupal-figli-compta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Turn Compte/Type filters into hover dropdowns, add a clear button to each filter

Browse Source 
A native <select multiple> can't collapse to a single-line trigger and
open as an overlay on hover -- it's either an always-open multi-row
list box or a single-value dropdown, not both. Replaced with a custom
dropdown: a trigger showing the current selection ("Tous" / "Maud,
Ouidade"), and a checkbox list shown on hover via a plain CSS :hover
rule (no open/close state needed). Checkboxes instead of ctrl/shift+click,
but same result -- several comptes/types at once -- with a more
discoverable interaction (no keyboard modifier to know about).

Also added a "✕ Effacer ce filtre" button next to Compte/Client/Type/
Année, shown only once that filter is active. Directly addresses the
Client filter specifically being painful to clear (select the text,
delete, press enter) -- one click now.
This commit is contained in:
bachir
2026-09-05 21:55:50 +02:00
parent 319b22207d
commit bb01c2dd90
2 changed files with 108 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/modules/custom/figli_compta_ledger/templates/figli-compta-home.html.twig
+36 -14
View File
@@ -20,29 +20,51 @@
{% verbatim %}
<label>Compte
<select v-model="filterCompte" multiple size="4" title="Ctrl/Cmd+clic ou Maj+clic pour plusieurs comptes">
<option v-for="c in allComptes" :key="c" :value="c">{{ c }}</option>
</select>
<span class="figli-filter-row">
<div class="figli-multiselect">
<div class="figli-multiselect-trigger">{{ filterCompte.length ? filterCompte.join(', ') : 'Tous' }} <span class="figli-multiselect-arrow">▾</span></div>
<div class="figli-multiselect-panel">
<label v-for="c in allComptes" :key="c" class="figli-multiselect-option">
<input type="checkbox" :value="c" v-model="filterCompte" /> {{ c }}
</label>
</div>
</div>
<button v-if="filterCompte.length" type="button" class="figli-filter-clear" @click="filterCompte = []" title="Effacer ce filtre">✕</button>
</span>
</label>
<label>Client
<input type="text" v-model.lazy="filterClient" list="figli-client-datalist" placeholder="Tous" autocomplete="off" class="figli-client-input" />
<datalist id="figli-client-datalist">
<option v-for="c in allClientsList" :key="c" :value="c"></option>
</datalist>
<span class="figli-filter-row">
<input type="text" v-model.lazy="filterClient" list="figli-client-datalist" placeholder="Tous" autocomplete="off" class="figli-client-input" />
<datalist id="figli-client-datalist">
<option v-for="c in allClientsList" :key="c" :value="c"></option>
</datalist>
<button v-if="filterClient" type="button" class="figli-filter-clear" @click="filterClient = ''" title="Effacer ce filtre">✕</button>
</span>
</label>
<label>Type
<select v-model="filterType" multiple size="4" title="Ctrl/Cmd+clic ou Maj+clic pour plusieurs types">
<option v-for="t in allTypes" :key="t.value" :value="t.value">{{ t.label }}</option>
</select>
<span class="figli-filter-row">
<div class="figli-multiselect">
<div class="figli-multiselect-trigger">{{ filterType.length ? filterType.map(typeLabel).join(', ') : 'Tous' }} <span class="figli-multiselect-arrow">▾</span></div>
<div class="figli-multiselect-panel">
<label v-for="t in allTypes" :key="t.value" class="figli-multiselect-option">
<input type="checkbox" :value="t.value" v-model="filterType" /> {{ t.label }}
</label>
</div>
</div>
<button v-if="filterType.length" type="button" class="figli-filter-clear" @click="filterType = []" title="Effacer ce filtre">✕</button>
</span>
</label>
<label>Année
<select v-model="filterYear">
<option value="">Toutes</option>
<option v-for="y in allYearsList" :key="y" :value="y">{{ y }}</option>
</select>
<span class="figli-filter-row">
<select v-model="filterYear">
<option value="">Toutes</option>
<option v-for="y in allYearsList" :key="y" :value="y">{{ y }}</option>
</select>
<button v-if="filterYear" type="button" class="figli-filter-clear" @click="filterYear = ''" title="Effacer ce filtre">✕</button>
</span>
</label>
<label>Aller à