feature: Processing Dialog

huibizhang · Jul 6, 2023 · 04638ef · 04638ef
1 parent 8764ade
commit 04638ef
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 3 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -127,6 +127,8 @@
         @cancel="lightboxOpened = false"
       />
 
+      <Processing v-if="processForm" />
+
       <UpdateForm
         v-bind="updateInfo"
         :formOpen="updateForm"
@@ -142,6 +144,7 @@ import Home from "./components/Home.vue";
 import PhotoClass from "./components/PhotoClass.vue";
 import UpdateForm from "./components/UpdateForm.vue";
 import Lightbox from "./components/Lightbox.vue";
+import Processing from "./components/Processing.vue";
 
 // https://github.com/huibizhang/photolisting/releases/download/v0.0.0/photolisting-Setup-0.0.0.exe
 
@@ -150,7 +153,7 @@ export default {
     return {
       directory: null,
       files: [],
-
+      fileListScreen: false,
       nameDict: {
         5: "A",
         4: "B",
@@ -193,6 +196,7 @@ export default {
       updateForm: false,
       lightboxIndex: -1,
       lightboxOpened: false,
+      processForm: false,
     };
   },
   mounted() {
@@ -212,7 +216,7 @@ export default {
       console.log(checkPath);
       if (checkPath) {
         this.fileListScreen = true;
-
+        this.processForm = true;
         this.preloadDirectory();
       }
     },
@@ -304,6 +308,8 @@ export default {
       for (let i = 0; i < files.length; i++) {
         this.files.push(await this.createFile(files[i], i));
       }
+
+      this.processForm = false;
     },
     changeRating(nextRating) {
       this.getCheckedFiles().forEach(
@@ -393,6 +399,6 @@ export default {
       }
     },
   },
-  components: { Home, PhotoClass, UpdateForm, Lightbox },
+  components: { Home, PhotoClass, UpdateForm, Lightbox, Processing },
 };
 </script>
diff --git a/src/components/Processing.vue b/src/components/Processing.vue
@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="absolute left-0 top-0 z-20 flex h-screen w-screen items-center justify-center p-5 transition-all"
+    :class="formOpen ? '' : 'pointer-events-none opacity-0'"
+  >
+    <div class="absolute left-0 top-0 h-full w-full bg-black/50"></div>
+    <div
+      class="z-10 flex w-full max-w-sm flex-col items-center overflow-hidden rounded-lg bg-stone-800 shadow-md transition-all"
+      :class="formOpen ? 'delay-150' : 'scale-0'"
+    >
+      <div class="flex items-center justify-center space-x-5 p-5 px-3">
+        <div class="text-lg text-white">相片載入中</div>
+        <svg
+          class="h-6 w-6 animate-spin text-blue-500"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            class="opacity-100"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    formOpen: { default: true },
+  },
+};
+</script>
+
+<style></style>