ayanova/src/components/sign.vue

@@ -8,7 +8,7 @@
       :disabled="!enabled"
       :default-url="dataUrl"
     ></vueSignature>
-    <vueSignature ref="signature1" :sig-option="option"></vueSignature>
+    <!-- <vueSignature ref="signature1" :sig-option="option"></vueSignature> -->
     <button @click="save">Save</button>
     <button @click="clear">Clear</button>
     <button @click="undo">Undo</button>
@@ -70,7 +70,7 @@ export default {
     return {
       option: {
         penColor: "rgb(0, 0, 0)",
-        backgroundColor: "rgb(255,255,255)"
+        backgroundColor: "rgb(245,245,245)"
       },
 
       dataUrl: null, //"https://avatars2.githubusercontent.com/u/17644818?s=460&v=4"

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

@@ -64,6 +64,35 @@
         />
       </v-col>
 
+      <v-col cols="12" sm="6" lg="4" xl="3">
+        <GzWoSignature
+          v-if="
+            pvm.subRights.states.visible &&
+              form().showMe(this, 'CustomerSignature')
+          "
+          v-model="value"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly"
+          :pvm="pvm"
+          variant="customer"
+          data-cy="customerSignature"
+        />
+      </v-col>
+
+      <v-col cols="12" sm="6" lg="4" xl="3">
+        <GzWoSignature
+          v-if="
+            pvm.subRights.states.visible && form().showMe(this, 'TechSignature')
+          "
+          v-model="value"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly"
+          :pvm="pvm"
+          variant="tech"
+          data-cy="techSignature"
+        />
+      </v-col>
+
       <v-col v-if="form().showMe(this, 'WorkOrderSummary')" cols="12">
         <v-textarea
           v-model="value.notes"
@@ -312,12 +341,12 @@
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 import GzWoState from "./work-order-state.vue";
 import GzWoAddress from "./work-order-address.vue";
-//import GzWoContract from "./work-order-contract.vue";
+import GzWoSignature from "./work-order-signature.vue";
 export default {
   components: {
     GzWoState,
-    GzWoAddress
-    //,    GzWoContract
+    GzWoAddress,
+    GzWoSignature
   },
   data() {
     return {

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

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div class="mb-n2 ml-10">
+      <span class="text-caption" v-if="variant == 'customer'">{{
+        $ay.t("CustomerSignature")
+      }}</span>
+      <span class="text-caption" v-else>{{ $ay.t("TechSignature") }}</span>
+    </div>
+
+    <template>
+      <div class="mb-6 mb-sm-0">
+        <v-btn icon class="ml-n1 mr-2" @click="openDialog = true">
+          <v-icon>$ayiEdit</v-icon>
+        </v-btn>
+
+        <span class="text-h6" @click="openDialog = true">{{
+          pvm.currentState.name
+        }}</span>
+        <v-icon :color="pvm.currentState.color" class="ml-4">$ayiFlag</v-icon>
+        <v-icon color="primary" v-if="pvm.currentState.locked" class="ml-4"
+          >$ayiLock</v-icon
+        >
+        <v-icon color="primary" v-if="pvm.currentState.completed" class="ml-4"
+          >$ayiCheckCircle</v-icon
+        >
+      </div>
+    </template>
+
+    <v-row justify="center">
+      <v-dialog v-model="openDialog" max-width="600px">
+        <v-card>
+          <v-card-title>
+            <span class="text-h5">{{ $ay.t("Signaturehere") }}</span>
+          </v-card-title>
+          <v-card-text>
+            <template v-if="$vuetify.breakpoint.smAndUp">
+              <!-- WIDE VIEW -->
+              <Sign data-cy="sign" />
+            </template>
+            <template v-else>
+              <!-- NARROW VIEW -->
+              <Sign data-cy="sign" />
+            </template>
+
+            <template>
+              <div class="mt-8">
+                input name here show date here
+              </div>
+            </template>
+          </v-card-text>
+          <v-card-actions>
+            <v-btn color="red darken-1" text @click="erase()">{{
+              $ay.t("Clear")
+            }}</v-btn>
+            <v-spacer></v-spacer>
+            <v-btn color="blue darken-1" text @click="cancelDialog()">{{
+              $ay.t("Cancel")
+            }}</v-btn>
+            <v-btn
+              color="blue darken-1"
+              :disabled="selectedStatus == null"
+              text
+              @click="save()"
+              >{{ $ay.t("OK") }}</v-btn
+            >
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  data() {
+    return {
+      selectedStatus: null,
+      openDialog: false
+    };
+  },
+
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    variant: {
+      type: String,
+      default: null
+    },
+    formKey: { type: String, default: "" }, //used to grab template from store
+    readonly: Boolean,
+    disabled: Boolean
+  },
+
+  methods: {
+    form() {
+      return window.$gz.form;
+    },
+
+    save() {
+      this.openDialog = false;
+    },
+    cancelDialog() {
+      this.openDialog = false;
+    },
+    erase() {
+      this.selectedStatus = null;
+      this.openDialog = false;
+    },
+    fieldValueChanged(ref) {
+      if (!this.pvm.formState.loading && !this.pvm.formState.readonly) {
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    }
+  },
+  computed: {}
+};
+</script>