work_time-1.0.x-dev/js/components/edit.js

import Store from "./store";
const { Modal } = bootstrap;
const edit = {
  template: `
<button type="button" @click="modal.show()" class="btn btn-link"><i class="bi bi-pencil-square"></i></button>
<div class="modal fade" ref="editTask" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="form-group">
          <label for="date">${Drupal.t('Title')}</label>
          <input type="text" class="form-control form-control-sm" id="edit-title" v-model="label">
        </div>
        <div class="form-group">
          <label for="date">${Drupal.t('Date')}</label>
          <input type="date" class="form-control form-control-sm" id="date" v-model="date">
        </div>
        <div class="form-group">
          <label for="start">${Drupal.t('Time Start')}</label>
          <input type="time" class="form-control form-control-sm" id="start" @input="calTotal" v-model="startTime">
        </div>
        <div class="form-group">
          <label for="end">${Drupal.t('Time end')}</label>
           <input type="time" class="form-control form-control-sm" id="end" @input="calTotal"  v-model="endTime">
        </div>
        <div class="form-group">
          <label for="end">${Drupal.t('Total minutes')}</label>
          <div class="input-group">
             <input type="number" class="form-control form-control-sm" id="edit-total" @input="calEnd"  v-model="total">
             <span class="input-group-text">m</span>
          </div>
        </div>
        <div class="form-group">
          <label for="end">${Drupal.t('Project')}</label>
           <input type="text" class="form-control form-control-sm" id="edit-project" v-model="project" list="work-time-project">
        </div>
      </div>
      <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi bi-x-circle"></i> ${Drupal.t('Cancel')}</button>
          <button type="button" class="btn btn-success" @click="saveTask"><i class="bi bi-save"></i> ${Drupal.t('Save')}</button>
      </div>
    </div>
  </div>
</div>`,

  emits: ["saveEditTask"],

  props: {
    task: {
      type: Object,
      default: () => ({})
    },
  },

  data() {
    return {
      label: '',
      date: '',
      startTime: '',
      endTime: '',
      total: '',
      modal: null,
      saveEditTask: {},
      searchProject: '',
      project: '',
    }
  },

  methods: {
    saveTask() {
      this.saveEditTask = this.task;
      this.saveEditTask.label = this.label;
      this.saveEditTask.date = this.date;
      this.saveEditTask.time_total = this.total * 1000;
      let start = new Date(this.date + 'T' + this.startTime + ':00Z');
      let end = new Date(this.date + 'T' + this.endTime + ':00Z');
      this.saveEditTask.created = start.getTime();
      this.saveEditTask.stopped = end.getTime();
      this.saveEditTask.project = this.project;
      const match = this.project.match(/\((.*?)\)/);
      if(match && match[1] != undefined){
        this.saveEditTask.reference_id = match[1];
      }
      if(this.saveEditTask.entity_field == null){
        this.saveEditTask.entity_field = drupalSettings.work_time_block.entity_field;
      }
      if(this.saveEditTask.entity_type == null){
        this.saveEditTask.entity_type = drupalSettings.work_time_block.entity_type;
      }
      if(this.saveEditTask.reference_field == null){
        this.saveEditTask.reference_field = drupalSettings.work_time_block.reference_field;
      }
      this.modal.hide();
      // Send data to parent.
      this.$emit('saveEditTask', this.saveEditTask);
    },
    calTotal(){
      let startTime = new Date('1970-01-01T' + this.startTime + ':00Z');
      let endTime = new Date('1970-01-01T' + this.endTime + ':00Z');
      if(endTime < startTime){
        let temp = this.startTime;
        this.startTime = this.endTime;
        this.endTime = temp;
      }
      let diff = Math.abs(endTime - startTime);
      this.total = diff / 1000 ;
    },
    calEnd(){
      let startTime = new Date('1970-01-01T' + this.startTime + ':00Z');
      startTime.setMinutes(startTime.getMinutes() + parseInt(this.total));
      this.endTime = startTime.toLocaleTimeString().slice(0, 5);
    },
  },

  mounted() {
    this.project = this.task.project ? this.task.project + '(' + this.task.reference_id + ')' : null;
    this.label = this.task.label;
    let dateFormatStart = new Date(parseInt(this.task.created)* 1000).toISOString();
    this.date = dateFormatStart.slice(0,10);
    this.startTime = dateFormatStart.slice(11,16);
    let stop = Number(this.task.stopped);
    if(this.task.stopped && !isNaN(stop)){
      let dateFormatEnd = new Date(parseInt(this.task.stopped)* 1000).toISOString();
      this.endTime = dateFormatEnd.slice(11,16);
    }
    this.total = Math.ceil(parseInt(this.task.time_total)/60);
    this.modal = new Modal(this.$refs.editTask);
  },

  // @todo Load projects list from views REST export.
  /**
   * if the project list is too long then autosuggest should be used.
  watch: {
    project: _.debounce(function(search_title) {
      if (search_title.length >= 3) {
        // Get projects list. Call url form views rest api. append to datalist id="work-time-project"
      }
    }, 500),
  },
  */
};
export default edit;