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

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <div class="mr-2 mb-4">
      <div class="row">
        <div class="col-md-4">
          <masked-input class="form-control" v-model="year" mask="1111" placeholder="yyyy"/>
        </div>
        <div class="col-md-4">
          <div>
            <button :disabled="showGenerateButtonSpinner" class="btn btn-success"
                    @click.prevent="loadLimitedActivitiesData()">
              <b-spinner v-if="showGenerateButtonSpinner" small></b-spinner>
              Generate
            </button>
          </div>
        </div>
      </div>
    </div>
    <table class="table table-striped table-condensed" v-if="limitedActivityData">
      <th class="bg-dark text-light" v-for="header in headersForLimitedActivityTable">
        {{ header }}
      </th>
      <tr v-for="(activityRecord,activityIndex) in limitedActivityData" :key="'activity_'+activityIndex">
        <template v-for="(colValue, columnIndex) in activityRecord">
          <td>
            {{ colValue }}
          </td>
        </template>
      </tr>
    </table>
    <h6 class="col-md-3 mb-4" v-else>
      No Data Found
    </h6>
  </div>
</template>


<script>

import MaskedInput from 'vue-masked-input'


export default {
  name: "LimitedActivities",
  components: {MaskedInput},
  props: {
    user_id: {
      required: true
    }
  },
  data() {
    return {
      showGenerateButtonSpinner: false,
      limitedActivityData: null,
      year: `${(new Date).getFullYear()}`,
      headersForLimitedActivityTable: {},
    }
  },
  methods: {
    loadLimitedActivitiesData() {
      this.showGenerateButtonSpinner = true
      let url = `timesheet/activities/get-limited-activities-data`;

      if (this.limitedActivityDataParameters) {
        let formattedPrams = (new URLSearchParams(this.limitedActivityDataParameters).toString());
        url += `?${formattedPrams}`;
      }
      this.$axios.get(url).then(({data: response}) => {
        this.limitedActivityData = response.data.limited_activities;
        this.headersForLimitedActivityTable = response.data.limited_activities_headers;
        this.showGenerateButtonSpinner = false;
      });

    },
  },
  computed: {
    limitedActivityDataParameters() {
      let year = this.year
      return {
        user_id: this.user_id ? this.user_id : '',
        year: year,
      }
    },
  },
  mounted() {
    this.loadLimitedActivitiesData();
  },
  watch: {
    user_id(newValue, oldValue) {
      this.loadLimitedActivitiesData();
    }
  }
}
</script>

<style scoped>

</style>