reimplement originator filter
This commit is contained in:
parent
6669f44642
commit
217a9d934d
4 changed files with 63 additions and 37 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue