ayanova/src/components/work-order-signature.vue

@@ -8,9 +8,9 @@
     </div>
 
     <template>
-      <div class="mb-6 mb-sm-0" @click="openDialog = true">
+      <div class="mb-6 mb-sm-0" @click="showSign()">
         <v-row>
-          <v-btn icon class="ml-n1 mr-2" @click="openDialog = true">
+          <v-btn icon class="ml-n1 mr-2">
             <v-icon>$ayiEdit</v-icon>
           </v-btn>
           <img class="grey lighten-5" height="40px" :src="imgUrl" />
@@ -25,22 +25,12 @@
             <span class="text-h5">{{ $ay.t("Signaturehere") }}</span>
           </v-card-title>
           <v-card-text>
-            <template v-if="$vuetify.breakpoint.smAndUp">
-              <!-- WIDE VIEW -->
-              <vueSignature
-                ref="sigCtrl"
-                :sig-option="sigOption"
-                :disabled="disabled"
-              ></vueSignature>
-            </template>
-            <template v-else>
-              <!-- NARROW VIEW -->
-              <vueSignature
-                ref="sigCtrl"
-                :sig-option="sigOption"
-                :disabled="disabled"
-              ></vueSignature>
-            </template>
+            <vueSignature
+              ref="sigCtrl"
+              :sig-option="sigOption"
+              :disabled="disabled || imgUrl != null"
+              :default-url="imgUrl"
+            ></vueSignature>
 
             <template>
               <div class="mt-8">
@@ -74,6 +64,7 @@ export default {
   components: {
     vueSignature
   },
+
   data() {
     return {
       selectedStatus: null,
@@ -104,17 +95,31 @@ export default {
   },
 
   methods: {
+    showSign() {
+      //If it's already signed it shoudl be disabled until they click clear otherwise it's ready to sign immediately
+      //IOW can only view sig dialog, sign or clear, can't reopen and draw more (doesnt' work anyway)
+      const vm = this;
+
+      this.openDialog = true;
+    },
     form() {
       return window.$gz.form;
     },
-
     save() {
       let svg = this.$refs.sigCtrl.save("image/svg+xml");
+      if (this.$refs.sigCtrl.isEmpty()) {
+        console.log("IS EMPTY");
+        svg = null;
+      }
       if (this.variant == "customer") {
         this.value.customerSignature = svg;
+        this.value.customerSignatureCaptured = window.$gz.locale.nowUTC8601String();
       } else {
         this.value.techSignature = svg;
+        this.value.techSignatureCaptured = window.$gz.locale.nowUTC8601String();
       }
+
+      console.log("SVG size IS ", svg == null ? 0 : svg.length);
       this.$emit("change");
       this.openDialog = false;
     },
@@ -122,8 +127,15 @@ export default {
       this.openDialog = false;
     },
     erase() {
-      this.selectedStatus = null;
-      this.openDialog = false;
+      if (this.variant == "customer") {
+        this.value.customerSignature = null;
+        this.value.customerSignatureCaptured = null;
+      } else {
+        this.value.techSignature = null;
+        this.value.techSignatureCaptured = null;
+      }
+      this.$refs.sigCtrl.clear();
+      this.$emit("change");
     },
     fieldValueChanged(ref) {
       if (!this.pvm.formState.loading && !this.pvm.formState.readonly) {