Vue Form Validation

By ukmodak | May 18th 2022 09:26:00 AM | viewed 15 times

run the following command

 npm install vuelidate --save

Create a block SalesInfoAddFormTest.vue in the location: resources\js\components\block\sales_info

<template>
<div>
 <div class="infoHeader">
    <b-row>
         <b-col cols="2" md="2"></b-col>
         <b-col cols="10" md="8"><h4>Sales Information[add test]</h4>
         <b-col cols="2" md="2">
             <div class="rightAlign">
                <router-link :to="{name:'ad_sale_list'}"><b-button variant="outline-info" class="btn_custom"><i class="fas fa-list"></i> List</b-button></router-link>
             </div>
       </b-col>
     </b-row>
   
 </div>
   
  </b-jumbotron>

  <b-card bg-variant="light">

  <b-row>

        <b-col cols="12" md="12" class="formStyle">

       
        <b-form @submit.prevent="onSubmit"  autocomplete="off">
           <b-row>
             
                  <b-col cols="12" md="3">

                      

                         <b-form-group
                          id="input-group-2"
                          label="Table No"
                          label-for="input-2"
                          description=""
                        >
                     <b-form-input
                          id="short_name"
                          v-model.trim="form.table_no"
                          type="text"
                          placeholder="enter table no"
                          @blur="$v.form.table_no.$touch()"
                          :state="$v.form.table_no.$dirty ? !$v.form.table_no.$anyError : null"
                        >
                       </b-form-input>
                          <!--span class="error" v-if="$v.form.table_no.$dirty && !$v.form.table_no.required">Table No. is required 
                        </b-form-group> 

                         <b-form-group
                            id="input-group-2"
                            label="Sales Date"
                            label-for="input-2"
                            description=""
                          >
                            
                               <!--span class="error" v-if="$v.form.sales_date.$dirty && !$v.form.sales_date.required">Sales date is required 
                          </b-form-group>
                      
                         <b-form-group
                          id="input-group-2"
                          label="Memo No"
                          label-for="input-2"
                          description=""
                        >
                        <b-form-input
                          id="short_name"
                          v-model.trim="form.memo_no"
                          type="text"
                          placeholder="enter memo no"
                          @blur="$v.form.memo_no.$touch()"
                          :state="$v.form.memo_no.$dirty ? !$v.form.memo_no.$anyError : null"
                        >
                       </b-form-input>
                          <!--span class="error" v-if="$v.form.memo_no.$dirty && !$v.form.memo_no.required">Memo No. is required 
                        </b-form-group>
 

                  </b-col>
                  <b-col cols="12" md="3">

                          <b-form-group id="input-group-3" label="Customer" label-for="input-3">
                               <b-form-select
                                 id=""
                                 v-model.trim="form.customer_id"
                                 :options="defaultOption.concat(customerListObject)"
                                 @blur="$v.form.role_id.$touch()"
                                 :state="$v.form.customer_id.$dirty ? !$v.form.customer_id.$anyError : null"
                               ></b-form-select>
                                <!--span class="error" v-if="$v.form.customer_id.$dirty  && !$v.form.customer_id.required">Customer is required 
                          </b-form-group>

                           <b-form-group
                          id="input-group-2"
                          label="Waiter Name"
                          label-for="input-2"
                          description=""
                        >

                    <b-form-input
                          id="short_name"
                          v-model.trim="form.waiter_name"
                          type="text"
                          placeholder="enter waiter name"
                          @blur="$v.form.waiter_name.$touch()"
                          :state="$v.form.waiter_name.$dirty ? !$v.form.waiter_name.$anyError : null"
                        >
                       </b-form-input>
                          
                       </b-form-group> 

                       <b-form-group
                          id="input-group-2"
                          label="Remarks"
                          label-for="input-2"
                          description=""
                        >
                         <b-form-input
                            id="textarea"
                            v-model.trim="form.remarks"
                            placeholder=""
                            rows="3"
                            max-rows="6"
                            @blur="$v.form.remarks.$touch()"
                            :state="$v.form.remarks.$dirty ? !$v.form.remarks.$anyError : null"
                          ></b-form-input>
                             
                        </b-form-group>  

                  </b-col>
                 <b-col cols="12" md="3">
                     
                        
                  <b-form-group
                          id="input-group-2"
                          label="Gross Sales Amount"
                          label-for="input-2"
                          description=""
                        >

                       <b-form-input
                          id="short_name"
                          v-model.trim="form.gross_sale_amount"
                          type="text"
                          placeholder=""
                          @blur="$v.form.gross_sale_amount.$touch()"
                          :state="$v.form.gross_sale_amount.$dirty ? !$v.form.gross_sale_amount.$anyError : null"
                          readonly
                        >
                       </b-form-input>

                      <b-row>

                        <b-col cols="12" md="6">

                            <b-form-group
                          id="input-group-2"
                          label="Total Discount"
                          label-for="input-2"
                          description=""
                        >

                       <b-form-input
                          id="short_name"
                          v-model.trim="form.total_discount"
                          type="text"
                          placeholder=""
                          @blur="$v.form.total_discount.$touch()"
                          :state="$v.form.total_discount.$dirty ? !$v.form.total_discount.$anyError : null"
                        >
                       </b-form-input>
                          
                       </b-form-group> 
                        </b-col>
                        <b-col cols="12" md="6">


                           <b-form-group
                          id="input-group-2"
                          label="Add/Less"
                          label-for="input-2"
                          description=""
                        >

                       <b-form-input
                          id="short_name"
                          v-model.trim="form.add_less"
                          type="text"
                          placeholder=""
                          @blur="$v.form.add_less.$touch()"
                          :state="$v.form.add_less.$dirty ? !$v.form.add_less.$anyError : null"
                        >
                       </b-form-input>
                          
                       </b-form-group> 
                        </b-col>
                       
                         
                      </b-row>
                          
                       </b-form-group> 

                        <b-form-group
                          id="input-group-2"
                          label="VAT(%)"
                          label-for="input-2"
                          description=""
                        >

                      

                      <b-row>
                        <b-col cols="12" md="6">
                            <b-form-input
                                id="short_name"
                                v-model.trim="form.vat_percent"
                                type="text"
                                placeholder="7.5%"
                                @blur="$v.form.vat_percent.$touch()"
                                :state="$v.form.vat_percent.$dirty ? !$v.form.vat_percent.$anyError : null"
                              >
                             </b-form-input>
                         </b-col>
                         <b-col cols="12" md="6">
                               <b-form-input
                                    id="short_name"
                                    v-model.trim="form.vat"
                                    type="text"
                                    placeholder=""
                                    @blur="$v.form.vat.$touch()"
                                    :state="$v.form.vat.$dirty ? !$v.form.vat.$anyError : null"
                                    readonly
                                  >
                                 </b-form-input>
                         </b-col>
                        
                     </b-row>
                      </b-form-group> 
                      
                 </b-col>

              

  

                 <b-col cols="12" md="3">  

                      <b-form-group
                          id="input-group-2"
                          label="Service Charge(%)"
                          label-for="input-2"
                          description=""
                        >

                    <b-row>
                        <b-col cols="12" md="6">
                           
                       </b-form-input>
                         </b-col>
                         <b-col cols="12" md="6">
                               <b-form-input
                                id="short_name"
                                v-model.trim="form.service_charge"
                                type="text"
                                placeholder=""
                                @blur="$v.form.service_charge.$touch()"
                                :state="$v.form.service_charge.$dirty ? !$v.form.service_charge.$anyError : null"
                              >
                       </b-form-input>
                         </b-col>
                           
                     </b-row>

                       
                          
                       </b-form-group> 
             
                      <b-form-group
                          id="input-group-2"
                          label="Delivery Charge(%)"
                          label-for="input-2"
                          description=""
                        >
                  <b-row>
                     <b-col cols="12" md="6">
                       <b-form-input
                          id="short_name"
                          v-model.trim="form.delivery_charge_percent"
                          type="text"
                          placeholder=""
                          @blur="$v.form.delivery_charge_percent.$touch()"
                          :state="$v.form.delivery_charge_percent.$dirty ? !$v.form.delivery_charge_percent.$anyError : null"
                        >
                       </b-form-input>
                          
                      
                    </b-col>
                    <b-col cols="12" md="6">
                   

                       <b-form-input
                          id="short_name"
                          v-model.trim="form.delivery_charge"
                          type="text"
                          placeholder=""
                          @blur="$v.form.delivery_charge.$touch()"
                          :state="$v.form.delivery_charge.$dirty ? !$v.form.delivery_charge.$anyError : null"
                        >
                       </b-form-input>
                          
                       
                    </b-col>
                   </b-row>
                </b-form-group> 

                       <b-form-group
                          id="input-group-2"
                          label="Total Sales Amount"
                          label-for="input-2"
                          description=""
                        >

                       <b-form-input
                          id="short_name"
                          v-model.trim="form.total_sales_amount"
                          type="text"
                          placeholder=""
                          @blur="$v.form.total_sales_amount.$touch()"
                          :state="$v.form.total_sales_amount.$dirty ? !$v.form.total_sales_amount.$anyError : null"
                          readonly
                        >
                       </b-form-input>
                          
                       </b-form-group> 
     
                  </b-col>
          </b-row>
          
       </b-col> 

         
                <b-col cols="12" md="12" class="formStyle">

                    <div class="actionBtn buttonStyle">PAID</div>

                    <div class="actionBtn buttonStyle">Order Place</div>

                    <div class="actionBtn">

                          <b-form-group label="" v-slot="{ ariaDescribedby }">
                            <b-form-radio-group
                              id="radio-group-1"
                              v-model="form.sales_type"
                              :options="form.sales_type_option"
                              :aria-describedby="ariaDescribedby"
                              name="radio-options"
                            ></b-form-radio-group>
                          </b-form-group>
                         
                    </div>
                    <div class="actionBtn">

                                <div class="lavel">No of Guest</div>
                                <div class="ukinput">
                                     <b-form-input v-model="form.no_of_guest">
                                    </b-form-input>
                                </div>
    
                    </div>
                      <div class="actionBtn">
                                <div class="lavel">Discount(%)</div>
                                <div class="ukinput">
                                     <b-form-input v-model="form.total_discount_percent">
                                    </b-form-input>
                                </div>
                       </div>
               </b-col>

                           <!-- detail form --->

                    <!-- start details -->

                 <b-col cols="12" md="12" class="formStyle">

                <div class="sales table-responsive">
                         
                      <table class="table table-striped table-hover table-bordered">
                            <tr>
                                <span v-for="(itemLabel,i) in form.detailLabelAndField" :key="itemLabel.label">
                                      <span v-if="itemLabel.field=='item_category_id'">
                                           <th :class="'text_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                       <span v-else-if="itemLabel.field=='item_id'">
                                         <th :class="'text_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                      <span v-else-if="itemLabel.field=='rate'">
                                         <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                       <span v-else-if="itemLabel.field=='qty'">
                                             <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                       <span v-else-if="itemLabel.field=='total_discount'">
                                          <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                       <span v-else-if="itemLabel.field=='total_amount'">
                                             <th :class="'no_field sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                      <span v-else-if="itemLabel.field=='is_fire'">
                                          <th :class="'text_field2 sale_label_style sale_label_width_'+i"> {{itemLabel.label}} </th>
                                      </span>
                                
                               </span>
                               <span>
                               
                               <th class="sale_label fire">Fire</th>
                               <th class="sale_label action">Action</th>
                              </span>
                           </tr>
                          
                             <tr v-for="(v, i) in $v.dtl.fieldModel.$each.$iter" :id="'detail_id_'+i" class="detail-div">
                                     <input type="hidden" :id="'is_delete_'+i" :name="'is_delete_'+i" v-model="v['is_delete']"  class="form-control">
                                    <span v-for="(itemField,j) in form.detailLabelAndField">
                                        <td>
                                       <span v-if="itemField.field=='item_category_id'">
                                        
                                            <input
                                              type="hidden"
                                              :id="itemField.field+'_'+i"
                                              :name="itemField.field+'_'+i"
                                              v-model.trim="itemField.field"
                                              :class="'sale_field_style sale_field_width_'+j" 
                                              />

                                             <b-form-input
                                              :id="itemField.show_item_category_name+'_'+i"
                                              :name="itemField.show_item_category_name+'_'+i"
                                              v-model.trim="v[itemField.show_item_category_name].$model"
                                              :class="'input_field sale_field_style sale_field_width_'+j"
                                               readonly
                                               @click="categoryItem(i)"
                                               @blur="v[itemField.show_item_category_name].$touch()"
                                              :state="v[itemField.show_item_category_name].$dirty ? !v[itemField.show_item_category_name].$anyError : null"
                                            ></b-form-input>
                                            
                                      
                                      </span>  
                                      <span v-else-if="itemField.field=='item_id'">

                                          <input
                                              type="hidden"
                                              :id="itemField.field+'_'+i"
                                              :name="itemField.field+'_'+i"
                                              v-model.trim="itemField.field"
                                              :class="' sale_field_style sale_field_width_'+j" 
                                              />
                                        
                                            <b-form-input
                                              :id="itemField.show_item_name+'_'+i"
                                              :name="itemField.show_item_name+'_'+i"
                                              v-model.trim="v[itemField.show_item_name].$model"
                                              :class="'input_field sale_field_style sale_field_width_'+j"
                                              readonly
                                              @click="categoryItem(i)"
                                              @blur="v[itemField.show_item_name].$touch()"
                                              :state="v[itemField.show_item_name].$dirty ? !v[itemField.show_item_name].$anyError : null"
                                            ></b-form-select>
                                            
                                      
                                      </span>  

                                     <span v-else-if="itemField.field=='rate'">
                                        
                                            <b-form-group
                                                   id="input-group-2"
                                                   label=""
                                                   label-for="input-2"
                                                   description=""
                                                 >
                                                    <b-form-input
                                                      :id="itemField.field+'_'+i"
                                                      :name="itemField.field+'_'+i"
                                                       v-model.trim="v[itemField.field].$model"
                                                       type="text"
                                                       placeholder=""
                                                       readonly
                                                       :class="'input_no_field sale_field_style sale_field_width_'+j"
                                                       @blur="v[itemField.field].$touch()"
                                                       :state="v[itemField.field].$dirty ? !v[itemField.field].$anyError : null"
                                                     >
                                                </b-form-input>
                                               </b-form-group>
                                            
                                      
                                      </span>
                                      <span v-else-if="itemField.field=='qty'">
                                        
                                            <b-form-group
                                                   id="input-group-2"
                                                   label=""
                                                   label-for="input-2"
                                                   description=""
                                                 >
                                                    <b-form-input
                                                      :id="itemField.field+'_'+i"
                                                      :name="itemField.field+'_'+i"
                                                       v-model.trim="v[itemField.field].$model"
                                                       type="text"
                                                       placeholder=""
                                                       :class="'input_no_field sale_field_style sale_field_width_'+j"
                                                       @keyup="quantityUpdate($event,i,itemField.field,v[item_id])"
                                                       @blur="v[itemField.field].$touch()"
                                                       :state="v[itemField.field].$dirty ? !v[itemField.field].$anyError : null"
                                                     >
                                                </b-form-input>
                                               </b-form-group>
                                            
                                      
                                      </span>

                                      <span v-else-if="itemField.field=='total_discount'">
                                        
                                            <b-form-group
                                                   id="input-group-2"
                                                   label=""
                                                   label-for="input-2"
                                                   description=""
                                                 >
                                                    <b-form-input
                                                      :id="itemField.field+'_'+i"
                                                      :name="itemField.field+'_'+i"
                                                       v-model.trim="v[itemField.field].$model"
                                                       type="text"
                                                       placeholder=""
                                                       :class="'input_no_field  sale_field_style sale_field_width_'+j"
                                                       @keyup="discountUpdate($event,i,itemField.field,v[item_id])"
                                                       @blur="v[itemField.field].$touch()"
                                                       :state="v[itemField.field].$dirty ? !v[itemField.field].$anyError : null"
                                                     >
                                                </b-form-input>
                                               </b-form-group>
                                            
                                      
                                      </span>
                                      <span v-else-if="itemField.field=='is_fire'">
                                        
                                            <span v-if="itemField.field" class="input_field2 textStyle">Order Placed</span>
                                            <span v-else>Order Not Placed</span>
                                      </span>
                                      
                                      
                                      <span v-else>
                                                    <b-form-group
                                                   id="input-group-2"
                                                   label=""
                                                   label-for="input-2"
                                                   description=""
                                                 >
                                                    <b-form-input
                                                      :id="itemField.field+'_'+i"
                                                      :name="itemField.field+'_'+i"
                                                       v-model.trim="v[itemField.field].$model"
                                                       value=""
                                                       type="text"
                                                       placeholder=""
                                                       readonly
                                                       :class="'input_no_field sale_field_style sale_field_width_'+j"
                                                       @blur="v[itemField.field].$touch()"
                                                       :state="v[itemField.field].$dirty ? !v[itemField.field].$anyError : null"
                                                     >
                                                </b-form-input>
                                               </b-form-group>
                                      </span>
                                    

                                        </td>
                                      </span>
                                       <span>
                                          
                                           <td align="left" class="fire2">
                                                   
                                                    <span></span>  
                                                    <span class='delButton sale_field' @click="ActionN(i)">N</span>
                                           </td>
                                            </span>
                                            <td align="left" class="action2">
                                               <span class='delButton sale_field' @click="ActionV(i)">V</span>
                                               <span class='delButton sale_field' @click="ActionC(i)">C</span>
                                                <span class='delButton sale_field' @click="ActionC(i)">R</span>
                                               <span class='delButton sale_field' @click="deleteDtl(i)">X</span>
                                            </td>
                                     
                                  </tr>

                                 <tr>
                                    <span v-for="(itemLabel,i) in form.detailLabelAndField" >

                                      <span v-if="itemLabel.field=='item_category_id'">
                                           <td :class="'text_fieldTitle'"> 
                                      </span>
                                       <span v-else-if="itemLabel.field=='item_id'">
                                         <td :class="'text_fieldTitle'"> </td>
                                      </span>
                                      <span v-else-if="itemLabel.field=='rate'">
                                         <td :class="'no_fieldTitle'"> </td>
                                      </span>
                                       <span v-else-if="itemLabel.field=='qty'">
                                             <td :class="'no_fieldTitle'"> {{d_total_qty}} </td>
                                      </span>
                                       <span v-else-if="itemLabel.field=='total_discount'">
                                          <td :class="'no_fieldTitle'"> {{d_total_discount}} </td>
                                      </span>
                                       <span v-else-if="itemLabel.field=='total_amount'">
                                             <td :class="'no_fieldTitle'"> {{d_total}} </td>
                                      </span>
                                      <span v-else-if="itemLabel.field=='is_fire'">
                                          <td :class="'text_field2Title'"> </td>
                                      </span>
                                
                               </span>

                               <span>
                               
                               <td class="sale_labelTitle fireTitle"> </td>
                               <td class="sale_labelTitle actionTitle"> </td>
                              </span>
                           </tr>
 
                           </table>
                </div>

              <!--b-col cols="12" md="12" align="center">
                    <b-button type="button" variant="outline-primary" @click="addMore()">Add</b-button>
               </b-col-->
                      
        </b-col> 

                    <!-- end details -->
              

                      <b-col cols="12" md="12" align="center">
                            <b-button type="submit" variant="outline-primary">Submit</b-button>
                            <!--b-button type="reset" variant="outline-danger">Reset</b-button-->
                            <!--b-button  variant="outline-danger" @click="onReset">Reset</b-button-->
                       </b-col>

              </b-row>  
                       
             </b-form>
   
  

        </b-col>
       

   </b-row>
</b-card>
 
  <b-modal
      v-model="show"
      size="xl"
      id="modal-scrollable"
      scrollable
      hide-backdrop
      content-class="shadow"
      title="Sales Item"
      :header-bg-variant="headerBgVariant"
      :header-text-variant="headerTextVariant"
      :body-bg-variant="bodyBgVariant"
      :body-text-variant="bodyTextVariant"
      :footer-bg-variant="footerBgVariant"
      :footer-text-variant="footerTextVariant"
      @ok="okSubmit"
    
   >

      <div  class="itemSrcoll">
      <b-row>
         
          <b-col cols="12" md="4" class="itemLeft">
               <div v-if="categoryListObject">
                  <Scroll-Div  class="itemSrcoll">
                     <h5>Select Category</h5>
                    <ul class="catlist">
                          
                        <li :class="selected_cat_id === categoryListObj.value ? 'selected cursor':'cursor'"  v-for="(categoryListObj,k) in categoryListObject" @click="showItem(categoryListObj.value)" >
                             
                           {{k+1}}{{'-'}}{{categoryListObj.text}}
                       </li>
                    </ul>
                  </Scroll-Div>
               </div>
          </b-col>
           <b-col cols="12" md="8" class="itemRight">
                   <Scroll-Div  class="itemSrcoll">
                      <h5>Select Item</h5>
                    <table class="table table-striped table-hover table-bordered itemTable">
                            <tr>
                              <th>
                                 <input type="checkbox" class="custoCheck" v-model="itemAll"  :id="'allcheck'"  @change="handleCheckAll($event)"/> All
                              </th>

                              <th>Sl</th>
                              <th>Img</th>
                              <th>Item Code</th>
                              <th>Item</th>
                              <th>Qty</th>
                              <th>Discount</th>
                            </tr>

                            <tr v-if="itemListObject.length" v-for="(itemListObj,i) in  itemListObject" >
                              <td>
                                 <input type="checkbox" class="custoCheck"  v-model="eachItem[itemListObj.id]" @change="pushItem($event,itemListObj.id)"/>
                              </th>
                              <td>{{i+1}}</td>
                              <td>
                                  <span v-if="itemListObj.item_image_path"> 
                                    <img class="itemImgSize" :src="itemPath+itemListObj.item_image_path"/>
                                  </span>
                                  
                              </td>
                              <td>{{itemListObj.item_code}}</td>
                              <td>{{itemListObj.item_name}}{{itemListObj.id}}</td>

                              <td>
                                

                                <b-form-select
                                 id="is_active"
                                 v-model="no_of_qty[itemListObj.id]"
                                 :options="qty_list"
                                 class="qtysize"
                                 @change="updateItemQty(itemListObj.id)"
                               ></b-form-select>
                             </td> 
                             <td>

                            
                                             <b-form-group
                                                   id="input-group-2"
                                                   label=""
                                                   label-for="input-2"
                                                   description=""
                                                 >
                                                    <b-form-input
                                                      :id="itemListObj.id"
                                                       v-model.trim="modal_discount[itemListObj.id]"
                                                       value=""
                                                       type="text"
                                                       placeholder=""
                                                       class="qtysize"
                                                       @keyup="updateItemDiscount(itemListObj.id)"
                                                     >
                                                     </b-form-input>
                                               </b-form-group>
                             </td>
                           </tr>
                       
                            <tr v-if="! itemListObject.length">
                                <td :colspan="6">
                                 <p class="no_item">No item found. Please select category</p>
                               </td>
                            </tr>

                  </table>
                  </Scroll-Div>
          </b-col>
          
      </b-row>
      </div>
    
  </b-modal>
</div>
</template>

<script>
import Vue from "vue";
import manualConfig from "../../config/configManual";
import Datepicker from 'vuejs-datepicker';
import moment from 'moment';
import { required, minLength, between,numeric,email,sameAs} from 'vuelidate/lib/validators';
import { helpers } from 'vuelidate/lib/validators';
const checkMobile = helpers.regex('checkMobile', /^[(017)|(018)|(016)|(015)|(019)]{3}[0-9]{8}$/);

export default {
    data() {
      return {
        form: {
          sales_date:'',
          memo_no: '',
          customer_id: '',
          remarks:'',
          table_no:'',
          waiter_name:'',
          sales_type:'D',
          gross_sale_amount:0,
          total_discount_percent:0,
          total_discount:0,
          add_less:0,
          vat_percent:5,
          vat:0,
          service_charge_percent:2,
          service_charge:0,
          delivery_charge_percent:2,
          delivery_charge:0,
          total_sales_amount:0,
          create_by:'',
          company_id:'',
          company_name:'',
          userData:null,
          no_of_guest:0,
         
          sales_type_option: [
          { text: 'Dine In', value: 'D' },
          { text: 'Take Out', value: 'T' },
          ],
          detailLabelAndField:[{'label':'Item Category','field':'item_category_id','show_item_category_name':'item_category_name'},{'label':'Item Name','field':'item_id','show_item_name':'item_name'},{'label':'Rate','field':'rate'},{'label':'QTY','field':'qty'},{'label':'Discount','field':'total_discount'},{'label':'Total','field':'total_amount'},{'label':'Is Order Placed?','field':'is_fire'}],
        },
        dtl: {
             count:1,
             totalLoop:this.range(0,1),
             iterateLoop:[], 
             fieldModel:[],
            },

            defaultOption:[{ text: 'Select One', value:'' }],
            companyListObject:[],
            customerListObject:[],
            unitListObject:[],
            categoryListObject:[],
            itemListObject:[],
            allListObject:[],
            salesTypeOptions:[{ text: 'Direct', value:'direct' },{ text: 'Indirect', value: 'indirect' }],
            companyList:'',
            show: false,
            itemAll:false,
            eachItem:[],
            selectItemList:[],
            no_of_qty:[],
            modal_discount:[],
            is_fire:[],
            is_d:[],
            is_c:[],
            is_r:[],
            qty_list:[{ text: '1', value:1},{ text:'2', value: 2},{ text:'3', value:3 },{ text: '4', value: 4},{ text: '5', value: 5 },{ text: '6', value: 6 },{ text: '7', value: 7 },{ text: '8', value: 8 },{ text: '9', value: 9 },{ text: '10', value: 10 }],
            alertMsg: '',
            selected_cat_id:'',
            d_total_qty:0,
            d_total_discount:0,
            d_total:0,
            variants: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark'],
            headerBgVariant: 'primary',
            headerTextVariant: 'light',
            bodyBgVariant: 'info',
            bodyTextVariant: 'light',
            footerBgVariant: 'warning',
            footerTextVariant: 'dark',
    }
   },
 validations: {
      form:{
          sales_date:{
            required
          },
          memo_no: {
            required
          },
          customer_id: {
            required
          },
           table_no: {
            required
          },
          sales_type: {
            required
          },
          remarks: {
          },
          waiter_name: {
          }, 

          gross_sale_amount: {
            required
          },
         vat_percent: {
           required
          },
         vat: {
            required
          },
        service_charge_percent: {
          required
          }, 
        service_charge: {
            required
          },  
        delivery_charge_percent: {
         },  
        delivery_charge: {
          },
        add_less: {
           }, 
        total_sales_amount: {
            required
          },
         total_discount: {
          },       
      },
    dtl:{
        fieldModel:{
              $each:{
                    item_category_name:{required},
                    item_name:{required },
                    item_id:{ },
                    qty:{ required ,numeric},
                    rate:{ required,numeric },
                    total_discount:{numeric },
                    total_amount:{ required,numeric }
                },
   
        }
       
     },
         
  },
  components: {
    Datepicker,
  },
    created(){
      this.checkIsLog();
      this.selectBoxList();
      this.setFieldModel();

    },
    updated(){
     
    },

    mounted(){
    
    },
	
    methods: {
    checkIsLog(){
               if(localStorage.getItem('userData') == null){
                this.$router.push({name:'/',query:{msg:['pl']}});
               }else{
                 this.userData =(localStorage.getItem('userData'))? JSON.parse(localStorage.getItem('userData')):'';
                 this.form.company_id = this.userData.company_id;
               }
          },
    customFormatter(date) {
      return moment(date).format('D-MM-yyyy');
    },
    range(start, end){
         if (!end) {
           end = start;
           start = 0;
         }
         start -= 1;
         end -= 1;
         let arr = [];
         while (start++ !== end) {
           arr.push(start);
         }
         return arr;
       },

      setFieldModel(val=0){

         let detailData  = this.form.detailLabelAndField;
         let fieldModelArray  = this.dtl.fieldModel;
         let eachRecord ={};

      

         Vue.set(eachRecord,'is_delete',false);

         Vue.set(eachRecord, 'is_check',false);
         Vue.set(eachRecord, 'update_qty',0);
         Vue.set(eachRecord, 'modal_discount',0);
         Vue.set(eachRecord, 'is_fire',false);
         Vue.set(eachRecord, 'is_d',false);
         Vue.set(eachRecord, 'is_c',false);
         Vue.set(eachRecord, 'is_r',false);

         detailData.forEach(function(detail,j){
                if(detail.field == "item_category_id"){
                  Vue.set(eachRecord,detail.field,'');
                   Vue.set(eachRecord,detail.show_item_category_name,'');
                }else if(detail.field == "item_id"){
                    Vue.set(eachRecord,detail.field,'');
                    Vue.set(eachRecord,detail.show_item_name,'');
                }else{
                   Vue.set(eachRecord,detail.field,'');
                }
               
         });
        fieldModelArray.push(eachRecord);
        
           
        return fieldModelArray;   
      },

      addMore(){
           
              this.dtl.totalLoop.push(this.dtl.count++);
              //this.dtl.iterateLoop =[];
              this.dtl.iterateLoop.push({'loop':(this.dtl.totalLoop.length-1)});

              this.setFieldModel(this.dtl.totalLoop.length-1);

              return this.dtl.iterateLoop;

      },

      deleteDtl(index){

        let detailId ='#detail_id_'+index;
        let isDelete ='is_delete_'+index;

           //this.$set(this.dtl.fieldModel,"is_delete_"+index+"",'true');
           //this.$set(this.dtl.fieldModel[index],"is_delete','true');
           //this.dtl.fieldModel.splice(index, 'is_delete', 'true');

         this.dtl.fieldModel[index].is_delete ='true';
         this.dtl.fieldModel.splice(index,1);
         this.dtl.totalLoop.splice(index,1);

            //document.querySelector(detailId).style.display ="none";

      },
      onSubmit(event) {
        event.preventDefault();
         
       this.$v.$touch();
        
      if (this.$v.$invalid) {
        this.submitStatus = 'ERROR';
          
      } else {
             
          if(this.form.company_id && JSON.parse(localStorage.getItem('userData')).id){
             
               const data = {
                    sales_date:moment(this.form.sales_date).format('D-MM-yyyy'),
                    memo_no: this.form.memo_no,
                    customer_id: this.form.customer_id,
                    remarks:this.form.remarks,
                    table_no:this.form.table_no,
                    waiter_name:this.form.waiter_name,
                    sales_type:this.form.sales_type,
                    gross_sale_amount:this.form.gross_sale_amount,
                    vat_percent: this.form.vat_percent,
                    vat:this.form.vat,
                    service_charge:this.form.service_charge,
                    service_charge_percent:this.form.service_charge_percent,
                    delivery_charge:this.form.delivery_charge,
                    add_less:this.form.add_less,
                    total_sales_amount:this.form.total_sales_amount,
                    company_id:this.form.company_id,
                    create_by:JSON.parse(localStorage.getItem('userData')).id,
                    detail:this.dtl.fieldModel
               }

              

              this.$store.dispatch('addSales',data)
                .then(() => {
                        if(this.$store.getters.getNotifications.type){
                                     this.$notify({
                                     group: this.$store.getters.getNotifications.group,
                                     type: this.$store.getters.getNotifications.type,
                                     title: 'Message',
                                     text: this.$store.getters.getNotifications.message,
                                     duration: 3000,
                                     speed: 300
                                 });
                        }
                       this.$store.commit('remove_notification');
                });

               this.onReset(event);

                

         
           }else{
            this.$router.push({page:'home'});
                              this.$notify({
                                     group:'message1',
                                     type: 'error',
                                     title: 'Message',
                                     text:'Please login first',
                                     duration: 3000,
                                     speed: 300
                                 });
           }
          

        }

      },
      onReset(event) {
        event.preventDefault();

                    this.form.sales_date ='';
                    this.form.memo_no ='';
                    this.form.customer_id ='';
                    this.form.remarks ='';
                    this.form.table_no ='';
                    this.form.waiter_name ='';
                    this.form.sales_type ='';
                    this.form.gross_sale_amount ='';
                    this.form.vat_percent ='';
                    this.form.vat ='';
                    this.form.service_charge ='';
                    this.form.service_charge_percent ='';
                    this.form.delivery_charge ='';
                    this.form.add_less ='';
                    this.form.total_sales_amount ='';
                    this.form.company_id ='';

                    this.dtl.totalLoop =[0]; 
                    this.dtl.fieldModel =[];

                    let eachRecord ={};
         
                    Vue.set(eachRecord,'is_delete','false');
                    this.form.detailLabelAndField.forEach(function(detail,j){
                           Vue.set(eachRecord,detail.field,'');
                    });

                    this.dtl.fieldModel.push(eachRecord);

                    //return this.dtl.fieldModel;   

      },
      selectBoxList(){
            
                 this.$store.dispatch('getPosCompanyFilterList',{})
                   .then(()=>{
                        if(this.$store.getters.allPosCompany[0].id){
                              let allCom =[];
                            this.$store.getters.allPosCompany.forEach(function(value, key){
                                 let comLis ={
                                      text:value.name,
                                      value:value.id
                                  };
                                  allCom.push(comLis);
                            });
                              this.companyListObject = allCom;
                            
                         }
                  });


                 this.$store.dispatch('editPosCompany',{
                     id:this.userData.company_id
                    }).then(()=>{

                          if(this.$store.getters.editPosCompanyList.id){
                           this.form.company_name = this.$store.getters.editPosCompanyList.name;
                          }
                    });
                  

                   this.$store.dispatch('getPosCustomerFilterList',{})
                   .then(()=>{
                        if(this.$store.getters.allPosCustomer[0].id){
                              let allCus =[];
                            this.$store.getters.allPosCustomer.forEach(function(value, key){
                                 let cusLis ={
                                      text:value.customer_name,
                                      value:value.id
                                  };
                                  allCus.push(cusLis);
                            });
                              this.customerListObject = allCus;
                            
                         }
                  });

                   this.$store.dispatch('getPosUnitFilterList',{})
                   .then(()=>{
                        if(this.$store.getters.allPosUnit[0].id){
                              let allUnit =[];
                            this.$store.getters.allPosUnit.forEach(function(value, key){
                                 let unitLis ={
                                      text:value.unit_name,
                                      value:value.id
                                  };
                                  allUnit.push(unitLis);
                            });
                              this.unitListObject = allUnit;
                            
                         }
                  });

                 this.$store.dispatch('getPosCategoryFilterList',{})
                   .then(()=>{
                        if(this.$store.getters.allPosCategory[0].id){
                              let allCat =[];
                            this.$store.getters.allPosCategory.forEach(function(value, key){
                                 let catLis ={
                                      text:value.category_name,
                                      value:value.id
                                  };
                                  allCat.push(catLis);
                            });
                              this.categoryListObject = allCat;
                            
                         }
                  });
                  this.$store.dispatch('getPosItemFilterList',{})
                   .then(()=>{
                        if(this.$store.getters.allPosItem[0].id){
                              let allItem =[];
                            this.$store.getters.allPosItem.forEach(function(value, key){
                                 let itemLis ={
                                      text:value.item_name,
                                      value:value.id
                                  };
                                  allItem.push(itemLis);
                            });
                              this.allListObject = allItem;
                            
                         }
                  });

     },
    categoryItem(index){
                  // get all category list 
        let item_category_id="";
        let item_category_name="";
        let item_id="";
        let item_name="";

        item_category_id = this.dtl.fieldModel[index].item_category_id;
        item_category_name = this.dtl.fieldModel[index].item_category_name;

        item_id = this.dtl.fieldModel[index].item_id;
        item_name = this.dtl.fieldModel[index].item_name;

        this.selected_cat_id = null;
        this.selected_cat_id = item_category_id;
         this.showItem(this.selected_cat_id);
         this.show = true;

        alert(item_category_name);
      
    },
    showItem(catId){

                 // show all category,item  when click on category to open modal
                 // also update modal discount, qty from fieldModalObjectArray
     
        if(catId){

         //this.allListObject;

         //this.itemListObject = this.allListObject.map(item=>(item.item_category_id));

        /* if (this.allListObject.find(x => x.item_category_id === catId)) {
                  this.itemListObject.push(x);
         }*/

          

           

           this.selected_cat_id = null;
           this.selected_cat_id = catId;
           let fieldModel = this.dtl.fieldModel;
            
            this.$Progress.start();
            this.$store.dispatch('getPosItemFilterList',{
                     item_name:'',
                     item_code: '',
                     is_active: '',
                     company_id: this.form.company_id,
                     category_id: catId,
                     unit_id:''
                     })
                   .then(()=>{

                        this.$Progress.finish();

                        if(this.$store.getters.allPosItem[0].id){

                          this.itemListObject = this.$store.getters.allPosItem;
                          this.updatePropertyValue();

                         }
                  });

               
        }
    },
   
    handleFire(event,index){

        this.dtl.fieldModel[index].is_fire = event.target.checked
   
    },
    pushItem(event,itemId){


              // put all checked item from itemListObjectArray to selectItemObjectArray
         
        
        let indexOfItemObject =null;
        indexOfItemObject = this.itemListObject.map(item => item.id).indexOf(itemId);
         


           // check selectItemObjectArray and push or delete check itemListObjectArray

          this.$Progress.start();
        if(event.target.checked){

                       // searcing  temListObjectArray and update input value 

                  this.itemListObject[indexOfItemObject].is_check = event.target.checked;
                  this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId];
                  this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId];

                    //alert(this.modal_discount[itemId]);

                       //end searcing  temListObjectArray and update input value  

                        // search  selectItemObjectArray status 

                    if(this.selectItemList.length>=1){

                         let indexOfSelectedItemObject = null;
                        

                            this.selectItemList.forEach(function(selectItem,k){
                                  if(selectItem.id === itemId){
                                    indexOfSelectedItemObject = k;
                                   }
                            });

                         if(indexOfSelectedItemObject){
                               
                             this.selectItemList[indexOfSelectedItemObject] = this.itemListObject[indexOfItemObject];
                         }else{
                              
                              this.selectItemList.push(this.itemListObject[indexOfItemObject]);
                         }

                    }else{ 
                           this.selectItemList.push(this.itemListObject[indexOfItemObject]);
                     }
                     
                      // end search  selectItemObjectArray status

                this.$Progress.finish(); 
        }else{
           
                // searcing  selectItemObjectArray status

                   
                  this.itemListObject[indexOfItemObject].is_check = event.target.checked;
                  this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId];
                  this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId];

    
                  if(this.selectItemList.length>=1){
                        
                         let selectItemList = this.selectItemList;

                         this.selectItemList.forEach(function(item,i){
                               if(item.id === itemId){
                                  selectItemList.splice(selectItemList.indexOf(item),1);
                               }
                           });
                    }
              this.$Progress.finish();
                 // end selectItemObjectArray status
        }
     
        
    },

   pushItem_back(event,itemId){


              // put all checked item from itemListObjectArray to selectItemObjectArray

        //let qty = this.no_of_qty[itemId]; 
        //let modalDiscount = this.modal_discount[itemId]; 
        let indexOfItemObject =null;
        indexOfItemObject = this.itemListObject.map(item => item.id).indexOf(itemId);
         


           // check selectItemObjectArray and push or delete check itemListObjectArray
        if(event.target.checked){

                       // searcing  temListObjectArray and update input value 

                  this.itemListObject[indexOfItemObject].is_check = event.target.checked;
                  this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId];
                  this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId];

                    //alert(this.modal_discount[itemId]);

                       //end searcing  temListObjectArray and update input value  

                        // search  selectItemObjectArray status 

                    if(this.selectItemList.length>=1){

                         let indexOfSelectedItemObject = null;
                        

                            this.selectItemList.forEach(function(selectItem,k){
                                  if(selectItem.id === itemId){
                                    indexOfSelectedItemObject = k;
                                   }
                            });

                         if(indexOfSelectedItemObject){
                               
                             this.selectItemList[indexOfSelectedItemObject] = this.itemListObject[indexOfItemObject];
                         }else{
                              
                              this.selectItemList.push(this.itemListObject[indexOfItemObject]);
                         }

                    }else{ 
                           this.selectItemList.push(this.itemListObject[indexOfItemObject]);
                     }

                      // end search  selectItemObjectArray status

                 
        }else{
           
                // searcing  selectItemObjectArray status

                   
                  this.itemListObject[indexOfItemObject].is_check = event.target.checked;
                  this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId];
                  this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId];

    
                  if(this.selectItemList.length>=1){
                        
                         let selectItemList = this.selectItemList;

                         this.selectItemList.forEach(function(item,i){
                               if(item.id === itemId){
                                  selectItemList.splice(selectItemList.indexOf(item),1);
                               }
                           });
                    }

                 // end selectItemObjectArray status
        }
        
    },
    updateItemQty(itemId){
                 // modal quqntity update
          let qty = this.no_of_qty[itemId]; 
          let isCheck = this.eachItem[itemId];

       

        let indexOfItemObject = this.selectItemList.map(item => item.id).indexOf(itemId); 
         
        if(isCheck){
               
                 this.selectItemList[indexOfItemObject].is_check = isCheck;
                 this.selectItemList[indexOfItemObject].update_qty = qty; 
        }else{
           this.showMsgBox();
        }
    },

   updateItemDiscount(itemId){
            
            // modal quqntity update

          let modalDiscount = this.modal_discount[itemId]; 
          let isCheck = this.eachItem[itemId];

       

        let indexOfItemObject = this.selectItemList.map(item => item.id).indexOf(itemId); 
         
        if(isCheck){
               
                 this.selectItemList[indexOfItemObject].is_check = isCheck;
                 this.selectItemList[indexOfItemObject].modal_discount = modalDiscount; 
        }else{
           this.showMsgBox();
        }
    },

    showMsgBox() {
        this.alertMsg = ''
        this.$bvModal.msgBoxOk('Please check item', {
          title: 'Alert',
          size: 'sm',
          buttonSize: 'sm',
          okVariant: 'success',
          headerClass: 'p-2 border-bottom-0',
          footerClass: 'p-2 border-top-0',
          centered: true
        })
          .then(value => {
            this.alertMsg = value
          })
          .catch(err => {
            // An error occurred
          })
      },

      okSubmit(){

               // when click on ok button on modal then put all selectItemListObjectArray to fieldModelObjectArray

          return this.getAllLoopCalculation();
      },
    
      getAllLoopCalculation(){

                 // when click on ok button on modal then put all selectItemListObjectArray to fieldModelObjectArray
           
             let detailData  = this.form.detailLabelAndField;
             let fieldModelArray =[];

                       // each row calculation 

                 if(this.selectItemList.length >=1){


                  // set master property 

                   

                  // end set master property

                       /* 
                        let gross_sale_amount = this.form.gross_sale_amount;
                        let total_discount = this.form.total_discount;
                        let total_discount_percent = this.form.total_discount_percent;
                        let add_less = this.form.add_less;
                        let vat_percent = this.form.vat_percent;
                        let vat = this.form.vat;
                        let service_charge_percent = this.form.service_charge_percent;
                        let service_charge = this.form.service_charge;
                        let delivery_charge_percent = this.form.delivery_charge_percent;
                        let delivery_charge = this.form.delivery_charge;
                        let total_sales_amount = this.form.total_sales_amount;
                       */

                  // set footer description property
                    
                        let d_total_qty = this.d_total_qty;
                        let d_total_discount = this.d_total_discount;
                        let d_total = this.d_total;

                   // end set footer description property

                  this.selectItemList.forEach(function(selectItem,i){

                         let eachRecord ={};

                        Vue.set(eachRecord,'is_delete','false');
                        Vue.set(eachRecord, 'is_fire',selectItem['is_fire']);
                        Vue.set(eachRecord, 'is_d',selectItem['is_d']);
                        Vue.set(eachRecord, 'is_c',selectItem['is_c']);
                        Vue.set(eachRecord, 'is_r',selectItem['is_r']);


                         let updateQty =0;
                         let rate =0;
                         let discount =0;
                         let totalAmount =0;

                        detailData.forEach(function(detail,j){

                           
                             if(detail.field == "item_category_id"){

                                 
                                Vue.set(eachRecord,detail.field,selectItem['category_id']);

                                Vue.set(eachRecord,detail.show_item_category_name,selectItem['category_name']);

                             }else if(detail.field == "item_id"){
                                 Vue.set(eachRecord,detail.field,selectItem['id']);

                                 Vue.set(eachRecord,detail.show_item_name,selectItem['item_name']);

                              }else if(detail.field == "rate"){
                                  rate = selectItem[detail.field];

                                 Vue.set(eachRecord,detail.field,rate);

                              }else if(detail.field == "qty"){
                                   updateQty = selectItem['update_qty'];
                                 Vue.set(eachRecord,detail.field,updateQty);
                                  d_total_qty = parseInt(d_total_qty)+parseInt(updateQty);

                             }else if(detail.field == "total_discount"){
                                  discount = selectItem['modal_discount'];
                                  Vue.set(eachRecord,detail.field,discount);

                                  d_total_discount = parseInt(d_total_discount) + parseInt(discount);

                             }else if(detail.field == "total_amount"){
  
                                 totalAmount = ((parseInt(rate)*parseInt(updateQty))-parseInt(discount));

                                 Vue.set(eachRecord,detail.field,totalAmount);

                                 d_total = parseInt(d_total)+ (parseInt(totalAmount));

                                 

                             }
                             


                      });
                       
                        fieldModelArray.push(eachRecord);
                         
                     
                  });

                       
                        

                        this.d_total_qty =  d_total_qty;
                        this.d_total_discount = d_total_discount;
                        this.d_total = d_total;

                        this.form.gross_sale_amount = parseInt(d_total);
                        this.form.total_discount = d_total_discount;
                        this.add_less = this.add_less;
                     
                        

                        if(this.form.vat_percent && parseInt(this.form.vat_percent) >0){
                           
                             this.form.vat = parseInt(this.form.gross_sale_amount*(this.form.vat_percent/100));
                            
                        }else{
                            this.form.vat = 0;
                        }

                        if(this.form.service_charge_percent && parseInt(this.form.service_charge_percent) >0){
                             this.form.service_charge =  parseInt(this.form.gross_sale_amount*(this.form.service_charge_percent/100));
                        }

                        if(this.form.delivery_charge_percent && parseInt(this.form.delivery_charge_percent) >0){
                             this.form.delivery_charge = parseInt(this.form.gross_sale_amount*(this.form.delivery_charge_percent/100));
                        }

                        this.form.total_sales_amount = parseInt(this.form.gross_sale_amount + this.form.service_charge + this.form.delivery_charge - this.form.vat - this.form.total_discount - this.form.add_less);
                       
                                 
                    this.dtl.fieldModel =[];
                    this.dtl.fieldModel = fieldModelArray;
                    
               }

                 return this.dtl.fieldModel;   
                 

                     // end each row calculation 
      },

     quantityUpdate(event,index,field){
           
               // master dtl  quqntity update

          if(this.dtl.fieldModel[index][field] = event.target.value){
                 this.no_of_qty[this.dtl.fieldModel[index].item_id] = this.dtl.fieldModel[index][field];
              this.updateAllLoopCalculation();
          }
          
     },
     discountUpdate(event,index,field){

            // master dtl  discount update

           if(this.dtl.fieldModel[index][field] = event.target.value){

                 this.modal_discount[this.dtl.fieldModel[index].item_id] = this.dtl.fieldModel[index][field];
                 
              this.updateAllLoopCalculation();
           }
     },

      updateAllLoopCalculation(){
           
              // where update qty, discount on detail form then update whole master detail data(VVI)

             let detailData  = this.form.detailLabelAndField;
            

                       // each row calculation 

                 if(this.dtl.fieldModel.length >=1){ 

                 let staticfieldModel = this.dtl.fieldModel;

                  this.dtl.fieldModel.forEach(function(modelItem,i){

                         let rate =0;
                         let qty =0;
                         let totalDiscount =0;
                         let totalAmount =0;

                        detailData.forEach(function(detail,j){

                           
                             if(detail.field == "item_category_id"){


                             }else if(detail.field == "item_id"){
                                

                              }else if(detail.field == "rate"){

                                  rate = modelItem[detail.field];

                              }else if(detail.field == "qty"){

                                   qty = modelItem[detail.field];

                             }else if(detail.field == "total_discount"){

                                  totalDiscount = modelItem[detail.field];

                             }else if(detail.field == "total_amount"){

                                 totalAmount = ((rate*qty)-totalDiscount);

                             }
                             


                      });
                       
                      //let totalId ='#total_amount_'+i;
                      //document.querySelector(totalId).value = ((modelItem.rate*modelItem.qty)-modelItem.total_discount);
                      //document.querySelector(totalId).value = totalAmount;

                      modelItem.total_amount = totalAmount;
                     
                       
  
                  });
   
               }

                     // end each row calculation 
      },

    },
    computed:{
        deleteImg(){
                     return manualConfig.sitePath+'/public/images/database_delete.png';
         },
         itemPath(){
              return manualConfig.sitePath+'/public/images/upload/inv/';
         },
         updatePropertyValue(){
             
             let allItem =[];
                                  // some additional field that does not save on database
                               let no_of_qty = this.no_of_qty;
                               let is_fire = this.is_fire;
                               let is_d = this.is_d;
                               let is_c = this.is_c;
                               let is_r = this.is_r;
                               let modal_discount = this.modal_discount;

                            

                           this.itemListObject.forEach(function(value, key){

                                       // set define object property

                                     
                                       no_of_qty[value.id] = (no_of_qty[value.id])? no_of_qty[value.id]:1;
         
                                       modal_discount[value.id]= (modal_discount[value.id])? modal_discount[value.id]:0;
                                        

                                          // end set object property


                                          // set loop object property

                                            Vue.set(value, 'is_check',is_fire[value.id]);
                                            Vue.set(value, 'update_qty',no_of_qty[value.id]);
                                            Vue.set(value, 'modal_discount',modal_discount[value.id]);
                                            //Vue.set(value, 'is_fire',is_fire[value.id]);
                                           // Vue.set(value, 'is_d',is_d[value.id]);
                                            //Vue.set(value, 'is_c',is_c[value.id]);
                                            //Vue.set(value, 'is_r',is_r[value.id]);
                                             
                    
                                            // end loop object property


                                      allItem.push(value);
                                  
                           
                            
                       });
                           
                               this.itemListObject=[];
                             
                               // add all loop object to  itemListObject

                              this.itemListObject = allItem; 
         },
         updatePushItem(event,itemId){

              

              // put all checked item from itemListObjectArray to selectItemObjectArray

        //let qty = this.no_of_qty[itemId]; 
        //let modalDiscount = this.modal_discount[itemId]; 
        let indexOfItemObject =null;
        indexOfItemObject = this.itemListObject.map(item => item.id).indexOf(itemId);
         


           // check selectItemObjectArray and push or delete check itemListObjectArray
        if(event.target.checked){

                       // searcing  temListObjectArray and update input value 

                  this.itemListObject[indexOfItemObject].is_check = event.target.checked;
                  this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId];
                  this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId];

                    //alert(this.modal_discount[itemId]);

                       //end searcing  temListObjectArray and update input value  

                        // search  selectItemObjectArray status 

                    if(this.selectItemList.length>=1){

                         let indexOfSelectedItemObject = null;
                        

                            this.selectItemList.forEach(function(selectItem,k){
                                  if(selectItem.id === itemId){
                                    indexOfSelectedItemObject = k;
                                   }
                            });

                         if(indexOfSelectedItemObject){
                               
                             this.selectItemList[indexOfSelectedItemObject] = this.itemListObject[indexOfItemObject];
                         }else{
                              
                              this.selectItemList.push(this.itemListObject[indexOfItemObject]);
                         }

                    }else{ 
                           this.selectItemList.push(this.itemListObject[indexOfItemObject]);
                     }

                      // end search  selectItemObjectArray status

                 
        }else{
           
                // searcing  selectItemObjectArray status

                   
                  this.itemListObject[indexOfItemObject].is_check = event.target.checked;
                  this.itemListObject[indexOfItemObject].update_qty = this.no_of_qty[itemId];
                  this.itemListObject[indexOfItemObject].modal_discount = this.modal_discount[itemId];

    
                  if(this.selectItemList.length>=1){
                        
                         let selectItemList = this.selectItemList;

                         this.selectItemList.forEach(function(item,i){
                               if(item.id === itemId){
                                  selectItemList.splice(selectItemList.indexOf(item),1);
                               }
                           });
                    }

                 // end selectItemObjectArray status
        }
         }
    },
    watch:{

    }
	
  }
</script>

bONEandALL
Visitor

Total : 4233

Today :29

Today Visit Country :

  • United States