feat(webui): update series sharing labels

komga-webui/src/components/dialogs/EditSeriesDialog.vue

@@ -35,6 +35,10 @@
             <v-icon left class="hidden-xs-only">mdi-image</v-icon>
             {{ $t('dialog.edit_series.tab_poster') }}
           </v-tab>
+          <v-tab class="justify-start">
+            <v-icon left class="hidden-xs-only">mdi-account-multiple</v-icon>
+            {{ $t('dialog.edit_series.tab_sharing') }}
+          </v-tab>
 
           <!--  Tab: General  -->
           <v-tab-item>
@@ -347,6 +351,46 @@
               </v-container>
             </v-card>
           </v-tab-item>
+
+          <!--  Tab: Sharing  -->
+          <v-tab-item>
+            <v-card flat>
+              <v-container fluid>
+                <v-alert v-if="!single"
+                         type="warning"
+                         outlined
+                         dense
+                >{{ $t('dialog.edit_series.tags_notice_multiple_edit') }}
+                </v-alert>
+
+                <!-- Sharing Labels -->
+                <v-row>
+                  <v-col cols="12">
+                    <span class="text-body-2">{{ $t('dialog.edit_series.field_labels') }}</span>
+                    <v-combobox v-model="form.sharingLabels"
+                                :items="sharingLabelsAvailable"
+                                @input="$v.form.sharingLabels.$touch()"
+                                @change="form.sharingLabelsLock = true"
+                                hide-selected
+                                chips
+                                deletable-chips
+                                multiple
+                                filled
+                                dense
+                    >
+                      <template v-slot:prepend>
+                        <v-icon :color="form.sharingLabelsLock ? 'secondary' : ''"
+                                @click="form.sharingLabelsLock = !form.sharingLabelsLock"
+                        >
+                          {{ form.sharingLabelsLock ? 'mdi-lock' : 'mdi-lock-open' }}
+                        </v-icon>
+                      </template>
+                    </v-combobox>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card>
+          </v-tab-item>
         </v-tabs>
 
         <v-card-actions class="hidden-xs-only">
@@ -403,6 +447,8 @@ export default Vue.extend({
         tagsLock: false,
         totalBookCount: undefined as number | undefined,
         totalBookCountLock: false,
+        sharingLabels: [],
+        sharingLabelsLock: false,
       },
       mixed: {
         status: false,
@@ -419,6 +465,7 @@ export default Vue.extend({
       },
       genresAvailable: [] as string[],
       tagsAvailable: [] as string[],
+      sharingLabelsAvailable: [] as string[],
     }
   },
   props: {
@@ -437,6 +484,7 @@ export default Vue.extend({
         this.getThumbnails(this.series)
         this.loadAvailableTags()
         this.loadAvailableGenres()
+        this.loadAvailableSharingLabels()
       } else {
         this.dialogCancel()
       }
@@ -469,6 +517,7 @@ export default Vue.extend({
       },
       genres: {},
       tags: {},
+      sharingLabels: {},
       ageRating: {minValue: minValue(0)},
       readingDirection: {},
       publisher: {},
@@ -523,6 +572,9 @@ export default Vue.extend({
     async loadAvailableGenres() {
       this.genresAvailable = await this.$komgaReferential.getGenres()
     },
+    async loadAvailableSharingLabels() {
+      this.sharingLabelsAvailable = await this.$komgaReferential.getSharingLabels()
+    },
     requiredErrors(fieldName: string): string[] {
       const errors = [] as string[]
       const formField = this.$v.form!![fieldName] as any
@@ -579,9 +631,15 @@ export default Vue.extend({
 
         const tagsLock = this.$_.uniq(series.map(x => x.metadata.tagsLock))
         this.form.tagsLock = tagsLock.length > 1 ? false : tagsLock[0]
+
+        this.form.sharingLabels = []
+
+        const sharingLabelsLock = this.$_.uniq(series.map(x => x.metadata.sharingLabelsLock))
+        this.form.sharingLabelsLock = sharingLabelsLock.length > 1 ? false : sharingLabelsLock[0]
       } else {
         this.form.genres = []
         this.form.tags = []
+        this.form.sharingLabels = []
         this.$_.merge(this.form, (series as SeriesDto).metadata)
         this.poster.selectedThumbnail = ''
         this.poster.deleteQueue = []
@@ -609,6 +667,7 @@ export default Vue.extend({
           genresLock: this.form.genresLock,
           tagsLock: this.form.tagsLock,
           totalBookCountLock: this.form.totalBookCountLock,
+          sharingLabelsLock: this.form.sharingLabelsLock,
         }
 
         if (this.$v.form?.status?.$dirty) {
@@ -639,6 +698,10 @@ export default Vue.extend({
           this.$_.merge(metadata, {language: this.form.language})
         }
 
+        if (this.$v.form?.sharingLabels?.$dirty) {
+          this.$_.merge(metadata, {sharingLabels: this.form.sharingLabels})
+        }
+
         if (this.single) {
           this.$_.merge(metadata, {
             titleLock: this.form.titleLock,

komga-webui/src/locales/en.json

@@ -428,6 +428,7 @@
       "field_age_rating": "Age Rating",
       "field_age_rating_error": "Age rating must be 0 or more",
       "field_genres": "Genres",
+      "field_labels": "Labels",
       "field_language": "Language",
       "field_language_hint": "IETF BCP 47 language tag",
       "field_publisher": "Publisher",
@@ -442,6 +443,7 @@
       "mixed": "MIXED",
       "tab_general": "General",
       "tab_poster": "Poster",
+      "tab_sharing": "Sharing",
       "tab_tags": "Tags",
       "tags_notice_multiple_edit": "You are editing tags for multiple series. This will override existing tags of each series."
     },

komga-webui/src/services/komga-referential.service.ts

@@ -84,6 +84,25 @@ export default class KomgaReferentialService {
     }
   }
 
+  async getSharingLabels(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/sharing-labels', {
+        params: params,
+        paramsSerializer: params => qs.stringify(params, {indices: false}),
+      })).data
+    } catch (e) {
+      let msg = 'An error occurred while trying to retrieve sharing labels'
+      if (e.response.data.message) {
+        msg += `: ${e.response.data.message}`
+      }
+      throw new Error(msg)
+    }
+  }
+
   async getSeriesAndBookTags(libraryId?: string, collectionId?: string): Promise<string[]> {
     try {
       const params = {} as any

komga-webui/src/types/komga-series.ts

@@ -41,6 +41,8 @@ export interface SeriesMetadataDto {
   tagsLock: boolean,
   totalBookCount?: number,
   totalBookCountLock: boolean,
+  sharingLabels: string[],
+  sharingLabelsLock: boolean,
 }
 
 export interface SeriesBooksMetadataDto {
@@ -76,6 +78,8 @@ export interface SeriesMetadataUpdateDto {
   tagsLock?: boolean,
   totalBookCount?: number,
   totalBookCountLock: boolean,
+  sharingLabels?: string[],
+  sharingLabelsLock: boolean,
 }
 
 export interface GroupCountDto {