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

<template>
  <v-container fluid>
    <v-data-table
    :headers="headers"
    :items="items"
    :options.sync="options"
    :loading="loading"
    >

      <template v-slot:item.pid="props">
        <a :href="`/projects/${props.item.pid}`">{{props.value}}</a>
      </template>

      <template v-slot:item.progress="props">
        {{ props.item.preplot_points ? (props.item.unique_shots/props.item.preplot_points*100).toFixed(1)+'%' : "" }}
        <v-progress-linear v-if="props.item.preplot_points"
          height="2"
          :value="(props.item.unique_shots/props.item.preplot_points*100)"
        />
      </template>


    </v-data-table>

  </v-container>
</template>

<style>
td p:last-of-type {
  margin-bottom: 0;
}
</style>

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

export default {
  name: "ProjectList",

  data () {
    return {
      headers: [
        {
          value: "pid",
          text: "Project ID"
        },
        {
          value: "name",
          text: "Name"
        },
        {
          value: "lines",
          text: "Lines"
        },
        {
          value: "sequences",
          text: "Sequences"
        },
        {
          value: "unique_shots",
          text: "Shots"
        },
        {
          value: "progress",
          text: "% Complete"
        },
      ],
      items: [],
      options: {},
      loading: false
    }
  },

  methods: {
    async list () {
      this.items = await this.api(["/project/"]) || [];
    },

    async summary (item) {
      const details = await this.api([`/project/${item.pid}/summary`]);
      if (details) {
        return Object.assign({}, details, item);
      }
    },

    async load () {
      this.loading = true;
      await this.list();
      const promises = [];
      for (const key in this.items) {
        const item = this.items[key];
        const promise = this.summary(item)
        .then( expanded => {
          if (expanded) {
            this.$set(this.items, key, expanded);
          }
        });
        promises.push(promise);
      }
      Promise.all(promises).finally( () => this.loading = false);
    },

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

  mounted () {
    this.load();
  }
}

</script>