ptb-fe/pages/app/pelaporan.new.js

import React, { Component } from 'react';
import ContentWrapper from '@/components/Layout/ContentWrapper';
import {
    Row,
    Col,
    Card,
    CardHeader,
    CardBody,
    FormGroup,
    FormFeedback,
    FormText,
    Label,
    InputGroup,
    InputGroupAddon,
    InputGroupButtonDropdown,
    InputGroupText,
    Input,
    Button,
    DropdownToggle,
    DropdownMenu,
    CustomInput,
    DropdownItem } from 'reactstrap';

const styleHeaderText = {
    color: 'brown'
}
class FormStandard extends Component {

    state = {
        dropdownOpen: false,
        splitButtonOpen: false
    }

    toggleDropDown = () => {
        this.setState({
            dropdownOpen: !this.state.dropdownOpen
        });
    }

    toggleSplit = () => {
        this.setState({
            splitButtonOpen: !this.state.splitButtonOpen
        });
    }

    onSubmit = e => {
        
        e.preventDefault();
    }

    render() {

        return (
            <ContentWrapper unwrap>
                <div className="bg-cover" style={{backgroundImage: 'url(/static/img/profile-bg.png)'}}>
                    <div className="p-4 text-center" style={styleHeaderText} >
                        <img className="img-thumbnail rounded-circle thumb128" src="/static/img/univ-avatar.png" alt="Avatar"/>
                        <h3 className="m-0">Universitas Satyagama</h3>
                        <p>0742/O/1990</p>
                        <p>Jalan Kamal Raya No 2-A Cengkareng</p>
                    </div>
                </div>
                <div className="p-3">
                    <div className="content-heading">
                        <div>Pelaporan Baru
                            <small>Form pembuatan laporan baru v.0.1</small>
                        </div>
                    </div>
                    <Row>
                        <Col xl="9">
                            {/* START card */}
                            <Card className="card-default">
                                <CardHeader>
                                    <label>Informasi Laporan</label>    
                                </CardHeader>
                                <CardBody>
                                    <form className="form-horizontal" method="get" action="/" onSubmit={this.onSubmit}>
                                        {/* <fieldset> */}
                                        <FormGroup row>
                                            <label className="col-md-2 col-form-label">Nomor Pelaporan</label>
                                            <div className="col-md-10">
                                                <Input type="text"/>
                                                <span className="form-text">Nomor pelaporan akan digenerate otomatis dari sistem</span>
                                            </div>
                                        </FormGroup>
                                        {/* </fieldset> */}
                                        <FormGroup row>
                                            <label className="col-md-2 col-form-label">Keterangan Laporan</label>
                                            <div className="col-md-10">
                                                <Input type="textarea"/>
                                                {/* <textarea class="form-control" id="inputContact6" row="3">Some nice Street, 1234</textarea> */}
                                                <span className="form-text">Deskripsi pelaporan minimum karakter 50 maksimum 200 karakter</span>
                                            </div>
                                        </FormGroup>
                                        <FormGroup row>
                                            <label className="col-md-2 col-form-label">Upload File Pendukung</label>
                                            <div className="col-md-10">
                                                {/* <input type="file" multiple name="customFile" class="custom-file-input"></input> */}
                                                <CustomInput
                                                    type="file" multiple
                                                    id="exampleCustomFileBrowser"
                                                    name="customFile"
                                                />
                                                <span className="form-text">Multiple files upload</span>
                                            </div>
                                        </FormGroup>
                                        <FormGroup row>
                                            <div className="col-xl-10">
                                                <button className="btn btn-sm btn-primary" type="submit">Submit Laporan</button>
                                            </div>
                                        </FormGroup>
                                    </form>
                                </CardBody>
                            </Card>
                            {/* END card */}
                        </Col>
                        <Col xl="3">
                            <div className="card card-default">
                                <div className="card-body">
                                    <div className="text-center">
                                        <h3 className="mt-0">Universitas Satyagama</h3>
                                        <p>0742/O/1990</p>
                                    </div>
                                    <hr/>
                                    <ul className="list-unstyled px-4">
                                        <li>
                                            <em className="fa fa-globe fa-fw mr-3"></em>www.satyagama.ac.id
                                        </li>
                                        <li>
                                            <em className="fa fa-graduation-cap fa-fw mr-3"></em>Status Pelanggaran : Tidak Ada
                                        </li>
                                        
                                    </ul>
                                </div>
                            </div>
                        </Col>
                    </Row>

                </div>
            </ContentWrapper>
            );
    }

}

export default FormStandard;