reimplement originator filter

This commit is contained in:
Vri 🌈 2023-06-29 10:29:26 +02:00
parent 6669f44642
commit 217a9d934d
Signed by: vrifox
GPG key ID: D40098E5B60B2197
4 changed files with 63 additions and 37 deletions

View file

@ -4,6 +4,7 @@ import { onUpdated, ref } from 'vue';
let searchValue = ref('')
let searchType = ref('')
function submit(type: string) { searchType = ref(type) }
onUpdated(() => updateSearch(searchValue, searchType))
</script>

View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import type { Paper, Filter } from '@/types'
import { state, updateFilter } from '@/stores';
import { computed, onUpdated } from 'vue';
import { computed, onUpdated, reactive, ref } from 'vue';
const paperTypes = [
{
@ -39,21 +39,28 @@ const paperTypes = [
key: 'WA',
},
]
const filter: Filter = {
type: {
key: '',
value: '',
},
originator: '',
}
let filterTypeKey = ref('')
let filterTypeValue = ref('')
let filterType = reactive({
key: filterTypeKey.value,
value: filterTypeValue.value,
})
let filterOriginator = ref('')
const paperOriginators = computed(() => {
return [...new Set(state.papers?.map((paper: Paper) => paper.originator))].sort()
})
/* const paperType = computed(() => {
return paperTypes.filter((type) => type.key == )
}) */
function resetFilterType() {
filterType = { key: '', value: '' }
}
function resetFilterOriginator() {
filterOriginator.value = ''
}
onUpdated(() => {
updateFilter(filter.type.key, filter.type.value, filter.originator)
updateFilter(filterTypeKey, filterTypeValue, filterOriginator)
})
</script>
@ -63,7 +70,7 @@ onUpdated(() => {
<legend>Kategorie</legend>
<select
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
v-model="filter.type"
v-model="filterType"
>
<option
v-for="(type, i) of paperTypes"
@ -74,7 +81,7 @@ onUpdated(() => {
</select>
<button
class="pl-2"
@click.prevent="filter.type = { key: '', value: ''}"
@click.prevent="resetFilterType()"
title="zurücksetzen"
>
</button>
@ -83,7 +90,7 @@ onUpdated(() => {
<legend>Einreicher</legend>
<select
class="w-40 p-2 bg-background-100 dark:bg-background-900 rounded-lg"
v-model="filter.originator">
v-model="filterOriginator">
<option
v-for="(originator, i) of paperOriginators"
:key="i"
@ -92,7 +99,7 @@ onUpdated(() => {
</select>
<button
class="pl-2"
@click.prevent="filter.originator = ''"
@click.prevent="resetFilterOriginator()"
title="zurücksetzen"
>
</button>

View file

@ -1,34 +1,52 @@
<script setup lang="ts">
import { state } from '@/stores'
import type { Topic } from '@/types';
import type { Paper, Topic } from '@/types';
import { computed, onMounted, onUpdated } from 'vue';
const filteredData = computed(() => {
const searchValue: string = state.search.value;
const searchValue: string = state.search.value
const filterTypeKey: string = state.filter.type.key
const filterTypeValue: string = state.filter.type.value
const filterOriginator: string = state.filter.originator
let filteredTopics = state.topics
if (searchValue !== '') {
filteredTopics = state.topics?.filter((topic: Topic) => {
filteredTopics = filteredTopics.filter((topic: Topic) => {
let includes = false
topic.papers?.filter((paper) => {
if (paper.name.toLowerCase().includes(searchValue.toLowerCase())
|| paper.content.toLowerCase().includes(searchValue.toLowerCase())
|| paper.reference.toLowerCase().includes(searchValue.toLowerCase())
) { includes = true}
topic.papers?.filter((paper: Paper) => {
if (
paper.name.toLowerCase().includes(searchValue.toLowerCase())
|| paper.content.toLowerCase().includes(searchValue.toLowerCase())
|| paper.reference.toLowerCase().includes(searchValue.toLowerCase())
) { includes = true }
})
return includes
})
}
/* if (this.filter?.type !== '') {
filteredTopics = filteredTopics.filter((topic: any) => {
return topic.reference.includes(this.filter?.type.key) && topic.paper_type.includes(this.filter?.type.value)
if (filterTypeKey !== '') {
filteredTopics = filteredTopics.filter((topic: Topic) => {
let includes = false
topic.papers?.filter((paper: Paper) => {
if (
paper.reference.toLowerCase().includes(filterTypeKey.toLowerCase())
&& paper.paper_type.toLowerCase().includes(filterTypeValue.toLowerCase())
) { includes = true }
})
return includes
})
} */
/* if (this.filter?.originator !== '') {
filteredTopics = filteredTopics.filter((topic: any) => {
return topic.originator.includes(this.filter?.originator)
}
if (filterOriginator !== '') {
filteredTopics = filteredTopics.filter((topic: Topic) => {
let includes = false
topic.papers?.filter((paper: Paper) => {
if (paper.originator.toLocaleLowerCase().includes(filterOriginator.toLocaleLowerCase())) { includes = true }
})
return includes
})
} */
}
return filteredTopics
})
let filteredDataLength: number = 0

View file

@ -7,14 +7,14 @@ interface State {
papers: Paper[],
topics: Topic[],
search: Search,
filter: Filter[],
filter: Filter,
}
export const state: State = reactive({
papers: [],
topics: [],
search: { value: '', type: '' },
filter: [],
filter: { type: { key: '', value: '' }, originator: '',},
})
export async function fetchPapers() {
@ -38,12 +38,12 @@ export function updateSearch(searchValue: Ref, searchType: Ref) {
}
}
export function updateFilter(typeKey: string, typeValue: string, originator: string) {
state.filter = [{
export function updateFilter(typeKey: Ref, typeValue: Ref, originator: Ref) {
state.filter = {
type: {
key: typeKey,
value: typeValue,
key: typeKey.value,
value: typeValue.value,
},
originator: originator,
}]
originator: originator.value,
}
}