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

<template>
  <v-container fluid>
    <v-card>
      <v-card-title>
        <v-toolbar flat>
          <v-toolbar-title>Sequences</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-text-field
            v-model="filter"
            append-icon="mdi-magnify"
            label="Filter"
            single-line
            clearable
            ></v-text-field>
        </v-toolbar>
      </v-card-title>
      <v-card-text>

        <v-data-table
        :headers="headers"
        :items="items"
        :search="filter"
        :loading="loading"
        :fixed-header="true"
        :item-class="(item) => (activeItem == item && !edit) ? 'blue accent-1 elevation-3' : ''"
        @click:row="setActiveItem"
        >
        
          <template v-slot:item.status="{item}">
            <dougal-line-status
              :preplot="item"
              :sequences="sequences.filter(s => s.line == item.line)"
              :sequence-href="(s) => `/projects/${$route.params.project}/log/sequence/${s.sequence}`"
            >
              <template v-slot:empty>
                <div class="sequence" title="Virgin"></div>
              </template>
            </dougal-line-status>
          </template>

          <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>
          
          <template v-slot:item.remarks="{item}">
            <v-text-field v-if="edit && edit.line == item.line && edit.key == 'remarks'"
              type="text"
              v-model="edit.value"
              prepend-icon="mdi-restore"
              append-outer-icon="mdi-content-save-edit-outline"
              clearable
              @click:prepend="edit.value = item.remarks; edit = null"
              @click:append-outer="edit = null"
            >
            </v-text-field>
            <div v-else>
              {{item.remarks}}
              <v-btn v-if="edit === null"
                icon
                small
                title="Edit"
                :disabled="loading"
                @click="editItem(item, 'remarks')"
              >
                <v-icon small>mdi-square-edit-outline</v-icon>
              </v-btn>
            </div>

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

<script>
import { mapActions, mapGetters } from 'vuex';
import DougalLineStatus from '@/components/line-status';


export default {
  name: "LineList",
  
  components: {
    DougalLineStatus
  },

  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: [],
      filter: null,
      num_lines: null,
      sequences: [],
      activeItem: null,
      edit: null // {line, key, value}
    }
  },

  computed: {
    ...mapGetters(['loading'])
  },
  
  watch: {
    
    async edit (newVal, oldVal) {
      if (newVal === null && oldVal !== null) {
        const item = this.items.find(i => i.line == oldVal.line);
        
        // Get around this Vuetify ‘feature’
        // https://github.com/vuetifyjs/vuetify/issues/4144
        if (oldVal.value === null) oldVal.value = "";
        
        if (item && item[oldVal.key] != oldVal.value) {
          console.log("original, new", item[oldVal.key], oldVal.value);
          if (await this.saveItem(oldVal)) {
            item[oldVal.key] = oldVal.value;
          } else {
            this.edit = oldVal;
          }
        }
      }
    }
    
  },

  methods: {
    
    editItem (item, key) {
      this.edit = {
        line: item.line,
        key,
        value: item[key]
      }
    },
    
    async saveItem (edit) {
      if (!edit)  return;
      
      try {
        const url = `/project/${this.$route.params.project}/line/${edit.line}`;
        const init = {
          method: "PATCH",
          body: {
            [edit.key]: edit.value
          }
        };
        
        let res;
        await this.api([url, init, (e, r) => res = r]);
        return res && res.ok;
      } catch (err) {
        return false;
      }
    },

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

    async getLines () {

      const url = `/project/${this.$route.params.project}/line`;

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

    },
    
    async getSequences () {
      const url = `/project/${this.$route.params.project}/sequence`;
      this.sequences = await this.api([url]) || [];
    },

    setActiveItem (item) {
      this.activeItem = this.activeItem == item
        ? null
        : item;
    },

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

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

}

</script>