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

<template>
  <div class="mb-8">
    <div class="mb-2 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" @click="showSign()">
        <v-row>
          <v-btn icon class="ml-n1 mr-2">
            <v-icon>$ayiEdit</v-icon>
          </v-btn>
          <img class="grey lighten-5" height="40px" :src="imgUrl" />
        </v-row>
      </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>
            <vueSignature
              ref="sigCtrl"
              :sig-option="sigOption"
              :disabled="disabled || imgUrl != null"
              :default-url="imgUrl"
            ></vueSignature>

            <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" text @click="save()">{{
              $ay.t("OK")
            }}</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </div>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*  XXXeslint-disable    */
////////////////////////////////////////////////////////////////////////////////////////////////////////////
import vueSignature from "vue-signature";
export default {
  components: {
    vueSignature
  },

  data() {
    return {
      selectedStatus: null,
      openDialog: false,
      sigOption: {
        penColor: "rgb(0, 0, 0)",
        backgroundColor: "rgb(245,245,245)"
      }
    };
  },

  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: {
    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;
    },
    cancelDialog() {
      this.openDialog = false;
    },
    erase() {
      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) {
        window.$gz.form.fieldValueChanged(this.pvm, ref);
      }
    }
  },
  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>