diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue index 19b0649211..cb997863a4 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue @@ -31,6 +31,7 @@ :parent="value" :loading="loading" :level="level + 1" + @show-modal="$emit('show-modal', $event)" @input="$emit('input', entity)" /> @@ -45,7 +46,7 @@ import { bus } from "@/bus"; export default { name: "Entity", mixins: [EntityMixin], - emits: ['input', 'loading', 'update'], + emits: ['input', 'loading', 'update', 'show-modal'], data() { return { @@ -88,12 +89,19 @@ export default { }, onClick(event) { + event.stopPropagation() + if ( event.target.classList.contains('label') || event.target.classList.contains('head') ) { - event.stopPropagation() + // When clicking on the name or icon of the entity, stop the event + // propagation and toggle the collapsed state instead. this.toggleCollapsed() + } else { + // Otherwise, propagate the event upwards as a request to show the + // entity details modal. + this.$emit('show-modal', this.value.id) } }, diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue index a4fef40326..c5cda78981 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue @@ -20,6 +20,7 @@ :visible="modalVisible" :config-values="configValuesByParentId(modalEntityId)" @close="onEntityModal" + @entity-update="modalEntityId = $event" v-if="modalEntityId && entities[modalEntityId]" /> @@ -48,11 +49,13 @@
-
+
+
+
Parent
+
+ +
+
+
Created at
@@ -100,32 +110,49 @@
-
-
-
-
-
-
- -
-
-
-
-
-
- -
+
Delete Entity
-
+
+
+
+   + Extra Info +
+ +
+ +
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
-
  @@ -172,13 +199,14 @@ const specialFields = [ 'name', 'plugin', 'updated_at', + 'parent_id', ] export default { name: "EntityModal", components: {Entity, Modal, EditButton, NameEditor, Icon, ConfirmDialog}, mixins: [Utils], - emits: ['input', 'loading'], + emits: ['input', 'loading', 'entity-update'], props: { entity: { type: Object, @@ -210,6 +238,7 @@ export default { editName: false, editIcon: false, configCollapsed: true, + extraInfoCollapsed: true, specialFields: specialFields, } }, @@ -280,6 +309,14 @@ export default { this.editIcon = false } }, + + stringify(value) { + if (value == null) + return '' + if (Array.isArray(value) || typeof value === 'object') + return JSON.stringify(value) + return '' + value + }, }, } @@ -329,26 +366,39 @@ export default { .delete-entity-container { color: $error-fg; + cursor: pointer; button { color: $error-fg; } } - .config-container { + @mixin section-title { + display: flex; + cursor: pointer; + padding: 1em; + text-transform: uppercase; + letter-spacing: 0.033em; + border-top: $default-border; + box-shadow: $border-shadow-bottom; + + &:hover { + background: $hover-bg; + } + } + + .config-container, + .extra-info-container + { margin: 0; - .title { - display: flex; - padding: 1em; - text-transform: uppercase; - letter-spacing: 0.033em; - border-top: $default-border; - box-shadow: $border-shadow-bottom; - cursor: pointer; + .section-title { + @include section-title; + } + } - &:hover { - background: $hover-bg; - } + .config-container { + .title { + @include section-title; } }