From 22b8b03cb23a2e84e81c4b445134482164f0a363 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 15 Jan 2023 20:02:50 +0100
Subject: [PATCH] Refactored EntityIcon component

---
 .../components/panels/Entities/Battery.vue    |  1 +
 .../panels/Entities/BinarySensor.vue          |  2 +-
 .../src/components/panels/Entities/Device.vue |  2 +-
 .../src/components/panels/Entities/Dimmer.vue |  2 +-
 .../components/panels/Entities/EntityIcon.vue | 22 ++++++++++++++-----
 .../components/panels/Entities/EnumSensor.vue |  2 +-
 .../components/panels/Entities/EnumSwitch.vue |  2 +-
 .../src/components/panels/Entities/Light.vue  |  8 +++++--
 .../panels/Entities/LinkQuality.vue           |  2 +-
 .../src/components/panels/Entities/Sensor.vue |  2 +-
 .../src/components/panels/Entities/Switch.vue |  6 +++--
 11 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Battery.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Battery.vue
index 89e7acd0..621977fd 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Battery.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Battery.vue
@@ -3,6 +3,7 @@
     <div class="head">
       <div class="col-1 icon">
         <EntityIcon
+          :entity="value"
           :icon="icon"
           :loading="loading"
           :error="error" />
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/BinarySensor.vue b/platypush/backend/http/webapp/src/components/panels/Entities/BinarySensor.vue
index 19625332..f52e643b 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/BinarySensor.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/BinarySensor.vue
@@ -3,7 +3,7 @@
     <div class="head">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue
index 91fe95f3..57d74bd9 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Device.vue
@@ -3,7 +3,7 @@
     <div class="head">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue
index 82b1be80..b6fbb609 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue
@@ -3,7 +3,7 @@
     <div class="head" :class="{collapsed: collapsed}">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="this.value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/EntityIcon.vue b/platypush/backend/http/webapp/src/components/panels/Entities/EntityIcon.vue
index 5137ae7c..9499878a 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/EntityIcon.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/EntityIcon.vue
@@ -4,7 +4,7 @@
       :style="colorFillStyle">
     <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="computedIcon" v-else />
+    <Icon v-bind="computedIconNormalized" v-else />
   </div>
 </template>
 
@@ -25,11 +25,16 @@ export default {
       default: false,
     },
 
-    icon: {
+    entity: {
       type: Object,
       required: true,
     },
 
+    icon: {
+      type: Object,
+      default: () => {},
+    },
+
     hasColorFill: {
       type: Boolean,
       default: false,
@@ -44,16 +49,23 @@ export default {
   },
 
   computed: {
+    computedIcon() {
+      let icon = {...(this.entity?.meta?.icon || {})}
+      if (Object.keys(this.icon || {}).length)
+        icon = this.icon
+      return {...icon}
+    },
+
     colorFill() {
-      return (this.hasColorFill && this.icon.color) ? this.icon.color : null
+      return this.hasColorFill && this.computedIcon.color
     },
 
     colorFillStyle() {
       return this.colorFill && !this.error ? {'background': this.colorFill} : {}
     },
 
-    computedIcon() {
-      const icon = {...this.icon}
+    computedIconNormalized() {
+      const icon = {...this.computedIcon}
       if (this.colorFill)
         delete icon.color
       return icon
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/EnumSensor.vue b/platypush/backend/http/webapp/src/components/panels/Entities/EnumSensor.vue
index 6d133d02..a404268e 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/EnumSensor.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/EnumSensor.vue
@@ -3,7 +3,7 @@
     <div class="head">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/EnumSwitch.vue b/platypush/backend/http/webapp/src/components/panels/Entities/EnumSwitch.vue
index 10e017c8..a3bb4eba 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/EnumSwitch.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/EnumSwitch.vue
@@ -3,7 +3,7 @@
     <div class="head" :class="{collapsed: collapsed}">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="this.value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Light.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Light.vue
index 2f06b586..4c2f3f07 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Light.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Light.vue
@@ -2,8 +2,12 @@
   <div class="entity light-container">
     <div class="head" :class="{collapsed: collapsed}">
       <div class="col-1 icon">
-        <EntityIcon :icon="icon" :hasColorFill="true"
-          :loading="loading" :error="error" />
+        <EntityIcon
+          :entity="value"
+          :icon="icon"
+          :hasColorFill="true"
+          :loading="loading"
+          :error="error" />
       </div>
 
       <div class="col-s-8 col-m-9 label">
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/LinkQuality.vue b/platypush/backend/http/webapp/src/components/panels/Entities/LinkQuality.vue
index d38d5eee..1928130c 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/LinkQuality.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/LinkQuality.vue
@@ -3,7 +3,7 @@
     <div class="head">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue
index 9dda493e..3e17c953 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Sensor.vue
@@ -3,7 +3,7 @@
     <div class="head">
       <div class="col-1 icon">
         <EntityIcon
-          :icon="value.meta?.icon || {}"
+          :entity="value"
           :loading="loading"
           :error="error" />
       </div>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue
index 980ceb0a..2e18d192 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue
@@ -2,8 +2,10 @@
   <div class="entity switch-container">
     <div class="head">
       <div class="col-1 icon">
-        <EntityIcon :icon="value.meta?.icon || {}"
-          :loading="loading" :error="error" />
+        <EntityIcon
+          :entity="value"
+          :loading="loading"
+          :error="error" />
       </div>
 
       <div class="col-9 label">