dougal-software/lib/www/client/source/src/views/LineList.vue

<template>
  <v-container fluid>
    <v-data-table
    :headers="headers"
    :items="items"
    :server-items-length="num_lines"
    :options.sync="options"
    :loading="loading"
    :fixed-header="true"
    >

      <template v-slot:item.length="props">
        <span>{{ Math.round(props.value) }} m</span>
      </template>

      <template v-slot:item.azimuth="props">
        <span>{{ props.value.toFixed(1) }} °</span>
      </template>

    </v-data-table>
  </v-container>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  name: "LineList",

  data () {
    return {
      headers: [
        {
          value: "line",
          text: "Line"
        },
        {
          value: "status",
          text: "Status"
        },
        {
          value: "fsp",
          text: "FSP",
          align: "end"
        },
        {
          value: "lsp",
          text: "LSP",
          align: "end"
        },
        {
          value: "num_points",
          text: "Num. points",
          align: "end"
        },
        {
          value: "length",
          text: "Length",
          align: "end"
        },
        {
          value: "azimuth",
          text: "Azimuth",
          align: "end"
        },
        {
          value: "remarks",
          text: "Remarks"
        }
      ],
      items: [],
      options: {},
      loading: false,
      num_lines: null
    }
  },

  watch: {
    options: {
      handler () {
        this.getLines();
      },
      deep: true
    }
  },

  methods: {

    async getNumLines () {
      const projectInfo = await this.api([`/project/${this.$route.params.project}`]);
      this.num_lines = projectInfo.lines;
    },

    async getLines () {
      this.loading = true;

      const query = new URLSearchParams(this.options);
      if (this.options.itemsPerPage < 0) {
        query.delete("itemsPerPage");
      }
      const url = `/project/${this.$route.params.project}/line?${query.toString()}`;

      this.items = await this.api([url]) || [];

      this.loading = false;
    },

    ...mapActions(["api"])
  },

  mounted () {
    this.getLines();
    this.getNumLines();
  }

}

</script>