From 2a4e1e2bf3de6d142ea29b9b9340f3365998c523 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 17 Jan 2019 18:58:28 +0100
Subject: [PATCH] Added empty component

---
 components/Empty.vue                          | 57 +++++++++++++++++++
 pages/moderation/index.vue                    | 22 +++----
 .../system/components/layout/Space/Space.vue  |  8 ++-
 .../system/components/layout/Space/style.scss |  6 +-
 4 files changed, 76 insertions(+), 17 deletions(-)
 create mode 100644 components/Empty.vue

diff --git a/components/Empty.vue b/components/Empty.vue
new file mode 100644
index 000000000..7d699d7d8
--- /dev/null
+++ b/components/Empty.vue
@@ -0,0 +1,57 @@
+<template>
+  <ds-space
+    class="hc-empty"
+    margin="x-large"
+    centered
+  >
+    <ds-text>
+      <img
+        :src="iconPath"
+        width="80"
+        class="hc-empty-icon"
+        style="margin-bottom: 5px"
+        alt="Empty"
+      ><br>
+      <ds-text
+        class="hc-empty-message"
+        color="softer"
+      >
+        {{ message }}
+      </ds-text>
+    </ds-text>
+  </ds-space>
+</template>
+
+<script>
+export default {
+  name: 'HcEmpty',
+  props: {
+    /**
+     * Icon that should be shown
+     * @options messages|events|alert|tasks|docs|file
+     */
+    icon: {
+      type: String,
+      required: true,
+      validator: value => {
+        return value.match(/(messages|events|alert|tasks|docs|file)/)
+      }
+    },
+    /**
+     * Message that appears under the icon
+     */
+    message: { type: String, required: true }
+  },
+  computed: {
+    iconPath() {
+      return `/img/empty/${this.icon}.svg`
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.hc-empty-icon {
+  padding-bottom: $font-space-large;
+}
+</style>
diff --git a/pages/moderation/index.vue b/pages/moderation/index.vue
index d9afc58af..40dba1504 100644
--- a/pages/moderation/index.vue
+++ b/pages/moderation/index.vue
@@ -74,27 +74,21 @@
         </nuxt-link>
       </template>
     </ds-table>
-    <ds-section
-      v-else
-      centered
-    >
-      <ds-text>
-        <img
-          src="/img/empty-state.svg"
-          width="80"
-          style="margin-bottom: 5px"
-          alt="Empty"
-        ><br>
-        <b>NO REPORTS</b>
-      </ds-text>
-    </ds-section>
+    <hc-empty
+      icon="alert"
+      message="Glückwunsch, es gibt nichts zu moderieren."
+    />
   </ds-card>
 </template>
 
 <script>
 import gql from 'graphql-tag'
+import HcEmpty from '~/components/Empty.vue'
 
 export default {
+  components: {
+    HcEmpty
+  },
   data() {
     return {
       Report: []
diff --git a/styleguide/src/system/components/layout/Space/Space.vue b/styleguide/src/system/components/layout/Space/Space.vue
index e19bb0996..2efc2ce6e 100644
--- a/styleguide/src/system/components/layout/Space/Space.vue
+++ b/styleguide/src/system/components/layout/Space/Space.vue
@@ -2,7 +2,11 @@
   <component
     :is="tag"
     :style="styles"
-    class="ds-space">
+    class="ds-space"
+    :class="[
+      centered && `ds-space-centered`
+    ]"
+  >
     <slot />
   </component>
 </template>
@@ -49,7 +53,7 @@ export default {
     /**
      * Center content vertacally and horizontally
      */
-    center: {
+    centered: {
       type: Boolean,
       default: false
     },
diff --git a/styleguide/src/system/components/layout/Space/style.scss b/styleguide/src/system/components/layout/Space/style.scss
index b96a9437a..203986a94 100644
--- a/styleguide/src/system/components/layout/Space/style.scss
+++ b/styleguide/src/system/components/layout/Space/style.scss
@@ -1,3 +1,7 @@
 .ds-space {
   @include reset;
-}
\ No newline at end of file
+}
+
+.ds-space-centered {
+  text-align: center;
+}