Replaces cards with tables in Collection and Items list. Adds vue-material-icons.
This commit is contained in:
mateuswetah
parent
4901c542c8
commit
e8b649facf
|
|
@ -154,6 +154,7 @@
|
|||
"version": "7.2.5",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.5.tgz",
|
||||
"integrity": "sha512-XqHfo8Ht0VU+T5P+eWEVoXza456KJ4l62BPewu3vpNf3LP9s2+zYXkXBznzYby4XeECXgG3N4i+hGvOhXErZmA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"browserslist": "2.11.3",
|
||||
"caniuse-lite": "1.0.30000792",
|
||||
|
|
@ -167,6 +168,7 @@
|
|||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
|
||||
"integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "1.9.1"
|
||||
}
|
||||
|
|
@ -175,6 +177,7 @@
|
|||
"version": "2.11.3",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
|
||||
"integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"caniuse-lite": "1.0.30000792",
|
||||
"electron-to-chromium": "1.3.31"
|
||||
|
|
@ -184,6 +187,7 @@
|
|||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
|
||||
"integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "3.2.0",
|
||||
"escape-string-regexp": "1.0.5",
|
||||
|
|
@ -194,6 +198,7 @@
|
|||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
|
||||
"integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "2.0.0"
|
||||
}
|
||||
|
|
@ -203,17 +208,20 @@
|
|||
"electron-to-chromium": {
|
||||
"version": "1.3.31",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz",
|
||||
"integrity": "sha512-XE4CLbswkZgZFn34cKFy1xaX+F5LHxeDLjY1+rsK9asDzknhbrd9g/n/01/acbU25KTsUSiLKwvlLyA+6XLUOA=="
|
||||
"integrity": "sha512-XE4CLbswkZgZFn34cKFy1xaX+F5LHxeDLjY1+rsK9asDzknhbrd9g/n/01/acbU25KTsUSiLKwvlLyA+6XLUOA==",
|
||||
"dev": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
|
||||
"integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
|
||||
"integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "6.0.16",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.16.tgz",
|
||||
"integrity": "sha512-m758RWPmSjFH/2MyyG3UOW1fgYbR9rtdzz5UNJnlm7OLtu4B2h9C6gi+bE4qFKghsBRFfZT8NzoQBs6JhLotoA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "2.3.0",
|
||||
"source-map": "0.6.1",
|
||||
|
|
@ -223,12 +231,14 @@
|
|||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.1.0.tgz",
|
||||
"integrity": "sha512-Ry0AwkoKjDpVKK4sV4h6o3UJmNRbjYm2uXhwfj3J56lMVdvnUNqzQVRztOOMGQ++w1K/TjNDFvpJk0F/LoeBCQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "2.0.0"
|
||||
}
|
||||
|
|
@ -1225,7 +1235,8 @@
|
|||
"caniuse-lite": {
|
||||
"version": "1.0.30000792",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000792.tgz",
|
||||
"integrity": "sha1-0M6pgfgRjzlhRxr7tDyaHlu/AzI="
|
||||
"integrity": "sha1-0M6pgfgRjzlhRxr7tDyaHlu/AzI=",
|
||||
"dev": true
|
||||
},
|
||||
"center-align": {
|
||||
"version": "0.1.3",
|
||||
|
|
@ -1351,6 +1362,7 @@
|
|||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
|
||||
"integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
|
|
@ -1358,7 +1370,8 @@
|
|||
"color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
},
|
||||
"color-string": {
|
||||
"version": "0.3.0",
|
||||
|
|
@ -1954,7 +1967,8 @@
|
|||
"escape-string-regexp": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
|
||||
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
|
||||
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
|
||||
"dev": true
|
||||
},
|
||||
"esprima": {
|
||||
"version": "2.7.3",
|
||||
|
|
@ -4004,7 +4018,8 @@
|
|||
"normalize-range": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
||||
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
|
||||
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
|
||||
"dev": true
|
||||
},
|
||||
"normalize-url": {
|
||||
"version": "1.9.1",
|
||||
|
|
@ -4021,7 +4036,8 @@
|
|||
"num2fraction": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
|
||||
"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4="
|
||||
"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
|
||||
"dev": true
|
||||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
|
|
@ -4953,7 +4969,8 @@
|
|||
"postcss-value-parser": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
|
||||
"integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
|
||||
"integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
|
||||
"dev": true
|
||||
},
|
||||
"postcss-zindex": {
|
||||
"version": "2.2.0",
|
||||
|
|
@ -6056,6 +6073,11 @@
|
|||
"vue-template-es2015-compiler": "1.6.0"
|
||||
}
|
||||
},
|
||||
"vue-material-design-icons": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-1.0.0.tgz",
|
||||
"integrity": "sha512-Do4M+l6l9+Wf1MQCWcAeNvSSYpynxddtqMRnhCRLFys58OU3z34AI7aYrhEo1SpvHc1KHcgQq1x4K7LCZfYSYw=="
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"bootstrap": "^3.3.7",
|
||||
"element-ui": "^2.0.11",
|
||||
"vue": "^2.0.1",
|
||||
"vue-material-design-icons": "^1.0.0",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -3,12 +3,9 @@
|
|||
<el-container>
|
||||
<el-header>
|
||||
<router-link to="/">Home</router-link>
|
||||
Header
|
||||
<router-link to="/collections">Coleções</router-link>
|
||||
</el-header>
|
||||
<el-container>
|
||||
<el-aside width="200px">
|
||||
<router-link to="/collections">Coleções</router-link>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<router-view></router-view>
|
||||
</el-main>
|
||||
|
|
@ -19,7 +16,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: "admin",
|
||||
name: "AdminPage",
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,42 +1,57 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="8" v-for="(collection, index) in collections" :key="collection.id" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="http://lorempixel.com/200/200" class="image" :alt="collection.name">
|
||||
<div style="padding: 14px;">
|
||||
<span>{{ collection.name }}</span>
|
||||
<div class="bottom clearfix">
|
||||
<time class="time">{{collection.description}}</time>
|
||||
<router-link :to="`/collections/${collection.id}`">
|
||||
<el-button type="text">
|
||||
Ver Coleção
|
||||
</el-button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="collections"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
<el-table-column label="Nome" show-overflow-tooltip>
|
||||
<template slot-scope="scope"><router-link :to="`/collections/${scope.row.id}`" tag="a">{{ scope.row.name }}</router-link></template>
|
||||
</el-table-column>
|
||||
<el-table-column property="description" label="Descrição" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="Ações" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="small" type="text" @click.native="shareCollection(scope.row.id)"><share-variant-icon></share-variant-icon></el-button>
|
||||
<el-button size="small" type="text" @click.native="showMoreCollection(scope.row.id)"><dots-horizontal-icon></dots-horizontal-icon></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import ShareVariantIcon from "vue-material-design-icons/share-variant.vue"
|
||||
import DotsHorizontalIcon from "vue-material-design-icons/dots-horizontal.vue"
|
||||
|
||||
export default {
|
||||
name: 'CollectionsList',
|
||||
data(){
|
||||
return {
|
||||
multipleSelection: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ShareVariantIcon,
|
||||
DotsHorizontalIcon
|
||||
},
|
||||
methods: {
|
||||
...mapActions('collection', [
|
||||
'fetchCollections'
|
||||
]),
|
||||
...mapGetters('collection', [
|
||||
'getCollections'
|
||||
])
|
||||
]),
|
||||
handleSelectionChange(value) {
|
||||
this.multipleSelection = value;
|
||||
},
|
||||
shareCollection(collectionId) {
|
||||
|
||||
},
|
||||
showMoreCollection(collectionId) {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
collections(){
|
||||
|
|
@ -52,34 +67,6 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +1,60 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="8" v-for="(item, index) in itens" :key="item.id" :offset="index > 0 ? 2 : 0">
|
||||
<el-card :body-style="{ padding: '0px' }">
|
||||
<img src="" class="image" :alt="item.name">
|
||||
<div style="padding: 14px;">
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="itens"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55">
|
||||
</el-table-column>
|
||||
<el-table-column label="Nome" show-overflow-tooltip>
|
||||
<template slot-scope="scope"><router-link :to="`/itens/${scope.row.id}`" tag="a">{{ scope.row.name }}</router-link></template>
|
||||
</el-table-column>
|
||||
<el-table-column property="description" label="Descrição" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="Ações" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="small" type="text" @click.native="shareItem(scope.row.id)"><share-variant-icon></share-variant-icon></el-button>
|
||||
<el-button size="small" type="text" @click.native="showMoreItem(scope.row.id)"><dots-horizontal-icon></dots-horizontal-icon></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import ShareVariantIcon from "vue-material-design-icons/share-variant.vue"
|
||||
import DotsHorizontalIcon from "vue-material-design-icons/dots-horizontal.vue"
|
||||
|
||||
export default {
|
||||
name: 'ItensList',
|
||||
data(){
|
||||
return {
|
||||
multipleSelection: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ShareVariantIcon,
|
||||
DotsHorizontalIcon
|
||||
},
|
||||
methods: {
|
||||
...mapActions('item', [
|
||||
'fetchItens'
|
||||
]),
|
||||
...mapGetters('item', [
|
||||
'getItens'
|
||||
])
|
||||
]),
|
||||
handleSelectionChange(value) {
|
||||
this.multipleSelection = value;
|
||||
},
|
||||
shareItem(itemId) {
|
||||
|
||||
},
|
||||
showMoreItem(itemId) {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
collections(){
|
||||
itens(){
|
||||
return this.getItens();
|
||||
}
|
||||
},
|
||||
|
|
@ -44,35 +67,6 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
|
||||
.time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
import Admin from '../admin.vue'
|
||||
import AdminPage from '../admin.vue'
|
||||
import CollectionsList from '../components/collections-list.vue'
|
||||
import CollectionPage from '../components/collection-page.vue'
|
||||
import ItensList from '../components/itens-list.vue'
|
||||
import CollectionPage from '../pages/collection-page.vue'
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<div class="bottom clearfix">
|
||||
<time class="time">{{collection.description}}</time>
|
||||
<el-button type="text" >Lista de Itens</el-button>
|
||||
<el-button @click.native="createItem()">Criar Item</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -32,7 +33,10 @@ export default {
|
|||
]),
|
||||
...mapGetters('collection', [
|
||||
'getCollection'
|
||||
])
|
||||
]),
|
||||
createItem() {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
collection(){
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue