Improve settings experience

src/components/Settings.vue

@@ -24,27 +24,27 @@
     <div>
         <label for="timeline-path">{{ t('memories', 'Timeline Path') }}</label>
         <input id="timeline-path"
+            @click="chooseTimelinePath"
             v-model="config_timelinePath"
             type="text">
 
         <label for="folders-path">{{ t('memories', 'Folders Path') }}</label>
         <input id="folders-path"
+            @click="chooseFoldersPath"
             v-model="config_foldersPath"
             type="text">
 
         <NcCheckboxRadioSwitch :checked.sync="config_showHidden"
+            @update:checked="updateShowHidden"
             type="switch">
             {{ t('memories', 'Show hidden folders') }}
         </NcCheckboxRadioSwitch>
 
         <NcCheckboxRadioSwitch :checked.sync="config_squareThumbs"
+            @update:checked="updateSquareThumbs"
             type="switch">
             {{ t('memories', 'Square grid mode') }}
         </NcCheckboxRadioSwitch>
-
-        <button @click="updateAll()">
-            {{ t('memories', 'Update') }}
-        </button>
     </div>
 </template>
 
@@ -58,7 +58,7 @@ input[type=text] {
 import { Component, Mixins } from 'vue-property-decorator';
 import GlobalMixin from '../mixins/GlobalMixin';
 
-import { showError } from '@nextcloud/dialogs'
+import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import UserConfig from '../mixins/UserConfig'
 
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
@@ -69,24 +69,42 @@ import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
     },
 })
 export default class Settings extends Mixins(UserConfig, GlobalMixin) {
-    async updateAll() {
+    async chooseFolder(title: string, initial: string) {
-        // Update localStorage
+        const picker = getFilePickerBuilder(title)
-        localStorage.setItem('memories_squareThumbs', this.config_squareThumbs ? '1' : '0');
+				.setMultiSelect(false)
+				.setModal(true)
+				.setType(1)
+				.addMimeTypeFilter('httpd/unix-directory')
+				.allowDirectories()
+				.startAt(initial)
+				.build()
 
-        // Settings list
+        return await picker.pick();
-        const settings = ['showHidden', 'timelinePath', 'foldersPath'];
+    }
 
-        // Update all
+    async chooseTimelinePath() {
-        try {
+        const newPath = await this.chooseFolder(this.t('memories', 'Choose the root of your timeline'), this.config_timelinePath);
-            const p = await Promise.all(settings.map(async (setting) => this.updateSetting(setting)));
+        if (newPath !== this.config_timelinePath) {
-            if (p.some((r) => !r || r.status !== 200)) {
+            this.config_timelinePath = newPath;
-                showError(this.t('memories', 'Error updating settings'));
+            await this.updateSetting('timelinePath');
-            } else {
-                window.location.reload();
-            }
-        } catch (e) {
-            showError(e?.response?.data?.message || this.t('memories', 'Error updating settings'));
         }
     }
+
+    async chooseFoldersPath() {
+        const newPath = await this.chooseFolder(this.t('memories', 'Choose the root for the folders view'), this.config_foldersPath);
+        if (newPath !== this.config_foldersPath) {
+            this.config_foldersPath = newPath;
+            await this.updateSetting('foldersPath');
+        }
+    }
+
+    async updateSquareThumbs() {
+        console.error('updateSquareThumbs', this.config_squareThumbs);
+        await this.updateSetting('squareThumbs');
+    }
+
+    async updateShowHidden() {
+        await this.updateSetting('showHidden');
+    }
 }
 </script>

src/components/Timeline.vue

@@ -104,6 +104,7 @@ import { IDay, IFolder, IHeadRow, IPhoto, IRow, IRowType } from "../types";
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import { NcEmptyContent } from '@nextcloud/vue';
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import GlobalMixin from '../mixins/GlobalMixin';
 import UserConfig from "../mixins/UserConfig";
 
@@ -153,8 +154,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
     private list: IRow[] = [];
     /** Computed number of columns */
     private numCols = 0;
-    /** Keep all images square */
-    private squareMode = false;
     /** Header rows for dayId key */
     private heads: { [dayid: number]: IHeadRow } = {};
 
@@ -208,10 +207,12 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
     }
 
     beforeDestroy() {
+        unsubscribe(this.config_eventName, this.refresh);
         this.resetState();
     }
 
     created() {
+        subscribe(this.config_eventName, this.refresh);
         window.addEventListener("resize", this.handleResizeWithDelay);
     }
 
@@ -326,12 +327,9 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
             // Mobile
             this.numCols = MOBILE_NUM_COLS;
             this.rowHeight = Math.floor(this.rowWidth / this.numCols);
-            this.squareMode = true;
         } else {
             // Desktop
-            this.squareMode = this.config_squareThumbs;
+            if (this.config_squareThumbs) {
-
-            if (this.squareMode) {
                 // Set columns first, then height
                 this.numCols = Math.max(3, Math.floor(this.rowWidth / DESKTOP_ROW_HEIGHT));
                 this.rowHeight = Math.floor(this.rowWidth / this.numCols);
@@ -814,6 +812,9 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
             row.photos = [];
         }
 
+        // Force all to square
+        const squareMode = this.isMobile() || this.config_squareThumbs;
+
         // Create justified layout with correct params
         const justify = getLayout(day.detail.map(p => {
             return {
@@ -824,7 +825,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
         }), {
             rowWidth: this.rowWidth,
             rowHeight: this.rowHeight,
-            squareMode: this.squareMode,
+            squareMode: squareMode,
             numCols: this.numCols,
             allowBreakout: this.allowBreakout(),
             seed: dayId,
@@ -900,7 +901,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
             const setPos = () => {
                 photo.dispW = utils.roundHalf(jbox.width);
                 photo.dispX = utils.roundHalf(jbox.left);
-                photo.dispH = this.squareMode ? utils.roundHalf(jbox.height) : 0;
+                photo.dispH = squareMode ? utils.roundHalf(jbox.height) : 0;
                 photo.dispY = 0;
                 photo.dispRowNum = row.num;
             };

src/mixins/UserConfig.ts

@@ -27,6 +27,7 @@ import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
 
 const eventName = 'memories:user-config-changed'
+const localSettings = ['squareThumbs', 'showFaceRect'];
 
 @Component
 export default class UserConfig extends Vue {
@@ -39,6 +40,8 @@ export default class UserConfig extends Vue {
     config_squareThumbs = localStorage.getItem('memories_squareThumbs') === '1';
     config_showFaceRect = localStorage.getItem('memories_showFaceRect') === '1';
 
+    config_eventName = eventName;
+
     created() {
         subscribe(eventName, this.updateLocalSetting)
     }
@@ -48,17 +51,26 @@ export default class UserConfig extends Vue {
     }
 
     updateLocalSetting({ setting, value }) {
-        this[setting] = value
+        this['config_' + setting] = value
     }
 
     async updateSetting(setting: string) {
         const value = this['config_' + setting]
-        // Long time save setting
+
-        const res = await axios.put(generateUrl('apps/memories/api/config/' + setting), {
+        if (localSettings.includes(setting)) {
-            value: value.toString(),
+            if (typeof value === 'boolean') {
-        })
+                localStorage.setItem('memories_' + setting, value ? '1' : '0')
+            } else {
+                localStorage.setItem('memories_' + setting, value)
+            }
+        } else {
+            // Long time save setting
+            await axios.put(generateUrl('apps/memories/api/config/' + setting), {
+                value: value.toString(),
+            });
+        }
+
         // Visible elements update setting
-        emit(eventName, { setting, value })
+        emit(eventName, { setting, value });
-        return res;
     }
 }