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

<template>
  <div class="mb-8 ml-3">
    <div class="mb-2 ml-8">
      <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
        overlay-opacity="1"
        overlay-color="primary"
        v-model="openDialog"
        max-width="600px"
      >
        <v-card>
          <v-card-title>
            <span class="text-h4" v-if="variant == 'customer'">{{
              $ay.t("CustomerSignature")
            }}</span>
            <span class="subtitle-4" v-else>{{ $ay.t("TechSignature") }}</span>
          </v-card-title>
          <v-card-text>
            <div class="mb-5">
              <span class="text-h5"
                >{{ $ay.t("WorkOrder") }}&nbsp;{{ this.value.serial }}</span
              >
            </div>

            <template v-if="variant == 'customer'">
              <div v-if="$store.state.globalSettings.signatureTitle">
                <span class="text-h6">{{
                  $store.state.globalSettings.signatureTitle
                }}</span>
              </div>
              <div
                class="mb-5"
                v-if="$store.state.globalSettings.signatureHeader"
              >
                <span class="subtitle-1">{{
                  $store.state.globalSettings.signatureHeader
                }}</span>
              </div>
            </template>
            <vueSignature
              ref="sigCtrl"
              :sig-option="sigOption"
              :disabled="disabled || imgUrl != null"
              :default-url="imgUrl"
            ></vueSignature>
            {{ sigDateLocalized }}
            <template v-if="variant == 'customer'">
              <div
                class="my-5"
                v-if="$store.state.globalSettings.signatureFooter"
              >
                <span class="subtitle-2">{{
                  $store.state.globalSettings.signatureFooter
                }}</span>
              </div>
            </template>
            <template>
              <div class="mt-8">
                <v-text-field
                  v-model="tempName"
                  :readonly="disabled || imgUrl != null"
                  :label="$ay.t('Name')"
                  ref="sigName"
                  data-cy="sigName"
                ></v-text-field>
              </div>
            </template>
          </v-card-text>
          <v-card-actions>
            <v-btn
              v-if="imgUrl != null"
              color="red darken-1"
              text
              @click="erase()"
              >{{ $ay.t("Delete") }}</v-btn
            >
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" text @click="cancelDialog()">{{
              $ay.t("Cancel")
            }}</v-btn>
            <v-btn
              v-if="imgUrl == null"
              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)"
      },
      tempSig: null,
      tempDate: null,
      tempName: null
    };
  },

  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() {
      this.tempSig = this.imgUrl;
      this.tempDate = this.sigDate;
      this.tempName = this.sigName;
      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;
      }
      this.setSig(svg);
      this.setCaptured(window.$gz.locale.nowUTC8601String());
      this.setName(this.tempName);
      console.log("SVG size IS ", svg == null ? 0 : svg.length);
      this.value.isDirty = true;
      this.pvm.formState.dirty = true;

      this.$emit("change");
      this.openDialog = false;
    },
    setSig(theSig) {
      if (this.variant == "customer") {
        this.value.customerSignature = theSig;
      } else {
        this.value.techSignature = theSig;
      }
    },
    setCaptured(theDate) {
      if (this.variant == "customer") {
        this.value.customerSignatureCaptured = theDate;
      } else {
        this.value.techSignatureCaptured = theDate;
      }
    },
    setName(theName) {
      if (this.variant == "customer") {
        this.value.customerSignatureName = theName;
      } else {
        this.value.techSignatureName = theName;
      }
    },
    cancelDialog() {
      this.$refs.sigCtrl.fromDataURL(this.tempSig);
      this.setSig(this.tempSig);
      this.setCaptured(this.tempDate);
      this.setName(this.tempName);
      this.openDialog = false;
      this.tempName = null;
      this.tempSig = null;
      this.tempDate = null;
    },
    erase() {
      this.setSig(null);
      this.setCaptured(null);
      this.setName(null);
      this.$refs.sigCtrl.clear();
      this.value.isDirty = true;
      this.pvm.formState.dirty = true;
      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;
      }
    },
    sigDate: function() {
      if (this.variant == "customer") {
        return this.value.customerSignatureCaptured;
      } else {
        return this.value.techSignatureCaptured;
      }
    },
    sigName: function() {
      if (this.variant == "customer") {
        return this.value.customerSignatureName;
      } else {
        return this.value.techSignatureName;
      }
    },
    sigDateLocalized: function() {
      const sd = this.sigDate;
      if (sd == null) {
        return null;
      } else {
        return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
          sd,
          this.pvm.timeZoneName,
          this.pvm.languageName,
          this.pvm.hour12
        );
      }
    }
  }
};
</script>