From 757a33543da545fb67fd9ac828db6060ae7eafae Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Thu, 5 Dec 2019 04:54:31 +0100
Subject: [PATCH] Albums: Autocomplete for add to album dialog #15

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
---
 .../src/component/album/p-photo-search.vue    |  2 +-
 frontend/src/component/p-photo-search.vue     |  2 +-
 frontend/src/dialog/p-photo-album-dialog.vue  | 56 ++++++++++++++-----
 frontend/src/pages/albums.vue                 |  1 -
 4 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/frontend/src/component/album/p-photo-search.vue b/frontend/src/component/album/p-photo-search.vue
index f1b312e5d..4ea5b4fb4 100644
--- a/frontend/src/component/album/p-photo-search.vue
+++ b/frontend/src/component/album/p-photo-search.vue
@@ -2,7 +2,7 @@
     <v-form ref="form" autocomplete="off" class="p-photo-search p-album-photo-search" lazy-validation @submit.prevent="filterChange" dense>
         <v-toolbar flat color="secondary">
             <v-text-field class="pt-3 pr-3 p-search-field"
-                          autocomplete="off"
+                          browser-autocomplete="off"
                           single-line
                           label="Search"
                           prepend-inner-icon="search"
diff --git a/frontend/src/component/p-photo-search.vue b/frontend/src/component/p-photo-search.vue
index 770a2d826..cd95587ba 100644
--- a/frontend/src/component/p-photo-search.vue
+++ b/frontend/src/component/p-photo-search.vue
@@ -2,7 +2,7 @@
     <v-form ref="form" autocomplete="off" class="p-photo-search" lazy-validation @submit.prevent="filterChange" dense>
         <v-toolbar flat color="secondary">
             <v-text-field class="pt-3 pr-3 p-search-field"
-                          autocomplete="off"
+                          browser-autocomplete="off"
                           single-line
                           label="Search"
                           prepend-inner-icon="search"
diff --git a/frontend/src/dialog/p-photo-album-dialog.vue b/frontend/src/dialog/p-photo-album-dialog.vue
index c02ff995d..72154b292 100644
--- a/frontend/src/dialog/p-photo-album-dialog.vue
+++ b/frontend/src/dialog/p-photo-album-dialog.vue
@@ -7,16 +7,19 @@
                         <v-icon size="54" color="grey lighten-1">folder</v-icon>
                     </v-flex>
                     <v-flex xs9 text-xs-left align-self-center>
-                        <v-select
-                                  label="Album"
-                                  flat solo hide-details
-                                  color="secondary-dark"
-                                  item-value="AlbumUUID"
-                                  item-text="AlbumName"
-                                  v-model="album"
-                                  :items="config.albums">
-                        </v-select>
-                        <!-- div class="subheading pr-1">Add to album</div -->
+                        <v-autocomplete
+                                v-model="album"
+                                :items="albums"
+                                :search-input.sync="search"
+                                :loading="loading"
+                                hide-details
+                                item-text="AlbumName"
+                                item-value="AlbumUUID"
+                                label="Select album"
+                                color="secondary-dark"
+                                flat solo
+                        >
+                        </v-autocomplete>
                     </v-flex>
                     <v-flex xs12 text-xs-right class="pt-3">
                         <v-btn @click.stop="cancel" depressed color="grey lighten-3" class="p-photo-dialog-cancel">
@@ -32,17 +35,19 @@
     </v-dialog>
 </template>
 <script>
+    import Album from "../model/album";
+
     export default {
         name: 'p-photo-album-dialog',
         props: {
             show: Boolean,
         },
         data() {
-            const defaultAlbum = this.$config.values.albums[0];
-
             return {
-                album: defaultAlbum.AlbumUUID,
-                config: this.$config.values,
+                loading: true,
+                search: null,
+                album: "",
+                albums: [],
             }
         },
         methods: {
@@ -52,6 +57,27 @@
             confirm() {
                 this.$emit('confirm', this.album);
             },
-        }
+        },
+        updated() {
+            if(this.albums.length > 0) {
+                this.loading = false;
+                return;
+            }
+
+            const params = {
+                q: "",
+                count: 1000,
+                offset: 0,
+            };
+
+            Album.search(params).then(response => {
+                if(response.models.length > 0) {
+                    this.album = response.models[0].AlbumUUID;
+                }
+
+                this.albums = response.models;
+                this.loading = false;
+            });
+        },
     }
 </script>
diff --git a/frontend/src/pages/albums.vue b/frontend/src/pages/albums.vue
index 96b791036..46dc9980d 100644
--- a/frontend/src/pages/albums.vue
+++ b/frontend/src/pages/albums.vue
@@ -112,7 +112,6 @@
 
 <script>
     import Album from "model/album";
-    import Notify from "common/notify";
     import {DateTime} from "luxon";
 
     export default {