add modules folder based on s_menu

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

@@ -0,0 +1,227 @@
+<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>

test/vuex/acc-one-purchase-request-direct/components/addRequestDetailDialog.vue

@@ -0,0 +1,350 @@
+<template>
+  <v-layout row justify-center>
+    <v-dialog v-model="dialogDetail" persistent max-width="500px">
+      <v-card>
+        <v-card-title class="headline grey lighten-2" primary-title>
+          FORM REQUEST DETAIL
+        </v-card-title>
+
+        <v-card-text class="pt-0 pb-0">
+          <v-form ref="formDetail" v-model="validationDetail" lazy-validtion>
+            <v-layout wrap>
+              <v-flex xs12>
+                <v-autocomplete 
+                  label="Category" v-model="selected_category" no-filter 
+                  :items="category_direct" item-key="PurchaseDirectCategoryCode"
+                  item-text="PurchaseDirectCategoryName" return-object
+                ></v-autocomplete>
+              </v-flex>
+              <v-flex xs12>
+                <v-text-field
+                  v-model="xDescriptionDetail"
+                  label="Deskripsi"
+                  :rules="descriptionRules"
+                  required
+                ></v-text-field>
+              </v-flex>
+              <v-flex xs12>
+                <v-text-field
+                  v-model="xAmountRequest"
+                  type="number"
+                  label="Jumlah"
+                  :min="1"
+                  :rules="amountRules"
+                  required
+                ></v-text-field>
+              </v-flex>
+              <v-flex xs12>
+                <v-autocomplete label="Item Unit" v-model="selected_item_unit"
+                    :items="item_units" :search-input.sync="search_item_unit"
+                    auto-select-first no-filter item-text="ItemUnitName"
+                    return-object :rules="inutRules"
+                    no-data-text="Pilih Item Unit"
+                    >
+                    <template slot="item" slot-scope="{ item }">
+                        <v-list-tile-content>
+                            <v-list-tile-title v-text="item.ItemUnitName"></v-list-tile-title>
+                        </v-list-tile-content>
+                    </template>
+                </v-autocomplete> 
+              </v-flex>
+              <v-flex xs12>
+                <!-- <v-text-field
+                  v-model="xEstimationPrice"
+                  label="Harga"
+                  type="number"
+                  :min="1"
+                  prefix="Rp "
+                  :rules="priceRules"
+                  required
+                  :hint="convertMoney(xEstimationPrice)"
+                ></v-text-field> -->
+                <v-text-field 
+                  prefix="Rp"
+                  v-model="formattedxEstimationPrice"
+                  required
+                  label="Harga">
+                </v-text-field>
+              </v-flex>
+              <v-flex xs12>
+                <!-- <v-text-field
+                  v-model="total_price"
+                  label="Total Harga"
+                  type="number"
+                  prefix="Rp "
+                  readonly
+                  :hint="convertMoney(total_price)"
+                ></v-text-field> -->
+                <v-text-field 
+                  prefix="Rp"
+                  v-model="formatted_total_price" 
+                  label="Total Harga">
+                </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="closeDialogDetail()"> Tutup </v-btn>
+          <v-btn v-if="act === 'new'" color="primary" dark @click="saveDetail()"
+            >Simpan</v-btn
+          >
+          <v-btn
+            v-if="act === 'edit'"
+            color="primary"
+            dark
+            @click="updateDetail()"
+            >Simpan Perubahan</v-btn
+          >
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-layout>
+</template>
+
+<script>
+module.exports = {
+  name: "AddRequestDetailDialog",
+  data() {
+    return {
+      descriptionRules: [(v) => !!v || "Deskripsi harus diisi"],
+      amountRules: [(v) => (!!v && v > 0) || "Jumlah harus diisi"],
+      priceRules: [(v) => (!!v && v > 0) || "Harga harus diisi"],
+      inutRules: [
+        (v) => !!v || "Unit harus diisi",
+        (v) => !!v.ItemUnitID && v.ItemUnitID !== "0" || "Unit tidak valid"
+      ],
+      validationDetail: false,
+    };
+  },
+  mounted() {
+    this.$store.dispatch("requester/getUnit", this.search_item_unit)
+  },
+  computed: {
+    formattedxEstimationPrice: {
+      get() {
+          return this.oneMoney(this.xEstimationPrice);
+      },
+      set(value) {
+          // Hilangkan titik dan koma, ubah jadi number
+          let raw = value.replace(/\./g, '').replace(',', '.');
+          this.xEstimationPrice = parseFloat(raw) || 0;
+      }
+    },
+    formatted_total_price: {
+      get() {
+          return this.oneMoney(this.total_price);
+      },
+      set(value) {
+          // Hilangkan titik dan koma, ubah jadi number
+          let raw = value.replace(/\./g, '').replace(',', '.');
+          this.total_price = parseFloat(raw) || 0;
+      }
+    },
+    selectedMainTable() {
+      return this.$store.state.requester.selectedMainTable;
+    },
+    selectedDetailTable() {
+      return this.$store.state.requester.selectedDetailTable;
+    },
+    xDescriptionDetail: {
+      get() {
+        return this.$store.state.requester.xDescriptionDetail;
+      },
+      set(val) {
+        this.$store.commit("requester/updateXDescriptionDetail", val);
+      },
+    },
+    xAmountRequest: {
+      get() {
+        return this.$store.state.requester.xAmountRequest;
+      },
+      set(val) {
+        this.$store.commit("requester/updateXAmountRequest", val);
+      },
+    },
+    xEstimationPrice: {
+      get() {
+        return this.$store.state.requester.xEstimationPrice;
+      },
+      set(val) {
+        this.$store.commit("requester/updateXEstimationPrice", val);
+      },
+    },
+    dialogDetail: {
+      get() {
+        return this.$store.state.requester.dialogDetail;
+      },
+      set(val) {
+        this.$store.commit("requester/updateDialogDetail", val);
+      },
+    },
+    act() {
+      return this.$store.state.requester.act;
+    },
+    total_price() {
+      return this.$store.state.requester.total_price;
+    },
+    item_units() {
+      return this.$store.state.requester.item_units;
+    },
+    selected_item_unit: {
+      get() {
+        return this.$store.state.requester.selected_item_unit;
+      },
+      set(val) {
+        this.$store.commit("requester/updateSelectedItemUnit", val);
+      },
+    },
+    search_item_unit: {
+      get() {
+        return this.$store.state.requester.search_item_unit;
+      },
+      set(val) {
+        this.$store.commit("requester/updateSearchItemUnit", val);
+      },
+    },
+    category_direct() {
+      return this.$store.state.requester.category_direct;
+    },
+    selected_category: {
+      get() {
+        return this.$store.state.requester.selected_category;
+      },
+      set(val) {
+        this.$store.commit("requester/update_selected_category", val)
+      }
+    }
+  },
+  methods: {
+    roundToThreeSignificantDigits(num) {
+        if (num === 0) return 0;
+        
+        // Hitung jumlah digit
+        const absNum = Math.abs(num);
+        const magnitude = Math.floor(Math.log10(absNum)) + 1;
+        
+        // Jika kurang dari 3 digit, tidak perlu dibulatkan
+        if (magnitude <= 3) return num;
+        
+        // Hitung faktor pembulatan
+        const factor = Math.pow(10, magnitude - 3);
+        
+        // Bulatkan
+        return Math.round(num / factor) * factor;
+    },
+    oneMoney(value){
+        //return one_money(value);
+        let splitValue = value.toString().split(".");
+        if(splitValue.length > 1) {
+            let val = splitValue[0]
+            return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "," + this.roundToThreeSignificantDigits(splitValue[1]);
+        } else {
+            return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+        }
+    },
+    convertMoney(money){
+        return one_money(money)
+    },
+    formatAngka(nilai) {
+      // Jika tidak ada nilai
+      if (!nilai) return '';
+      
+      try {
+          // Ubah ke string
+          let strNilai = String(nilai);
+          
+          // Jika berisi titik desimal
+          if (strNilai.includes('.')) {
+              // Split bagian utama dan desimal
+              let bagian = strNilai.split('.');
+              let utama = bagian[0];
+              let desimal = bagian[1];
+              
+              // Format bagian utama
+              utama = utama.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+              
+              // Kembalikan gabungan
+              return utama + ',' + desimal;
+          } else {
+              // Tidak ada desimal, hanya format bagian utama
+              return strNilai.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+          }
+      } catch (error) {
+          console.error("Error formatting:", error);
+          return nilai;
+      }
+    },
+    closeDialogDetail() {
+      this.$store.commit("requester/updateXDescriptionDetail", "");
+      this.$store.commit("requester/updateXAmountRequest", 0);
+      this.$store.commit("requester/updateXEstimationPrice", 0);
+      this.$refs.formDetail.resetValidation();
+      this.$store.commit("requester/updateDialogDetail", false);
+    },
+    saveDetail() {
+      if (this.$refs.formDetail.validate()) {
+        this.$store.dispatch("requester/saveDetail", {
+          PRID: this.selectedMainTable.PurchaseRequestDirectID,
+          PRDDescriptionDetail: this.xDescriptionDetail,
+          PRDAmountRequest: this.xAmountRequest,
+          PRDEstimationPrice: this.xEstimationPrice,
+          PRDItemUnitID: this.selected_item_unit.ItemUnitID,
+          PRDCategoryID: this.selected_category.PurchaseDirectCategoryID
+        });
+      }
+    },
+    updateDetail() {
+      if (this.$refs.formDetail.validate()) {
+        this.$store.dispatch("requester/updateDetail", {
+          PRID: this.selectedMainTable.PurchaseRequestDirectID,
+          PRDID: this.selectedDetailTable.PurchaseRequestDirectDetailID,
+          PRDDescriptionDetail: this.xDescriptionDetail,
+          PRDAmountRequest: this.xAmountRequest,
+          PRDEstimationPrice: this.xEstimationPrice,
+          PRDItemUnitID: this.selected_item_unit.ItemUnitID,
+          PRDCategoryID: this.selected_category.PurchaseDirectCategoryID
+        });
+      }
+    },
+    calculateTotalPrice() {
+      let total_price = this.xAmountRequest * this.xEstimationPrice;
+      this.$store.commit("requester/updateTotalPrice", total_price);
+    },
+    thr_search_item_unit: _.debounce(function () {
+        this.$store.dispatch("requester/getUnit", this.search_item_unit)
+    }, 1000),
+  },
+  watch: {
+    dialogDetail(val) {
+      if (val) {
+        // Dialog dibuka
+        this.$nextTick(() => {
+          this.$refs.formDetail?.resetValidation();
+        });
+      }
+    },
+    xAmountRequest(val, old) {
+      if (val <= 0) {
+        this.$store.commit("requester/updateXAmountRequest", 0);
+      }
+      this.calculateTotalPrice();
+    },
+    xEstimationPrice(val, old) {
+      if (val < 0) {
+        this.$store.commit("requester/updateXEstimationPrice", 0);
+      }
+      this.calculateTotalPrice();
+    },
+    search_item_unit(val, old) {
+        if (val == old) return;
+        if (!val) return;
+        if (val.length < 1) return;
+        if (this.$store.state.requester.loadingAutocomplete == 1) return;
+        this.thr_search_item_unit();
+    },
+  },
+};
+</script>

test/vuex/acc-one-purchase-request-direct/components/formAddRequestDetail.vue

@@ -0,0 +1,376 @@
+<template>
+    <v-dialog v-model="dialogDetail" persistent max-width="500px">
+        <v-card>
+            <v-card-title class="headline grey lighten-2" primary-title>
+                FORM REQUEST DETAIL
+            </v-card-title>
+
+            <v-card-text>
+                <v-form ref="form_detail" v-model="form_detail_valid" lazy-validation>
+                    <v-layout column>
+                        <v-flex>
+                            <v-autocomplete
+                                v-model="selected_category" return-object label="Kategori" 
+                                :items="category_direct" item-text="PurchaseDirectCategoryName" 
+                                item-key="PurchaseDirectCategoryCode" :rules="autocomp_rules" 
+                                @input="resetCalc()"
+                            ></v-autocomplete>
+                        </v-flex>
+                        <v-flex>
+                            <v-text-field
+                                v-model="xDescriptionDetail" required 
+                                :rules="freetext_rules" label="Deskripsi" 
+                                :disabled="isCategorySelected()" 
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex>
+                            <v-text-field
+                                v-model="formatted_amount" required
+                                :min="1" :rules="freetext_rules" label="Jumlah"
+                                :disabled="isCategorySelected()" @blur="viewBlurAmount"
+                                :readonly="this.selected_category.PurchaseDirectCategoryName == 'BBM'"
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex>
+                            <v-autocomplete
+                                label="Unit Item" v-model="selected_item_unit"
+                                :items="item_units" item-text="ItemUnitName" 
+                                :rules="autocomp_rules" return-object
+                                :disabled="isCategorySelected()" 
+                            ></v-autocomplete>
+                        </v-flex>
+                        <v-flex>
+                            <v-text-field 
+                                prefix="Rp." required label="Harga"
+                                v-model="formatted_estimate_price"
+                                :disabled="isCategorySelected()"
+                                @blur="viewBlurMoney" @focus="viewFokusNumber"
+                            ></v-text-field>
+                        </v-flex>
+                        <v-flex>
+                            <v-text-field
+                                prefix="Rp." v-model="formatted_total_price" 
+                                :disabled="isCategorySelected()" label="Total Harga"
+                                :readonly="this.selected_category.PurchaseDirectCategoryName != 'BBM'"
+                                @blur="viewBlurMoney" @focus="viewFokusNumber"
+                            ></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="closeForm()">Tutup</v-btn>
+                <v-btn v-if="this.act === 'new'" color="primary" dark @click="simpanForm()">Simpan</v-btn>
+                <v-btn v-else color="primary" dark @click="updateForm()">Simpan</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            form_detail_valid: true,
+            amount_input: 0,
+            price_input: 0,
+            total_input: 0,
+            freetext_rules: [v => !!v || "Tidak boleh kosong"],
+            autocomp_rules: [v => (v && Object.keys(v).length > 0) || 'Tidak boleh kosong'],
+            amount_rules: [v => (v && v >= 0) || "Jumlah tidak sesuai"]
+        }
+    },
+    computed: {
+        dialogDetail: {
+            get() {
+                return this.$store.state.requester.dialogDetail
+            },
+            set(val) {
+                this.$store.commit("requester/updateDialogDetail", val)
+            }
+        },
+        selected_category: {
+            get() {
+                return this.$store.state.requester.selected_category;
+            },
+            set(val) {
+                this.$store.commit("requester/update_selected_category", val)
+            }
+        },
+        xDescriptionDetail: {
+            get() {
+                return this.$store.state.requester.xDescriptionDetail;
+            },
+            set(val) {
+                this.$store.commit("requester/updateXDescriptionDetail", val);
+            },
+        },
+        xAmountRequest: {
+            get() {
+                return this.$store.state.requester.xAmountRequest;
+            },
+            set(val) {
+                this.$store.commit("requester/updateXAmountRequest", Number(val));
+            },
+        },
+        formatted_amount: {
+            get() {
+                return this.amount_input;
+            },
+            set(value) {
+                let raw = value.replace(/\./g, '').replace(',', '.');
+                this.xAmountRequest = parseFloat(raw) || 0;
+            }
+        },
+        selected_item_unit: {
+            get() {
+                return this.$store.state.requester.selected_item_unit;
+            },
+            set(val) {
+                this.$store.commit("requester/updateSelectedItemUnit", val);
+            },
+        },
+        xEstimationPrice: {
+            get() {
+                return this.$store.state.requester.xEstimationPrice;
+            },
+            set(val) {
+                this.$store.commit("requester/updateXEstimationPrice", val);
+            },
+        },
+        formatted_estimate_price: {
+            get() {
+                return this.price_input;
+            },
+            set(value) {
+                let raw = value.replace(/\./g, '').replace(',', '.');
+                this.xEstimationPrice = parseFloat(raw) || 0;
+            }
+        },
+        total_price: {
+            get() {
+                return this.$store.state.requester.total_price;
+            },
+            set(val) {
+                this.$store.commit("requester/updateTotalPrice", val)
+            }
+        },
+        formatted_total_price: {
+            get() {
+                return this.total_input;
+            },
+            set(value) {
+                // Hilangkan titik dan koma, ubah jadi number
+                let raw = value.replace(/\./g, '').replace(',', '.');
+                this.total_price = parseFloat(raw) || 0;
+            }
+        },
+        category_direct() {
+            return this.$store.state.requester.category_direct;
+        },
+        item_units() {
+            return this.$store.state.requester.item_units;
+        },
+        selectedMainTable() {
+            return this.$store.state.requester.selectedMainTable;
+        },
+        selectedDetailTable() {
+            return this.$store.state.requester.selectedDetailTable;
+        },
+        act() {
+            return this.$store.state.requester.act;
+        },
+    },
+    methods: {
+        roundToThreeSignificantDigits(digit) {
+            // if (num === 0) return 0;
+            
+            // const absNum = Math.abs(num);
+            // const magnitude = Math.floor(Math.log10(absNum)) + 1;
+            // if (magnitude <= 3) return num;
+            // const factor = Math.pow(10, magnitude - 3);
+            // return Math.round(num / factor) * factor;
+
+            const num = parseInt(digit, 10)
+            if (isNaN(num) || num <= 0) {
+                return 0;
+            }
+
+            const scale = 10 ** digit.length;
+            const decimal = num / scale
+            return Math.round(decimal * 100);
+        },
+        oneMoney(value) {
+            let splitValue = value.toString().split(".");
+
+            if(splitValue.length > 1) {
+                let val = splitValue[0]
+                return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "," + this.roundToThreeSignificantDigits(splitValue[1]);
+            } else {
+                return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+            }
+        },
+        viewBlurMoney() {
+            let category = this.selected_category
+            if (category.PurchaseDirectCategoryName == 'BBM') {
+                let total = this.total_price
+                if (total % 1 === 0) {
+                    total = this.oneMoney(total) + ",00"
+                    this.total_input = total
+                } else {
+                    this.total_input = this.oneMoney(this.total_price)
+                }
+
+                let price = this.xEstimationPrice
+                if (price % 1 === 0) {
+                    price = this.oneMoney(price) + ",00"
+                    this.price_input = price
+                } else {
+                    this.price_input = this.oneMoney(this.xEstimationPrice)
+                }
+
+            } else {
+                this.price_input = this.oneMoney(this.xEstimationPrice)
+                this.total_input = this.oneMoney(this.total_price)
+            }
+        },
+        viewFokusNumber() {
+            let price = this.xEstimationPrice ?? 0;
+            let total = this.total_price ?? 0;
+
+            this.price_input = price.toString().replace('.', ',');
+            this.total_input = total.toString().replace('.', ',');
+        },
+        viewBlurAmount() {
+            let category = this.selected_category
+            if (category.PurchaseDirectCategoryName == 'BBM') {
+                let amount = this.xAmountRequest
+                if (amount % 1 === 0) {
+                    this.amount_input = amount
+                } else {
+                    this.amount_input = this.oneMoney(amount)
+                }
+            } else {
+                this.amount_input = this.xAmountRequest
+            }
+        },
+        calculateTotalPrice() {
+            let category = this.selected_category
+            let jumlah = this.xAmountRequest
+            let total = this.total_price
+            let price = this.xEstimationPrice
+
+            if (category.PurchaseDirectCategoryName === 'BBM') {
+                if (total > 0 && price > 0) {
+                    let a = total / price
+                    this.xAmountRequest = a
+                    this.amount_input = this.oneMoney(a)
+                    return
+                }
+                this.xAmountRequest = 0
+                this.amount_input = this.oneMoney(0)
+                
+            } else {
+                if (jumlah > 0 && price > 0) {
+                    let a = jumlah * price
+                    this.total_price = a
+                    return
+                }
+                this.total_price = 0
+            }
+        },
+        isCategorySelected() {
+            let category = this.selected_category
+            if (Object.keys(category).length > 0) {
+                return false
+            }
+            return true
+        },
+        resetCalc() {
+            this.xDescriptionDetail = ''
+            this.xAmountRequest = 0
+            this.amount_input = 0
+            this.selected_item_unit = {}
+
+            this.xEstimationPrice = 0
+            this.price_input = 0
+            this.total_price = 0
+            this.total_input = 0
+
+            this.$refs.form_detail.resetValidation()
+        },
+        resetForm() {
+            this.selected_category = {}
+            this.selected_item_unit = {}
+            this.xDescriptionDetail = ''
+            this.xAmountRequest = 0
+            this.xEstimationPrice = 0
+            this.total_price = 0
+            
+            this.amount_input = 0
+            this.price_input = 0
+            this.total_input = 0
+
+            this.$refs.form_detail.resetValidation()
+        },
+        closeForm() {
+            this.resetForm()
+            this.dialogDetail = false
+        },
+        simpanForm() {
+            if (this.$refs.form_detail.validate()) {
+                this.$store.dispatch("requester/saveDetail", {
+                    PRID: this.selectedMainTable.PurchaseRequestDirectID,
+                    PRDDescriptionDetail: this.xDescriptionDetail,
+                    PRDAmountRequest: this.xAmountRequest,
+                    PRDEstimationPrice: this.xEstimationPrice,
+                    PRDItemUnitID: this.selected_item_unit.ItemUnitID,
+                    PRDCategoryID: this.selected_category.PurchaseDirectCategoryID,
+                    PRDTotalPrice: this.total_price
+                });
+            }
+        },
+        updateForm() {
+            if (this.$refs.form_detail.validate()) {
+                this.$store.dispatch("requester/updateDetail", {
+                    PRID: this.selectedMainTable.PurchaseRequestDirectID,
+                    PRDID: this.selectedDetailTable.PurchaseRequestDirectDetailID,
+                    PRDDescriptionDetail: this.xDescriptionDetail,
+                    PRDAmountRequest: this.xAmountRequest,
+                    PRDEstimationPrice: this.xEstimationPrice,
+                    PRDItemUnitID: this.selected_item_unit.ItemUnitID,
+                    PRDCategoryID: this.selected_category.PurchaseDirectCategoryID,
+                    PRDTotalPrice: this.total_price
+                });
+            }
+        }
+    },
+    watch: {
+        dialogDetail(val) {
+            if (val) {
+                this.$nextTick(() => {
+                    this.$refs.form_detail?.resetValidation()
+                    if (this.act == 'new') {
+                        this.resetForm()
+                    } else {
+                        this.price_input = this.oneMoney(this.xEstimationPrice)
+                        this.total_input = this.oneMoney(this.total_price)
+                        this.amount_input = this.oneMoney(this.xAmountRequest)
+                    }
+                })
+            }
+        },
+        xAmountRequest(val, old) {
+            this.calculateTotalPrice()
+        },
+        xEstimationPrice(val, old) {
+            this.calculateTotalPrice()
+        },
+        total_price(val, old) {
+            this.calculateTotalPrice()
+        }
+    }
+}
+</script>

test/vuex/acc-one-purchase-request-direct/components/formDialogAttachtment.vue

@@ -0,0 +1,155 @@
+<template>
+    <v-layout row justify-center>
+        <v-dialog v-model="dialogForm" persistent max-width="60vw">
+            <v-card>
+                <v-card-title class="headline grey lighten-2" primary-title>
+                    FORM BUKTI PEMBAYARAN
+                </v-card-title>
+                <v-card-text class="pt-2 pb-0">
+                    <v-layout v-if="actAttach == 'upload'" mr-2 ml-2 style="border:1px solid black" align-center row pa-2 mb-2>
+                        <v-flex xs9>
+                            <input type="file" id="files" ref="files" accept="image/*" multiple v-on:change="handleFileUploads()"/>
+                        </v-flex>
+                    </v-layout>
+                    <p v-show="cekFile" class="error pl-2 pr-2" style="color:#fff">Belum diisi</p>
+                    <v-layout v-if="show_progrees_upload" row align-center mr-2 ml-2>
+                        <v-flex xs12>
+                        
+                        <v-progress-linear :indeterminate="true"></v-progress-linear>
+
+                        </v-flex>
+                    </v-layout>
+                    <v-layout v-if="imagePreviews.length > 0 && !show_progrees_upload" align-center row wrap>
+                        <v-flex
+                            v-for="(img, index) in imagePreviews"
+                            :key="index"
+                            xs6
+                            class="pa-2"
+                        >
+                            <v-img :src="img">
+                            <div class="fill-height bottom-gradient"></div>
+                            </v-img>
+                        </v-flex>
+                    </v-layout>
+                </v-card-text>
+                <v-divider></v-divider>
+                <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn color="error" flat @click="closeDiallog()"> Tutup </v-btn>
+                    <v-btn color="primary" v-if="actAttach == 'upload'" dark @click="saveForm()">Simpan</v-btn>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </v-layout>
+</template>
+
+<script>
+module.exports = {
+    name: "formDialogAttachtment",
+    data() {
+        return {
+
+        };
+    },
+    mounted() {
+
+    },
+    computed: {
+        dialogForm: {
+            get() {
+                return this.$store.state.requester.dialog_form;
+            },
+            set(val) {
+                this.$store.commit("requester/update_dialog_form", val);
+            },
+        },
+        show_progrees_upload: {
+            get() {
+                return this.$store.state.requester.show_progrees_upload
+            },
+            set(val) {
+                this.$store.commit("requester/update_show_progrees_upload", val)
+            }
+        },
+        imageFiles: {
+            get() {
+                return this.$store.state.requester.imageFiles
+            },
+            set(val) {
+                this.$store.commit("requester/update_imageFiles", val)
+            }
+        },
+        imagePreviews: {
+            get() {
+                return this.$store.state.requester.imagePreviews
+            },
+            set(val) {
+                this.$store.commit("requester/update_imagePreviews", val)
+            }
+        },
+        cekFile: {
+            get() {
+                return this.$store.state.requester.cekFile;
+            },
+            set(val) {
+                this.$store.commit("requester/update_cekFile", val);
+            },
+        },
+        actAttach: {
+            get() {
+                return this.$store.state.requester.actAttach;
+            },
+            set(val) {
+                this.$store.commit("requester/update_actAttach", val);
+            },
+        }
+    },
+    methods: {
+        closeDiallog() {
+            this.$store.commit("requester/update_dialog_form", false);
+        },
+        handleFileUploads(){
+            // this.files = this.$refs.files.files
+
+            const files = this.$refs.files.files;
+            this.imagePreviews = [];
+            this.imageFiles = [];
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                const url = URL.createObjectURL(file);
+                this.imagePreviews.push(url);
+                this.imageFiles.push(file);
+            }
+            // console.log('imagePreviews', this.imagePreviews)
+            //  console.log('imageFiles', this.imageFiles)
+        },
+        saveForm() {
+            var formData = new FormData()
+            console.log("formData",this.imageFiles.length)
+
+            for( var i = 0; i < this.imageFiles.length; i++ ){
+                let file = this.imageFiles[i]
+                
+                formData.append('files[' + i + ']', file)
+                // console.log("formData",formData)
+            }
+
+            var user = one_user()
+            formData.append('PRDID',  this.$store.state.requester.selectedDetailTable.PurchaseRequestDirectDetailID)
+            formData.append('PRID',  this.$store.state.requester.selectedMainTable.PurchaseRequestDirectID)
+            formData.append('directNumber',  this.$store.state.requester.selectedMainTable.PurchaseRequestDirectNumber)
+            formData.append('userId',  user.M_UserID)
+
+            // console.log('prpd', this.$store.state.requester.selectedDetailTable.PurchaseRequestDirectDetailID)
+            // console.log('prm', formData)
+            this.$store.dispatch('requester/saveFiles', formData)
+                //this.submitFiles();
+            
+            
+        }
+    },
+    watch: {
+
+    },
+}
+</script>

test/vuex/acc-one-purchase-request-direct/components/oneDialogAlert.vue

@@ -0,0 +1,80 @@
+<template>
+  
+    <v-dialog
+      v-model="dialog"
+      max-width="30%"
+    >
+        <v-card>
+            <v-card-title
+                class="headline grey lighten-2 pt-2 pb-2"
+                primary-title
+            >
+            Peringatan !
+            </v-card-title>
+            <v-card-text class="pt-2 pb-2">
+                <v-layout row>
+                    <v-flex xs12 d-flex>
+                        <v-layout row>
+                            <v-flex pb-1 xs12>
+                                <v-layout row>
+                                    <v-flex pt-2 pr-2 xs12>
+                                        {{xmsg}}
+                                    </v-flex>
+                                </v-layout>
+                            </v-flex>
+                        </v-layout>
+                    </v-flex>
+                </v-layout> 
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-btn
+                    color="error"
+                    flat
+                    @click="forgetAlert()"
+                >
+                Abaikan
+                </v-btn>
+                <v-spacer></v-spacer>
+                <v-btn
+                    color="primary"
+                    flat
+                    @click="closeAlert()"
+                >
+                OK
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+  
+</template>
+
+<style scoped>
+</style>
+
+<script>
+module.exports = {
+    props : ['status', 'msg'],
+    computed : {
+        xmsg() {
+            return this.msg
+        },
+        dialog: {
+            get() {
+                return this.status
+            },
+            set(val) {
+                 this.$emit('close-dialog-alert')
+            }
+        }
+    },
+    methods: {
+        closeAlert() {
+            this.$emit('close-dialog-alert')
+        },
+        forgetAlert() {
+            this.$emit('forget-dialog-alert')
+        }
+    }
+}
+</script>