SHARE
TWEET

Untitled

a guest Feb 18th, 2020 63 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import "bootstrap/dist/css/bootstrap.min.css";
  2. import { NextPage } from "next";
  3. import React from "react";
  4. import { Button, DropdownToggle, DropdownMenu, DropdownItem, Dropdown, UncontrolledDropdown } from "reactstrap";
  5. import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  6. import { library } from "@fortawesome/fontawesome-svg-core";
  7. import {
  8.   faEdit,
  9.   faSearch,
  10.   faTrashAlt,
  11.   faEye,
  12.   faCheck,
  13.   faCalendarAlt,
  14.   faUser
  15. } from "@fortawesome/free-solid-svg-icons";
  16. library.add(
  17.   faEdit,
  18.   faTrashAlt,
  19.   faSearch,
  20.   faEye,
  21.   faCheck,
  22.   faCalendarAlt,
  23.   faUser
  24. );
  25.  
  26. import FieldGroup from "../components/FieldGroup";
  27. import { max, min } from "date-fns";
  28.  
  29. type RowStock = { id: number; state: string };
  30.  
  31.  
  32. class RowSample extends React.Component<
  33.   { data: RowStock },
  34.   { familia: string, subFamilia: string }
  35. > {
  36.     constructor(props: any){
  37.         super(props);
  38.         this.state = {
  39.             familia: 'Arrancador',
  40.             subFamilia: 'Relay',
  41.         }
  42.     }
  43.     render(){
  44.         let {data} = this.props;
  45.         return(
  46.         <tr>
  47.             <td>
  48.             <Button color="warning" style={{ marginRight: 0, marginLeft: 4 }}>
  49.                 <FontAwesomeIcon icon="trash-alt" />
  50.             </Button>
  51.             </td>
  52.             <td>{data.id}</td>
  53.             <td>
  54.                 <UncontrolledDropdown>
  55.                     <DropdownToggle caret>
  56.                         {this.state.familia}
  57.                     </DropdownToggle>
  58.                     <DropdownMenu>
  59.                         <DropdownItem header>Familia</DropdownItem>
  60.                         <DropdownItem onClick={()=>this.setState({familia: 'Arrancador'})}>Arrancador</DropdownItem>
  61.                         <DropdownItem onClick={()=>this.setState({familia: 'Alternador'})}>Alternador</DropdownItem>
  62.                     </DropdownMenu>
  63.                 </UncontrolledDropdown>
  64.             </td>
  65.             <td>
  66.                 <UncontrolledDropdown>
  67.                     <DropdownToggle caret>
  68.                         {this.state.subFamilia}
  69.                     </DropdownToggle>
  70.                     <DropdownMenu>
  71.                         <DropdownItem header>Sub-Familia</DropdownItem>
  72.                         <DropdownItem onClick={()=>this.setState({subFamilia: 'Relay'})}>Relay</DropdownItem>
  73.                         <DropdownItem onClick={()=>this.setState({subFamilia: 'Portacarbon'})}>Portacarbon</DropdownItem>
  74.                     </DropdownMenu>
  75.                 </UncontrolledDropdown>
  76.             </td>
  77.             <td>
  78.                 <UncontrolledDropdown>
  79.                     <DropdownToggle caret>
  80.                         Carbones
  81.                     </DropdownToggle>
  82.                     <DropdownMenu>
  83.                         <DropdownItem header>Elemento</DropdownItem>
  84.                         <DropdownItem>Carbones</DropdownItem>
  85.                     </DropdownMenu>
  86.                 </UncontrolledDropdown>
  87.             </td>
  88.             <td>
  89.                 <Dropdown isOpen={false} toggle={()=>{}}>
  90.                     <DropdownToggle caret>
  91.                         ABCD
  92.                     </DropdownToggle>
  93.                     <DropdownMenu>
  94.                         <DropdownItem header>Modelo</DropdownItem>
  95.                         <DropdownItem>ABCD</DropdownItem>
  96.                     </DropdownMenu>
  97.                 </Dropdown>
  98.             </td>
  99.             <td>
  100.                 <Dropdown isOpen={false} toggle={()=>{}}>
  101.                     <DropdownToggle caret>
  102.                         50
  103.                     </DropdownToggle>
  104.                     <DropdownMenu>
  105.                         <DropdownItem header>nidades/Caja</DropdownItem>
  106.                         <DropdownItem>50</DropdownItem>
  107.                     </DropdownMenu>
  108.                 </Dropdown>
  109.             </td>
  110.             <td>
  111.             20
  112.             </td>
  113.         </tr>
  114.         );
  115.     }
  116. }
  117. class Stock extends React.Component<
  118.   {},
  119.   { data: RowStock[]; startDate: Date; endDate: Date }
  120. > {
  121.   constructor(props: any) {
  122.     super(props);
  123.     var data = [];
  124.     for (let i = 0; i < 10; ++i) {
  125.       data.push({ id: i + 1, state: i < 5 ? "PEN" : "ATE" });
  126.     }
  127.     this.state = {
  128.       data: data,
  129.       startDate: new Date(),
  130.       endDate: new Date()
  131.     };
  132.   }
  133.   render() {
  134.     let { data, startDate, endDate } = this.state;
  135.     return (
  136.       <>
  137.         <div className="container" style={{ maxWidth: "100%" }}>
  138.           <div className="row" style={{ alignItems: "center" }}>
  139.             <div className="col-sm-3">
  140.               <FieldGroup
  141.                 label="Proveedor"
  142.                 icon="user"
  143.                 fieldConfig={{ defaultValue: "China Inc", type: "text", onChange:(text)=>{console.log(text)} }}
  144.               />
  145.             </div>
  146.             <div className="col-sm-3">
  147.               <FieldGroup
  148.                 label="Proveedor"
  149.                 icon="user"
  150.                 fieldConfig={{ defaultValue: "China Inc", type: "text", onChange:(text)=>{console.log(text)} }}
  151.               />
  152.             </div>
  153.             <div className="col-sm-3">
  154.               <FieldGroup
  155.                 label="AlmacĂ©n"
  156.                 icon="user"
  157.                 fieldConfig={{ defaultValue: "China Inc", type: "text", onChange:(text)=>{console.log(text)} }}
  158.               />
  159.             </div>
  160.             <div className="col-sm-3">
  161.               <FieldGroup
  162.                 label="Fecha"
  163.                 icon="calendar-alt"
  164.                 fieldConfig={{
  165.                   defaultValue: startDate,
  166.                   type: "date",
  167.                   onChange: startDate =>
  168.                     this.setState({
  169.                       startDate: startDate,
  170.                       endDate: max([startDate, this.state.endDate])
  171.                     })
  172.                 }}
  173.               />
  174.             </div>
  175.           </div>
  176.         </div>
  177.         <table className="table">
  178.           <thead className="thead-dark">
  179.             <tr>
  180.               <th scope="col"></th>
  181.               <th scope="col">Item</th>
  182.               <th scope="col">Familia</th>
  183.               <th scope="col">Sub-Familia</th>
  184.               <th scope="col">Elemento</th>
  185.               <th scope="col">Modelo</th>
  186.               <th scope="col">Uni/Caj</th>
  187.               <th scope="col">Cantidad Cajas</th>
  188.             </tr>
  189.           </thead>
  190.           <tbody>
  191.             {data.map(row => (
  192.               <RowSample key={row.id} data={row} />
  193.             ))}
  194.           </tbody>
  195.         </table>
  196.         <div className="row">
  197.             <div className="col-sm-3"></div>
  198.             <div className="col-sm-6">
  199.                 <Button color="success" style={{ width: "100%" }}>
  200.                     <FontAwesomeIcon icon="check" /> Crear/Modificar
  201.                 </Button>
  202.             </div>
  203.             <div className="col-sm-3"></div>
  204.         </div>
  205.       </>
  206.     );
  207.   }
  208. }
  209. export default Stock;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top