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

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <div v-is-admin v-if="!this.form.id">
      <div class="custom-control custom-checkbox mb-2">
        <input type="checkbox" id="active_options" class="custom-control-input"
               v-model="active_options"/>
        <label for="active_options" class="custom-control-label">
          <small>Show Active Options</small>
        </label>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <corals-select :form="form" required label="Project" field="project_id"
                       :options="getProjectOptions"
                       @input="loadProjectRelatedFormData(form.project_id)"/>
      </div>
      <div class="col-md-6">
        <corals-select :form="form" required label="Activity" field="activity_id"
                       :options="getActivitiesOptions"/>
      </div>
    </div>
    <div class="row" v-if="isMultipleEntries">
      <div v-if="!this.form.all_member_users" class="col-md-6">
        <corals-select :form="form" field="user_id" label="Users"
                       :multiple="true"
                       :options="getUsersOptions"
                       required/>
      </div>
      <div class="col-md-6">
        <corals-checkbox field="all_member_users" label="All active full time members" :form="form" with-space/>
      </div>
    </div>
    <div class="row" v-else>
      <div class="col-md-6">
        <corals-select v-if="fullCrud" :form="form" label="User" field="user_id"
                       :options="getUsersOptions"
                       required/>
      </div>
      <div class="col-md-6">
        <corals-datepicker v-if="fullCrud" :form="form" required field="spent_at" label="Spent at"/>
      </div>
    </div>

    <div class="row sm-gutters" v-if="isMultipleEntries">
      <div class="col-md-6">
        <corals-datepicker :form="form" :max="form.spent_to" required field="spent_from" label="Spent From"/>
      </div>
      <div class="col-md-6">
        <corals-datepicker :form="form" :min="form.spent_from" required field="spent_to" label="Spent to"/>
      </div>
    </div>
    <div class="row d-block d-md-none">
      <div class="col-12">
        <corals-textarea field="description" rows="2" required :form="form"/>
        <div class="row sm-gutters">
          <div class="col-6">
            <div class="form-group">
              <vue-timepicker v-model="timePicker"
                              class="d-block"
                              input-class="form-control"
                              hour-label="Hours"
                              minute-label="Minutes" format="HH:mm"
                              :minute-interval="5" advanced-keyboard
                              manual-input
                              drop-direction="auto"
                              close-on-complete
                              placeholder="HH:MM" @input="TimeValueInput"></vue-timepicker>
            </div>
          </div>
          <div class="col-6" v-if="fullCrud && evaluationEnabled">
            <div class="form-group">
              <vue-timepicker v-model="evaluationTimePicker"
                              class="d-block"
                              input-class="form-control"
                              hour-label="Hours"
                              minute-label="Minutes" format="HH:mm"
                              :minute-interval="5" advanced-keyboard
                              manual-input
                              drop-direction="auto"
                              close-on-complete
                              placeholder="HH:MM" @input="EvaluationTimeValueInput"></vue-timepicker>
              <small class="text-muted">Evaluation Time</small>
            </div>
          </div>
        </div>
        <div class="d-block invalid-feedback" v-if="getTimeError.length" v-html="getTimeError">
        </div>
      </div>
    </div>
    <div class="sm-gutters d-none d-md-flex">
      <div class="col-9">
        <corals-textarea field="description" rows="4" required :form="form"/>
        <div class="d-block invalid-feedback" v-if="getTimeError.length" v-html="getTimeError">
        </div>
      </div>
      <div class="col-3">
        <div class="form-group">
          <label class="d-block">&nbsp;</label>
          <vue-timepicker v-model="timePicker"
                          class="d-block"
                          input-class="form-control"
                          hour-label="Hours" minute-label="Minutes"
                          format="HH:mm"
                          :minute-interval="5" advanced-keyboard
                          manual-input
                          drop-direction="auto"
                          close-on-complete
                          placeholder="HH:MM" @input="TimeValueInput"></vue-timepicker>
        </div>
        <div class="form-group" v-if="fullCrud && evaluationEnabled">
          <vue-timepicker v-model="evaluationTimePicker"
                          class="d-block"
                          input-class="form-control"
                          hour-label="Hours"
                          minute-label="Minutes" format="HH:mm"
                          :minute-interval="5" advanced-keyboard
                          manual-input
                          drop-direction="auto"
                          close-on-complete
                          placeholder="HH:MM" @input="EvaluationTimeValueInput"></vue-timepicker>
          <small class="text-muted">Evaluation Time</small>
        </div>
        <div v-else>
          <div class="text-center">
            <fa :icon="['far','clock']" size="3x" class="text-success"/>
          </div>
        </div>
      </div>
    </div>
    <transition name="fade">
      <corals-select v-if="Object.keys(projectTagOptions).length"
                     :form="form" field="tags" label="Labels"
                     :multiple="true"
                     :options="projectTagOptions"/>
    </transition>
    <div class="row" v-if="fullCrud && !isMultipleEntries && evaluationEnabled">
      <div class="col-6">
        <corals-checkbox field="has_reviewed" :form="form"/>
      </div>
    </div>
    <div class="row" v-if="fullCrud && !form.id">
      <div class="col-6">
        <corals-checkbox field="multiple_entries" :form="form"/>
      </div>
    </div>
  </div>
</template>

<script>

import VueTimepicker from 'vue2-timepicker';
import 'vue2-timepicker/dist/VueTimepicker.css';
import CoralsTextarea from "~/components/CoralsForm/CoralsTextarea";
import {padStart} from 'lodash';

export default {
  name: "EntryFields",
  components: {CoralsTextarea, VueTimepicker},
  props: {
    form: {
      required: true,
    },
    fullCrud: {
      required: false,
      default: true
    }
  },
  mounted() {
    this.originalTags = {
      [this.form.project_id]: this.form.tags
    }

    this.loadProjectRelatedFormData(this.form.project_id);

    this.loadProjectTags();

    // if (this.form.hours || this.form.minutes) {
    this.timePicker = {
      HH: `${padStart(this.form.hours || 0, 2, 0)}`,
      mm: `${padStart(this.form.minutes || 0, 2, 0)}`
    }
    // }

    if (this.form.evaluation_hours || this.form.evaluation_minutes) {
      this.evaluationTimePicker = {
        HH: `${padStart(this.form.evaluation_hours || 0, 2, 0)}`,
        mm: `${padStart(this.form.evaluation_minutes || 0, 2, 0)}`
      }
    }
  },
  data() {
    return {
      active_options: 1,
      activities: [],
      users: [],
      projectTagOptions: [],
      originalTags: [],
      timePicker: {},
      evaluationTimePicker: {},
      timeValidation: ''
    }
  },
  methods: {
    loadProjectRelatedFormData(project_id) {
      if (!project_id) {
        this.activities = []
        this.users = []
        this.timePicker = {}
        return;
      }
      this.form.isReady = false;

      let url = `timesheet/entries/get-form-data?project_id=${project_id}`;

      this.$axios.get(url).then(({data: response}) => {
        this.activities = response.data.activities
        this.users = response.data.users
      }).finally(() => {
        this.form.isReady = true;
      });
    },
    getActivitiesOrProjectsOptions(arrayData) {
      let resultsData = [];
      let DataGroups = [];
      let activeObjects = [];

      if (!this.active_options) {
        activeObjects = arrayData.filter((object => object['group'] !== true));
        DataGroups = arrayData.filter((group => group['group'] === true));
      } else {
        activeObjects = arrayData.filter((object => (object['is_active'] === 1 || object['status'] === 'active') && object['group'] !== true));
        DataGroups = arrayData.filter((group => group['group'] === true && group['status'] === 'active'));
      }
      DataGroups.forEach(group => {
        group['is_group_empty'] = true;
        resultsData.push(group);
        activeObjects.filter(activeObject => {
          if (group['code'] === activeObject['group']) {
            group['is_group_empty'] = false;
            resultsData.push(activeObject);
          }
        });
      });
      return resultsData;
    },
    loadProjectTags() {
      this.projectTagOptions = [];
      this.form.tags = [];

      if (!this.form.project_id) {
        return [];
      }

      let url = `timesheet/projects/entries/${this.form.project_id}/get-project-labels`;

      this.$axios.get(url).then(({data: response}) => {

        if (this.originalTags.hasOwnProperty(this.form.project_id)) {
          this.form.tags = this.originalTags[this.form.project_id];
        }

        this.projectTagOptions = response.data;
      });
    },
    TimeValueInput(data) {
      this.form.minutes = data.mm;
      this.form.hours = data.HH;
    },
    EvaluationTimeValueInput(data) {
      this.form.evaluation_minutes = data.mm;
      this.form.evaluation_hours = data.HH;
    },
  },
  watch: {
    'form.project_id'() {
      this.loadProjectTags();
    },
    'form.isReady'(value) {
      if (value) {
        let timeValidation = '';
        for (const key of ['hours', 'minutes', 'evaluation_hours', 'evaluation_minutes']) {
          if (this.form.errors.has(key)) {
            timeValidation += this.form.errors.get(key) + '<br/>';
          }
        }
        this.timeValidation = timeValidation;
      } else {
        this.timeValidation = '';
      }
    }
  },
  computed: {
    getTimeError() {
      return this.timeValidation
    },
    getProjectOptions() {
      return this.getActivitiesOrProjectsOptions(this.form.getFormData('projects'));
    },
    getActivitiesOptions() {
      return this.getActivitiesOrProjectsOptions(this.activities);
    },
    getUsersOptions() {
      if (!this.active_options) {
        return this.users
      }
      return this.users.filter(user => (user['status'] === 'active'));
    },
    evaluationEnabled() {
      return this.$store.getters.settings('evaluation_enabled');
    },
    isMultipleEntries() {
      return this.form.multiple_entries && this.fullCrud;
    },
  },
}
</script>

<style scoped>
>>> .vue__time-picker input.display-time {
  width: 100%;
  border: 1px solid #ced4da;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
}
</style>