Adds ItemPage, changes routes and actions to receive new page. Begins adaptation for ItemCreationPage being same page as for Item Edition.

src/admin/components/items-list.vue

@@ -13,7 +13,7 @@
                 </template>
             </el-table-column>
             <el-table-column label="Nome" show-overflow-tooltip>
-                <template slot-scope="scope"><router-link :to="`/items/${scope.row.id}`" tag="a">{{ scope.row.title }}</router-link></template>
+                <template slot-scope="scope"><router-link :to="`/collections/${collectionId}/items/${scope.row.id}`" tag="a">{{ scope.row.title }}</router-link></template>
             </el-table-column>
             <el-table-column property="description" label="Descrição" show-overflow-tooltip>
             </el-table-column>

src/admin/js/router.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 
 import AdminPage from '../admin.vue'
 import CollectionPage from '../pages/collection-page.vue'
+import ItemPage from '../pages/item-page.vue'
 import ItemCreationPage from '../pages/item-creation-page.vue'
 
 import CollectionsList from '../components/collections-list.vue'
@@ -19,6 +20,8 @@ const routes = [
         meta: { title: 'Collection Page' }
     },
     { path: '/collections/:id/items/create', component: ItemCreationPage, meta: {title: 'Create Item'} },
+    { path: '/collections/:collection_id/items/:id/edit', component: ItemCreationPage, meta: {title: 'Edit Item'} },
+    { path: '/collections/:collection_id/items/:id', component: ItemPage, meta: {title: 'Item Page'} },
     { path: '*', redirect: '/'}
 ]
 

src/admin/pages/item-page.vue

@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <el-row v-if="item != null">
+            <el-card :body-style="{ padding: '0px' }">
+                <img src="" class="image" :alt="item.title">
+                <div style="padding: 14px;">
+                    <span>{{ item.title }}</span>
+                    <div class="bottom clearfix">
+                        <time class="time">{{item.description}}</time>
+                        <router-link tag="el-button" class="primary" :to="{ path: `/collection/${collectionId}/items/${itemId}/edit`}">Editar Item</router-link>
+                    </div>
+                </div>
+            </el-card>     
+        </el-row>
+    </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+    name: 'ItemPage',
+    data(){
+        return {
+            collectionId: Number,
+            itemId: Number
+        }
+    },
+    methods: {
+        ...mapActions('item', [
+            'fetchItem'
+        ]),
+        ...mapGetters('item', [
+            'getItem'
+        ]),
+        createItem() {
+            
+        }
+    },
+    computed: {
+        item(){
+            return this.getItem();
+        }
+    },
+    created(){
+        // Obtains item and collection ID
+        this.collectionId = this.$route.params.collection_id;        
+        this.itemId = this.$route.params.id;
+
+        // Puts loading on Item Loading
+        let loadingInstance = this.$loading({ text: 'Carregando item...' });
+        
+        // Obtains Item 
+        this.fetchItem(this.itemId).then(res => {
+            loadingInstance.close();
+        });
+    }
+
+}
+</script>
+
+<style scoped>
+
+    .time {
+        font-size: 13px;
+        color: #999;
+    }
+
+    .bottom {
+        margin-top: 13px;
+        line-height: 12px;
+    }
+
+    el-button {
+        padding: 0;
+        float: right;
+    }
+
+    .image {
+        width: 100%;
+        display: block;
+    }
+
+    .clearfix:before,
+    .clearfix:after {
+        display: table;
+        content: "";
+    }
+
+    .clearfix:after {
+        clear: both
+    }
+</style>
+
+

src/js/store/modules/item/actions.js

@@ -55,6 +55,21 @@ export const fetchMetadata = ({ commit }, item_id) => {
 };
 
 // Actions directly related to Item
+export const fetchItem = ({ commit }, item_id) => {
+    return new Promise((resolve, reject) => {
+        axios.get('/items/'+item_id)
+        .then(res => {
+            let item = res.data;
+            commit('setSingleItem', item);
+            resolve( res.data );
+        })
+        .catch(error => {
+            console.log(error);
+            reject( error );
+        });
+    });
+};
+
 export const sendItem = ( { commit }, { collection_id, title, description, status }) => {
     return new Promise(( resolve, reject ) => {
         axios.post('/collection/'+ collection_id + '/items/', {