CatalogList.vue: add cat details
This commit is contained in:
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user