use tabulator header filters

This commit is contained in:
Harald Bamberger
2025-02-05 18:49:46 +01:00
parent 3fff535713
commit 9d0e365516
@@ -25,55 +25,81 @@ export default {
if (!val)
return ' ';
let date = new Date(val);
return date.toLocaleDateString();
return date.toLocaleDateString('de-AT', {
"day": "2-digit",
"month": "2-digit",
"year": "numeric"
});
}
return {
tabulatorOptions: {
columns:[
{title:"UID", field:"uid"},
{title:"TitelPre", field:"titelpre"},
{title:"Nachname", field:"nachname"},
{title:"Vorname", field:"vorname"},
{title:"Wahlname", field:"wahlname", visible:false},
{title:"Vornamen", field:"vornamen", visible:false},
{title:"TitelPost", field:"titelpost"},
{title:"SVNR", field:"svnr"},
{title:"Ersatzkennzeichen", field:"ersatzkennzeichen"},
{title:"Geburtsdatum", field:"gebdatum", formatter:dateFormatter},
{title:"Geschlecht", field:"geschlecht"},
{title:"Sem.", field:"semester"},
{title:"Verb.", field:"verband"},
{title:"Grp.", field:"gruppe"},
{title:"Studiengang", field:"studiengang"},
{title:"Studiengang_kz", field:"studiengang_kz", visible:false},
{title:"Personenkennzeichen", field:"matrikelnr"},
{title:"PersonID", field:"person_id"},
{title:"Status", field:"status"},
{title:"UID", field:"uid", headerFilter: true},
{title:"TitelPre", field:"titelpre", headerFilter: "list", headerFilterParams: {valuesLookup:true, listOnEmpty:true, autocomplete:true, sort:"asc"}},
{title:"Nachname", field:"nachname", headerFilter: true},
{title:"Vorname", field:"vorname", headerFilter: true},
{title:"Wahlname", field:"wahlname", visible:false, headerFilter: true},
{title:"Vornamen", field:"vornamen", visible:false, headerFilter: true},
{title:"TitelPost", field:"titelpost", headerFilter: "list", headerFilterParams: {valuesLookup:true, listOnEmpty:true, autocomplete:true, sort:"asc"}},
{title:"SVNR", field:"svnr", headerFilter: true},
{title:"Ersatzkennzeichen", field:"ersatzkennzeichen", headerFilter: true},
{title:"Geburtsdatum", field:"gebdatum", formatter:dateFormatter,
headerFilter: true, headerFilterFunc: function(headerValue, rowValue, rowData, filterParams) {
const matches = headerValue.match(/^(([0-9]{2})\.)?([0-9]{2})\.([0-9]{4})?$/);
let comparestr = headerValue;
if(matches !== null) {
const year = (matches[4] !== undefined) ? matches[4] : '';
const month = matches[3];
const day = (matches[2] !== undefined) ? matches[2] : '';
comparestr = year + '-' + month + '-' + day;
}
return rowValue.match(comparestr);
}
},
{title:"Geschlecht", field:"geschlecht", headerFilter: "list", headerFilterParams: {values:{'m':'männlich','w':'weiblich','x':'divers','u':'unbekannt'}, listOnEmpty:true, autocomplete:true}},
{title:"Sem.", field:"semester", headerFilter: "list", headerFilterParams: {valuesLookup:true, listOnEmpty:true, autocomplete:true, sort:"asc"}},
{title:"Verb.", field:"verband", headerFilter: "list", headerFilterParams: {valuesLookup:true, listOnEmpty:true, autocomplete:true, sort:"asc"}},
{title:"Grp.", field:"gruppe", headerFilter: "list", headerFilterParams: {valuesLookup:true, listOnEmpty:true, autocomplete:true, sort:"asc"}},
{title:"Studiengang", field:"studiengang", headerFilter: "list", headerFilterParams: {valuesLookup:true, listOnEmpty:true, autocomplete:true, sort:"asc"}},
{title:"Studiengang_kz", field:"studiengang_kz", visible:false, headerFilter: true},
{title:"Personenkennzeichen", field:"matrikelnr", headerFilter: true},
{title:"PersonID", field:"person_id", headerFilter: true},
{title:"Status", field:"status", headerFilter: "list", headerFilterParams: {valuesLookup:true, listOnEmpty:true, autocomplete:true, sort:"asc"}},
{title:"Status Datum", field:"status_datum", visible:false, formatter:dateFormatter},
{title:"Status Bestaetigung", field:"status_bestaetigung", visible:false, formatter:dateFormatter},
{title:"EMail (Privat)", field:"mail_privat", visible:false},
{title:"EMail (Intern)", field:"mail_intern", visible:false},
{title:"Anmerkungen", field:"anmerkungen", visible:false},
{title:"AnmerkungPre", field:"anmerkung", visible:false},
{title:"OrgForm", field:"orgform_kurzbz"},
{title:"Status Bestaetigung", field:"status_bestaetigung", visible:false, formatter:dateFormatter, headerFilter: true},
{title:"EMail (Privat)", field:"mail_privat", visible:false, headerFilter: true},
{title:"EMail (Intern)", field:"mail_intern", visible:false, headerFilter: true},
{title:"Anmerkungen", field:"anmerkungen", visible:false, headerFilter: true},
{title:"AnmerkungPre", field:"anmerkung", visible:false, headerFilter: true},
{title:"OrgForm", field:"orgform_kurzbz", headerFilter: "list", headerFilterParams: {valuesLookup:true, listOnEmpty:true, autocomplete:true, sort:"asc"}},
{title:"Aufmerksamdurch", field:"aufmerksamdurch_kurzbz", visible:false},
{title:"Gesamtpunkte", field:"punkte", visible:false},
{title:"Aufnahmegruppe", field:"aufnahmegruppe_kurzbz", visible:false},
{title:"Dual", field:"dual", visible:false, formatter:'tickCross', formatterParams: {
tickElement: '<i class="fas fa-check text-success"></i>',
crossElement: '<i class="fas fa-times text-danger"></i>'
}},
{title:"Matrikelnummer", field:"matr_nr", visible:false},
{title:"Studienplan", field:"studienplan_bezeichnung"},
{title:"PreStudentInnenID", field:"prestudent_id"},
{title:"Dual", field:"dual", visible:false,
formatter:'tickCross', formatterParams: {
tickElement: '<i class="fas fa-check text-success"></i>',
crossElement: '<i class="fas fa-times text-danger"></i>'
},
headerFilter:"tickCross", headerFilterParams: {
"tristate":true, elementAttributes:{"value":"true"}
}, headerFilterEmptyCheck:function(value){return value === null}
},
{title:"Matrikelnummer", field:"matr_nr", visible:false, headerFilter: true},
{title:"Studienplan", field:"studienplan_bezeichnung", headerFilter: "list", headerFilterParams: {valuesLookup:true, listOnEmpty:true, autocomplete:true, sort:"asc"}},
{title:"PreStudentInnenID", field:"prestudent_id", headerFilter: true},
{title:"Priorität", field:"priorisierung_relativ"},
{title:"Mentor", field:"mentor", visible:false},
{title:"Aktiv", field:"bnaktiv", visible:false, formatter:'tickCross', formatterParams: {
allowEmpty:true,
tickElement: '<i class="fas fa-check text-success"></i>',
crossElement: '<i class="fas fa-times text-danger"></i>'
}},
{title:"Aktiv", field:"bnaktiv", visible:false,
formatter:'tickCross', formatterParams: {
allowEmpty:true,
tickElement: '<i class="fas fa-check text-success"></i>',
crossElement: '<i class="fas fa-times text-danger"></i>'
},
headerFilter:"tickCross", headerFilterParams: {
"tristate":true, elementAttributes:{"value":"true"}
}, headerFilterEmptyCheck:function(value){return value === null}
},
],
rowFormatter(row) {
if (row.getData().bnaktiv === false) {
@@ -104,6 +130,10 @@ export default {
event: 'dataLoaded',
handler: data => this.count = data.length
},
{
event: 'dataFiltered',
handler: (filters, rows) => this.filteredcount = rows.length
},
{
event: 'rowClick',
handler: this.handleRowClick // TODO(chris): this should be in the filter component
@@ -113,7 +143,8 @@ export default {
lastSelected: null,
filterKontoCount0: undefined,
filterKontoMissingCounter: undefined,
count: 0
count: 0,
filteredcount: 0
}
},
methods: {
@@ -236,7 +267,7 @@ export default {
<div class="tabulator-container d-flex flex-column h-100" :class="{'has-filter': filterKontoCount0 || filterKontoMissingCounter}" tabindex="0" @focusin="onFocus" @keydown="onKeydown">
<core-filter-cmpt
ref="table"
:description="$p.t('global/anzahl') + ': ' + (count || 0)"
:description="$p.t('global/anzahl') + ': ' + (filteredcount || 0) + ' / ' + (count || 0)"
:tabulator-options="tabulatorOptions"
:tabulator-events="tabulatorEvents"
table-only