forked from platypush/platypush
Include links both to the parent and children entities in EntityModal.
This commit is contained in:
parent
99cfd247a5
commit
5dd95362a1
2 changed files with 53 additions and 10 deletions
|
@ -17,6 +17,8 @@
|
||||||
<div class="groups-canvas">
|
<div class="groups-canvas">
|
||||||
<EntityModal
|
<EntityModal
|
||||||
:entity="entities[modalEntityId]"
|
:entity="entities[modalEntityId]"
|
||||||
|
:parent="entities[entities[modalEntityId].parent_id]"
|
||||||
|
:children="childrenByParentId(modalEntityId)"
|
||||||
:visible="modalVisible"
|
:visible="modalVisible"
|
||||||
:config-values="configValuesByParentId(modalEntityId)"
|
:config-values="configValuesByParentId(modalEntityId)"
|
||||||
@close="onEntityModal"
|
@close="onEntityModal"
|
||||||
|
|
|
@ -90,12 +90,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table-row" v-if="entity.parent_id">
|
<div class="table-row" v-if="parent">
|
||||||
<div class="title">Parent</div>
|
<div class="title">Parent</div>
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<a href="#"
|
<a class="url" @click="$emit('entity-update', parent.id)"
|
||||||
@click="$emit('entity-update', entity.parent_id)"
|
v-text="parent.name"
|
||||||
v-text="entity.parent_id"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -120,7 +119,31 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="extra-info-container">
|
<div class="section children-container" v-if="Object.keys(children || {}).length">
|
||||||
|
<div class="title section-title" @click="childrenCollapsed = !childrenCollapsed">
|
||||||
|
<div class="col-11">
|
||||||
|
<i class="fas fa-sitemap" />
|
||||||
|
Children
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-1 pull-right">
|
||||||
|
<i class="fas"
|
||||||
|
:class="{'fa-chevron-down': childrenCollapsed, 'fa-chevron-up': !childrenCollapsed}" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="children-container-info" v-if="!childrenCollapsed">
|
||||||
|
<div class="table-row" v-for="child in children" :key="child.id">
|
||||||
|
<div class="value">
|
||||||
|
<a class="url" @click="$emit('entity-update', child.id)"
|
||||||
|
v-text="child.name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section extra-info-container">
|
||||||
<div class="title section-title" @click="extraInfoCollapsed = !extraInfoCollapsed">
|
<div class="title section-title" @click="extraInfoCollapsed = !extraInfoCollapsed">
|
||||||
<div class="col-11">
|
<div class="col-11">
|
||||||
<i class="fas fa-circle-info" />
|
<i class="fas fa-circle-info" />
|
||||||
|
@ -150,7 +173,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="config-container"
|
<div class="section config-container"
|
||||||
v-if="computedConfig.length">
|
v-if="computedConfig.length">
|
||||||
<div class="title section-title"
|
<div class="title section-title"
|
||||||
@click="configCollapsed = !configCollapsed">
|
@click="configCollapsed = !configCollapsed">
|
||||||
|
@ -195,6 +218,7 @@ const specialFields = [
|
||||||
'external_url',
|
'external_url',
|
||||||
'id',
|
'id',
|
||||||
'image_url',
|
'image_url',
|
||||||
|
'is_configuration',
|
||||||
'meta',
|
'meta',
|
||||||
'name',
|
'name',
|
||||||
'plugin',
|
'plugin',
|
||||||
|
@ -213,6 +237,14 @@ export default {
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
parent: {
|
||||||
|
type: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
children: {
|
||||||
|
type: Object,
|
||||||
|
},
|
||||||
|
|
||||||
visible: {
|
visible: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
|
@ -238,6 +270,7 @@ export default {
|
||||||
editName: false,
|
editName: false,
|
||||||
editIcon: false,
|
editIcon: false,
|
||||||
configCollapsed: true,
|
configCollapsed: true,
|
||||||
|
childrenCollapsed: true,
|
||||||
extraInfoCollapsed: true,
|
extraInfoCollapsed: true,
|
||||||
specialFields: specialFields,
|
specialFields: specialFields,
|
||||||
}
|
}
|
||||||
|
@ -326,6 +359,10 @@ export default {
|
||||||
.body {
|
.body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
@include from($desktop) {
|
||||||
|
min-width: 45em;
|
||||||
|
}
|
||||||
|
|
||||||
.table-row {
|
.table-row {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
|
@ -386,9 +423,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-container,
|
.section {
|
||||||
.extra-info-container
|
|
||||||
{
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
|
@ -410,8 +445,14 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
&.url {
|
&.url, a {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
text-decoration: underline;
|
||||||
|
opacity: 0.8;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.entity-image {
|
.entity-image {
|
||||||
|
|
Loading…
Reference in a new issue