Merge branch 'bulma-admin-interface' into develop
This commit is contained in:
commit
be2c280707
|
@ -217,6 +217,7 @@
|
||||||
"version": "1.8.2",
|
"version": "1.8.2",
|
||||||
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.2.tgz",
|
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.2.tgz",
|
||||||
"integrity": "sha1-t3WXIm6WJC+NUxwNRq4pX2JCK6Q=",
|
"integrity": "sha1-t3WXIm6WJC+NUxwNRq4pX2JCK6Q=",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"babel-runtime": "6.26.0"
|
"babel-runtime": "6.26.0"
|
||||||
}
|
}
|
||||||
|
@ -538,7 +539,8 @@
|
||||||
"babel-helper-vue-jsx-merge-props": {
|
"babel-helper-vue-jsx-merge-props": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
|
||||||
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
|
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"babel-helpers": {
|
"babel-helpers": {
|
||||||
"version": "6.24.1",
|
"version": "6.24.1",
|
||||||
|
@ -1093,6 +1095,7 @@
|
||||||
"version": "6.26.0",
|
"version": "6.26.0",
|
||||||
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
|
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
|
||||||
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
|
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"core-js": "2.5.1",
|
"core-js": "2.5.1",
|
||||||
"regenerator-runtime": "0.11.0"
|
"regenerator-runtime": "0.11.0"
|
||||||
|
@ -1350,6 +1353,14 @@
|
||||||
"electron-to-chromium": "1.3.27"
|
"electron-to-chromium": "1.3.27"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"buefy": {
|
||||||
|
"version": "0.6.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/buefy/-/buefy-0.6.3.tgz",
|
||||||
|
"integrity": "sha512-ApYZo6USz1SjHyziSaZc2osxWYUkCLwfgzVDo7hTtFvqBAjin1xfzoHd7yb/7BTLqAZYwJuHqe44SnLhrU+9fg==",
|
||||||
|
"requires": {
|
||||||
|
"bulma": "0.6.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"buffer": {
|
"buffer": {
|
||||||
"version": "4.9.1",
|
"version": "4.9.1",
|
||||||
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
|
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
|
||||||
|
@ -1385,6 +1396,11 @@
|
||||||
"integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
|
"integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"bulma": {
|
||||||
|
"version": "0.6.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.6.2.tgz",
|
||||||
|
"integrity": "sha1-9LHRHVrMUaeWROsKKwsQZJ09cfU="
|
||||||
|
},
|
||||||
"bytes": {
|
"bytes": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
|
||||||
|
@ -1832,7 +1848,8 @@
|
||||||
"core-js": {
|
"core-js": {
|
||||||
"version": "2.5.1",
|
"version": "2.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.1.tgz",
|
||||||
"integrity": "sha1-rmh03GaTd4m4B1T/VCjfZoGcpQs="
|
"integrity": "sha1-rmh03GaTd4m4B1T/VCjfZoGcpQs=",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"core-util-is": {
|
"core-util-is": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
|
@ -2121,7 +2138,8 @@
|
||||||
"deepmerge": {
|
"deepmerge": {
|
||||||
"version": "1.5.2",
|
"version": "1.5.2",
|
||||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz",
|
||||||
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
|
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"define-properties": {
|
"define-properties": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
|
@ -2284,6 +2302,7 @@
|
||||||
"version": "2.0.11",
|
"version": "2.0.11",
|
||||||
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.0.11.tgz",
|
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.0.11.tgz",
|
||||||
"integrity": "sha512-jrBIuoHTx07RmgrdpkPQTj9KCFP+BNewUaVB2kkbH+MSGdurzXw8MPzH+o/RZCGIh+ODNfLa71h5veYKJysIpA==",
|
"integrity": "sha512-jrBIuoHTx07RmgrdpkPQTj9KCFP+BNewUaVB2kkbH+MSGdurzXw8MPzH+o/RZCGIh+ODNfLa71h5veYKJysIpA==",
|
||||||
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"async-validator": "1.8.2",
|
"async-validator": "1.8.2",
|
||||||
"babel-helper-vue-jsx-merge-props": "2.0.3",
|
"babel-helper-vue-jsx-merge-props": "2.0.3",
|
||||||
|
@ -4785,11 +4804,6 @@
|
||||||
"object-visit": "1.0.1"
|
"object-visit": "1.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"material-design-icons": {
|
|
||||||
"version": "3.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
|
|
||||||
"integrity": "sha1-mnHEh0chjrylHlGmbaaCA4zct78="
|
|
||||||
},
|
|
||||||
"math-expression-evaluator": {
|
"math-expression-evaluator": {
|
||||||
"version": "1.2.17",
|
"version": "1.2.17",
|
||||||
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
|
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
|
||||||
|
@ -4818,6 +4832,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"mdi": {
|
||||||
|
"version": "2.1.19",
|
||||||
|
"resolved": "https://registry.npmjs.org/mdi/-/mdi-2.1.19.tgz",
|
||||||
|
"integrity": "sha512-WErwab4jq/jcCeo4aecQ5UH1WXu2Eto5Rdb0AiBFcUw8CHmF/UeV+hf9wKyH17X+c3Z+jaS3jDKW7fu0R0HmWQ=="
|
||||||
|
},
|
||||||
"media-typer": {
|
"media-typer": {
|
||||||
"version": "0.3.0",
|
"version": "0.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||||
|
@ -6630,7 +6649,8 @@
|
||||||
"regenerator-runtime": {
|
"regenerator-runtime": {
|
||||||
"version": "0.11.0",
|
"version": "0.11.0",
|
||||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz",
|
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz",
|
||||||
"integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A=="
|
"integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A==",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"regenerator-transform": {
|
"regenerator-transform": {
|
||||||
"version": "0.10.1",
|
"version": "0.10.1",
|
||||||
|
@ -7504,7 +7524,8 @@
|
||||||
"throttle-debounce": {
|
"throttle-debounce": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.0.1.tgz",
|
||||||
"integrity": "sha1-2tD+Ew+drzcZ/eoz3Dao5rp/MLU="
|
"integrity": "sha1-2tD+Ew+drzcZ/eoz3Dao5rp/MLU=",
|
||||||
|
"dev": true
|
||||||
},
|
},
|
||||||
"thunky": {
|
"thunky": {
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
|
|
|
@ -9,8 +9,9 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.17.1",
|
"axios": "^0.17.1",
|
||||||
"element-ui": "^2.0.11",
|
"buefy": "^0.6.3",
|
||||||
"material-design-icons": "^3.0.1",
|
"bulma": "^0.6.2",
|
||||||
|
"mdi": "^2.1.19",
|
||||||
"vue": "^2.5.13",
|
"vue": "^2.5.13",
|
||||||
"vuex": "^3.0.1"
|
"vuex": "^3.0.1"
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="tainacan-admin-app">
|
<div id="tainacan-admin-app">
|
||||||
<el-container>
|
<nav class="navbar is-transparent">
|
||||||
<el-header>
|
<div id="navbarExampleTransparentExample" class="navbar-menu">
|
||||||
<router-link to="/">Home</router-link>
|
<div class="navbar-start">
|
||||||
<router-link to="/collections">Coleções</router-link>
|
<router-link class="navbar-item" to="/">Home</router-link>
|
||||||
</el-header>
|
<router-link class="navbar-item" to="/collections">Coleções</router-link>
|
||||||
<el-container>
|
</div>
|
||||||
<el-main>
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="container">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</el-main>
|
</div>
|
||||||
</el-container>
|
|
||||||
</el-container>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -19,35 +19,3 @@
|
||||||
name: "AdminPage"
|
name: "AdminPage"
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.el-header, .el-footer {
|
|
||||||
background-color: #B3C0D1;
|
|
||||||
color: #333;
|
|
||||||
line-height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-aside {
|
|
||||||
background-color: #D3DCE6;
|
|
||||||
color: #333;
|
|
||||||
line-height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-main {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > .el-container {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-container:nth-child(5) .el-aside,
|
|
||||||
.el-container:nth-child(6) .el-aside {
|
|
||||||
line-height: 260px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-container:nth-child(7) .el-aside {
|
|
||||||
line-height: 320px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
|
@ -1,30 +1,45 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-table
|
<router-link tag="button" class="button is-primary"
|
||||||
|
:to="{ path: `/collections/new` }">
|
||||||
|
Criar Coleção
|
||||||
|
</router-link>
|
||||||
|
<b-table
|
||||||
ref="multipleTable"
|
ref="multipleTable"
|
||||||
:data="collections"
|
:data="collections"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
@selection-change="handleSelectionChange"
|
@selection-change="handleSelectionChange"
|
||||||
stripe>
|
stripe>
|
||||||
<el-table-column type="selection" width="55">
|
<template slot-scope="props">
|
||||||
</el-table-column>
|
|
||||||
<el-table-column width="55">
|
<b-table-column field="featured_image" width="55">
|
||||||
<template v-if="scope.row.featured_image" slot-scope="scope">
|
<template v-if="props.row.featured_image" slot-scope="scope">
|
||||||
<img class="table-thumb" :src="`${scope.row.featured_image}`"/>
|
<img class="table-thumb" :src="`${props.row.featured_image}`"/>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</b-table-column>
|
||||||
<el-table-column label="Nome" sortable prop="{{ scope.row.name }}" show-overflow-tooltip>
|
|
||||||
<template slot-scope="scope"><router-link :to="`/collections/${scope.row.id}`" tag="a">{{ scope.row.name }}</router-link></template>
|
<b-table-column label="Nome" field="props.row.name" sortable show-overflow-tooltip>
|
||||||
</el-table-column>
|
<router-link :to="`/collections/${props.row.id}`" tag="a">{{ props.row.name }}</router-link>
|
||||||
<el-table-column property="description" label="Descrição" show-overflow-tooltip>
|
</b-table-column>
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="Ações" width="120">
|
<b-table-column property="description" label="Descrição" field="props.row.description">
|
||||||
<template slot-scope="scope">
|
{{ props.row.description }}
|
||||||
<el-button size="small" type="text" @click.native="shareCollection(scope.row.id)"><i class="material-icons md-18">share</i></el-button>
|
</b-table-column>
|
||||||
<el-button size="small" type="text" @click.native="showMoreCollection(scope.row.id)"><i class="material-icons md-18">more_vert</i></el-button>
|
|
||||||
|
|
||||||
|
<b-table-column label="Ações">
|
||||||
|
<router-link :to="`/collections/${props.row.id}/edit`" tag="a"><b-icon icon="pencil"></router-link>
|
||||||
|
<a @click.native="showMoreCollection(props.row.id)">
|
||||||
|
<b-icon icon="dots-vertical">
|
||||||
|
</a>
|
||||||
|
</b-table-column>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
<!--b-table-column type="selection" width="55">
|
||||||
|
</b-table-column -->
|
||||||
|
|
||||||
|
</b-table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -47,9 +62,6 @@ export default {
|
||||||
]),
|
]),
|
||||||
handleSelectionChange(value) {
|
handleSelectionChange(value) {
|
||||||
this.multipleSelection = value;
|
this.multipleSelection = value;
|
||||||
},
|
|
||||||
shareCollection(collectionId) {
|
|
||||||
|
|
||||||
},
|
},
|
||||||
showMoreCollection(collectionId) {
|
showMoreCollection(collectionId) {
|
||||||
|
|
||||||
|
|
|
@ -1,29 +1,43 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-table
|
<b-table
|
||||||
ref="multipleTable"
|
ref="multipleTable"
|
||||||
:data="items"
|
:data="items"
|
||||||
style="width: 100%"
|
@selection-change="handleSelectionChange"
|
||||||
@selection-change="handleSelectionChange">
|
stripe>
|
||||||
<el-table-column type="selection" width="55">
|
<template slot-scope="props">
|
||||||
</el-table-column>
|
|
||||||
<el-table-column width="55">
|
<b-table-column field="featured_image" width="55">
|
||||||
<template v-if="scope.row.featured_image" slot-scope="scope">
|
<template v-if="props.row.featured_image" slot-scope="scope">
|
||||||
<img class="table-thumb" :src="`${scope.row.featured_image}`"/>
|
<img class="table-thumb" :src="`${props.row.featured_image}`"/>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</b-table-column>
|
||||||
<el-table-column label="Nome" show-overflow-tooltip>
|
|
||||||
<template slot-scope="scope"><router-link :to="`/collections/${collectionId}/items/${scope.row.id}`" tag="a">{{ scope.row.title }}</router-link></template>
|
|
||||||
</el-table-column>
|
<b-table-column label="Nome" field="title" sortable show-overflow-tooltip>
|
||||||
<el-table-column property="description" label="Descrição" show-overflow-tooltip>
|
<router-link
|
||||||
</el-table-column>
|
:to="`/collections/${collectionId}/items/${props.row.id}`" tag="a">{{ props.row.title }}
|
||||||
<el-table-column label="Ações" width="120">
|
</router-link>
|
||||||
<template slot-scope="scope">
|
</b-table-column>
|
||||||
<el-button size="small" type="text" @click.native="shareItem(scope.row.id)"><i class="material-icons">share</i></el-button>
|
|
||||||
<el-button size="small" type="text" @click.native="showMoreItem(scope.row.id)"><i class="material-icons">more_vert</i></el-button>
|
<b-table-column field="description" label="Descrição">
|
||||||
|
{{ props.row.description }}
|
||||||
|
</b-table-column>
|
||||||
|
|
||||||
|
|
||||||
|
<b-table-column label="Ações">
|
||||||
|
<router-link :to="`/collections/${collectionId}/items/${props.row.id}/edit`" tag="a"><b-icon icon="pencil"></router-link>
|
||||||
|
<a @click.native="showMoreItem(props.row.id)">
|
||||||
|
<b-icon icon="dots-vertical">
|
||||||
|
</a>
|
||||||
|
</b-table-column>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
<!--b-table-column type="selection" width="55">
|
||||||
|
</b-table-column -->
|
||||||
|
|
||||||
|
</b-table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
import Buefy from 'buefy'
|
||||||
|
|
||||||
import ElementUI from 'element-ui'
|
Vue.use(Buefy);
|
||||||
|
|
||||||
import AdminPage from '../admin.vue'
|
import AdminPage from '../admin.vue'
|
||||||
//import { eventBus } from '../../js/event-bus-web-components'
|
//import { eventBus } from '../../js/event-bus-web-components'
|
||||||
|
@ -43,8 +44,6 @@ Vue.component('tainacan-form-item', TaincanFormItem);
|
||||||
|
|
||||||
//------------------------------------------------
|
//------------------------------------------------
|
||||||
|
|
||||||
Vue.use(ElementUI);
|
|
||||||
|
|
||||||
// eventBus.listener();
|
// eventBus.listener();
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
|
|
|
@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
|
||||||
|
|
||||||
import AdminPage from '../admin.vue'
|
import AdminPage from '../admin.vue'
|
||||||
import CollectionPage from '../pages/collection-page.vue'
|
import CollectionPage from '../pages/collection-page.vue'
|
||||||
|
import CollectionEditionPage from '../pages/collection-edition-page.vue'
|
||||||
import ItemPage from '../pages/item-page.vue'
|
import ItemPage from '../pages/item-page.vue'
|
||||||
import ItemEditionPage from '../pages/item-edition-page.vue'
|
import ItemEditionPage from '../pages/item-edition-page.vue'
|
||||||
|
|
||||||
|
@ -14,13 +15,12 @@ Vue.use(VueRouter);
|
||||||
const routes = [
|
const routes = [
|
||||||
{ path: '/', component: CollectionsList, meta: {title: 'Admin Page'} },
|
{ path: '/', component: CollectionsList, meta: {title: 'Admin Page'} },
|
||||||
{ path: '/collections', component: CollectionsList, meta: {title: 'Collections List'} },
|
{ path: '/collections', component: CollectionsList, meta: {title: 'Collections List'} },
|
||||||
{ path: '/collections/:id', component: CollectionPage, children: [
|
{ path: '/collections/new', component: CollectionEditionPage, meta: {title: 'Create Collection'} },
|
||||||
{ path: 'items-list', component: ItemsList, meta: {title: 'Items List'} }
|
{ path: '/collections/:id', component: CollectionPage, meta: {title: 'Collections Page'} },
|
||||||
],
|
{ path: '/collections/:id/edit', component: CollectionEditionPage, meta: {title: 'Edit Collection'} },
|
||||||
meta: { title: 'Collection Page' }
|
|
||||||
},
|
|
||||||
{ path: '/collections/:id/items/new', component: ItemEditionPage, meta: {title: 'Create Item'} },
|
{ path: '/collections/:id/items/new', component: ItemEditionPage, meta: {title: 'Create Item'} },
|
||||||
{ path: '/collections/:collection_id/items/:id/edit', component: ItemEditionPage, meta: {title: 'Edit Item'} },
|
{ path: '/collections/:collection_id/items/:id/edit', component: ItemEditionPage, meta: {title: 'Edit Item'} },
|
||||||
|
{ path: '/collection/:collection_id/items', component: ItemsList, meta: {title: 'Items List'} },
|
||||||
{ path: '/collections/:collection_id/items/:id', component: ItemPage, meta: {title: 'Item Page'} },
|
{ path: '/collections/:collection_id/items/:id', component: ItemPage, meta: {title: 'Item Page'} },
|
||||||
{ path: '*', redirect: '/'}
|
{ path: '*', redirect: '/'}
|
||||||
]
|
]
|
||||||
|
|
|
@ -0,0 +1,186 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1 class="is-size-3">Collection creation <b-tag v-if="collection != null && collection != undefined" :type="'is-' + getStatusColor(collection.status)" v-text="collection.status"></b-tag></h1>
|
||||||
|
<form label-width="120px">
|
||||||
|
<b-field label="Título">
|
||||||
|
<b-input
|
||||||
|
v-model="form.name">
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
<b-field label="Descrição">
|
||||||
|
<b-input
|
||||||
|
type="textarea"
|
||||||
|
v-model="form.description"
|
||||||
|
>
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
<b-field label="Status">
|
||||||
|
<b-select
|
||||||
|
v-model="form.status"
|
||||||
|
placeholder="Selecione um status">
|
||||||
|
<option
|
||||||
|
v-for="statusOption in statusOptions"
|
||||||
|
:key="statusOption.value"
|
||||||
|
:value="statusOption.value"
|
||||||
|
:disabled="statusOption.disabled">{{ statusOption.label }}
|
||||||
|
</option>
|
||||||
|
</b-select>
|
||||||
|
</b-field>
|
||||||
|
<b-field
|
||||||
|
label="Imagem">
|
||||||
|
<b-upload v-model="form.files"
|
||||||
|
multiple
|
||||||
|
drag-drop>
|
||||||
|
<section class="section">
|
||||||
|
<div class="content has-text-centered">
|
||||||
|
<p>
|
||||||
|
<b-icon
|
||||||
|
icon="upload"
|
||||||
|
size="is-large">
|
||||||
|
</b-icon>
|
||||||
|
</p>
|
||||||
|
<p>Arraste uma imagem aqui <em>ou clique para enviar</em></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</b-upload>
|
||||||
|
</b-field>
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
type="button"
|
||||||
|
@click="cancelBack">Cancelar</button>
|
||||||
|
<a
|
||||||
|
@click="onSubmit"
|
||||||
|
class="button is-success is-hovered">Salvar</a>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<b-loading :active.sync="isLoading" :canCancel="false">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapActions, mapGetters } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CollectionEditionPage',
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
collectionId: Number,
|
||||||
|
collection: null,
|
||||||
|
isLoading: false,
|
||||||
|
form: {
|
||||||
|
name: '',
|
||||||
|
status: '',
|
||||||
|
description: '',
|
||||||
|
files:[]
|
||||||
|
},
|
||||||
|
// Can be obtained from api later
|
||||||
|
statusOptions: [{
|
||||||
|
value: 'publish',
|
||||||
|
label: 'Publicado'
|
||||||
|
}, {
|
||||||
|
value: 'draft',
|
||||||
|
label: 'Rascunho'
|
||||||
|
}, {
|
||||||
|
value: 'private',
|
||||||
|
label: 'Privado'
|
||||||
|
}, {
|
||||||
|
value: 'trash',
|
||||||
|
label: 'Lixo'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions('collection', [
|
||||||
|
'sendCollection',
|
||||||
|
'updateCollection',
|
||||||
|
'fetchCollection'
|
||||||
|
]),
|
||||||
|
...mapGetters('collection',[
|
||||||
|
'getCollection'
|
||||||
|
]),
|
||||||
|
onSubmit() {
|
||||||
|
// Puts loading on Draft Collection creation
|
||||||
|
this.isLoading = true;
|
||||||
|
|
||||||
|
let data = {collection_id: this.collectionId, name: this.form.name, description: this.form.description, status: this.form.status};
|
||||||
|
this.updateCollection(data).then(updatedCollection => {
|
||||||
|
|
||||||
|
this.collection = updatedCollection;
|
||||||
|
|
||||||
|
// Fill this.form data with current data.
|
||||||
|
this.form.name = this.collection.name;
|
||||||
|
this.form.description = this.collection.description;
|
||||||
|
this.form.status = this.collection.status;
|
||||||
|
|
||||||
|
this.isLoading = false;
|
||||||
|
|
||||||
|
this.$router.push('/collections/' + this.collectionId);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getStatusColor(status) {
|
||||||
|
switch(status) {
|
||||||
|
case 'publish':
|
||||||
|
return 'success'
|
||||||
|
case 'draft':
|
||||||
|
return 'info'
|
||||||
|
case 'private':
|
||||||
|
return 'warning'
|
||||||
|
case 'trash':
|
||||||
|
return 'danger'
|
||||||
|
default:
|
||||||
|
return 'info'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
createNewCollection() {
|
||||||
|
// Puts loading on Draft Collection creation
|
||||||
|
this.isLoading = true;
|
||||||
|
|
||||||
|
// Creates draft Collection
|
||||||
|
let data = { title: '', description: '', status: 'draft'};
|
||||||
|
this.sendCollection(data).then(res => {
|
||||||
|
|
||||||
|
this.collectionId = res.id;
|
||||||
|
this.collection = res;
|
||||||
|
|
||||||
|
// Fill this.form data with current data.
|
||||||
|
this.form.name = this.collection.name;
|
||||||
|
this.form.description = this.collection.description;
|
||||||
|
this.form.status = this.collection.status;
|
||||||
|
|
||||||
|
this.isLoading = false;
|
||||||
|
|
||||||
|
})
|
||||||
|
.catch(error => console.log(error));
|
||||||
|
},
|
||||||
|
cancelBack(){
|
||||||
|
this.$router.push('/collections/' + this.collectionId);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
|
||||||
|
if (this.$route.fullPath.split("/").pop() == "new") {
|
||||||
|
this.createNewCollection();
|
||||||
|
} else if (this.$route.fullPath.split("/").pop() == "edit") {
|
||||||
|
|
||||||
|
this.isLoading = true;
|
||||||
|
|
||||||
|
// Obtains current Collection ID from URL
|
||||||
|
this.pathArray = this.$route.fullPath.split("/").reverse();
|
||||||
|
this.collectionId = this.pathArray[1];
|
||||||
|
|
||||||
|
this.fetchCollection(this.collectionId).then(res => {
|
||||||
|
this.collection = res;
|
||||||
|
|
||||||
|
// Fill this.form data with current data.
|
||||||
|
this.form.name = this.collection.name;
|
||||||
|
this.form.description = this.collection.description;
|
||||||
|
this.form.status = this.collection.status;
|
||||||
|
|
||||||
|
this.isLoading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
|
@ -1,21 +1,39 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row v-if="collection != null">
|
<section class="section" v-if="collection != null">
|
||||||
<el-card :body-style="{ padding: '0px' }" class="element-card">
|
<div class="card">
|
||||||
|
<div class="card-image" v-if="collection.featured_image">
|
||||||
|
<figure class="image is-4by3">
|
||||||
<img :src="collection.featured_image" class="image" :alt="collection.name">
|
<img :src="collection.featured_image" class="image" :alt="collection.name">
|
||||||
<div style="padding: 14px;">
|
</figure>
|
||||||
<span>{{ collection.name }}</span>
|
</div>
|
||||||
<div class="bottom clearfix">
|
<div class="card-content">
|
||||||
<time class="time">{{collection.description}}</time>
|
<div class="media">
|
||||||
<router-link tag="el-button" class="primary" :to="{ path: `/collections/${collection.id}/items/new`, params: { collection_id: collection.id }}">Criar Item</router-link>
|
<div class="media-content">
|
||||||
|
<p class="title is-4">{{ collection.name }}</p>
|
||||||
|
<!--p class="subtitle is-6">@johnsmith</p-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
{{collection.description}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="card-footer">
|
||||||
|
<router-link
|
||||||
|
class="card-footer-item"
|
||||||
|
:to="{ path: `/collections/${collection.id}/items/new`, params: { collection_id: collection.id }}">
|
||||||
|
Criar Item
|
||||||
|
</router-link>
|
||||||
|
<router-link
|
||||||
|
class="card-footer-item"
|
||||||
|
:to="{ path: `/collection/${collection.id}/items/`, params: { collection_id: collection.id }}">
|
||||||
|
Ver todos os itens
|
||||||
|
</router-link>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<items-list :collectionId="collectionId"></items-list>
|
<items-list :collectionId="collectionId"></items-list>
|
||||||
<div class="bottom clearfix">
|
</section>
|
||||||
<router-link tag="el-button" :to="{ path: `/collections/${collection.id}/items/`, params: { collection_id: collection.id }}">Ver todos os itens</router-link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -1,42 +1,64 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h2>Item creation</h2><el-tag v-if="item != null && item != undefined" :type="getStatusColor(item.status)" v-text="item.status"></el-tag>
|
<h1 class="is-size-3">Item creation <b-tag v-if="item != null && item != undefined" :type="'is-' + getStatusColor(item.status)" v-text="item.status"></b-tag></h1>
|
||||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
<form label-width="120px">
|
||||||
<el-form-item label="Título" prop="title">
|
<b-field label="Título">
|
||||||
<el-input v-model="form.title"></el-input>
|
<b-input
|
||||||
</el-form-item>
|
v-model="form.title"
|
||||||
<el-form-item label="Descrição">
|
>
|
||||||
<el-input type="textarea" v-model="form.description"></el-input>
|
</b-input>
|
||||||
</el-form-item>
|
</b-field>
|
||||||
<el-form-item label="Status">
|
<b-field label="Descrição">
|
||||||
<el-select v-model="form.status" placeholder="Selecione um status">
|
<b-input
|
||||||
<el-option
|
type="textarea"
|
||||||
|
v-model="form.description"
|
||||||
|
>
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
<b-field label="Status">
|
||||||
|
<b-select
|
||||||
|
v-model="form.status"
|
||||||
|
placeholder="Selecione um status">
|
||||||
|
<option
|
||||||
v-for="statusOption in statusOptions"
|
v-for="statusOption in statusOptions"
|
||||||
:key="statusOption.value"
|
:key="statusOption.value"
|
||||||
:label="statusOption.label"
|
|
||||||
:value="statusOption.value"
|
:value="statusOption.value"
|
||||||
:disabled="statusOption.disabled">
|
:disabled="statusOption.disabled">{{ statusOption.label }}
|
||||||
</el-option>
|
</option>
|
||||||
</el-select>
|
</b-select>
|
||||||
</el-form-item>
|
</b-field>
|
||||||
<el-form-item label="Imagem">
|
<b-field
|
||||||
<el-upload
|
label="Imagem">
|
||||||
class="upload-demo"
|
<b-upload v-model="form.files"
|
||||||
drag
|
multiple
|
||||||
action="https://jsonplaceholder.typicode.com/posts/"
|
drag-drop>
|
||||||
:on-preview="handlePreview"
|
<section class="section">
|
||||||
:on-remove="handleRemove">
|
<div class="content has-text-centered">
|
||||||
<i class="el-icon-upload"></i>
|
<p>
|
||||||
<div class="el-upload__text">Arraste uma imagem aqui <em>ou clique para enviar</em></div>
|
<b-icon
|
||||||
<div class="el-upload__tip" slot="tip">imagens em formato jpg/png</div>
|
icon="upload"
|
||||||
</el-upload>
|
size="is-large">
|
||||||
</el-form-item>
|
</b-icon>
|
||||||
<tainacan-form-item v-for="(field, index) in fieldList" v-bind:key="index" :field="field"></tainacan-form-item>
|
</p>
|
||||||
<el-form-item>
|
<p>Arraste uma imagem aqui <em>ou clique para enviar</em></p>
|
||||||
<el-button type="primary" @click="onSubmit">Salvar</el-button>
|
</div>
|
||||||
<el-button>Cancelar</el-button>
|
</section>
|
||||||
</el-form-item>
|
</b-upload>
|
||||||
</el-form>
|
</b-field>
|
||||||
|
<tainacan-form-item
|
||||||
|
v-for="(field, index) in fieldList"
|
||||||
|
v-bind:key="index"
|
||||||
|
:field="field"></tainacan-form-item>
|
||||||
|
<button
|
||||||
|
class="button"
|
||||||
|
type="button"
|
||||||
|
@click="cancelBack">Cancelar</button>
|
||||||
|
<a
|
||||||
|
@click="onSubmit"
|
||||||
|
class="button is-success is-hovered">Salvar</a>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<b-loading :active.sync="isLoading" :canCancel="false">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -50,11 +72,13 @@ export default {
|
||||||
itemId: Number,
|
itemId: Number,
|
||||||
item: null,
|
item: null,
|
||||||
collectionId: Number,
|
collectionId: Number,
|
||||||
|
isLoading: false,
|
||||||
form: {
|
form: {
|
||||||
collectionId: Number,
|
collectionId: Number,
|
||||||
title: '',
|
title: '',
|
||||||
status: '',
|
status: '',
|
||||||
description: ''
|
description: '',
|
||||||
|
files:[]
|
||||||
},
|
},
|
||||||
// Can be obtained from api later
|
// Can be obtained from api later
|
||||||
statusOptions: [{
|
statusOptions: [{
|
||||||
|
@ -69,12 +93,7 @@ export default {
|
||||||
}, {
|
}, {
|
||||||
value: 'trash',
|
value: 'trash',
|
||||||
label: 'Lixo'
|
label: 'Lixo'
|
||||||
}],
|
}]
|
||||||
rules: {
|
|
||||||
title: [
|
|
||||||
{ required: true, message: 'Please input Activity name', trigger: 'blur' }
|
|
||||||
],
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -83,7 +102,8 @@ export default {
|
||||||
'updateItem',
|
'updateItem',
|
||||||
'fetchFields',
|
'fetchFields',
|
||||||
'sendField',
|
'sendField',
|
||||||
'fetchItem'
|
'fetchItem',
|
||||||
|
'cleanFields'
|
||||||
]),
|
]),
|
||||||
...mapGetters('item',[
|
...mapGetters('item',[
|
||||||
'getFields',
|
'getFields',
|
||||||
|
@ -91,7 +111,7 @@ export default {
|
||||||
]),
|
]),
|
||||||
onSubmit() {
|
onSubmit() {
|
||||||
// Puts loading on Draft Item creation
|
// Puts loading on Draft Item creation
|
||||||
let loadingInstance = this.$loading({ text: 'Salvando item ...' });
|
this.isLoading = true;
|
||||||
|
|
||||||
let data = {item_id: this.itemId, title: this.form.title, description: this.form.description, status: this.form.status};
|
let data = {item_id: this.itemId, title: this.form.title, description: this.form.description, status: this.form.status};
|
||||||
this.updateItem(data).then(updatedItem => {
|
this.updateItem(data).then(updatedItem => {
|
||||||
|
@ -103,7 +123,9 @@ export default {
|
||||||
this.form.description = this.item.description;
|
this.form.description = this.item.description;
|
||||||
this.form.status = this.item.status;
|
this.form.status = this.item.status;
|
||||||
|
|
||||||
loadingInstance.close();
|
this.isLoading = false;
|
||||||
|
|
||||||
|
this.$router.push('/collections/' + this.form.collectionId + '/items/' + this.itemId);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getStatusColor(status) {
|
getStatusColor(status) {
|
||||||
|
@ -122,7 +144,7 @@ export default {
|
||||||
},
|
},
|
||||||
createNewItem() {
|
createNewItem() {
|
||||||
// Puts loading on Draft Item creation
|
// Puts loading on Draft Item creation
|
||||||
let loadingInstance = this.$loading({ text: 'Criando item rascunho...' });
|
this.isLoading = true;
|
||||||
|
|
||||||
// Creates draft Item
|
// Creates draft Item
|
||||||
let data = {collection_id: this.form.collectionId, title: '', description: '', status: 'draft'};
|
let data = {collection_id: this.form.collectionId, title: '', description: '', status: 'draft'};
|
||||||
|
@ -136,17 +158,19 @@ export default {
|
||||||
this.form.description = this.item.description;
|
this.form.description = this.item.description;
|
||||||
this.form.status = this.item.status;
|
this.form.status = this.item.status;
|
||||||
|
|
||||||
this.loadMetadata(loadingInstance);
|
this.loadMetadata();
|
||||||
|
|
||||||
})
|
})
|
||||||
.catch(error => console.log(error));
|
.catch(error => console.log(error));
|
||||||
},
|
},
|
||||||
loadMetadata(loadingInstance) {
|
loadMetadata() {
|
||||||
loadingInstance = this.$loading({ text: 'Carregando metadados...'});
|
|
||||||
// Obtains Item Field
|
// Obtains Item Field
|
||||||
this.fetchFields(this.itemId).then(res => {
|
this.fetchFields(this.itemId).then(res => {
|
||||||
loadingInstance.close();
|
this.isLoading = false;
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
cancelBack(){
|
||||||
|
this.$router.push('/collections/' + this.collectionId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -156,14 +180,15 @@ export default {
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
// Obtains collection ID
|
// Obtains collection ID
|
||||||
this.collectionId = this.$route.params.id;
|
this.cleanFields();
|
||||||
|
this.collectionId = ( this.$route.params.collection_id ) ? this.$route.params.collection_id : this.$route.params.id;
|
||||||
this.form.collectionId = this.collectionId;
|
this.form.collectionId = this.collectionId;
|
||||||
|
|
||||||
if (this.$route.fullPath.split("/").pop() == "new") {
|
if (this.$route.fullPath.split("/").pop() == "new") {
|
||||||
this.createNewItem();
|
this.createNewItem();
|
||||||
} else if (this.$route.fullPath.split("/").pop() == "edit") {
|
} else if (this.$route.fullPath.split("/").pop() == "edit") {
|
||||||
|
|
||||||
let loadingInstance = this.$loading({ text: 'Carregando item...'});
|
this.isLoading = true;
|
||||||
|
|
||||||
// Obtains current Item ID from URL
|
// Obtains current Item ID from URL
|
||||||
this.pathArray = this.$route.fullPath.split("/").reverse();
|
this.pathArray = this.$route.fullPath.split("/").reverse();
|
||||||
|
@ -177,7 +202,7 @@ export default {
|
||||||
this.form.description = this.item.description;
|
this.form.description = this.item.description;
|
||||||
this.form.status = this.item.status;
|
this.form.status = this.item.status;
|
||||||
|
|
||||||
loadingInstance.close();
|
this.loadMetadata();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,17 +1,33 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row v-if="item != null">
|
<b-loading :active.sync="isLoading" :canCancel="false">
|
||||||
<el-card :body-style="{ padding: '0px' }">
|
|
||||||
<img src="" class="image" :alt="item.title">
|
</b-loading>
|
||||||
<div style="padding: 14px;">
|
<div class="card">
|
||||||
<span>{{ item.title }}</span>
|
<div class="card-image" v-if="item.featured_image">
|
||||||
<div class="bottom clearfix">
|
<figure class="image is-4by3">
|
||||||
<time class="time">{{item.description}}</time>
|
<img :src="item.featured_image" class="image" :alt="item.title">
|
||||||
<router-link tag="el-button" class="primary" :to="{ path: `/collections/${collectionId}/items/${itemId}/edit`}">Editar Item</router-link>
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="media">
|
||||||
|
<div class="media-content">
|
||||||
|
<p class="title is-4">{{ item.title }}</p>
|
||||||
|
<!--p class="subtitle is-6">@johnsmith</p-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
|
||||||
</el-row>
|
<div class="content">
|
||||||
|
{{item.description}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="card-footer">
|
||||||
|
<router-link
|
||||||
|
class="card-footer-item" :to="{ path: `/collections/${collectionId}/items/${itemId}/edit`}">
|
||||||
|
Editar Item
|
||||||
|
</router-link>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -23,7 +39,8 @@ export default {
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
collectionId: Number,
|
collectionId: Number,
|
||||||
itemId: Number
|
itemId: Number,
|
||||||
|
isLoading: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -45,11 +62,12 @@ export default {
|
||||||
this.itemId = this.$route.fullPath.split("/").pop();
|
this.itemId = this.$route.fullPath.split("/").pop();
|
||||||
|
|
||||||
// Puts loading on Item Loading
|
// Puts loading on Item Loading
|
||||||
let loadingInstance = this.$loading({ text: 'Carregando item...' });
|
this.isLoading = true;
|
||||||
|
let loadingInstance = this;
|
||||||
|
|
||||||
// Obtains Item
|
// Obtains Item
|
||||||
this.fetchItem(this.itemId).then(res => {
|
this.fetchItem(this.itemId).then(res => {
|
||||||
loadingInstance.close();
|
loadingInstance.isLoading = false;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,20 +1,34 @@
|
||||||
/* theme color */
|
// Import Bulma's core
|
||||||
$--color-primary:#25a189;
|
@import "../../../node_modules/bulma/sass/utilities/_all";
|
||||||
$--color-secondary: #01295c;
|
|
||||||
|
|
||||||
/* icon font path, required */
|
// Tainacan custom colors
|
||||||
//$--font-path: '../../assets/css/fonts/material-icons.css';
|
$primary: #25a189;
|
||||||
|
$primary-invert: findColorInvert($primary);
|
||||||
|
$secondary: #01295c;
|
||||||
|
$secondary-invert: findColorInvert($primary);
|
||||||
|
|
||||||
.el-select-dropdown, .el-popper {
|
// Setup $colors to use as bulma classes
|
||||||
z-index: 9999999 !important;
|
$colors: (
|
||||||
}
|
"white": ($white, $black),
|
||||||
|
"black": ($black, $white),
|
||||||
|
"light": ($light, $light-invert),
|
||||||
|
"dark": ($dark, $dark-invert),
|
||||||
|
"primary": ($primary, $primary-invert),
|
||||||
|
"info": ($info, $info-invert),
|
||||||
|
"success": ($success, $success-invert),
|
||||||
|
"warning": ($warning, $warning-invert),
|
||||||
|
"danger": ($danger, $danger-invert)
|
||||||
|
);
|
||||||
|
|
||||||
.el-loading-mask{
|
// Links
|
||||||
z-index: 99999999 !important;
|
$link: $primary;
|
||||||
}
|
$link-invert: $primary-invert;
|
||||||
|
$link-focus-border: $primary;
|
||||||
|
|
||||||
@import "../../assets/css/fonts/material-icons.css";
|
// Import Bulma and Buefy styles
|
||||||
@import "../../../node_modules/element-ui/packages/theme-chalk/src/index";
|
@import "../../assets/css/fonts/materialdesignicons.css";
|
||||||
|
@import "../../../node_modules/bulma/bulma";
|
||||||
|
@import "../../../node_modules/buefy/src/scss/buefy";
|
||||||
|
|
||||||
body.tainacan-admin-page #adminmenumain {
|
body.tainacan-admin-page #adminmenumain {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -190,7 +190,7 @@ class TAINACAN_REST_Item_Metadata_Controller extends TAINACAN_REST_Controller {
|
||||||
$field = $this->field_repository->fetch( $field_id );
|
$field = $this->field_repository->fetch( $field_id );
|
||||||
|
|
||||||
$item_metadata = new Entities\Item_Metadata_Entity( $item, $field );
|
$item_metadata = new Entities\Item_Metadata_Entity( $item, $field );
|
||||||
$item_metadata->set_value( $value );
|
$item_metadata->set_value( ( is_array($value) ) ? array_filter($value) : $value );
|
||||||
|
|
||||||
if ( $item_metadata->validate() ) {
|
if ( $item_metadata->validate() ) {
|
||||||
$field_updated = $this->item_metadata_repository->update( $item_metadata );
|
$field_updated = $this->item_metadata_repository->update( $item_metadata );
|
||||||
|
|
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Before Width: | Height: | Size: 275 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -1,36 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: 'Material Icons';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
|
|
||||||
src: local('Material Icons'),
|
|
||||||
local('MaterialIcons-Regular'),
|
|
||||||
url(MaterialIcons-Regular.woff2) format('woff2'),
|
|
||||||
url(MaterialIcons-Regular.woff) format('woff'),
|
|
||||||
url(MaterialIcons-Regular.ttf) format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-icons {
|
|
||||||
font-family: 'Material Icons';
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 24px; /* Preferred icon size */
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 1;
|
|
||||||
text-transform: none;
|
|
||||||
letter-spacing: normal;
|
|
||||||
word-wrap: normal;
|
|
||||||
white-space: nowrap;
|
|
||||||
direction: ltr;
|
|
||||||
|
|
||||||
/* Support for all WebKit browsers. */
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
/* Support for Safari and Chrome. */
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
|
|
||||||
/* Support for Firefox. */
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
|
|
||||||
/* Support for IE. */
|
|
||||||
font-feature-settings: 'liga';
|
|
||||||
}
|
|
Binary file not shown.
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
@ -1,14 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="block">
|
||||||
<el-checkbox-group v-model="checked">
|
<div
|
||||||
<el-checkbox
|
|
||||||
v-for="option,index in getOptions"
|
v-for="option,index in getOptions"
|
||||||
:key="index"
|
class="field">
|
||||||
|
<b-checkbox
|
||||||
v-model="checked"
|
v-model="checked"
|
||||||
@change="onChecked(option)"
|
:native-value="option"
|
||||||
:label="option"
|
>{{ option }}</b-checkbox>
|
||||||
border>{{ option }}</el-checkbox>
|
</div>
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -19,12 +19,23 @@
|
||||||
checked:[]
|
checked:[]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
created(){
|
||||||
|
if(this.value instanceof Array)
|
||||||
|
this.checked = this.value;
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
field: {
|
field: {
|
||||||
type: Object
|
type: Object
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
type: String
|
type: String
|
||||||
|
},
|
||||||
|
value: [String, Number, Array]
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
checked: function(val){
|
||||||
|
this.checked = val;
|
||||||
|
this.onChecked();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -40,7 +51,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onChecked(option) {
|
onChecked() {
|
||||||
this.$emit('blur');
|
this.$emit('blur');
|
||||||
this.onInput(this.checked)
|
this.onInput(this.checked)
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,23 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<el-date-picker
|
<b-datepicker
|
||||||
type="date"
|
v-model="dateValue"
|
||||||
format="dd/MM/yyyy"
|
|
||||||
value-format="dd/MM/yyyy"
|
|
||||||
:value="dateValue"
|
|
||||||
@blur="onBlur"
|
@blur="onBlur"
|
||||||
@input="onInput($event)"></el-date-picker>
|
@input="onInput($event)"></b-datepicker>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import lang from 'element-ui/lib/locale/lang/pt-br'
|
|
||||||
import locale from 'element-ui/lib/locale'
|
|
||||||
|
|
||||||
locale.use(lang)
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dateValue: ''
|
dateValue: new Date()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<el-input-number
|
<b-input
|
||||||
controls-position="right"
|
type="number"
|
||||||
:value="inputValue"
|
:value="inputValue"
|
||||||
@blur="onBlur"
|
@blur="onBlur"
|
||||||
@change="onBlur"
|
@change="onBlur"
|
||||||
@input="onInput($event)"></el-input-number>
|
@input="onInput($event)"></b-input>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-radio
|
<b-radio
|
||||||
v-for="option,index in getOptions"
|
v-for="option,index in getOptions"
|
||||||
:key="index"
|
:key="index"
|
||||||
v-model="checked"
|
v-model="checked"
|
||||||
@change="onChecked(option)"
|
@input="onChecked(option)"
|
||||||
:label="option"
|
:label="option"
|
||||||
border>{{ option }}</el-radio>
|
:native-value="option"
|
||||||
|
border>{{ option }}</b-radio>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -1,31 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-select
|
<b-autocomplete
|
||||||
v-model="selected"
|
v-model="selected"
|
||||||
multiple
|
:data="options"
|
||||||
filterable
|
@input="search"
|
||||||
remote
|
|
||||||
reserve-keyword
|
|
||||||
:remote-method="search"
|
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
@change="onChecked()">
|
field="label"
|
||||||
<el-option
|
@select="option => setResults(option) ">
|
||||||
v-for="option,index in options"
|
</b-autocomplete>
|
||||||
:key="option.value"
|
|
||||||
:label="option.label"
|
|
||||||
:value="option.value"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import debounce from 'lodash/debounce'
|
||||||
import axios from '../../../js/axios/axios'
|
import axios from '../../../js/axios/axios'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
selected:[],
|
results:'',
|
||||||
|
selected:'',
|
||||||
options: [],
|
options: [],
|
||||||
loading: false,
|
loading: false,
|
||||||
collectionId: 0,
|
collectionId: 0,
|
||||||
|
@ -41,15 +35,21 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
setResults(option){
|
||||||
|
if(!option)
|
||||||
|
return;
|
||||||
|
this.results = option.value;
|
||||||
|
this.onChecked()
|
||||||
|
},
|
||||||
onChecked() {
|
onChecked() {
|
||||||
this.$emit('blur');
|
this.$emit('blur');
|
||||||
this.onInput(this.selected)
|
this.onInput(this.results)
|
||||||
},
|
},
|
||||||
onInput($event) {
|
onInput($event) {
|
||||||
this.inputValue = $event;
|
this.inputValue = $event;
|
||||||
this.$emit('input', this.inputValue);
|
this.$emit('input', this.inputValue);
|
||||||
},
|
},
|
||||||
search(query) {
|
search(query){
|
||||||
if (query !== '') {
|
if (query !== '') {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
this.options = [];
|
this.options = [];
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-select v-model="selected" @change="onChecked()">
|
<b-select v-model="selected" @input="onChecked()">
|
||||||
<el-option
|
<option
|
||||||
v-for="option,index in getOptions"
|
v-for="option,index in getOptions"
|
||||||
:key="index"
|
:key="index"
|
||||||
:label="option"
|
:label="option"
|
||||||
:value="option"
|
:value="option"
|
||||||
border>{{ option }}</el-option>
|
border>{{ option }}</option>
|
||||||
</el-select>
|
</b-select>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -25,7 +25,8 @@
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
type: String
|
type: String
|
||||||
}
|
},
|
||||||
|
value: [String, Number, Array],
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
getOptions(){
|
getOptions(){
|
||||||
|
@ -40,7 +41,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onChecked(option) {
|
onChecked() {
|
||||||
this.$emit('blur');
|
this.$emit('blur');
|
||||||
this.onInput(this.selected)
|
this.onInput(this.selected)
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,15 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
|
<b-field :label="field.field.name"
|
||||||
|
:message="getErrorMessage"
|
||||||
|
:type="fieldTypeMessage">
|
||||||
<div>
|
<div>
|
||||||
<el-form-item :label="field.field.name" :prop="validateObject()">
|
|
||||||
<component :is="extractFieldType(field.field.field_type)" v-model="inputs[0]" :field="field" @blur="changeValue()"></component>
|
<component :is="extractFieldType(field.field.field_type)" v-model="inputs[0]" :field="field" @blur="changeValue()"></component>
|
||||||
<div v-if="field.field.multiple == 'yes'">
|
<div v-if="field.field.multiple == 'yes'">
|
||||||
<div v-if="index > 0" v-for="(input, index) in inputsList " v-bind:key="index" class="multiple-inputs">
|
<div v-if="index > 0" v-for="(input, index) in inputsList " v-bind:key="index" class="multiple-inputs">
|
||||||
<component :is="extractFieldType(field.field.field_type)" v-model="inputs[index]" :field="field" @blur="changeValue()"></component><el-button v-if="index > 0" @click="removeInput(index)">-</el-button>
|
<component :is="extractFieldType(field.field.field_type)" v-model="inputs[index]" :field="field" @blur="changeValue()"></component><a class="button" v-if="index > 0" @click="removeInput(index)">-</a>
|
||||||
</div>
|
</div>
|
||||||
<el-button @click="addInput">+</el-button>
|
<a class="button" @click="addInput">+</a>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
|
||||||
</div>
|
</div>
|
||||||
|
</b-field>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -22,16 +24,31 @@
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
inputs: []
|
inputs: [],
|
||||||
|
fieldTypeMessage:''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
inputsList() {
|
inputsList() {
|
||||||
return this.inputs;
|
return this.inputs;
|
||||||
|
},
|
||||||
|
getErrorMessage() {
|
||||||
|
let msg = '';
|
||||||
|
let errors = eventBus.getErrors(this.field.field.id);
|
||||||
|
if ( errors) {
|
||||||
|
this.fieldTypeMessage = 'is-danger';
|
||||||
|
for (let index in errors) {
|
||||||
|
msg += errors[index] + '\n';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.fieldTypeMessage = '';
|
||||||
|
}
|
||||||
|
return msg;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
this.getValue();
|
this.getValue();
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeValue(){
|
changeValue(){
|
||||||
|
@ -50,12 +67,6 @@
|
||||||
let parts = field_type.split('\\');
|
let parts = field_type.split('\\');
|
||||||
return 'tainacan-' + parts.pop().toLowerCase();
|
return 'tainacan-' + parts.pop().toLowerCase();
|
||||||
},
|
},
|
||||||
validateObject () {
|
|
||||||
return
|
|
||||||
[
|
|
||||||
{ required: this.field.field.required, message: this.message, trigger: 'blur' }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
addInput(){
|
addInput(){
|
||||||
this.inputs.push('');
|
this.inputs.push('');
|
||||||
this.changeValue();
|
this.changeValue();
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<el-input :value="inputValue"
|
<b-input :value="inputValue"
|
||||||
@blur="onBlur"
|
@blur="onBlur"
|
||||||
@input="onInput($event)"></el-input>
|
@input="onInput($event)"></b-input>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -11,6 +11,9 @@
|
||||||
inputValue: ''
|
inputValue: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
props: {
|
||||||
|
value: [String, Number, Object],
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onBlur() {
|
onBlur() {
|
||||||
this.$emit('blur');
|
this.$emit('blur');
|
||||||
|
@ -19,12 +22,9 @@
|
||||||
this.inputValue = $event;
|
this.inputValue = $event;
|
||||||
this.$emit('input', this.inputValue);
|
this.$emit('input', this.inputValue);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.inputValue = this.value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.multiple-inputs {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<el-input type="textarea"
|
<b-input type="textarea"
|
||||||
:autosize="{ minRows: 2, maxRows: 4}"
|
|
||||||
:value="inputValue"
|
:value="inputValue"
|
||||||
@blur="onBlur"
|
@blur="onBlur"
|
||||||
@input="onInput($event)"></el-input>
|
@input="onInput($event)"></b-input>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -5,7 +5,7 @@ export const eventBus = new Vue({
|
||||||
store,
|
store,
|
||||||
data: {
|
data: {
|
||||||
componentsTag: [],
|
componentsTag: [],
|
||||||
errors : store.getters['item/getError']
|
errors : []
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
if( wp_settings.components ){
|
if( wp_settings.components ){
|
||||||
|
@ -23,7 +23,7 @@ export const eventBus = new Vue({
|
||||||
const components = this.getAllComponents();
|
const components = this.getAllComponents();
|
||||||
for (let eventElement of components){
|
for (let eventElement of components){
|
||||||
eventElement.addEventListener('input', (event) => {
|
eventElement.addEventListener('input', (event) => {
|
||||||
if ( event.detail[0] ){
|
if (event.detail && event.detail[0] ){
|
||||||
const promisse = this.$store.dispatch('item/updateMetadata',
|
const promisse = this.$store.dispatch('item/updateMetadata',
|
||||||
{ item_id: $(eventElement).attr("item_id"), field_id: $(eventElement).attr("field_id"), values: event.detail });
|
{ item_id: $(eventElement).attr("item_id"), field_id: $(eventElement).attr("field_id"), values: event.detail });
|
||||||
|
|
||||||
|
@ -45,15 +45,30 @@ export const eventBus = new Vue({
|
||||||
const promisse = this.$store.dispatch('item/updateMetadata',
|
const promisse = this.$store.dispatch('item/updateMetadata',
|
||||||
{ item_id: data.item_id, field_id: data.field_id, values: data.values });
|
{ item_id: data.item_id, field_id: data.field_id, values: data.values });
|
||||||
promisse.then( response => {
|
promisse.then( response => {
|
||||||
data.instance.message = JSON.stringify( [] );
|
let index = this.errors.findIndex( errorItem => errorItem.field_id === data.field_id );
|
||||||
data.instance.value = response.value;
|
if ( index >= 0){
|
||||||
|
this.errors.splice( index, 1);
|
||||||
|
}
|
||||||
}, error => {
|
}, error => {
|
||||||
const field = this.errors.find(error => error.field_id === data.field_id );
|
let index = this.errors.findIndex( errorItem => errorItem.field_id === data.field_id );
|
||||||
eventElement.errorsMsg = JSON.stringify( field.error );
|
let messages = null;
|
||||||
eventElement.value = data.values;
|
|
||||||
|
for (let index in error) {
|
||||||
|
messages = error[index]
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( index >= 0){
|
||||||
|
Vue.set( this.errors, index, { field_id: data.field_id, errors: messages });
|
||||||
|
}else{
|
||||||
|
this.errors.push( { field_id: data.field_id, errors: messages } );
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
getErrors(field_id){
|
||||||
|
let error = this.errors.find( errorItem => errorItem.field_id === field_id );
|
||||||
|
return ( error ) ? error.errors : false
|
||||||
|
},
|
||||||
setValues(){
|
setValues(){
|
||||||
const field = this.$store.getters['item/getMetadata'];
|
const field = this.$store.getters['item/getMetadata'];
|
||||||
if( field ){
|
if( field ){
|
||||||
|
@ -92,7 +107,7 @@ export const eventBus = new Vue({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
|
@ -2,10 +2,12 @@ import Vue from 'vue'
|
||||||
|
|
||||||
// include vue-custom-element plugin to Vue
|
// include vue-custom-element plugin to Vue
|
||||||
import VueCustomElement from 'vue-custom-element';
|
import VueCustomElement from 'vue-custom-element';
|
||||||
import ElementUI from 'element-ui'
|
|
||||||
import { eventBus } from './event-bus-web-components';
|
import { eventBus } from './event-bus-web-components';
|
||||||
|
import Buefy from 'buefy'
|
||||||
|
|
||||||
|
|
||||||
|
Vue.use(Buefy)
|
||||||
|
|
||||||
Vue.use(ElementUI);
|
|
||||||
Vue.use(VueCustomElement);
|
Vue.use(VueCustomElement);
|
||||||
|
|
||||||
import Text from '../classes/field-types/text/Text.vue';
|
import Text from '../classes/field-types/text/Text.vue';
|
||||||
|
|
|
@ -19,10 +19,55 @@ export const fetchCollections = ({ commit }) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const fetchCollection = ({ commit }, id) => {
|
export const fetchCollection = ({ commit }, id) => {
|
||||||
|
return new Promise((resolve, reject) =>{
|
||||||
axios.get('/collections/' + id)
|
axios.get('/collections/' + id)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
|
console.log(res);
|
||||||
let collection = res.data;
|
let collection = res.data;
|
||||||
commit('setCollection', collection);
|
commit('setCollection', collection);
|
||||||
|
resolve( res.data );
|
||||||
})
|
})
|
||||||
.catch(error => console.log(error));
|
.catch(error => {
|
||||||
|
console.log(error);
|
||||||
|
reject(error);
|
||||||
|
})
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const updateCollection = ({ commit }, { collection_id, name, description, status }) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
axios.patch('/collections/' + collection_id, {
|
||||||
|
name: name,
|
||||||
|
description: description,
|
||||||
|
status: status
|
||||||
|
}).then( res => {
|
||||||
|
commit('setCollection', { id: collection_id, name: name, description: description, status: status });
|
||||||
|
resolve( res.data );
|
||||||
|
}).catch( error => {
|
||||||
|
commit('setCollection', { id: collection_id, name: name, description: description, status: status });
|
||||||
|
reject( error.response );
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const sendCollection = ( { commit }, { name, description, status }) => {
|
||||||
|
return new Promise(( resolve, reject ) => {
|
||||||
|
axios.post('/collections/', {
|
||||||
|
name: name,
|
||||||
|
description: description,
|
||||||
|
status: status
|
||||||
|
})
|
||||||
|
.then( res => {
|
||||||
|
commit('setCollection', { name: name, description: description, status: status });
|
||||||
|
//commit('removeError', { collection_id });
|
||||||
|
resolve( res.data );
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.log( 'error',error.response );
|
||||||
|
commit('setCollection', { name: name, description: description, status: status });
|
||||||
|
//commit('setError', { name: name, description: description, status: status, error: error.response.data.errors });
|
||||||
|
reject( error.response );
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
|
@ -30,9 +30,10 @@ export const updateMetadata = ({ commit }, { item_id, field_id, values }) => {
|
||||||
.then( res => {
|
.then( res => {
|
||||||
let field = res.data;
|
let field = res.data;
|
||||||
commit('setSingleField', field);
|
commit('setSingleField', field);
|
||||||
|
resolve(field)
|
||||||
})
|
})
|
||||||
.catch( error => {
|
.catch( error => {
|
||||||
console.log('error', error);
|
reject(error.response.data.errors);
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue