Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/ts.corals.io/frontend/components/Users/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div class="d-inline-block">
    <b-button variant="success" size="sm" type="button" @click="showModal('date-modal')" ref="btnShow">
      Generate Users Payment
    </b-button>

    <template>
      <b-modal ref="date-modal" title="Select Payment Period" hide-footer content-class="shadow" no-close-on-backdrop>
        <c-overlay :show="dateFormSubmitted">
          <div class="row">
            <div class="col-md-12">
              <label for="from_date">From Date</label>
              <b-form-datepicker id="from_date" v-model="from_date" :max="to_date" class="mb-2"></b-form-datepicker>

              <label for="to_date">To Date</label>
              <b-form-datepicker id="to_date" v-model="to_date" class="mb-2"></b-form-datepicker>

              <div class="text-right">
                <button @click="submitDateModal()" type="submit" class="btn btn-sm btn-primary">
                  Submit
                </button>
                <button @click="hideModal('date-modal')" class="btn btn-sm btn-secondary">
                  Close
                </button>
              </div>
            </div>
          </div>
        </c-overlay>
      </b-modal>
    </template>
    <template>
      <b-modal ref="users-payment-modal" title="Users Payments" hide-footer content-class="shadow" size="lg"
               no-close-on-backdrop>
        <div v-if="form">
          <c-overlay :show="!form.isReady">
            <div class="row sm-gutters">
              <div class="col-md-5">
                <corals-datepicker :form="form" required field="expense_date" label="Expense Date"/>
              </div>
              <div class="col-md-4">
                <corals-select :form="form" field="currency" :options="form.getFormData('currency_options')" required/>
              </div>
            </div>
            <div class="row sm-gutters">
              <div class="col-md-6">
                <corals-radio :form="form" label="Payment Method" field="payment_method"
                              :list="form.getFormData('payment_method_options')" required/>
              </div>
            </div>

            <div class="row">
              <div class="col-md-12">
                <div class="table-responsive">
                  <table class="table table-striped table-condensed">
                    <thead>
                    <tr>
                      <th scope="col" style="min-width: 170px;width: 170px;">User</th>
                      <th scope="col" style="min-width: 120px;width: 120px;">Payment</th>
                      <th scope="col" style="min-width: 300px;">Note</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr :key="'user_'+index" v-for="(user,index) in form.users">
                      <td>
                        <strong>{{ user.full_name }}</strong>
                        <div class="text-sm mt-2">
                          <b-form-checkbox
                            :id="'exclude_'+index" v-model="user.excluded"
                            :value="1" :unchecked-value="0">
                            Exclude
                          </b-form-checkbox>
                        </div>
                      </td>
                      <td>
                        <corals-input :form="form" type="number" :field="`users.${index}.payment`"
                                      v-model="user.payment" :label="false" required/>
                      </td>
                      <td>
                        <corals-textarea :form="form" :field="`users.${index}.notes`"
                                         v-model="user.notes" :label="false" required/>
                        <small class="text-info" v-if="user.period_status">{{ user.period_status }}</small>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="col-md-12">
                <div class="text-right">
                  <button @click="submitUsersPaymentModal()" type="submit"
                          class="btn btn-sm btn-primary">
                    Do Payment
                  </button>
                  <button @click.prevent="hideModal('users-payment-modal')" class="btn btn-sm btn-secondary">
                    Close
                  </button>
                </div>
              </div>
            </div>
          </c-overlay>
        </div>
      </b-modal>
    </template>
  </div>
</template>

<script>
import CoralsCheckbox from "@/components/CoralsForm/CoralsCheckbox";
import moment from "moment";
import CoralsTextarea from "@/components/CoralsForm/CoralsTextarea.vue";
import COverlay from "@/components/layout/COverlay";

export default {
  name: "PaymentModal",
  components: {CoralsTextarea, CoralsCheckbox, COverlay},
  data() {
    let date = new Date();

    return {
      dateFormSubmitted: false,
      from_date: new Date(date.getFullYear(), date.getMonth(), 1),
      to_date: new Date(date.getFullYear(), date.getMonth() + 1, 0),
      paymentModalShow: false,
      form: null
    }
  },
  watch: {
    'form.isReady'(value) {
      if (value) {
        this.hideModal('date-modal')
        this.showModal('users-payment-modal')
      }
    }
  },
  methods: {
    submitDateModal() {
      this.dateFormSubmitted = true
      this.from_date = moment(this.from_date).format("YYYY-MM-DD");
      this.to_date = moment(this.to_date).format("YYYY-MM-DD");

      this.$axios.get(`timesheet/users-payment?from_date=${this.from_date}&to_date=${this.to_date}`)
        .then(({data: record}) => {
          this.form = this.$form({
            users: [],
            expense_date: new Date(),
            currency: 'usd',
            payment_method: 'bank_transfer',
          }, {
            fetchFormDataURL: '/timesheet/get-payment-form-data', loadFormDataCallBack: () => {
              this.form.replace(record.data);
            }
          })
        }).catch(err => {
        this.$toast.error(err.message);
      }).finally(() => {
        this.dateFormSubmitted = false;
      });
    },
    submitUsersPaymentModal() {
      this.form.post(`timesheet/users-payment`)
        .then((response) => {
          this.hideModal('users-payment-modal')
        }).catch(err => {
        this.$toast.error(err.message);
      });
    },
    showModal(modal) {
      this.$refs[modal].show()
    },
    hideModal(modal) {
      this.$refs[modal].hide()
    },
  }
}
</script>

<style scoped>

</style>