Stations.vue

<template>
  <div class="p-4">
    <l-container class="mb-4">
      <l-container-title
        slot="toolbar"
        text="Stations"
        icon="network-wired"
        color="bg-pastel-purple"
      />
      <l-csv-import @on-import="onImportStations" />
    </l-container>

    <l-info-box
      class="mb-4"
      :active="stations.length > 0"
    >Right click a row to edit, delete or add a new record</l-info-box>
    <hot-table :data="stations" :settings="settings" ref="hot">
      <hot-column title="ID" data="id" read-only="true"></hot-column>
      <hot-column title="Name" data="name" read-only="true"></hot-column>
      <hot-column title="Begin Position" data="begin_position" read-only="true"></hot-column>
      <hot-column title="End Position" data="end_position" read-only="true"></hot-column>
      <hot-column title="Network" data="network" read-only="true"></hot-column>
      <hot-column title="City" data="city" read-only="true"></hot-column>
      <hot-column title="National Station Code" data="national_station_code" read-only="true"></hot-column>
      <hot-column title="Media Monitored" data="media_monitored_name" read-only="true"></hot-column>
      <hot-column title="Mobile" data="mobile" read-only="true"></hot-column>
      <hot-column title="Measurement Regime" data="measurement_regime_name" read-only="true"></hot-column>
      <hot-column title="Area Classification" data="area_classification_name" read-only="true"></hot-column>
      <hot-column title="Distance Junction" data="distance_junction" read-only="true"></hot-column>
      <hot-column title="Traffic Volume" data="traffic_volume" read-only="true"></hot-column>
      <hot-column title="Heavy Duty Fraction" data="heavy_duty_fraction" read-only="true"></hot-column>
      <hot-column title="Street Width" data="street_width" read-only="true"></hot-column>
      <hot-column title="Height Facades" data="height_facades" read-only="true"></hot-column>
      <!-- <hot-column title="Geom" data="geom" read-only="true"></hot-column> -->
      <hot-column title="Municipality" data="municipality" read-only="true"></hot-column>
      <hot-column title="Eoi Code" data="eoi_code" read-only="true"></hot-column>
    </hot-table>
    <l-l-edit
      :showing="edit"
      @save="onSaveStations"
      @close="edit = false"
      :stations="stations"
      :mediavalues="mediavalues"
      :measurementregimes="measurementregimes"
      :areaclassifications="areaclassifications"
      :networks="networks"
      :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 StationsService from "./stations.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: "stations",
  components: {
    HotTable,
    HotColumn,
    LInput,
    LButton,
    LInfoBox,
    LLEdit,
    LCsvImport
  },
  data() {
    return {
      edit: false,
      loading: false,
      stations: [],
      mediavalues: [],
      measurementregimes: [],
      areaclassifications: [],
      networks: [],
      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.stations = await StationsService.stations();
      this.mediavalues = await StationsService.mediavalues();
      this.measurementregimes = await StationsService.measurementregimes();
      this.areaclassifications = await StationsService.areaclassifications();
      this.networks = await StationsService.networks();
      // debugger;
    },
    async deleteStations(response) {
      if (response) {
        await Notify.loadData(
          "Please wait while data is deleting",
          async () => {
            const rowsAffected = await Stations.delete(row.id);
            const activeEditor = hot.getActiveEditor();
            hot.alter("remove_row", clickedRow, 1);
          }
        );
        Notify.success("Responsible Authorities deleted!");
      }
    },
    async saveStations(ra) {
      // debugger;
      const rowsAffected = await StationsService.update(ra);
      console.log("SAVED TO DB");
      // debugger;
      const current = this.stations.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 importStations(file) {
      let formData = new FormData();
      formData.append("csv", file);
      await StationsService.import(formData);
      this.stations = await StationsService.stations();
      Notify.success("Stations imported!");
    },
    async onImportStations(file) {
      await Notify.loadData("Importing stations", this.importStations, file);
    },
    onEditStations(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;
    },
    onNewStations(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";
      newRow.begin_position = new Date().toISOString().slice(0, 19);
      this.selected = newRow;
      this.isnew = true;
      this.edit = true;
    },
    onDeleteStations(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 StationsService.delete(row.id);
              const activeEditor = hot.getActiveEditor();
              hot.alter("remove_row", clickedRow, 1);
            }
          );
          Notify.success("Station deleted!");
        }
      }, "This will delete all data connected to this Station. <br/><br/>Do you want to continue?");
    },

    async onSaveStations(station) {
      // debugger;
      await Notify.loadData(
        "Saving changes to Stations " + station.id,
        this.saveStations,
        station
      );
      this.selected = {};
    }
  }
};
</script>