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/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <CRUDIndex ref="clientsTable" :columns="columns" :resourceURL="resourceUrl" :options="options" :form="form"
               :labels="labels">
      <template v-slot:name="{object}">
        <nuxt-link :to="'/clients/'+object.row.id">{{ object.row.name }}</nuxt-link>
      </template>

      <template v-slot:number_of_projects="{object}">
        <nuxt-link :to="'/clients/'+object.row.id+'?tab=projects'">{{ object.row.number_of_projects }}</nuxt-link>
      </template>

      <template v-slot:status="{object}">
        <span v-html="object.row.status_as_labels"></span>
      </template>

      <template v-slot:extra-actions="{object}">
        <nuxt-link class="text-warning" v-if="object.clientHasInvoicesToBeGenerated"
                   :to="'/clients/'+object.id+'?tab=billable-entries'">
          <fa icon="file-invoice"/>
        </nuxt-link>
      </template>


      <template v-slot:default="{form}">
        <corals-input :form="form" field="name" required/>

        <corals-select :form="form" field="user_id"
                       label="User"
                       :options="form.getFormData('users')"/>

        <corals-textarea :form="form" label="Billing Address" :field="'properties.billing_address'"
                      v-model="form.properties['billing_address']"/>

        <div class="row">
          <div class="col-md-6">
            <corals-select :form="form" field="bill_cycle" :options="billCycleOptions"/>
          </div>
          <div class="col-md-6">
            <corals-input type="number" :form="form"
                          label="Start of Cycle" description="Day of month"
                          v-if="form.bill_cycle === 'monthly' || form.bill_cycle === 'biweekly'"
                          field="bill_cycle_starts_at" min="1"/>

            <corals-select :form="form" field="bill_cycle_starts_at"
                           label="Start of Cycle"
                           v-else-if="form.bill_cycle && form.bill_cycle === 'weekly'"
                           :options="weekDaysOptions"/>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <corals-radio :form="form" field="status" label="Status" :list="form.getFormData('status_options')"
                          required/>
          </div>
        </div>
      </template>
    </CRUDIndex>
  </div>
</template>

<script>
import CRUDIndex from "@/components/layout/CRUDIndex";
import CoralsTextarea from "@/components/CoralsForm/CoralsTextarea.vue";

export default {
  name: "index",
  components: {CoralsTextarea, CRUDIndex},
  data() {
    return {
      resourceUrl: 'timesheet/clients',
      labels: {
        title: 'Clients',
        singularTitle: 'Client',
      },
      options: {
        listColumns: {
          user_id: [],
          status: [],
        },
        initFilters: {'status': 'active'},
        hideCreate: this.$cant('create', 'client'),
        sortable: ['name'],
        filterable: ['name', 'user_id', 'status'],
        customColumns: ['name', 'number_of_projects', 'status'],
        headings: {
          'user_id': 'User',
          'number_of_projects': '# Of Projects'
        }
      },
      form: this.$form({
        name: '',
        bill_cycle: '',
        bill_cycle_starts_at: '',
        user_id: '',
        status: 'active',
        properties: {
          billing_address: '',
        }
      }, {
        fetchFormDataURL: 'timesheet/clients/get-form-data',
        model: 'client',
        loadFormDataCallBack: () => {
          this.options.listColumns.user_id = this.getOptions(this.form.formData.users);

          this.options.listColumns.status = this.getOptions(this.form.formData.status_options);
        }
      }),
      billCycleOptions: {
        daily: 'Daily',
        weekly: 'Weekly',
        biweekly: 'Biweekly',
        monthly: 'Monthly'
      },
      weekDaysOptions: {
        0: 'Sunday',
        1: 'Monday',
        2: 'Tuesday',
        3: 'Wednesday',
        4: 'Thursday',
        5: 'Friday',
        6: 'Saturday'
      }
    }
  },
  methods: {
    getOptions(list) {
      let allOption = {id: '', text: 'All'};
      let options = [];

      options.push(allOption);

      list.map(row => {
        let label = row.label.split(",");
        options.push({id: row.id ?? row.value, text: label[0]});
      });

      return options;
    },
  },
  computed: {
    columns() {
      let columns = ['name', 'user_id', 'number_of_projects', 'bill_cycle', 'bill_cycle_starts_at', 'status', 'actions'];
      if (this.$notAdmin()) {
        columns.pop();
      }
      return columns;
    }
  }
}
</script>

<style scoped>

</style>