CreateParameter.js 59.7 KB
Newer Older
faisalhamdi's avatar
faisalhamdi committed
1 2
import React, { Component } from 'react';
import { TextField, Typography } from '@material-ui/core';
3 4 5 6 7
import Autocomplete from '@material-ui/lab/Autocomplete';
import api from '../../../api';
import { DatePicker } from '@material-ui/pickers';
import { format } from 'date-fns';
import * as R from 'ramda'
d.arizona's avatar
d.arizona committed
8
import Images from '../../../assets/Images';
faisalhamdi's avatar
faisalhamdi committed
9 10

export default class CreateParameter extends Component {
11 12 13 14 15 16 17 18 19 20 21
    constructor(props) {
        super(props)
        this.state = {
            enableParameter: false,
            id: '',
            description: '',
            value: null,
            order: null,
            minValue: null,
            maxValue: null,
            startDate: '',
Deni Rinaldi's avatar
Deni Rinaldi committed
22
            endDate: null,
23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
            date: new Date(),
            approvedBy: null,
            getApprovedBy: null,
            types: null,
            getTypes: null,
            perusahaan: null,
            getPerusahaan: null,
            parameter: null,
            getParameter: null,
            operators: null,
            getOperators: null,
            tempData: null,
            errorParameter: false,
            errorDeskripsi: false,
            errorValue: false,
            errorMinValue: false,
            errorOrder: false,
            errorMaxValue: false,
            errorStartDate: false,
            errorEndDate: false,
Deni Rinaldi's avatar
Deni Rinaldi committed
43 44 45 46
            errorGroup: false,
            errorPerusahaan: false,
            msgErrorPerusahaan: '',
            msgErrorGroup: '',
47 48 49 50 51 52 53 54 55 56 57 58 59 60
            msgErrorParameter: '',
            msgErrorDeskripsi: '',
            msgErrorValue: '',
            msgErrorMinValue: '',
            msgErrorOrder: '',
            msgErrorMaxValue: '',
            msgErrorStartDate: '',
            msgErrorEndDate: ''
        }
    }

    componentDidMount() {
        if (this.props.type === 'edit') {
            this.setState({
Deni Rinaldi's avatar
Deni Rinaldi committed
61
                getSettingTypeID: this.props.data[0],
62 63 64
            })
            this.getDetailParameter()
        } else {
Deni Rinaldi's avatar
Deni Rinaldi committed
65 66 67 68 69
            let date = format(new Date, 'yyyy-MM-dd')
            this.setState({
                startDate: date,
                endDate: date
            })
70 71 72 73 74 75
            this.getDataGroup()
            this.getDataPerusahaan()
        }
    }

    getDetailParameter() {
Deni Rinaldi's avatar
Deni Rinaldi committed
76
        api.create().getDetailParameter(this.props.data[0]).then((response) => {
77 78 79 80 81 82 83 84
            console.log(response);
            if (response.data.status === 'success') {
                let data = response.data.data
                this.setState({
                    tempData: response.data.data,
                    getSettingGroupID: data.setting_group_id,
                    getCompanyID: data.company_id,
                    settingType: data.setting_type,
Deni Rinaldi's avatar
Deni Rinaldi committed
85 86 87 88 89 90
                }, () => {
                    this.getAllGroup()
                    this.getPerusahaan()
                    this.getParameterByGroup(data.setting_group_id)
                    console.log(this.state.tempData)
                })
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228
            } else {
                alert(response.data.message)
            }
        })
    }

    getAllGroup() {
        api.create().getAllGroup().then(response => {
            console.log(response);
            if (response.data.status == 'success') {
                let data = response.data.data
                let typeData = data.map((item) => {
                    return {
                        setting_group_id: item.setting_group_id,
                        setting_group_name: item.setting_group_name
                    }
                })
                let index = typeData.findIndex((val) => val.setting_group_id == this.state.getSettingGroupID)
                let typeProps = {
                    options: typeData,
                    getOptionLabel: (option) => option.setting_group_name,
                };
                this.setState({ types: typeProps, typeData: response.data.data, getTypes: index == -1 ? typeData[0] : typeData[index] })
            } else {
                alert(response.data.message)
            }
        })
    }

    getPerusahaan() {
        api.create().getPerusahaanActive().then(response => {
            if (response.data.status == 'success') {
                let data = response.data.data
                let perusahaanData = data.map((item) => {
                    return {
                        company_id: item.company_id,
                        company_name: item.company_name
                    }
                })
                perusahaanData.push({
                    company_id: 0,
                    company_name: 'Default'
                })
                let index = perusahaanData.sort((a, b) => a.company_id - b.company_id).findIndex((val) => val.company_id == this.state.getCompanyID)
                let typeProps = {
                    options: perusahaanData,
                    getOptionLabel: (option) => option.company_name,
                };
                this.setState({ perusahaan: typeProps, perusahaanData: response.data.data, getPerusahaan: index == -1 ? perusahaanData[0] : perusahaanData[index] })
            } else {
                alert(response.data.message)
            }
        })
    }

    getDataGroup() {
        api.create().getAllGroup().then((response) => {
            if (response.data.status == 'success') {
                let data = response.data.data
                let typeData = data.map((item) => {
                    return {
                        setting_group_id: item.setting_group_id,
                        setting_group_name: item.setting_group_name
                    }
                })
                let typeProps = {
                    options: typeData,
                    getOptionLabel: (option) => option.setting_group_name,
                };
                this.setState({ types: typeProps, typeData: response.data.data })
            } else {
                alert(response.data.message)
            }
        })
    }

    getDataPerusahaan() {
        api.create().getPerusahaanActive().then((response) => {
            if (response.data.status == 'success') {
                let data = response.data.data
                let typeData = data.map((item) => {
                    return {
                        company_id: item.company_id,
                        company_name: item.company_name
                    }
                })
                typeData.push({
                    company_id: 0,
                    company_name: 'Default'
                })
                let typeProps = {
                    options: typeData.sort((a, b) => a.company_id - b.company_id),
                    getOptionLabel: (option) => option.company_name,
                };
                this.setState({ perusahaan: typeProps, perusahaanData: response.data.data })
            } else {
                alert(response.data.message)
            }
        })
    }

    getParameterByGroup(id) {
        api.create().getParameterByGroup(id).then(response => {
            console.log(response);
            if (response.data.status == 'success') {
                let data = response.data.data
                let typeData = data.map((item) => {
                    return {
                        setting_type_id: item.setting_type_id,
                        setting_type_name: item.setting_type_name
                    }
                })
                let index = typeData.findIndex((val) => val.setting_type_id == this.state.getSettingTypeID)
                let typeProps = {
                    options: typeData,
                    getOptionLabel: (option) => option.setting_type_name,
                };
                this.setState({ enableParameter: true, parameter: typeProps, parameterData: response.data.data, getParameter: index == -1 ? typeData[0] : typeData[index] })
            } else {
                alert(response.data.message)
            }
        })
    }

    handleChange(e, type) {
        let data = this.state
        let isDate = type !== '' ? true : false
        if (isDate && type == 'start_date') {
            this.setState({
                ...data, tempData: { ...this.state.tempData, start_date: format(e, 'yyyy-MM-dd'), end_date: null },
                errorParameter: false,
                errorDeskripsi: false,
                errorValue: false,
                errorMinValue: false,
                errorOrder: false,
                errorMaxValue: false,
                errorStartDate: false,
                errorEndDate: false,
Deni Rinaldi's avatar
Deni Rinaldi committed
229 230 231 232
                errorGroup: false,
                errorPerusahaan: false,
                msgErrorPerusahaan: '',
                msgErrorGroup: '',
233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252
                msgErrorParameter: '',
                msgErrorDeskripsi: '',
                msgErrorValue: '',
                msgErrorMinValue: '',
                msgErrorOrder: '',
                msgErrorMaxValue: '',
                msgErrorStartDate: '',
                msgErrorEndDate: ''
            })
        } else if (isDate && type == 'end_date') {
            this.setState({
                ...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') },
                errorParameter: false,
                errorDeskripsi: false,
                errorValue: false,
                errorMinValue: false,
                errorOrder: false,
                errorMaxValue: false,
                errorStartDate: false,
                errorEndDate: false,
Deni Rinaldi's avatar
Deni Rinaldi committed
253 254 255 256
                errorGroup: false,
                errorPerusahaan: false,
                msgErrorPerusahaan: '',
                msgErrorGroup: '',
257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277
                msgErrorParameter: '',
                msgErrorDeskripsi: '',
                msgErrorValue: '',
                msgErrorMinValue: '',
                msgErrorOrder: '',
                msgErrorMaxValue: '',
                msgErrorStartDate: '',
                msgErrorEndDate: ''
            })
        } else {
            this.setState({
                ...data,
                tempData: { ...this.state.tempData, [e.target.name]: e.target.value },
                errorParameter: false,
                errorDeskripsi: false,
                errorValue: false,
                errorMinValue: false,
                errorOrder: false,
                errorMaxValue: false,
                errorStartDate: false,
                errorEndDate: false,
Deni Rinaldi's avatar
Deni Rinaldi committed
278 279 280 281
                errorGroup: false,
                errorPerusahaan: false,
                msgErrorPerusahaan: '',
                msgErrorGroup: '',
282 283 284 285 286 287 288 289 290 291 292 293
                msgErrorParameter: '',
                msgErrorDeskripsi: '',
                msgErrorValue: '',
                msgErrorMinValue: '',
                msgErrorOrder: '',
                msgErrorMaxValue: '',
                msgErrorStartDate: '',
                msgErrorEndDate: ''
            })
        }
    }

Deni Rinaldi's avatar
Deni Rinaldi committed
294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318
    clearMessage() {
        this.setState({
            errorParameter: false,
            errorDeskripsi: false,
            errorValue: false,
            errorMinValue: false,
            errorOrder: false,
            errorMaxValue: false,
            errorStartDate: false,
            errorEndDate: false,
            errorGroup: false,
            errorPerusahaan: false,
            msgErrorPerusahaan: '',
            msgErrorGroup: '',
            msgErrorParameter: '',
            msgErrorDeskripsi: '',
            msgErrorValue: '',
            msgErrorMinValue: '',
            msgErrorOrder: '',
            msgErrorMaxValue: '',
            msgErrorStartDate: '',
            msgErrorEndDate: ''
        })
    }

319 320 321 322
    handleChangeCreate(e, type) {
        let data = this.state
        let isDate = type !== '' ? true : false
        if (isDate && type == 'start_date') {
Deni Rinaldi's avatar
Deni Rinaldi committed
323
            this.setState({ startDate: format(e, 'yyyy-MM-dd'), endDate: null }, () => {
324 325 326 327 328 329 330
                console.log(this.state.startDate)
            })
        } else if (isDate && type == 'end_date') {
            this.setState({ endDate: format(e, 'yyyy-MM-dd') }, () => {
                console.log(this.state.endDate)
            })
        } else {
Deni Rinaldi's avatar
Deni Rinaldi committed
331
            this.setState({ ...data, [e.target.name]: e.target.value }, () => this.clearMessage())
332 333 334 335
        }
    }

    validasi() {
Deni Rinaldi's avatar
Deni Rinaldi committed
336
        if (R.isNil(this.state.getTypes)) {
Deni Rinaldi's avatar
Deni Rinaldi committed
337
            this.setState({ errorGroup: true, msgErrorGroup: 'Group Cannot be Empty.' })
Deni Rinaldi's avatar
Deni Rinaldi committed
338
        } else if (R.isNil(this.state.getParameter)) {
Deni Rinaldi's avatar
Deni Rinaldi committed
339
            this.setState({ errorParameter: true, msgErrorParameter: 'Parameter Cannot be Empty.' })
Deni Rinaldi's avatar
Deni Rinaldi committed
340
        } else if (R.isNil(this.state.getPerusahaan)) {
Deni Rinaldi's avatar
Deni Rinaldi committed
341
            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Cannot be Empty.' })
Deni Rinaldi's avatar
Deni Rinaldi committed
342 343 344 345
            // } else if (R.isEmpty(this.state.tempData.description)) {
            //     this.setState({ errorDeskripsi: true, msgErrorDeskripsi: 'Deskripsi tidak boleh kosong' })
            // } else if (R.isEmpty(this.state.tempData.value)) {
            //     this.setState({ errorValue: true, msgErrorValue: 'Value tidak boleh kosong' })
Deni Rinaldi's avatar
Deni Rinaldi committed
346 347
        } else if ((!R.isNil(this.state.tempData.max_value) && R.isNil(this.state.tempData.min_value)) || (!R.isEmpty(this.state.tempData.max_value) && R.isEmpty(this.state.tempData.min_value))) {
            this.setState({ errorMinValue: true, msgErrorMinValue: 'Min Value Cannot be Empty.' })
348
        } else if (R.isNil(this.state.tempData.start_date)) {
Deni Rinaldi's avatar
Deni Rinaldi committed
349
            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty.' })
Deni Rinaldi's avatar
Deni Rinaldi committed
350 351
            // } else if (R.isNil(this.state.tempData.order)) {
            //     this.setState({ errorOrder: true, msgErrorOrder: 'Order tidak boleh kosong' })
Deni Rinaldi's avatar
Deni Rinaldi committed
352 353
        } else if ((!R.isNil(this.state.tempData.min_value) && R.isNil(this.state.tempData.max_value)) || (!R.isEmpty(this.state.tempData.min_value) && R.isEmpty(this.state.tempData.max_value))) {
            this.setState({ errorMaxValue: true, msgErrorMaxValue: 'Max Value Cannot be Empty.' })
354
        } else if (R.isNil(this.state.tempData.end_date)) {
Deni Rinaldi's avatar
Deni Rinaldi committed
355
            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty.' })
356 357 358 359 360 361
        } else {
            this.updateParameter()
        }
    }

    validasiCreate() {
Deni Rinaldi's avatar
Deni Rinaldi committed
362
        if (R.isNil(this.state.getTypes)) {
Deni Rinaldi's avatar
Deni Rinaldi committed
363
            this.setState({ errorGroup: true, msgErrorGroup: 'Group Cannot be Empty.' })
Deni Rinaldi's avatar
Deni Rinaldi committed
364
        } else if (R.isNil(this.state.getParameter)) {
Deni Rinaldi's avatar
Deni Rinaldi committed
365
            this.setState({ errorParameter: true, msgErrorParameter: 'Parameter Cannot be Empty.' })
Deni Rinaldi's avatar
Deni Rinaldi committed
366
        } else if (R.isNil(this.state.getPerusahaan)) {
Deni Rinaldi's avatar
Deni Rinaldi committed
367
            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Perusahaan Cannot be Empty.' })
Deni Rinaldi's avatar
Deni Rinaldi committed
368 369 370 371
            // } else if (R.isEmpty(this.state.description)) {
            //     this.setState({ errorDeskripsi: true, msgErrorDeskripsi: 'Deskripsi tidak boleh kosong' })
            // } else if (R.isNil(this.state.value)) {
            //     this.setState({ errorValue: true, msgErrorValue: 'Value tidak boleh kosong' })
Deni Rinaldi's avatar
Deni Rinaldi committed
372 373
        } else if ((!R.isNil(this.state.maxValue) && R.isNil(this.state.minValue)) || (!R.isNil(this.state.maxValue) && R.isEmpty(this.state.minValue))) {
            this.setState({ errorMinValue: true, msgErrorMinValue: 'Min Value Cannot be Empty.' })
374
        } else if (R.isNil(this.state.startDate)) {
Deni Rinaldi's avatar
Deni Rinaldi committed
375
            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty.' })
Deni Rinaldi's avatar
Deni Rinaldi committed
376 377
            // } else if (R.isNil(this.state.order)) {
            //     this.setState({ errorOrder: true, msgErrorOrder: 'Order tidak boleh kosong' })
Deni Rinaldi's avatar
Deni Rinaldi committed
378 379
        } else if ((!R.isNil(this.state.minValue) && R.isNil(this.state.maxValue)) || (!R.isNil(this.state.minValue) && R.isEmpty(this.state.maxValue))) {
            this.setState({ errorMaxValue: true, msgErrorMaxValue: 'Max Value Cannot be Empty.' })
380
        } else if (R.isNil(this.state.endDate)) {
Deni Rinaldi's avatar
Deni Rinaldi committed
381
            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty' })
382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421
        } else {
            this.createParameter()
        }
    }

    updateParameter() {
        let body = {
            "setting_id": this.state.tempData.setting_id,
            "setting_group_id": this.state.getTypes.setting_group_id,
            "setting_type_id": this.state.getParameter.setting_type_id,
            "company_id": this.state.getPerusahaan.company_id,
            "description": this.state.tempData.description,
            "orders": this.state.tempData.order,
            "value": this.state.tempData.value,
            "max_value": this.state.tempData.max_value,
            "min_value": this.state.tempData.min_value,
            "start_date": this.state.tempData.start_date,
            "end_date": this.state.tempData.end_date
        }
        console.log(body);
        this.props.updateParameter(body)
    }

    createParameter() {
        let body = {
            "setting_group_id": this.state.getTypes.setting_group_id,
            "setting_type_id": this.state.getParameter.setting_type_id,
            "company_id": this.state.getPerusahaan.company_id,
            "description": this.state.description,
            "orders": this.state.order,
            "value": this.state.value,
            "max_value": this.state.maxValue,
            "min_value": this.state.minValue,
            "start_date": this.state.startDate,
            "end_date": this.state.endDate
        }
        console.log(body);
        this.props.createParameter(body)
    }

faisalhamdi's avatar
faisalhamdi committed
422 423 424 425 426 427 428
    render() {
        let { type } = this.props
        return type === 'edit' ? this.renderEdit() : this.renderCreate()
    }

    renderEdit() {
        return (
429
            <div className="test app-popup-show">
faisalhamdi's avatar
faisalhamdi committed
430
                <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
431
                    <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
faisalhamdi's avatar
faisalhamdi committed
432 433 434 435 436 437 438 439 440 441 442
                        <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
                            <div className="popup-title">
                                <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Ubah Data</span>
                            </div>
                        </div>
                        <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
                            <button
                                type="button"
                                className="btn btn-circle btn-white"
                                onClick={() => this.props.onClickClose()}
                            >
Deni Rinaldi's avatar
Deni Rinaldi committed
443
                                <img src={Images.close} />
faisalhamdi's avatar
faisalhamdi committed
444 445 446 447 448 449 450 451 452 453
                            </button>
                        </div>
                    </div>


                    <div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
                        <div className="column-1">
                            <div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
                                <TextField
                                    style={{ width: '100%' }}
454
                                    value={this.state.tempData === null ? '' : this.state.tempData.setting_id}
faisalhamdi's avatar
faisalhamdi committed
455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471
                                    id="id"
                                    label="ID"
                                    disabled
                                    inputProps={{
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
                                />
                            </div>
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
472 473 474 475
                                <Autocomplete
                                    {...this.state.parameter}
                                    debug
                                    id="tipe"
Deni Rinaldi's avatar
Deni Rinaldi committed
476
                                    onChange={(event, newInputValue) => this.setState({ getParameter: newInputValue }, () => this.clearMessage())}
Deni Rinaldi's avatar
Deni Rinaldi committed
477 478 479 480 481 482 483 484 485
                                    renderInput={(params) =>
                                        <TextField
                                            {...params}
                                            InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
                                            InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
                                            label="Parameter"
                                            error={this.state.errorParameter}
                                            helperText={this.state.msgErrorParameter}
                                        />}
486 487
                                    value={this.state.getParameter}
                                />
faisalhamdi's avatar
faisalhamdi committed
488 489 490 491
                            </div>
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
                                <TextField
                                    style={{ width: '100%' }}
492 493 494
                                    id="description"
                                    label="Description"
                                    value={this.state.tempData === null ? '' : this.state.tempData.description}
faisalhamdi's avatar
faisalhamdi committed
495 496 497 498 499 500 501 502 503 504 505
                                    inputProps={{
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
506 507
                                    name="description"
                                    onChange={(e) => this.handleChange(e, '')}
Deni Rinaldi's avatar
Deni Rinaldi committed
508 509
                                // error={this.state.errorDeskripsi}
                                // helperText={this.state.msgErrorDeskripsi}
faisalhamdi's avatar
faisalhamdi committed
510 511 512 513 514 515 516 517
                                >
                                </TextField>
                            </div>
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
                                <TextField
                                    style={{ width: '100%' }}
                                    id="value"
                                    label="Value"
518
                                    value={this.state.tempData === null ? '' : this.state.tempData.value}
faisalhamdi's avatar
faisalhamdi committed
519
                                    inputProps={{
520
                                        min: 0,
faisalhamdi's avatar
faisalhamdi committed
521 522 523 524 525 526 527 528 529 530
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
531
                                    name="value"
Deni Rinaldi's avatar
Deni Rinaldi committed
532 533 534 535 536 537 538 539 540 541 542 543
                                    onChange={(e) => {
                                        let coba = String(e.target.value).replace(/[^\d]/g, '');
                                        this.setState({
                                            tempData: {
                                                ...this.state.tempData,
                                                value: coba
                                            }
                                        })
                                        this.clearMessage()
                                    }
                                        // this.handleChange(coba, 'value')}
                                    }
Deni Rinaldi's avatar
Deni Rinaldi committed
544 545
                                // error={this.state.errorValue}
                                // helperText={this.state.msgErrorValue}
faisalhamdi's avatar
faisalhamdi committed
546 547 548 549 550 551
                                >
                                </TextField>
                            </div>
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
                                <TextField
                                    style={{ width: '100%' }}
552
                                    id="min_value"
faisalhamdi's avatar
faisalhamdi committed
553
                                    label="Min Value"
554
                                    value={this.state.tempData === null ? '' : this.state.tempData.min_value}
faisalhamdi's avatar
faisalhamdi committed
555
                                    inputProps={{
556
                                        min: 0,
faisalhamdi's avatar
faisalhamdi committed
557 558 559 560 561 562 563 564 565 566
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
567
                                    name="min_value"
Deni Rinaldi's avatar
Deni Rinaldi committed
568 569 570 571 572 573 574 575 576 577 578 579
                                    onChange={(e) => {
                                        let coba = String(e.target.value).replace(/[^\d]/g, '');
                                        this.setState({
                                            tempData: {
                                                ...this.state.tempData,
                                                min_value: coba
                                            }
                                        })
                                        this.clearMessage()
                                    }
                                        // this.handleChange(coba, 'value')}
                                    }
580 581
                                    error={this.state.errorMinValue}
                                    helperText={this.state.msgErrorMinValue}
faisalhamdi's avatar
faisalhamdi committed
582 583 584 585
                                >
                                </TextField>
                            </div>
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
586 587 588
                                <DatePicker
                                    margin="normal"
                                    id="start_date"
Deni Rinaldi's avatar
Deni Rinaldi committed
589
                                    label="Valid From"
590 591 592 593 594 595 596 597
                                    format="dd MMMM yyyy"
                                    value={this.state.tempData === null ? '' : this.state.tempData.start_date}
                                    error={this.state.errorStartDate}
                                    helperText={this.state.msgErrorStartDate}
                                    onChange={(e) => this.handleChange(e, 'start_date')}
                                    KeyboardButtonProps={{
                                        'aria-label': 'change date',
                                    }}
faisalhamdi's avatar
faisalhamdi committed
598 599 600 601 602 603 604 605 606 607 608
                                    inputProps={{
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
609 610 611

                                    style={{ padding: 0, margin: 0, width: '100%' }}
                                />
faisalhamdi's avatar
faisalhamdi committed
612 613
                            </div>

614
                            <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
faisalhamdi's avatar
faisalhamdi committed
615 616 617 618
                                <TextField
                                    style={{ width: '100%' }}
                                    id="status"
                                    label="Status"
619
                                    value={this.state.tempData === null ? '' : this.state.tempData.status}
faisalhamdi's avatar
faisalhamdi committed
620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635
                                    disabled
                                    inputProps={{
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
                                />
                            </div>

                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
636
                                <div style={{ display: 'flex' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
637
                                    <Typography style={{ fontSize: 11, width: '25%' }}>Created By</Typography>
Deni Rinaldi's avatar
Deni Rinaldi committed
638
                                    <Typography style={{ fontSize: 11 }}>: {this.state.tempData === null ? "" : this.state.tempData.created}</Typography>
639 640
                                </div>
                                <div style={{ display: 'flex' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
641
                                    <Typography style={{ fontSize: 11, width: '25%' }}>Updated By</Typography>
Deni Rinaldi's avatar
Deni Rinaldi committed
642
                                    <Typography style={{ fontSize: 11 }}>: {this.state.tempData === null ? "" : this.state.tempData.updated === null ? "" : this.state.tempData.updated}</Typography>
643
                                </div>
faisalhamdi's avatar
faisalhamdi committed
644 645 646 647
                            </div>
                        </div>

                        <div className="column-2">
648 649 650 651 652
                            <div className="" style={{ padding: 10, borderRadius: 5 }}>
                                <Autocomplete
                                    {...this.state.types}
                                    debug
                                    id="tipe"
Deni Rinaldi's avatar
Deni Rinaldi committed
653 654 655 656 657 658 659 660 661
                                    onChange={(event, newInputValue) => this.setState({ getTypes: newInputValue }, () => newInputValue === null ? this.setState({ enableParameter: false, getParameter: null }, () => this.clearMessage()) : this.getParameterByGroup(newInputValue.setting_group_id), this.clearMessage())}
                                    renderInput={(params) =>
                                        <TextField
                                            {...params}
                                            error={this.state.errorGroup}
                                            helperText={this.state.msgErrorGroup}
                                            InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
                                            InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
                                            label="Group" />}
662 663
                                    value={this.state.getTypes}
                                />
faisalhamdi's avatar
faisalhamdi committed
664 665
                            </div>
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
666 667 668 669
                                <Autocomplete
                                    {...this.state.perusahaan}
                                    debug
                                    id="tipe"
Deni Rinaldi's avatar
Deni Rinaldi committed
670 671 672 673 674 675 676
                                    onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue }, () => this.clearMessage())}
                                    renderInput={(params) =>
                                        <TextField {...params}
                                            error={this.state.errorPerusahaan}
                                            helperText={this.state.msgErrorPerusahaan}
                                            InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
                                            InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
Deni Rinaldi's avatar
Deni Rinaldi committed
677
                                            label="Company" />}
678 679
                                    value={this.state.getPerusahaan}
                                />
faisalhamdi's avatar
faisalhamdi committed
680 681 682 683 684 685
                            </div>
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
                                <TextField
                                    style={{ width: '100%' }}
                                    id="order"
                                    label="Order"
686
                                    value={this.state.tempData === null ? '' : this.state.tempData.order}
faisalhamdi's avatar
faisalhamdi committed
687
                                    inputProps={{
688
                                        min: 0,
faisalhamdi's avatar
faisalhamdi committed
689 690 691 692 693 694 695 696 697 698
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
699
                                    name="order"
Deni Rinaldi's avatar
Deni Rinaldi committed
700 701 702 703 704 705 706 707 708 709 710
                                    onChange={(e) => {
                                        let coba = String(e.target.value).replace(/[^\d]/g,'');
                                        this.setState({
                                            tempData: {
                                                ...this.state.tempData,
                                                order: coba
                                            }
                                        })
                                        this.clearMessage()}
                                        // this.handleChange(coba, 'value')}
                                    }
Deni Rinaldi's avatar
Deni Rinaldi committed
711 712
                                // error={this.state.errorOrder}
                                // helperText={this.state.msgErrorOrder}
faisalhamdi's avatar
faisalhamdi committed
713 714 715 716 717 718
                                >
                                </TextField>
                            </div>
                            <div style={{ marginTop: '80px', padding: 10, borderRadius: 5 }}>
                                <TextField
                                    style={{ width: '100%' }}
719
                                    id="max_value"
faisalhamdi's avatar
faisalhamdi committed
720
                                    label="Max Value"
721
                                    value={this.state.tempData === null ? '' : this.state.tempData.max_value}
faisalhamdi's avatar
faisalhamdi committed
722
                                    inputProps={{
723
                                        min: 0,
faisalhamdi's avatar
faisalhamdi committed
724 725 726 727 728 729 730 731 732 733
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
734
                                    name="max_value"
Deni Rinaldi's avatar
Deni Rinaldi committed
735 736 737 738 739 740 741 742 743 744 745 746
                                    onChange={(e) => {
                                        let coba = String(e.target.value).replace(/[^\d]/g, '');
                                        this.setState({
                                            tempData: {
                                                ...this.state.tempData,
                                                max_value: coba
                                            }
                                        })
                                        this.clearMessage()
                                    }
                                        // this.handleChange(coba, 'value')}
                                    }
747 748
                                    error={this.state.errorMaxValue}
                                    helperText={this.state.msgErrorMaxValue}
faisalhamdi's avatar
faisalhamdi committed
749 750 751 752
                                >
                                </TextField>
                            </div>
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
753 754 755
                                <DatePicker
                                    margin="normal"
                                    id="end_date"
Deni Rinaldi's avatar
Deni Rinaldi committed
756
                                    label="Valid To"
757 758 759 760 761 762 763 764 765
                                    format="dd MMMM yyyy"
                                    error={this.state.errorEndDate}
                                    helperText={this.state.msgErrorEndDate}
                                    minDate={this.state.tempData === null ? null : this.state.tempData.start_date}
                                    value={this.state.tempData === null ? '' : this.state.tempData.end_date}
                                    onChange={(e) => this.handleChange(e, 'end_date')}
                                    KeyboardButtonProps={{
                                        'aria-label': 'change date',
                                    }}
faisalhamdi's avatar
faisalhamdi committed
766 767 768 769 770 771 772 773 774 775 776
                                    inputProps={{
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
777 778 779

                                    style={{ padding: 0, margin: 0, width: '100%' }}
                                />
faisalhamdi's avatar
faisalhamdi committed
780 781 782 783 784 785
                            </div>
                        </div>
                    </div>

                    <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
                        <div className="column-1" style={{ alignSelf: 'center' }}>
786 787 788 789 790 791 792 793
                            <button
                                type="button"
                                onClick={() => this.props.onClickClose()}
                            >
                                <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
                                    <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
                                </div>
                            </button>
faisalhamdi's avatar
faisalhamdi committed
794 795
                        </div>
                        <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
796 797 798 799 800 801 802 803
                            <button
                                type="button"
                                onClick={() => this.validasi()}
                            >
                                <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
                                    <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
                                </div>
                            </button>
faisalhamdi's avatar
faisalhamdi committed
804 805 806 807 808 809 810 811 812
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    renderCreate() {
        return (
813
            <div className="test app-popup-show">
faisalhamdi's avatar
faisalhamdi committed
814
                <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
815
                    <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
faisalhamdi's avatar
faisalhamdi committed
816 817 818 819 820 821 822 823 824 825 826
                        <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
                            <div className="popup-title">
                                <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span>
                            </div>
                        </div>
                        <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
                            <button
                                type="button"
                                className="btn btn-circle btn-white"
                                onClick={() => this.props.onClickClose()}
                            >
Deni Rinaldi's avatar
Deni Rinaldi committed
827
                                <img src={Images.close} />
faisalhamdi's avatar
faisalhamdi committed
828 829 830 831 832 833 834
                            </button>
                        </div>
                    </div>


                    <div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
                        <div className="column-1">
835
                            <div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
faisalhamdi's avatar
faisalhamdi committed
836 837
                                <TextField
                                    style={{ width: '100%' }}
838 839 840 841
                                    value={this.state.tempData === null ? '' : this.state.tempData.setting_id}
                                    id="id"
                                    label="ID"
                                    disabled
faisalhamdi's avatar
faisalhamdi committed
842 843 844 845 846 847 848 849 850 851 852
                                    inputProps={{
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
853
                                />
faisalhamdi's avatar
faisalhamdi committed
854
                            </div>
855 856 857 858 859 860
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
                                <Autocomplete
                                    {...this.state.parameter}
                                    debug
                                    disabled={!this.state.enableParameter}
                                    id="tipe"
Deni Rinaldi's avatar
Deni Rinaldi committed
861
                                    onChange={(event, newInputValue) => this.setState({ getParameter: newInputValue }, () => this.clearMessage())}
Deni Rinaldi's avatar
Deni Rinaldi committed
862 863 864 865 866 867 868 869 870
                                    renderInput={(params) =>
                                        <TextField
                                            {...params}
                                            InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
                                            InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
                                            label="Parameter"
                                            error={this.state.errorParameter}
                                            helperText={this.state.msgErrorParameter}
                                        />}
871 872 873 874
                                    value={this.state.getParameter}
                                />
                            </div>
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
faisalhamdi's avatar
faisalhamdi committed
875 876
                                <TextField
                                    style={{ width: '100%' }}
877 878 879
                                    id="description"
                                    label="Description"
                                    value={this.state.description === '' ? '' : this.state.description}
faisalhamdi's avatar
faisalhamdi committed
880 881 882 883 884 885 886 887 888 889 890
                                    inputProps={{
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
891 892
                                    name="description"
                                    onChange={(e) => this.handleChangeCreate(e, '')}
faisalhamdi's avatar
faisalhamdi committed
893 894 895
                                >
                                </TextField>
                            </div>
896
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
faisalhamdi's avatar
faisalhamdi committed
897 898 899 900
                                <TextField
                                    style={{ width: '100%' }}
                                    id="value"
                                    label="Value"
901
                                    value={this.state.value === null ? '' : this.state.value}
faisalhamdi's avatar
faisalhamdi committed
902
                                    inputProps={{
903
                                        min: 0,
faisalhamdi's avatar
faisalhamdi committed
904 905 906 907
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
Deni Rinaldi's avatar
Deni Rinaldi committed
908

faisalhamdi's avatar
faisalhamdi committed
909 910 911 912 913 914
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
915
                                    name="value"
Deni Rinaldi's avatar
Deni Rinaldi committed
916 917 918 919 920 921 922 923
                                    onChange={(e) => {
                                        let coba = String(e.target.value).replace(/[^\d]/g,'');
                                        this.setState({
                                            value: coba
                                        })
                                        this.clearMessage()}
                                        // this.handleChange(coba, 'value')}
                                    }
Deni Rinaldi's avatar
Deni Rinaldi committed
924 925
                                // error={this.state.errorValue}
                                // helperText={this.state.msgErrorValue}
faisalhamdi's avatar
faisalhamdi committed
926 927 928
                                >
                                </TextField>
                            </div>
929
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
faisalhamdi's avatar
faisalhamdi committed
930 931
                                <TextField
                                    style={{ width: '100%' }}
932
                                    id="min_value"
faisalhamdi's avatar
faisalhamdi committed
933
                                    label="Min Value"
934
                                    value={this.state.minValue === null ? '' : this.state.minValue}
faisalhamdi's avatar
faisalhamdi committed
935
                                    inputProps={{
936
                                        min: 0,
faisalhamdi's avatar
faisalhamdi committed
937 938 939 940 941 942 943 944 945 946
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
947
                                    name="minValue"
Deni Rinaldi's avatar
Deni Rinaldi committed
948 949 950 951 952 953 954 955
                                    onChange={(e) => {
                                        let coba = String(e.target.value).replace(/[^\d]/g,'');
                                        this.setState({
                                            minValue: coba
                                        })
                                        this.clearMessage()}
                                        // this.handleChange(coba, 'value')}
                                    }
956 957
                                    error={this.state.errorMinValue}
                                    helperText={this.state.msgErrorMinValue}
faisalhamdi's avatar
faisalhamdi committed
958 959 960
                                >
                                </TextField>
                            </div>
961 962 963 964
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
                                <DatePicker
                                    margin="normal"
                                    id="startDate"
Deni Rinaldi's avatar
Deni Rinaldi committed
965
                                    label="Valid From"
966 967 968 969 970 971 972 973
                                    format="dd MMMM yyyy"
                                    error={this.state.errorStartDate}
                                    helperText={this.state.msgErrorStartDate}
                                    value={this.state.startDate == "" ? null : this.state.startDate}
                                    onChange={(e) => this.handleChangeCreate(e, 'start_date')}
                                    KeyboardButtonProps={{
                                        'aria-label': 'change date',
                                    }}
faisalhamdi's avatar
faisalhamdi committed
974 975 976 977 978 979 980 981 982 983 984
                                    inputProps={{
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
985 986 987

                                    style={{ padding: 0, margin: 0, width: '100%' }}
                                />
faisalhamdi's avatar
faisalhamdi committed
988 989
                            </div>

990
                            <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
faisalhamdi's avatar
faisalhamdi committed
991 992
                                <TextField
                                    style={{ width: '100%' }}
Deni Rinaldi's avatar
Deni Rinaldi committed
993
                                    defaultValue={"Active"}
faisalhamdi's avatar
faisalhamdi committed
994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010
                                    id="status"
                                    label="Status"
                                    disabled
                                    inputProps={{
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
                                />
                            </div>

a.bairuha's avatar
a.bairuha committed
1011
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
a.bairuha's avatar
a.bairuha committed
1012 1013
                                <Typography style={{ fontSize: 11, width: '25%' }}>Created By	: </Typography>
                                <Typography style={{ fontSize: 11, width: '25%' }}>Updated By	: </Typography>
faisalhamdi's avatar
faisalhamdi committed
1014 1015 1016 1017
                            </div>
                        </div>

                        <div className="column-2">
1018 1019 1020 1021 1022
                            <div className="" style={{ padding: 10, borderRadius: 5 }}>
                                <Autocomplete
                                    {...this.state.types}
                                    debug
                                    id="tipe"
Deni Rinaldi's avatar
Deni Rinaldi committed
1023
                                    onChange={(event, newInputValue) => this.setState({ getTypes: newInputValue }, () => newInputValue === null ? this.setState({ enableParameter: false, getParameter: null }, () => this.clearMessage()) : this.getParameterByGroup(newInputValue.setting_group_id), this.clearMessage())}
Deni Rinaldi's avatar
Deni Rinaldi committed
1024 1025 1026 1027 1028 1029 1030 1031 1032
                                    renderInput={(params) =>
                                        <TextField
                                            {...params}
                                            InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
                                            InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
                                            label="Group"
                                            error={this.state.errorGroup}
                                            helperText={this.state.msgErrorGroup}
                                        />}
1033 1034
                                    value={this.state.getTypes}
                                />
faisalhamdi's avatar
faisalhamdi committed
1035
                            </div>
1036 1037 1038 1039 1040
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
                                <Autocomplete
                                    {...this.state.perusahaan}
                                    debug
                                    id="tipe"
Deni Rinaldi's avatar
Deni Rinaldi committed
1041
                                    onChange={(event, newInputValue) => this.setState({ getPerusahaan: newInputValue }, () => this.clearMessage())}
Deni Rinaldi's avatar
Deni Rinaldi committed
1042 1043 1044 1045 1046
                                    renderInput={(params) =>
                                        <TextField
                                            {...params}
                                            InputProps={{ ...params.InputProps, style: { fontSize: 11 } }}
                                            InputLabelProps={{ style: { fontSize: 11, color: '#7e8085' } }}
Deni Rinaldi's avatar
Deni Rinaldi committed
1047
                                            label="Company"
Deni Rinaldi's avatar
Deni Rinaldi committed
1048 1049 1050
                                            error={this.state.errorPerusahaan}
                                            helperText={this.state.msgErrorPerusahaan}
                                        />}
1051 1052
                                    value={this.state.getPerusahaan}
                                />
faisalhamdi's avatar
faisalhamdi committed
1053
                            </div>
1054
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
faisalhamdi's avatar
faisalhamdi committed
1055 1056 1057 1058
                                <TextField
                                    style={{ width: '100%' }}
                                    id="order"
                                    label="Order"
1059
                                    value={this.state.order === null ? '' : this.state.order}
faisalhamdi's avatar
faisalhamdi committed
1060
                                    inputProps={{
1061
                                        min: 0,
faisalhamdi's avatar
faisalhamdi committed
1062 1063 1064 1065 1066 1067 1068 1069 1070 1071
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
1072
                                    name="order"
Deni Rinaldi's avatar
Deni Rinaldi committed
1073 1074 1075 1076 1077 1078 1079 1080
                                    onChange={(e) => {
                                        let coba = String(e.target.value).replace(/[^\d]/g,'');
                                        this.setState({
                                            order: coba
                                        })
                                        this.clearMessage()}
                                        // this.handleChange(coba, 'value')}
                                    }
Deni Rinaldi's avatar
Deni Rinaldi committed
1081 1082
                                // error={this.state.errorOrder}
                                // helperText={this.state.msgErrorOrder}
faisalhamdi's avatar
faisalhamdi committed
1083 1084 1085
                                >
                                </TextField>
                            </div>
1086
                            <div style={{ marginTop: '80px', padding: 10, borderRadius: 5 }}>
faisalhamdi's avatar
faisalhamdi committed
1087 1088
                                <TextField
                                    style={{ width: '100%' }}
1089
                                    id="max_value"
faisalhamdi's avatar
faisalhamdi committed
1090
                                    label="Max Value"
1091
                                    value={this.state.maxValue === null ? '' : this.state.maxValue}
faisalhamdi's avatar
faisalhamdi committed
1092
                                    inputProps={{
1093
                                        min: 0,
faisalhamdi's avatar
faisalhamdi committed
1094 1095 1096 1097 1098 1099 1100 1101 1102 1103
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
1104
                                    name="maxValue"
Deni Rinaldi's avatar
Deni Rinaldi committed
1105 1106 1107 1108 1109 1110 1111 1112
                                    onChange={(e) => {
                                        let coba = String(e.target.value).replace(/[^\d]/g,'');
                                        this.setState({
                                            maxValue: coba
                                        })
                                        this.clearMessage()}
                                        // this.handleChange(coba, 'value')}
                                    }
1113 1114
                                    error={this.state.errorMaxValue}
                                    helperText={this.state.msgErrorMaxValue}
faisalhamdi's avatar
faisalhamdi committed
1115 1116 1117
                                >
                                </TextField>
                            </div>
1118 1119 1120 1121
                            <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
                                <DatePicker
                                    margin="normal"
                                    id="endDate"
Deni Rinaldi's avatar
Deni Rinaldi committed
1122
                                    label="Valid To"
1123 1124 1125 1126 1127 1128 1129 1130 1131
                                    format="dd MMMM yyyy"
                                    error={this.state.errorEndDate}
                                    helperText={this.state.msgErrorEndDate}
                                    minDate={this.state.startDate}
                                    value={this.state.endDate == "" ? null : this.state.endDate}
                                    onChange={(e) => this.handleChangeCreate(e, 'end_date')}
                                    KeyboardButtonProps={{
                                        'aria-label': 'change date',
                                    }}
faisalhamdi's avatar
faisalhamdi committed
1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142
                                    inputProps={{
                                        style: {
                                            fontSize: 11
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085'
                                        }
                                    }}
1143 1144 1145

                                    style={{ padding: 0, margin: 0, width: '100%' }}
                                />
faisalhamdi's avatar
faisalhamdi committed
1146 1147 1148 1149 1150 1151
                            </div>
                        </div>
                    </div>

                    <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
                        <div className="column-1" style={{ alignSelf: 'center' }}>
1152 1153 1154 1155 1156 1157 1158 1159
                            <button
                                type="button"
                                onClick={() => this.props.onClickClose()}
                            >
                                <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
                                    <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
                                </div>
                            </button>
faisalhamdi's avatar
faisalhamdi committed
1160 1161
                        </div>
                        <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
1162 1163 1164 1165 1166
                            <button
                                type="button"
                                onClick={() => this.validasiCreate()}
                            >
                                <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
1167
                                    <span style={{ color: '#fff', fontSize: 11 }}>Save</span>
1168 1169
                                </div>
                            </button>
faisalhamdi's avatar
faisalhamdi committed
1170 1171 1172 1173 1174 1175 1176
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}