hippo-fw 0.9.8 → 0.9.9

data/client/hippo/lib/lazy-getter.js

@@ -0,0 +1,31 @@
+// credit to https://github.com/jayphelps/core-decorators/blob/master/src/lazy-initialize.js
+export default function lazyGetter(target, key, descriptor) {
+    const {
+        configurable, enumerable, initializer, value,
+    } = descriptor;
+
+    return {
+        configurable,
+        enumerable,
+
+        get() {
+            // This happens if someone accesses the
+            // property directly on the prototype
+            if (this === target) {
+                return null;
+            }
+
+            const ret = initializer ? initializer.call(this) : value;
+
+            Object.defineProperty(this, key, {
+                configurable,
+                enumerable,
+                writable: false,
+                value: ret,
+            });
+
+            return ret;
+        },
+
+    };
+}

data/client/hippo/lib/util.js

@@ -1,8 +1,9 @@
 import logger from 'loglevel';
 import {
     trim, isDate, isNaN, isError, isElement, isFunction, isBoolean, isRegExp,
-    isNumber, isObject, isEmpty, isNil, isString, each,
+    isNumber, isObject, isEmpty, isNil, isString, isArray, each,
 } from 'lodash';
+import { isObservableArray } from 'mobx';
 import pluralize from 'pluralize';
 import classnames from 'classnames';
 import { getColumnProps } from 'react-flexbox-grid';
@@ -104,3 +105,7 @@ export function isBlank(value) {
         return isNil(value);
     }
 }
+
+export function isArrayLike(value) {
+    return isObservableArray(value) || isArray(value);
+}

data/client/hippo/models/base.js

@@ -2,13 +2,14 @@ import PropTypes from 'prop-types';
 import {
     findModel,
 } from 'mobx-decorated-models';
+import { readonly } from 'core-decorators';
 import invariant from 'invariant';
 import {
     isEmpty, isNil, find, extend, assign, pick, map, isArray,
 } from 'lodash';
 
 import { action, observable, computed } from 'mobx';
-
+import './date-type';
 import Sync from './sync';
 import Config from '../config';
 import { toSentence, humanize } from '../lib/util';
@@ -70,14 +71,18 @@ export class BaseModel {
         }
     }
 
-    get isModel() { return true; }
+    @readonly isModel = true;
 
     @observable syncInProgress = false;
     @observable lastServerMessage = '';
     @observable errors = {};
 
     @computed get errorMessage() {
-        return this.errors ? toSentence(map(this.errors, (v, k) => `${humanize(k)} ${v}`)) : '';
+        return this.errors ? toSentence(
+            map(this.errors, (v, k) => (
+                'base' === k ? v : `${humanize(k)} ${v}`
+            )),
+        ) : '';
     }
 
     @computed get isValid() {

data/client/hippo/models/config.js

@@ -1,5 +1,5 @@
 import { observable, observe } from 'mobx';
-import { keysIn, pick, assign, get } from 'lodash';
+import { pickBy, assign, get, hasIn, isNil } from 'lodash';
 import { persist, create as createHydrator } from 'mobx-persist';
 
 import Extensions from '../extensions';
@@ -13,13 +13,18 @@ export default class Config {
     @persist @observable access_token;
     @persist @observable root_view;
     @persist @observable assets_path_prefix = '/assets';
+    @persist @observable print_path_prefix = '/print';
     @persist @observable website_domain;
     @persist @observable product_name;
+    @persist @observable support_email;
+
     @persist('list') @observable screen_ids = [];
     @persist @observable user_info;
     @persist('object') @observable logo;
     @observable user;
+    @observable environment;
     @observable isIntialized = false;
+    @observable subscription_plans = [];
 
     static create(hydrationConfig) {
         const hydrate = createHydrator(hydrationConfig);
@@ -35,7 +40,7 @@ export default class Config {
     }
 
     update(attrs) {
-        assign(this, pick(attrs, keysIn(this)));
+        assign(this, pickBy(attrs, (v, k) => !isNil(v) && hasIn(this, k)));
         Extensions.setBootstrapData(attrs);
     }
 

data/client/hippo/models/date-type.js

@@ -0,0 +1,14 @@
+import { registerCustomType } from 'mobx-decorated-models';
+import moment from 'moment-timezone';
+
+registerCustomType('fdate', {
+
+    serialize(date) {
+        return date.toISOString();
+    },
+
+    deserialize(dateLikeThing) {
+        return moment(dateLikeThing);
+    },
+
+});

data/client/hippo/models/decorators.js

@@ -1,8 +1,8 @@
 import {
-    isEmpty, isArray, isNumber, isObject, isString, partial, defaults, isNil, isDate,
+    isEmpty, isArray, isNumber, isObject, isString, partial, defaults, isNil,
 } from 'lodash';
 import invariant from 'invariant';
-
+import moment from 'moment';
 import { intercept, isObservableArray, isObservableObject } from 'mobx';
 
 import {
@@ -16,13 +16,13 @@ const VALIDATORS = {
     string: isString,
     array(a) { return isArray(a) || isObservableArray(a); },
     object(o) { return isObject(o) || isObservableObject(o); },
-    date:   isDate,
+    date(d) { return moment.isMoment(d); },
 };
 
 const COERCE = {
     date(change) {
-        if (!isDate(change.newValue)) {
-            change.newValue = new Date(change.newValue); // eslint-disable-line no-param-reassign
+        if (!moment.isMoment(change.newValue)) {
+            change.newValue = moment(change.newValue); // eslint-disable-line no-param-reassign
         }
     },
 };

data/client/hippo/models/pub_sub.js

@@ -1,5 +1,5 @@
 import { Atom, when, reaction } from 'mobx';
-import ActionCable from 'actioncable';
+import ActionCable from '../lib/action_cable';
 import { BaseModel } from './base';
 import User from '../user';
 import Config from '../config';

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

@@ -72,7 +72,10 @@ export default class ArrayResult extends Result {
     }
 
     rowAsObject(index) {
-        const row = this.rows[index];
+        return this.convertRowToObject(this.rows[index]);
+    }
+
+    convertRowToObject(row) {
         const obj = {};
         this.query.info.loadableFields.forEach((f) => {
             const value = row[f.dataIndex] || f.defaultValue;

data/client/hippo/models/subscription.js

@@ -0,0 +1,35 @@
+import Big from 'big.js';
+import { map } from 'lodash';
+import Config from '../config';
+import {
+    BaseModel, identifiedBy, identifier, field, session, computed,
+} from './base';
+
+@identifiedBy('hippo/subscription')
+export default class Subscription extends BaseModel {
+
+    @computed static get all() {
+        return map(Config.subscription_plans, plan => new Subscription(plan));
+    }
+
+    @identifier id;
+    @field name;
+    @field description;
+    @field price;
+
+    @field nonce;
+    @session authorization;
+
+    @computed get formattedPrice() {
+        return Big(this.price).round(2).toFixed(2);
+    }
+
+    @computed get costDescription() {
+        return `${this.formattedPrice} per month`;
+    }
+
+    @computed get nameAndCost() {
+        return `${this.name} at ${this.costDescription}`;
+    }
+
+}

data/client/hippo/models/sync.js

@@ -107,7 +107,7 @@ const peformMobxyRequest = action('SyncforModel', (mobxObj, options = {}) => {
             mobxObj.errors = { network: e };
             mobxObj.syncInProgress = undefined;
             mobxObj.lastServerMessage = e.toString();
-            return {};
+            return mobxObj;
         }));
 });
 

data/client/hippo/models/tenant.js

@@ -1,8 +1,10 @@
 import { observable, computed } from 'mobx';
-import { first } from 'lodash';
+import { find, first } from 'lodash';
 import {
     BaseModel, identifiedBy, field, identifier,
 } from './base';
+import Extensions from '../extensions';
+import Subscription from './subscription';
 import Config from '../config';
 
 const CACHED = observable.box();
@@ -22,22 +24,33 @@ export default class Tenant extends BaseModel {
     }
 
     static bootstrap(data) {
+        Extensions.fireOnInitialized();
         Tenant.current.update(data);
         if (data.bootstrap) {
             Config.update(data.bootstrap);
         }
+        Extensions.fireOnAvailable();
     }
 
     @identifier({ type: 'string' }) identifier = 'current';
     @field name;
     @field email;
     @field slug;
+    @field subscription_id;
 
+    @computed get hasSubscription() {
+        return Boolean(this.subscription);
+    }
 
     @computed get domain() {
         return `${this.slug}.${Config.website_domain}`;
     }
 
+    @computed get subscription() {
+        return this.subscription_id ?
+            find(Subscription.all, { id: this.subscription_id }) : null;
+    }
+
     set syncData(data) {
         Tenant.bootstrap(data);
     }

data/client/hippo/react/component-not-found.jsx

@@ -1,23 +1,19 @@
-import React from 'react';
+import React from 'react'; // eslint-disable-line no-unused-vars
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { classify } from '../lib/util';
 
-export default class ComponentNotFound extends React.PureComponent {
-
-    static propTypes = {
-        extension: PropTypes.shape({
-            identifier: PropTypes.string,
-        }),
-    }
-
-    render() {
-        const identifier = get(this.props.extension, 'identifier', 'UnknownExtension');
-        return (
-            <div className="fancy-header">
-                <h1>{classify(identifier)}.rootElement() did not return an element to render!</h1>
-            </div>
-        );
-    }
-
+export default function ComponentNotFound(props) {
+    const identifier = get(props.extension, 'identifier', 'UnknownExtension');
+    return (
+        <div className="fancy-header">
+            <h1>{classify(identifier)}.rootElement() did not return an element to render!</h1>
+        </div>
+    );
 }
+
+ComponentNotFound.propTypes = {
+    extension: PropTypes.shape({
+        identifier: PropTypes.string,
+    }),
+};

data/client/hippo/screens/async-loading.jsx

@@ -0,0 +1,46 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+import Spinning from 'grommet/components/icons/Spinning';
+import FormRefreshIcon from 'grommet/components/icons/base/FormRefresh';
+import AlertIcon from 'grommet/components/icons/base/Alert';
+import Button from 'grommet/components/Button';
+import { asyncComponent } from 'react-async-component';
+import { observer } from 'mobx-react';
+import cn from 'classnames';
+
+const ErrorComponent = observer(({ screen, retry }) => (
+    <div
+        data-screen-id={screen.definition.id}
+        className={cn('hippo-screen', 'async-loading', 'error', { 'is-active': screen.isActive })}
+    >
+        <div className="content">
+            <h4><AlertIcon /> Failed to load {screen.definition.title}…</h4>
+            <Button
+                icon={<FormRefreshIcon />}
+                onClick={retry}
+                label="Retry"
+            />
+        </div>
+    </div>
+));
+
+
+const LoadingComponent = observer(({ screen }) => (
+    <div
+        data-screen-id={screen.definition.id}
+        className={cn('hippo-screen', 'async-loading', 'is-loading', { 'is-active': screen.isActive })}
+    >
+        <div className="content">
+            <h4><Spinning /> Loading {screen.definition.title}…</h4>
+        </div>
+    </div>
+));
+
+
+export default function asyncLoading({ screen, resolve }) {
+    return asyncComponent({
+        ErrorComponent,
+        LoadingComponent,
+        resolve,
+        screen,
+    });
+}

data/client/hippo/screens/definition.js

@@ -8,7 +8,8 @@ import Instance, { displaying } from './instance';
 import Registry from './index';
 import Group from './group';
 
-export { asyncComponent } from 'react-async-component';
+export asyncComponent from './async-loading';
+
 
 @identifiedBy('hippo/screen/definition')
 export default class ScreenDefinition extends BaseModel {

data/client/hippo/screens/preferences.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { action } from 'mobx';
+import { Row } from 'react-flexbox-grid';
+import Screen from '../components/screen';
+import { Toolbar, SaveButton } from '../components/toolbar';
+import {
+    Form, Field, FormState, nonBlank, validEmail,
+} from '../components/form';
+import User from '../user';
+
+@observer
+export default class Preferences extends React.PureComponent {
+
+    static propTypes = {
+        screen: PropTypes.instanceOf(Screen.Instance).isRequired,
+    }
+
+    formState = new FormState()
+
+    componentWillMount() {
+        User.fetch();
+        this.formState.setFromModel(User);
+    }
+
+    @action.bound onSave() {
+        if (this.formState.isValid) {
+            this.formState.persistTo(User)
+                .then(() => User.save())
+                .then(() => this.formState.setFromModel(User));
+        } else {
+            this.formState.exposeErrors();
+        }
+    }
+
+    render() {
+        return (
+            <Form screen={this.props.screen} state={this.formState}>
+                <Toolbar>
+                    <SaveButton
+                        model={User}
+                        onClick={this.onSave}
+                    />
+                </Toolbar>
+                <h4>Account information:</h4>
+                <Row>
+                    <Field xs={6} name="login" validate={nonBlank} />
+                    <Field xs={6} name="name" validate={nonBlank} />
+                    <Field sm={6} xs={12} name="email" validate={validEmail} />
+                    <Field sm={6} xs={12} name="password" type="password" />
+                </Row>
+            </Form>
+        );
+    }
+
+}

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

@@ -5,13 +5,11 @@ 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 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 { Toolbar, SaveButton } from '../components/toolbar';
 import ScreenInstance from '../screens/instance';
 import Extensions from '../extensions';
 import MailerConfig from './system-settings/mailer-config';
@@ -20,7 +18,7 @@ import TenantSettings from  './system-settings/tenant';
 import './system-settings/system-settings.scss';
 
 @observer
-export default class SystemSettings extends React.PureComponent {
+export default class SystemSettings extends React.Component {
 
     @observable settings = new Settings();
     extensionPanelRefs = new Map();
@@ -79,12 +77,12 @@ export default class SystemSettings extends React.PureComponent {
     render() {
         return (
             <Screen {...this.props}>
-                <Header fixed>
+                <Toolbar>
                     <SaveButton
                         model={this.settings}
                         onClick={this.onSave}
                     />
-                </Header>
+                </Toolbar>
                 <Heading>{this.props.screen.definition.title}</Heading>
                 <Warning message={this.settings.errorMessage} />
                 <TenantSettings ref={this.setTenantRef} />