Adds a prototype of item page
This commit is contained in:
weryques
parent
690ec0da55
commit
ac4c4d2f5f
|
|
@ -3,91 +3,127 @@
|
||||||
<b-loading
|
<b-loading
|
||||||
:active.sync="isLoading"
|
:active.sync="isLoading"
|
||||||
:can-cancel="false"/>
|
:can-cancel="false"/>
|
||||||
|
|
||||||
<tainacan-title/>
|
<tainacan-title/>
|
||||||
<div class="content">
|
|
||||||
|
|
||||||
<router-link
|
<div class="columns">
|
||||||
class="button is-secondary"
|
<div class="column is-4">
|
||||||
:to="{ path: $routerHelper.getItemEditPath(collectionId, itemId)}">
|
<div class="column is-12">
|
||||||
{{ $i18n.getFrom('items','edit_item') }}
|
<router-link
|
||||||
</router-link>
|
class="button is-secondary"
|
||||||
<a
|
:to="{ path: $routerHelper.getItemEditPath(collectionId, itemId)}">
|
||||||
class="button is-success is-pulled-right"
|
{{ $i18n.getFrom('items','edit_item') }}
|
||||||
:href="item.url">
|
</router-link>
|
||||||
{{ $i18n.getFrom('items', 'view_item') }}
|
<a
|
||||||
</a>
|
class="button is-success is-pulled-right"
|
||||||
<br>
|
:href="item.url">
|
||||||
|
{{ $i18n.getFrom('items', 'view_item') }}
|
||||||
|
</a>
|
||||||
|
|
||||||
<div
|
<br>
|
||||||
class="card-image"
|
<br>
|
||||||
v-if="item.document">
|
|
||||||
<figure
|
|
||||||
class="image"
|
|
||||||
v-html="item.document_as_html"/>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div
|
<!-- Status -------------------------------- -->
|
||||||
v-if="item.thumbnail"
|
<div class="section-label">
|
||||||
class="media">
|
<label>{{ $i18n.get('label_status') }}</label>
|
||||||
<figure
|
</div>
|
||||||
class="media-left">
|
<div>
|
||||||
<p class="image is-128x128">
|
<p>{{ item.status }}</p>
|
||||||
<img :src="item.thumbnail">
|
</div>
|
||||||
</p>
|
|
||||||
</figure>
|
|
||||||
<div class="media-content">
|
|
||||||
{{ $i18n.get('label_thumbnail') }}
|
|
||||||
</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-if="item.document !== undefined && item.document !== null &&
|
||||||
|
item.document_type !== undefined && item.document_type !== null &&
|
||||||
|
item.document !== '' && item.document_type !== 'empty'">
|
||||||
|
|
||||||
|
<div v-if="item.document_type === 'attachment'">
|
||||||
|
<div v-html="item.document_as_html"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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-for="(attachment, index) in attachmentsList"
|
||||||
|
:key="index">
|
||||||
|
<span class="tag is-primary">
|
||||||
|
{{ attachment.title.rendered }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|
||||||
<div
|
<!-- Fields -------------------------------- -->
|
||||||
v-for="(metadata, index) in item.metadata"
|
<div>
|
||||||
:key="index"
|
<div
|
||||||
class="box">
|
v-for="(field, index) of fieldList"
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="box">
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-if="attachments && attachments.length > 0">
|
|
||||||
<span
|
|
||||||
v-for="(attachment, index) in attachments"
|
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
class="field">
|
||||||
<a
|
<b-collapse :open="open">
|
||||||
target="blank"
|
<label
|
||||||
:href="attachment.guid.rendered">{{ attachment.guid.rendered }}</a>
|
class="label"
|
||||||
<br>
|
slot="trigger"
|
||||||
</span>
|
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>
|
||||||
<p v-else>--</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<i>
|
|
||||||
{{ $i18n.get('label_attachments') }}
|
|
||||||
</i>
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -101,24 +137,36 @@
|
||||||
return {
|
return {
|
||||||
collectionId: Number,
|
collectionId: Number,
|
||||||
itemId: Number,
|
itemId: Number,
|
||||||
isLoading: false
|
isLoading: false,
|
||||||
|
open: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions('item', [
|
...mapActions('item', [
|
||||||
'fetchItem',
|
'fetchItem',
|
||||||
'fetchAttachments'
|
'fetchAttachments',
|
||||||
|
'fetchFields',
|
||||||
]),
|
]),
|
||||||
...mapGetters('item', [
|
...mapGetters('item', [
|
||||||
'getItem',
|
'getItem',
|
||||||
|
'getFields',
|
||||||
'getAttachments'
|
'getAttachments'
|
||||||
]),
|
]),
|
||||||
|
loadMetadata() {
|
||||||
|
// Obtains Item Field
|
||||||
|
this.fetchFields(this.itemId).then(() => {
|
||||||
|
this.isLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
item() {
|
item() {
|
||||||
return this.getItem();
|
return this.getItem();
|
||||||
},
|
},
|
||||||
attachments() {
|
fieldList() {
|
||||||
|
return JSON.parse(JSON.stringify(this.getFields()));
|
||||||
|
},
|
||||||
|
attachmentsList() {
|
||||||
return this.getAttachments();
|
return this.getAttachments();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -129,11 +177,10 @@
|
||||||
|
|
||||||
// Puts loading on Item Loading
|
// Puts loading on Item Loading
|
||||||
this.isLoading = true;
|
this.isLoading = true;
|
||||||
let loadingInstance = this;
|
|
||||||
|
|
||||||
// Obtains Item
|
// Obtains Item
|
||||||
this.fetchItem(this.itemId).then(() => {
|
this.fetchItem(this.itemId).then(() => {
|
||||||
loadingInstance.isLoading = false;
|
this.loadMetadata();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Get attachments
|
// Get attachments
|
||||||
|
|
@ -142,3 +189,80 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</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