feat(webui): display and filter series aggregated book tags

closes #513
This commit is contained in:
Gauthier Roebroeck 2021-07-30 15:00:08 +08:00
parent 0c9a063cc3
commit bb1eb36dae
6 changed files with 24 additions and 8 deletions

View file

@ -33,6 +33,7 @@ export default new Vuetify({
secondary: '#fec000',
accent: '#ff0335',
'contrast-1': colors.grey.lighten4,
'contrast-light-2': colors.grey.darken2,
},
dark: {
base: colors.shades.black,
@ -40,6 +41,7 @@ export default new Vuetify({
secondary: '#fec000',
accent: '#ff0335',
'contrast-1': colors.grey.darken4,
'contrast-light-2': colors.grey.lighten2,
},
},
},

View file

@ -83,18 +83,18 @@ export default class KomgaReferentialService {
}
}
async getSeriesTags(libraryId?: string, collectionId?: string): Promise<string[]> {
async getSeriesAndBookTags(libraryId?: string, collectionId?: string): Promise<string[]> {
try {
const params = {} as any
if (libraryId) params.library_id = libraryId
if (collectionId) params.collection_id = collectionId
return (await this.http.get('/api/v1/tags/series', {
return (await this.http.get('/api/v1/tags', {
params: params,
paramsSerializer: params => qs.stringify(params, {indices: false}),
})).data
} catch (e) {
let msg = 'An error occurred while trying to retrieve series tags'
let msg = 'An error occurred while trying to retrieve series and book tags'
if (e.response.data.message) {
msg += `: ${e.response.data.message}`
}

View file

@ -46,6 +46,7 @@ export interface SeriesBooksMetadataDto {
created: string,
lastModified: string
authors: AuthorDto[],
tags: string[],
releaseDate: string,
summary: string,
summaryNumber: string,

View file

@ -288,7 +288,7 @@ export default Vue.extend({
const [genres, tags, publishers, languages, ageRatings, releaseDates] = await Promise.all([
this.$komgaReferential.getGenres(undefined, collectionId),
this.$komgaReferential.getSeriesTags(undefined, collectionId),
this.$komgaReferential.getSeriesAndBookTags(undefined, collectionId),
this.$komgaReferential.getPublishers(undefined, collectionId),
this.$komgaReferential.getLanguages(undefined, collectionId),
this.$komgaReferential.getAgeRatings(undefined, collectionId),

View file

@ -361,7 +361,7 @@ export default Vue.extend({
// load dynamic filters
const [genres, tags, publishers, languages, ageRatings, releaseDates] = await Promise.all([
this.$komgaReferential.getGenres(requestLibraryId),
this.$komgaReferential.getSeriesTags(requestLibraryId),
this.$komgaReferential.getSeriesAndBookTags(requestLibraryId),
this.$komgaReferential.getPublishers(requestLibraryId),
this.$komgaReferential.getLanguages(requestLibraryId),
this.$komgaReferential.getAgeRatings(requestLibraryId),

View file

@ -279,7 +279,8 @@
</v-row>
<!-- Tags -->
<v-row v-if="series.metadata.tags.length > 0" class="align-center text-caption">
<v-row v-if="series.metadata.tags.length > 0 || series.booksMetadata.tags.length > 0"
class="align-center text-caption">
<v-col cols="4" sm="3" md="2" xl="1" class="py-1 text-uppercase">{{ $t('common.tags') }}</v-col>
<v-col cols="8" sm="9" md="10" xl="11" class="py-1 text-capitalize">
<vue-horizontal>
@ -294,8 +295,8 @@
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</template>
<v-chip v-for="(t, i) in series.metadata.tags"
:key="i"
<v-chip v-for="(t, i) in $_.sortBy(series.metadata.tags)"
:key="`series_${i}`"
:class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
:title="t"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {tag: [t]}}"
@ -305,6 +306,18 @@
link
>{{ t }}
</v-chip>
<v-chip v-for="(t, i) in $_(series.booksMetadata.tags).difference(series.metadata.tags).sortBy()"
:key="`book_${i}`"
:class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
:title="t"
:to="{name:'browse-libraries', params: {libraryId: series.libraryId }, query: {tag: [t]}}"
label
small
outlined
link
color="contrast-light-2"
>{{ t }}
</v-chip>
</vue-horizontal>
</v-col>
</v-row>