Add filters to modeltable

backend/app_tests/api/test_api_compliance_assessments.py

@@ -120,6 +120,10 @@ def test_get_compliance_assessments(self, test):
                 "project": {
                     "id": str(project.id),
                     "str": project.folder.name + "/" + project.name,
+                    "folder": {
+                        "id": str(project.folder.id),
+                        "str": project.folder.name,
+                    },
                 },
                 "framework": {
                     "id": str(Framework.objects.all()[0].id),
@@ -154,6 +158,10 @@ def test_create_compliance_assessments(self, test):
                 "project": {
                     "id": str(project.id),
                     "str": project.folder.name + "/" + project.name,
+                    "folder": {
+                        "id": str(project.folder.id),
+                        "str": project.folder.name,
+                    },
                 },
                 "framework": {
                     "id": str(Framework.objects.all()[0].id),
@@ -200,6 +208,10 @@ def test_update_compliance_assessments(self, test):
                 "project": {
                     "id": str(project.id),
                     "str": project.folder.name + "/" + project.name,
+                    "folder": {
+                        "id": str(project.folder.id),
+                        "str": project.folder.name,
+                    },
                 },
                 "framework": {
                     "id": str(Framework.objects.all()[0].id),

backend/app_tests/api/test_api_risk_acceptances.py

@@ -117,7 +117,12 @@ def test_get_risk_acceptances(self, test):
             },
             {
                 "folder": {"id": str(test.folder.id), "str": test.folder.name},
-                "approver": {"id": str(approver.id), "str": approver.email},
+                "approver": {
+                    "id": str(approver.id),
+                    "str": approver.email,
+                    "last_name": approver.last_name,
+                    "first_name": approver.first_name,
+                },
                 "state": RISK_ACCEPTANCE_STATE[1],
             },
             user_group=test.user_group,
@@ -157,7 +162,12 @@ def test_create_risk_acceptances(self, test):
             },
             {
                 "folder": {"id": str(test.folder.id), "str": test.folder.name},
-                "approver": {"id": str(approver.id), "str": approver.email},
+                "approver": {
+                    "id": str(approver.id),
+                    "str": approver.email,
+                    "last_name": approver.last_name,
+                    "first_name": approver.first_name,
+                },
                 "risk_scenarios": [
                     {"id": str(risk_scenario.id), "str": str(risk_scenario)}
                 ],
@@ -208,7 +218,12 @@ def test_update_risk_acceptances(self, test):
             },
             {
                 "folder": {"id": str(test.folder.id), "str": test.folder.name},
-                "approver": {"id": str(approver.id), "str": approver.email},
+                "approver": {
+                    "id": str(approver.id),
+                    "str": approver.email,
+                    "last_name": approver.last_name,
+                    "first_name": approver.first_name,
+                },
                 # 'state': RISK_ACCEPTANCE_STATE[1],
             },
             user_group=test.user_group,

backend/app_tests/api/test_api_risk_assessments.py

@@ -123,6 +123,10 @@ def test_get_risk_assessments(self, test):
                 "project": {
                     "id": str(project.id),
                     "str": project.folder.name + "/" + project.name,
+                    "folder": {
+                        "id": str(project.folder.id),
+                        "str": project.folder.name,
+                    },
                 },
                 "risk_matrix": {"id": str(risk_matrix.id), "str": str(risk_matrix)},
             },
@@ -152,6 +156,10 @@ def test_create_risk_assessments(self, test):
                 "project": {
                     "id": str(project.id),
                     "str": project.folder.name + "/" + project.name,
+                    "folder": {
+                        "id": str(project.folder.id),
+                        "str": project.folder.name,
+                    },
                 },
                 "risk_matrix": {"id": str(risk_matrix.id), "str": str(risk_matrix)},
             },
@@ -193,6 +201,10 @@ def test_update_risk_assessments(self, test):
                 "project": {
                     "id": str(project.id),
                     "str": project.folder.name + "/" + project.name,
+                    "folder": {
+                        "id": str(project.folder.id),
+                        "str": project.folder.name,
+                    },
                 },
                 "risk_matrix": {"id": str(risk_matrix.id), "str": str(risk_matrix)},
             },

backend/core/serializers.py

@@ -99,9 +99,8 @@ class Meta:
 
 class RiskAcceptanceReadSerializer(BaseModelSerializer):
     folder = FieldsRelatedField()
-    approver = FieldsRelatedField()
     risk_scenarios = FieldsRelatedField(many=True)
-
+    approver = FieldsRelatedField(["id", "first_name", "last_name"])
     state = serializers.CharField(source="get_state_display")
 
     class Meta:
@@ -131,6 +130,7 @@ class Meta:
 
 
 class RiskAssessmentReadSerializer(AssessmentReadSerializer):
+    project = FieldsRelatedField(["id", "folder"])
     risk_scenarios = FieldsRelatedField(many=True)
     risk_scenarios_count = serializers.IntegerField(source="risk_scenarios.count")
     risk_matrix = FieldsRelatedField()
@@ -467,6 +467,7 @@ class Meta:
 
 
 class ComplianceAssessmentReadSerializer(AssessmentReadSerializer):
+    project = FieldsRelatedField(["id", "folder"])
     framework = FieldsRelatedField(
         ["id", "min_score", "max_score", "implementation_groups_definition"]
     )

frontend/src/lib/components/Filters/CheckboxFilter.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	export let options: any[];
+	export let value: boolean = false;
+	export let title: string = 'Filter: ';
+</script>
+
+<div>
+	<span style="margin-right: 0.25rem;">{title}</span>
+	<!-- Styling must be done with tailwind -->
+	<input class="checkbox" bind:checked={value} type="checkbox" />
+</div>

frontend/src/lib/components/Filters/SelectFilter.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	export let options: any[];
+	export let value: string | undefined;
+	export let defaultOptionName: string = '--';
+	export let optionLabels: { [key: string]: string } = {};
+</script>
+
+{#if options.length > 0}
+	<!-- I should use class="m-0" instead of style="margin: 0;" but i didn't figure out to make tailwind add this class yet -->
+	<select
+		class="input bg-surface-50 max-w-2xl"
+		placeholder=""
+		bind:value
+		{...$$restProps}
+		style="margin: 0;"
+	>
+		<option value={null} selected>{defaultOptionName}</option>
+		{#each options as option}
+			{#if option}
+				{@const label = optionLabels[option] ?? option}
+				<option value={option}>
+					{label}
+				</option>
+			{/if}
+		{/each}
+	</select>
+{/if}

frontend/src/lib/components/ModelTable/ModelTable.svelte

@@ -88,13 +88,15 @@
 	export let deleteForm: SuperValidated<AnyZodObject> | undefined = undefined;
 	export let URLModel: urlModel | undefined = undefined;
 	export let detailQueryParameter: string | undefined;
+	export let fromListView: boolean = false;
 	detailQueryParameter = detailQueryParameter ? `?${detailQueryParameter}` : '';
 
 	const user = $page.data.user;
 
 	$: canCreateObject = Object.hasOwn(user.permissions, `add_${model?.name}`);
 
 	import { URL_MODEL_MAP } from '$lib/utils/crud';
+	import { listViewFields } from '$lib/utils/table';
 
 	// Reactive
 	$: classesBase = `${$$props.class || 'bg-white'}`;
@@ -117,6 +119,46 @@
 	const handler = new DataHandler(data, {
 		rowsPerPage: pagination ? numberRowsPerPage : undefined
 	});
+	$: hasRows = data.length > 0;
+	const allRows = handler.getAllRows();
+	const tableURLModel = source.meta?.urlmodel ?? URLModel;
+	const filters = fromListView ? listViewFields[tableURLModel].filters ?? {} : {};
+	const filteredFields = Object.keys(filters);
+	const filterValues: { [key: string]: any } = {};
+	const filterProps: {
+		[key: string]: { [key: string]: any };
+	} = {};
+	let displayFilters = false;
+
+	function defaultFilterProps(rows, field: string) {
+		const getColumn = filters[field].getColumn ?? ((row) => row[field]);
+		const options = [...new Set(rows.map(getColumn))].sort();
+		return { options };
+	}
+
+	function defaultFilterFunction(columnValue: any, value: any): boolean {
+		return value ? columnValue === value : true;
+	}
+
+	$: {
+		for (const field of filteredFields) {
+			handler.filter(
+				filterValues[field],
+				filters[field].getColumn ?? field,
+				filters[field].filter ?? defaultFilterFunction
+			);
+		}
+	}
+
+	let allowOptionsUpdate = true;
+	allRows.subscribe((rows) => {
+		if (!allowOptionsUpdate) return;
+		for (const key of filteredFields) {
+			filterProps[key] = (filters[key].filterProps ?? defaultFilterProps)(rows, key);
+		}
+		if (rows.length > 0) allowOptionsUpdate = false;
+	});
+
 	const rows = handler.getRows();
 
 	onMount(() => {
@@ -139,10 +181,41 @@
 	const preventDelete = (row: TableSource) =>
 		(row.meta.builtin && actionsURLModel !== 'loaded-libraries') ||
 		(Object.hasOwn(row.meta, 'reference_count') && row.meta.reference_count > 0);
+
+	import { popup } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+
+	const popupFilter: PopupSettings = {
+		event: 'click',
+		target: 'popupFilter',
+		placement: 'bottom-start'
+	};
 </script>
 
 <div class="table-container {classesBase}">
 	<header class="flex justify-between items-center space-x-8 p-2">
+		{#if filteredFields.length > 0 && hasRows}
+			<button use:popup={popupFilter} class="btn variant-filled-primary self-end">
+				<i class="fa-solid fa-filter mr-2" /> Filters
+			</button>
+			<div
+				class="card whitespace-nowrap bg-white py-2 w-fit shadow-lg space-y-1 border border-slate-200"
+				data-popup="popupFilter"
+			>
+				<div class="flex flex-row items-center justify-center space-x-4 p-2">
+					{#each filteredFields as field}
+						<div>
+							<svelte:component
+								this={filters[field].component}
+								bind:value={filterValues[field]}
+								{...filterProps[field]}
+								{...filters[field].extraProps}
+							/>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
 		{#if search}
 			<Search {handler} />
 		{/if}