CatalogList.vue: add public catalogs
This commit is contained in:
Seth Ladygo
@ -31,7 +31,7 @@
|
||||
</v-card-title>
|
||||
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:headers="myHeaders"
|
||||
:items="myCatalogs"
|
||||
:search="search"
|
||||
:loading="loadingMyCatalogs"
|
||||
@ -40,9 +40,18 @@
|
||||
>
|
||||
<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>
|
||||
<td v-if="cats.item.master" class="px-2 py-0">
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-icon small color="red" v-on="on">stars</v-icon>
|
||||
</template>
|
||||
<span>Season master</span>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
<td v-else class="pa-0"></td>
|
||||
<td class="px-2 py-0">{{ cats.item.seasonCode }}</td>
|
||||
<td class="px-2 py-0">{{ cats.item.name }}</td>
|
||||
<td class="px-2 py-0">{{ cats.item.updatedPretty }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
@ -60,7 +69,53 @@
|
||||
|
||||
<v-tab-item key="public">
|
||||
<v-card flat>
|
||||
<v-card-text>public</v-card-text>
|
||||
|
||||
<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="pubHeaders"
|
||||
:items="publicCatalogs"
|
||||
:search="search"
|
||||
:loading="loadingPublicCatalogs"
|
||||
disable-initial-sort
|
||||
class="scroll-area"
|
||||
>
|
||||
<template v-slot:items="cats">
|
||||
<tr @click="selectCatalog(cats.item.id)">
|
||||
<td v-if="cats.item.master" class="px-2 py-0">
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-icon small color="red" v-on="on">stars</v-icon>
|
||||
</template>
|
||||
<span>Season master</span>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
<td v-else class="pa-0"></td>
|
||||
<td class="px-2 py-0">{{ cats.item.seasonCode }}</td>
|
||||
<td class="px-2 py-0">{{ cats.item.ownerName }}</td>
|
||||
<td class="px-2 py-0">{{ cats.item.name }}</td>
|
||||
<td class="px-2 py-0">{{ 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-tabs>
|
||||
@ -76,52 +131,61 @@
|
||||
</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>
|
||||
<table class="details">
|
||||
<tr v-if="selectedCatalog.master">
|
||||
<td class="grey--text">Season master</td>
|
||||
<td><span class="group"><v-icon color="red">stars</v-icon></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="grey--text">Season</td>
|
||||
<td>{{ selectedCatalog.seasonCode }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="grey--text">Region</td>
|
||||
<td>{{ selectedCatalog.regionCode }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="grey--text">Owner</td>
|
||||
<td>{{ selectedCatalog.ownerName }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="grey--text">Created</td>
|
||||
<td>{{ selectedCatalog.createdPretty }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="grey--text">Updated</td>
|
||||
<td>{{ selectedCatalog.updatedPretty }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="grey--text">Pages</td>
|
||||
<td>{{ selectedCatalog.pages}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="grey--text">Sections</td>
|
||||
<td>{{ selectedCatalog.sections}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="grey--text">Materials</td>
|
||||
<td>{{ selectedCatalog.materials}}</td>
|
||||
</tr>
|
||||
<tr v-if="selectedCatalog.public">
|
||||
<td class="grey--text">Public</td>
|
||||
<td>
|
||||
<span class="group"><v-icon color="blue">group</v-icon></span></td>
|
||||
</tr>
|
||||
<tr v-if="selectedCatalog.show_prices">
|
||||
<td class="grey--text">Show prices</td>
|
||||
<td>
|
||||
<span class="group"><v-icon color="green">monetization_on</v-icon></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<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-text>
|
||||
<v-btn class="ma-0" small flat>Edit</v-btn>
|
||||
<v-btn class="ma-0" small flat :href="selectedCatalog.pdf" target="_blank">Download</v-btn>
|
||||
<v-btn class="ma-0" small flat>Share</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-card v-else>
|
||||
<v-card-text class="text--grey">No catalog selected</v-card-text>
|
||||
@ -140,20 +204,66 @@ export default {
|
||||
data: () => ({
|
||||
activeTab: null,
|
||||
search: '',
|
||||
headers: [
|
||||
myHeaders: [
|
||||
{
|
||||
text: '',
|
||||
align: 'center',
|
||||
value: 'master',
|
||||
width: '1%',
|
||||
class: 'pa-0',
|
||||
},
|
||||
{
|
||||
text: 'Season',
|
||||
value: 'seasonCode',
|
||||
width: '1%',
|
||||
class: 'px-2 py-0',
|
||||
},
|
||||
{
|
||||
text: 'Name',
|
||||
value: 'name',
|
||||
width: '55%',
|
||||
class: 'px-2 py-0',
|
||||
},
|
||||
{
|
||||
text: 'Updated',
|
||||
value: 'updated',
|
||||
class: 'px-2 py-0',
|
||||
},
|
||||
],
|
||||
pubHeaders: [
|
||||
{
|
||||
text: '',
|
||||
align: 'center',
|
||||
value: 'master',
|
||||
width: '1%',
|
||||
class: 'pa-0',
|
||||
},
|
||||
{
|
||||
text: 'Season',
|
||||
align: 'left',
|
||||
value: 'seasonCode'
|
||||
value: 'seasonCode',
|
||||
width: '1%',
|
||||
class: 'px-2 py-0',
|
||||
},
|
||||
{
|
||||
text: 'Owner',
|
||||
align: 'left',
|
||||
value: 'ownerName',
|
||||
width: '15%',
|
||||
class: 'px-2 py-0',
|
||||
},
|
||||
{
|
||||
text: 'Name',
|
||||
align: 'left',
|
||||
value: 'name'
|
||||
value: 'name',
|
||||
width: '40%',
|
||||
class: 'px-2 py-0',
|
||||
},
|
||||
{
|
||||
text: 'Updated',
|
||||
value: 'updated'
|
||||
value: 'updated',
|
||||
width: '20%',
|
||||
class: 'px-2 py-0',
|
||||
},
|
||||
],
|
||||
}),
|
||||
@ -181,6 +291,7 @@ export default {
|
||||
},
|
||||
mounted: function() {
|
||||
this.$store.dispatch('loadMyCatalogs')
|
||||
this.$store.dispatch('loadPublicCatalogs')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -196,4 +307,14 @@ export default {
|
||||
.theme--light.application {
|
||||
background-color: #e1e1e1;
|
||||
}
|
||||
|
||||
table.details tr td:first-child {
|
||||
padding: 5px 5px 5px 15px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
table.details tr td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -82,6 +82,27 @@ export const store = new Vuex.Store({
|
||||
commit('setLoadingMyCatalogs', false)
|
||||
}
|
||||
},
|
||||
|
||||
async loadPublicCatalogs({ commit }) {
|
||||
try {
|
||||
commit('setLoadingPublicCatalogs', true)
|
||||
const response = await axios.get('/api/v1/catalogs/public')
|
||||
if ('catalogs' in response.data) {
|
||||
// console.log('recieved catalogs:', response.data.catalogs)
|
||||
commit('setPublicCatalogs', response.data.catalogs)
|
||||
} else {
|
||||
// console.log('no catalogs')
|
||||
commit('setPublicCatalogs', [])
|
||||
}
|
||||
commit('setLoadingPublicCatalogs', false)
|
||||
} catch (error) {
|
||||
// TODO set loading error property
|
||||
console.error(error)
|
||||
commit('setPublicCatalogs', [])
|
||||
commit('setLoadingPublicCatalogs', false)
|
||||
}
|
||||
},
|
||||
|
||||
setSelectedCatalog(context, id) {
|
||||
let cat = context.getters.findCatalog(id)
|
||||
context.commit('setSelectedCatalog', cat)
|
||||
|
||||
Reference in New Issue
Block a user