From 9387b8e3e8adc218f458c104905b61ea921593d4 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Sat, 15 Jun 2019 14:37:29 -0700
Subject: [PATCH] Frontend: Add refresh button and automatically close search
 details on small devices

---
 frontend/src/component/p-photo-search.vue | 23 +++++++++++++++++------
 frontend/src/pages/photos.vue             | 16 ++++++++++------
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/p-photo-search.vue b/frontend/src/component/p-photo-search.vue
index ee042abf9..0d91c1fd7 100644
--- a/frontend/src/component/p-photo-search.vue
+++ b/frontend/src/component/p-photo-search.vue
@@ -16,7 +16,11 @@
 
             <v-spacer></v-spacer>
 
-            <v-btn icon @click="searchExpanded = !searchExpanded" id="advancedMenu">
+            <v-btn icon @click.stop="refresh">
+                <v-icon>refresh</v-icon>
+            </v-btn>
+
+            <v-btn icon @click.stop="searchExpanded = !searchExpanded" id="advancedMenu">
                 <v-icon>{{ searchExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</v-icon>
             </v-btn>
         </v-toolbar>
@@ -28,7 +32,7 @@
             <v-card-text>
                 <v-layout row wrap>
                     <v-flex xs12 sm6 md3 pa-2 id="countriesFlex">
-                        <v-select @change="filterChange"
+                        <v-select @change="dropdownChange"
                                   label="Country"
                                   flat solo hide-details
                                   color="blue-grey"
@@ -39,7 +43,7 @@
                         </v-select>
                     </v-flex>
                     <v-flex xs12 sm6 md3 pa-2 id="cameraFlex">
-                        <v-select @change="filterChange"
+                        <v-select @change="dropdownChange"
                                   label="Camera"
                                   flat solo hide-details
                                   color="blue-grey"
@@ -50,7 +54,7 @@
                         </v-select>
                     </v-flex>
                     <v-flex xs12 sm6 md3 pa-2 id="viewFlex">
-                        <v-select @change="settingsChange"
+                        <v-select @change="dropdownChange"
                                   label="View"
                                   flat solo hide-details
                                   color="blue-grey"
@@ -60,7 +64,7 @@
                         </v-select>
                     </v-flex>
                     <v-flex xs12 sm6 md3 pa-2 id="timeFlex">
-                        <v-select @change="filterChange"
+                        <v-select @change="dropdownChange"
                                   label="Sort By"
                                   flat solo hide-details
                                   color="blue-grey"
@@ -79,8 +83,8 @@
         props: {
             filter: Object,
             settings: Object,
+            refresh: Function,
             filterChange: Function,
-            settingsChange: Function,
         },
         data() {
             const cameras = [{ID: 0, CameraModel: 'All Cameras'}].concat(this.$config.getValue('cameras'));
@@ -109,6 +113,13 @@
             };
         },
         methods: {
+            dropdownChange() {
+                this.filterChange();
+
+                if (window.innerWidth < 600) {
+                    this.searchExpanded = false;
+                }
+            },
             clearQuery() {
                 this.filter.q = '';
                 this.filterChange();
diff --git a/frontend/src/pages/photos.vue b/frontend/src/pages/photos.vue
index 69de52f6b..d0f3f909b 100644
--- a/frontend/src/pages/photos.vue
+++ b/frontend/src/pages/photos.vue
@@ -3,7 +3,7 @@
          :infinite-scroll-distance="10" :infinite-scroll-listen-for-event="'scrollRefresh'">
 
         <p-photo-search :settings="settings" :filter="filter" :filter-change="updateQuery"
-                        :settings-change="updateQuery"></p-photo-search>
+                        :refresh="refresh"></p-photo-search>
 
         <v-container fluid>
             <p-photo-clipboard :refresh="refresh" :selection="selection"></p-photo-clipboard>
@@ -28,7 +28,7 @@
             staticFilter: Object
         },
         watch: {
-            '$route' () {
+            '$route'() {
                 const query = this.$route.query;
 
                 this.filter.q = query['q'];
@@ -67,14 +67,14 @@
                 let queryParam = this.$route.query['view'];
                 let storedType = window.localStorage.getItem("photo_view_type");
 
-                if(queryParam) {
+                if (queryParam) {
                     window.localStorage.setItem("photo_view_type", queryParam);
                     return queryParam;
-                } else if(storedType) {
+                } else if (storedType) {
                     return storedType;
-                } else if(window.innerWidth < 960) {
+                } else if (window.innerWidth < 960) {
                     return 'mosaic';
-                } else if(window.innerWidth > 1600) {
+                } else if (window.innerWidth > 1600) {
                     return 'details';
                 }
 
@@ -153,7 +153,11 @@
             },
             refresh() {
                 this.lastFilter = {};
+                const pageSize = this.pageSize;
+                this.pageSize = this.offset + pageSize;
                 this.search();
+                this.offset = this.pageSize;
+                this.pageSize = pageSize;
             },
             search() {
                 this.scrollDisabled = true;