Skip to content
Snippets Groups Projects
Select Git revision
  • 2cd2742a6b890b56c8d1932a764eb08df08da313
  • master default protected
  • dev
  • VB-integrate-ccqtl-0.0.1etc
  • fix-tests
  • integrate-ccqtl-0.0.1-beta1
  • docs-pages
  • update-readme-rp
  • 119-rerun-analysis-in-error
  • refactor-phenotype-category-116
  • to-final-gitlab-orga
  • helm-subcharts
  • color-theme-110
  • postgres-operator-50
  • remove-reader-perm
  • add-cc-data-to-db-29
  • v1.0.0
17 results

GenericTable.vue

Blame
  • GenericTable.vue 2.85 KiB
    <template>
      <v-data-table
        :headers="headers"
        :items="items"
        :sort-by="sortBy"
        :sort-desc="sortDesc"
        :search="search"
        :items-per-page="itemsPerPage"
        :item-class="getRowClass"
        :footer-props="footerProps"
        :loading="loading"
        multi-sort
        @click:row="$emit('go-to-item', $event)"
      >
        <template #top>
          <v-toolbar flat>
            <v-toolbar-title class="text-h5 font-weight-medium">
              {{ title }}
            </v-toolbar-title>
            <v-divider class="mx-4" inset vertical></v-divider>
            <v-text-field
              v-model="search"
              append-icon="mdi-magnify"
              label="Search"
              single-line
              hide-details
            ></v-text-field>
          </v-toolbar>
        </template>
        <template #[`item.creation_date`]="{ item }">
          <v-chip>{{ item.creation_date.toDateString() }}</v-chip>
        </template>
        <template #[`item.project.project_name`]="{ item }">
          <v-chip color="primary" @click.stop="goToProject(item.project)">{{
            item.project.project_name
          }}</v-chip>
        </template>
        <template #[`item.experiment.name`]="{ item }">
          <v-chip
            v-if="item.experiment"
            color="primary"
            @click.stop="goToExperiment(item.project, item.experiment)"
            >{{ item.experiment.name }}</v-chip
          >
          <v-chip v-else color="error"> No experiment</v-chip>
        </template>
        <template #[`item.history_status`]="{ value }">
          <analysis-state
            v-if="value && value.state"
            :state="value.state"
          ></analysis-state>
        </template>
        <template #[`item.workflow_invocation_status`]="{ value }">
          <InvocationState v-if="value" :state="value"></InvocationState>
        </template>
      </v-data-table>
    </template>
    <script>
    import AnalysisState from './AnalysisState.vue'
    import InvocationState from './InvocationState.vue'
    
    export default {
      components: { AnalysisState, InvocationState },
      props: {
        items: { type: Array, default: () => [] },
        headers: { type: Array, default: () => [] },
        sortBy: { type: Array, default: () => [] },
        sortDesc: { type: Array, default: () => [] },
        title: { type: String, default: '' },
        itemsPerPage: { type: Number, default: 15 },
        footerProps: {
          type: Object,
          default: () => ({ 'items-per-page-options': [15, 30, 45, -1] }),
        },
        loading: { type: Boolean, default: false },
      },
      data() {
        return { search: '' }
      },
      methods: {
        getRowClass() {
          return 'is-route'
        },
        goToProject(project) {
          this.$router.push({
            name: 'projects-id',
            params: { id: project.id },
          })
        },
        goToExperiment(project, experiment) {
          this.$router.push({
            name: 'projects-id-experiments-experimentId',
            params: { id: project.id, experimentId: experiment.id },
          })
        },
      },
    }
    </script>
    
    <style lang="scss">
    .is-route {
      cursor: pointer;
    }
    </style>