🔨 Add loading to webdav config form

2024-09-11 16:29:07 +02:00 · 2022-10-26 11:41:42 +02:00 · 2022-10-26 11:41:42 +02:00 · 11493aa6f5
commit 11493aa6f5
parent a2b9007520
5 changed files with 37 additions and 15 deletions
--- a/nextcloud_backup/frontend/package.json
+++ b/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": {
--- a/nextcloud_backup/frontend/pnpm-lock.yaml
+++ b/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:
-    resolution: {integrity: sha512-7UX2rAcMPGdJ0SGAK+wUvlJTHR0KasYILhg7dV9hLyv9SfaTX4tbOQnSQVf4mXzdFB+5jDyaTs+bOYMVeoqXYg==}
+  /vuetify/3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y:
+    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:
--- a/nextcloud_backup/frontend/src/App.vue
+++ b/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>
--- a/nextcloud_backup/frontend/src/components/settings/WebdavConfigForm.vue
+++ b/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;
  });
 }

--- a/nextcloud_backup/frontend/src/components/settings/WebdavConfigMenu.vue
+++ b/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>