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

<template>
  <v-container fluid>

    <v-data-table
    :headers="headers"
    :items="displayItems"
    :options.sync="options"
    :loading="loading"
    @contextmenu:row="contextMenu"
    >

      <template v-slot:item.pid="{item, value}">
        <template v-if="item.archived">
          <a class="secondary--text" title="This project has been archived" :href="`/projects/${item.pid}`">{{value}}</a>
          <v-icon
            class="ml-1 secondary--text"
            small
             title="This project has been archived"
          >mdi-archive-outline</v-icon>
        </template>
        <template v-else>
          <a :href="`/projects/${item.pid}`">{{value}}</a>
        </template>
      </template>

      <template v-slot:item.shots="{item}">
        {{ item.total ? (item.prime + item.other) : "" }}
      </template>

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

      <template v-slot:footer.prepend>
        <v-checkbox
          class="mr-3"
          v-model="showArchived"
          dense
          hide-details
          title="Projects that have been marked as archived by an administrator no longer receive updates from external sources, such as the project's file repository or the navigation system, but they may still be interacted with via Dougal, including adding or editing log comments."
        >
          <template v-slot:label>
            <span class="subtitle-2">Show archived projects</span>
          </template>
        </v-checkbox>
      </template>

    </v-data-table>

    <v-menu v-if="adminaccess"
      v-model="contextMenuShow"
      :position-x="contextMenuX"
      :position-y="contextMenuY"
      absolute
      offset-y
    >
      <v-list dense v-if="contextMenuItem">
        <v-list-item :href="`${contextMenuItem.pid}/configuration`">
          <v-list-item-icon><v-icon>mdi-file-document-edit-outline</v-icon></v-list-item-icon>
          <v-list-item-title class="warning--text">Edit project settings</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>

  </v-container>
</template>

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

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

export default {
  name: "ProjectList",

  data () {
    return {
      headers: [
        {
          value: "pid",
          text: "Project ID"
        },
        {
          value: "name",
          text: "Name"
        },
        {
          value: "lines",
          text: "Lines"
        },
        {
          value: "seq_final",
          text: "Sequences"
        },
        {
          value: "total",
          text: "Preplot points"
        },
        {
          value: "shots",
          text: "Shots acquired"
        },
        {
          value: "progress",
          text: "% Complete"
        },
      ],
      items: [],
      options: {},

      showArchived: true,

      // Context menu stuff
      contextMenuShow: false,
      contextMenuX: 0,
      contextMenuY: 0,
      contextMenuItem: null
    }
  },

  computed: {
    displayItems () {
      return this.showArchived
        ? this.items
        : this.items.filter(i => !i.archived);
    },

    ...mapGetters(['loading', 'serverEvent', 'adminaccess', 'projects'])
  },

  watch: {
    async serverEvent (event) {
      if (event.channel == "project" && event.payload?.schema == "public") {
        if (event.payload?.operation == "DELETE" || event.payload?.operation == "INSERT") {
          await this.load();
        }
      }
    }
  },

  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 () {
      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);
      }
    },

    contextMenu (e, {item}) {
      e.preventDefault();
      this.contextMenuShow = false;
      this.contextMenuX = e.clientX;
      this.contextMenuY = e.clientY;
      this.contextMenuItem = item;
      this.$nextTick( () => this.contextMenuShow = true );
    },

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

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

</script>