- <!DOCTYPE html>
- <html>
- <head>
- <title>Magazyn</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta charset="utf-8">
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
- <script rel="prefetch" crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
- <script rel="prefetch" crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
- <script rel="prefetch" src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
- </head>
- <body>
- <div id="application"></div>
- <script type="text/babel">
- class WarehouseForm extends React.Component {
- state = {
- category: '',
- product: {
- name: '',
- category: 0,
- quantity: 0
- }
- }
- updateCategory = ({ target }) => this.setState({
- category: target.value
- })
- updateProductName = ({ target }) => this.setState({
- product: {
- ...this.state.product,
- name: target.value
- }
- })
- updateProductCategory = ({ target }) => this.setState({
- product: {
- ...this.state.product,
- category: target.value
- }
- })
- updateProductQuantity = ({ target }) => this.setState({
- product: {
- ...this.state.product,
- quantity: target.value
- }
- })
- addProduct = (event) => {
- event.preventDefault()
- this.props.addProduct({
- ...this.state.product,
- category: Number(this.state.product.category)
- })
- this.setState({
- product: {
- name: '',
- quantity: 0,
- category: 0
- }
- })
- }
- addCategory = (event) => {
- event.preventDefault()
- this.props.addCategory(this.state.category)
- this.setState({
- category: ''
- })
- }
- render() {
- const { categories } = this.props;
- const { category, product } = this.state;
- const {
- addProduct,
- addCategory,
- updateCategory,
- updateProductName,
- updateProductCategory,
- updateProductQuantity
- } = this;
- return (
- <React.Fragment>
- <form className="form-row mb-2" onSubmit={addCategory}>
- <div className="col-sm">
- <input required type="text" onChange={updateCategory} value={ category } className="form-control" placeholder="Nazwa kategorii" />
- </div>
- <button type="submit" className="btn btn-primary col-sm">Dodaj</button>
- </form>
- <form className="form-row mb-2" onSubmit={addProduct}>
- <div required className="col-sm">
- <input type="text" onChange={updateProductName} value={ product.name } className="form-control" placeholder="Nazwa produktu" />
- </div>
- <div required className="col-sm">
- <input min="0" type="number" onChange={updateProductQuantity} value={ product.quantity } className="form-control" placeholder="Ilość" />
- </div>
- <div className="col-sm">
- <select required onChange={updateProductCategory} value={ product.category } placeholder="Kategoria" className="form-control">
- <option value="">Kategoria</option>
- {
- categories
- .map(({ id, name }) => (
- <option key={ id } value={ id }>{ name }</option>
- ))
- }
- </select>
- </div>
- <button type="submit" className="btn btn-primary col-sm">Dodaj</button>
- </form>
- </React.Fragment>
- )
- }
- }
- class WarehouseCategory extends React.Component {
- updateProduct = (amount) => () => this.props.updateProduct({
- id: this.props.id,
- name: this.props.name,
- quantity: this.props.quantity + amount
- })
- removeProduct = () => this.props.removeProduct(Number(this.props.id))
- render() {
- const { name, quantity } = this.props;
- const {
- updateProduct,
- removeProduct
- } = this;
- return (
- <div className="row align-items-center">
- <div className="col-sm">{ name }</div>
- <div className="col-sm">{ quantity }</div>
- <div className="col-sm text-right">
- <div className="btn-toolbar">
- <div className="btn-group mr-2" role="group">
- <button onClick={ updateProduct(1) } type="button" className="btn btn-dark">+</button>
- <button onClick={ updateProduct(-1) } type="button" className="btn btn-dark">-</button>
- </div>
- <div className="btn-group" role="group">
- <button onClick={ removeProduct } type="button" className="btn btn-danger">x</button>
- </div>
- </div>
- </div>
- </div>
- )
- }
- }
- class Warehouse extends React.Component {
- addProduct = (sill) => {
- const { categories, updateCategories } = this.props;
- console.log(1, sill)
- updateCategories(
- categories
- .map(category => ({
- ...category,
- sills: category.id === sill.category ?
- [
- {
- ...sill,
- id: new Date().getTime()
- },
- ...category.sills
- ] :
- category.sills
- }))
- )
- }
- addCategory = (name) => {
- const { categories, updateCategories } = this.props;
- updateCategories([
- {
- id: new Date().getTime(),
- name,
- sills: []
- },
- ...categories
- ])
- }
- removeCategory = (id) => () => {
- const { categories, updateCategories } = this.props;
- updateCategories(
- categories
- .filter((category) => Number(id) !== category.id)
- )
- }
- updateProduct = ({ id, quantity }) => {
- const { categories, updateCategories } = this.props;
- updateCategories(
- categories
- .map(category => ({
- ...category,
- sills: category.sills
- .map(sill => ({
- ...sill,
- quantity: id === sill.id ? quantity : sill.quantity
- }))
- }))
- )
- }
- removeProduct = (productId) => {
- const { categories, updateCategories } = this.props;
- updateCategories(
- categories
- .map(category => ({
- ...category,
- sills: category.sills.filter(sill => sill.id !== productId)
- }))
- )
- }
- render () {
- const { categories } = this.props;
- const {
- addProduct,
- addCategory,
- removeCategory,
- updateProduct,
- removeProduct
- } = this;
- return (
- <React.Fragment>
- <WarehouseForm categories={ categories } addCategory={addCategory} addProduct={addProduct} />
- {
- categories
- .map(({ id, name, sills }) => (
- <div className="card mb-4" key={ id }>
- <div className="card-header">
- <div className="row align-items-center">
- <div className="col-sm">
- { name }
- </div>
- <div className="col-sm text-right">
- <button onClick={ removeCategory(id) } type="button" className="btn btn-danger">x</button>
- </div>
- </div>
- </div>
- <div className="card-body">
- <ul className="list-group">
- {
- sills
- .map(({ id: sillId, name: sillName, quantity }) => (
- <li key={ sillId } className="list-group-item">
- <WarehouseCategory removeProduct={ removeProduct } updateProduct={ updateProduct } id={ sillId } name={ sillName } quantity={ quantity } />
- </li>
- ))
- }
- </ul>
- </div>
- </div>
- ))
- }
- </React.Fragment>
- )
- }
- }
- class Application extends React.Component {
- state = {
- categories: [
- {
- id: 55,
- name: "title",
- sills: [
- {
- id: 1,
- name: "Foo",
- quantity: 5
- }
- ]
- },
- {
- id: 66,
- name: "titl2e",
- sills: [
- {
- id: 2,
- name: "Foo",
- quantity: 13
- },
- {
- id: 3,
- name: "Bar",
- quantity: 1
- }
- ]
- }
- ]
- }
- updateCategories = categories => {
- this.setState({
- categories
- })
- }
- render() {
- const { updateCategories } = this
- return (
- <div className="container">
- <Warehouse updateCategories={ updateCategories } categories={this.state.categories} />
- </div>
- )
- }
- }
- ReactDOM.render(<Application />, window.application)
- </script>
- </body>
- </html>