tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

creating the initial version for item visualization page, see #11

This commit is contained in:
eduardohumberto 2018-05-02 22:10:27 -03:00
parent f710bed344
commit df4042d02c
1 changed files with 53 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/admin/pages/singles/item-page.vue
View File

@ -1,37 +1,71 @@
<template>
<div>
<b-loading
:active.sync="isLoading"
<b-loading
:active.sync="isLoading"
:can-cancel="false"/>
<div class="card">
<div
class="card-image"
v-if="item.featured_image">
<figure class="image">
<img
:src="item.featured_image"
:alt="item.title">
</figure>
</div>
<div class="card-content">
<div class="media">
<div
class="card-image"
v-if="item.document">
<figure
class="image"
v-html="item.document_as_html" />
</div>
<br>
<div
v-if="item.featured_image"
class="media">
<figure
class="media-left" >
<p class="image is-128x128">
<img :src="item.featured_image">
</p>
</figure>
<div class="media-content">
<p class="title is-4">{{ item.title }}</p>
{{ $i18n.get('label_thumbnail') }}
</div>
</div>
<div class="content">
{{ item.description }}
<div
v-for="(metadata, index) in item.metadata"
:key="index"
class="box">
<p
v-if="metadata.value_as_html"
class="is-size-3"
v-html="metadata.value_as_html"/>
<p
v-else>--</p>
<p>
<i>
{{ metadata.name }}
</i>
</p>
</div>
<div
class="box">
<p>--</p>
<p>
<i>
{{ $i18n.get('label_attachments') }}
</i>
</p>
</div>
</div>
<footer class="card-footer">
<router-link
class="card-footer-item"
class="card-footer-item"
:to="{ path: $routerHelper.getCollectionPath(collectionId)}">
{{ $i18n.get('see') + ' ' + $i18n.get('collection') }}
</router-link>
<router-link
class="card-footer-item"
class="card-footer-item"
:to="{ path: $routerHelper.getItemEditPath(collectionId, itemId)}">
{{ $i18n.get('edit') + ' ' + $i18n.get('item') }}
</router-link>
@ -67,14 +101,14 @@ export default {
},
created(){
// Obtains item and collection ID
this.collectionId = this.$route.params.collectionId;
this.collectionId = this.$route.params.collectionId;
this.itemId = this.$route.params.itemId;
// Puts loading on Item Loading
this.isLoading = true;
let loadingInstance = this;
// Obtains Item
// Obtains Item
this.fetchItem(this.itemId).then(() => {
loadingInstance.isLoading = false;
});
@ -82,5 +116,3 @@ export default {
}
</script>