Select Git revision
GenericTable.vue

Remi PLANEL authored
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>