feat(webui): add summary for read list browsing and edit dialog

closes #558

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

@@ -7,11 +7,23 @@
 
       <v-card-text>
         <v-container fluid>
+          <!--  Name  -->
           <v-row>
             <v-col>
               <v-text-field v-model="form.name"
                             :label="$t('dialog.edit_readlist.field_name')"
                             :error-messages="getErrorsName"
+                            filled
+              />
+            </v-col>
+          </v-row>
+
+          <!--  Summary  -->
+          <v-row>
+            <v-col>
+              <v-textarea v-model="form.summary"
+                          :label="$t('dialog.edit_readlist.field_summary')"
+                          filled
               />
             </v-col>
           </v-row>
@@ -47,6 +59,7 @@ export default Vue.extend({
       readLists: [] as ReadListDto[],
       form: {
         name: '',
+        summary: '',
       },
     }
   },
@@ -90,6 +103,7 @@ export default Vue.extend({
   methods: {
     async dialogReset(readList: ReadListDto) {
       this.form.name = readList.name
+      this.form.summary = readList.summary
     },
     dialogCancel() {
       this.$emit('input', false)
@@ -102,6 +116,7 @@ export default Vue.extend({
       try {
         const update = {
           name: this.form.name,
+          summary: this.form.summary,
         } as ReadListUpdateDto
 
         await this.$komgaReadLists.patchReadList(this.readList.id, update)

komga-webui/src/locales/en.json

@@ -365,7 +365,8 @@
       "button_cancel": "Cancel",
       "button_confirm": "Save changes",
       "dialog_title": "Edit read list",
-      "field_name": "Name"
+      "field_name": "Name",
+      "field_summary": "Summary"
     },
     "edit_series": {
       "button_cancel": "Cancel",

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

@@ -1,6 +1,7 @@
 interface ReadListDto {
   id: string,
   name: string,
+  summary: string,
   filtered: boolean,
   bookIds: string[],
   createdDate: string,
@@ -9,11 +10,13 @@ interface ReadListDto {
 
 interface ReadListCreationDto {
   name: string,
+  summary?: string,
   bookIds: string[]
 }
 
 interface ReadListUpdateDto {
   name?: string,
+  summary?: string,
   bookIds?: string[]
 }
 

komga-webui/src/views/BrowseReadList.vue

@@ -63,6 +63,14 @@
 
     <v-container fluid>
 
+      <v-row v-if="readList.summary" class="px-2">
+        <v-col>
+          <read-more>{{ readList.summary }}</read-more>
+        </v-col>
+      </v-row>
+
+      <v-divider v-if="readList.summary" class="my-3"/>
+
       <item-browser
         :items.sync="books"
         :selected.sync="selectedBooks"
@@ -94,6 +102,7 @@ import {BookDto, ReadProgressUpdateDto} from '@/types/komga-books'
 import {ContextOrigin} from '@/types/context'
 import {BookSseDto, ReadListSseDto, ReadProgressSseDto} from '@/types/komga-sse'
 import {throttle} from 'lodash'
+import ReadMore from '@/components/ReadMore.vue'
 
 export default Vue.extend({
   name: 'BrowseReadList',
@@ -102,6 +111,7 @@ export default Vue.extend({
     ItemBrowser,
     ReadListActionsMenu,
     MultiSelectBar,
+    ReadMore,
   },
   data: () => {
     return {