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

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <div v-if="dataReady">
      <div class="icon-bar pb-4 pt-3 text-light" v-bind:class="'bg-'+widgetsByStatus.level">
        <fa :icon="widgetsByStatus.icon" size="3x"/>
      </div>
      <div class="card" style="border-radius: 0;">
        <div class="pt-2 pl-1">
          <h6>{{ widgetsByStatus.label }}</h6>
          <strong>{{ paid }}</strong>
        </div>
        <hr style="text-align:left; height: 2px;" class="mt-0 mb-0" v-bind:class="'bg-'+widgetsByStatus.level"/>
        <div class="ml-1">
          <p style="text-transform: capitalize;" class="mb-0">{{amountLabel}} <span class="float-right mr-2">
            {{ pending }}
          </span></p>
        </div>
      </div>
    </div>

    <b-skeleton animation="fade" class="h-100" v-else></b-skeleton>
  </div>
</template>

<script>
export default {
  name: 'ExpensesAndIncomesStatus',
  props: {
    dashboard: {
      required: true
    },
    widget: {
      required: true
    },
    amountLabel:{
      required: true
    },
    from_date:{
      required: true
    },
    to_date:{
      required: true
    },
  },
  components: {},
  data() {
    return {
      dataReady: false,
      widgetsByStatus: [],
      paid: 0,
      pending: 0,
    }
  },
  async fetch() {
    let url = `timesheet/widgets/${this.dashboard}/${this.widget}?from_date=${this.from_date}&to_date=${this.to_date}`;

    await this.$axios.get(url).then(({data: response}) => {
      this.widgetsByStatus = response;
      this.paid = this.widgetsByStatus.data.paid;
      this.pending = this.widgetsByStatus.data.pending;
      this.dataReady = this.widgetsByStatus && Object.keys(this.widgetsByStatus).length;
    });

  },
  methods: {},
}
</script>
<style scoped>
.icon-bar {
  float: left;
  width: 25%;
  text-align: center;
  padding: 12px 0;
}
</style>