CatalogList.vue: add cat details

This commit is contained in:
Seth Ladygo
2019-04-25 16:53:46 -07:00
parent 68b6b68fd0
commit 8aec069793

View File

@ -9,10 +9,10 @@
</v-layout>
<v-layout row>
<v-flex xs7>
<v-flex xs8>
<v-card class="pa-2">
<v-tabs v-model="activeTab">
<v-card class="pa-0">
<v-tabs v-model="activeTab" color="keen_light_grey" slider-color="keen_dark_grey">
<v-tab key="mine">My Catalogs</v-tab>
<v-tab key="public">Public Catalogs</v-tab>
@ -68,9 +68,63 @@
</v-flex>
<v-flex xs5>
<v-card>
<v-card-text>{{ getSelectedCatalog }} </v-card-text>
<v-flex xs4>
<v-card v-if="selectedCatalog">
<v-toolbar dense color="keen_light_grey" class="elevation-0">
<v-toolbar-title color="primary" class="headline">
{{ selectedCatalog.name }}
</v-toolbar-title>
</v-toolbar>
<v-divider></v-divider>
<v-list dense>
<v-list-tile>
<v-list-tile-action class="grey--text">Season</v-list-tile-action>
<v-list-tile-content>{{ selectedCatalog.seasonCode }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action class="grey--text">Region</v-list-tile-action>
<v-list-tile-content>{{ selectedCatalog.regionCode }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action class="grey--text">Owner</v-list-tile-action>
<v-list-tile-content>{{ selectedCatalog.ownerName }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action class="grey--text">Created</v-list-tile-action>
<v-list-tile-content>{{ selectedCatalog.createdPretty }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action class="grey--text">Updated</v-list-tile-action>
<v-list-tile-content>{{ selectedCatalog.updatedPretty }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action class="grey--text"></v-list-tile-action>
<v-list-tile-content>{{ selectedCatalog.pages}} {{ selectedCatalog.pages | pluralize('page') }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action class="grey--text"></v-list-tile-action>
<v-list-tile-content>{{ selectedCatalog.sections}} {{ selectedCatalog.sections | pluralize('section') }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action class="grey--text"></v-list-tile-action>
<v-list-tile-content>{{ selectedCatalog.materials}} {{ selectedCatalog.materials | pluralize('material') }}</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-action class="grey--text"></v-list-tile-action>
<v-list-tile-content v-if="selectedCatalog.public">Public</v-list-tile-content>
<v-list-tile-content v-else>Private</v-list-tile-content>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<v-text>
<v-btn small flat>Edit</v-btn>
<v-btn small flat :href="selectedCatalog.pdf" target="_blank">Download</v-btn>
<v-btn small flat>Share</v-btn>
</v-text>
</v-card>
<v-card v-else>
<v-card-text class="text--grey">No catalog selected</v-card-text>
</v-card>
</v-flex>
</v-layout>
@ -116,7 +170,7 @@ export default {
loadingPublicCatalogs() {
return this.$store.getters.getLoadingPublicCatalogs
},
getSelectedCatalog() {
selectedCatalog() {
return this.$store.getters.getSelectedCatalog
},
},
@ -137,3 +191,9 @@ export default {
overflow-y: auto;
}
</style>
<style>
.theme--light.application {
background-color: #e1e1e1;
}
</style>