feat(webui): filter collections/readlists in Add To dialog

closes #378
This commit is contained in:
Gauthier Roebroeck 2021-01-06 17:12:56 +08:00
parent da072945e7
commit 1b422a2086
2 changed files with 30 additions and 8 deletions

View file

@ -19,7 +19,7 @@
<v-col>
<v-text-field
v-model="newCollection"
label="Create new collection"
label="Search or create collection"
@keydown.enter="create"
:error-messages="duplicate"
/>
@ -38,8 +38,8 @@
<v-row v-if="collections.length !== 0">
<v-col>
<v-list elevation="5">
<div v-for="(c, index) in collections"
<v-list elevation="5" v-if="collectionsFiltered.length !== 0">
<div v-for="(c, index) in collectionsFiltered"
:key="index"
>
<v-list-item @click="addTo(c)"
@ -50,9 +50,17 @@
<v-list-item-subtitle>{{ c.seriesIds.length }} series</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider v-if="index !== collections.length-1"/>
<v-divider v-if="index !== collectionsFiltered.length-1"/>
</div>
</v-list>
<v-alert
v-else
type="info"
text
>
No matching collection
</v-alert>
</v-col>
</v-row>
@ -125,6 +133,9 @@ export default Vue.extend({
return 'A collection with this name already exists'
} else return ''
},
collectionsFiltered (): CollectionDto[] {
return this.collections.filter((x: CollectionDto) => x.name.toLowerCase().includes(this.newCollection.toLowerCase()))
},
},
methods: {
dialogClose () {

View file

@ -19,7 +19,7 @@
<v-col>
<v-text-field
v-model="newReadList"
label="Create new read list"
label="Search or create read list"
@keydown.enter="create"
:error-messages="duplicate"
/>
@ -38,8 +38,8 @@
<v-row v-if="readLists.length !== 0">
<v-col>
<v-list elevation="5">
<div v-for="(c, index) in readLists"
<v-list elevation="5" v-if="readListsFiltered.length !== 0">
<div v-for="(c, index) in readListsFiltered"
:key="index"
>
<v-list-item @click="addTo(c)"
@ -50,9 +50,17 @@
<v-list-item-subtitle>{{ c.bookIds.length }} books</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider v-if="index !== readLists.length-1"/>
<v-divider v-if="index !== readListsFiltered.length-1"/>
</div>
</v-list>
<v-alert
v-else
type="info"
text
>
No matching readlist
</v-alert>
</v-col>
</v-row>
@ -126,6 +134,9 @@ export default Vue.extend({
return 'A read list with this name already exists'
} else return ''
},
readListsFiltered (): ReadListDto[] {
return this.readLists.filter((x: ReadListDto) => x.name.toLowerCase().includes(this.newReadList.toLowerCase()))
},
},
methods: {
dialogClose () {