From 4debcae7f4ddedd0bf5c6872b7d5405f82e0995e Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@lastzero.net>
Date: Fri, 18 Dec 2020 16:59:34 +0100
Subject: [PATCH] Frontend: Code clean-up

---
 frontend/.eslintrc.js                      |  4 +-
 frontend/src/component/photo/cards.vue     | 73 +++++++++----------
 frontend/src/component/photo/clipboard.vue | 76 ++++++++++----------
 frontend/src/component/photo/list.vue      | 56 ++++++++-------
 frontend/src/component/photo/mosaic.vue    | 26 +++----
 frontend/src/component/photo/toolbar.vue   | 82 +++++++++++-----------
 frontend/src/component/photo/viewer.vue    | 28 ++++----
 frontend/src/share/photo/list.vue          |  4 +-
 8 files changed, 176 insertions(+), 173 deletions(-)

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index e85082e8d..1e71fd74a 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -19,8 +19,8 @@ module.exports = {
       // Settings for how to process Vue SFC Blocks
       SFCBlocks: {
         template: false,
-        script: true,
-        style: true,
+        script: false,
+        style: false,
       },
 
       // Use prettierrc for prettier options or not (default: `true`)
diff --git a/frontend/src/component/photo/cards.vue b/frontend/src/component/photo/cards.vue
index dff0e36d6..5c2de431b 100644
--- a/frontend/src/component/photo/cards.vue
+++ b/frontend/src/component/photo/cards.vue
@@ -3,10 +3,10 @@
     <v-card v-if="photos.length === 0" class="p-photos-empty secondary-light lighten-1 ma-1" flat>
       <v-card-title primary-title>
         <div>
-          <h3 class="title ma-0 pa-0" v-if="filter.order === 'edited'">
+          <h3 v-if="filter.order === 'edited'" class="title ma-0 pa-0">
             <translate>Couldn't find recently edited</translate>
           </h3>
-          <h3 class="title ma-0 pa-0" v-else>
+          <h3 v-else class="title ma-0 pa-0">
             <translate>Couldn't find anything</translate>
           </h3>
           <p class="mt-4 mb-0 pa-0">
@@ -26,16 +26,16 @@
           :data-uid="photo.UID"
           class="p-photo"
           xs12 sm6 md4 lg3 xl2 d-flex
-          v-bind:class="{ 'is-selected': $clipboard.has(photo), portrait: photo.Portrait }"
+          :class="{ 'is-selected': clipboard.has(photo), portrait: photo.Portrait }"
       >
         <v-hover>
-          <v-card tile slot-scope="{ hover }"
-                  @contextmenu="onContextMenu($event, index)"
-                  :dark="$clipboard.has(photo)"
-                  :class="$clipboard.has(photo) ? 'elevation-10 ma-0 accent darken-1 white--text' : 'elevation-0 ma-1 accent lighten-3'">
+          <v-card slot-scope="{ hover }" tile
+                  :dark="clipboard.has(photo)"
+                  :class="clipboard.has(photo) ? 'elevation-10 ma-0 accent darken-1 white--text' : 'elevation-0 ma-1 accent lighten-3'"
+                  @contextmenu="onContextMenu($event, index)">
             <v-img :src="photo.thumbnailUrl('tile_500')"
                    aspect-ratio="1"
-                   v-bind:class="{ selected: $clipboard.has(photo) }"
+                   :class="{ selected: clipboard.has(photo) }"
                    class="accent lighten-2 clickable"
                    @mousedown="onMouseDown($event, index)"
                    @click.stop.prevent="onClick($event, index)"
@@ -52,16 +52,16 @@
               </v-layout>
 
               <v-layout
+                  v-if="photo.Type === 'live'"
+                  v-show="hover"
                   fill-height
                   align-center
                   justify-center
                   ma-0
                   class="live-player"
                   style="overflow: hidden;"
-                  v-if="photo.Type === 'live'"
-                  v-show="hover"
               >
-                <video width="500" height="500" autoplay loop muted playsinline :key="photo.videoUrl()">
+                <video :key="photo.videoUrl()" width="500" height="500" autoplay loop muted playsinline>
                   <source :src="photo.videoUrl()" type="video/mp4">
                 </video>
               </v-layout>
@@ -72,11 +72,11 @@
                 <v-icon color="white">lock</v-icon>
               </v-btn>
 
-              <v-btn v-if="hover || selection.length && $clipboard.has(photo)" :ripple="false"
+              <v-btn v-if="hover || selection.length && clipboard.has(photo)" :ripple="false"
                      icon flat large absolute
-                     :class="selection.length && $clipboard.has(photo) ? 'p-photo-select' : 'p-photo-select opacity-50'"
+                     :class="selection.length && clipboard.has(photo) ? 'p-photo-select' : 'p-photo-select opacity-50'"
                      @click.stop.prevent="onSelect($event, index)">
-                <v-icon v-if="selection.length && $clipboard.has(photo)" color="white"
+                <v-icon v-if="selection.length && clipboard.has(photo)" color="white"
                         class="t-select t-on">check_circle
                 </v-icon>
                 <v-icon v-else color="accent lighten-3" class="t-select t-off">radio_button_off</v-icon>
@@ -96,12 +96,12 @@
               <template v-if="photo.isPlayable()">
                 <v-btn v-if="photo.Type === 'live'" :ripple="false"
                        icon flat large absolute class="p-photo-live opacity-75"
-                       @click.stop.prevent="openPhoto(index, true)" title="Live Photo">
+                       title="Live Photo" @click.stop.prevent="openPhoto(index, true)">
                   <v-icon color="white" class="action-play">adjust</v-icon>
                 </v-btn>
                 <v-btn v-else color="white" :ripple="false"
                        outline large fab absolute class="p-photo-play opacity-75" :depressed="false"
-                       @click.stop.prevent="openPhoto(index, true)" title="Play">
+                       title="Play" @click.stop.prevent="openPhoto(index, true)">
                   <v-icon color="white" class="action-play">play_arrow</v-icon>
                 </v-btn>
               </template>
@@ -117,7 +117,7 @@
               </v-btn>
               <v-btn v-else-if="photo.Type === 'raw'" :ripple="false"
                      icon flat large absolute class="p-photo-merged opacity-75"
-                     @click.stop.prevent="openPhoto(index, true)" title="RAW">
+                     title="RAW" @click.stop.prevent="openPhoto(index, true)">
                 <v-icon color="white" class="action-burst">photo_camera</v-icon>
               </v-btn>
             </v-img>
@@ -125,47 +125,47 @@
             <v-card-title primary-title class="pa-3 p-photo-desc" style="user-select: none;">
               <div>
                 <h3 class="body-2 mb-2" :title="photo.Title">
-                  <button @click.exact="editPhoto(index)" class="action-title-edit"
-                          :data-uid="photo.UID">
+                  <button class="action-title-edit" :data-uid="photo.UID"
+                          @click.exact="editPhoto(index)">
                     {{ photo.Title | truncate(80) }}
                   </button>
                 </h3>
-                <div class="caption mb-2" v-if="photo.Description" title="Description">
+                <div v-if="photo.Description" class="caption mb-2" title="Description">
                   <button @click.exact="editPhoto(index)">
                     {{ photo.Description }}
                   </button>
                 </div>
                 <div class="caption">
-                  <button @click.exact="editPhoto(index)" class="action-date-edit"
-                          :data-uid="photo.UID">
+                  <button class="action-date-edit" :data-uid="photo.UID"
+                          @click.exact="editPhoto(index)">
                     <v-icon size="14" title="Taken">date_range</v-icon>
                     {{ photo.getDateString() }}
                   </button>
                   <template v-if="!photo.Description">
                     <br/>
-                    <button v-if="photo.Type === 'video'" @click.exact="openPhoto(index, true)"
-                            title="Video">
+                    <button v-if="photo.Type === 'video'" title="Video"
+                            @click.exact="openPhoto(index, true)">
                       <v-icon size="14">movie</v-icon>
                       {{ photo.getVideoInfo() }}
                     </button>
-                    <button v-else @click.exact="editPhoto(index)" title="Camera"
-                            class="action-camera-edit" :data-uid="photo.UID">
+                    <button v-else title="Camera" class="action-camera-edit"
+                            :data-uid="photo.UID" @click.exact="editPhoto(index)">
                       <v-icon size="14">photo_camera</v-icon>
                       {{ photo.getPhotoInfo() }}
                     </button>
                   </template>
                   <template v-if="filter.order === 'name' && $config.feature('download')">
                     <br/>
-                    <button @click.exact="downloadFile(index)"
-                            title="Name">
+                    <button title="Name"
+                            @click.exact="downloadFile(index)">
                       <v-icon size="14">insert_drive_file</v-icon>
                       {{ photo.baseName() }}
                     </button>
                   </template>
                   <template v-if="showLocation && photo.Country !== 'zz'">
                     <br/>
-                    <button @click.exact="openLocation(index)" title="Location"
-                            class="action-location" :data-uid="photo.UID">
+                    <button title="Location" class="action-location"
+                            :data-uid="photo.UID" @click.exact="openLocation(index)">
                       <v-icon size="14">location_on</v-icon>
                       {{ photo.locationInfo() }}
                     </button>
@@ -177,12 +177,12 @@
               <v-layout row wrap align-center>
                 <v-flex xs12>
                   <div class="text-xs-center">
-                    <v-btn color="secondary-dark" small depressed dark @click.stop="photo.archive()"
-                           class="action-archive text-xs-center" :title="labels.archive">
+                    <v-btn color="secondary-dark" small depressed dark class="action-archive text-xs-center"
+                           :title="labels.archive" @click.stop="photo.archive()">
                       <v-icon dark>archive</v-icon>
                     </v-btn>
-                    <v-btn color="secondary-dark" small depressed dark @click.stop="photo.approve()"
-                           class="action-approve text-xs-center" :title="labels.approve">
+                    <v-btn color="secondary-dark" small depressed dark class="action-approve text-xs-center"
+                           :title="labels.approve" @click.stop="photo.approve()">
                       <v-icon dark>check</v-icon>
                     </v-btn>
                   </div>
@@ -197,7 +197,7 @@
 </template>
 <script>
 export default {
-  name: 'p-photo-cards',
+  name: 'PPhotoCards',
   props: {
     photos: Array,
     selection: Array,
@@ -210,6 +210,7 @@ export default {
   },
   data() {
     return {
+      clipboard: this.$clipboard,
       showLocation: this.$config.settings().features.places,
       hidePrivate: this.$config.settings().features.private,
       debug: this.$config.get('debug'),
@@ -226,7 +227,7 @@ export default {
   methods: {
     downloadFile(index) {
       const photo = this.photos[index];
-      const link = document.createElement('a')
+      const link = document.createElement('a');
       link.href = `/api/v1/dl/${photo.Hash}?t=${this.$config.downloadToken()}`;
       link.download = photo.FileName;
       link.click();
diff --git a/frontend/src/component/photo/clipboard.vue b/frontend/src/component/photo/clipboard.vue
index 11474dd6b..443d4f88d 100644
--- a/frontend/src/component/photo/clipboard.vue
+++ b/frontend/src/component/photo/clipboard.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-    <v-container fluid class="pa-0" v-if="selection.length > 0">
+    <v-container v-if="selection.length > 0" fluid class="pa-0">
       <v-speed-dial
-          fixed bottom right
+          id="t-clipboard" v-model="expanded" fixed
+          bottom
+          right
           direction="top"
-          v-model="expanded"
           transition="slide-y-reverse-transition"
           class="p-clipboard p-photo-clipboard"
-          id="t-clipboard"
       >
         <v-btn
-            fab dark
-            slot="activator"
+            slot="activator" fab
+            dark
             color="accent darken-2"
             class="action-menu"
         >
@@ -20,109 +20,109 @@
         </v-btn>
 
         <v-btn
-            fab dark small
+            v-if="context !== 'archive' && context !== 'review' && config.settings.features.share" fab dark
+            small
             :title="$gettext('Share')"
             color="share"
-            @click.stop="dialog.share = true"
             :disabled="selection.length === 0"
-            v-if="context !== 'archive' && context !== 'review' && $config.feature('share')"
             class="action-share"
+            @click.stop="dialog.share = true"
         >
           <v-icon>cloud</v-icon>
         </v-btn>
 
         <v-btn
-            fab dark small
+            v-if="context === 'review'" fab dark
+            small
             :title="$gettext('Approve')"
             color="share"
-            @click.stop="batchApprove"
             :disabled="selection.length === 0"
-            v-if="context === 'review'"
             class="action-approve"
+            @click.stop="batchApprove"
         >
           <v-icon>check</v-icon>
         </v-btn>
         <v-btn
-            fab dark small
+            v-if="context !== 'archive' && config.settings.features.edit" fab dark
+            small
             :title="$gettext('Edit')"
             color="edit"
             :disabled="selection.length === 0"
-            @click.stop="edit"
-            v-if="context !== 'archive' && $config.feature('edit')"
             class="action-edit"
+            @click.stop="edit"
         >
           <v-icon>edit</v-icon>
         </v-btn>
         <v-btn
-            fab dark small
+            v-if="context !== 'archive' && config.settings.features.private" fab dark
+            small
             :title="$gettext('Change private flag')"
             color="private"
             :disabled="selection.length === 0"
-            @click.stop="batchPrivate"
-            v-if="context !== 'archive' && config.settings.features.private"
             class="action-private"
+            @click.stop="batchPrivate"
         >
           <v-icon>lock</v-icon>
         </v-btn>
         <v-btn
-            fab dark small
+            v-if="context !== 'archive' && config.settings.features.download" fab dark
+            small
             :title="$gettext('Download')"
             color="download"
-            @click.stop="download()"
-            v-if="context !== 'archive' && $config.feature('download')"
             class="action-download"
+            @click.stop="download()"
         >
           <v-icon>get_app</v-icon>
         </v-btn>
         <v-btn
-            fab dark small
+            v-if="context !== 'archive'" fab dark
+            small
             :title="$gettext('Add to album')"
             color="album"
             :disabled="selection.length === 0"
-            @click.stop="dialog.album = true"
-            v-if="context !== 'archive'"
             class="action-album"
+            @click.stop="dialog.album = true"
         >
           <v-icon>folder_special</v-icon>
         </v-btn>
         <v-btn
-            fab dark small
+            v-if="!isAlbum && context !== 'archive' && config.settings.features.archive" fab dark
+            small
             color="remove"
             :title="$gettext('Archive')"
-            @click.stop="dialog.archive = true"
             :disabled="selection.length === 0"
-            v-if="!isAlbum && context !== 'archive' && $config.feature('archive')"
             class="action-archive"
+            @click.stop="dialog.archive = true"
         >
           <v-icon>archive</v-icon>
         </v-btn>
         <v-btn
-            fab dark small
+            v-if="!album && context === 'archive'" fab dark
+            small
             color="restore"
             :title="$gettext('Restore')"
-            @click.stop="batchRestorePhotos"
             :disabled="selection.length === 0"
-            v-if="!album && context === 'archive'"
             class="action-restore"
+            @click.stop="batchRestorePhotos"
         >
           <v-icon>unarchive</v-icon>
         </v-btn>
         <v-btn
-            fab dark small
+            v-if="isAlbum" fab dark
+            small
             :title="$gettext('Remove')"
             color="remove"
-            @click.stop="removeFromAlbum"
             :disabled="selection.length === 0"
-            v-if="isAlbum"
             class="action-delete"
+            @click.stop="removeFromAlbum"
         >
           <v-icon>remove</v-icon>
         </v-btn>
         <v-btn
             fab dark small
             color="accent"
-            @click.stop="clearClipboard()"
             class="action-clear"
+            @click.stop="clearClipboard()"
         >
           <v-icon>clear</v-icon>
         </v-btn>
@@ -142,7 +142,7 @@ import Notify from "common/notify";
 import Event from "pubsub-js";
 
 export default {
-  name: 'p-photo-clipboard',
+  name: 'PPhotoClipboard',
   props: {
     selection: Array,
     refresh: Function,
@@ -206,7 +206,7 @@ export default {
     removeFromAlbum() {
       if (!this.album) {
         this.$notify.error(this.$gettext("remove failed: unknown album"));
-        return
+        return;
       }
 
       const uid = this.album.UID;
@@ -231,14 +231,14 @@ export default {
     },
     onDownload(path) {
       Notify.success(this.$gettext("Downloading…"));
-      const link = document.createElement('a')
+      const link = document.createElement('a');
       link.href = path;
       link.download = "photos.zip";
       link.click();
     },
     edit() {
       // Open Edit Dialog
-      Event.publish("dialog.edit", {selection: this.selection, album: this.album, index: 0});
+      Event.PubSub.publish("dialog.edit", {selection: this.selection, album: this.album, index: 0});
     },
     onShared() {
       this.dialog.share = false;
diff --git a/frontend/src/component/photo/list.vue b/frontend/src/component/photo/list.vue
index 6d918d904..8f5e1ce13 100644
--- a/frontend/src/component/photo/list.vue
+++ b/frontend/src/component/photo/list.vue
@@ -3,16 +3,16 @@
     <v-card v-if="photos.length === 0" class="p-photos-empty secondary-light lighten-1 ma-1" flat>
       <v-card-title primary-title>
         <div>
-          <h3 class="title ma-0 pa-0" v-if="filter.order === 'edited'">
+          <h3 v-if="filter.order === 'edited'" class="title ma-0 pa-0">
             <translate>Couldn't find recently edited</translate>
           </h3>
-          <h3 class="title ma-0 pa-0" v-else>
+          <h3 v-else class="title ma-0 pa-0">
             <translate>Couldn't find anything</translate>
           </h3>
           <p class="mt-4 mb-0 pa-0">
             <translate>Try again using other filters or keywords.</translate>
             <translate>If a file you expect is missing, please re-index your library and wait until indexing has been completed.</translate>
-            <template v-if="$config.feature('review')" class="mt-2 mb-0 pa-0">
+            <template v-if="config.settings.features.review" class="mt-2 mb-0 pa-0">
               <translate>Non-photographic and low-quality images require a review before they appear in search results.</translate>
             </template>
           </p>
@@ -20,13 +20,13 @@
       </v-card-title>
     </v-card>
     <v-data-table v-else
+                  v-model="selected"
                   :headers="listColumns"
                   :items="photos"
                   hide-actions
                   class="elevation-0 p-photos p-photo-list p-results"
                   disable-initial-sort
                   item-key="ID"
-                  v-model="selected"
                   :no-data-text="notFoundMessage"
     >
       <template slot="items" slot-scope="props">
@@ -48,7 +48,7 @@
                                    color="accent lighten-5"></v-progress-circular>
             </v-layout>
 
-            <v-btn v-if="selection.length && $clipboard.has(props.item)" :ripple="false"
+            <v-btn v-if="selection.length && clipboard.has(props.item)" :ripple="false"
                    flat icon large absolute class="p-photo-select">
               <v-icon color="white" class="t-select t-on">check_circle</v-icon>
             </v-btn>
@@ -61,12 +61,12 @@
           </v-img>
         </td>
 
-        <td class="p-photo-desc clickable" :data-uid="props.item.UID" @click.exact="editPhoto(props.index)"
-            style="user-select: none;">
+        <td class="p-photo-desc clickable" :data-uid="props.item.UID" style="user-select: none;"
+            @click.exact="editPhoto(props.index)">
           {{ props.item.Title }}
         </td>
         <td class="p-photo-desc hidden-xs-only" :title="props.item.getDateString()">
-          <button @click.stop.prevent="editPhoto(props.index)" style="user-select: none;">
+          <button style="user-select: none;" @click.stop.prevent="editPhoto(props.index)">
             {{ props.item.shortDateString() }}
           </button>
         </td>
@@ -76,13 +76,13 @@
           </button>
         </td>
         <td class="p-photo-desc hidden-xs-only">
-          <button @click.exact="downloadFile(props.index)"
-                  title="Name" v-if="filter.order === 'name'">
+          <button v-if="filter.order === 'name'"
+                  title="Name" @click.exact="downloadFile(props.index)">
             {{ props.item.FileName }}
           </button>
           <button v-else-if="props.item.Country !== 'zz' && showLocation"
-                  @click.stop.prevent="openLocation(props.index)"
-                  style="user-select: none;">
+                  style="user-select: none;"
+                  @click.stop.prevent="openLocation(props.index)">
             {{ props.item.locationInfo() }}
           </button>
           <span v-else>
@@ -91,12 +91,12 @@
         </td>
         <td class="text-xs-center">
           <v-btn v-if="hidePrivate" class="p-photo-private" icon small flat :ripple="false"
-                 @click.stop.prevent="props.item.togglePrivate()" :data-uid="props.item.UID">
+                 :data-uid="props.item.UID" @click.stop.prevent="props.item.togglePrivate()">
             <v-icon v-if="props.item.Private" color="secondary-dark">lock</v-icon>
             <v-icon v-else color="accent lighten-3">lock_open</v-icon>
           </v-btn>
           <v-btn class="p-photo-like" icon small flat :ripple="false"
-                 @click.stop.prevent="props.item.toggleLike()" :data-uid="props.item.UID">
+                 :data-uid="props.item.UID" @click.stop.prevent="props.item.toggleLike()">
             <v-icon v-if="props.item.Favorite" color="pink lighten-3" :data-uid="props.item.UID">favorite</v-icon>
             <v-icon v-else color="accent lighten-3" :data-uid="props.item.UID">favorite_border</v-icon>
           </v-btn>
@@ -107,7 +107,7 @@
 </template>
 <script>
 export default {
-  name: 'p-photo-list',
+  name: 'PPhotoList',
   props: {
     photos: Array,
     selection: Array,
@@ -127,9 +127,11 @@ export default {
       m += " " + this.$gettext("Non-photographic and low-quality images require a review before they appear in search results.");
     }
 
-    let showName = this.filter.order === 'name'
+    let showName = this.filter.order === 'name';
 
     return {
+      clipboard: this.$clipboard,
+      config: this.$config.values,
       notFoundMessage: m,
       'selected': [],
       'listColumns': [
@@ -146,8 +148,8 @@ export default {
         {text: '', value: '', align: 'center', sortable: false},
       ],
       showName: showName,
-      showLocation: this.$config.settings().features.places,
-      hidePrivate: this.$config.settings().features.private,
+      showLocation: this.$config.values.settings.features.places,
+      hidePrivate: this.$config.values.settings.features.private,
       mouseDown: {
         index: -1,
         timeStamp: -1,
@@ -158,7 +160,7 @@ export default {
     photos: function (photos) {
       this.selected.splice(0);
 
-      for (let i = 0; i <= photos.length; i++) {
+      for (let i = 0; i < photos.length; i++) {
         if (this.$clipboard.has(photos[i])) {
           this.selected.push(photos[i]);
         }
@@ -168,13 +170,18 @@ export default {
       this.refreshSelection();
     },
   },
+  mounted: function () {
+    this.$nextTick(function () {
+      this.refreshSelection();
+    });
+  },
   methods: {
     downloadFile(index) {
       const photo = this.photos[index];
-      const link = document.createElement('a')
+      const link = document.createElement('a');
       link.href = `/api/v1/dl/${photo.Hash}?t=${this.$config.downloadToken()}`;
       link.download = photo.FileName;
-      link.click()
+      link.click();
     },
     onSelect(ev, index) {
       if (ev.shiftKey) {
@@ -219,17 +226,12 @@ export default {
     refreshSelection() {
       this.selected.splice(0);
 
-      for (let i = 0; i <= this.photos.length; i++) {
+      for (let i = 0; i < this.photos.length; i++) {
         if (this.$clipboard.has(this.photos[i])) {
           this.selected.push(this.photos[i]);
         }
       }
     },
-  },
-  mounted: function () {
-    this.$nextTick(function () {
-      this.refreshSelection();
-    })
   }
 };
 </script>
diff --git a/frontend/src/component/photo/mosaic.vue b/frontend/src/component/photo/mosaic.vue
index 4b438ad61..318a6b740 100644
--- a/frontend/src/component/photo/mosaic.vue
+++ b/frontend/src/component/photo/mosaic.vue
@@ -3,10 +3,10 @@
     <v-card v-if="photos.length === 0" class="p-photos-empty secondary-light lighten-1 ma-1" flat>
       <v-card-title primary-title>
         <div>
-          <h3 class="title ma-0 pa-0" v-if="filter.order === 'edited'">
+          <h3 v-if="filter.order === 'edited'" class="title ma-0 pa-0">
             <translate>Couldn't find recently edited</translate>
           </h3>
-          <h3 class="title ma-0 pa-0" v-else>
+          <h3 v-else class="title ma-0 pa-0">
             <translate>Couldn't find anything</translate>
           </h3>
           <p class="mt-4 mb-0 pa-0">
@@ -24,15 +24,15 @@
           v-for="(photo, index) in photos"
           :key="index"
           :data-uid="photo.UID"
-          v-bind:class="{ selected: $clipboard.has(photo), portrait: photo.Portrait }"
+          :class="{ selected: $clipboard.has(photo), portrait: photo.Portrait }"
           class="p-photo"
           xs4 sm3 md2 lg1 d-flex
       >
         <v-hover>
-          <v-card tile slot-scope="{ hover }"
-                  @contextmenu="onContextMenu($event, index)"
+          <v-card slot-scope="{ hover }" tile
                   :class="$clipboard.has(photo) ? 'elevation-10 ma-0' : 'elevation-0 ma-1'"
-                  :title="photo.Title">
+                  :title="photo.Title"
+                  @contextmenu="onContextMenu($event, index)">
             <v-img :src="photo.thumbnailUrl('tile_224')"
                    aspect-ratio="1"
                    class="accent lighten-2 clickable"
@@ -51,16 +51,16 @@
               </v-layout>
 
               <v-layout
+                  v-if="photo.Type === 'live'"
+                  v-show="hover"
                   fill-height
                   align-center
                   justify-center
                   ma-0
                   class="live-player"
                   style="overflow: hidden;"
-                  v-if="photo.Type === 'live'"
-                  v-show="hover"
               >
-                <video width="224" height="224" autoplay loop muted playsinline :key="photo.videoUrl()">
+                <video :key="photo.videoUrl()" width="224" height="224" autoplay loop muted playsinline>
                   <source :src="photo.videoUrl()" type="video/mp4">
                 </video>
               </v-layout>
@@ -92,12 +92,12 @@
               <template v-if="photo.isPlayable()">
                 <v-btn v-if="photo.Type === 'live'" color="white"
                        icon flat small absolute class="p-photo-live opacity-75" :depressed="false" :ripple="false"
-                       @click.stop.prevent="openPhoto(index, true)" title="Live Photo">
+                       title="Live Photo" @click.stop.prevent="openPhoto(index, true)">
                   <v-icon color="white" class="action-play">adjust</v-icon>
                 </v-btn>
                 <v-btn v-else color="white"
                        outline fab absolute class="p-photo-play opacity-75" :depressed="false" :ripple="false"
-                       @click.stop.prevent="openPhoto(index, true)" title="Play">
+                       title="Play" @click.stop.prevent="openPhoto(index, true)">
                   <v-icon color="white" class="action-play">play_arrow</v-icon>
                 </v-btn>
               </template>
@@ -113,7 +113,7 @@
               </v-btn>
               <v-btn v-else-if="photo.Type === 'raw'" :ripple="false"
                      icon flat small absolute class="p-photo-merged opacity-75"
-                     @click.stop.prevent="openPhoto(index, true)" title="RAW">
+                     title="RAW" @click.stop.prevent="openPhoto(index, true)">
                 <v-icon color="white" class="action-burst">photo_camera</v-icon>
               </v-btn>
             </v-img>
@@ -125,7 +125,7 @@
 </template>
 <script>
 export default {
-  name: 'p-photo-mosaic',
+  name: 'PPhotoMosaic',
   props: {
     photos: Array,
     selection: Array,
diff --git a/frontend/src/component/photo/toolbar.vue b/frontend/src/component/photo/toolbar.vue
index e9ec5e445..874aceca2 100644
--- a/frontend/src/component/photo/toolbar.vue
+++ b/frontend/src/component/photo/toolbar.vue
@@ -1,9 +1,10 @@
 <template>
-  <v-form lazy-validation dense
-          ref="form" autocomplete="off" class="p-photo-toolbar" accept-charset="UTF-8"
+  <v-form ref="form" lazy-validation
+          dense autocomplete="off" class="p-photo-toolbar" accept-charset="UTF-8"
           @submit.prevent="filterChange">
     <v-toolbar :dense="$vuetify.breakpoint.smAndDown" flat color="secondary">
-      <v-text-field class="pt-3 pr-3 input-search"
+      <v-text-field v-model="filter.q"
+                    class="pt-3 pr-3 input-search"
                     browser-autocomplete="off"
                     single-line
                     :label="$gettext('Search')"
@@ -11,106 +12,105 @@
                     clearable
                     color="secondary-dark"
                     @click:clear="clearQuery"
-                    v-model="filter.q"
                     @keyup.enter.native="filterChange"
       ></v-text-field>
 
       <v-spacer></v-spacer>
 
-      <v-btn icon @click.stop="refresh" class="hidden-xs-only action-reload" :title="$gettext('Reload')">
+      <v-btn icon class="hidden-xs-only action-reload" :title="$gettext('Reload')" @click.stop="refresh">
         <v-icon>refresh</v-icon>
       </v-btn>
 
-      <v-btn icon v-if="settings.view === 'cards'" @click.stop="setView('list')" :title="$gettext('Toggle View')">
+      <v-btn v-if="settings.view === 'cards'" icon :title="$gettext('Toggle View')" @click.stop="setView('list')">
         <v-icon>view_list</v-icon>
       </v-btn>
-      <v-btn icon v-else-if="settings.view === 'list'" @click.stop="setView('mosaic')" :title="$gettext('Toggle View')">
+      <v-btn v-else-if="settings.view === 'list'" icon :title="$gettext('Toggle View')" @click.stop="setView('mosaic')">
         <v-icon>view_comfy</v-icon>
       </v-btn>
-      <v-btn icon v-else @click.stop="setView('cards')" :title="$gettext('Toggle View')">
+      <v-btn v-else icon :title="$gettext('Toggle View')" @click.stop="setView('cards')">
         <v-icon>view_column</v-icon>
       </v-btn>
 
-      <v-btn icon @click.stop="showUpload()" v-if="!$config.values.readonly && $config.feature('upload')"
-             class="hidden-sm-and-down action-upload" :title="$gettext('Upload')">
+      <v-btn v-if="!$config.values.readonly && $config.feature('upload')" icon class="hidden-sm-and-down action-upload"
+             :title="$gettext('Upload')" @click.stop="showUpload()">
         <v-icon>cloud_upload</v-icon>
       </v-btn>
 
-      <v-btn icon @click.stop="searchExpanded = !searchExpanded" class="p-expand-search"
-             :title="$gettext('Expand Search')">
+      <v-btn icon class="p-expand-search" :title="$gettext('Expand Search')"
+             @click.stop="searchExpanded = !searchExpanded">
         <v-icon>{{ searchExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</v-icon>
       </v-btn>
     </v-toolbar>
 
-    <v-card class="pt-1"
+    <v-card v-show="searchExpanded"
+            class="pt-1"
             flat
-            color="secondary-light"
-            v-show="searchExpanded">
+            color="secondary-light">
       <v-card-text>
         <v-layout row wrap>
           <v-flex xs12 sm6 md3 pa-2 class="p-countries-select">
-            <v-select @change="dropdownChange"
+            <v-select v-model="filter.country"
                       :label="$gettext('Country')"
                       flat solo hide-details
                       color="secondary-dark"
                       item-value="ID"
                       item-text="Name"
-                      v-model="filter.country"
                       :items="countryOptions"
                       class="input-countries"
+                      @change="dropdownChange"
             >
             </v-select>
           </v-flex>
           <v-flex xs12 sm6 md3 pa-2 class="p-camera-select">
-            <v-select @change="dropdownChange"
+            <v-select v-model="filter.camera"
                       :label="$gettext('Camera')"
                       flat solo hide-details
                       color="secondary-dark"
                       item-value="ID"
                       item-text="Name"
-                      v-model="filter.camera"
-                      :items="cameraOptions">
+                      :items="cameraOptions"
+                      @change="dropdownChange">
             </v-select>
           </v-flex>
           <v-flex xs12 sm6 md3 pa-2 class="p-view-select">
-            <v-select @change="dropdownChange"
-                      :label="$gettext('View')"
-                      flat solo hide-details
-                      color="secondary-dark"
+            <v-select id="viewSelect"
                       v-model="settings.view"
+                      :label="$gettext('View')" flat solo
+                      hide-details
+                      color="secondary-dark"
                       :items="options.views"
-                      id="viewSelect">
+                      @change="dropdownChange">
             </v-select>
           </v-flex>
           <v-flex xs12 sm6 md3 pa-2 class="p-time-select">
-            <v-select @change="dropdownChange"
+            <v-select v-model="filter.order"
                       :label="$gettext('Sort Order')"
                       flat solo hide-details
                       color="secondary-dark"
-                      v-model="filter.order"
-                      :items="options.sorting">
+                      :items="options.sorting"
+                      @change="dropdownChange">
             </v-select>
           </v-flex>
           <v-flex xs12 sm6 md3 pa-2 class="p-year-select">
-            <v-select @change="dropdownChange"
+            <v-select v-model="filter.year"
                       :label="$gettext('Year')"
                       flat solo hide-details
                       color="secondary-dark"
                       item-value="value"
                       item-text="text"
-                      v-model="filter.year"
-                      :items="yearOptions()">
+                      :items="yearOptions()"
+                      @change="dropdownChange">
             </v-select>
           </v-flex>
           <v-flex xs12 sm6 md3 pa-2 class="p-month-select">
-            <v-select @change="dropdownChange"
+            <v-select v-model="filter.month"
                       :label="$gettext('Month')"
                       flat solo hide-details
                       color="secondary-dark"
                       item-value="value"
                       item-text="text"
-                      v-model="filter.month"
-                      :items="monthOptions()">
+                      :items="monthOptions()"
+                      @change="dropdownChange">
             </v-select>
           </v-flex>
           <!-- v-flex xs12 sm6 md3 pa-2 class="p-lens-select">
@@ -125,25 +125,25 @@
               </v-select>
           </v-flex -->
           <v-flex xs12 sm6 md3 pa-2 class="p-color-select">
-            <v-select @change="dropdownChange"
+            <v-select v-model="filter.color"
                       :label="$gettext('Color')"
                       flat solo hide-details
                       color="secondary-dark"
                       item-value="Slug"
                       item-text="Name"
-                      v-model="filter.color"
-                      :items="colorOptions()">
+                      :items="colorOptions()"
+                      @change="dropdownChange">
             </v-select>
           </v-flex>
           <v-flex xs12 sm6 md3 pa-2 class="p-category-select">
-            <v-select @change="dropdownChange"
+            <v-select v-model="filter.label"
                       :label="$gettext('Category')"
                       flat solo hide-details
                       color="secondary-dark"
                       item-value="Slug"
                       item-text="Name"
-                      v-model="filter.label"
-                      :items="categoryOptions">
+                      :items="categoryOptions"
+                      @change="dropdownChange">
             </v-select>
           </v-flex>
         </v-layout>
@@ -156,7 +156,7 @@ import Event from "pubsub-js";
 import * as options from "options/options";
 
 export default {
-  name: 'p-photo-toolbar',
+  name: 'PPhotoToolbar',
   props: {
     dirty: Boolean,
     filter: Object,
diff --git a/frontend/src/component/photo/viewer.vue b/frontend/src/component/photo/viewer.vue
index d98b97d33..fd8354b27 100644
--- a/frontend/src/component/photo/viewer.vue
+++ b/frontend/src/component/photo/viewer.vue
@@ -2,7 +2,7 @@
   <div id="p-photo-viewer" class="p-viewer pswp" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="pswp__bg"></div>
     <div class="pswp__scroll-wrap">
-      <div class="pswp__container" v-bind:class="{ 'slideshow': slideshow.active }">
+      <div class="pswp__container" :class="{ 'slideshow': slideshow.active }">
         <div class="pswp__item"></div>
         <div class="pswp__item"></div>
         <div class="pswp__item"></div>
@@ -17,24 +17,24 @@
 
           <button class="pswp__button pswp__button--close action-close" :title="$gettext('Close')"></button>
 
-          <button class="pswp__button action-download" style="background: none;" @click.exact="onDownload"
-                  :title="$gettext('Download')" v-if="config.settings.features.download">
+          <button v-if="config.settings.features.download" class="pswp__button action-download" style="background: none;"
+                  :title="$gettext('Download')" @click.exact="onDownload">
             <v-icon size="16" color="white">get_app</v-icon>
           </button>
 
-          <button class="pswp__button action-edit hidden-shared-only" style="background: none;" @click.exact="onEdit"
-                  :title="$gettext('Edit')">
+          <button class="pswp__button action-edit hidden-shared-only" style="background: none;" :title="$gettext('Edit')"
+                  @click.exact="onEdit">
             <v-icon size="16" color="white">edit</v-icon>
           </button>
 
           <button class="pswp__button action-select" style="background: none;"
-                  @click.exact="onSelect" :title="$gettext('Select')">
+                  :title="$gettext('Select')" @click.exact="onSelect">
             <v-icon v-if="selection.length && $clipboard.has(item)" size="16" color="white">check_circle</v-icon>
             <v-icon v-else size="16" color="white">radio_button_off</v-icon>
           </button>
 
           <button class="pswp__button action-like hidden-shared-only" style="background: none;"
-                  @click.exact="onLike" :title="$gettext('Like')">
+                  :title="$gettext('Like')" @click.exact="onLike">
             <v-icon v-if="item.favorite" size="16" color="white">favorite</v-icon>
             <v-icon v-else size="16" color="white">favorite_border</v-icon>
           </button>
@@ -44,8 +44,8 @@
 
           <button class="pswp__button pswp__button--zoom action-zoom" :title="$gettext('Zoom in/out')"></button>
 
-          <button class="pswp__button" style="background: none;" @click.exact="onSlideshow"
-                  :title="$gettext('Start/Stop Slideshow')">
+          <button class="pswp__button" style="background: none;" :title="$gettext('Start/Stop Slideshow')"
+                  @click.exact="onSlideshow">
             <v-icon v-show="!interval" size="18" color="white">play_arrow</v-icon>
             <v-icon v-show="interval" size="16" color="white">pause</v-icon>
           </button>
@@ -79,15 +79,15 @@
 </template>
 
 <script>
-import 'photoswipe/dist/photoswipe.css'
-import 'photoswipe/dist/default-skin/default-skin.css'
+import 'photoswipe/dist/photoswipe.css';
+import 'photoswipe/dist/default-skin/default-skin.css';
 import Event from "pubsub-js";
 import Thumb from "model/thumb";
 import Photo from "model/photo";
 import Notify from "common/notify";
 
 export default {
-  name: "p-photo-viewer",
+  name: "PPhotoViewer",
   data() {
     return {
       selection: this.$clipboard.selection,
@@ -202,7 +202,7 @@ export default {
           index = i;
         }
 
-        return p.uid
+        return p.uid;
       });
 
       let album = null;
@@ -212,5 +212,5 @@ export default {
       Event.publish("dialog.edit", {selection, album, index}); // Open Edit Dialog
     }
   }
-}
+};
 </script>
diff --git a/frontend/src/share/photo/list.vue b/frontend/src/share/photo/list.vue
index baf081879..7d70327e0 100644
--- a/frontend/src/share/photo/list.vue
+++ b/frontend/src/share/photo/list.vue
@@ -133,7 +133,7 @@ export default {
     photos: function (photos) {
       this.selected.splice(0);
 
-      for (let i = 0; i <= photos.length; i++) {
+      for (let i = 0; i < photos.length; i++) {
         if (this.$clipboard.has(photos[i])) {
           this.selected.push(photos[i]);
         }
@@ -194,7 +194,7 @@ export default {
     refreshSelection() {
       this.selected.splice(0);
 
-      for (let i = 0; i <= this.photos.length; i++) {
+      for (let i = 0; i < this.photos.length; i++) {
         if (this.$clipboard.has(this.photos[i])) {
           this.selected.push(this.photos[i]);
         }