Frontend: Code clean-up

frontend/src/dialog/upload.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-dialog fullscreen hide-overlay scrollable lazy
-            v-model="show" persistent class="p-upload-dialog" @keydown.esc="cancel">
+  <v-dialog v-model="show" fullscreen hide-overlay scrollable
+            lazy persistent class="p-upload-dialog" @keydown.esc="cancel">
     <v-card color="application">
       <v-toolbar dark flat color="navigation" :dense="$vuetify.breakpoint.smAndDown">
         <v-btn icon dark @click.stop="cancel">
@@ -11,14 +11,14 @@
         </v-toolbar-title>
       </v-toolbar>
       <v-container grid-list-xs text-xs-left fluid>
-        <v-form ref="form" class="p-photo-upload" lazy-validation @submit.prevent="submit" dense>
-          <input type="file" ref="upload" multiple @change.stop="upload()" class="d-none">
+        <v-form ref="form" class="p-photo-upload" lazy-validation dense @submit.prevent="submit">
+          <input ref="upload" type="file" multiple class="d-none" @change.stop="upload()">
 
           <v-container fluid>
             <p class="subheading">
-              <v-combobox v-if="total === 0" flat solo hide-details chips deletable-chips
-                          multiple color="secondary-dark" class="my-0"
-                          v-model="selectedAlbums"
+              <v-combobox v-if="total === 0" v-model="selectedAlbums" flat solo hide-details chips
+                          deletable-chips multiple color="secondary-dark"
+                          class="my-0"
                           :items="albums"
                           item-text="Title"
                           item-value="UID"
@@ -26,7 +26,7 @@
                           :label="$gettext('Select albums or create a new one')"
                           return-object
               >
-                <template v-slot:no-data>
+                <template #no-data>
                   <v-list-tile>
                     <v-list-tile-content>
                       <v-list-tile-title>
@@ -36,7 +36,7 @@
                     </v-list-tile-content>
                   </v-list-tile>
                 </template>
-                <template v-slot:selection="data">
+                <template #selection="data">
                   <v-chip
                       :key="JSON.stringify(data.item)"
                       :selected="data.selected"
@@ -57,15 +57,15 @@
               <span v-else-if="completed === 100"><translate key="Done">Done.</translate></span>
             </p>
 
-            <v-progress-linear color="secondary-dark" v-model="completed"
+            <v-progress-linear v-model="completed" color="secondary-dark"
                                :indeterminate="indexing"></v-progress-linear>
 
-            <p class="body-1" v-if="safe">
+            <p v-if="safe" class="body-1">
               <translate>Please don't upload photos containing offensive content.</translate>
               <translate>Uploads that may contain such images will be rejected automatically.</translate>
             </p>
 
-            <p class="body-1" v-if="review">
+            <p v-if="review" class="body-1">
               <translate>Non-photographic and low-quality images require a review before they appear in search results.</translate>
             </p>
 
@@ -92,7 +92,7 @@ import Notify from "common/notify";
 import Album from "model/album";
 
 export default {
-  name: 'p-tab-upload',
+  name: 'PTabUpload',
   props: {
     show: Boolean,
   },
@@ -112,6 +112,14 @@ export default {
       started: 0,
       review: this.$config.feature("review"),
       safe: !this.$config.get("uploadNSFW"),
+    };
+  },
+  watch: {
+    show: function () {
+      this.reset();
+      this.review = this.$config.feature("review");
+      this.safe = !this.$config.get("uploadNSFW");
+      this.findAlbums("");
     }
   },
   methods: {
@@ -192,9 +200,9 @@ export default {
       if (this.selectedAlbums && this.selectedAlbums.length > 0) {
         this.selectedAlbums.forEach((a) => {
           if (typeof a === "string") {
-            addToAlbums.push(a)
+            addToAlbums.push(a);
           } else if (a instanceof Album && a.UID) {
-            addToAlbums.push(a.UID)
+            addToAlbums.push(a.UID);
           }
         });
       }
@@ -209,17 +217,17 @@ export default {
           formData.append('files', file);
 
           await Api.post('upload/' + ctx.started,
-              formData,
-              {
-                headers: {
-                  'Content-Type': 'multipart/form-data'
-                }
+            formData,
+            {
+              headers: {
+                'Content-Type': 'multipart/form-data'
               }
+            }
           ).then(() => {
             ctx.completed = Math.round((ctx.current / ctx.total) * 100);
           }).catch(() => {
             ctx.completed = Math.round((ctx.current / ctx.total) * 100);
-          })
+          });
         }
       }
 
@@ -241,13 +249,5 @@ export default {
       });
     },
   },
-  watch: {
-    show: function () {
-      this.reset();
-      this.review = this.$config.feature("review");
-      this.safe = !this.$config.get("uploadNSFW");
-      this.findAlbums("");
-    }
-  },
 };
 </script>

frontend/src/pages/library/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-tab p-tab-index">
-    <v-form ref="form" class="p-photo-index" lazy-validation @submit.prevent="submit" dense>
+    <v-form ref="form" class="p-photo-index" lazy-validation dense @submit.prevent="submit">
       <v-container fluid>
         <p class="subheading">
           <span v-if="fileName">{{ action }} {{ fileName }}…</span>
@@ -11,18 +11,18 @@
         </p>
 
         <v-autocomplete
-            @change="onChange"
-            @focus="onFocus"
+            v-model="settings.index.path"
             color="secondary-dark"
             class="my-3 input-index-folder"
-            hide-details hide-no-data flat solo
-            v-model="settings.index.path"
-            browser-autocomplete="off"
+            hide-details
+            hide-no-data flat solo browser-autocomplete="off"
             :items="dirs"
             :loading="loading"
             :disabled="busy || !ready"
             item-text="name"
             item-value="path"
+            @change="onChange"
+            @focus="onFocus"
         >
         </v-autocomplete>
 
@@ -34,15 +34,15 @@
         <v-layout wrap align-top class="pb-3">
           <v-flex xs12 sm6 lg4 class="px-2 pb-2 pt-2">
             <v-checkbox
-                @change="onChange"
+                v-model="settings.index.rescan"
                 :disabled="busy || !ready"
                 class="ma-0 pa-0"
-                v-model="settings.index.rescan"
                 color="secondary-dark"
                 :label="$gettext('Complete Rescan')"
                 :hint="$gettext('Re-index all originals, including already indexed and unchanged files.')"
                 prepend-icon="cached"
                 persistent-hint
+                @change="onChange"
             >
             </v-checkbox>
           </v-flex>
@@ -70,12 +70,12 @@
         </v-btn>
 
         <v-alert
+            v-if="config.count.hidden > 1"
             :value="true"
             color="error"
             icon="priority_high"
             class="mt-3"
             outline
-            v-if="config.count.hidden > 1"
         >
           <translate
               :translate-params="{n: config.count.hidden}">The index currently contains %{n} hidden files.</translate>
@@ -96,9 +96,9 @@ import Util from "common/util";
 import {Folder, RootOriginals} from "model/folder";
 
 export default {
-  name: 'p-tab-index',
+  name: 'PTabIndex',
   data() {
-    const root = {"path": "/", "name": this.$gettext("All originals")}
+    const root = {"path": "/", "name": this.$gettext("All originals")};
 
     return {
       ready: !this.$config.loading(),
@@ -115,7 +115,14 @@ export default {
       source: null,
       root: root,
       dirs: [root],
-    }
+    };
+  },
+  created() {
+    this.subscriptionId = Event.subscribe('index', this.handleEvent);
+    this.load();
+  },
+  destroyed() {
+    Event.unsubscribe(this.subscriptionId);
   },
   methods: {
     load() {
@@ -131,7 +138,7 @@ export default {
         }
 
         this.ready = true;
-      })
+      });
     },
     onChange() {
       this.settings.save();
@@ -189,7 +196,7 @@ export default {
 
         if (Axios.isCancel(e)) {
           // run in background
-          return
+          return;
         }
 
         Notify.error(ctx.$gettext("Indexing failed"));
@@ -259,16 +266,9 @@ export default {
 
           break;
         default:
-          console.log(data)
+          console.log(data);
       }
     },
   },
-  created() {
-    this.subscriptionId = Event.subscribe('index', this.handleEvent);
-    this.load();
-  },
-  destroyed() {
-    Event.unsubscribe(this.subscriptionId);
-  },
 };
 </script>