Refactored/simplified UI code for entities management

platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue

@@ -1,62 +1,30 @@
 <template>
-  <div class="row item entity">
+  <div class="row item entity-container">
-    <div class="status-container">
+    <component :is="component"
-      <img src="@/assets/img/spinner.gif" class="loading" v-if="loading">
+      :value="value"
-      <i class="fas fa-circle-exclamation error" v-else-if="error" />
+      :loading="loading"
-      <Icon v-bind="value.meta?.icon || {}" v-else />
+      :error="error || value?.reachable == false"
-    </div>
+      @input="$emit('input', $event)"
-    <div class="component-container">
+      @loading="$emit('loading', $event)"
-      <component :is="component"
+    />
-        :value="value"
-        @input="$emit('input', $event)"
-        :loading="loading"
-        @loading="$emit('loading', $event)"
-      />
-    </div>
   </div>
 </template>
 
 <script>
 import { defineAsyncComponent } from 'vue'
-import Utils from "@/Utils"
+import EntityMixin from "./EntityMixin"
-import Icon from "@/components/elements/Icon";
 
 export default {
   name: "Entity",
-  components: {Icon},
+  mixins: [EntityMixin],
-  mixins: [Utils],
   emits: ['input', 'loading'],
-  props: {
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-
-    error: {
-      type: Boolean,
-      default: false,
-    },
-
-    value: {
-      type: Object,
-      required: true,
-    },
-  },
 
   data() {
     return {
       component: null,
-      modalVisible: false,
     }
   },
 
-  computed: {
-    type() {
-      let entityType = (this.value.type || '')
-      return entityType.charAt(0).toUpperCase() + entityType.slice(1)
-    },
-  },
-
   mounted() {
     if (this.type !== 'Entity')
       this.component = defineAsyncComponent(
@@ -67,42 +35,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "vars";
+@import "common";
 
-.entity {
+.entity-container {
   width: 100%;
-  display: table;
+  position: relative;
-
+  padding: 0 !important;
-  .status-container {
-    width: 2.5em;
-    height: 1.5em;
-    display: table-cell;
-    vertical-align: middle;
-    position: relative;
-
-    .loading {
-      position: absolute;
-      bottom: 0;
-      transform: translate(50%, -50%);
-      width: 1em;
-      height: 1em;
-    }
-
-    .error {
-      color: $error-fg;
-      margin-left: .5em;
-    }
-  }
-
-  .icon-container,
-  .component-container {
-    height: 100%;
-    display: table-cell;
-    vertical-align: middle;
-  }
-
-  .component-container {
-    width: calc(100% - #{$icon-container-size});
-  }
 }
 </style>

platypush/backend/http/webapp/src/components/panels/Entities/EntityIcon.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="entity-icon-container">
+    <img src="@/assets/img/spinner.gif" class="loading" v-if="loading">
+    <i class="fas fa-circle-exclamation error" v-else-if="error" />
+    <Icon v-bind="icon" v-else />
+  </div>
+</template>
+
+<script>
+import Icon from "@/components/elements/Icon";
+
+export default {
+  name: "EntityIcon",
+  components: {Icon},
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+
+    error: {
+      type: Boolean,
+      default: false,
+    },
+
+    icon: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      component: null,
+      modalVisible: false,
+    }
+  },
+
+  computed: {
+    type() {
+      let entityType = (this.entity.type || '')
+      return entityType.charAt(0).toUpperCase() + entityType.slice(1)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "vars";
+
+.entity-icon-container {
+  width: 2.5em;
+  height: 1.5em;
+  margin-top: 0.25em;
+  position: relative;
+  text-align: center;
+
+  .loading {
+    position: absolute;
+    bottom: 0;
+    transform: translate(50%, -50%);
+    width: 1em;
+    height: 1em;
+  }
+
+  .error {
+    color: $error-fg;
+    margin-left: .5em;
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/panels/Entities/EntityMixin.vue

@@ -0,0 +1,38 @@
+<script>
+import Utils from "@/Utils"
+
+export default {
+  name: "EntityMixin",
+  mixins: [Utils],
+  emits: ['input'],
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+
+    error: {
+      type: Boolean,
+      default: false,
+    },
+
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      modalVisible: false,
+    }
+  },
+
+  computed: {
+    type() {
+      let entityType = (this.value.type || '')
+      return entityType.charAt(0).toUpperCase() + entityType.slice(1)
+    },
+  },
+}
+</script>

platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue

@@ -78,7 +78,7 @@
 
     <div v-for="value, attr in entity.data || {}" :key="attr">
       <div class="table-row" v-if="value != null">
-        <div class="title" v-text="attr" />
+        <div class="title" v-text="prettify(attr)" />
         <div class="value" v-text="'' + value" />
       </div>
     </div>

platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue

@@ -1,36 +1,32 @@
 <template>
-  <div class="switch-container">
+  <div class="entity switch-container">
-    <div class="col-10 label">
+    <div class="head">
-      <div class="name" v-text="value.name" />
+      <div class="col-1 icon">
-    </div>
+        <EntityIcon :icon="value.meta?.icon || {}"
+          :loading="loading" :error="error" />
+      </div>
 
-    <div class="col-2 switch pull-right">
+      <div class="col-9 label">
-      <ToggleSwitch :value="value.state" @input="toggle"
+        <div class="name" v-text="value.name" />
-        @click.stop :disabled="loading || value.is_read_only" />
+      </div>
+
+      <div class="col-2 switch pull-right">
+        <ToggleSwitch :value="value.state" @input="toggle"
+          @click.stop :disabled="loading || value.is_read_only" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import ToggleSwitch from "@/components/elements/ToggleSwitch"
-import Utils from "@/Utils"
+import EntityIcon from "./EntityIcon"
+import EntityMixin from "./EntityMixin"
 
 export default {
   name: 'Switch',
-  components: {ToggleSwitch},
+  components: {ToggleSwitch, EntityIcon},
-  emits: ['input'],
+  mixins: [EntityMixin],
-  mixins: [Utils],
-  props: {
-    value: {
-      type: Object,
-      required: true,
-    },
-
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-  },
 
   methods: {
     async toggle(event) {
@@ -51,7 +47,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "vars";
+@import "common";
 
 .switch-container {
   .switch {

platypush/backend/http/webapp/src/components/panels/Entities/common.scss

@@ -0,0 +1,52 @@
+@import "vars";
+
+.entity {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .head {
+    padding: 0.75em 0.25em;
+
+    .label {
+      margin-top: 0.25em;
+    }
+
+    &.expanded {
+      background: $selected-bg;
+      font-weight: bold;
+    }
+
+    .pull-right {
+      display: inline-flex;
+      align-items: center;
+      direction: rtl;
+      padding-right: 0.5em;
+
+      :deep(.power-switch) {
+        margin-top: 0.25em;
+      }
+    }
+  }
+
+  .body {
+    @extend .fade-in;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5em;
+    background: linear-gradient(0deg, $default-bg-5, $default-bg-2);
+    border-top: 1px solid $border-color-1;
+    box-shadow: $border-shadow-bottom;
+  }
+
+  button {
+    height: 2em;
+    background: none;
+    border: none;
+    padding: 0 0 0 1em;
+
+    &:hover {
+      color: $default-hover-fg;
+    }
+  }
+}