Maintenance wip

.gitignore

@@ -13,3 +13,5 @@ dist/*
 .jshintrc
 
 build/*
+
+npm-debug.log

.scss-lint.yml

@@ -1,4 +1,4 @@
-scss_files: ./src
+scss_files: ./scss
 
 linters:
   SelectorFormat:

package.json

@@ -47,23 +47,27 @@
   "dependencies": {
     "babel-loader": "^5.3.2",
     "classnames": "^2.1.3",
-    "d2": "0.0.11",
+    "d2": "0.0.16",
     "d2-flux": "^0.4.0",
+    "d2-ui": "0.0.1",
     "d2-ui-basicfields": "^0.4.1",
     "d2-ui-button": "0.0.2",
     "d2-ui-datatable": "0.0.4",
+    "d2-ui-detailsbox": "0.0.4",
     "d2-ui-icon": "0.0.2",
     "d2-ui-pagination": "0.0.4",
     "d2-utils": "0.0.4",
     "jquery": "^2.1.4",
     "loglevel": "^1.4.0",
+    "material-ui": "^0.12.1",
     "react-router": "^0.13.3",
     "react-select": "^0.5.5",
+    "react-sticky": "^2.5.2",
+    "react-tap-event-plugin": "^0.1.7",
     "rx": "^3.1.2"
   },
   "pre-commit": [
     "lint",
-    "validate",
-    "test"
+    "validate"
   ]
 }

scss/List/List.scss

@@ -1,3 +1,24 @@
+@import 'susy';
+
 .list {
   color: inherit;
 }
+
+.data-table-wrap {
+  @include span(9 of 9 last);
+
+  opacity: 0;
+  transition: width .3s linear;
+  transition-delay: .3s;
+  width: 100%;
+
+  &.smaller {
+    @include span(6 of 9);
+  }
+}
+
+.details-box-wrap.show-as-column {
+  @include span(3 of 9 last);
+
+  opacity: 1;
+}

scss/SideBar/SideBar.scss

@@ -1,40 +1,27 @@
-$sidebar__background-color: #f7f7f7;
-$sidebar__border-color: #e1e1e1;
-$sidebar__border-style: 1px solid;
-$sidebar--item__text-color: #303030;
-$sidebar--item__hover-color: #EEEEEE;
-
-@mixin search-box($border-color) {
-  width: 100%;
-  padding: .5rem 1rem;
-  border-radius: .5rem;
-  border: 1px solid $border-color;
-  outline: none;
-  box-sizing: border-box;
-}
+$sidebar--background-color: #F7F7F7;
+$sidebar--border-color: #E1E1E1;
+$sidebar--border-style: 1px solid;
+$sidebar--item--text-color: #303030;
+$sidebar--item--hover-color: #EEE;
 
 .sidebar {
   padding: 1rem;
 
-  .search-sidebar-items {
-    @include search-box($sidebar__border-color);
-  }
-
   ul {
-    padding-left: 0;
     list-style: none;
+    padding-left: 0;
   }
 
   li {
-    border-bottom: $sidebar__border-style $sidebar__border-color;
+    border-bottom: $sidebar--border-style $sidebar--border-color;
 
     &:hover {
-      background: $sidebar--item__hover-color;
+      background: $sidebar--item--hover-color;
     }
   }
 
   a {
-    color: $sidebar--item__text-color;
+    color: $sidebar--item--text-color;
     display: block;
     padding: 1rem;
     text-decoration: none;

scss/maintenance.scss

@@ -1,45 +1,36 @@
-@import "normalize";
+@import 'normalize';
 
 // Component stylesheets from dependencies
 @import '../node_modules/d2-ui-datatable/css/DataTable';
 @import '../node_modules/d2-ui-pagination/css/Pagination';
 @import '../node_modules/d2-ui-basicfields/css/BasicFields';
 @import '../node_modules/d2-ui-button/css/DefaultButton';
+@import '../node_modules/d2-ui-detailsbox/css/DetailsBox';
+@import '../node_modules/d2-ui/css/IndicatorExpressionManager';
 
 // Other imports
 @import 'susy';
 
-$sidebar-background-color: #f7f7f7;
-$sidebar-border-color: #e1e1e1;
-$sidebar-border-style: 1px solid;
+@import '../scss/List/List';
 
-/**
- * D2 Mixins
- */
-@mixin search-box($border-color) {
-  width: 100%;
-  padding: .5rem 1rem;
-  border-radius: .5rem;
-  border: 1px solid $border-color;
-  outline: none;
-  box-sizing: border-box;
-}
-//End mixins
+$sidebar-background-color: #F7F7F7;
+$sidebar-border-color: #E1E1E1;
+$sidebar-border-style: 1px solid;
 
 //Basic for all
 * {
   box-sizing: border-box;
 }
 
 html {
-  font-size: 12px;
+  font-size: 14px;
 }
 
 //Components
 @import './SideBar/sidebar';
 
 //App
-#app {
+.app {
   @include container();
 }
 
@@ -49,16 +40,16 @@ html {
   background: $sidebar-background-color;
   border-right: $sidebar-border-style $sidebar-border-color;
   height: 100%;
-  position: fixed;
   overflow: hidden;
+  position: fixed;
   top: 0;
 }
 
 .sidebar-container--hide-scroll-bar {
   height: 100%;
+  margin-right: -2rem;
   overflow-x: hidden;
   overflow-y: auto;
-  margin-right: -2rem;
   padding-right: 2rem;
 }
 
@@ -71,9 +62,14 @@ html {
 
 //list
 .search-list-items {
-  padding-bottom: 1rem;
+  //padding-bottom: 1rem;
 }
 
-.search-list-items--input {
-  @include search-box(#e1e1e1);
+// Needed to override the inline style set by the component
+// scss-lint:disable ImportantRule
+.details-box-wrap .sticky {
+  left: initial !important;
+  margin-right: 2rem;
+  margin-top: 2rem;
+  width: 22%;
 }

src/App/App.component.js

@@ -5,11 +5,44 @@ import {RouteHandler} from 'react-router';
 import HeaderBar from '../HeaderBar/HeaderBar.component';
 import MainContent from '../MainContent/MainContent.component';
 import SideBar from '../SideBar/SideBarContainer.component';
+import SnackbarContainer from '../Snackbar/SnackbarContainer.component';
+import {init, config} from 'd2';
+import AppWithD2 from 'd2-ui/app/AppWithD2.component';
+import log from 'loglevel';
+import appTheme from './app.theme';
+
+log.setLevel(log.levels.INFO);
+
+const ThemeManager = require('material-ui/lib/styles/theme-manager');
+
+// Needed for onTouchTap
+// Can go away when react 1.0 release
+// Check this repo:
+// https://github.com/zilverline/react-tap-event-plugin
+import injectTapEventPlugin from 'react-tap-event-plugin';
+injectTapEventPlugin();
+
+// D2 pre-init config
+// config.i18n.sources.add('/i18n/i18n_global.properties');
+config.baseUrl = 'http://localhost:8080/dhis/api';
+
+const withMuiContext = Object.assign(AppWithD2.childContextTypes, {muiTheme: React.PropTypes.object});
+class App extends AppWithD2 {
+    childContextTypes: withMuiContext
+
+    getChildContext() {
+        return Object.assign({}, super.getChildContext(), {
+            muiTheme: ThemeManager.getMuiTheme(appTheme),
+        });
+    }
 
-const App = React.createClass({
     render() {
         const classList = classes('app');
 
+        if (!this.state.d2) {
+            return (<div>App loading...</div>);
+        }
+
         return (
             <div className={classList}>
                 <HeaderBar />
@@ -23,9 +56,19 @@ const App = React.createClass({
                         <RouteHandler />
                     </div>
                 </MainContent>
+                <SnackbarContainer />
             </div>
         );
-    },
-});
+    }
+}
+App.defaultProps = {
+    d2: (() => {
+        return new Promise(resolve => {
+            setTimeout(() => {
+                resolve(init());
+            });
+        });
+    })(),
+};
 
 export default App;

src/App/app.theme.js

@@ -0,0 +1,20 @@
+const Colors = require('material-ui/lib/styles/colors');
+const ColorManipulator = require('material-ui/lib/utils/color-manipulator');
+const Spacing = require('material-ui/lib/styles/spacing');
+
+export default {
+    spacing: Spacing,
+    fontFamily: 'Roboto, sans-serif',
+    palette: {
+        primary1Color: Colors.cyan500,
+        primary2Color: Colors.cyan700,
+        primary3Color: Colors.lightBlack,
+        accent1Color: Colors.pinkA200,
+        accent2Color: Colors.grey100,
+        accent3Color: Colors.grey500,
+        textColor: Colors.darkBlack,
+        alternateTextColor: Colors.white,
+        borderColor: Colors.grey300,
+        disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
+    },
+};

src/EditModel/CloneModelContainer.component.js

@@ -0,0 +1,8 @@
+import objectActions from './objectActions';
+import {EditModelBase} from './EditModelContainer.component';
+
+export default class extends EditModelBase {
+    static willTransitionTo(transition, params) {
+        objectActions.getObjectOfTypeByIdAndClone({objectType: params.modelType, objectId: params.modelId});
+    }
+}