Changeset 35751 for main/trunk/model-interfaces-dev/atea/ocr/src/components/MainPage.vue

Timestamp:

2021-11-25T14:58:41+13:00 (2 years ago)

Author:

cstephen

Message:

Lazy-load jimp to improve startup time.
Add modal dialog.
Confirm with user before resetting.
npm: Add pdf.js

File:

• main/trunk/model-interfaces-dev/atea/ocr/src/components/MainPage.vue (modified) (7 diffs)

main/trunk/model-interfaces-dev/atea/ocr/src/components/MainPage.vue

@@ -1 +1 @@
 <template>
 <div class="main-page-root">
+    <modal-dialog v-if="modal.show" :title="modal.title" :description="modal.description" :buttons="modal.buttons" @close="onModalClose" />
     <edit-page v-if="showEditor" class="image-editor" :src="imageUrl" :imageBuffer="imageBuffer"
         @closeAndDiscard="onEditorCloseRequested" @closeAndSave="onEditorSave" />
@@ -23 +24 @@
                 </button>
 
-                <button class="btn-primary" @click="reset" :disabled="ocrInProgress">
+                <button class="btn-primary" @click="reset(false)" :disabled="ocrInProgress">
                     <span class="material-icons">restart_alt</span>
                     <span>{{ translations.get("MainPage_NewImage") }}</span>
@@ -144 +145 @@
 import { mapState } from "vuex";
 import EditPage from "./EditPage.vue";
+import ModalDialog from "./ModalDialog.vue"
 import OcrService, { OcrOptions } from "../js/OcrService"
 import { log } from "../js/Util";
@@ -152 +154 @@
     name: "MainPage",
     components: {
-        EditPage
+        EditPage,
+        ModalDialog
     },
     data() {
@@ -162 +165 @@
             ocrInProgress: false,
             ocrResult: null,
-            showEditor: false
+            showEditor: false,
+            modal: {
+                show: false,
+                title: "",
+                description: "",
+                buttons: []
+            }
         }
     },
@@ -242 +251 @@
         },
 
-        reset() {
+        reset(hard) {
+            if (!hard) {
+                // TODO: Translate
+                this.modal.title = this.translations.get("NewImageModal_Title");
+                this.modal.description = this.translations.get("NewImageModal_Description");
+                this.modal.buttons = [
+                    this.translations.get("NewImageModal_ButtonContinue"),
+                    this.translations.get("NewImageModal_ButtonCancel")
+                ]
+                this.modal.resetConfirmation = true;
+                this.modal.show = true;
+
+                return;
+            }
+
             URL.revokeObjectURL(this.imageUrl);
             this.imageUrl = null;
@@ -249 +272 @@
             this.showEditor = false;
             this.$refs.fileInput.value = "";
+        },
+
+        onModalClose(button) {
+            this.modal.show = false;
+
+            if (this.modal.resetConfirmation) {
+                if (button === "Continue") {
+                    this.reset(true);
+                }
+
+                this.modal.resetConfirmation = false;
+            }
         }
     }