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/clients/_clientid/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div v-if="isReady(client)">
    <PageHeader :title="client.name"/>
    <b-breadcrumb :items="breadcrumbLinks"></b-breadcrumb>
    <div class="table-responsive" v-is-admin>
      <table class="table border-bottom">
        <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">User</th>
          <th scope="col">Number OF Projects</th>
          <th scope="col">Bill cycle</th>
          <th scope="col">Bill cycle starts at</th>
          <th scope="col">Status</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>{{ client.name }}</td>
          <td>{{ client.user.full_name }}</td>
          <td>{{ client.number_of_projects }}</td>
          <td>{{ client.bill_cycle }}</td>
          <td>{{ client.bill_cycle_starts_at }}</td>
          <td><span v-html="client.status_as_labels"></span></td>
        </tr>
        </tbody>
      </table>
    </div>
    <b-tabs content-class="mt-3" @activate-tab="setActiveIndex">
      <b-tab title="Dashboard" v-if="isTabVisible('dashboard-tab')">
        <CoralsReportsDateForm @filter="filter" :form="form"></CoralsReportsDateForm>
        <b-tabs class="mt-3" content-class="mt-3" v-model="currentSubTabsIndex">
          <b-tab title="Projects" active>
            <projects-report url="timesheet/clients/get-projects-report" :form="form" v-if="showClientReport"/>
          </b-tab>
          <b-tab title="Activities" lazy>
            <activities-report url="timesheet/clients/get-activities-report" :form="form" v-if="showClientReport"/>
          </b-tab>
          <b-tab title="Users" lazy>
            <users-report url="timesheet/clients/get-users-report" :form="form" v-if="showClientReport"/>
          </b-tab>
        </b-tabs>
        <hr>
        <div class="row">
          <div class="col-md-3">
            <EntriesHoursLineChart v-if="showClientReport" model="client" :params="chartDataParameters"/>
          </div>
        </div>
      </b-tab>
      <b-tab title="Projects" :active="tabs[currentTabIndex]==='projects-tab'" v-if="isTabVisible('projects-tab')">
        <clients-projects-index v-if="tabs[currentTabIndex]==='projects-tab'" :client="client"/>
      </b-tab>
      <b-tab title="Billable Entries" :active="tabs[currentTabIndex]==='billable-entries-tab'"
             v-if="isTabVisible('billable-entries-tab')">
        <clients-billable-entries-index v-if="tabs[currentTabIndex]==='billable-entries-tab'"
                                        :client="client"/>
      </b-tab>
      <b-tab title="Invoices" :active="tabs[currentTabIndex]==='invoices-tab'" v-if="isTabVisible('invoices-tab')">
        <clients-invoices-index v-if="tabs[currentTabIndex]==='invoices-tab'" :client="client"/>
      </b-tab>
    </b-tabs>
  </div>
</template>

<script>
import PageHeader from "@/components/layout/PageHeader";
import CRUDIndex from "@/components/layout/CRUDIndex";
import ClientsProjectsIndex from "@/components/Clients/Projects";
import ClientsInvoicesIndex from "@/components/Clients/Invoices";
import ClientsBillableEntriesIndex from "@/components/Clients/BillableEntries";
import EntriesHoursLineChart from "@/components/ChartJS/EntriesHoursLineChart";
import ProjectsReport from "@/components/Reports/ProjectsReport";
import ActivitiesReport from "@/components/Reports/ActivitiesReport";
import UsersReport from "@/components/Reports/UsersReport";
import CoralsReportsDateForm from "@/components/CoralsForm/CoralsReportsDateForm";

export default {
  name: "clientShow",
  async asyncData({params, $axios, redirect}) {

    let client = await $axios.get(`/timesheet/clients/${params.clientid}`)
      .then(({data}) => {
        return data.data;
      }).catch((error) => {
        return redirect('/');
      });

    return {
      client
    }
  },
  components: {
    EntriesHoursLineChart,
    ClientsInvoicesIndex,
    ClientsProjectsIndex,
    ClientsBillableEntriesIndex,
    PageHeader,
    CRUDIndex,
    ActivitiesReport,
    UsersReport,
    ProjectsReport,
    CoralsReportsDateForm
  },
  data() {
    return {
      form: this.$form({
        period: 'currentMonth',
        from_date: '',
        to_date: '',
        client_id: this.$route.params.clientid,
        client_name: '',
      }, {resetOnSuccess: false}),
      currentTabIndex: 0,
      currentSubTabsIndex: 0,
      showClientReport: false
    }
  },
  methods: {
    isReady(client) {
      if (client) {
        this.form.client_name = client.name;
        return true;
      }
      return false;
    },
    filter() {
      this.showClientReport = false;
      this.$nextTick(() => {
        this.showClientReport = true;
      });
    },
    isTabVisible(tab) {
      return this.tabs.findIndex((t) => t === tab) !== -1
    },
    setActiveIndex(activeIndex) {
      this.currentTabIndex = activeIndex;
    }
  },
  computed: {
    chartDataParameters() {
      let fromDate = this.form.from_date,
        toDate = this.form.to_date;

      if (fromDate !== null && typeof fromDate == 'object') {
        fromDate = this.form.from_date.toLocaleDateString();
      }

      if (toDate !== null && typeof toDate == 'object') {
        toDate = this.form.to_date.toLocaleDateString();
      }

      return {
        client_id: this.$route.params.clientid,
        from_date: fromDate,
        to_date: toDate,
        is_limited: this.form.is_limited ? 1 : 0
      }
    },
    tabs() {
      let tabs = ['dashboard-tab', 'projects-tab', 'billable-entries-tab', 'invoices-tab'];

      if (!this.$isAdmin()) {
        tabs = tabs.slice(2, 4);
      }

      let queryTab = this.$route.query.tab;

      if (queryTab) {
        this.currentTabIndex = tabs.findIndex((t) => t.replace('-tab', '') === queryTab);
      }

      return tabs;
    },
    breadcrumbLinks() {
      return [
        {
          text: 'Clients',
          to: '/clients'
        },
        {
          text: this.client.name,
          active: true
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>