Konto filters for Student list

public/css/Studentenverwaltung.css

@@ -104,3 +104,7 @@ html {
 	background-color: #f8d7da!important;
 	border-color: #f5c2c7!important;
 }
+
+.has-filter .fa-filter {
+	color: var(--bs-success);
+}

public/js/components/Stv/Studentenverwaltung/List.js

@@ -7,6 +7,9 @@ export default {
 		CoreFilterCmpt,
 		ListNew
 	},
+	inject: [
+		'lists'
+	],
 	props: {
 		selected: Array,
 		studiengangKz: Number,
@@ -79,7 +82,9 @@ export default {
 				}
 			],
 			focusObj: null, // TODO(chris): this should be in the filter component
-			lastSelected: null
+			lastSelected: null,
+			filterKontoCount0: undefined,
+			filterKontoMissingCounter: undefined
 		}
 	},
 	methods: {
@@ -110,17 +115,29 @@ export default {
 		},
 		updateUrl(url, first) {
 			this.lastSelected = first ? undefined : this.selected;
+
 			if (url)
 				url = CoreRESTClient._generateRouterURI(url);
+
+			const params = {}, filter = {};
+			if (this.filterKontoCount0)
+				filter.konto_count_0 = this.filterKontoCount0;
+			if (this.filterKontoMissingCounter)
+				filter.konto_missing_counter = this.filterKontoMissingCounter;
+
+			if (filter.konto_count_0 || filter.konto_missing_counter)
+				params.filter = filter;
+
 			if (!this.$refs.table.tableBuilt) {
 				if (!this.$refs.table.tabulator) {
 					this.tabulatorOptions.ajaxURL = url;
+					this.tabulatorOptions.ajaxParams = params;
 				} else
 					this.$refs.table.tabulator.on("tableBuilt", () => {
-						this.$refs.table.tabulator.setData(url);
+						this.$refs.table.tabulator.setData(url, params);
 					});
 			} else
-				this.$refs.table.tabulator.setData(url);
+				this.$refs.table.tabulator.setData(url, params);
 		},
 		onKeydown(e) { // TODO(chris): this should be in the filter component
 			if (!this.focusObj)
@@ -179,7 +196,7 @@ export default {
 	// TODO(chris): filter component column chooser has no accessibilty features
 	template: `
 	<div class="stv-list h-100 pt-3">
-		<div class="tablulator-container d-flex flex-column h-100" tabindex="0" @focusin="onFocus" @focusout="onBlur" @keydown="onKeydown">
+		<div class="tablulator-container d-flex flex-column h-100" :class="{'has-filter': filterKontoCount0 || filterKontoMissingCounter}" tabindex="0" @focusin="onFocus" @focusout="onBlur" @keydown="onKeydown">
 			<core-filter-cmpt
 				ref="table"
 				:tabulator-options="tabulatorOptions"
@@ -191,6 +208,35 @@ export default {
 				new-btn-label="InteressentIn"
 				@click:new="actionNewPrestudent"
 			>
+			<template #filter>
+				<div class="card">
+					<div class="card-body">
+						<div class="input-group mb-3">
+							<label class="input-group-text col-4" for="stv-list-filter-konto-count-0">Liste filtern auf nicht belastet:</label>
+							<select class="form-select" id="stv-list-filter-konto-count-0" v-model="filterKontoCount0" @input="$nextTick(updateUrl)">
+								<option v-for="typ in lists.buchungstypen" :key="typ.buchungstyp_kurzbz" :value="typ.buchungstyp_kurzbz">
+									{{ typ.beschreibung }}
+								</option>
+							</select>
+							<button v-if="filterKontoCount0" class="btn btn-outline-secondary" @click="filterKontoCount0 = undefined; updateUrl()">
+								<i class="fa fa-times"></i>
+							</button>
+						</div>
+						<div class="input-group">
+							<label class="input-group-text col-4" for="stv-list-filter-konto-missing-counter">Liste filtern auf fehlende Gegenbuchungen:</label>
+							<select class="form-select" id="stv-list-filter-konto-missing-counter" v-model="filterKontoMissingCounter" @input="$nextTick(updateUrl)">
+								<option value="alle">alle Buchungstypen</option>
+								<option v-for="typ in lists.buchungstypen" :key="typ.buchungstyp_kurzbz" :value="typ.buchungstyp_kurzbz">
+									{{ typ.beschreibung }}
+								</option>
+							</select>
+							<button v-if="filterKontoMissingCounter" class="btn btn-outline-secondary" @click="filterKontoMissingCounter = undefined; updateUrl()">
+								<i class="fa fa-times"></i>
+							</button>
+						</div>
+					</div>
+				</div>
+			</template>
 			</core-filter-cmpt>
 		</div>
 		<list-new ref="new" :studiengang-kz="studiengangKz" :studiensemester-kurzbz="studiensemesterKurzbz"></list-new>

public/js/components/filter/Filter.js

@@ -543,7 +543,7 @@ export const CoreFilterCmpt = {
 				</div>
 				<div class="d-flex gap-1 align-items-baseline flex-grow-1 justify-content-end">
 					<span v-if="!tableOnly">[ {{ filterName }} ]</span>
-					<a v-if="!tableOnly" href="#" class="btn btn-link px-0 text-dark" data-bs-toggle="collapse" :data-bs-target="'#collapseFilters' + idExtra">
+					<a v-if="!tableOnly || $slots.filter" href="#" class="btn btn-link px-0 text-dark" data-bs-toggle="collapse" :data-bs-target="'#collapseFilters' + idExtra">
 						<span class="fa-solid fa-xl fa-filter"></span>
 					</a>
 					<a href="#" class="btn btn-link px-0 text-dark" data-bs-toggle="collapse" :data-bs-target="'#collapseColumns' + idExtra">
@@ -576,6 +576,14 @@ export const CoreFilterCmpt = {
 				@apply-filter-config="applyFilterConfig"
 				@save-custom-filter="handlerSaveCustomFilter"
 			></filter-config>
+			<div
+				v-else-if="$slots.filter"
+				:id="'collapseFilters' + idExtra"
+				class="card-body collapse"
+				:data-bs-parent="'#filterCollapsables' + idExtra"
+				>
+				<slot name="filter"></slot>
+			</div>
 		</div>
 
 		<!-- Tabulator -->