Sell/View edit.js

Author: codefacts

Uris.js

@@ -35,9 +35,7 @@ module.exports = Uris = {
         BASE: '/field/index/:tab',
     },
     INVENTORY: {
-        CREATE: '/inventory/create',
         VIEW: '/inventory/view/:id',
-        EDIT: '/inventory/edit/:id',
         BASE: '/inventory/index',
     },
     toAbsoluteUri: toAbsoluteUri

inventory/Create.js

@@ -0,0 +1,179 @@
+var React = require('react');
+var lib = require('../components/functions');
+var Autosuggest = require('react-autosuggest');
+
+class InventoryAutoComplete extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            suggestions: [],
+            isLoading: false
+        };
+
+        this.onChange = this.onChange.bind(this);
+        this.onSuggestionsUpdateRequested = this.onSuggestionsUpdateRequested.bind(this);
+    }
+
+    loadSuggestions(value) {
+        this.setState({
+            isLoading: true
+        });
+
+        // Fake an AJAX call
+        setTimeout(() => {
+            const suggestions = getMatchingLanguages(value);
+
+            if (value === this.props.value) {
+                this.setState({
+                    isLoading: false,
+                    suggestions
+                });
+            } else { // Ignore suggestions if input value changed
+                this.setState({
+                    isLoading: false
+                });
+            }
+        }, randomDelay());
+    }
+
+    onChange(event, { newValue }) {
+        var e = {target: {}};
+        e.target.name = this.props.name;
+        e.target.value = newValue;
+        if (!!this.props.onChange) this.props.onChange(e);
+    }
+
+    onSuggestionsUpdateRequested({ value }) {
+        this.loadSuggestions(value);
+    }
+
+    render() {
+        const { suggestions, isLoading } = this.state;
+
+        const value = this.props.value || "";
+
+        const inputProps = {
+            id: this.props.id || '',
+            placeholder: this.props.placeholder || '',
+            name: this.props.name || '',
+            value: value,
+            onChange: this.onChange
+        };
+        const status = (isLoading ? <span className="text-info">Searching...</span>
+            : (!suggestions.length && !!value) ? <span className="text-success">Not Found</span> : '');
+
+        return (
+            <div className="row">
+                <div className="col-md-10">
+
+                    <Autosuggest suggestions={suggestions}
+                                 onSuggestionsUpdateRequested={this.onSuggestionsUpdateRequested}
+                                 getSuggestionValue={getSuggestionValue}
+                                 renderSuggestion={renderSuggestion}
+                                 inputProps={inputProps}/>
+
+                </div>
+
+                <div className="col-md-2">
+                    {status}
+                </div>
+            </div>
+        );
+    }
+}
+
+InventoryAutoComplete.defaultProps = {
+    placeholder: 'Type inventory name',
+    name: '',
+    value: '',
+    onChange: function () {
+    }
+};
+
+function getSuggestionValue(inventory) {
+    return inventory.name;
+}
+
+function renderSuggestion(inventory) {
+    return (
+        <span>{inventory.name}</span>
+    );
+}
+
+function getMatchingLanguages(value) {
+    const escapedValue = lib.escapeRegexCharacters(value.trim());
+
+    if (escapedValue === '') {
+        return [];
+    }
+
+    const regex = new RegExp('^' + escapedValue, 'i');
+
+    return languages.filter(language => regex.test(language.name));
+}
+
+function randomDelay() {
+    return 300 + Math.random() * 1000;
+}
+
+const languages = [
+    {
+        name: 'C',
+        year: 1972
+    },
+    {
+        name: 'C#',
+        year: 2000
+    },
+    {
+        name: 'C++',
+        year: 1983
+    },
+    {
+        name: 'Clojure',
+        year: 2007
+    },
+    {
+        name: 'Elm',
+        year: 2012
+    },
+    {
+        name: 'Go',
+        year: 2009
+    },
+    {
+        name: 'Haskell',
+        year: 1990
+    },
+    {
+        name: 'Java',
+        year: 1995
+    },
+    {
+        name: 'Javascript',
+        year: 1995
+    },
+    {
+        name: 'Perl',
+        year: 1987
+    },
+    {
+        name: 'PHP',
+        year: 1995
+    },
+    {
+        name: 'Python',
+        year: 1991
+    },
+    {
+        name: 'Ruby',
+        year: 1995
+    },
+    {
+        name: 'Scala',
+        year: 2003
+    }
+];
+
+module.exports = InventoryAutoComplete;

inventory/Edit.js

@@ -0,0 +1,55 @@
+var React = require('react');
+var QuantityInUnitView = require('../utils/QuantityInUnitView');
+
+var InventorySummary = React.createClass({
+    getDefaultProps: function () {
+        return {
+            summary: []
+        };
+    },
+    render: function () {
+        var $this = this;
+        var summary = $this.props.summary || [];
+
+        return (
+            <table className="table table-striped">
+
+                <thead>
+                <tr>
+                    <th>#</th>
+                    <th>Product</th>
+                    <th>Quantity</th>
+                    <th>Added</th>
+                    <th>Removed</th>
+                </tr>
+                </thead>
+
+                <tbody>
+
+                {
+                    summary.map(function (sm, index) {
+                        return (
+                            <tr key={(index + 1) + '.'}>
+                                <td>{index + 1}</td>
+                                <td>{sm.product}</td>
+                                <td>{$this.formatQuantity(sm.quantity)}</td>
+                                <td>{$this.formatQuantity(sm.added)}</td>
+                                <td>{$this.formatQuantity(sm.removed)}</td>
+                            </tr>
+                        );
+                    })
+                }
+
+                </tbody>
+
+            </table>
+        );
+    },
+    formatQuantity: function (quantity) {
+        return (
+            <QuantityInUnitView quantity={quantity.amount} unit={quantity.unit.name}/>
+        );
+    }
+});
+
+module.exports = InventorySummary;

inventory/InventoryAutoComplete.js

@@ -0,0 +1,119 @@
+"use strict";
+import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
+var React = require('react');
+
+var NewInventoryDialog = require('./NewInventoryDialog');
+
+var ListInventories;
+module.exports = ListInventories = React.createClass({
+    getDefaultProps: function () {
+        return {};
+    },
+    getInitialState: function () {
+        return {
+            inventories: [
+                {id: '1', name: 's', remarks: 'rr', totalProducts: 12},
+                {id: '2', name: 's', remarks: 'rr', totalProducts: 14},
+                {id: '3', name: 's', remarks: 'rr', totalProducts: 75},
+                {id: '4', name: 's', remarks: 'rr', totalProducts: 147},
+            ]
+        };
+    },
+    render: function () {
+        var $this = this;
+        var inventories = $this.state.inventories || [];
+
+        return (
+
+            <div className="row">
+                <div className="col-md-12">
+
+                    <div className="panel panel-default">
+
+                        <div className="panel-heading">
+
+                            <div className="row">
+                                <div className="col-md-8">
+                                    <h3 className="panel-title">Inventory List [ total: {inventories.length} ]</h3>
+                                </div>
+                                <div className="col-md-4">
+                                    <span className="btn btn-primary pull-right"
+                                          onClick={$this.createNewInventory}>New</span>
+                                </div>
+                            </div>
+
+                        </div>
+
+                        <BootstrapTable data={inventories} cellEdit={$this.cellEditProp()}>
+                            <TableHeaderColumn dataField="id" isKey={true}>ID</TableHeaderColumn>
+                            <TableHeaderColumn dataField="name">Name</TableHeaderColumn>
+                            <TableHeaderColumn dataField="totalProducts" editable={false}>
+                                Total Products</TableHeaderColumn>
+                            <TableHeaderColumn dataField="remarks">Remarks</TableHeaderColumn>
+                            <TableHeaderColumn dataField="action" editable={false}
+                                               dataFormat={$this.formatAction}>Action</TableHeaderColumn>
+                        </BootstrapTable>
+
+                    </div>
+
+                    <NewInventoryDialog onInit={$this.onNewInventoryDialogInit}/>
+
+                </div>
+            </div>
+        );
+    },
+    onNewInventoryDialogInit: function (ref) {
+        this.newInventoryDialog = ref;
+    },
+    createNewInventory: function () {
+        var $this = this;
+        $this.newInventoryDialog.createNewInventory();
+    },
+    formatAction: function (ac, inventory) {
+        var $this = this;
+        return (
+            <div>
+
+                <span className="btn btn-primary" style={{marginRight: '5px'}} title="Add product to this inventory."
+                      onClick={function () {
+                            $this.addRemoveProducts(inventory);
+                      }}>
+                    Add/Remove Products
+                </span>
+
+                <a className="btn btn-success" style={{marginRight: '5px'}} title="View this inventory.">
+                    View
+                </a>
+
+                <span className="btn btn-danger" title="Delete this inventory."
+                      onClick={function () {
+                            $this.deleteInventory(inventory);
+                      }}>
+                    <span className="glyphicon glyphicon-remove" aria-hidden="true"></span>
+                </span>
+
+            </div>
+        );
+    },
+    addRemoveProducts: function (inventory) {
+    },
+    deleteInventory: function (inventory) {
+        var $this = this;
+        $this.setState({
+            inventories: $this.state.inventories.filter(function (u) {
+                return u != inventory;
+            })
+        });
+    },
+    cellEditProp: function () {
+        var $this = this;
+        return {
+            mode: "dbclick",
+            blurToSave: true,
+            afterSaveCell: $this.onAfterSaveCell
+        };
+    },
+    onAfterSaveCell: function (row, cellName, cellValue) {
+        var $this = this;
+    }
+});