354 lines
9.5 KiB
Vue
354 lines
9.5 KiB
Vue
<template>
|
|
<v-container fluid>
|
|
<v-row>
|
|
<v-col cols="3">
|
|
<v-btn color="primary"
|
|
class="black--text"
|
|
href="/catalog/new">New Catalog</v-btn>
|
|
</v-col>
|
|
<v-col cols="9">
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="8">
|
|
|
|
<v-card>
|
|
<v-tabs v-model="activeTab"
|
|
color="keen_dark_grey"
|
|
background-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>
|
|
|
|
<!-- my catalogs -->
|
|
<v-tab-item key="mine">
|
|
<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="myHeaders"
|
|
:items="myCatalogs"
|
|
:items-per-page="15"
|
|
:search="search"
|
|
:loading="loadingMyCatalogs"
|
|
@click:row="selectCatalog"
|
|
class="scroll-area"
|
|
>
|
|
<template v-slot:item.master="{ item }">
|
|
<v-tooltip top v-if="item.master">
|
|
<template v-slot:activator="{ on }">
|
|
<v-icon small color="red" v-on="on">stars</v-icon>
|
|
</template>
|
|
<span>Season master</span>
|
|
</v-tooltip>
|
|
</template>
|
|
|
|
<template v-slot:item.updated="{ item }">
|
|
{{ item.updatedPretty }}
|
|
</template>
|
|
|
|
<template v-slot:item.build_progress="{ item }">
|
|
<PDFProgress :percentDone="item.build_progress" />
|
|
</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>
|
|
|
|
<!-- public catalogs -->
|
|
<v-tab-item key="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"
|
|
:items-per-page="15"
|
|
:search="search"
|
|
:loading="loadingPublicCatalogs"
|
|
@click:row="selectCatalog"
|
|
class="scroll-area"
|
|
>
|
|
<template v-slot:item.master="{ item }">
|
|
<v-tooltip top v-if="item.master">
|
|
<template v-slot:activator="{ on }">
|
|
<v-icon small color="red" v-on="on">stars</v-icon>
|
|
</template>
|
|
<span>Season master</span>
|
|
</v-tooltip>
|
|
</template>
|
|
|
|
<template v-slot:item.updated="{ item }">
|
|
{{ item.updatedPretty }}
|
|
</template>
|
|
|
|
<template v-slot:item.build_progress="{ item }">
|
|
<PDFProgress :percentDone="item.build_progress" />
|
|
</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>
|
|
</v-card>
|
|
|
|
</v-col>
|
|
|
|
<v-col cols="4">
|
|
<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>
|
|
<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>
|
|
<tr v-if="selectedCatalog.build_progress < 100">
|
|
<td class="grey--text">PDF Build</td>
|
|
<td>
|
|
<PDFProgress :percentDone="selectedCatalog.build_progress" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<v-card-text>
|
|
<v-btn small outlined class="ma-2"
|
|
:href="'/catalog/edit/' + selectedCatalog.id">Edit</v-btn>
|
|
<v-btn small outlined class="ma-2"
|
|
:disabled="selectedCatalog.build_progress < 100"
|
|
:href="selectedCatalog.pdf">Download</v-btn>
|
|
<!-- <v-btn class="ma-0" small text>Share</v-btn> -->
|
|
</v-card-text>
|
|
</v-card>
|
|
<v-card v-else>
|
|
<v-card-text class="grey--text">No catalog selected</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapActions } from 'vuex'
|
|
import PDFProgress from './PDFProgress'
|
|
|
|
export default {
|
|
components: {
|
|
PDFProgress,
|
|
},
|
|
data: () => ({
|
|
activeTab: null,
|
|
search: '',
|
|
interval: null,
|
|
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',
|
|
},
|
|
{
|
|
text: '',
|
|
value: 'build_progress',
|
|
class: 'px-2 py-0',
|
|
width: '50px',
|
|
},
|
|
],
|
|
pubHeaders: [
|
|
{
|
|
text: '',
|
|
align: 'center',
|
|
value: 'master',
|
|
width: '1%',
|
|
class: 'pa-0',
|
|
},
|
|
{
|
|
text: 'Season',
|
|
align: 'left',
|
|
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',
|
|
width: '40%',
|
|
class: 'px-2 py-0',
|
|
},
|
|
{
|
|
text: 'Updated',
|
|
value: 'updated',
|
|
width: '20%',
|
|
class: 'px-2 py-0',
|
|
},
|
|
{
|
|
text: '',
|
|
value: 'build_progress',
|
|
class: 'px-2 py-0',
|
|
width: '50px',
|
|
},
|
|
],
|
|
}),
|
|
computed: {
|
|
...mapState([
|
|
'myCatalogs',
|
|
'loadingMyCatalogs',
|
|
'publicCatalogs',
|
|
'loadingPublicCatalogs',
|
|
'selectedCatalog',
|
|
]),
|
|
},
|
|
methods: {
|
|
...mapActions([
|
|
'setSelectedCatalog',
|
|
'loadMyCatalogs',
|
|
'loadPublicCatalogs',
|
|
]),
|
|
selectCatalog(cat) {
|
|
this.setSelectedCatalog(cat.id)
|
|
},
|
|
},
|
|
mounted: function() {
|
|
this.loadMyCatalogs()
|
|
this.loadPublicCatalogs()
|
|
this.interval = setInterval(() => {
|
|
this.loadMyCatalogs()
|
|
this.loadPublicCatalogs()
|
|
}, 10000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scroll-area {
|
|
height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.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>
|