hippo-fw 0.9.5 → 0.9.6

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

@@ -1,12 +1,11 @@
-import React, { PureComponent } from 'react';
+import React 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 {
-
+export default class ToolTip extends React.PureComponent {
     render() {
         const { children, ...tipProps } = this.props;
         return (

data/client/hippo/components/warning-notification.jsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import React from 'react'; // eslint-disable-line no-unused-vars
 import PropTypes from 'prop-types';
 import Notification from 'grommet/components/Notification';
 
 export default function WarningNotification(props) {
-    if (!props.message){ return null; }
+    if (!props.message) { return null; }
     return (
         <Notification message={props.message} size="small" status="warning" />
     );
 }
 
 WarningNotification.propTypes = {
-    message: PropTypes.string
+    message: PropTypes.string,
 };

data/client/hippo/lib/date-range.js

@@ -0,0 +1,28 @@
+import { isString, isEmpty, map } from 'lodash';
+import {
+    identifiedBy,
+} from 'mobx-decorated-models';
+
+@identifiedBy('date-range')
+export default class DateRange {
+    constructor(range) {
+        if (isString(range) && !isEmpty(range)) {
+            [this.start, this.end] = map(range.split('...'), d => new Date(d));
+        } else if (range) {
+            this.start = range.start;
+            this.end = range.end;
+        }
+    }
+
+    toJSON() {
+        if (this.start && this.end) {
+            // this strange format is what PG user and is therefore what active record expects
+            return `[${this.start.toISOString()},${this.end.toISOString()})`;
+        }
+        return '';
+    }
+
+    static serialize(range) {
+        return (range ? range.toJSON() : '');
+    }
+}

data/client/hippo/lib/util.js

@@ -4,6 +4,8 @@ import {
     isNumber, isObject, isEmpty, isNil, isString, each,
 } from 'lodash';
 import pluralize from 'pluralize';
+import classnames from 'classnames';
+import { getColumnProps } from 'react-flexbox-grid';
 
 function lcDash(char, match, index) {
     return (0 === index ? '' : '_') + char.toLowerCase();
@@ -17,6 +19,10 @@ export function capitalize(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
+export function columnClasses(props, ...classes) {
+    return classnames(getColumnProps(props).className, ...classes);
+}
+
 export function dasherize(str) {
     return trim(str)
         .replace(/([A-Z])/g, lcDash)

data/client/hippo/models/asset.js

@@ -35,6 +35,10 @@ export default class Asset extends BaseModel {
         return Config.api_path + Config.assets_path_prefix;
     }
 
+    static urlForSize(data, size) {
+        const url = get(data, `${size}.id`);
+        return url ? `${Config.api_host}${this.syncUrl}/${url}` : null;
+    }
 
     @action.bound
     onOwnerChange({ newValue: owner }) {
@@ -93,9 +97,8 @@ export default class Asset extends BaseModel {
         return get(this, 'file.preview', this.urlFor('thumbnail'));
     }
 
-    urlFor(type = 'original') {
-        const url = get(this, `file_data.${type}.id`);
-        return url ? `${Config.api_host}${this.constructor.syncUrl}/${url}` : null;
+    urlFor(size = 'original') {
+        return this.constructor.urlForSize(this.file_data, size);
     }
 
     save() {

data/client/hippo/models/config.js

@@ -16,7 +16,7 @@ export default class Config {
     @persist @observable product_name;
     @persist('list') @observable screen_ids = [];
     @persist @observable user_info;
-
+    @persist('object') @observable logo;
     @observable user;
     @observable isIntialized = false;
 

data/client/hippo/models/pub_sub.js

@@ -1,8 +1,7 @@
 import { Atom, when, reaction } from 'mobx';
 import ActionCable from 'actioncable';
 import invariant from 'invariant';
-import { invoke, mapValues } from 'lodash';
-
+import { isEmpty, mapValues } from 'lodash';
 import User from '../user';
 import Config from '../config';
 
@@ -32,9 +31,11 @@ class PubSubMap {
 
     onChange(id, data) {
         const models = this.map[id];
-        if (models) {
+        if (!isEmpty(models)) {
             const update = mapValues(data.update, '[1]');
-            invoke(models, 'set', update);
+            for (let i = 0; i < models.length; i += 1) {
+                models[i].set(update);
+            }
         }
     }
 
@@ -43,7 +44,8 @@ class PubSubMap {
         if (!models.includes(model)) {
             models.push(model);
             if (1 === models.length) {
-                PubSub.channel.subscribe(this.channelForId(id));
+                const channel = this.channelForId(id);
+                PubSub.channel.subscribe(channel);
             }
         }
     }
@@ -93,8 +95,10 @@ PubSub = {
 
     onLoginChange() {
         if (User.isLoggedIn) {
-            const url = `${Config.api_host}${Config.api_path}/cable?token=${Config.access_token}`;
-            PubSub.cable = ActionCable.createConsumer(url);
+            const host = Config.api_host.replace(/^http/, 'ws');
+            const url = `${host}${Config.api_path}/cable?token=${Config.access_token}`;
+            ActionCable.startDebugging();
+            PubSub.cable = new ActionCable.Consumer(url);
             PubSub.channel = new PubSubCableChannel(PubSub);
         } else if (PubSub.cable) {
             PubSub.cable.disconnect();
@@ -144,6 +148,7 @@ export class PubSubAtom {
 }
 
 export function observePubSub(...models) {
+    if (!PubSub.channel) { return; }
     for (let i = 0; i < models.length; i += 1) {
         const model = models[i];
         if (!model.$pubSub) {

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

@@ -1,5 +1,5 @@
 import { omit } from 'lodash';
-
+import { action } from 'mobx';
 import { logger } from '../../lib/util';
 import { BaseModel } from '../base';
 
@@ -8,8 +8,9 @@ const CHANNEL_SPLITTER = new RegExp('^(.*):(.*)/([^/]+)$');
 export default class PubSubCableChannel {
     constructor(pub_sub) {
         this.channel = pub_sub.cable.subscriptions.create(
-            'pubsub', this,
+            'Hippo::API::PubSub', this,
         );
+        this.channel.received = this.received;
         this.pub_sub = pub_sub;
     }
 
@@ -23,11 +24,12 @@ export default class PubSubCableChannel {
         this.channel.perform('off', { channel });
     }
 
+    @action.bound
     received(data) {
-        const [channel, _, modelId, id] = Array.from(
+        const [_, __, modelId, id] = Array.from(
             data.channel.match(CHANNEL_SPLITTER),
         );
-        logger.info(`[pubsub] change recvd for: ${channel}`);
+
         const model = BaseModel.findDerived(modelId);
         this.pub_sub.onModelChange(model, id, omit(data, 'channel'));
     }

data/client/hippo/models/query.js

@@ -1,5 +1,5 @@
 import { get, isString, find, extend, toPairs } from 'lodash';
-import { action, reaction, observe } from 'mobx';
+import { action, reaction, observe, observable } from 'mobx';
 import {
     BaseModel, identifiedBy, field, belongsTo, hasMany, identifier, computed, session,
 } from './base';
@@ -30,7 +30,7 @@ export default class Query extends BaseModel {
     @session customSyncUrl;
 
     @session autoFetch = false;
-
+    @observable autoFetchDisposer;
     @field({ type: 'object' }) syncOptions = {};
 
     @hasMany({ model: Clause, inverseOf: 'query' }) clauses;
@@ -53,13 +53,17 @@ export default class Query extends BaseModel {
         [
             { id: 'like', label: 'Starts With', types: Types.LIKE_QUERY_TYPES },
             { id: 'eq', label: 'Equals' },
+            { id: 'contains', label: 'Contains', types: Types.LIKE_QUERY_TYPES },
             { id: 'lt', label: 'Less Than', types: Types.LESS_THAN_QUERY_TYPES },
             { id: 'gt', label: 'More Than', types: Types.LESS_THAN_QUERY_TYPES },
         ].forEach(op => this.operators.push(op));
         this.info = new Info(this);
         this.results = new ArrayResult({ query: this });
         if (0 === this.clauses.length) {
-            this.clauses.push({ });
+            const ff = find(this.fields, { queryable: true });
+            if (ff) {
+                this.clauses.push({ field: ff, operator: ff.preferredOperator });
+            }
         }
         if (attrs.sort) {
             const [fieldId, dir] = toPairs(attrs.sort)[0];
@@ -80,7 +84,7 @@ export default class Query extends BaseModel {
     close() {
         if (this.autoFetchDisposer) {
             this.autoFetchDisposer();
-            this.autoFetchDisposer = undefined;
+            this.autoFetchDisposer = null;
         }
     }
 
@@ -89,6 +93,15 @@ export default class Query extends BaseModel {
         return this.results.fetch({ start: 0 });
     }
 
+    get rows() {
+        return this.results.rows;
+    }
+
+    reset() {
+        this.clauses.clear();
+        this.results.reset();
+    }
+
     fetchSingle(query, queryOptions = {}) {
         const options = extend(queryOptions, this.syncOptions, { query });
         const { src: Src } = this;
@@ -102,10 +115,12 @@ export default class Query extends BaseModel {
             this._startAutoFetch();
         } else if (this.autoFetchDisposer) {
             this.autoFetchDisposer();
+            this.autoFetchDisposer = null;
         }
     }
 
     _startAutoFetch() {
+        if (this.autoFetchDisposer) { return; }
         this.autoFetchDisposer = reaction(
             () => this.fingerprint,
             this.fetch,

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

@@ -1,7 +1,7 @@
 import {
-    isEmpty, isNil, extend, map, bindAll, omit, inRange, find, range,
+    isEmpty, isNil, extend, map, bindAll, inRange, find, range,
 } from 'lodash';
-import { reaction, observe } from 'mobx';
+import { reaction, observe, toJS } from 'mobx';
 
 import Sync from '../sync';
 import Result from './result';
@@ -59,9 +59,10 @@ export default class ArrayResult extends Result {
     rowAsObject(index) {
         const row = this.rows[index];
         const obj = {};
-        this.query.info.loadableFields.forEach(
-            f => (obj[f.id] = (row[f.dataIndex] || f.defaultValue)),
-        );
+        this.query.info.loadableFields.forEach((f) => {
+            const value = row[f.dataIndex] || f.defaultValue;
+            if (!isNil(value)) { obj[f.id] = value; }
+        });
         return obj;
     }
 
@@ -84,7 +85,7 @@ export default class ArrayResult extends Result {
     fetchModelForRow(index, syncOptions = {}) {
         const model = this.modelForRow(index);
         return model.isNew ? Promise.resolve(model) :
-            model.fetch(extend({}, this.query.syncOptions, syncOptions));
+            model.fetch(extend({}, toJS(this.query.syncOptions), syncOptions));
     }
 
     onQuerySortChange() {
@@ -152,7 +153,7 @@ export default class ArrayResult extends Result {
             }
         });
 
-        const options = extend({}, omit(this.query.syncOptions, 'include'), {
+        const options = extend({}, toJS(this.query.syncOptions), {
             start,
             limit,
             total_count: 't',
@@ -170,7 +171,7 @@ export default class ArrayResult extends Result {
             };
         }
 
-        extend(options, omit(this.query.info.syncOptions, 'include'));
+        extend(options, toJS(this.query.info.syncOptions));
 
         this.syncInProgress = options;
 

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

@@ -1,26 +1,29 @@
-import { get, compact, first, filter, find, uniqueId } from 'lodash';
+import { get, compact, first, filter, uniqueId } from 'lodash';
+import { action, observe } from 'mobx';
 import {
-    BaseModel, identifiedBy, autorun, belongsTo, computed, observable,
+    BaseModel, identifiedBy, belongsTo, computed, observable, session,
 } from '../base';
 
 @identifiedBy('hippo/query/clause')
 export default class Clause extends BaseModel {
     @observable id = uniqueId('clause');
-
-    @observable value;
+    @session visible = true;
+    @session value;
     @belongsTo({ type: 'hippo/query' }) query;
 
     @belongsTo({ type: 'hippo/query/field' }) field;
     @belongsTo({ type: 'hippo/query/operator' }) operator;
 
-    @computed get description() {
-        return compact([get(this, 'field.title'), get(this, 'operator.id')]).join(' ');
-    }
-
     constructor(attrs) {
         super(attrs);
-        this.field = first(this.query.info.queryableFields);
-        autorun(this._updateOperatorOnFieldChange.bind(this));
+        if (!this.field) {
+            this.field = first(this.query.info.queryableFields);
+        }
+        observe(this, 'field', this.updateOperatorOnFieldChange, true);
+    }
+
+    @computed get description() {
+        return compact([get(this, 'field.title'), get(this, 'operator.id')]).join(' ');
     }
 
     @computed get validOperators() {
@@ -37,15 +40,20 @@ export default class Clause extends BaseModel {
 
     toParam() {
         const param = {};
-        const op = this.operator.id;
+        let op = this.operator.id;
         let value = this.value;
         if ('like' === op) { value += '%'; }
+        if ('contains' === op) {
+            op = 'like';
+            value = `%${value}%`;
+        }
         if ('n' === this.field.type) { value = parseFloat(value); }
         param[this.field.id] = 'eq' === op ? value : { op, value };
         return param;
     }
 
-    _updateOperatorOnFieldChange() {
-        this.operator = find(this.query.operators, o => o.isValidForField(this.field));
+    @action.bound
+    updateOperatorOnFieldChange() {
+        this.operator = this.field.preferredOperator;
     }
 }

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

@@ -18,7 +18,8 @@ export default class Field extends BaseModel {
     @session queryable  = true;
     @session sortable   = true;
     @session textAlign  = 'left';
-
+    @session dataType   = 'string'
+    @session cellRenderer;
     @session defaultValue;
     @session fetchIndex;
     @session sortBy;
@@ -38,7 +39,7 @@ export default class Field extends BaseModel {
     }
 
     @computed get queryType() {
-        return get(this.query.src.propertyOptions[this.id], 'type', 'string');
+        return get(this.query.src.propertyOptions[this.id], 'type', this.dataType);
     }
 
     @computed get isNumeric() {
@@ -59,4 +60,8 @@ export default class Field extends BaseModel {
         }
         return null;
     }
+
+    @computed get preferredOperator() {
+        return this.query.operators.find(o => o.isValidForField(this));
+    }
 }

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

@@ -22,15 +22,19 @@ export default class Info {
     }
 
     @computed get visibleFields() {
-        return filter(this.query.fields, f => f.visible);
+        return filter(this.query.fields, 'visible');
     }
 
     @computed get queryableFields() {
-        return filter(this.query.fields, f => f.queryable);
+        return filter(this.query.fields, 'queryable');
+    }
+
+    @computed get visibleClauses() {
+        return filter(this.query.clauses, 'visible');
     }
 
     @computed get loadableFields() {
-        return filter(this.query.fields, f => f.loadable);
+        return filter(this.query.fields, 'loadable');
     }
 
     @computed get identifierField() {

data/client/hippo/models/sync.js

@@ -1,3 +1,5 @@
+/* eslint no-param-reassign: 0 */
+
 import qs from 'qs';
 import 'whatwg-fetch'; // fetch polyfill
 
@@ -82,32 +84,27 @@ function perform(urlPrefix, defaultOptions = {}) {
 }
 
 const peformMobxyRequest = action('SyncforModel', (mobxObj, options = {}) => {
-    mobxObj.syncInProgress = new SyncProgess(options); // eslint-disable-line no-param-reassign
+    mobxObj.syncInProgress = new SyncProgess(options);
     return perform(options.url || mobxObj.syncUrl, options)
         .then(action('syncSuccessHandler', (json) => {
-            extend(mobxObj, {
-                errors:            json.errors,
-                syncData:          json.data,
-                lastServerMessage: json.message,
-            });
+            mobxObj.syncData = json.data;
+            mobxObj.errors = json.errors;
+            mobxObj.lastServerMessage = json.message;
+
             // sometimes the polyfill (or fetch iteself) sets a `:success` property?
             if (false === json[':success']) { merge(mobxObj, { errors: { fetch: json[':message'] } }); }
             return json;
         }))
         .then(action('whenComplete', json => invokeWhenComplete(json, mobxObj.syncInProgress)))
         .then(action('syncDoneHandler', () => {
-            extend(mobxObj, {
-                syncInProgress: undefined,
-            });
+            mobxObj.syncInProgress = undefined;
             return mobxObj;
         }))
         .catch(action('syncErrorHandler', (e) => {
             logger.warn(e);
-            extend(mobxObj, {
-                errors:            { network: e },
-                syncInProgress:     undefined,
-                lastServerMessage:  e.toString(),
-            });
+            mobxObj.errors = { network: e };
+            mobxObj.syncInProgress = undefined;
+            mobxObj.lastServerMessage = e.toString();
             return {};
         }));
 });