hippo-fw 0.9.6 → 0.9.7

data/client/hippo/models/pub_sub/channel.js

@@ -1,12 +1,12 @@
 import { omit } from 'lodash';
-import { action } from 'mobx';
+import { action, observable } from 'mobx';
 import { logger } from '../../lib/util';
-import { BaseModel } from '../base';
 
 const CHANNEL_SPLITTER = new RegExp('^(.*):(.*)/([^/]+)$');
 
 export default class PubSubCableChannel {
     constructor(pub_sub) {
+        this.callbacks = observable.map();
         this.channel = pub_sub.cable.subscriptions.create(
             'Hippo::API::PubSub', this,
         );
@@ -14,14 +14,31 @@ export default class PubSubCableChannel {
         this.pub_sub = pub_sub;
     }
 
-    subscribe(channel) {
+    subscribe(channel, cb) {
         logger.info(`[pubsub] subscribe to: ${channel}`);
+        if (cb) {
+            const callbacks = this.callbacks.get(channel) || observable([]);
+            callbacks.push(cb);
+            this.callbacks.set(channel, callbacks);
+        }
         this.channel.perform('on', { channel });
     }
 
-    unsubscribe(channel) {
+    unsubscribe(channel, cb) {
         logger.info(`[pubsub] unsubscribe from: ${channel}`);
-        this.channel.perform('off', { channel });
+        if (cb) {
+            const callbacks = this.callbacks.get(channel);
+            if (callbacks) {
+                callbacks.remove(cb);
+                if (callbacks.length) {
+                    this.callbacks.set(channel, callbacks);
+                } else {
+                    this.callbacks.delete(channel);
+                }
+            }
+        } else {
+            this.channel.perform('off', { channel });
+        }
     }
 
     @action.bound
@@ -29,8 +46,11 @@ export default class PubSubCableChannel {
         const [_, __, modelId, id] = Array.from(
             data.channel.match(CHANNEL_SPLITTER),
         );
-
-        const model = BaseModel.findDerived(modelId);
-        this.pub_sub.onModelChange(model, id, omit(data, 'channel'));
+        const callbacks = this.callbacks.get(`${modelId}/${id}`);
+        if (callbacks) {
+            callbacks.forEach(c => c(data));
+        } else {
+            this.pub_sub.onModelChange(modelId, id, omit(data, 'channel'));
+        }
     }
 }

data/client/hippo/models/pub_sub/map.js

@@ -0,0 +1,57 @@
+import invariant from 'invariant';
+import { isEmpty, mapValues } from 'lodash';
+
+export default class PubSubMap {
+    constructor(modelKlass, channel) {
+        this.channel = channel;
+        this.channel_prefix = modelKlass.identifiedBy;
+        this.map = Object.create(null);
+    }
+
+    channelForId(id) {
+        return `${this.channel_prefix}/${id}`;
+    }
+
+    forModel(model) {
+        const id = model[model.constructor.identifierFieldName];
+        let models = this.map[id];
+        if (!models) {
+            models = [];
+            this.map[id] = models;
+        }
+        return { id, models };
+    }
+
+    onChange(id, data) {
+        const models = this.map[id];
+        if (!isEmpty(models)) {
+            const update = mapValues(data.update, '[1]');
+            for (let i = 0; i < models.length; i += 1) {
+                models[i].set(update);
+            }
+        }
+    }
+
+    observe(model) {
+        const { id, models } = this.forModel(model);
+        if (!models.includes(model)) {
+            models.push(model);
+            if (1 === models.length) {
+                const channel = this.channelForId(id);
+                this.channel.subscribe(channel);
+            }
+        }
+    }
+
+    remove(model) {
+        const { id, models } = this.forModel(model);
+        const indx = models.indexOf(model);
+        invariant(-1 !== indx, 'Asked to remove model from pubsub but it was never observed');
+        if (1 === models.length) {
+            delete this.map[id];
+            this.channel.unsubscribe(this.channelForId(id));
+        } else {
+            models.splice(indx, 1);
+        }
+    }
+}

data/client/hippo/models/query/array-result.js

@@ -1,5 +1,5 @@
 import {
-    isEmpty, isNil, extend, map, bindAll, inRange, find, range,
+    isEmpty, isNil, extend, map, bindAll, inRange, find, range, isUndefined,
 } from 'lodash';
 import { reaction, observe, toJS } from 'mobx';
 
@@ -32,13 +32,14 @@ export default class ArrayResult extends Result {
         );
     }
 
-    @computed get updateKey() {
+    @computed get fingerprint() {
         return [
+            this.query.fingerprint,
             this.rows.length,
             (this.sortField ? this.sortField.id : 'none'),
             this.sortAscending,
             this.rowUpdateCount,
-        ].join('-');
+        ].join(';');
     }
 
     insertRow() {
@@ -73,7 +74,7 @@ export default class ArrayResult extends Result {
                 newValue.whenComplete(() => {
                     const row = this.rows[index];
                     this.query.info.loadableFields.forEach((f) => {
-                        if (model[f.id]) { row[f.dataIndex] = model[f.id]; }
+                        if (!isUndefined(model[f.id])) { row[f.dataIndex] = model[f.id]; }
                     });
                     this.rowUpdateCount += 1;
                 }, 99);

data/client/hippo/models/query/field.js

@@ -1,4 +1,5 @@
 import { get, includes } from 'lodash';
+import classname from 'classnames';
 import { titleize } from '../../lib/util';
 import {
     BaseModel, identifiedBy, session, belongsTo, identifier, computed, observable,
@@ -17,15 +18,14 @@ export default class Field extends BaseModel {
     @session loadable   = true;
     @session queryable  = true;
     @session sortable   = true;
-    @session textAlign  = 'left';
+    @session _className = '';
+    @session align  = 'left';
     @session dataType   = 'string'
     @session cellRenderer;
     @session defaultValue;
     @session fetchIndex;
     @session sortBy;
 
-    @observable format;
-    @observable component;
     @observable onColumnClick;
 
     @belongsTo query;
@@ -46,6 +46,22 @@ export default class Field extends BaseModel {
         return includes(['number'], this.queryType);
     }
 
+    set className(c) {
+        this._className = c;
+    }
+
+    @computed get headerClassName() {
+        return classname('header', this.className);
+    }
+
+    @computed get className() {
+        return classname(this._className, {
+            r: 'right' === this.align,
+            l: 'left' === this.align,
+            c: 'center' === this.align,
+        });
+    }
+
     @computed get dataIndex() {
         if (!this.loadable) { return null; }
 

data/client/hippo/models/system-setting.js

@@ -1,9 +1,10 @@
 import { merge } from 'lodash';
+import { when } from 'mobx';
 import {
     BaseModel, identifiedBy, identifier, belongsTo, field, computed,
 } from './base';
 import Sync  from './sync';
-
+import Config from '../config';
 import Asset from './asset';
 
 @identifiedBy('hippo/system-settings')
@@ -21,4 +22,18 @@ export default class SystemSettings extends BaseModel {
     @computed get syncUrl() {
         return this.constructor.syncUrl;
     }
+
+    get syncData() {
+        return this.serialize();
+    }
+
+    set syncData(data) {
+        super.syncData = data;
+        if (this.logo && this.logo.isDirty) {
+            when(
+                () => !this.logo.isDirty,
+                () => { Config.logo = this.logo.file_data; },
+            );
+        }
+    }
 }

data/client/hippo/models/tenant.js

@@ -4,18 +4,19 @@ import {
 } from './base';
 import Config from '../config';
 
-const CACHE = observable({
-    Tenant: undefined,
-});
+
+const CACHED = observable.box();
 
 @identifiedBy('hippo/tenant')
 export default class Tenant extends BaseModel {
     @computed static get current() {
-        if (!CACHE.Tenant) {
-            CACHE.Tenant = new Tenant();
-            CACHE.Tenant.fetch({ query: 'current' });
+        let tenant = CACHED.get();
+        if (!tenant) {
+            tenant = new Tenant();
+            CACHED.set(tenant);
+            tenant.fetch({ query: 'current' });
         }
-        return CACHE.Tenant;
+        return tenant;
     }
 
     @identifier id;

data/client/hippo/screens/system-settings.jsx

@@ -3,17 +3,16 @@ import PropTypes from 'prop-types';
 import { observable, action } from 'mobx';
 import { observer }   from 'mobx-react';
 import { map, compact, invoke } from 'lodash';
+import { Row, Col } from 'react-flexbox-grid';
 import Heading from 'grommet/components/Heading';
 import Header from 'grommet/components/Header';
-import Button from 'grommet/components/Button';
-import SaveIcon from 'grommet/components/icons/base/Save';
-
-import Screen from 'hippo/components/screen';
-import Asset  from 'hippo/components/asset';
-import Settings from 'hippo/models/system-setting';
 
-import { Row, Col } from 'react-flexbox-grid';
-import ScreenInstance from 'hippo/screens/instance';
+import Screen from '../components/screen';
+import Asset  from '../components/asset';
+import Settings from '../models/system-setting';
+import Warning from '../components/warning-notification';
+import SaveButton from '../components/save-button';
+import ScreenInstance from '../screens/instance';
 import Extensions from '../extensions';
 import MailerConfig from './system-settings/mailer-config';
 import TenantSettings from  './system-settings/tenant';
@@ -68,14 +67,13 @@ export default class SystemSettings extends React.PureComponent {
         return (
             <Screen {...this.props}>
                 <Header fixed>
-                    <Button
-                        primary
-                        icon={<SaveIcon />}
-                        label='Save'
+                    <SaveButton
+                        model={this.settings}
                         onClick={this.onSave}
                     />
                 </Header>
                 <Heading>{this.props.screen.definition.title}</Heading>
+                <Warning message={this.settings.errorMessage} />
                 <TenantSettings ref={this.setTenantRef} />
                 <Heading tag="h3">Images</Heading>
                 <Row>

data/client/hippo/screens/user-management/edit-form.jsx

@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 import { Row, Col } from 'react-flexbox-grid';
 
 import { observer }   from 'mobx-react';
-import { action } from 'mobx';
+import { observable, action } from 'mobx';
 
 import Box    from 'grommet/components/Box';
 import Button from 'grommet/components/Button';
-import Warning from 'hippo/components/warning-notification';
+import Warning from '../../components/warning-notification';
+import SaveButton from '../../components/save-button';
+import Query from '../../models/query';
 
-import Query from 'hippo/models/query';
-
-import { Form, Field, FormState, nonBlank, validEmail, booleanValue } from 'hippo/components/form';
+import { Form, Field, FormState, nonBlank, validEmail, booleanValue } from '../../components/form';
 
 @observer
 export default class EditForm extends React.PureComponent {
@@ -22,7 +22,7 @@ export default class EditForm extends React.PureComponent {
     }
 
     static desiredHeight = 300
-
+    @observable errorMessage;
     formState = new FormState();
 
     constructor(props) {
@@ -43,7 +43,7 @@ export default class EditForm extends React.PureComponent {
     @action.bound
     onSaved(user) {
         if (user.errors) {
-            this.errorMessage = user.lastServerMessage;
+            this.errorMessage = user.errorMessage;
         } else {
             this.props.onComplete();
         }
@@ -70,12 +70,11 @@ export default class EditForm extends React.PureComponent {
                     <Field md={4} xs={6} type="password" name="password" />
                     <Field md={4} xs={6} type="checkbox" name="is_admin" validate={booleanValue} />
                     <Col md={4} xs={6}>
-                        <Box direction="row">
+                        <Box direction="row" justify="between">
                             <Button label="Cancel" onClick={this.onCancel} accent />
-                            <Button
-                                label="Save"
+                            <SaveButton
                                 onClick={this.formState.isValid ? this.onSave : null}
-                                primary
+                                model={this.user}
                             />
                         </Box>
                     </Col>

data/client/hippo/workspace/index.jsx

@@ -70,19 +70,22 @@ class Workspace extends React.Component {
                 <LoginDialog />
                 <Sidebar
                     styles={{ sidebar: { zIndex: 5 } }}
-                    sidebar={<Menu onDockToggle={this.toggleSidebarDocked} />}
+                    sidebar={<Menu
+                        isOpen={this.sidebarOpen}
+                        isDocked={this.sidebarDocked}
+                        onCloseMenu={this.toggleSidebarDocked}
+                        onDockToggle={this.toggleSidebarDocked}
+                    />}
                     open={this.sidebarOpen}
                     docked={this.sidebarDocked}
                     onSetOpen={this.onSetSidebarOpen}
                 >
-
                     <Button
                         primary
                         icon={<CirclePlayIcon />}
                         onClick={this.toggleSidebarDocked}
                         className={cn('sidebar-toggle', { 'is-open': this.sidebarOpen })}
                     />
-
                     <Switch>
                         <Route name='screen' path="/:screenId/:identifier?" component={Screen} />
                         <Route component={NoMatch} />

data/client/hippo/workspace/menu-option.jsx

@@ -1,12 +1,9 @@
 import React from 'react';
-
 import PropTypes from 'prop-types';
-
 import { action } from 'mobx';
 import { observer } from 'mobx-react';
-import Icon from 'hippo/components/icon';
-
 import Anchor from 'grommet/components/Anchor';
+import Icon from '../components/icon';
 
 @observer
 export default class MenuOption extends React.Component {
@@ -31,8 +28,8 @@ export default class MenuOption extends React.Component {
         const { screen } = this.props;
         return (
             <Anchor path={`/${screen.id}/`} onClick={this.activateScreen}>
-                {screen.title}
                 <Icon name={screen.icon} />
+                {screen.title}
             </Anchor>
         );
     }

data/client/hippo/workspace/menu.jsx

@@ -5,9 +5,12 @@ import { isEmpty, get } from 'lodash';
 import PropTypes from 'prop-types';
 import Box     from 'grommet/components/Box';
 import Sidebar from 'grommet/components/Sidebar';
+import Button from 'grommet/components/Button';
+import CloseIcon from 'grommet/components/icons/base/Close';
 import Header  from 'grommet/components/Header';
 import Anchor  from 'grommet/components/Anchor';
 import Menu from 'grommet/components/Menu';
+import Icon from '../components/icon';
 import Group   from './menu-group';
 import Screens from '../screens';
 import MenuOption from './menu-option';
@@ -34,6 +37,7 @@ class Logout extends React.PureComponent {
         return (
             <Menu direction="column" align="start" justify="between" primary>
                 <Anchor label="Log Out" onClick={this.onLogoutClick}>
+                    <Icon name="sign-out" />
                     Log Out
                 </Anchor>
             </Menu>
@@ -41,7 +45,6 @@ class Logout extends React.PureComponent {
     }
 }
 
-
 const Logo = observer(() => {
     if (!get(Config, 'logo.thumbnail')) {
         if (!isEmpty(Config.product_name)) {
@@ -65,14 +68,23 @@ export default class WorkspaceMenu extends React.PureComponent {
         );
     }
 
+    renderClose() {
+        if (this.props.isOpen && !this.props.isDocked) {
+            return <Button icon={<CloseIcon />} onClick={this.props.onCloseMenu} plain />;
+        }
+        return null;
+    }
+
     render() {
         return (
             <Sidebar
                 full size="small" separator="right"
                 colorIndex="brand"
+                className="screen-selection-menu"
             >
                 <Header justify="between" size="large" pad={{ horizontal: 'medium' }}>
                     <Logo />
+                    {this.renderClose()}
                 </Header>
                 {Screens.activeGroups.map(g => <Group key={g.id} group={g} />)}
                 {this.renderUnGrouped()}