Processes.vue

<template>
  <div class="p-4">
    <l-container class="mb-4">
      <l-container-title
        slot="toolbar"
        text="Processes"
        icon="network-wired"
        color="bg-pastel-purple"
      />
      <l-csv-import @on-import="onImportProcesses" />
    </l-container>
    <l-info-box
      class="mb-4"
      :active="processes.length > 0"
    >Right click a row to edit, delete or add a new record</l-info-box>
    <hot-table :data="processes" :settings="settings" ref="hot">
      <hot-column title="ID" data="id" read-only="true"></hot-column>
      <hot-column title="measurement_type" data="measurement_type_name" read-only="true"></hot-column>
      <hot-column title="measurement_method" data="measurement_method_name" read-only="true"></hot-column>
      <hot-column title="other_measurement_method" data="other_measurement_method" read-only="true"></hot-column>
      <!-- <hot-column title="sampling_method" data="sampling_method" read-only="true"></hot-column>
      <hot-column title="other_sampling_method" data="other_sampling_method" read-only="true"></hot-column> -->
      <hot-column title="analytical_tech" data="analytical_tech" read-only="true"></hot-column>
      <hot-column title="other_analytical_tech" data="other_analytical_tech" read-only="true"></hot-column>
      <hot-column title="sampling_equipment" data="sampling_equipment" read-only="true"></hot-column>
      <hot-column title="measurement_equipment" data="measurement_equipment_name" read-only="true"></hot-column>
      <hot-column title="equiv_demonstration" data="equiv_demonstration_name" read-only="true"></hot-column>
      <hot-column title="equiv_demonstration_report" data="equiv_demonstration_report" read-only="true"></hot-column>
      <hot-column title="detection_limit" data="detection_limit" read-only="true"></hot-column>
      <hot-column title="detection_limit_uom" data="detection_limit_uom_name" read-only="true"></hot-column>
      <hot-column title="uncertainty_estimate" data="uncertainty_estimate" read-only="true"></hot-column>
      <hot-column title="documentation" data="documentation" read-only="true"></hot-column>
      <hot-column title="qa_report" data="qa_report" read-only="true"></hot-column>
      <hot-column title="duration_number" data="duration_number" read-only="true"></hot-column>
      <hot-column title="duration_unit" data="duration_unit_name" read-only="true"></hot-column>
      <hot-column title="cadence_number" data="cadence_number" read-only="true"></hot-column>
      <hot-column title="cadence_unit" data="cadence_unit_name" read-only="true"></hot-column>
      <hot-column title="responsible_authority_id" data="responsible_authority" read-only="true"></hot-column>
      <hot-column title="other_measurement_equipment" data="other_measurement_equipment" read-only="true"></hot-column>
      <hot-column title="other_sampling_equipment" data="other_sampling_equipment" read-only="true"></hot-column>
    </hot-table>
    <l-l-edit
      :showing="edit"
      @save="onSaveProcesses"
      @close="edit = false"
      :processes="processes"
      :measurementtypes="measurementtypes"
      :measurementmethods="measurementmethods"
      :measurementequipments="measurementequipments"
      :equivalencedemonstrated="equivalencedemonstrated"
      :concentrations="concentrations"
      :times="times"
      :responsibleauthorities="responsibleauthorities"
      :selected="selected"
      :isnew="isnew"
    />
  </div>
</template>

<script>
import ContextMenu from "./context.menu";
import HandsontableHelper from "@/helpers/settings/handsontable";
import "handsontable/dist/handsontable.full.css";
import { HotTable, HotColumn } from "@handsontable/vue";
import Handsontable from "handsontable";
import ProcessesService from "./processes.service";

import LLEdit from "./LLEdit";

import LCsvImport from "@/components/LCsvImport";
import { LInput, LButton } from "@/components/forms";

import Notify from "@/helpers/notify";
import LInfoBox from "@/components/LInfoBox";

export default {
  name: "processes",
  components: {
    HotTable,
    HotColumn,
    LInput,
    LButton,
    LInfoBox,
    LLEdit,
    LCsvImport
  },
  data() {
    return {
      edit: false,
      loading: false,
      processes: [],
      measurementtypes: [],
      measurementmethods: [],
      measurementequipments: [],
      equivalencedemonstrated: [],
      concentrations: [],
      times: [],
      responsibleauthorities: [],
      settings: HandsontableHelper.settings(false),
      manualSelection: false,
      isnew: false,
      selected: {}
    };
  },
  mounted() {
    this.settings.afterSelectionEnd = this.selectRowOnly;
    this.settings.dropdownMenu = false;
    this.settings.contextMenu = ContextMenu(this);
    Notify.loadData(null, this.loadInitialData);
  },

  methods: {
    selectRowOnly(r, c, r2, c2) {
      if (this.manualSelection) {
        this.manualSelection = false;
        return;
      }
      const hot = this.$refs.hot.hotInstance;
      hot.deselectCell();
      this.manualSelection = true;
      hot.selectCells([[r, 0, r, hot.countCols() - 1]], false, false);
    },
    async loadInitialData() {
      this.processes = await ProcessesService.processes();
      this.measurementtypes = await ProcessesService.measurementtypes();
      this.measurementmethods = await ProcessesService.measurementmethods();
      this.measurementequipments = await ProcessesService.measurementequipments();
      this.equivalencedemonstrated = await ProcessesService.equivalencedemonstrated();
      this.concentrations = await ProcessesService.concentrations();
      this.times = await ProcessesService.times();
      this.responsibleauthorities = await ProcessesService.responsibleauthorities();
      // debugger;
    },
    async deleteProcesses(response) {
      if (response) {
        await Notify.loadData(
          "Please wait while data is deleting",
          async () => {
            const rowsAffected = await Processes.delete(row.id);
            const activeEditor = hot.getActiveEditor();
            hot.alter("remove_row", clickedRow, 1);
          }
        );
        Notify.success("Processes deleted!");
      }
    },
    async saveProcesses(ra) {
      const rowsAffected = await ProcessesService.update(ra);
      console.log("SAVED TO DB");
      // debugger;
      const current = this.processes.find(n => n.id == ra.id);
      for (var prop in current) {
        if (Object.prototype.hasOwnProperty.call(current, prop)) {
          if (current[prop] != "id" && ra[prop]) {
            current[prop] = ra[prop];
          }
        }
      }
    },
    async importProcesses(file) {
      let formData = new FormData();
      formData.append("csv", file);
      await ProcessesService.import(formData);
      this.processes = await ProcessesService.processes();
      Notify.success("Processes imported!");
    },
    async onImportProcesses(file) {
      await Notify.loadData("Importing processes", this.importProcesses, file);
    },
    onEditProcesses(t, o) {
      const clickedRow = o[0].start.row;
      const hot = this.$refs.hot.hotInstance;
      const physicalIndex = hot.toPhysicalRow(clickedRow);
      let row = hot.getSourceDataAtRow(physicalIndex);
      this.selected = row;
      this.isnew = false;
      this.edit = true;
    },
    onNewProcesses(t, o) {
      const hot = this.$refs.hot.hotInstance;
      let row = hot.getSourceDataAtRow(0);
      var newRow = Object.assign({}, row);
      Object.getOwnPropertyNames(newRow).forEach(function(prop) {
        newRow[prop] = null;
      });
      newRow.id = "Id";
      this.selected = newRow;
      this.isnew = true;
      this.edit = true;
    },
    onDeleteProcesses(t, o) {
      const clickedRow = o[0].start.row;
      const hot = this.$refs.hot.hotInstance;
      const physicalIndex = hot.toPhysicalRow(clickedRow);
      let row = hot.getSourceDataAtRow(physicalIndex);

      Notify.prompt(async response => {
        if (response) {
          await Notify.loadData(
            "Please wait while data is deleting",
            async () => {
              const rowsAffected = await ProcessesService.delete(row.id);
              const activeEditor = hot.getActiveEditor();
              hot.alter("remove_row", clickedRow, 1);
            }
          );
          Notify.success("Processes deleted!");
        }
      }, "This will delete all data connected to this Process. <br/><br/>Do you want to continue?");
    },

    async onSaveProcesses(processes) {
      // debugger;
      await Notify.loadData(
        "Saving changes to Processes " + processes.id,
        this.saveProcesses,
        processes
      );
      this.selected = {};
    }
  }
};
</script>