140 lines
3.2 KiB
Vue
140 lines
3.2 KiB
Vue
<template>
|
|
<v-container fluid grid-list-lg>
|
|
<v-layout row>
|
|
<v-flex xs3>
|
|
<v-btn color="primary">New Catalog</v-btn>
|
|
</v-flex>
|
|
<v-flex xs9>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
<v-layout row>
|
|
<v-flex xs7>
|
|
|
|
<v-card class="pa-2">
|
|
<v-tabs v-model="activeTab">
|
|
<v-tab key="mine">My Catalogs</v-tab>
|
|
<v-tab key="public">Public Catalogs</v-tab>
|
|
|
|
<v-tab-item key="mine">
|
|
<v-card flat>
|
|
|
|
<v-card-title>
|
|
<v-spacer></v-spacer>
|
|
<v-text-field
|
|
v-model="search"
|
|
append-icon="search"
|
|
label="Search"
|
|
single-line
|
|
hide-details
|
|
></v-text-field>
|
|
</v-card-title>
|
|
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="myCatalogs"
|
|
:search="search"
|
|
:loading="loadingMyCatalogs"
|
|
disable-initial-sort
|
|
class="scroll-area"
|
|
>
|
|
<template v-slot:items="cats">
|
|
<tr @click="selectCatalog(cats.item.id)">
|
|
<td>{{ cats.item.seasonCode }}</td>
|
|
<td>{{ cats.item.name }}</td>
|
|
<td>{{ cats.item.updatedPretty }}</td>
|
|
</tr>
|
|
</template>
|
|
|
|
<template v-slot:no-results>
|
|
No catalogs match "{{ search }}"
|
|
</template>
|
|
|
|
<template v-slot:no-data>
|
|
No Catalogs
|
|
</template>
|
|
</v-data-table>
|
|
|
|
</v-card>
|
|
</v-tab-item>
|
|
|
|
<v-tab-item key="public">
|
|
<v-card flat>
|
|
<v-card-text>public</v-card-text>
|
|
</v-card>
|
|
</v-tab-item>
|
|
</v-tabs>
|
|
</v-card>
|
|
|
|
</v-flex>
|
|
|
|
<v-flex xs5>
|
|
<v-card>
|
|
<v-card-text>{{ getSelectedCatalog }} </v-card-text>
|
|
</v-card>
|
|
</v-flex>
|
|
</v-layout>
|
|
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
components: {
|
|
},
|
|
data: () => ({
|
|
activeTab: null,
|
|
search: '',
|
|
headers: [
|
|
{
|
|
text: 'Season',
|
|
align: 'left',
|
|
value: 'seasonCode'
|
|
},
|
|
{
|
|
text: 'Name',
|
|
align: 'left',
|
|
value: 'name'
|
|
},
|
|
{
|
|
text: 'Updated',
|
|
value: 'updated'
|
|
},
|
|
],
|
|
}),
|
|
computed: {
|
|
myCatalogs() {
|
|
return this.$store.getters.getMyCatalogs
|
|
},
|
|
loadingMyCatalogs() {
|
|
return this.$store.getters.getLoadingMyCatalogs
|
|
},
|
|
publicCatalogs() {
|
|
return this.$store.getters.getPublicCatalogs
|
|
},
|
|
loadingPublicCatalogs() {
|
|
return this.$store.getters.getLoadingPublicCatalogs
|
|
},
|
|
getSelectedCatalog() {
|
|
return this.$store.getters.getSelectedCatalog
|
|
},
|
|
},
|
|
methods: {
|
|
selectCatalog: function(id) {
|
|
this.$store.dispatch('setSelectedCatalog', id)
|
|
}
|
|
},
|
|
mounted: function() {
|
|
this.$store.dispatch('loadMyCatalogs')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scroll-area {
|
|
height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|