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>
    <PageHeader title="Dashboard">
    </PageHeader>
    <div v-if="$isAdmin()">
      <CoralsReportsDateForm @filter="loadData" :form="form"></CoralsReportsDateForm>
    </div>

    <template v-if="$isAdmin()">
      <div v-if="!dataLoading" class="row">
        <div class="col-md-12">
          <DataLatest :dashboard="'entries'" :widget="'entriesLatest'" :from_date="getFromDate" :to_date="getToDate"/>
        </div>
      </div>
      <hr/>
      <div class="row">
        <div class="col-md-4">
          <EntriesHoursLineChart v-if="!dataLoading" model="entries" :from_date="getFromDate" :to_date="getToDate"/>
        </div>
        <div class="col-md-4" v-if="!dataLoading">
          <ProjectsHours :dashboard="ProjectsHours.dashboard" :widget="ProjectsHours.widget"
                         :from_date="getFromDate" :to_date="getToDate"/>
        </div>
      </div>
      <hr/>
      <div v-if="!dataLoading" class="row" v-for="(latestItem,latestItemIndex) in DataLatest"
           :key="'latest_'+latestItemIndex">
        <div class="col-md-12">
          <DataLatest :dashboard="latestItem.dashboard" :widget="latestItem.widget" :from_date="getFromDate"
                      :to_date="getToDate"/>
        </div>
      </div>
      <hr/>
      <div class="row">
        <div v-if="!dataLoading" class="col-md-4" v-for="(statusOption,statusIndex) in ExpensesAndIncomesByStatus"
             :key="'status_'+statusIndex">
          <ExpensesAndIncomesStatus :dashboard="statusOption.dashboard" :widget="statusOption.widget"
                                    :amountLabel="statusOption.amountLabel" :from_date="getFromDate"
                                    :to_date="getToDate"/>
        </div>
      </div>
      <hr/>
      <div class="row">
        <div v-if="!dataLoading" class="col-md-4" v-for="(categoryOption,categoryIndex) in ExpensesAndIncomesByCategory"
             :key="'category_'+categoryIndex">
          <ExpensesAndIncomesCategory :dashboard="categoryOption.dashboard" :widget="categoryOption.widget"
                                      :from_date="getFromDate" :to_date="getToDate"/>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import PageHeader from "@/components/layout/PageHeader";
import EntriesHoursLineChart from "@/components/ChartJS/EntriesHoursLineChart";
import ExpensesAndIncomesStatus from "@/components/Dashboard/ExpensesAndIncomesStatus";
import ExpensesAndIncomesCategory from "@/components/Dashboard/ExpensesAndIncomesCategory";
import DataLatest from "@/components/Dashboard/DataLatest";
import ProjectsHours from "@/components/Dashboard/ProjectsHours";
import MaskedInput from 'vue-masked-input';
import moment from "moment";
import CoralsReportsDateForm from "@/components/CoralsForm/CoralsReportsDateForm";

export default {
  name: 'Dashboard',
  components: {
    PageHeader,
    EntriesHoursLineChart,
    ExpensesAndIncomesStatus,
    ExpensesAndIncomesCategory,
    DataLatest,
    ProjectsHours,
    MaskedInput,
    CoralsReportsDateForm
  },
  data() {
    let date = new Date();

    return {
      ExpensesAndIncomesByStatus: [
        {'dashboard': 'accounting', 'widget': 'incomesStatuses', 'amountLabel': 'receivables'},
        {'dashboard': 'accounting', 'widget': 'expensesStatuses', 'amountLabel': 'payables'},
        {'dashboard': 'accounting', 'widget': 'expensesVSincomesStatuses', 'amountLabel': 'upcoming'},
      ],
      ExpensesAndIncomesByCategory: [
        {'dashboard': 'accounting', 'widget': 'incomesCategory'},
        {'dashboard': 'accounting', 'widget': 'expensesCategory'},
      ],
      DataLatest: [
        // {'dashboard': 'entries', 'widget': 'entriesLatest'},
        {'dashboard': 'accounting', 'widget': 'incomesLatest'},
        {'dashboard': 'accounting', 'widget': 'expensesLatest'},
      ],
      ProjectsHours: {'dashboard': 'entries', 'widget': 'getTimePerProject'},
      showButtonSpinner: false,
      dataLoading: true,
      form: this.$form({
        period: 'currentMonth',
        from_date: '',
        to_date: '',
      }),
    }
  },
  methods: {
    loadData() {
      this.showButtonSpinner = true

      this.dataLoading = true;
      this.$nextTick(() => {
        this.dataLoading = false;
      });
      this.showButtonSpinner = false;
    },
  },
  computed: {
    getFromDate() {
      return moment(this.form.from_date).format("YYYY-MM-DD");
    },
    getToDate() {
      return moment(this.form.to_date).format("YYYY-MM-DD");
    }
  },
  mounted() {
  }
}
</script>