hippo-fw 0.9.1 → 0.9.2

data/client/hippo/components/master-detail.scss

@@ -0,0 +1,50 @@
+.master-detail-wrapper {
+
+    @keyframes slideOutLeft {
+        from { transform: translate3d(0, 0, 0);    }
+        to   { transform: translate3d(-50%, 0, 0); }
+    }
+
+    @keyframes slideInLeft {
+        from { transform: translate3d(-70%, 0, 0); }
+        to   { transform: translate3d(0, 0, 0);    }
+    }
+
+    display: flex;
+    flex: 1;
+    animation-duration: 0.5s;
+    animation-fill-mode: both;
+    .master,
+    .detail {
+        flex: 1;
+        display: flex;
+        animation-duration: 0.49s;
+        animation-fill-mode: both;
+    }
+    .detail {
+        display: none;
+    }
+    &.has-detail {
+        width: 200%;
+        animation-name: slideOutLeft;
+        .master {
+
+        }
+        .detail {
+            display: flex;
+        }
+    }
+    &.detail-visible {
+        width: 100%;
+        animation-name: initial;
+        .master {
+            display: none;
+        }
+    }
+    &.detail-removed {
+        animation-name: slideInLeft;
+        .master {
+            display: flex
+        }
+    }
+}

data/client/hippo/components/record-finder.jsx

@@ -4,7 +4,7 @@ import { inject, observer } from 'mobx-react';
 import { action, observable } from 'mobx';
 import { get } from 'lodash';
 
-import { Form, Field, FormFieldPropType, nonBlank } from 'hippo/components/form';
+import { Field } from 'hippo/components/form';
 
 import Button from 'grommet/components/Button';
 import SearchIcon from 'grommet/components/icons/base/Search';
@@ -17,7 +17,8 @@ import Query from '../models/query';
 import './record-finder/record-finder.scss';
 import QueryLayer from './record-finder/query-layer';
 
-@inject('formFields') @observer
+@inject('formState')
+@observer
 export default class RecordFinder extends React.PureComponent {
     static propTypes = {
         query: PropTypes.instanceOf(Query).isRequired,
@@ -25,7 +26,6 @@ export default class RecordFinder extends React.PureComponent {
         label: PropTypes.string,
         recordsTitle: PropTypes.string.isRequired,
         onRecordFound: PropTypes.func.isRequired,
-        formFields: FormFieldPropType,
     }
 
     @observable showingSearch = false;
@@ -43,7 +43,7 @@ export default class RecordFinder extends React.PureComponent {
     @action.bound
     onRecordSelect(model) {
         this.showingSearch = false;
-        this.props.formFields.get(this.props.name).value = model[this.props.name]
+        this.props.formState.get(this.props.name).value = model[this.props.name]
         this.props.onRecordFound(model);
     }
 
@@ -54,7 +54,7 @@ export default class RecordFinder extends React.PureComponent {
 
 
     get field() {
-        return this.props.fields[this.props.name];
+        return this.props.formState.fields.get(this.props.name);
     }
 
     loadCurrentSelection() {

data/client/hippo/components/tool-tip.jsx

@@ -0,0 +1,20 @@
+import React, { PureComponent } from 'react';
+import { Tooltip as Tippy } from 'react-tippy';
+
+import 'react-tippy/dist/tippy.css';
+
+// Use a wrapper component even though it doesn't really add any functionality
+// In the future we'll add a Manager wrapper so that multiple tooltips cannot be shown at once
+export default class ToolTip extends PureComponent {
+
+    render() {
+        const { children, ...tipProps } = this.props;
+        return (
+            <Tippy
+                {...tipProps}
+            >
+                {children}
+            </Tippy>
+        );
+    }
+}

data/client/hippo/config.js

@@ -1,17 +1,19 @@
-import { observable, autorun, observe } from 'mobx';
-import { keysIn, pick, assign, isString } from 'lodash';
+import { observable, observe } from 'mobx';
+import { keysIn, pick, assign, get } from 'lodash';
 import Extensions from './extensions';
 
 const STORAGE_KEY = 'hippo-user-data';
 
 class Config {
 
-    @observable api_host = window.location.origin;
+    @observable api_host = get(window, 'location.origin', '');
     @observable api_path = '/api';
     @observable access_token;
     @observable root_view;
     @observable assets_path_prefix = '/assets';
     @observable user;
+    @observable website_domain;
+    @observable product_name;
     @observable screens;
 
     constructor() {

data/client/hippo/extensions/base.js

@@ -20,4 +20,8 @@ export class BaseExtension {
     setBootstrapData(data) {
         this.data = data;
     }
+
+    @computed get domain() {
+        return window.location.hostname.split('.').slice(-2).join('.');
+    }
 }

data/client/hippo/lib/smooth-scroll.js

@@ -3,24 +3,24 @@ if (!window.Argosity) { window.Argosity = {}; }
 const DEFAULT_DURATION = 750; // milliseconds
 
 const EASE_IN_OUT = function(t) {
-    if (t < .5) { return 4 * t * t * t; } else { return ((t - 1) * ((2 * t) - 2) * ((2 * t) - 2)) + 1; }
+    if (0.5 >= t) {
+        return 4 * t * t * t;
+    }
+    return ((t - 1) * ((2 * t) - 2) * ((2 * t) - 2)) + 1;
 };
 
 const POSITION = function(start, end, elapsed, duration) {
     if (elapsed > duration) {
         return end;
-    } else {
-        return start + ((end - start) * EASE_IN_OUT(elapsed / duration));
     }
+    return start + ((end - start) * EASE_IN_OUT(elapsed / duration));
 };
 
-
 export default class SmoothScroll {
 
-    constructor(link, destination, options) {
+    constructor(link, destination, options = {}) {
         this.link = link;
         this.destination = destination;
-        if (options == null) { options = {}; }
         this.options = options;
         if (!(this.destination instanceof Element)) {
             this.destination = document.querySelector(this.destination);
@@ -31,7 +31,7 @@ export default class SmoothScroll {
         if (this.link && this.destination) {
             this.link.addEventListener('click', () => this.scrollToElement());
         } else {
-            console.warn("failed to setup link", this.link, this.destination);
+            console.warn("failed to setup link", this.link, this.destination); // eslint-disable-line
         }
     }
 
@@ -39,14 +39,13 @@ export default class SmoothScroll {
         return this.constructor.scroll(this.destination, this.options.duration || DEFAULT_DURATION);
     }
 
-    static scroll(destination, duration) {
-        if (duration == null) { duration = DEFAULT_DURATION; }
+    static scroll(destination, duration = DEFAULT_DURATION) {
         if (!(destination instanceof Element)) {
-            destination = document.querySelector(destination);
+            destination = document.querySelector(destination); // eslint-disable-line
         }
 
         if (!destination) {
-            console.warn("failed to scroll to", destination);
+            console.warn("failed to scroll to", destination); // eslint-disable-line
             return false;
         }
 
@@ -58,11 +57,13 @@ export default class SmoothScroll {
 
         const startTime = Date.now();
 
-        var step = function() {
+        function step() {
             const elapsed = Date.now() - startTime;
-            window.scroll(0, POSITION(startPos, endPos, elapsed, duration) );
-            if (elapsed < duration) { return window.requestAnimationFrame(step); }
-        };
+            window.scroll(0, POSITION(startPos, endPos, elapsed, duration));
+            if (elapsed < duration) {
+                window.requestAnimationFrame(step);
+            }
+        }
         return step();
     }
-};
+}

data/client/hippo/models/asset.js

@@ -1,5 +1,4 @@
-import { includes, get, isEmpty } from 'lodash';
-import qs from 'qs';
+import { includes, get } from 'lodash';
 import { observe } from 'mobx';
 import {
     BaseModel, identifiedBy, field, session, identifier, computed,
@@ -31,7 +30,6 @@ export default class Asset extends BaseModel {
 
     constructor(props) {
         super(props);
-
         observe(this, 'owner', ({ newValue: owner }) => {
             if (this.ownerSaveDisposer) { this.ownerSaveDisposer(); }
             if (!owner || !owner.isModel) { return; }
@@ -55,6 +53,10 @@ export default class Asset extends BaseModel {
         return !!this.file;
     }
 
+    @computed get exists() {
+        return !!(this.file || this.id);
+    }
+
     @computed get isImage() {
         return includes(IMAGES, this.mimeType);
     }
@@ -85,15 +87,11 @@ export default class Asset extends BaseModel {
         form.append('owner_id', this.owner.identifierFieldValue);
         form.append('owner_association', this.owner_association_name);
 
-        let url = `${Config.api_path}${Config.assets_path_prefix}`;
-        const query   = {};
+        const options = { method: 'POST', body: form, headers: {} };
         if (Config.access_token) {
-            query.jwt = Config.access_token;
-        }
-        if (!isEmpty(query)) {
-            url += `?${qs.stringify(query, { arrayFormat: 'brackets' })}`;
+            options.headers.Authorization = Config.access_token;
         }
-        return fetch(url, { method: 'POST', body: form })
+        return fetch(`${Config.api_path}${Config.assets_path_prefix}`, options)
             .then(resp => resp.json())
             .then((json) => {
                 this.file = undefined;

data/client/hippo/models/collection.js

@@ -1,6 +1,6 @@
 import { observable } from 'mobx';
 import invariant from 'invariant';
-import { extend, each, isArray, isObject, isEmpty } from 'lodash';
+import { extend, isArray, isObject } from 'lodash';
 import { createCollection } from 'mobx-decorated-models';
 
 import Sync from './sync';
@@ -50,9 +50,6 @@ export default class ModelCollection {
         return this;
     }
     create(models = [], options = {}) {
-        if (isObject(models) && isEmpty(options)) {
-            return extendAry(this.$model, [], models, this);
-        }
         return extendAry(this.$model, models, options, this);
     }
 }

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

@@ -1,7 +1,7 @@
 import {
-    isEmpty, isNil, extend, map, bindAll, omit, range, has,
+    isEmpty, isNil, extend, map, bindAll, omit, inRange, find, range,
 } from 'lodash';
-import { autorun, reaction, observe } from 'mobx';
+import { reaction, observe } from 'mobx';
 
 import Sync from '../sync';
 import Result from './result';
@@ -15,10 +15,10 @@ export default class ArrayResult extends Result {
     @belongsTo query;
     @observable totalCount = 0;
     @observable rows;
-    @observable isLoading;
     @observable rowUpdateCount = 0;
     @observable sortAscending;
     @observable sortField;
+    @observable.shallow loadingRows = [];
 
     constructor(attrs) {
         super(attrs);
@@ -139,14 +139,12 @@ export default class ArrayResult extends Result {
     }
 
     isRowLoading(index) {
-        return !!(this.rows.length > index && this.rows[index].isLoading);
+        return !!find(this.loadingRows, ([start, end]) => inRange(index, start, end));
     }
 
     fetch({ start = this.rows.length, limit = this.query.pageSize } = {}) {
-        if (start + limit >= this.rows.length) {
-            range(this.rows.length, start + limit).forEach(() => this.rows.push([]));
-        }
-        range(start, start + limit).forEach(i => (this.rows[i].isLoading = true));
+        const inProgress = [start, start + limit];
+        this.loadingRows.push(inProgress);
 
         const query = {};
         this.query.clauses.forEach((clause) => {
@@ -155,7 +153,7 @@ export default class ArrayResult extends Result {
             }
         });
 
-        const options = extend({}, this.query.syncOptions, {
+        const options = extend({}, omit(this.query.syncOptions, 'include'), {
             start,
             limit,
             total_count: 't',
@@ -179,8 +177,12 @@ export default class ArrayResult extends Result {
 
         return Sync.perform(this.query.info.syncUrl, options).then((resp) => {
             const rows = resp.data || [];
+            if (start > this.rows.length) {
+                range(this.rows.length, start).forEach(() => this.rows.push([]));
+            }
             this.rows.splice(start, Math.max(limit, rows.length), ...rows);
             this.totalCount = resp.total;
+            this.loadingRows.remove(inProgress);
             delete this.syncInProgress;
             return this;
         });

data/client/hippo/models/sync.js

@@ -64,15 +64,15 @@ function perform(urlPrefix, defaultOptions = {}) {
     });
 
     let url = `${Config.api_host}${urlPrefix}.json`;
-    if (Config.access_token) {
-        query.jwt = Config.access_token;
-    }
     if (!isEmpty(query)) {
         url += `?${qs.stringify(query, { arrayFormat: 'brackets' })}`;
     }
     if (!options.headers) { options.headers = {}; }
 
     options.headers['Content-Type'] = 'application/json';
+    if (Config.access_token) {
+        options.headers.Authorization = Config.access_token;
+    }
     return fetch(url, options)
         .then(resp => resp.json())
         .then((json) => {

data/client/hippo/models/tenant.js

@@ -0,0 +1,29 @@
+import { observable } from 'mobx';
+import {
+    BaseModel, identifiedBy, field, identifier, computed,
+} from './base';
+import Config from '../config';
+
+const CACHE = observable({
+    Tenant: undefined,
+});
+
+@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' });
+        }
+        return CACHE.Tenant;
+    }
+
+    @identifier id;
+    @field slug = Tenant.slug;
+    @field name;
+
+    @computed get domain() {
+        return `${this.slug}.${Config.website_domain}`;
+    }
+}

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

@@ -16,7 +16,7 @@ import {Row, Col} from 'react-flexbox-grid';
 import ScreenInstance from 'hippo/screens/instance';
 import Extensions from '../extensions';
 import MailerConfig from './system-settings/mailer-config';
-
+import TenantSettings from  './system-settings/tenant';
 import './system-settings/system-settings.scss';
 
 @observer
@@ -26,7 +26,7 @@ export default class SystemSettings extends React.PureComponent {
     extensionPanelRefs = new Map();
 
     static propTypes = {
-        screen:    PropTypes.instanceOf(ScreenInstance).isRequired,
+        screen: PropTypes.instanceOf(ScreenInstance).isRequired,
     }
 
     renderExtPanel(ext) {
@@ -56,6 +56,7 @@ export default class SystemSettings extends React.PureComponent {
     @action.bound
     onSave() {
         this.extensionPanelRefs.forEach(panel => invoke(panel, 'onSave'));
+        this.tenantSettings.onSave()
         this.settings.save();
     }
 
@@ -71,8 +72,7 @@ export default class SystemSettings extends React.PureComponent {
                     />
                 </Header>
                 <Heading>{this.props.screen.definition.title}</Heading>
-                {this.extensionPanels}
-
+                <TenantSettings ref={ts => this.tenantSettings = ts} />
                 <Heading tag="h3">Images</Heading>
                 <Row>
                     <Col sm={4} xs={12}>
@@ -86,6 +86,7 @@ export default class SystemSettings extends React.PureComponent {
                     settings={this.settings.settings}
                     registerForSave={panel => this.extensionPanelRefs.set('mail', panel)}
                 />
+                {this.extensionPanels}
             </Screen>
         );
     }

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

@@ -4,32 +4,26 @@ import { observer } from 'mobx-react';
 import { Row } from 'react-flexbox-grid';
 import Heading from 'grommet/components/Heading';
 
-import { Form, Field, FieldDefinitions, nonBlank, validEmail  } from 'hippo/components/form';
+import { Form, Field, FormState, nonBlank, validEmail  } from 'hippo/components/form';
 
 @observer
 export default class MailerConfig extends React.PureComponent {
 
-    fields = new FieldDefinitions({
-        user_name:  nonBlank,
-        password:   nonBlank,
-        address:    nonBlank,
-        from_email: validEmail,
-        from_name:  nonBlank,
-    })
+    formState = new FormState()
 
     @action.bound
     onSave() {
         if (!this.props.settings.smtp) { this.props.settings.smtp = {}; }
-        this.fields.persistTo(this.props.settings.smtp);
+        this.formState.persistTo(this.props.settings.smtp);
     }
 
     componentWillMount() {
         this.props.registerForSave(this);
-        this.fields.set(this.props.settings.smtp || {});
+        this.formState.set(this.props.settings.smtp || {});
     }
 
     componentWillReceiveProps(nextProps) {
-        this.fields.set(nextProps.settings.smtp || {});
+        this.formState.set(nextProps.settings.smtp || {});
     }
 
 
@@ -37,13 +31,13 @@ export default class MailerConfig extends React.PureComponent {
         return (
             <div className="section">
                 <Heading tag="h3">Email settings</Heading>
-                <Form fields={this.fields}>
+                <Form state={this.formState}>
                     <Row className="section">
-                        <Field md={4} xs={6} name="user_name" />
-                        <Field md={4} xs={6} name="password" type="password" />
-                        <Field md={4} xs={6} name="address" label="Server Address" />
-                        <Field md={4} xs={6} name="from_email" label="From Email" />
-                        <Field md={4} xs={6} name="from_name" label="From Name" />
+                        <Field md={4} xs={6} name="user_name" validate={nonBlank} />
+                        <Field md={4} xs={6} name="password" type="password" validate={nonBlank} />
+                        <Field md={4} xs={6} name="address" label="Server Address" validate={nonBlank} />
+                        <Field md={4} xs={6} name="from_email" label="From Email" validate={validEmail} />
+                        <Field md={4} xs={6} name="from_name" label="From Name" validate={nonBlank} />
                     </Row>
                 </Form>
             </div>