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/reports/_report/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <b-card>
      <b-card-body>
        <div class="row mb-4">
          <div class="col-md-8">
            <b-nav pills>
              <b-nav-item v-for="statusFilter in statusFilters" :active="statusFilter.id === status"
                          :key="'status_'+statusFilter.id"
                          @click.prevent="handleStatusFilter(statusFilter.id)">
                {{ statusFilter.label }}
              </b-nav-item>
            </b-nav>
          </div>
          <div class="col-md-4">
            <div class="row">
              <div class="col-md-8">
                <masked-input class="form-control" v-model="selectedYear" mask="1111" placeholder="yyyy"/>
              </div>
              <div class="col-md-4">
                <button :disabled="showButtonSpinner" class="btn btn-success"
                        @click.prevent="loadData">
                  <b-spinner v-if="showButtonSpinner" small></b-spinner>
                  Generate
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div style="height:370px;">
              <ReportsLineChart :lineChartData="chartData"/>
            </div>

            <div class="mt-5 py-3">
              <b-table v-if="tableData.length" class="table-bordered" striped hover :items="tableData"></b-table>
              <b-skeleton-table v-else
                                :rows="6"
                                :columns="13"
                                :table-props="{ bordered: true, striped: true }">
              </b-skeleton-table>
            </div>
          </div>
        </div>
      </b-card-body>
    </b-card>
  </div>
</template>


<script>
import ReportsLineChart from "@/components/ChartJS/ReportsLineChart";
import MaskedInput from 'vue-masked-input';

export default {
  name: "ExpensesAndIncomesReport",
  middleware: 'Authorization',
  components: {
    ReportsLineChart,
    MaskedInput
  },
  data() {
    return {
      statusFilters: [
        {id: 'all', label: 'ALL'},
        {id: 'paid', label: 'Paid'},
        {id: 'pending', label: 'Pending'}
      ],
      status: 'all',
      showButtonSpinner: false,
      tableData: [],
      chartData: [],
      selectedYear: `${(new Date).getFullYear()}`,
    }
  },
  methods: {
    loadData() {
      this.showButtonSpinner = true
      this.chartData = [];
      let url = `timesheet/reports/${this.$route.params.report}/get-report-data`;

      if (this.dataParameters) {
        let formattedPrams = (new URLSearchParams(this.dataParameters).toString());
        url += `?${formattedPrams}`;
      }
      this.$axios.get(url).then(({data: response}) => {
        this.tableData = response.data.table_data;
        this.chartData = response.data.chart_data;
        this.showButtonSpinner = false;
      });
    },
    handleStatusFilter(status) {
      this.status = status;
      this.loadData();
    },
  },
  computed: {
    dataParameters() {
      let year = this.selectedYear
      return {
        year: year,
        status: this.status,
      }
    },
  },
  mounted() {
    this.loadData();
  },
  watch: {}
}
</script>

<style scoped>

</style>