hippo-fw 0.9.1

data/client/hippo/models/system-setting.js

@@ -0,0 +1,26 @@
+import { merge } from 'lodash';
+import {
+    BaseModel, identifiedBy, identifier, belongsTo, field, computed,
+} from './base';
+import Sync  from './sync';
+
+import Asset from './asset';
+
+@identifiedBy('hippo/system-settings')
+export default class SystemSettings extends BaseModel {
+
+    @identifier id;
+    @field({ type: 'object' }) settings;
+
+    @belongsTo({ model: Asset, inverseOf: 'owner' }) logo;
+    @belongsTo({ model: Asset, inverseOf: 'owner' }) print_logo;
+
+    fetch(options = {}) {
+        return Sync.forModel(this, merge(options, { limit: 1, method: 'GET' }));
+    }
+
+    @computed get syncUrl() {
+        return this.constructor.syncUrl;
+    }
+
+}

data/client/hippo/react/DefaultComponentNotFound.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get } from 'lodash';
+import { classify } from '../lib/util';
+
+export default class DefaultComponentNotFound extends React.Component {
+
+    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>
+        );
+    }
+
+}

data/client/hippo/react/Root.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+export default class Root extends React.Component {
+
+    static childContextTypes = {
+        viewport: PropTypes.object,
+    }
+
+    getChildContext() {
+        return (
+            {viewport: this.props.viewport}
+        );
+    }
+
+    render() {
+        return (
+            <div className="root">
+                {this.props.children}
+            </div>
+        );
+    }
+}

data/client/hippo/react/index.js

@@ -0,0 +1,7 @@
+//= require ./TypeValidators
+//= require ./Viewport
+//= require_tree ./mixins
+//= require ./Component
+//= require ./Screen
+//= require ./Root
+//= require ./DefaultComponentNotFound

data/client/hippo/react/viewport-root.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
+/* import {
+ *     BrowserRouter as Router,
+ *     Route,
+ *     Link
+ * } from 'react-router-dom'*/
+
+// import { Router, Route, match, RouterContext, browserHistory } from 'react-router';
+
+//import createHistory from 'history/createBrowserHistory';
+
+/* function NoMatch() {
+ *     return (
+ *         <h1>Not Found</h1>
+ *     );
+ * }*/
+
+import Workspace from '../workspace';
+
+//export default function ViewportRoot(dom){
+document.getElementById('root')
+    function renderer(S) {
+        ReactDom.render(
+
+            <AppContainer>
+                <S />
+            </AppContainer>
+
+            , dom,
+        );
+    }
+
+    renderer(Workspace);
+
+    if (module.hot) {
+        module.hot.accept('hippo/workspace', () => {
+            console.log("RELOADED", arguments)
+            renderer(WP)
+        });
+    }
+
+//}

data/client/hippo/screens/all.js.erb

@@ -0,0 +1,3 @@
+<% Hippo::Screen.each do | screen |
+   require_asset screen.url_path_for(:js)
+end %>

data/client/hippo/screens/definition.js

@@ -0,0 +1,67 @@
+import Extensions from '../extensions';
+import {
+    BaseModel, identifiedBy, session, identifier, computed,
+} from '../models/base';
+
+import Instance, { displaying } from './instance';
+
+import Registry from './index';
+import Group from './group';
+
+export { createAsyncComponent } from 'react-async-component';
+
+@identifiedBy('hippo/screen/definition')
+export default class ScreenDefinition extends BaseModel {
+
+    @identifier({ type: 'string' }) id;
+    @session title;
+    @session url_prefix;
+    @session description;
+    @session view;
+    @session icon;
+    @session group_id;
+    @session access;
+    @session isLoading = false;
+    @session extension_id;
+    @session model;
+    @session({ type: 'object' }) component;
+    @session asset;
+
+    @session url;
+
+    static register(json, comp) {
+        let screen = Registry.all.get(json.id);
+        if (screen) {
+            screen.update(json);
+        } else {
+            screen = new ScreenDefinition(json);
+            Registry.all.set(screen.id, screen);
+            const group = Group.forId(screen.group_id);
+            if (group) { group.screens.push(screen); }
+        }
+        screen.component = comp;
+        return screen;
+    }
+
+    @computed get extension() {
+        return Extensions.get(this.extension_id);
+    }
+
+    @computed get model_type() {
+        return BaseModel.findDerived(this.model);
+    }
+
+    @computed get instances() {
+        return displaying.findInstance(this.id);
+    }
+
+    display() {
+        let instance = displaying.findInstance(this.id); // this.instances[0];
+        if (!instance) {
+            instance = new Instance({ definition: this, isActive: true });
+        }
+        instance.isActive = true;
+        return instance;
+    }
+
+}

data/client/hippo/screens/group.js

@@ -0,0 +1,35 @@
+import { observable } from 'mobx';
+import {
+    BaseModel, identifiedBy, session, identifier,
+} from '../models/base';
+
+const All = observable.array();
+
+@identifiedBy('ScreensGroup')
+export default class ScreensGroup extends BaseModel {
+
+    static all = All;
+
+    @identifier({ type: 'string' }) id;
+    @session title;
+    @session description;
+    @session icon;
+    @session active = false;
+
+    @session({ type: 'array' }) screens;
+
+    static forId(groupId) {
+        return All.find(g => g.id === groupId);
+    }
+    static register(json) {
+        let group = this.forId(json.id);
+        if (!group) {
+            group = new ScreensGroup(json);
+            All.push(group);
+        } else {
+            group.update(json);
+        }
+        return group;
+    }
+
+}

data/client/hippo/screens/index.js

@@ -0,0 +1,34 @@
+import { observable, computed } from 'mobx';
+import { map, filter, intersection } from 'lodash';
+import Group from './group';
+import Config from '../config';
+
+const Screens = observable({
+
+    all: observable.map(),
+
+    active_screen_ids: observable.array(),
+
+    get activeGroups() {
+        const gids = Group.enabled_group_ids || map(Group.all, 'id');
+        const groups = map(gids, gid => Group.forId(gid));
+        return filter(groups, group => intersection(group.screens, this.active).length);
+    },
+
+    @computed get active() {
+        return map(this.active_screen_ids, id => this.all.get(id));
+    },
+
+    configure(screen_ids) {
+        this.active_screen_ids.replace(screen_ids);
+    },
+
+    reset() {
+        this.active_screen_ids.clear();
+    },
+
+});
+
+Config.screens = Screens;
+
+export default Screens;

data/client/hippo/screens/instance.js

@@ -0,0 +1,99 @@
+import { observable, autorun } from 'mobx';
+import { get } from 'lodash';
+import {
+    BaseModel, identifiedBy, session,
+    belongsTo, identifier, computed,
+} from '../models/base';
+
+class InstanceCollection {
+
+    @observable models = []
+    @observable active;
+
+    constructor() {
+        autorun(() => this.onLengthChange());
+    }
+
+    onLengthChange() {
+        const len = this.models.length;
+        if (!len) { return; }
+        if (1 === len) {
+            this.active = this.models[0];
+        } else if (!this.active) {
+            this.active = this.models[len - 1];
+        }
+    }
+
+    findInstance(screenId, instanceId) {
+        return this.models.find(
+            instance => (instance.definition.id === screenId)
+                && (!instanceId || instance.id === instanceId),
+        );
+    }
+
+    add(model) { this.models.push(model); }
+    remove(model) { this.models.remove(model); }
+
+}
+
+const displaying = new InstanceCollection();
+export { displaying };
+
+@identifiedBy('hippo/screen-view')
+export default class Instance extends BaseModel {
+
+    static get displaying() {
+        return displaying.models;
+    }
+    static get active() {
+        return displaying.active;
+    }
+
+    @session({ type: 'object' }) props = {};
+    @belongsTo({ model: 'hippo/screen/definition' }) definition;
+
+    @identifier({ type: 'string' }) id;
+
+    constructor(attrs) {
+        super(attrs);
+
+        if (!this.id) {
+            this.id = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 3);
+        }
+        this.props.screen = this;
+
+        displaying.add(this);
+        if (attrs.isActive) {
+            displaying.active = this;
+        }
+    }
+
+    @computed get isActive() {
+        return displaying.active === this;
+    }
+
+    set isActive(value) {
+        displaying.active = this;
+    }
+
+    @computed get component() {
+        return this.definition.component;
+    }
+
+    @computed get title() {
+        let code = get(this.model, 'visibleIdentifier', '');
+        if (code) { code = `::${code}`; }
+        let { title } = this.definition;
+        if (12 < title.length) { title = `${title.slice(0, 10)}…`; }
+        return title + code;
+    }
+
+    @computed get historyUrl() {
+        const code = get(this.model, 'visibleIdentifier', '');
+        return { pathname: `/${this.id}/${this.definition.id}/${code}` };
+    }
+
+    remove() {
+        displaying.remove(this);
+    }
+}

data/client/hippo/screens/register.js.erb

@@ -0,0 +1,14 @@
+<% if !Hippo.config.initial_workspace_screen_id.blank? &&
+      screen = Hippo::Screen[Hippo.config.initial_workspace_screen_id]
+require_asset screen.js
+end %>
+
+<% Hippo::Screen.each_group do | spec | %>
+Hippo.Screens.Definitions.groups.add( <%= spec.to_json %> );
+<% end %>
+
+<% Hippo::Screen.each do | spec | %>
+Hippo.Screens.Definitions.register( <%= spec.to_json %> );
+<% end %>
+
+<% Hippo::Screen.uncache_file_on_update(self) %>

data/client/hippo/screens/styles.scss

@@ -0,0 +1,8 @@
+/*
+  Intended to be included from a screen definition.
+  includes certain base variables and styles that would be useful for the screen
+*/
+@import "hippo/styles/bootstrap/variables";
+@import "hippo/styles/bootstrap/mixins";
+@import "hippo/styles/variables";
+@import "hippo/styles/mixins/all";

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { observable, action, computed } from 'mobx';
+import { observer }   from 'mobx-react';
+import { map, compact, invoke, each } from 'lodash';
+import Heading from 'grommet/components/Heading';
+import Header from 'grommet/components/Header';
+import Button from 'grommet/components/Button';
+import SaveIcon from 'grommet/components/icons/base/Save';
+
+import Screen from 'hippo/components/screen';
+import Asset  from 'hippo/components/asset';
+import Settings from 'hippo/models/system-setting';
+
+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 './system-settings/system-settings.scss';
+
+@observer
+export default class SystemSettings extends React.PureComponent {
+
+    @observable settings = new Settings();
+    extensionPanelRefs = new Map();
+
+    static propTypes = {
+        screen:    PropTypes.instanceOf(ScreenInstance).isRequired,
+    }
+
+    renderExtPanel(ext) {
+        const { systemSettingsComponent: Panel } = ext;
+        if (!Panel) return null;
+        return (
+            <div key={`${ext.id}-settings`} className="section">
+                <Panel
+                    extension={ext}
+                    settings={this.settings.settings}
+                    registerForSave={panel => this.extensionPanelRefs.set(ext.id, panel)}
+                />
+            </div>
+        );
+    }
+
+
+    get extensionPanels() {
+        return compact(map(Extensions.instances.values(), panel => this.renderExtPanel(panel)));
+    }
+
+    constructor(props) {
+        super(props);
+        this.settings.fetch();
+    }
+
+    @action.bound
+    onSave() {
+        this.extensionPanelRefs.forEach(panel => invoke(panel, 'onSave'));
+        this.settings.save();
+    }
+
+    render() {
+        return (
+            <Screen {...this.props}>
+                <Header fixed>
+                    <Button
+                        primary
+                        icon={<SaveIcon />}
+                        label='Save'
+                        onClick={this.onSave}
+                    />
+                </Header>
+                <Heading>{this.props.screen.definition.title}</Heading>
+                {this.extensionPanels}
+
+                <Heading tag="h3">Images</Heading>
+                <Row>
+                    <Col sm={4} xs={12}>
+                        <Asset model={this.settings} name="logo" />
+                    </Col>
+                    <Col sm={4} xs={12}>
+                        <Asset model={this.settings} name="print_logo" />
+                    </Col>
+                </Row>
+                <MailerConfig
+                    settings={this.settings.settings}
+                    registerForSave={panel => this.extensionPanelRefs.set('mail', panel)}
+                />
+            </Screen>
+        );
+    }
+}