🔨 Add loading to webdav config form

nextcloud_backup/frontend/package.json

@@ -19,7 +19,7 @@
     "pinia": "^2.0.23",
     "roboto-fontface": "*",
     "vue": "^3.2.40",
-    "vuetify": "3.0.0-beta.14",
+    "vuetify": "3.0.0-beta.15",
     "webfontloader": "^1.0.0"
   },
   "devDependencies": {

nextcloud_backup/frontend/pnpm-lock.yaml

@@ -24,7 +24,7 @@ specifiers:
   vite-plugin-vuetify: ^1.0.0-alpha.12
   vue: ^3.2.40
   vue-tsc: 1.0.7
-  vuetify: 3.0.0-beta.14
+  vuetify: 3.0.0-beta.15
   webfontloader: ^1.0.0
 
 dependencies:
@@ -36,7 +36,7 @@ dependencies:
   pinia: 2.0.23_rg374xhldfcyvjtaj3qktyfz5y
   roboto-fontface: 0.10.0
   vue: 3.2.40
-  vuetify: 3.0.0-beta.14_vdkwhj2kz5kpysy3rwb432nm3y
+  vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
   webfontloader: 1.6.28
 
 devDependencies:
@@ -53,7 +53,7 @@ devDependencies:
   prettier: 2.7.1
   typescript: 4.7.4
   vite: 3.1.7
-  vite-plugin-vuetify: 1.0.0-alpha.17_jvcjrjiyr77axku57qj2zhmwla
+  vite-plugin-vuetify: 1.0.0-alpha.17_g64smqxqrz57uhsly7clskj5fy
   vue-tsc: 1.0.7_typescript@4.7.4
 
 packages:
@@ -482,7 +482,7 @@ packages:
       '@types/node': 16.11.65
     dev: true
 
-  /@vuetify/loader-shared/1.6.0_ufv4csfzemzfiqpf5bhlrg5qhm:
+  /@vuetify/loader-shared/1.6.0_l2xw63bflzffxrhpro723k3mhy:
     resolution: {integrity: sha512-mRvswe5SIecagmKkL1c0UQx5V9ACKLyEGegOOe5vC3ccFH8rMbyI4AVZaAKm/EnGXKirWJ1umL8RQFcGd+C0tw==}
     peerDependencies:
       vue: ^3.0.0
@@ -491,7 +491,7 @@ packages:
       find-cache-dir: 3.3.2
       upath: 2.0.1
       vue: 3.2.40
-      vuetify: 3.0.0-beta.14_vdkwhj2kz5kpysy3rwb432nm3y
+      vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
 
   /acorn-jsx/5.3.2_acorn@8.8.0:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -2150,18 +2150,18 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite-plugin-vuetify/1.0.0-alpha.17_jvcjrjiyr77axku57qj2zhmwla:
+  /vite-plugin-vuetify/1.0.0-alpha.17_g64smqxqrz57uhsly7clskj5fy:
     resolution: {integrity: sha512-lP4vG+Z3LnIEjI8nSE8/MJwDRQK5OnS2i4zHDu36yyD4E7wmPKyIkWJdkfBIsx/O+PU7dGc/3MeLARgr+RErEQ==}
     engines: {node: '>=12'}
     peerDependencies:
       vite: ^2.7.0 || ^3.0.0
       vuetify: ^3.0.0-beta.4
     dependencies:
-      '@vuetify/loader-shared': 1.6.0_ufv4csfzemzfiqpf5bhlrg5qhm
+      '@vuetify/loader-shared': 1.6.0_l2xw63bflzffxrhpro723k3mhy
       debug: 4.3.4
       upath: 2.0.1
       vite: 3.1.7
-      vuetify: 3.0.0-beta.14_vdkwhj2kz5kpysy3rwb432nm3y
+      vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
     transitivePeerDependencies:
       - supports-color
       - vue
@@ -2252,8 +2252,8 @@ packages:
       '@vue/server-renderer': 3.2.40_vue@3.2.40
       '@vue/shared': 3.2.40
 
-  /vuetify/3.0.0-beta.14_vdkwhj2kz5kpysy3rwb432nm3y:
+  /vuetify/3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y:
-    resolution: {integrity: sha512-7UX2rAcMPGdJ0SGAK+wUvlJTHR0KasYILhg7dV9hLyv9SfaTX4tbOQnSQVf4mXzdFB+5jDyaTs+bOYMVeoqXYg==}
+    resolution: {integrity: sha512-Tw4StO4JJxwzN7RIAJ+nBVTaftlk3TqfqCtMLwJY/SO/ciVru+sHtahOpXIbp8B43d/DIRql3mfnrz1ooTSXtQ==}
     engines: {node: ^12.20 || >=14.13}
     peerDependencies:
       vite-plugin-vuetify: ^1.0.0-alpha.12
@@ -2268,7 +2268,7 @@ packages:
       webpack-plugin-vuetify:
         optional: true
     dependencies:
-      vite-plugin-vuetify: 1.0.0-alpha.17_jvcjrjiyr77axku57qj2zhmwla
+      vite-plugin-vuetify: 1.0.0-alpha.17_g64smqxqrz57uhsly7clskj5fy
       vue: 3.2.40
 
   /webfontloader/1.6.28:

nextcloud_backup/frontend/src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <v-app>
+    <navbar-component></navbar-component>
     <v-main>
-      <navbar-component></navbar-component>
+      
       <message-bar></message-bar>
       <webdav-settings-menu></webdav-settings-menu>
     </v-main>

nextcloud_backup/frontend/src/components/settings/WebdavConfigForm.vue

@@ -11,6 +11,8 @@
           hide-details="auto"
           v-model="data.url"
           :error-messages="errors.url"
+          :loading="loading"
+          color="orange"
         ></v-text-field>
       </v-col>
     </v-row>
@@ -24,6 +26,8 @@
           hide-details="auto"
           v-model="data.webdavEndpoint.type"
           :error-messages="errors.type"
+          :loading="loading"
+          color="orange"
         >
         </v-select>
       </v-col>
@@ -39,19 +43,22 @@
           hide-details="auto"
           v-model="data.webdavEndpoint.customEndpoint"
           :error-messages="errors.customEndpoint"
+          :loading="loading"
+          color="orange"
         ></v-text-field>
       </v-col>
     </v-row>
     <v-row>
       <v-col class="d-flex align-content-end">
         <v-switch
-          color="warning"
           label="Allow Self Signed Certificate"
           v-model="data.allowSelfSignedCerts"
           hide-details="auto"
           density="compact"
           inset
           :error-messages="errors.allowSelfSignedCerts"
+          :loading="loading"
+          color="orange"
         ></v-switch>
       </v-col>
     </v-row>
@@ -83,6 +90,8 @@
           hide-details="auto"
           v-model="data.username"
           :error-messages="errors.username"
+          :loading="loading"
+          color="orange"
         >
         </v-text-field>
       </v-col>
@@ -97,6 +106,8 @@
           hide-details="auto"
           v-model="data.password"
           :error-messages="errors.password"
+          :loading="loading"
+          color="orange"
         ></v-text-field>
       </v-col>
     </v-row>
@@ -114,6 +125,8 @@
           hide-details="auto"
           v-model="data.backupDir"
           :error-messages="errors.backupDir"
+          :loading="loading"
+          color="orange"
         ></v-text-field>
       </v-col>
     </v-row>
@@ -131,6 +144,8 @@ import {
 import { ref } from "vue";
 import { HTTPError } from "ky";
 
+const loading = ref(true);
+
 const items = [
   {
     title: "Nextcloud",
@@ -167,13 +182,16 @@ const emit = defineEmits<{
   (e: "success"): void;
   (e: "fail"): void;
   (e: "loaded"): void;
+  (e: "loading"): void;
 }>();
 
 function save() {
+  loading.value = true;
   clearErrors();
   saveWebdavConfig(data.value)
     .then(() => {
       emit("success");
+      loading.value = false;
     })
     .catch(async (reason) => {
       if (reason instanceof HTTPError) {
@@ -186,6 +204,7 @@ function save() {
         }
       }
       emit("fail");
+      loading.value = false;
     });
 }
 
@@ -196,10 +215,11 @@ function clearErrors() {
 }
 
 function loadData() {
-  console.log("ok");
+  emit("loading");
   getWebdavConfig().then((value) => {
     data.value = value;
     emit("loaded");
+    loading.value = false;
   });
 }
 

nextcloud_backup/frontend/src/components/settings/WebdavConfigMenu.vue

@@ -15,6 +15,7 @@
           @fail="saving = false"
           @success="dialogStatusStore.webdav = false"
           @loaded="loading = false"
+          @loading="loading = true"
         ></webdav-settings-form>
       </v-card-text>
       <v-divider></v-divider>