Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 13:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(filters): changed datalists to selecting options for authors & projects filters

Browse Source
This commit is contained in:
Spythere
2025-12-15 20:41:26 +01:00
parent ac2269c5a5
commit d9986da354
2 changed files with 21 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StationsView/StationFilterCard.vue
+20 -36
View File
@@ -45,20 +45,12 @@
</section> </section>
<section class="card_input-search authors"> <section class="card_input-search authors">
<datalist id="authors" name="authors"> <select id="author" name="authors" v-model="filters['authors']">
<option v-for="(author, i) in authorsOptions" :key="i" :value="author"></option> <option value="">{{ $t('filters.authors-placeholder') }}</option>
</datalist> <option v-for="(author, i) in authorsOptions" :key="i" :value="author">
{{ author }}
<input </option>
type="text" </select>
id="author"
list="authors"
name="authors"
v-model="filters['authors']"
:placeholder="$t('filters.authors-placeholder')"
@focus="preventKeyDown = true"
@blur="preventKeyDown = false"
/>
<button class="btn--action btn--image" @click="resetAuthorsInput"> <button class="btn--action btn--image" @click="resetAuthorsInput">
<img src="/images/icon-exit.svg" alt="reset authors search" /> <img src="/images/icon-exit.svg" alt="reset authors search" />
@@ -66,20 +58,12 @@
</section> </section>
<section class="card_input-search"> <section class="card_input-search">
<datalist id="projects" name="projects"> <select type="text" id="projects" name="projects" v-model="filters['projects']">
<option v-for="(project, i) in projectsOptions" :key="i" :value="project"></option> <option value="">{{ $t('filters.projects-placeholder') }}</option>
</datalist> <option v-for="(project, i) in projectsOptions" :key="i" :value="project">
{{ project }}
<input </option>
type="text" </select>
id="projects"
list="projects"
name="projects"
v-model="filters['projects']"
:placeholder="$t('filters.projects-placeholder')"
@focus="preventKeyDown = true"
@blur="preventKeyDown = false"
/>
<button class="btn--action btn--image" @click="resetProjectsInput"> <button class="btn--action btn--image" @click="resetProjectsInput">
<img src="/images/icon-exit.svg" alt="reset projects search" /> <img src="/images/icon-exit.svg" alt="reset projects search" />
@@ -217,8 +201,6 @@ export default defineComponent({
sliderStates, sliderStates,
minimumHours: 0, minimumHours: 0,
authorSearchFilter: '',
projectSearchFilter: '',
currentRegion: { id: '', value: '' }, currentRegion: { id: '', value: '' },
@@ -289,8 +271,10 @@ export default defineComponent({
projectsOptions() { projectsOptions() {
return this.store.stationList return this.store.stationList
.reduce((acc, station) => { .reduce((acc, station) => {
if (!station.generalInfo || !station.generalInfo.project || station.generalInfo.hidden) return acc; if (!station.generalInfo || !station.generalInfo.project || station.generalInfo.hidden)
if (!acc.includes(station.generalInfo.project.trim())) acc.push(station.generalInfo.project.trim()); return acc;
if (!acc.includes(station.generalInfo.project.trim()))
acc.push(station.generalInfo.project.trim());
return acc; return acc;
}, [] as string[]) }, [] as string[])
@@ -320,11 +304,11 @@ export default defineComponent({
}, },
resetAuthorsInput() { resetAuthorsInput() {
this.filters['authors'] = this.authorSearchFilter; this.filters['authors'] = '';
}, },
resetProjectsInput() { resetProjectsInput() {
this.filters['projects'] = this.projectSearchFilter; this.filters['projects'] = '';
}, },
handleSceneriesInput() { handleSceneriesInput() {
@@ -369,7 +353,6 @@ export default defineComponent({
// Reset local model values // Reset local model values
this.minimumHours = 0; this.minimumHours = 0;
this.authorSearchFilter = '';
// Reset global filters // Reset global filters
Object.keys(this.filters).forEach((filterKey) => { Object.keys(this.filters).forEach((filterKey) => {
@@ -494,7 +477,8 @@ h3.section-header {
height: 100%; height: 100%;
} }
input { input,
select {
width: 100%; width: 100%;
padding: 0.5em; padding: 0.5em;
border: 1px solid #aaa; border: 1px solid #aaa;
src/styles/_global.scss
+1 -1
View File
@@ -89,7 +89,7 @@ select {
font-size: 1em; font-size: 1em;
} }
input { input, select {
background: none; background: none;
color: white; color: white;
font-size: 1em; font-size: 1em;