Merge pull request #94 from AppBakerZ/categoryLoaderWithStyling

Category loader with styling

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);
+}, CategoriesPage);
+

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{

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;