fe-accone/test/vuex/acc-one-purchase-request-direct/components/addPurchaseRequestDialog.vue

<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialogRequest" persistent max-width="750px">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          FORM PURCHASE REQUEST
        </v-card-title>
        <v-card-text class="pt-0 pb-0">
          <v-form ref="formRequest" v-model="validationForm" lazy-validtion>
            <v-layout wrap>
              <v-flex xs12>
                <v-menu
                  v-model="menuDateUse"
                  :close-on-content-click="false"
                  transition="scale-transition"
                  :nudge-right="40"
                  lazy
                  offset-y
                  full-width
                  max-width="290px"
                  min-width="290px"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                      :value="dateUseFormatted"
                      label="Tanggal Pelaksanaan"
                      readonly
                      v-on="on"
                      @blur="dDateUse = deFormatedDate(dateUseFormatted)"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    no-title
                    v-model="xDateUse"
                    @input="menuDateUse = false"
                  ></v-date-picker>
                </v-menu>
              </v-flex>
              <v-flex xs12>
                <v-autocomplete
                  v-model="xRegional"
                  label="Regional"
                  menu-icon="mdi-chevron-down"
                  :items="regionalOptions"
                  item-text="S_RegionalName"
                  item-value="S_RegionalID">
                  </v-autocomplete>
              </v-flex>
              <v-flex xs12>
                <v-autocomplete
                  v-model="xBranch"
                  label="Cabang"
                  menu-icon="mdi-chevron-down"
                  :items="branchOptions"
                  item-text="M_BranchName"
                  item-value="M_BranchCode"
                  :rules="branchRules"
                  required
                ></v-autocomplete>
              </v-flex>
              <v-flex xs12>
                <v-text-field
                  v-model="xDescription"
                  label="Keterangan"
                  :rules="descRules"
                  required
                ></v-text-field>
              </v-flex>
            </v-layout>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="error" flat @click="closeDialogRequest()">
            Tutup
          </v-btn>
          <v-btn
            v-if="act === 'new'"
            color="primary"
            dark
            @click="saveRequest()"
            >Simpan</v-btn
          >
          <v-btn
            v-if="act === 'edit'"
            color="primary"
            dark
            @click="updateRequest()"
            >Simpan Perubahan</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
module.exports = {
  name: "AddPurchaseRequestDialog",
  data() {
    return {
      branchRules: [(v) => !!v || "Cabang harus diisi"],
      descRules: [(v) => !!v || "Keterangan harus diisi"],
      validationForm: false,
    };
  },
  computed: {
    dialogRequest: {
      get() {
        return this.$store.state.requester.dialogRequest;
      },
      set(val) {
        this.$store.commit("requester/updateDialogRequest", val);
      },
    },
    menuDateUse: {
      get() {
        return this.$store.state.requester.menuDateUse;
      },
      set(val) {
        this.$store.commit("requester/updateMenuDateUse", val);
      },
    },
    dateUseFormatted() {
      return this.formatDate(this.xDateUse);
    },
    dDateUse: {
      get() {
        return this.$store.state.requester.dDateUse;
      },
      set(val) {
        this.$store.commit("requester/updateDDateUse", val);
      },
    },
    xDateUse: {
      get() {
        return this.$store.state.requester.xDateUse;
      },
      set(val) {
        this.$store.commit("requester/updateXDateUse", val);
      },
    },
    xBranch: {
      get() {
        return this.$store.state.requester.xBranch;
      },
      set(val) {
        this.$store.commit("requester/updateXBranch", val);
      },
    },
    branchOptions() {
      return this.$store.state.requester.branchOptions;
    },
    regionalOptions() {
      return this.$store.state.requester.regionalOptions;
    },
    xRegional: {
      get() {
        return this.$store.state.requester.xRegional;
      },
      set(val) {
        this.$store.commit("requester/updateXRegional", val);
      },
    },
    xDescription: {
      get() {
        return this.$store.state.requester.xDescription;
      },
      set(val) {
        this.$store.commit("requester/updateXDescription", val);
      },
    },
    xPRID() {
      return this.$store.state.requester.xPRID;
    },
    act() {
      return this.$store.state.requester.act;
    },
  },
  methods: {
    formatDate(date) {
      if (!date) return null;

      const [year, month, day] = date.split("-");
      return `${day}-${month}-${year}`;
    },
    deFormatedDate(date) {
      if (!date) return null;

      const [day, month, year] = date.split("-");
      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
    },
    closeDialogRequest() {
      this.$store.commit(
        "requester/updateXDateUse",
        moment(new Date()).format("YYYY-MM-DD")
      );
      this.$store.commit("requester/updateXBranch", "");
      this.$store.commit("requester/updateXRegional", "");
      this.$store.commit("requester/updateXDescription", "");
      this.$refs.formRequest.resetValidation();
      this.$store.commit("requester/updateDialogRequest", false);
    },
    saveRequest() {
      if (this.$refs.formRequest.validate()) {
        this.$store.dispatch("requester/saveRequest", {
          PRDateUse: this.xDateUse,
          PRRegional: this.xRegional.S_RegionalID,
          PRBranch: this.xBranch.M_BranchCode,
          PRDescription: this.xDescription,
        });
      }
    },
    updateRequest() {
      if (this.$refs.formRequest.validate()) {
        this.$store.dispatch("requester/updateRequest", {
          PRID: this.xPRID,
          PRDateUse: this.xDateUse,
          PRRegional: this.xRegional.S_RegionalID,
          PRBranch: this.xBranch.M_BranchCode,
          PRDescription: this.xDescription,
        });
      }
    },
  },
};
</script>