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

import Edit from "./edit";
import Store from "./store";
// Get Bootstrap popover
const { Popover } = bootstrap;
const history = {
  template: `
<i class="bi" :class="{'bi-chevron-compact-down': !bsPopover, 'bi-x-circle': bsPopover }" @click="showPopupHistory($event)" type="button" role="button"
data-bs-toggle="popover" data-bs-trigger="focus" ref="btnToggle">
    </i>
<div class="popup-history" v-if="showHistory" ref="history">
<a class="btn-close position-absolute" role="button" aria-label="Close" @click="close" ref="btnClose"></a>
<table class="table" v-for="(data, indexData) in historyData">
<thead>
  <tr>
      <th><div class="rounded-circle text-bg-primary py-1 text-align-center" style="width: 2em; height: 2em">{{ data.initial }}</div></th>
      <th><b>{{ data.name }}</b></th>
      <th><b>{{ data.total_time }}</b></th>
  </tr>
</thead>
<tbody>
    <tr v-for="(task, indexTask) in data.details" :key="task.id">
        <td>{{ task.time }}</td>
        <td>{{ task.date }}</td>
        <td>
          <Edit :task="task" @saveEditTask="saveTask"/>
          <button type="button" @click="remove(task, indexData, indexTask)" class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></button>
         </td>
    </tr>
</tbody>
</table>
</div>
`,
  props: ['entity_id', 'entity_field'],
  data() {
    return {
      historyData: [],
      showHistory: false,
      bsPopover: null,
      showPopupEdit: false,
    }
  },
  methods: {
    close(){
      this.$refs.btnToggle.click();
    },
    showPopupHistory(event) {
      if(!this.historyData.length){
        let url = '/api/work-time/' + this.entity_id + '/' + this.entity_field + '?_format=json';
        axios.get(url,{
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': Store.csrfToken
          }
        }).then((response) => {
          if(response.data.length){
            response.data.forEach(details => {
              if(details.details.length){
                let total = 0;
                details.details.forEach(detail => {
                  total += parseInt(detail.time_total);
                  detail.time = Store.updateDisplay(detail.time_total);
                  let date = new Date(detail.date);
                  detail.date = date.toLocaleDateString();
                });
                details.total_time = Store.updateDisplay(total);
              }
            });
            this.historyData = response.data;
          }
        }).catch(error => {
          console.error("There was an error!", error);
        });
      }
      this.showHistory = true;
      if (!this.bsPopover) {
        this.bsPopover = new Popover(event.target, {
          trigger: 'click',
          html: true,
          content: () => {
            return this.$refs.history;
          }
        });
        this.bsPopover.toggle();
      } else {
        this.bsPopover = null;
      }
    },
    editTask(event, task, indexData, indexDetail) {
      this.showPopupEdit = true;
    },
    saveTask(task) {
      console.log(task);
      // Send to server

      // Update parent
    },
    remove(task, indexData, indexDetail) {
      let url = '/api/work-time/' + task.id + '/' + this.entity_field + '?_format=json';
      axios.delete(url, {
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': Store.csrfToken
        }
      }).then( () => {
        if(this.historyData){
          this.historyData[indexData].details.splice(indexDetail, 1);
        }
      }).catch(error => {
        console.error('There was an error!', error);
      });
    },
  },
  components:{
    Edit
  }
};

export default history;