Creates Item Creation Page (only form, no actions so far).

src/admin/js/main.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
 
 import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
 
 import AdminPage from '../admin.vue'
 //import { eventBus } from '../../js/event-bus-web-components'

src/admin/js/router.js

@@ -2,9 +2,11 @@ import Vue from 'vue';
 import VueRouter from 'vue-router'
 
 import AdminPage from '../admin.vue'
+import CollectionPage from '../pages/collection-page.vue'
+import ItemCreationPage from '../pages/item-creation-page.vue'
+
 import CollectionsList from '../components/collections-list.vue'
 import ItensList from '../components/itens-list.vue'
-import CollectionPage from '../pages/collection-page.vue'
 
 Vue.use(VueRouter);
 
@@ -12,9 +14,11 @@ const routes = [
     { path: '/', component: CollectionsList },
     { path: '/collections', component: CollectionsList },
     { path: '/collections/:id', component: CollectionPage, children: [
-            { path: 'items-list', component: ItensList }
+            { path: 'itens-list', component: ItensList }
+            
         ]   
     },
+    { path: '/collections/:id/itens/create', component: ItemCreationPage },
     { path: '*', redirect: '/'}
 ]
 

src/admin/pages/collection-page.vue

@@ -7,8 +7,8 @@
                     <span>{{ collection.name }}</span>
                     <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>
+                        <el-button type="text">Lista de Itens</el-button>
+                        <router-link tag="el-button" :to="`/collections/${collection.id}/itens/create`">Criar Item</router-link>
                     </div>
                 </div>
             </el-card>     

src/admin/pages/item-creation-page.vue

@@ -0,0 +1,76 @@
+<template>
+    <div>
+    <h2>Item creation</h2>
+    <el-form ref="form" :model="form" label-width="120px">
+        <el-form-item label="Nome">
+            <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="Descrição">
+            <el-input type="textarea" v-model="form.desc"></el-input>
+        </el-form-item>
+        <el-form-item label="Status">
+            <el-select v-model="form.region" placeholder="Selecione um status">
+                <el-option label="Públicado" value="publish"></el-option>
+                <el-option label="Rascunho" value="draft"></el-option>
+                <el-option label="Privado" value="private"></el-option>
+                <el-option label="Lixo" value="trash"></el-option>
+            </el-select>
+        </el-form-item>
+        <el-upload
+            class="upload-demo"
+            drag
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove">
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">Arraste uma imagem aqui <em>ou clique para enviar</em></div>
+            <div class="el-upload__tip" slot="tip">imagens em formato jpg/png</div>
+        </el-upload>
+        <el-form-item>
+            <el-button type="primary" @click="onSubmit">Criar</el-button>
+            <el-button>Cancelar</el-button>
+        </el-form-item>
+    </el-form>
+    <i class="el-icon-edit"></i>
+    </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+    name: 'ItemCreationPage',
+    data(){
+        return {
+            form: {
+                name: '',
+                status: '',
+                desc: ''
+            }
+        }
+    },
+    components: {
+    },
+    methods: {
+        ...mapActions('item', [
+            'fetchItens'
+        ]),
+        ...mapGetters('item', [
+            'getItens'
+        ]),
+        onSubmit() {
+        }
+    },
+    computed: {
+    },
+    created(){
+    }
+
+}
+</script>
+
+<style scoped>
+
+</style>
+
+

src/admin/scss/tainacan-admin.scss

@@ -1,10 +1,17 @@
+/* theme color */
+$--color-primary: teal;
+
+/* icon font path, required */
+//$--font-path: '../../../node_modules/element-theme-chalk/lib/fonts';
+
+@import "../../../node_modules/element-ui/packages/theme-chalk/src/index";
 
 body.tainacan-admin-page #adminmenumain {
     display: none;
 }
 
 #tainacan-admin-app {
-    background: #fff;
+    background: #ffffff;
     position: fixed;
     top: 0;
     left: 0;

webpack.config.js

@@ -26,11 +26,8 @@ module.exports = {
                 exclude: /node_modules/
             },
             {
-                test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
-                loader: 'file',
-                options: {
-                    name: '[name].[ext]?[hash]'
-                }
+                test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                loader: 'url'
             },
             {
                 test: /\.css$/,