hippo-fw 0.9.1

data/client/hippo/components/network-activity-overlay.scss

@@ -0,0 +1,52 @@
+$gray-light: lightGrey !default;
+$well-border: darkGrey !default;
+$border-radius-large: 8px !default;
+$body-bg: white !default;
+$font-size-large: 15px !default;
+$gray-darker: lighten(#000, 13.5%) !default;
+
+.network-activity-overlay {
+  position: absolute;
+  z-index: 11;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  .mask {
+    background-color: white;
+    height: 100%;
+    left: 0;
+    opacity: 0.8;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &.rounded {
+      .mask { border-radius: $border-radius-large; }
+  }
+
+  .message {
+    width: 450px;
+    max-width: 90%;
+    min-height: 65px;
+    line-height: 3rem;
+    border: 2px solid $well-border;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 2rem;
+    position: relative;
+    top: 25%;
+    border-radius: $border-radius-large;
+    padding: 10px;
+    box-shadow: 6px 7px 5px $gray-light;
+    background-color: $body-bg;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    span { margin-left: 1rem; }
+  }
+
+}

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

@@ -0,0 +1,157 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import { observer } from 'mobx-react';
+import { action }   from 'mobx';
+import Box          from 'grommet/components/Box';
+import Menu         from 'grommet/components/Menu';
+import RadioButton  from 'grommet/components/RadioButton';
+import TextInput    from 'grommet/components/TextInput';
+import DownIcon     from 'grommet/components/icons/base/Down';
+
+import BaseModel from '../models/base';
+import Query         from '../models/query';
+import ClauseModel   from '../models/query/clause';
+import FieldModel    from '../models/query/field';
+import OperatorModel from '../models/query/operator';
+
+@observer
+class Radio extends React.PureComponent {
+
+    static propTypes = {
+        name: PropTypes.string.isRequired,
+        onSelect: PropTypes.func.isRequired,
+        model: PropTypes.instanceOf(BaseModel).isRequired,
+        clause: PropTypes.instanceOf(ClauseModel).isRequired,
+    }
+
+    @action.bound
+    onChange() {
+        this.props.clause[this.props.name] = this.props.model;
+        this.props.onSelect();
+    }
+
+    render() {
+        const { model } = this.props;
+        const checked = (this.props.clause[this.props.name] === model);
+        return (
+            <RadioButton
+                name={model.id}
+                label={model.label}
+                onChange={this.onChange}
+                checked={checked}
+            />
+        );
+    }
+}
+
+@observer
+class ClauseFilter extends React.PureComponent {
+
+    static propTypes = {
+        clause: PropTypes.instanceOf(ClauseModel).isRequired,
+    }
+
+    render() {
+        const { clause } = this.props;
+        return (
+            <span>
+                <DownIcon /> {clause.field.label} {clause.operator.label}
+            </span>
+        );
+    }
+}
+
+@observer
+class Clause extends React.PureComponent {
+
+    static propTypes = {
+        clause: PropTypes.instanceOf(ClauseModel).isRequired,
+    }
+
+    @action.bound
+    onSelect() {
+        this.menuRef._onClose();
+    }
+
+    @action.bound
+    onValueChange(ev) {
+        this.props.clause.value = ev.target.value;
+    }
+
+    render() {
+        const { clause } = this.props;
+        return (
+            <Box direction='row' pad={{ between: 'small' }}>
+                <Menu
+                    ref={ref => (this.menuRef = ref)}
+                    size='large'
+                    pad='small'
+                    closeOnClick={false} icon={<ClauseFilter clause={clause} />}
+                >
+                    <Box direction='row' pad="small">
+                        <Box size="small" pad={{ between: 'small' }}>
+                            {clause.query.info.queryableFields.map(f =>
+                                <Radio
+                                    key={f.id} model={f} clause={clause}
+                                    onSelect={this.onSelect} name='field' />,
+                             )}
+                        </Box>
+                        <Box size="small" pad={{ between: 'small' }}>
+                            {clause.validOperators.map(o =>
+                                <Radio
+                                    key={o.id} model={o} clause={clause}
+                                    onSelect={this.onSelect} name='operator'
+                                />,
+                             )}
+                        </Box>
+                    </Box>
+                </Menu>
+                <TextInput
+                    autoFocus
+                    style={{ flex: 1 }}
+                    value={clause.value || ''}
+                    onDOMChange={this.onValueChange}
+                />
+            </Box>
+        );
+    }
+}
+
+@observer
+export default class QueryBuilder extends React.PureComponent {
+
+    static defaultProps = {
+        autoFetch: false,
+    }
+
+    static propTypes = {
+        autoFetch: PropTypes.bool,
+        query: PropTypes.instanceOf(Query).isRequired,
+    }
+
+    constructor(props) {
+        super(props);
+        this.previousQueryAutoFetch = this.props.query.autoFetch;
+        this.props.query.autoFetch = props.autoFetch;
+    }
+
+    componentWillReceiveProps(nextProps) {
+        this.props.query.autoFetch = nextProps.autoFetch;
+    }
+
+    componentWillUnmount() {
+        this.props.query.autoFetch = this.previousQueryAutoFetch;
+    }
+
+    render() {
+        const { query } = this.props;
+        return (
+            <div className="query-builder">
+                {query.clauses.map(c => <Clause key={c.id} clause={c} />)}
+            </div>
+        );
+    }
+
+}

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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 Button from 'grommet/components/Button';
+import SearchIcon from 'grommet/components/icons/base/Search';
+
+import { Col } from 'react-flexbox-grid';
+
+import { titleize } from '../lib/util';
+import Query from '../models/query';
+
+import './record-finder/record-finder.scss';
+import QueryLayer from './record-finder/query-layer';
+
+@inject('formFields') @observer
+export default class RecordFinder extends React.PureComponent {
+    static propTypes = {
+        query: PropTypes.instanceOf(Query).isRequired,
+        name:  PropTypes.string.isRequired,
+        label: PropTypes.string,
+        recordsTitle: PropTypes.string.isRequired,
+        onRecordFound: PropTypes.func.isRequired,
+        formFields: FormFieldPropType,
+    }
+
+    @observable showingSearch = false;
+
+    @action.bound
+    onSearchClick() {
+        this.showingSearch = true;
+    }
+
+    @action.bound
+    onSearchClose() {
+        this.showingSearch = false;
+    }
+
+    @action.bound
+    onRecordSelect(model) {
+        this.showingSearch = false;
+        this.props.formFields.get(this.props.name).value = model[this.props.name]
+        this.props.onRecordFound(model);
+    }
+
+    @action.bound
+    onKeyPress(ev) {
+        if ('Enter' === ev.key) { this.loadCurrentSelection(); }
+    }
+
+
+    get field() {
+        return this.props.fields[this.props.name];
+    }
+
+    loadCurrentSelection() {
+        this.props.query.fetchSingle(
+            { [`${this.props.name}`]: this.field.value },
+        ).then(this.onRecordSelect);
+    }
+
+    render() {
+        const {
+            query,
+            onRecordFound: _,
+            recordsTitle,
+            ...otherProps
+        } = this.props;
+
+        return (
+            <Field
+                className='record-finder'
+                onKeyPress={this.onKeyPress}
+                {...otherProps}
+            >
+                <QueryLayer
+                    query={query}
+                    title={recordsTitle}
+                    visible={this.showingSearch}
+                    onRecordSelect={this.onRecordSelect}
+                    onClose={this.onSearchClose}
+                />
+                <Button
+                    className="grommetux-control-icon-search"
+                    icon={<SearchIcon />}
+                    onClick={this.onSearchClick}
+                />
+            </Field>
+        );
+    }
+}

data/client/hippo/components/record-finder/config.json

@@ -0,0 +1,3 @@
+{
+    "depends": ["modal", "grid"]
+}

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

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import { observer }   from 'mobx-react';
+import { action, observable, computed } from 'mobx';
+
+import Heading from 'grommet/components/Heading';
+import Layer   from 'grommet/components/Layer';
+import Box     from 'grommet/components/Box';
+import CloseIcon from 'grommet/components/icons/base/Close';
+import Button   from 'grommet/components/Button';
+
+import DataTable from '../data-table';
+import QueryBuilder from '../query-builder';
+
+@observer
+export default class QueryLayer extends React.PureComponent {
+
+
+    static propTypes = {
+        title: PropTypes.string.isRequired,
+        onClose: PropTypes.func.isRequired,
+        onRecordSelect: PropTypes.func.isRequired,
+    }
+
+    onSearchClose() {
+
+    }
+
+    @action.bound
+    onRecordSelect({ model }) {
+        this.props.onRecordSelect(model);
+    }
+
+    render() {
+        const { visible, query, onClose, title } = this.props;
+        if (!visible) { return null; }
+
+        return (
+            <Layer
+                closer
+                pad="small"
+                padding={{ bottom: 'small' }}
+            >
+                <Box
+                    direction='column'
+                    margin={{ bottom: 'small' }}
+                >
+                    <Box
+                        direction='row'
+                        justify='start'
+                        align='center'
+                        margin={{ top: 'small' }}
+                        flex='grow'
+                    >
+                        <Box flex="grow">
+                            <Heading tag="h3" margin="none">Find {title}</Heading>
+                        </Box>
+                        <Button plain icon={<CloseIcon />} onClick={onClose} />
+                    </Box>
+                    <QueryBuilder query={query} autoFetch />
+                    <DataTable
+                        onRowClick={this.onRecordSelect}
+                        query={query} autoFetch
+                        style={{ minHeight: 400 }}
+                    />
+                </Box>
+            </Layer>
+        );
+    }
+
+
+}

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

@@ -0,0 +1,12 @@
+#hippo-root {
+    .record-finder {
+        .grommetux-form-field__contents {
+            display: flex;
+            align-items: center;
+        }
+        .grommetux-button__icon {
+            padding: 3px;
+            margin-right: 0.5rem;
+        }
+    }
+}

data/client/hippo/components/request-spinner/index.js

@@ -0,0 +1 @@
+//= require ./request-spinner

data/client/hippo/components/screen.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { observer }   from 'mobx-react';
+
+import ScreenInstance from '../screens/instance';
+
+@observer
+export default class Screen extends React.Component {
+    static Instance = ScreenInstance;
+
+    static defaultProps = {
+        className: '',
+    }
+
+    static propTypes = {
+        screen:    PropTypes.instanceOf(ScreenInstance).isRequired,
+        children:  PropTypes.node.isRequired,
+        className: PropTypes.string,
+    }
+
+    render() {
+        return (
+            <div
+                data-screen-id={this.props.screen.definition.id}
+                className={classnames('screen', this.props.className, {
+                                   'is-active': this.props.screen.isActive,
+                    })}
+            >
+                {this.props.children}
+            </div>
+        );
+    }
+}

data/client/hippo/components/select-field/index.js

@@ -0,0 +1,2 @@
+//= require 'hippo/vendor/widgets'
+//= require './SelectField'

data/client/hippo/components/select-field/styles.scss

@@ -0,0 +1,27 @@
+@import "hippo/vendor/styles/widgets";
+
+.input-group {
+    .select:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+}
+
+.rw-combobox, .rw-datetimepicker, .rw-numberpicker, .rw-dropdownlist {
+    padding-bottom: 1px; // push down so border isn't covered
+    input { height: 32px; padding: 6px 12px; }
+}
+
+.rw-multiselect-taglist > li {
+    margin: 2px;
+    .rw-tag-btn {
+        margin: 0 3px;
+    }
+}
+
+.rw-dropdownlist {
+    height: 35px;
+    .rw-input{
+        line-height: 34px;
+    }
+}