feat: add credits page filters (#154)

Author: PavelKopecky

app/components/AsyncCell.vue

@@ -1,13 +1,19 @@
 <template>
-	<Skeleton v-if="loading" class="flex max-w-40 self-center"/>
+	<Skeleton v-if="loading" class="flex self-center" :class="sizeClass"/>
 	<slot v-else/>
 </template>
 
 <script setup lang="ts">
-	defineProps({
+	const props = defineProps({
 		loading: {
 			type: Boolean,
 			required: true,
 		},
+		size: {
+			type: String,
+			default: 'normal',
+		},
 	});
+
+	const sizeClass = computed(() => props.size === 'small' ? 'max-w-20' : 'max-w-40');
 </script>

app/components/CreditsChart.vue renamed to app/components/credits/CreditsChart.vue

@@ -0,0 +1,136 @@
+<template>
+	<div class="flex items-center justify-end gap-4">
+		Type:
+		<TreeSelect
+			v-model="selectedValues"
+			:options="nodes"
+			selection-mode="checkbox"
+			class="w-32 font-normal md:w-56"
+			:expanded-keys="expandedKeys"
+			:pt="{
+				pcTree: {
+					root: 'p-0',
+					nodeToggleButton: 'hidden',
+					node: 'focus:outline-none',
+				}
+			}"
+			@change="onChangeDebounced"
+			@hide="onHide"
+		>
+			<template #value="slotProps">
+				{{ renderTreeSelectValue(slotProps.value, nodes) }}
+			</template>
+			<template #option="slotProps">
+				<span :class="{'font-medium': slotProps.node.data.field === 'type'}">{{slotProps.node.label}}</span>
+			</template>
+		</TreeSelect>
+	</div>
+</template>
+
+<script setup>
+	import debounce from 'lodash/debounce';
+	import isEqual from 'lodash/isEqual';
+	import { FIELD_LABELS, TYPE_REASONS, useCreditsFilters } from '~/composables/useCreditsFilters';
+	import { buildNodesByKey, renderTreeSelectValue } from '~/utils/tree-select.ts';
+
+	const { filter, onParamChange, key: creditsFilterKey } = useCreditsFilters();
+
+	// TREE SELECT STRUCTURE DEFINITIONS
+
+	// e.g., 0-0 -> { field: 'reason', value: 'adopted-probes' }
+	const keyValueMap = Object.entries(TYPE_REASONS).reduce((map, [ key, reasons ], index) => {
+		map[index] = { field: 'type', value: key };
+
+		reasons.forEach((reason, reasonIndex) => {
+			map[`${index}-${reasonIndex}`] = { field: 'reason', value: reason };
+		});
+
+		return map;
+	}, {});
+
+	const getNodeLabelForKey = (key) => {
+		const { field, value } = keyValueMap[key];
+		return FIELD_LABELS[field][value];
+	};
+
+	const nodes = ref(buildNodesByKey(keyValueMap, getNodeLabelForKey));
+
+	// expand all nodes that have children
+	const expandedKeys = computed(() => nodes.value.reduce((expanded, node) => {
+		if (node.children?.length) {
+			expanded[node.key] = true;
+		}
+
+		return expanded;
+	}, {}));
+
+	const selectedValues = ref({});
+	const selectedCount = computed(() => Object.values(selectedValues.value).filter(value => value.checked).length);
+
+	// FILTER APPLICATION
+
+	const applyFilter = () => {
+		// apply selected values from the filter
+		const buildSelection = (node, filter, selectedValues) => {
+			if (node.children?.length) {
+				node.children.forEach((child) => {
+					buildSelection(child, filter, selectedValues);
+				});
+
+				const checkedChildren = node.children.filter(child => selectedValues[child.key].checked);
+
+				selectedValues[node.key] = {
+					checked: checkedChildren.length === node.children.length,
+					partialChecked: checkedChildren.length !== node.children.length && checkedChildren.length > 0,
+				};
+			} else {
+				selectedValues[node.key] = {
+					checked: filter[node.data.field].includes(node.data.value),
+				};
+			}
+
+			return selectedValues;
+		};
+
+		selectedValues.value = nodes.value.reduce((selected, node) => buildSelection(node, filter.value, selected), {});
+	};
+
+	watch(creditsFilterKey, applyFilter, { immediate: true });
+
+	// HANDLERS
+
+	const onChange = () => {
+		if (selectedCount.value === 0) {
+			return;
+		}
+
+		const suggestedFilter = Object.entries(selectedValues.value).reduce((selected, [ key, { checked, partialChecked }]) => {
+			if (checked || partialChecked) {
+				const { field, value } = keyValueMap[key];
+				selected[field].push(value);
+			}
+
+			return selected;
+		}, {
+			type: [],
+			reason: [],
+		});
+
+		// do not reset page (via onParamChange) if there is no filter change
+		if (!isEqual(suggestedFilter, filter.value)) {
+			filter.value = suggestedFilter;
+			onParamChange();
+		}
+	};
+
+	const onChangeDebounced = debounce(onChange, 350);
+
+	const onHide = () => {
+		onChangeDebounced.flush();
+		applyFilter();
+	};
+
+	onBeforeUnmount(() => {
+		onChangeDebounced.cancel();
+	});
+</script>

app/components/credits/CreditsFilters.vue

@@ -0,0 +1,108 @@
+import cloneDeep from 'lodash/cloneDeep';
+import isEqual from 'lodash/isEqual';
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+type CreditsChangeType = 'additions' | 'deductions';
+type CreditsChangeReason = 'adopted-probes' | 'sponsorship';
+
+type Filter = {
+	type: CreditsChangeType[];
+	reason: CreditsChangeReason[];
+};
+
+const PERMITTED_VALUES = {
+	type: [ 'additions', 'deductions' ],
+	reason: [ 'adopted-probes', 'sponsorship' ],
+};
+
+const DEFAULT_FILTER = cloneDeep(PERMITTED_VALUES) as Filter;
+
+export const FIELD_LABELS = {
+	type: {
+		additions: 'Additions',
+		deductions: 'Deductions',
+	},
+	reason: {
+		'adopted-probes': 'Adopted probes',
+		'sponsorship': 'Sponsorship',
+	},
+};
+
+export const TYPE_REASONS = {
+	additions: [ 'adopted-probes', 'sponsorship' ],
+	deductions: [],
+};
+
+export const useCreditsFilters = () => {
+	const route = useRoute();
+	const active = ref(true);
+	const filter = ref<Filter>(cloneDeep(DEFAULT_FILTER));
+	const key = computed(() => JSON.stringify(filter.value));
+	const anyFilterApplied = computed(() => (Object.keys(DEFAULT_FILTER) as Array<keyof Filter>).some(key => !isDefault(key)));
+
+	const constructQuery = () => ({
+		...!isDefault('type') && filter.value.type.length && { type: filter.value.type },
+		...!isDefault('reason') && filter.value.reason.length && { reason: filter.value.reason },
+	});
+
+	const onParamChange = () => {
+		navigateTo({
+			query: constructQuery(),
+		});
+	};
+
+	const isDefault = (field: keyof Filter, filterObj: MaybeRefOrGetter<Filter> = filter) => {
+		return isEqual(toValue(filterObj)[field], DEFAULT_FILTER[field]);
+	};
+
+	const getCurrentFilter = () => {
+		const { type, reason } = filter.value;
+		const allReasons = new Set(PERMITTED_VALUES.reason);
+		const filterReasons = new Set(reason);
+
+		return {
+			type,
+			reason: isEqual(filterReasons, allReasons) ? [ ...reason, 'other' ] : reason,
+		};
+	};
+
+	watch([ () => route.query.type, () => route.query.reason ], async ([ type, reason ]) => {
+		if (!toValue(active)) {
+			return;
+		}
+
+		const reasonArray = Array.isArray(reason) ? reason : [ reason ];
+		const typeArray = Array.isArray(type) ? type : [ type ];
+
+		if (type && typeArray.every(type => PERMITTED_VALUES.type.includes(type!))) {
+			filter.value.type = typeArray as CreditsChangeType[];
+		} else {
+			filter.value.type = DEFAULT_FILTER.type;
+		}
+
+		if (reason && filter.value.type.includes('additions') && reasonArray.every(reason => PERMITTED_VALUES.reason.includes(reason!))) {
+			filter.value.reason = reasonArray as CreditsChangeReason[];
+		} else {
+			filter.value.reason = filter.value.type.includes('additions') ? DEFAULT_FILTER.reason : [];
+		}
+	}, { immediate: true });
+
+	onBeforeRouteLeave(() => {
+		active.value = false;
+	});
+
+	return {
+		// state
+		anyFilterApplied,
+		filter,
+		key,
+		// handlers
+		onParamChange,
+		// builders
+		constructQuery,
+		getCurrentFilter,
+		// helpers
+		isDefault,
+	};
+};