From 92de403f214520547e5c9362a2301c49cbc5c9b1 Mon Sep 17 00:00:00 2001
From: Syed Asher Ahmed <syedasherahmed@yahoo.com>
Date: Wed, 12 Apr 2017 16:41:28 +0000
Subject: [PATCH] categories loader and its styling  issue #57

---
 .../ui/components/categories/Categories.jsx   | 42 +++++++++++++++----
 .../ui/components/categories/tableTheme.scss  |  1 +
 imports/ui/components/categories/theme.scss   | 31 ++++++++++++++
 3 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/imports/ui/components/categories/Categories.jsx b/imports/ui/components/categories/Categories.jsx
index 24530fc..1ff74b4 100755
--- a/imports/ui/components/categories/Categories.jsx
+++ b/imports/ui/components/categories/Categories.jsx
@@ -174,6 +174,15 @@ class CategoriesPage extends Component {
             }
         });
 
+        const addCategory =
+            <div className={theme.categoryNothing}>
+                <span className={theme.errorShow}>you do not have any categories</span>
+                <div className={theme.addCategoryBtn}>
+                    <Button type='button' icon='add' raised primary onClick={this.openPopup.bind(this, 'add')} />
+                </div>
+                <span className={theme.errorShow}>add some to show</span>
+            </div>;
+
         return (
             <div style={{ flex: 1, display: 'flex', position: 'relative', overflowY: 'auto' }}>
                 <div className={theme.categoriesContent}>
@@ -188,11 +197,15 @@ class CategoriesPage extends Component {
                             theme={buttonTheme}/>
                     </div>
                     <Card theme={tableTheme}>
-                        <Table
-                            selectable={false}
-                            heading={false}
-                            model={model}
-                            source={categories}/>
+                        {this.props.categoriesLoading ? <Loader accent/> : this.props.categoriesExists ?
+                            <Table className={theme.table} theme={tableTheme}
+                                   selectable={false}
+                                   heading={false}
+                                   model={model}
+                                   source={categories}/>
+
+                            : addCategory
+                        }
                     </Card>
                 </div>
                 {this.popupTemplate()}
@@ -207,10 +220,21 @@ CategoriesPage.propTypes = {
 
 export default createContainer(() => {
     Meteor.subscribe('categories');
+    const categoriesHandle = Meteor.subscribe('categories');
+    const categoriesLoading = !categoriesHandle.ready();
+    const categories = Categories.find({
+        parent: null
+    }, {sort: {createdAt: -1}}).fetch();
+    const children = Categories.find({
+        parent: {$exists: true}
+    }, {sort: {createdAt: -1}}).fetch();
+    const categoriesExists = !categoriesLoading && !!categories.length;
 
     return {
-        categories: Categories.find({
-            parent: null
-        }, {sort: {createdAt: -1}}).fetch()
+        categories,
+        children,
+        categoriesLoading,
+        categoriesExists
     };
-}, CategoriesPage);
\ No newline at end of file
+}, CategoriesPage);
+
diff --git a/imports/ui/components/categories/tableTheme.scss b/imports/ui/components/categories/tableTheme.scss
index 0f29fce..fd4f6f1 100644
--- a/imports/ui/components/categories/tableTheme.scss
+++ b/imports/ui/components/categories/tableTheme.scss
@@ -2,6 +2,7 @@
 @import "~react-toolbox/lib/button/config";
 
 .card{
+  min-height: $unit * 15;
   table{
     padding: $unit * 2 $unit * 2.5;
     tr{
diff --git a/imports/ui/components/categories/theme.scss b/imports/ui/components/categories/theme.scss
index 4227930..f84df43 100644
--- a/imports/ui/components/categories/theme.scss
+++ b/imports/ui/components/categories/theme.scss
@@ -49,6 +49,37 @@
     }
   }
 }
+.categoryNothing{
+  margin: $unit * 5 0 $unit * 5 0;
+  .errorShow{
+    display: block;
+    text-align: center;
+    font-size: $font-size-big + 0.2;
+    text-transform: uppercase;
+    color: $color-text;
+    &:first-child{
+      margin-bottom: $unit * 3;
+    }
+  }
+  .addCategoryBtn{
+    text-align: center;
+    button{
+      border-radius: 50%;
+      width: $unit * 7.5;
+      height: $unit * 7.5;
+      padding: 0;
+      min-width: $unit * 7.5;
+      text-align: center;
+      margin-bottom: $unit * 2.5;
+      font-size: $font-size-big + 2.7;
+      span{
+        color: $color-primary-dark;
+        text-transform: lowercase;
+        padding-left: $unit - 0.1;
+      }
+    }
+  }
+}
 .dialogContent{
   > div{
     margin-bottom: $unit * 2;