alx/procat2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

CatalogList.vue: add public catalogs

Browse Source
This commit is contained in:
Seth Ladygo
2019-04-25 23:39:23 -07:00
parent 903c42d191
commit 8991485417
2 changed files with 195 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
cateditor/src/components/CatalogList.vue
View File

@ -31,7 +31,7 @@
</v-card-title> </v-card-title>
<v-data-table <v-data-table
:headers="headers" :headers="myHeaders"
:items="myCatalogs" :items="myCatalogs"
:search="search" :search="search"
:loading="loadingMyCatalogs" :loading="loadingMyCatalogs"
@ -40,9 +40,18 @@
> >
<template v-slot:items="cats"> <template v-slot:items="cats">
<tr @click="selectCatalog(cats.item.id)"> <tr @click="selectCatalog(cats.item.id)">
<td>{{ cats.item.seasonCode }}</td> <td v-if="cats.item.master" class="px-2 py-0">
<td>{{ cats.item.name }}</td> <v-tooltip top>
<td>{{ cats.item.updatedPretty }}</td> <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> </tr>
</template> </template>
@ -60,7 +69,53 @@
<v-tab-item key="public"> <v-tab-item key="public">
<v-card flat> <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-card>
</v-tab-item> </v-tab-item>
</v-tabs> </v-tabs>
@ -76,52 +131,61 @@
</v-toolbar-title> </v-toolbar-title>
</v-toolbar> </v-toolbar>
<v-divider></v-divider> <v-divider></v-divider>
<v-list dense> <table class="details">
<v-list-tile> <tr v-if="selectedCatalog.master">
<v-list-tile-action class="grey--text">Season</v-list-tile-action> <td class="grey--text">Season master</td>
<v-list-tile-content>{{ selectedCatalog.seasonCode }}</v-list-tile-content> <td><span class="group"><v-icon color="red">stars</v-icon></span></td>
</v-list-tile> </tr>
<v-list-tile> <tr>
<v-list-tile-action class="grey--text">Region</v-list-tile-action> <td class="grey--text">Season</td>
<v-list-tile-content>{{ selectedCatalog.regionCode }}</v-list-tile-content> <td>{{ selectedCatalog.seasonCode }}</td>
</v-list-tile> </tr>
<v-list-tile> <tr>
<v-list-tile-action class="grey--text">Owner</v-list-tile-action> <td class="grey--text">Region</td>
<v-list-tile-content>{{ selectedCatalog.ownerName }}</v-list-tile-content> <td>{{ selectedCatalog.regionCode }}</td>
</v-list-tile> </tr>
<v-list-tile> <tr>
<v-list-tile-action class="grey--text">Created</v-list-tile-action> <td class="grey--text">Owner</td>
<v-list-tile-content>{{ selectedCatalog.createdPretty }}</v-list-tile-content> <td>{{ selectedCatalog.ownerName }}</td>
</v-list-tile> </tr>
<v-list-tile> <tr>
<v-list-tile-action class="grey--text">Updated</v-list-tile-action> <td class="grey--text">Created</td>
<v-list-tile-content>{{ selectedCatalog.updatedPretty }}</v-list-tile-content> <td>{{ selectedCatalog.createdPretty }}</td>
</v-list-tile> </tr>
<v-list-tile> <tr>
<v-list-tile-action class="grey--text"></v-list-tile-action> <td class="grey--text">Updated</td>
<v-list-tile-content>{{ selectedCatalog.pages}} {{ selectedCatalog.pages | pluralize('page') }}</v-list-tile-content> <td>{{ selectedCatalog.updatedPretty }}</td>
</v-list-tile> </tr>
<v-list-tile> <tr>
<v-list-tile-action class="grey--text"></v-list-tile-action> <td class="grey--text">Pages</td>
<v-list-tile-content>{{ selectedCatalog.sections}} {{ selectedCatalog.sections | pluralize('section') }}</v-list-tile-content> <td>{{ selectedCatalog.pages}}</td>
</v-list-tile> </tr>
<v-list-tile> <tr>
<v-list-tile-action class="grey--text"></v-list-tile-action> <td class="grey--text">Sections</td>
<v-list-tile-content>{{ selectedCatalog.materials}} {{ selectedCatalog.materials | pluralize('material') }}</v-list-tile-content> <td>{{ selectedCatalog.sections}}</td>
</v-list-tile> </tr>
<v-list-tile> <tr>
<v-list-tile-action class="grey--text"></v-list-tile-action> <td class="grey--text">Materials</td>
<v-list-tile-content v-if="selectedCatalog.public">Public</v-list-tile-content> <td>{{ selectedCatalog.materials}}</td>
<v-list-tile-content v-else>Private</v-list-tile-content> </tr>
</v-list-tile> <tr v-if="selectedCatalog.public">
</v-list> <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-divider></v-divider>
<v-text> <v-card-text>
<v-btn small flat>Edit</v-btn> <v-btn class="ma-0" small flat>Edit</v-btn>
<v-btn small flat :href="selectedCatalog.pdf" target="_blank">Download</v-btn> <v-btn class="ma-0" small flat :href="selectedCatalog.pdf" target="_blank">Download</v-btn>
<v-btn small flat>Share</v-btn> <v-btn class="ma-0" small flat>Share</v-btn>
</v-text> </v-card-text>
</v-card> </v-card>
<v-card v-else> <v-card v-else>
<v-card-text class="text--grey">No catalog selected</v-card-text> <v-card-text class="text--grey">No catalog selected</v-card-text>
@ -140,20 +204,66 @@ export default {
data: () => ({ data: () => ({
activeTab: null, activeTab: null,
search: '', 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', text: 'Season',
align: 'left', 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', text: 'Name',
align: 'left', align: 'left',
value: 'name' value: 'name',
width: '40%',
class: 'px-2 py-0',
}, },
{ {
text: 'Updated', text: 'Updated',
value: 'updated' value: 'updated',
width: '20%',
class: 'px-2 py-0',
}, },
], ],
}), }),
@ -181,6 +291,7 @@ export default {
}, },
mounted: function() { mounted: function() {
this.$store.dispatch('loadMyCatalogs') this.$store.dispatch('loadMyCatalogs')
this.$store.dispatch('loadPublicCatalogs')
} }
} }
</script> </script>
@ -196,4 +307,14 @@ export default {
.theme--light.application { .theme--light.application {
background-color: #e1e1e1; background-color: #e1e1e1;
} }
table.details tr td:first-child {
padding: 5px 5px 5px 15px;
text-align: right;
}
table.details tr td {
padding: 5px;
}
</style> </style>

21
cateditor/src/pages/list/store/index.js
View File

@ -82,6 +82,27 @@ export const store = new Vuex.Store({
commit('setLoadingMyCatalogs', false) 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) { setSelectedCatalog(context, id) {
let cat = context.getters.findCatalog(id) let cat = context.getters.findCatalog(id)
context.commit('setSelectedCatalog', cat) context.commit('setSelectedCatalog', cat)