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

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <b-card class="h-100" title="Budget remaining">
    <template v-if="isReadyBudgetRemainingCard && total_budget">
      <b-card-text class="text-bold">{{ total_budget }}</b-card-text>
      <b-card-text class="text-bold">Total Budget : {{ total_budget }}</b-card-text>
      <b-progress>
        <b-progress-bar :value="`${((remaining_budget / total_budget) * 100).toFixed(2)}%`"
                        :label="`${((remaining_budget / total_budget) * 100).toFixed(2)}%`"></b-progress-bar>
      </b-progress>
    </template>
    <template v-else-if="isReadyBudgetRemainingCard">
      <b-card-text class="text-bold">Budget not set</b-card-text>
    </template>
    <template v-else>
      <b-skeleton width="100px"></b-skeleton>
      <b-skeleton width="150px"></b-skeleton>
      <b-skeleton animation="fade"></b-skeleton>
    </template>
  </b-card>
</template>

<script>

export default {
  name: "BudgetRemainingProjectCard",
  components: {},
  props: {
    form: {
      required: true
    },
  },
  data() {
    return {
      remaining_budget: '',
      worked_time: '',
      total_budget: '',
      isReadyBudgetRemainingCard: false,
    }
  },
  mounted() {
    this.BudgetRemaining();
  },
  methods: {
    BudgetRemaining() {
      let url = `/timesheet/clientProjects/get-budget-remaining`;
      this.form.post(url).then(({data}) => {
        this.remaining_budget = data.data.remaining_budget;
        this.total_budget = data.data.total_budget;
        this.worked_time = data.data.worked_time;
        this.isReadyBudgetRemainingCard = true
      });
    }
  },
}
</script>

<style scoped>

</style>