hippo-fw 0.9.6 → 0.9.7

data/client/hippo/components/date-time.scss

@@ -1,38 +1,3 @@
 #hippo-root {
-    @import '~input-moment/dist/input-moment.css';
-    .date-time.component {
-
-        .tab {
-            display: none;
-            &.active { display: block; }
-        }
-
-        .tabs {
-            > * { padding: 0.23rem; }
-            margin-bottom: 10px;
-            .grommetux-control-icon { margin-right: 0.5rem; }
-        }
-
-        .toolbar {
-            display: flex;
-            justify-content: space-between;
-            button {
-                min-width: 30px;
-                padding: 0;
-                &.next-month {
-                    &:before {
-                        content: ">";
-                        display: block;
-                    }
-                }
-                &.prev-month {
-                    &:before {
-                        content: "<";
-                        display: block;
-                    }
-                }
-            }
-        }
-    }
-
+    @import '~flatpickr/dist/themes/material_orange.css';
 }

data/client/hippo/components/form/api.js

@@ -3,7 +3,7 @@
 }] */
 import { observable, computed, when, action } from 'mobx';
 import {
-    pick, isFunction, mapValues, every, get, set, filter, isNil, each,
+    pick, isFunction, mapValues, every, get, set, filter, isNil, each, extend,
 } from 'lodash';
 
 export class FormField {
@@ -26,7 +26,7 @@ export class FormField {
 
     update(attrs) {
         each(pick(attrs, [
-            'name', 'default', 'help', 'validate',
+            'name', 'default', 'help', 'validate', 'value',
         ]), (v, k) => {
             this[k] = isFunction(v) ? v.call(this) : v;
         });
@@ -91,7 +91,7 @@ export class FormState {
         if (field) {
             field.update(attrs);
         } else {
-            field = new FormField(name, attrs);
+            field = new FormField(name, extend({}, attrs, { value: get(this.values, name) }));
             this.fields.set(name, field);
         }
         return field;
@@ -131,6 +131,7 @@ export class FormState {
 
     @action
     set(values) {
+        this.values = values;
         this.fields.forEach((field, name) => {
             const value = get(values, name);
             field.value = isNil(value) ? '' : value;

data/client/hippo/components/form/fields.jsx

@@ -13,6 +13,8 @@ import SelectWrapper   from './fields/select-wrapper';
 import TextWrapper     from './fields/text-wrapper';
 import CheckBoxWrapper from './fields/checkbox-wrapper';
 import Label           from './fields/label';
+import TimeZoneSelect  from '../../components/time-zone-select';
+
 import './fields/form-field.scss';
 
 const TypesMapping = {
@@ -21,6 +23,7 @@ const TypesMapping = {
     label:    Label,
     select:   SelectWrapper,
     number:   NumberInput,
+    timezone: TimeZoneSelect,
     checkbox: CheckBoxWrapper,
 };
 
@@ -32,12 +35,14 @@ export default class FormField extends React.PureComponent {
         name:  PropTypes.string.isRequired,
         className: PropTypes.string,
         type: PropTypes.string,
+        tabIndex: PropTypes.number,
     }, Col.PropTypes)
 
     static defaultProps = {
         label:     '',
         className: '',
         type:      'text',
+        tabIndex: 0,
     }
 
     focus() {
@@ -61,7 +66,7 @@ export default class FormField extends React.PureComponent {
 
     render() {
         const {
-            name, className, autoFocus, type, children, label,
+            name, className, autoFocus, type, children, label, tabIndex,
             validate: _, formState: __, help: ___, ...otherProps
         } = getColumnProps(this.props);
 
@@ -76,6 +81,7 @@ export default class FormField extends React.PureComponent {
                 >
                     <InputTag
                         name={name}
+                        tabIndex={tabIndex}
                         autoFocus={autoFocus}
                         ref={this.setRef}
                         value={this.field.value || ''}

data/client/hippo/components/form/fields/date-wrapper.jsx

@@ -8,7 +8,7 @@ import DateTime  from '../../date-time';
 @observer
 export default class DateWrapper extends React.PureComponent {
     static defaultProps = {
-        format: 'M/D/YYYY h:mm a',
+        format: 'M/d/Y h:iK',
     }
     static childContextTypes = { onDropChange: PropTypes.func }
     @observable isSelecting;
@@ -26,9 +26,9 @@ export default class DateWrapper extends React.PureComponent {
         this.isSelecting = active;
     }
 
-    @action.bound onDateChange(date) {
-        this.dateValue = date;
-        this.props.onChange({ target: { value: this.dateValue } });
+    @action.bound onDateChange({ target: { value } }) {
+        this.dateValue = value;
+        this.props.onChange({ target: { value } });
     }
 
     @action.bound onBlur(ev) {

data/client/hippo/components/icon.jsx

@@ -1,3 +1,12 @@
-import Icon from 'react-fontawesome';
+import React from 'react'; // eslint-disable-line no-unused-vars
+import FAIcon from 'react-fontawesome';
+import cn from 'classnames';
+
+const Icon = (props) => {
+    const { className, ...otherProps } = props;
+    return (
+        <FAIcon className={cn('icon', className)} {...otherProps} />
+    );
+};
 
 export default Icon;

data/client/hippo/components/query-builder.jsx

@@ -74,12 +74,17 @@ class Clause extends React.PureComponent {
         this.props.clause.value = ev.target.value;
     }
 
+    @action.bound
+    setMenuRef(ref) {
+        this.menuRef = ref;
+    }
+
     render() {
         const { clause } = this.props;
         return (
             <Box direction='row' pad={{ between: 'small' }}>
                 <Menu
-                    ref={ref => (this.menuRef = ref)}
+                    ref={this.setMenuRef}
                     size='large'
                     pad='small'
                     closeOnClick={false} icon={<ClauseFilter clause={clause} />}

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

@@ -53,7 +53,7 @@ export default class QueryLayer extends React.PureComponent {
                         flex='grow'
                     >
                         <Box flex="grow">
-                            <Heading tag="h3" margin="none">Find {title}</Heading>
+                            <Heading tag="h3" margin="none">{title}</Heading>
                         </Box>
                         <Button plain icon={<CloseIcon />} onClick={onClose} />
                     </Box>

data/client/hippo/components/save-button.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { computed } from 'mobx';
+import { get } from 'lodash';
+import cn from 'classnames';
+
+import Button from 'grommet/components/Button';
+import Spinning from 'grommet/components/icons/Spinning';
+import SaveIcon from 'grommet/components/icons/base/Save';
+import { BaseModel } from '../models/base';
+
+
+@observer
+export default class SaveButton extends React.PureComponent {
+    static propTypes = {
+        busy: PropTypes.bool,
+        model: PropTypes.instanceOf(BaseModel),
+        busyLabel: PropTypes.string,
+        label: PropTypes.string,
+    }
+
+    static defaultProps = {
+        label: 'Save',
+        busyLabel: 'Saving…',
+    }
+
+    @computed get isBusy() {
+        return this.props.busy || get(this.props, 'model.syncInProgress.isUpdate');
+    }
+
+    @computed get label() {
+        return this.isBusy ? this.props.busyLabel : this.props.label;
+    }
+
+    @computed get icon() {
+        return this.isBusy ? <Spinning /> : <SaveIcon />;
+    }
+
+    render() {
+        // eslint-disable-next-line no-unused-vars
+        const { label, icon, props: { busyLabel, busy, model, label: _, ...props } } = this;
+
+        return (
+            <Button
+                {...props}
+                primary
+                className={cn('save-button', this.props.className)}
+                icon={icon}
+                disabled={busy}
+                label={label}
+            />
+        );
+    }
+}

data/client/hippo/components/text-editor.jsx

@@ -16,6 +16,11 @@ import { plugins, defaultPlugin } from './text-editor/plugins';
 import DisplayModeToggle from './text-editor/display-modes';
 import './text-editor/text-editor.scss';
 
+const editorInstance = new Editor({
+    plugins,
+    editables: [createEmptyState()],
+    defaultPlugin,
+});
 
 @observer
 export default class TextEditor extends React.PureComponent {
@@ -32,11 +37,7 @@ export default class TextEditor extends React.PureComponent {
     componentWillMount() {
         const content = toJS(this.props.defaultContent);
         this.content = isEmpty(content) ? createEmptyState() : content;
-        this.editor = new Editor({
-            plugins,
-            editables: [this.content],
-            defaultPlugin,
-        });
+        editorInstance.trigger.editable.add(this.content);
     }
 
     @action.bound
@@ -56,21 +57,21 @@ export default class TextEditor extends React.PureComponent {
             >
                 <div className="text-editor">
                     <DisplayModeToggle
-                        editor={this.editor}
+                        editor={editorInstance}
                         onSave={this.onSave}
                     >
                         {this.props.children}
                     </DisplayModeToggle>
                     <div className="text-editor-content">
                         <Editable
-                            editor={this.editor}
+                            editor={editorInstance}
                             id={this.content.id}
                             onAddImage={this.props.onAddImage}
                             onChange={this.onEditStateChange}
                         />
                     </div>
-                    <Trash editor={this.editor}/>
-                    <Toolbar editor={this.editor} />
+                    <Trash editor={editorInstance}/>
+                    <Toolbar editor={editorInstance} />
                 </div>
 
             </Provider>

data/client/hippo/components/text-editor/text-editor.scss

@@ -2,7 +2,6 @@
 
 .grommet .text-editor {
 
-    border: 1px solid #ddd;
     flex: 1;
     display: flex;
     flex-direction: column;

data/client/hippo/components/time-zone-select.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'grommet/components/Select';
+import { observer } from 'mobx-react';
+import { action, computed, observable } from 'mobx';
+import { filter } from 'lodash';
+import moment from 'moment-timezone';
+
+
+@observer
+export default class TimeZoneSelect extends React.PureComponent {
+    static propTypes = {
+        value: PropTypes.string,
+        onChange: PropTypes.func.isRequired,
+    }
+
+    static defaultProps = {
+        value: '',
+    }
+
+    @observable currentSearch;
+
+    choices = moment.tz.names();
+
+    get value() {
+        return this.props.value || moment.tz.guess();
+    }
+
+    @action.bound filterFn(tz) {
+        return this.currentSearch.test(tz);
+    }
+
+    @computed get names() {
+        if (this.currentSearch) {
+            return filter(moment.tz.names(), this.filterFn);
+        }
+        return this.choices;
+    }
+
+    @action.bound onSearch({ target: { value } }) {
+        this.currentSearch = new RegExp(`^${value}|/${value}`, 'i');
+    }
+
+    @action.bound
+    onChange({ value }) {
+        this.props.onChange({ value, target: { value } });
+    }
+
+    render() {
+        return (
+            <Select
+                placeHolder='None'
+                options={this.names}
+                onSearch={this.onSearch}
+                value={this.value}
+                onChange={this.onChange}
+            />
+        );
+    }
+}

data/client/hippo/models/asset.js

@@ -73,13 +73,12 @@ export default class Asset extends BaseModel {
         });
     }
 
-
     @computed get isDirty() {
-        return Boolean(this.isNew || !this.file);
+        return Boolean(this.file);
     }
 
     @computed get exists() {
-        return !!(this.file || this.id);
+        return !!(this.file || this.file_data);
     }
 
     @computed get isImage() {
@@ -117,9 +116,15 @@ export default class Asset extends BaseModel {
         }
         return fetch(`${Config.api_path}${Config.assets_path_prefix}`, options)
             .then(resp => resp.json())
+            .then(json => this.set(json.data))
             .then((json) => {
-                this.file = undefined;
+                if (this.file) {
+                    if (this.file.preview && window.URL.revokeObjectURL) {
+                        window.URL.revokeObjectURL(this.file.preview);
+                    }
+                    this.file = undefined;
+                }
                 return json;
-            }).then(json => this.set(json.data));
+            });
     }
 }

data/client/hippo/models/base.js

@@ -101,7 +101,7 @@ export class BaseModel {
     }
 
     @action reset() {
-        this.constructor.assignableKeys.forEach(k => (this[k] = null));
+        this.constructor.assignableKeys.forEach((k) => { this[k] = null; });
     }
 
     set syncData(data) {

data/client/hippo/models/pub_sub.js

@@ -1,69 +1,12 @@
 import { Atom, when, reaction } from 'mobx';
 import ActionCable from 'actioncable';
-import invariant from 'invariant';
-import { isEmpty, mapValues } from 'lodash';
+import { BaseModel } from './base';
 import User from '../user';
 import Config from '../config';
-
 import PubSubCableChannel from './pub_sub/channel';
+import PubSubMap from './pub_sub/map';
 
-let PubSub;
-
-class PubSubMap {
-    constructor(modelKlass) {
-        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);
-                PubSub.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];
-            PubSub.channel.unsubscribe(this.channelForId(id));
-        } else {
-            models.splice(indx, 1);
-        }
-    }
-}
-
-PubSub = {
+const PubSub = {
 
     types: new WeakMap(),
 
@@ -75,7 +18,9 @@ PubSub = {
         this.mapForModel(model).remove(model);
     },
 
-    onModelChange(model, id, data) {
+    onModelChange(modelId, id, data) {
+        const model = BaseModel.findDerived(modelId);
+        if (!model) { return; }
         const map = this.types.get(model);
         if (map) {
             map.onChange(id, data);
@@ -86,7 +31,7 @@ PubSub = {
         const klass = model.constructor;
         let map = this.types.get(klass);
         if (!map) {
-            map = new PubSubMap(klass);
+            map = new PubSubMap(klass, this.channel);
             this.types.set(klass, map);
         }
         return map;
@@ -95,6 +40,7 @@ PubSub = {
 
     onLoginChange() {
         if (User.isLoggedIn) {
+            if (PubSub.cable) { return; }
             const host = Config.api_host.replace(/^http/, 'ws');
             const url = `${host}${Config.api_path}/cable?token=${Config.access_token}`;
             ActionCable.startDebugging();
@@ -109,14 +55,23 @@ PubSub = {
 
 };
 
+export default PubSub;
+
 export function onBoot() {
-    reaction(
-        () => User.isLoggedIn,
-        PubSub.onLoginChange,
-        { fireImmediately: true },
-    );
+    PubSub.onLoginChange();
 }
 
+when(
+    () => Config.isIntialized,
+    () => {
+        reaction(
+            () => User.isLoggedIn,
+            PubSub.onLoginChange,
+            { fireImmediately: true },
+        );
+    },
+);
+
 export function stop() {
     PubSub.kill();
 }