From f301fd7e6914710e35fb6cf6c493b084bdf43589 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <info@fabiomanganiello.com>
Date: Sun, 10 Apr 2022 14:27:32 +0200
Subject: [PATCH] Added standard NoItems component to handle visualization of
 no-results divs

---
 .../src/components/elements/NoItems.vue       | 51 +++++++++++++++++++
 .../src/components/panels/Entities/Index.vue  |  6 ++-
 .../http/webapp/src/style/themes/light.scss   |  1 +
 3 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/elements/NoItems.vue

diff --git a/platypush/backend/http/webapp/src/components/elements/NoItems.vue b/platypush/backend/http/webapp/src/components/elements/NoItems.vue
new file mode 100644
index 000000000..db0278cb8
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/elements/NoItems.vue
@@ -0,0 +1,51 @@
+<template>
+<div class="no-items-container">
+  <div class="no-items fade-in">
+    <slot />
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: "NoItems",
+}
+</script>
+
+<style lang="scss" scoped>
+.no-items-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .no-items {
+    min-width: 100%;
+    max-width: 100%;
+
+    @include from($tablet) {
+      min-width: 80%;
+    }
+
+    @include from($desktop) {
+      min-width: 50%;
+      max-width: 35em;
+    }
+
+    @include from($fullhd) {
+      min-width: 33%;
+    }
+
+    background: $background-color;
+    margin: 1em;
+    padding: 1em;
+    font-size: 1.5em;
+    color: $no-items-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 1em;
+    box-shadow: $border-shadow-bottom;
+  }
+}
+</style>
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 714928da1..59f63be17 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
@@ -7,7 +7,8 @@
     </div>
 
     <div class="groups-canvas">
-      <div class="groups-container">
+      <NoItems v-if="!Object.keys(displayGroups || {})?.length">No entities found</NoItems>
+      <div class="groups-container" v-else>
         <div class="group fade-in" v-for="group in displayGroups" :key="group.name">
           <div class="frame">
             <div class="header">
@@ -43,6 +44,7 @@
 import Utils from "@/Utils"
 import Loading from "@/components/Loading";
 import Icon from "@/components/elements/Icon";
+import NoItems from "@/components/elements/NoItems";
 import Entity from "./Entity.vue";
 import Selector from "./Selector.vue";
 import icons from '@/assets/icons.json'
@@ -50,7 +52,7 @@ import meta from './meta.json'
 
 export default {
   name: "Entities",
-  components: {Loading, Icon, Entity, Selector},
+  components: {Loading, Icon, Entity, Selector, NoItems},
   mixins: [Utils],
 
   data() {
diff --git a/platypush/backend/http/webapp/src/style/themes/light.scss b/platypush/backend/http/webapp/src/style/themes/light.scss
index b3e793378..9b2b269f7 100644
--- a/platypush/backend/http/webapp/src/style/themes/light.scss
+++ b/platypush/backend/http/webapp/src/style/themes/light.scss
@@ -11,6 +11,7 @@ $default-fg: black !default;
 $default-fg-2: #23513a !default;
 $default-fg-3: #195331b3 !default;
 $header-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default;
+$no-items-color: #555555;
 
 //// Notifications
 $notification-bg: rgba(185, 255, 193, 0.9) !default;