98 lines
2.4 KiB
Vue
98 lines
2.4 KiB
Vue
<style scoped>
|
|
.filters-section {
|
|
font-size: 0.875rem;
|
|
}
|
|
</style>
|
|
<template>
|
|
<div class="card shadow-sm h-100 reports-list">
|
|
<div class="card-header bg-light pane-header">
|
|
<div class="filters-section">
|
|
<slot
|
|
:active-filters="activeFilters"
|
|
:apply-filter="applyFilter"
|
|
:clear-filters="clearFilters"
|
|
name="filters"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="card-body scroll-pane">
|
|
<div class="list-group list-group-flush">
|
|
<div class="loading list-group-item" v-if="loading || items == null">
|
|
Loading...
|
|
</div>
|
|
<div class="list-group-item" v-else-if="items.length == 0">
|
|
No items
|
|
</div>
|
|
<div
|
|
v-else-if="items.length == 0"
|
|
class="list-group-item text-center text-muted p-4"
|
|
>
|
|
<i class="bi bi-inbox fs-1"></i>
|
|
<p class="mt-2">No items match the current filters</p>
|
|
<button class="btn btn-sm btn-outline-primary" @click="clearFilters">
|
|
Reset Filters
|
|
</button>
|
|
</div>
|
|
<div v-else v-for="item in filteredItems" :key="item.id">
|
|
<slot name="item" :item="item" :index="item.id"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup generic="T extends Record<string, any>" lang="ts">
|
|
import { ref, computed } from "vue";
|
|
|
|
interface Props {
|
|
items: T[];
|
|
loading?: boolean;
|
|
itemKey?: keyof T | ((item: T) => string | number);
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
loading: false,
|
|
itemKey: "id",
|
|
});
|
|
|
|
defineSlots<{
|
|
filters(props: {
|
|
applyFilter: (filterFn: (item: T) => boolean) => void;
|
|
clearFilters: () => void;
|
|
activeFilters: number;
|
|
}): any;
|
|
item(props: { item: T; index: number }): any;
|
|
footer(props: { total: number }): any;
|
|
}>();
|
|
|
|
// State
|
|
const filterFunctions = ref<Array<(item: T) => boolean>>([]);
|
|
|
|
// Computed
|
|
const filteredItems = computed(() => {
|
|
if (filterFunctions.value.length === 0) {
|
|
return props.items;
|
|
}
|
|
|
|
return props.items.filter((item) =>
|
|
filterFunctions.value.every((fn) => fn(item)),
|
|
);
|
|
});
|
|
const activeFilters = computed(() => filterFunctions.value.length);
|
|
|
|
// Methods
|
|
const applyFilter = (filterFn: (item: T) => boolean) => {
|
|
// Add or replace filter (you can modify this logic as needed)
|
|
filterFunctions.value.push(filterFn);
|
|
};
|
|
|
|
const clearFilters = () => {
|
|
filterFunctions.value = [];
|
|
};
|
|
|
|
const getItemKey = (item: T): string | number => {
|
|
if (typeof props.itemKey === "function") {
|
|
return props.itemKey(item);
|
|
}
|
|
return item[props.itemKey] as string | number;
|
|
};
|
|
</script>
|