From a90b47cee9936bd489dabd2a46014a24eaa5158c Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Wed, 18 Mar 2020 10:54:22 +0800
Subject: [PATCH] refactor: simplify settings-select

use item.text and item.value instead of mandatory slots
remove the reader specific ReaderReadingDirection enum
---
 komga-webui/src/components/SettingsSelect.vue |  9 +--
 komga-webui/src/types/common.ts               | 11 ---
 komga-webui/src/views/BookReader.vue          | 74 +++++++------------
 3 files changed, 27 insertions(+), 67 deletions(-)

diff --git a/komga-webui/src/components/SettingsSelect.vue b/komga-webui/src/components/SettingsSelect.vue
index a1ca116e3..7a4060c43 100644
--- a/komga-webui/src/components/SettingsSelect.vue
+++ b/komga-webui/src/components/SettingsSelect.vue
@@ -13,14 +13,7 @@
         @input="updateInput"
         @change="updateInput"
         hide-details="true"
-      >
-        <template v-slot:item="data">
-          <slot name="item" v-bind="data"></slot>
-        </template>
-        <template v-slot:selection="data">
-          <slot name="selection" v-bind="data"></slot>
-        </template>
-      </v-select>
+      />
     </v-col>
   </v-row>
 </template>
diff --git a/komga-webui/src/types/common.ts b/komga-webui/src/types/common.ts
index c7dda082f..80a276bd9 100644
--- a/komga-webui/src/types/common.ts
+++ b/komga-webui/src/types/common.ts
@@ -3,14 +3,3 @@ export enum LoadState {
   NotLoaded,
   Loading
 }
-
-export enum ImageFit {
-  WIDTH = 'width',
-  HEIGHT = 'height',
-  ORIGINAL = 'original'
-}
-
-export enum ReaderReadingDirection {
-  LeftToRight = 'ltr',
-  RightToLeft = 'rtl'
-}
diff --git a/komga-webui/src/views/BookReader.vue b/komga-webui/src/views/BookReader.vue
index 5a98ab4a6..d1b15d128 100644
--- a/komga-webui/src/views/BookReader.vue
+++ b/komga-webui/src/views/BookReader.vue
@@ -174,46 +174,26 @@
 
         <v-list class="full-height full-width">
           <v-list-item>
-            <settings-switch v-model="doublePages" label="Page Layout" :status="`${ doublePages ? 'Double Pages' : 'Single Page'}`"></settings-switch>
+            <settings-switch v-model="doublePages" label="Page Layout"
+                             :status="`${ doublePages ? 'Double Pages' : 'Single Page'}`"></settings-switch>
           </v-list-item>
           <v-list-item>
             <settings-switch v-model="animations" label="Page Transitions"></settings-switch>
           </v-list-item>
           <v-list-item>
             <settings-select
-              :items="settings.readingDirections"
+              :items="readingDirs"
               v-model="readingDirection"
               label="Reading Direction"
-            >
-              <template v-slot:item="data">
-                <div class="text-capitalize">
-                  {{ readingDirectionDisplay(data.item) }}
-                </div>
-              </template>
-              <template v-slot:selection="data">
-                <div class="text-capitalize">
-                  {{ readingDirectionDisplay(data.item) }}
-                </div>
-              </template>
-            </settings-select>
+            />
           </v-list-item>
+
           <v-list-item>
             <settings-select
-              :items="settings.imageFits"
+              :items="imageFits"
               v-model="imageFit"
               label="Scaling"
-            >
-              <template v-slot:item="data">
-                <div class="text-capitalize">
-                  {{ imageFitDisplay(data.item) }}
-                </div>
-              </template>
-              <template v-slot:selection="data">
-                <div class="text-capitalize">
-                  {{ imageFitDisplay(data.item) }}
-                </div>
-              </template>
-            </settings-select>
+            />
           </v-list-item>
         </v-list>
       </v-container>
@@ -267,14 +247,10 @@ const cookieReadingDirection = 'webreader.readingDirection'
 const cookieDoublePages = 'webreader.doublePages'
 const cookieAnimations = 'webreader.animations'
 
-const fitDisplay = {
-  [ImageFit.HEIGHT]: 'fit to height',
-  [ImageFit.WIDTH]: 'fit to width',
-  [ImageFit.ORIGINAL]: 'original'
-}
-const dirDisplay = {
-  [ReaderReadingDirection.RightToLeft]: 'right to left',
-  [ReaderReadingDirection.LeftToRight]: 'left to right'
+enum ImageFit {
+  WIDTH = 'width',
+  HEIGHT = 'height',
+  ORIGINAL = 'original'
 }
 
 export default Vue.extend({
@@ -303,10 +279,18 @@ export default Vue.extend({
         doublePages: false,
         imageFits: Object.values(ImageFit),
         fit: ImageFit.HEIGHT,
-        readingDirections: Object.values(ReaderReadingDirection),
-        readingDirection: ReaderReadingDirection.LeftToRight,
+        readingDirection: ReadingDirection.LEFT_TO_RIGHT,
         animations: true
-      }
+      },
+      readingDirs: [
+        { text: 'Left to right', value: ReadingDirection.LEFT_TO_RIGHT },
+        { text: 'Right to left', value: ReadingDirection.RIGHT_TO_LEFT }
+      ],
+      imageFits: [
+        { text: 'Fit to height', value: ImageFit.HEIGHT },
+        { text: 'Fit to width', value: ImageFit.WIDTH },
+        { text: 'Original', value: ImageFit.ORIGINAL }
+      ]
     }
   },
   created () {
@@ -412,19 +396,19 @@ export default Vue.extend({
       }
     },
     readingDirection: {
-      get: function (): ReaderReadingDirection {
+      get: function (): ReadingDirection {
         return this.settings.readingDirection
       },
-      set: function (readingDirection: ReaderReadingDirection): void {
+      set: function (readingDirection: ReadingDirection): void {
         this.settings.readingDirection = readingDirection
         this.$cookies.set(cookieReadingDirection, readingDirection, Infinity)
       }
     },
     flipDirection (): boolean {
       switch (this.readingDirection) {
-        case ReaderReadingDirection.LeftToRight:
+        case ReadingDirection.LEFT_TO_RIGHT:
           return false
-        case ReaderReadingDirection.RightToLeft:
+        case ReadingDirection.RIGHT_TO_LEFT:
         default:
           return true
       }
@@ -606,12 +590,6 @@ export default Vue.extend({
       }
       return this.$vuetify.breakpoint.width
     },
-    imageFitDisplay (fit: ImageFit): string {
-      return fitDisplay[fit]
-    },
-    readingDirectionDisplay (dir: ReaderReadingDirection): string {
-      return dirDisplay[dir]
-    },
     loadFromCookie (cookieKey: string, setter: (value: any) => void): void {
       if (this.$cookies.isKey(cookieKey)) {
         let value = this.$cookies.get(cookieKey)