Load config explicitly and remove setup routine of settings component

CHANGELOG.md

@@ -27,12 +27,14 @@
   [#1832](https://github.com/nextcloud/cookbook/pull/1832) @christianlupus
 - Provide id of recipe stub in API endpoints as well to make API consistend with recipe API
   [#1834](https://github.com/nextcloud/cookbook/pull/1834) @christianlupus
-- Hode the button to copy ingredients unless there are some ingredients to copy
+- Hide the button to copy ingredients unless there are some ingredients to copy
   [#1844](https://github.com/nextcloud/cookbook/pull/1844) @christianlupus
 - Allow single tool in JSON+LD import, fixes #1641
   [#1864](https://github.com/nextcloud/cookbook/pull/1844) @seyfeb
 - Allow parsing more ISO 8601 duration strings. See issue [#1749](https://github.com/nextcloud/cookbook/issues/1749)
   [#1871](https://github.com/nextcloud/cookbook/pull/1871) @seyfeb
+- Load config at app loading only once and do not rewrite complete config
+  [#1892](https://github.com/nextcloud/cookbook/pull/1892) @christianlupus
 
 ### Maintenance
 - Fix URL of Transifex after upstream subdomain change

src/components/RecipeView.vue

@@ -130,9 +130,9 @@
             <section class="container">
                 <section class="ingredients">
                     <NcButton
+                        v-if="scaledIngredients.length"
                         class="copy-ingredients"
                         :type="'tertiary'"
-                        v-if="scaledIngredients.length"
                         @click="copyIngredientsToClipboard"
                     >
                         <template #icon>

src/components/SettingsDialog.vue

@@ -188,6 +188,8 @@
 
 import { enableLogging } from "cookbook/js/logging"
 
+import Vue from "vue"
+
 export const SHOW_SETTINGS_EVENT = "show-settings"
 
 const INFO_BLOCK_KEYS = [
@@ -221,25 +223,19 @@
             isOpen: false,
             printImage: false,
             recipeFolder: "",
-            resetPrintImage: true,
             showTagCloudInRecipeList: true,
-            resetTagCloud: true,
             scanningLibrary: false,
-            // By setting the reset value initially to true, it will skip one watch event
-            // (the one when config is loaded at page load)
-            resetInterval: true,
             updateInterval: 0,
             visibleInfoBlocks: [...INFO_BLOCK_KEYS],
-            resetVisibleInfoBlocks: true,
+            writeChanges: true,
         }
     },
     watch: {
         async printImage(newVal, oldVal) {
-            // Avoid infinite loop on page load and when reseting value after failed submit
-            if (this.resetPrintImage) {
-                this.resetPrintImage = false
+            if (!this.writeChanges) {
                 return
             }
+
             try {
                 await api.config.printImage.update(newVal)
                 // Should this check the response of the query? To catch some errors that redirect the page
@@ -248,25 +244,26 @@
                     // prettier-ignore
                     t("cookbook","Could not set preference for image printing"),
                 )
-                this.resetPrintImage = true
                 this.printImage = oldVal
             }
         },
         // eslint-disable-next-line no-unused-vars
         showTagCloudInRecipeList(newVal, oldVal) {
+            if (!this.writeChanges) {
+                return
+            }
+
             this.$store.dispatch("setShowTagCloudInRecipeList", {
                 showTagCloud: newVal,
             })
         },
         async updateInterval(newVal, oldVal) {
-            // Avoid infinite loop on page load and when reseting value after failed submit
-            if (this.resetInterval) {
-                this.resetInterval = false
+            if (!this.writeChanges) {
                 return
             }
+
             try {
                 await api.config.updateInterval.update(newVal)
-                // Should this check the response of the query? To catch some errors that redirect the page
             } catch {
                 await showSimpleAlertModal(
                     // prettier-ignore
@@ -276,40 +273,56 @@
                         }
                     ),
                 )
-                this.resetInterval = true
                 this.updateInterval = oldVal
             }
         },
         async visibleInfoBlocks(newVal, oldVal) {
-            // Avoid infinite loop on page load and when reseting value after failed submit
-            if (this.resetVisibleInfoBlocks) {
-                this.resetVisibleInfoBlocks = false
+            if (!this.writeChanges) {
                 return
             }
+
             try {
                 const data = visibleInfoBlocksEncode(newVal)
                 await api.config.visibleInfoBlocks.update(data)
                 await this.$store.dispatch("refreshConfig")
-                // Should this check the response of the query? To catch some errors that redirect the page
             } catch (err) {
                 // eslint-disable-next-line no-console
                 console.error("Error while trying to save info blocks", err)
                 await showSimpleAlertModal(
                     t("cookbook", "Could not save visible info blocks"),
                 )
-                this.resetVisibleInfoBlocks = true
                 this.visibleInfoBlocks = oldVal
             }
         },
     },
     mounted() {
-        this.setup()
-
         subscribe(SHOW_SETTINGS_EVENT, this.handleShowSettings)
     },
     methods: {
         handleShowSettings() {
             this.isOpen = true
+
+            // Temporarily disable the storage of data
+            this.writeChanges = false
+
+            const { config } = this.$store.state
+
+            if (!config) {
+                throw new Error()
+            }
+
+            this.printImage = config.print_image
+            this.visibleInfoBlocks = visibleInfoBlocksDecode(
+                config.visibleInfoBlocks,
+            )
+            this.showTagCloudInRecipeList =
+                this.$store.state.localSettings.showTagCloudInRecipeList
+            this.updateInterval = config.update_interval
+            this.recipeFolder = config.folder
+
+            Vue.nextTick(() => {
+                this.writeChanges = true
+            })
         },
 
         /**
@@ -348,36 +361,6 @@
             })
         },
 
-        /**
-         * Initial setup
-         */
-        async setup() {
-            try {
-                await this.$store.dispatch("refreshConfig")
-                const { config } = this.$store.state
-                this.resetPrintImage = false
-                this.resetVisibleInfoBlocks = false
-
-                if (!config) {
-                    throw new Error()
-                }
-
-                this.printImage = config.print_image
-                this.visibleInfoBlocks = visibleInfoBlocksDecode(
-                    config.visibleInfoBlocks,
-                )
-                this.showTagCloudInRecipeList =
-                    this.$store.state.localSettings.showTagCloudInRecipeList
-                this.updateInterval = config.update_interval
-                this.recipeFolder = config.folder
-            } catch (err) {
-                this.$log.error("Error setting up SettingsDialog", err)
-                await showSimpleAlertModal(
-                    t("cookbook", "Loading config failed"),
-                )
-            }
-        },
-
         /**
          * Reindex all recipes
          */
@@ -419,7 +402,7 @@
 </script>
 
 <style scoped>
 /* TODO: Use @nextcloud/vue LoadingIcon once we update to 7.0.0 and we won't
  * have to do this */
 .material-design-icon.loading-icon:deep(svg) {
     animation: rotate var(--animation-duration, 0.8s) linear infinite;
@@ -438,16 +421,4 @@
     display: block;
     width: 100%;
 }
-
-/* #app-settings .button { */
-/*     z-index: 2; */
-/*     height: 44px; */
-/*     padding: 0; */
-/*     border-radius: var(--border-radius); */
-/* } */
-
-/* #app-settings .button p { */
-/*     margin: auto; */
-/*     font-size: 13px; */
-/* } */
 </style>

src/guest.js

@@ -27,6 +27,8 @@ Vue.prototype.OC = OC
 // Pass translation engine to Vue
 Vue.prototype.t = window.t
 
+store.dispatch("refreshConfig")
+
 // Start the app once document is done loading
 const App = Vue.extend(AppInvalidGuest)
 new App({

src/main.js

@@ -51,12 +51,14 @@
     flavor: "vanilla",
 })
 
 // TODO: Equivalent library for Vue3 when we make that transition:
 // https://github.com/rlemaigre/vue3-promise-dialog
 Vue.use(ModalDialogs)
 
 setupLogging(Vue)
 
+store.dispatch("refreshConfig")
+
 // Pass translation engine to Vue
 Vue.prototype.t = window.t