bouquet 0.1.2 → 0.2.0

data/store/private/static/app/components/layouts/contents/account/index.js

@@ -0,0 +1,16 @@
+import {bindActionCreators} from 'redux'
+import {connect} from 'react-redux'
+import layout from './layout'
+import * as AccountActions from '../../../../actions/AccountActions'
+
+function mapStateToProps(state) {
+  return {
+    account: state.account
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(AccountActions, dispatch)
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(layout)

data/store/private/static/app/components/layouts/contents/account/layout.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react'
+import Input from 'react-toolbox/lib/input'
+import Button from 'react-toolbox/lib/button'
+import style from './style'
+
+class Layout extends Component {
+  state = {
+    username: this.props.account.username,
+    password: this.props.account.password
+  }
+
+  handleChange = (key, value) => {
+    this.setState({[key]: value})
+  }
+
+  handleSubmit() {
+    this.props.changeAccount({
+      username: this.state.username,
+      password: this.state.password
+    })
+  }
+
+  render() {
+    return (
+      <div className={style.content}>
+        <h1>Account</h1>
+
+        <div className={style.form}>
+          <Input
+            type='text'
+            name='username'
+            label='Username'
+            value={this.state.username}
+            onChange={::this.handleChange.bind(this, 'username')} />
+
+          <Input
+            type='password'
+            name='password'
+            label='Password'
+            value={this.state.password}
+            onChange={::this.handleChange.bind(this, 'password')} />
+
+          <Button raised primary
+            label='Save changes'
+            onClick={::this.handleSubmit} />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Layout

data/store/private/static/app/components/layouts/contents/account/style.scss

@@ -0,0 +1,7 @@
+@import '../content';
+
+.content {
+  .form {
+    padding: 1 * $unit;
+  }
+}

data/store/private/static/app/components/layouts/contents/content.scss

@@ -0,0 +1,13 @@
+@import './config';
+
+.content {
+  overflow:auto;
+  height: 100%;
+  padding: 4 * $unit;
+
+  h1 {
+    font-size: $h1-size;
+    color: $color-text;
+    padding-bottom: 1 * $unit;
+  }
+}

data/store/private/static/app/components/layouts/contents/counter/index.js

@@ -0,0 +1,16 @@
+import {bindActionCreators} from 'redux'
+import {connect} from 'react-redux'
+import layout from './layout'
+import * as CounterActions from '../../../../actions/CounterActions'
+
+function mapStateToProps(state) {
+  return {
+    counter: state.counter
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(CounterActions, dispatch)
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(layout)

data/store/private/static/app/components/layouts/contents/counter/layout.js

@@ -0,0 +1,62 @@
+import React, {Component, PropTypes} from 'react'
+import Slider from 'react-toolbox/lib/slider'
+import Button from 'react-toolbox/lib/button'
+import style from './style'
+
+class Counter extends Component {
+  state = {
+    counter: this.props.counter
+  }
+
+  handleChange = (key, value) => {
+    this.setState({[key]: value})
+    this.props.change(value)
+  }
+
+  render() {
+    return (
+      <div className={style.content}>
+        <h1>Counter</h1>
+        Pinned and with snaps slider
+
+        <Slider pinned snaps editable
+          min={0} max={10} step={1}
+          value={this.props.counter}
+          onChange={::this.handleChange.bind(this, 'counter')} />
+
+        <div>
+          <Button className={style.button}
+            floating accent
+            icon='add'
+            onClick={this.props.increment} />
+
+          <Button className={style.button}
+            floating accent
+            icon='remove'
+            onClick={this.props.decrement} />
+
+          <Button className={style.button}
+            floating accent
+            label='odd'
+            onClick={this.props.incrementIfOdd} />
+
+          <Button className={style.button}
+            floating accent
+            label='async'
+            onClick={() => this.props.incrementAsync()} />
+        </div>
+      </div>
+    )
+  }
+}
+
+Counter.propTypes = {
+  change: PropTypes.func.isRequired,
+  increment: PropTypes.func.isRequired,
+  incrementIfOdd: PropTypes.func.isRequired,
+  incrementAsync: PropTypes.func.isRequired,
+  decrement: PropTypes.func.isRequired,
+  counter: PropTypes.number.isRequired
+}
+
+export default Counter

data/store/private/static/app/components/layouts/contents/counter/style.scss

@@ -0,0 +1,6 @@
+@import '../content';
+
+.button {
+  font-size: $font-size-tiny;
+  margin: 1 * $unit;
+}

data/store/private/static/app/components/layouts/contents/index.js

@@ -0,0 +1,7 @@
+export Main from './main'
+export Account from './account'
+export Product from './product'
+export Material from './material'
+export Inventory from './inventory'
+export Counter from './counter'
+export About from './about'

data/store/private/static/app/components/layouts/contents/inventory/index.js

@@ -0,0 +1,16 @@
+import {bindActionCreators} from 'redux'
+import {connect} from 'react-redux'
+import layout from './layout'
+import * as InventoryActions from '../../../../actions/InventoryActions'
+
+function mapStateToProps(state) {
+  return {
+    storages: state.inventory.storages
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(InventoryActions, dispatch)
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(layout)

data/store/private/static/app/components/layouts/contents/inventory/layout.js

@@ -0,0 +1,41 @@
+import React, {Component} from 'react'
+import Table from 'react-toolbox/lib/table'
+import style from './style'
+
+class Layout extends Component {
+  state = {
+    selected: [],
+    source: this.props.storages
+  }
+
+  componentDidMount() {
+    this.props.searchStorages()
+  }
+
+  handleSelect = (selected) => {
+    this.setState({selected})
+  }
+
+  render() {
+    const storageModel = {
+      material_name: {type: String},
+      date: {type: Date},
+      quantity: {type: Number}
+    }
+
+    return (
+      <div className={style.content}>
+        <h1>Inventory</h1>
+
+        <Table
+          model={storageModel}
+          selectable
+          selected={this.state.selected}
+          source={this.props.storages}
+          onSelect={this.handleSelect} />
+      </div>
+    )
+  }
+}
+
+export default Layout

data/store/private/static/app/components/layouts/contents/inventory/style.scss

@@ -0,0 +1 @@
+@import '../content';

data/store/private/static/app/components/layouts/contents/main/index.js

@@ -0,0 +1,36 @@
+import React, {Component} from 'react'
+import {List, ListItem, ListSubHeader} from 'react-toolbox/lib';
+import style from './style'
+
+class Layout extends Component {
+  render() {
+    return (
+      <div className={style.content}>
+        <h1>Main</h1>
+
+        React and Redux Boilerplate
+
+        <List>
+          <ListItem leftIcon='check_circle'
+            to='https://facebook.github.io/react/'
+            caption='React' />
+          <ListItem leftIcon='check_circle'
+            to='http://redux.js.org/'
+            caption='Redux' />
+          <ListSubHeader caption='Features' />
+          <ListItem leftIcon='check_circle'
+            to='https://babeljs.io/'
+            caption='Babel' />
+          <ListItem leftIcon='check_circle'
+            to='http://react-toolbox.com/'
+            caption='React Toolbox' />
+          <ListItem leftIcon='check_circle'
+            to='https://webpack.github.io/'
+            caption='Webpack' />
+        </List>
+      </div>
+    )
+  }
+}
+
+export default Layout

data/store/private/static/app/components/layouts/contents/main/style.scss

@@ -0,0 +1 @@
+@import '../content';

data/store/private/static/app/components/layouts/contents/material/index.js

@@ -0,0 +1,18 @@
+import {bindActionCreators} from 'redux'
+import {connect} from 'react-redux'
+import layout from './layout'
+import * as MaterialActions from '../../../../actions/MaterialActions'
+
+function mapStateToProps(state) {
+  return {
+    materials: state.material.materials,
+    order: state.material.order,
+    snackbar_active: state.material.snackbar_active
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(MaterialActions, dispatch)
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(layout)

data/store/private/static/app/components/layouts/contents/material/layout.js

@@ -0,0 +1,60 @@
+import React, {Component} from 'react'
+import {Card, CardMedia, CardTitle, CardText, CardActions} from 'react-toolbox/lib/card'
+import Button from 'react-toolbox/lib/button'
+import Snackbar from 'react-toolbox/lib/snackbar'
+import style from './style'
+
+class Layout extends Component {
+  componentDidMount() {
+    this.props.searchMaterials()
+  }
+
+  handleOrderClick(id) {
+    this.props.purchaseOrder(id)
+  }
+
+  handleSnackbarTimeout = (event, instance) => {
+    this.props.hideSnackbar()
+  }
+
+  materialNodes () {
+    const nodes = this.props.materials.map((material, index) => {
+      return (
+        <Card key={index} className={style.material}>
+          <CardTitle title={material.name} />
+          <CardText>Purchase</CardText>
+          <CardActions>
+            <Button label="Order"
+              onClick={::this.handleOrderClick.bind(this, material.id)} />
+          </CardActions>
+        </Card>
+      )
+    })
+
+    return nodes
+  }
+
+  render() {
+    return (
+      <div className={style.content}>
+        <h1>Material</h1>
+        Supplier is Virtual Flower Shop.
+
+        <ul className={style.materials}>
+          {this.materialNodes()}
+        </ul>
+
+        <Snackbar
+          type='accept'
+          action='Success'
+          label='Purchase Order'
+          icon='local_florist'
+          active={this.props.snackbar_active}
+          timeout={2000}
+          onTimeout={this.handleSnackbarTimeout} />
+      </div>
+    )
+  }
+}
+
+export default Layout

data/store/private/static/app/components/layouts/contents/material/style.scss

@@ -0,0 +1,25 @@
+@import '../content';
+
+.content {
+  .materials {
+    margin:20px;
+    width:660px;
+  }
+  .material {
+    float:left;
+    margin-right:20px;
+    margin-bottom:20px;
+    width:200px;
+  }
+}
+
+@media all and (max-width: 768px) {
+  .content {
+    .materials {
+      width:200px;
+    }
+    .material {
+      width:400px;
+    }
+  }
+}

data/store/private/static/app/components/layouts/contents/product/index.js

@@ -0,0 +1,18 @@
+import {bindActionCreators} from 'redux'
+import {connect} from 'react-redux'
+import layout from './layout'
+import * as ProductActions from '../../../../actions/ProductActions'
+
+function mapStateToProps(state) {
+  return {
+    products: state.product.products,
+    order: state.product.order,
+    snackbar_active: state.product.snackbar_active
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(ProductActions, dispatch)
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(layout)

data/store/private/static/app/components/layouts/contents/product/layout.js

@@ -0,0 +1,69 @@
+import React, {Component} from 'react'
+import {Card, CardMedia, CardTitle, CardText, CardActions} from 'react-toolbox/lib/card'
+import Button from 'react-toolbox/lib/button'
+import Snackbar from 'react-toolbox/lib/snackbar'
+import style from './style'
+
+class Layout extends Component {
+  componentDidMount() {
+    this.props.searchProducts()
+  }
+
+  handleOrderClick(id) {
+    this.props.salesOrder(id)
+  }
+
+  handleSnackbarTimeout = (event, instance) => {
+    this.props.hideSnackbar()
+  }
+
+  productNodes () {
+    const nodes = this.props.products.map((product, index) => {
+      const materials = product.assemblies.map((assembly, index) => {
+        return (
+          <li key={index}>{assembly.material_name} : {assembly.quantity}</li>
+        )
+      })
+
+      return (
+        <Card key={index} className={style.product}>
+          <CardTitle title={product.name} />
+          <CardText>
+            Materials
+            <ul className={style.material}>{materials}</ul>
+          </CardText>
+          <CardActions>
+            <Button label="Order"
+              onClick={::this.handleOrderClick.bind(this, product.id)} />
+          </CardActions>
+        </Card>
+      )
+    })
+
+    return nodes
+  }
+
+  render() {
+    return (
+      <div className={style.content}>
+        <h1>Product</h1>
+        Customers to order products.
+
+        <ul className={style.products}>
+          {this.productNodes()}
+        </ul>
+
+        <Snackbar
+          type='accept'
+          action='Success'
+          label='Sales Order'
+          icon='card_giftcard'
+          active={this.props.snackbar_active}
+          timeout={2000}
+          onTimeout={this.handleSnackbarTimeout} />
+      </div>
+    )
+  }
+}
+
+export default Layout

data/store/private/static/app/components/layouts/contents/product/style.scss

@@ -0,0 +1,30 @@
+@import '../content';
+
+.content {
+  .products {
+    margin:20px;
+    width:660px;
+  }
+  .product {
+    float:left;
+    margin-right:20px;
+    margin-bottom:20px;
+    width:200px;
+    .material {
+      list-style: none;
+      padding-top: 5px;
+      padding-left: 10px;
+    }
+  }
+}
+
+@media all and (max-width: 768px) {
+  .content {
+    .products {
+      width:200px;
+    }
+    .product {
+      width:400px;
+    }
+  }
+}

data/store/private/static/app/components/layouts/header/index.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react'
+import {Link} from 'react-router'
+import AppBar from 'react-toolbox/lib/app_bar'
+import FontIcon from 'react-toolbox/lib/font_icon'
+import Button from 'react-toolbox/lib/button'
+import style from './style'
+
+class Header extends Component {
+  render() {
+    return (
+      <AppBar className={style.appbar} flat>
+        <Link to="/">
+          <FontIcon value='home' />
+        </Link>
+
+        <h1 className={style.title}>
+          Freres Memoire Example
+        </h1>
+
+        <Button className={style.button} floating accent
+          icon="favorite_border" />
+      </AppBar>
+    )
+  }
+}
+
+export default Header

data/store/private/static/app/components/layouts/header/style.scss

@@ -0,0 +1,21 @@
+@import "~react-toolbox/lib/base";
+@import "~react-toolbox/lib/app_bar/config";
+@import "~react-toolbox/lib/button/config";
+
+$title-font-size: 1.8 * $unit;
+
+.appbar {
+  > .title {
+    font-size: $title-font-size;
+    font-weight: $font-weight-bold;
+    position: relative;
+    padding-left: 10px;
+  }
+
+  > .button {
+    position: absolute;
+    top: $appbar-height - ($button-floating-height / 2);
+    right: $button-floating-height / 2;
+    z-index: $z-index-higher;
+  }
+}

data/store/private/static/app/components/layouts/home/index.js

@@ -0,0 +1,20 @@
+import React, {Component} from 'react'
+import Header from '../header'
+import Sidebar from '../sidebar'
+import style from './style'
+
+class Home extends Component {
+  render() {
+    return (
+      <div>
+        <Header />
+        <Sidebar className={style.sidebar} />
+        <div className={style.contents}>
+          {this.props.children}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Home

data/store/private/static/app/components/layouts/home/style.scss

@@ -0,0 +1,23 @@
+@import "../config";
+@import "~react-toolbox/lib/app_bar/config";
+@import "~react-toolbox/lib/button/config";
+
+.contents {
+  position: fixed;
+  top: $appbar-height;
+  right: 0;
+  bottom: 0;
+  left: $sidebar-width;
+  z-index: $z-index-normal;
+  transition: padding $animation-duration $animation-curve-default;
+}
+
+.sidebar {
+  position: fixed;
+  top: $appbar-height;
+  bottom: 0;
+  left: 0;
+  z-index: $z-index-high;
+  box-shadow: $content-left-shadow;
+  transition: transform $animation-duration $animation-curve-default;
+}

data/store/private/static/app/components/layouts/sidebar/index.js

@@ -0,0 +1,11 @@
+import {connect} from 'react-redux'
+import layout from './layout'
+
+function mapStateToProps(state) {
+  return {
+    router: state.routing,
+    account: state.account
+  }
+}
+
+export default connect(mapStateToProps)(layout)