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

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <b-tab>
      <template #title>
        <h5>Time & Materials</h5>
        <small>Bill by the hour, with billable rates</small>
      </template>
      <template v-if="form.type === 'time_and_materials'">
        <div class="row">
          <div class="col-md-12 pb-2">
            <label id="bill_by" class="mb-0 required-field">Billable rates</label>
            <small class="text-muted d-block">We need billable rates to track your project's billable amount</small>
          </div>
        </div>
        <div class="row sm-gutters">
          <div class="col-md-6">
            <corals-select :label="false" aria-labelledby="bill_by" :form="form"
                           field="bill_by"
                           :options="billByOptions"/>
          </div>
          <div class="col-md-6">
            <corals-input v-if="form.bill_by === 'project_billable_rate'" :label="false" :form="form" type="number"
                          field="hourly_rate" placeholder="Billable Rate" step="0.01"/>

            <div class="text-info" v-else>
              <small v-if="form.bill_by === 'person_billable_rate'">
                You can set your rates in <b>Users</b> Tab
              </small>
              <small v-if="form.bill_by === 'activity_billable_rate'">
                You can set your rates in <b>Activities</b> Tab
              </small>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12 pb-2">
            <label class="mb-0" id="budget_time_and_materials">Budget</label>
            <small class="text-muted d-block">Set a budget to track project progress</small>
          </div>
        </div>
        <div class="row sm-gutters">
          <div class="col-md-6">
            <corals-select :label="false" aria-labelledby="budget_time_and_materials" :form="form"
                           field="budget_by"
                           :options="budgetOptions"/>
          </div>
          <div class="col-md-6" v-if="form.budget_by !== 'no_budget'">
            <corals-input :label="false"
                          aria-labelledby="budget_non_billable" :form="form" type="number"
                          field="budget" placeholder="Budget"
                          step="0.01"/>
          </div>
        </div>
        <div v-if="form.budget_by !== 'no_budget'">
          <corals-checkbox field="reset_budget_each_month"
                           label="Budget resets every month" :form="form"/>

          <corals-checkbox field="send_email_on_exceed_limit"
                           label="Send email alerts if project exceeds percentage of budget"
                           :form="form"/>
        </div>
        <div class="row" v-if="form.send_email_on_exceed_limit && form.budget_by !== 'no_budget'">
          <div class="col-md-6">
            <corals-input :form="form" type="number" label="Percentage Of Budget" field="budget_alert_limit"
                          step="0.01" required/>
          </div>
        </div>
      </template>
    </b-tab>
    <b-tab>
      <template #title>
        <h5>Fixed Fee</h5>
        <small>Bill a set price, regardless of time tracked</small>
      </template>
      <template v-if="form.type === 'fixed_fee'">
        <div class="row">
          <div class="col-md-12 pb-2">
            <label id="bill_by" class="mb-0 required-field">Billable rates</label>
            <small class="text-muted d-block">We need billable rates to track your project's billable amount</small>
          </div>
        </div>
        <div class="row sm-gutters">
          <div class="col-md-6">
            <corals-select :label="false" aria-labelledby="bill_by" :form="form"
                           field="bill_by"
                           :options="billByOptions"/>
          </div>
          <div class="col-md-6">
            <corals-input v-if="form.bill_by === 'project_billable_rate'" :label="false" :form="form" type="number"
                          field="hourly_rate" placeholder="Billable Rate" step="0.01"/>

            <div class="text-info" v-else>
              <small v-if="form.bill_by === 'person_billable_rate'">
                You can set your rates in <b>Users</b> Tab
              </small>
              <small v-if="form.bill_by === 'activity_billable_rate'">
                You can set your rates in <b>Activities</b> Tab
              </small>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <corals-input :form="form" placeholder="Fee" type="number" field="fee" step="0.01" required/>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12 pb-2">
            <label id="budget_fixed_fee" class="mb-0">Budget</label>
            <small class="text-muted d-block">Set a budget to track project progress</small>
          </div>
        </div>
        <div class="row sm-gutters">
          <div class="col-md-6">
            <corals-select :label="false" aria-labelledby="budget_fixed_fee" :form="form" field="budget_by"
                           :options="budgetOptions"/>
          </div>
          <div class="col-md-6" v-if="form.budget_by !== 'no_budget'">
            <corals-input :label="false"
                          aria-labelledby="budget_non_billable" :form="form" type="number"
                          field="budget" placeholder="Budget"
                          step="0.01"/>
          </div>
        </div>
        <div v-if="form.budget_by !== 'no_budget'">
          <corals-checkbox field="reset_budget_each_month"
                           label="Budget resets every month" :form="form"/>

          <corals-checkbox field="send_email_on_exceed_limit"
                           label="Send email alerts if project exceeds percentage of budget"
                           :form="form"/>
        </div>
        <div class="row" v-if="form.send_email_on_exceed_limit && form.budget_by !== 'no_budget'">
          <div class="col-md-6">
            <corals-input :form="form" type="number" label="Percentage Of Budget" field="budget_alert_limit"
                          step="0.01" required/>
          </div>
        </div>
      </template>
    </b-tab>
    <b-tab>
      <template #title>
        <h5>Non-Billable</h5>
        <small>Not billed to a client</small>
      </template>
      <template v-if="form.type === 'non_billable'">
        <div class="row">
          <div class="col-md-12 pb-2">
            <label id="budget_non_billable" class="mb-0">Budget</label><br>
            <small class="text-muted">Set a budget to track project progress</small>
          </div>
        </div>
        <div class="row sm-gutters">
          <div class="col-md-6">
            <corals-select :label="false" aria-labelledby="budget_non_billable" :form="form" field="budget_by"
                           :options="budgetOptions"/>
          </div>
          <div class="col-md-6" v-if="form.budget_by !== 'no_budget'">
            <corals-input :label="false"
                          aria-labelledby="budget_non_billable" :form="form" type="number"
                          field="budget" placeholder="Budget"
                          step="0.01"/>
          </div>
        </div>
        <div v-if="form.budget_by !== 'no_budget'">
          <corals-checkbox field="reset_budget_each_month"
                           label="Budget resets every month" :form="form"/>

          <corals-checkbox field="send_email_on_exceed_limit"
                           label="Send email alerts if project exceeds percentage of budget"
                           :form="form"/>
        </div>
        <div class="row" v-if="form.send_email_on_exceed_limit && form.budget_by !== 'no_budget'">
          <div class="col-md-6">
            <corals-input :form="form" type="number" label="Percentage Of Budget" field="budget_alert_limit"
                          step="0.01" required/>
          </div>
        </div>
      </template>
    </b-tab>
  </div>
</template>

<script>
export default {
  name: "ProjectTypes",
  components: {},
  props: {
    form: {
      required: true
    },
  },
  data() {
    return {
      budgetOptions: {
        project_hours: 'Project Hours',
        project_fees: 'Project fees',
        no_budget: 'No budget'
      },
      billByOptions: {
        project_billable_rate: 'Project billable rate',
        person_billable_rate: 'Person billable rate',
        activity_billable_rate: 'Activity billable rate'
      },
    }
  }
}
</script>
<style scoped>
</style>