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/pages/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <CRUDIndex ref="requestsTable"
               :columns="columns" :resourceURL="resourceUrl" :options="options"
               @edit-form-closed="editFormClosed"
               :form="form" :labels="labels">

      <template v-slot:activity_id="{object}">
        <span v-html="object.row.activity_title"></span>
      </template>

      <template v-slot:user_id="{object}">
        <nuxt-link :to="`/users/${object.row.user_id}`">
          {{ object.row.user_name }}
        </nuxt-link>
      </template>

      <template v-slot:number_Of_days="{object}">
        <span v-html="object.row.properties.number_of_days"></span>
      </template>

      <template v-slot:remaining_days_for_activity="{object}">
        <span v-html="object.row.properties.remaining_days_for_activity"></span>
      </template>

      <template v-slot:notes="{object}">
        <div v-html="$getTextWithLinks(object.row.notes)"></div>
      </template>

      <template v-slot:reject_reason="{object}">
        <div v-html="$getTextWithLinks(object.row.reject_reason)"></div>
      </template>

      <template v-slot:time="{object}">
        <span v-html="object.row.time"></span>
      </template>

      <template v-slot:extra-actions="{object}">
        <div class="d-inline-block" style="width: 170px;"
             v-if="object.markRequestAsApproved || object.markRequestAsReject">
          <b-link class="btn btn-sm btn-success" @click.prevent="approveTimeOffRequest(object)"
                  title="Approve Time Off"
                  v-if="object.markRequestAsApproved">
            <fa icon="check"/>
            Approve
          </b-link>
          <b-link class="btn btn-sm btn-danger" @click.prevent="showRequestRejectModal(object)"
                  title="Reject Time Off"
                  v-if="object.markRequestAsReject">
            <fa icon="times"/>
            Reject
          </b-link>
        </div>
      </template>

      <template v-slot:status="{object}">
        <span v-html="object.row.status_as_labels"></span>
      </template>

      <template v-slot:default="{form}">
        <corals-select :form="form" field="activity_id" label="Time off type" required
                       :options="form.getFormData('limited_activities')"/>

        <div class="row sm-gutters">
          <div class="col-md-6">
            <corals-datepicker :max="form.end_date" :form="form"
                               field="start_date" required/>
          </div>
          <div class="col-md-6">
            <corals-datepicker :min="form.start_date" :form="form" field="end_date" required/>
          </div>
        </div>
        <div class="row" v-if="showTimeOffHours">
          <div class="col-md-6">
            <corals-input :form="form" type="number" field="hours" step="0.01"/>
          </div>
          <div class="col-md-6">
            <corals-input :form="form" type="number" field="minutes" step="0.01"/>
          </div>
        </div>

        <corals-textarea field="notes" :form="form" required/>
      </template>
    </CRUDIndex>
    <rejected-request-modal :time-off-request="rejectRequest" v-if="rejectRequest" @hidden="onModalHidden"/>
  </div>
</template>

<script>
import CRUDIndex from "@/components/layout/CRUDIndex";
import RejectedRequestModal from "@/components/ModalForRejctedTimeOff/RejectedRequestModal";

export default {
  name: "index",
  middleware: 'Authorization',
  components: {CRUDIndex, RejectedRequestModal},
  data() {
    return {
      rejectRequest: null,
      resourceUrl: 'timesheet/time-off-requests',
      columns: ['activity_id', 'user_id', 'status', 'start_date', 'end_date', 'number_Of_days', 'remaining_days_for_activity', 'notes', 'time', 'reject_reason', 'actions'],
      options: {
        listColumns: {
          activity_id: [],
          user_id:[],
          status:[],
        },
        initFilters: {'status': 'pending'},
        sortable: [],
        filterable: ['activity_id','user_id','status','end_date','start_date'],
        customColumns: ['status', 'activity_id', 'user_id', 'number_Of_days', 'remaining_days_for_activity', 'time', 'reject_reason', 'notes'],
        hideCreate: this.$isAdmin(),
        headings: {
          'user_id': 'User',
          'activity_id': 'Type',
          'reject_reason': 'Reject Reason',
          'number_Of_days': '# Days',
          'remaining_days_for_activity': '# Remaining Days',
        },
      },
      labels: {
        title: 'Time Off Requests',
        singularTitle: 'Time Off Request',
      },
      form: this.$form({
        start_date: '',
        end_date: '',
        user_id: '',
        activity_id: '',
        project_id: '',
        notes: '',
        reject_reason: '',
        hours: '',
        minutes: ''
      }, {
        fetchFormDataURL: 'timesheet/time-off-requests/get-form-data',
        loadFormDataCallBack: () => {
          this.options.listColumns.activity_id = this.getOptions(this.form.formData.limited_activities);

          this.options.listColumns.user_id = this.getOptions(this.form.formData.users);

          this.options.listColumns.status = this.getOptions(this.form.formData.status_options);
        }
      }),
    }
  },
  computed: {
    showTimeOffHours() {
      let start_date = this.form.start_date;
      let end_date = this.form.end_date;
      return start_date === end_date && (start_date.length && end_date.length)
    }
  },
  methods: {
    getOptions(list) {
      let allOption = {id: '', text: 'All'};
      let options = [];

      options.push(allOption);

      list.map(row => {
        let label = row.label.split(",");
        options.push({id: row.id ?? row.value, text: label[0]});
      });

      return options;
    },
    onModalHidden() {
      this.rejectRequest = null;
      this.$refs.requestsTable.refresh();
    },
    showRequestRejectModal(rejectRequest) {
      this.rejectRequest = rejectRequest;
    },
    approveTimeOffRequest(request) {
      this.$swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#d7d7d7',
        confirmButtonText: 'Yes, Approve Request!'
      }).then((result) => {
        if (result.value) {
          this.$axios.post(`timesheet/time-off-requests/${request.id}/approve-request`)
            .then(response => {
              this.$refs.requestsTable.refresh();

              if (response.data.message) {
                this.$toast.success(response.data.message);
              }
            }).catch(err => {
            let message = err.message;
            if (err.response && err.response.data && err.response.data.message) {
              message = err.response.data.message;
            }
            this.$toast.error(message);
          })
        }
      })
    },
    editFormClosed() {
      this.form.id = null;
    }
  }
}
</script>

<style scoped>

</style>