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

@@ -12,6 +12,7 @@
         <v-btn icon class="ml-n1 mr-2" @click="openDialog = true">
           <v-icon>$ayiEdit</v-icon>
         </v-btn>
+        <img class="grey lighten-2" :src="imgUrl" />
       </div>
     </template>
 
@@ -24,11 +25,19 @@
           <v-card-text>
             <template v-if="$vuetify.breakpoint.smAndUp">
               <!-- WIDE VIEW -->
-              <Sign data-cy="sign" />
+              <vueSignature
+                ref="sigCtrl"
+                :sig-option="sigOption"
+                :disabled="disabled"
+              ></vueSignature>
             </template>
             <template v-else>
               <!-- NARROW VIEW -->
-              <Sign data-cy="sign" />
+              <vueSignature
+                ref="sigCtrl"
+                :sig-option="sigOption"
+                :disabled="disabled"
+              ></vueSignature>
             </template>
 
             <template>
@@ -45,13 +54,9 @@
             <v-btn color="blue darken-1" text @click="cancelDialog()">{{
               $ay.t("Cancel")
             }}</v-btn>
-            <v-btn
+            <v-btn color="blue darken-1" text @click="save()">{{
-              color="blue darken-1"
+              $ay.t("OK")
-              :disabled="selectedStatus == null"
+            }}</v-btn>
-              text
-              @click="save()"
-              >{{ $ay.t("OK") }}</v-btn
-            >
           </v-card-actions>
         </v-card>
       </v-dialog>
@@ -62,15 +67,19 @@
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////
 /*  XXXeslint-disable    */
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
-import Sign from "./sign.vue";
+import vueSignature from "vue-signature";
 export default {
   components: {
-    Sign
+    vueSignature
   },
   data() {
     return {
       selectedStatus: null,
-      openDialog: false
+      openDialog: false,
+      sigOption: {
+        penColor: "rgb(0, 0, 0)",
+        backgroundColor: "rgb(245,245,245)"
+      }
     };
   },
 
@@ -98,6 +107,13 @@ export default {
     },
 
     save() {
+      let svg = this.$refs.sigCtrl.save("image/svg+xml");
+      if (this.variant == "customer") {
+        this.value.customerSignature = svg;
+      } else {
+        this.value.techSignature = svg;
+      }
+      this.$emit("change");
       this.openDialog = false;
     },
     cancelDialog() {
@@ -113,6 +129,20 @@ export default {
       }
     }
   },
-  computed: {}
+  computed: {
+    imgUrl: function() {
+      let sig = null;
+      if (this.variant == "customer") {
+        sig = this.value.customerSignature;
+      } else {
+        sig = this.value.techSignature;
+      }
+      if (sig != null && sig.length > 0 && sig.includes("svg")) {
+        return sig;
+      } else {
+        return null;
+      }
+    }
+  }
 };
 </script>

ayanova/src/views/svc-schedule.vue

@@ -1,17 +1,15 @@
 <template>
   <div>
-    <Sign data-cy="sign" />
     <UnderConstruction data-cy="underconstruction" />
   </div>
 </template>
 
 <script>
 import UnderConstruction from "../components/underconstruction.vue";
-import Sign from "../components/sign.vue";
+
 export default {
   components: {
-    UnderConstruction,
+    UnderConstruction
-    Sign
   },
   beforeCreate() {
     window.$gz.eventBus.$emit("menu-change", {