Adds a prototype of item page
This commit is contained in:
weryques
parent
690ec0da55
commit
ac4c4d2f5f
|
|
@ -3,9 +3,12 @@
|
|||
<b-loading
|
||||
:active.sync="isLoading"
|
||||
:can-cancel="false"/>
|
||||
<tainacan-title/>
|
||||
<div class="content">
|
||||
|
||||
<tainacan-title/>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<div class="column is-12">
|
||||
<router-link
|
||||
class="button is-secondary"
|
||||
:to="{ path: $routerHelper.getItemEditPath(collectionId, itemId)}">
|
||||
|
|
@ -16,79 +19,112 @@
|
|||
:href="item.url">
|
||||
{{ $i18n.getFrom('items', 'view_item') }}
|
||||
</a>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div
|
||||
class="card-image"
|
||||
v-if="item.document">
|
||||
<figure
|
||||
class="image"
|
||||
v-html="item.document_as_html"/>
|
||||
<!-- Status -------------------------------- -->
|
||||
<div class="section-label">
|
||||
<label>{{ $i18n.get('label_status') }}</label>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div
|
||||
v-if="item.thumbnail"
|
||||
class="media">
|
||||
<figure
|
||||
class="media-left">
|
||||
<p class="image is-128x128">
|
||||
<img :src="item.thumbnail">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
{{ $i18n.get('label_thumbnail') }}
|
||||
<div>
|
||||
<p>{{ item.status }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
|
||||
<!-- Document -------------------------------- -->
|
||||
<div class="section-label">
|
||||
<label>{{ item.document !== undefined && item.document !== null && item.document !== '' ?
|
||||
$i18n.get('label_document') : $i18n.get('label_document_empty') }}</label>
|
||||
</div>
|
||||
<div class="section-box">
|
||||
<div
|
||||
v-for="(metadata, index) in item.metadata"
|
||||
:key="index"
|
||||
class="box">
|
||||
v-if="item.document !== undefined && item.document !== null &&
|
||||
item.document_type !== undefined && item.document_type !== null &&
|
||||
item.document !== '' && item.document_type !== 'empty'">
|
||||
|
||||
<p
|
||||
v-if="metadata.date_i18n"
|
||||
class="is-size-3"
|
||||
v-html="metadata.date_i18n"/>
|
||||
<p
|
||||
v-else-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 v-if="item.document_type === 'attachment'">
|
||||
<div v-html="item.document_as_html"/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="box">
|
||||
<div v-else-if="item.document_type === 'text'">
|
||||
<div v-html="item.document_as_html"/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.document_type === 'url'">
|
||||
<div v-html="item.document_as_html"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
|
||||
<!-- Attachments ----------------------------- -->
|
||||
<div class="section-label">
|
||||
<label>{{ $i18n.get('label_attachments') }}</label>
|
||||
</div>
|
||||
<div class="section-box">
|
||||
<div class="uploaded-files">
|
||||
<div
|
||||
v-if="attachments && attachments.length > 0">
|
||||
<span
|
||||
v-for="(attachment, index) in attachments"
|
||||
:key="index"
|
||||
>
|
||||
<a
|
||||
target="blank"
|
||||
:href="attachment.guid.rendered">{{ attachment.guid.rendered }}</a>
|
||||
<br>
|
||||
v-for="(attachment, index) in attachmentsList"
|
||||
:key="index">
|
||||
<span class="tag is-primary">
|
||||
{{ attachment.title.rendered }}
|
||||
</span>
|
||||
</div>
|
||||
<p v-else>--</p>
|
||||
|
||||
<p>
|
||||
<i>
|
||||
{{ $i18n.get('label_attachments') }}
|
||||
</i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="column is-1" />
|
||||
<div class="column is-7">
|
||||
<label class="section-label">{{ $i18n.get('fields') }}</label>
|
||||
<br>
|
||||
<a
|
||||
class="collapse-all"
|
||||
@click="open = !open">
|
||||
{{ open ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
|
||||
<b-icon
|
||||
type="is-secondary"
|
||||
:icon=" open ? 'menu-down' : 'menu-right'"/>
|
||||
</a>
|
||||
|
||||
<!-- Fields -------------------------------- -->
|
||||
<div>
|
||||
<div
|
||||
v-for="(field, index) of fieldList"
|
||||
:key="index"
|
||||
class="field">
|
||||
<b-collapse :open="open">
|
||||
<label
|
||||
class="label"
|
||||
slot="trigger"
|
||||
slot-scope="props">
|
||||
<b-icon
|
||||
type="is-secondary"
|
||||
:icon="props.open ? 'menu-down' : 'menu-right'"
|
||||
/>
|
||||
{{ field.field.name }}
|
||||
</label>
|
||||
<div
|
||||
v-if="field.date_i18n"
|
||||
class="notification">
|
||||
<div v-html="field.date_i18n"/>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="notification">
|
||||
<div v-html="field.value_as_html"/>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -101,24 +137,36 @@
|
|||
return {
|
||||
collectionId: Number,
|
||||
itemId: Number,
|
||||
isLoading: false
|
||||
isLoading: false,
|
||||
open: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('item', [
|
||||
'fetchItem',
|
||||
'fetchAttachments'
|
||||
'fetchAttachments',
|
||||
'fetchFields',
|
||||
]),
|
||||
...mapGetters('item', [
|
||||
'getItem',
|
||||
'getFields',
|
||||
'getAttachments'
|
||||
]),
|
||||
loadMetadata() {
|
||||
// Obtains Item Field
|
||||
this.fetchFields(this.itemId).then(() => {
|
||||
this.isLoading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
item() {
|
||||
return this.getItem();
|
||||
},
|
||||
attachments() {
|
||||
fieldList() {
|
||||
return JSON.parse(JSON.stringify(this.getFields()));
|
||||
},
|
||||
attachmentsList() {
|
||||
return this.getAttachments();
|
||||
}
|
||||
},
|
||||
|
|
@ -129,11 +177,10 @@
|
|||
|
||||
// Puts loading on Item Loading
|
||||
this.isLoading = true;
|
||||
let loadingInstance = this;
|
||||
|
||||
// Obtains Item
|
||||
this.fetchItem(this.itemId).then(() => {
|
||||
loadingInstance.isLoading = false;
|
||||
this.loadMetadata();
|
||||
});
|
||||
|
||||
// Get attachments
|
||||
|
|
@ -142,3 +189,80 @@
|
|||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import '../../scss/_variables.scss';
|
||||
|
||||
.page-container {
|
||||
height: calc(100% - 82px);
|
||||
}
|
||||
|
||||
.columns > .column {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.field {
|
||||
border-bottom: 1px solid $draggable-border-color;
|
||||
padding: 10px 25px;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
span {
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-label {
|
||||
position: relative;
|
||||
label {
|
||||
font-size: 16px !important;
|
||||
font-weight: 500 !important;
|
||||
color: $tertiary !important;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-all {
|
||||
font-size: 12px;
|
||||
.icon {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.section-box {
|
||||
border: 1px solid $draggable-border-color;
|
||||
padding: 30px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 38px;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
li {
|
||||
text-align: center;
|
||||
button {
|
||||
border-radius: 50px;
|
||||
height: 72px;
|
||||
width: 72px;
|
||||
border: none;
|
||||
background-color: $tainacan-input-background;
|
||||
color: $secondary;
|
||||
margin-bottom: 6px;
|
||||
&:hover {
|
||||
background-color: $primary-light;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue