stored-results.vue

<template>
  <div class="container">
    <h1>CpG results</h1>

    <pagination ref="pagination" @pageChange="downloadResults">
      <checkable-list ref="resultsList">
        <th slot="header">Sequence/Analyse name</th>
        <th class="text-center" slot="header">
          <sort-toggle @sort="sortResults" crit="finished" :current="currentSort">Created</sort-toggle>
        </th>
        <th class="text-center" slot="header">
          <sort-toggle @sort="sortResults" crit="resultCount" :current="currentSort">Results count</sort-toggle>
        </th>
        <th class="text-center" slot="header">Tags</th>
        <th class="text-center" slot="header">Export</th>
        <th class="text-center" slot="header">Details</th>
        <th class="text-center" slot="header">Edit</th>
        <th class="text-center" slot="header">Delete</th>

        <span slot="item-name" slot-scope="props">
          {{ props.item.title }}
        </span>

        <template slot-scope="props">
          <td class="text-right">
            <span v-if="props.item.finished">{{ props.item.finished | dateTime }}</span>
            <span v-else class="fa fa-spinner animate"></span>
          </td>
          <td class="text-right">
            <span v-if="props.item.finished">
              {{ props.item.resultCount | number(0) }}
            </span>
          </td>
          <td>
            <b-badge v-for="tag in props.item.tags" :key="tag" pill variant="primary">
              {{ tag }}
            </b-badge>
          </td>
          <td class="text-center">
            <a :href="downloadCSV(props.item)" v-if="downloadToken" class="btn btn-primary btn-sm">
              <span class="fa fa-cube"></span>
            </a>
            <a :href="downloadBED(props.item)" v-if="downloadToken" class="btn btn-primary btn-sm">
              <span class="fa fa-bed"></span>
            </a>
          </td>
          <td>
            <router-link
                class="btn btn-primary btn-sm"
                :to="{ name: 'results.cpg.detail', params: { id: props.item.id } }"
            >
              <span class="fa fa-search"></span>
            </router-link>
          </td>
          <td class="text-center">
            <button class="btn btn-primary btn-sm" @click.stop="editResult(props.item)">
              <span class="fa fa-edit"></span>
            </button>
          </td>
          <td class="text-center">
            <button class="btn btn-danger btn-sm" @click.stop="deleteResult(props.item)">
              <span class="fa fa-trash"></span>
            </button>
          </td>
        </template>

        <p slot="no-items" class="alert alert-warning">
          No results found.
        </p>
      </checkable-list>
    </pagination>

    <button type="button" class="btn btn-default" @click="toggleSelection">
      <i class="fa fa-refresh"></i> Invert selection
    </button>
    <button class="btn btn-danger" @click="deleteResults"><i class="fa fa-trash"></i> Delete selected</button>

    <modal-confirm ref="confirmModal">Really delete results?</modal-confirm>
    <modal-confirm ref="confirmModalMulti">Really delete selected results?</modal-confirm>

    <modal-confirm ref="editModal">
      <template slot="header">
        Modify result
      </template>

      <result-editor v-if="selectedResult" :result="selectedResult" ref="resultEditor"></result-editor>

      <template slot="buttonConfirm">
        Save changes
      </template>
    </modal-confirm>
  </div>
</template>
<script>
import SortToggle from '@/components/core/sort-toggle'
import Formatters from '@/formatters'
import CheckableList from '@/components/core/checkable-list'
import Pagination from '@/components/core/pagination'
import ResultEditor from '@/components/core/result-editor'

/**
 * list of stored result groups
 */
export default {
  data() {
    return {
      selectedResult: null,
      currentSort: {
        crit: 'finished',
        asc: true,
      },
      downloadToken: '',
    }
  },
  methods: {
    downloadResults() {
      this.$http
          .get('analyse/cpg', {
            params: {
              sort: this.currentSort.crit,
              order: this.currentSort.asc ? 'ASC' : 'DESC',
              pageSize: this.$refs.pagination.getPageSize(),
              pageNumber: this.$refs.pagination.getPageCurrent() - 1,
            },
          })
          .then(response => {
            this.$refs.pagination.setPageCount(response.data.page.totalElements)
            this.$refs.resultsList.setItems(response.data.items)
            this.downloadToken = response.data.downloadToken
          })
    },
    performDelete(result) {
      return this.$http.delete('analyse/cpg/' + result.id)
    },
    deleteResult(result) {
      this.$refs.confirmModal
          .display()
          .then(() => {
            return this.performDelete(result)
          })
          .then(() => {
            this.downloadResults()
          })
    },
    deleteResults() {
      this.$refs.confirmModalMulti.display().then(() => {
        var checked = this.$refs.resultsList.getCheckedItems()
        var promises = []
        checked.forEach(result => {
          if (result.ui.checked) {
            promises.push(this.performDelete(result))
          }
        })
        Promise.all(promises).then(() => {
          this.downloadResults()
        })
      })
    },
    editResult(result) {
      this.selectedResult = result
      this.$refs.editModal
          .display()
          .then(() => {
            this.$http
                .put('analyse/cpg/' + result.id + '/tags', {
                  tags: this.$refs.resultEditor.getTags(),
                })
                .then(() => {
                  this.downloadResults()
                })
          })
          .finally(() => {
            this.selectedResult = null
          })
    },
    sortResults(info) {
      this.currentSort = info
      this.downloadResults()
    },
    toggleSelection() {
      this.$refs.resultsList.toggleSelection()
    },
    downloadCSV(analysisInfo) {
      return `${this.$http.defaults.baseURL}analyse/cpg/${analysisInfo.id}/cpg.csv`
    },
    downloadBED(analysisInfo) {
      return `${this.$http.defaults.baseURL}analyse/cpg/${analysisInfo.id}/cpg.bedgraph`
    },
  },
  mounted() {
    this.downloadResults()
  },
  components: {
    'sort-toggle': SortToggle,
    'checkable-list': CheckableList,
    pagination: Pagination,
    'result-editor': ResultEditor,
  },
  filters: {
    dateTime: Formatters.dateTime,
    number: Formatters.number,
    sequenceName: Formatters.sequenceName,
  },
}
</script>