EditRole.js 47.3 KB
Newer Older
d.arizona's avatar
d.arizona committed
1
import React, { Component } from 'react';
a.bairuha's avatar
a.bairuha committed
2
import { TextField, Divider, Typography, Checkbox, withStyles, Collapse, Snackbar } from '@material-ui/core';
d.arizona's avatar
d.arizona committed
3
import api from '../../../api';
d.arizona's avatar
d.arizona committed
4 5
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
d.arizona's avatar
d.arizona committed
6
import { DatePicker } from "@material-ui/pickers";
d.arizona's avatar
d.arizona committed
7
import format from "date-fns/format";
d.arizona's avatar
d.arizona committed
8
import * as R from 'ramda'
d.arizona's avatar
d.arizona committed
9
import Images from '../../../assets/Images';
a.bairuha's avatar
a.bairuha committed
10
import MuiAlert from '@material-ui/lab/Alert';
a.bairuha's avatar
a.bairuha committed
11
import Constant from '../../../library/Constant';
a.bairuha's avatar
a.bairuha committed
12

d.arizona's avatar
d.arizona committed
13 14 15
const CustomCheckbox = withStyles({
    root: {
        color: '#51c6ea',
Deni Rinaldi's avatar
Deni Rinaldi committed
16 17 18 19
        '&$checked': {
            color: '#51c6ea',
        },
        padding: 5
d.arizona's avatar
d.arizona committed
20 21
    },
    checked: {},
Deni Rinaldi's avatar
Deni Rinaldi committed
22
})((props) => <Checkbox color="default" {...props} />);
d.arizona's avatar
d.arizona committed
23

a.bairuha's avatar
a.bairuha committed
24 25 26
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);

d.arizona's avatar
d.arizona committed
27
export default class EditRole extends Component {
Deni Rinaldi's avatar
Deni Rinaldi committed
28

d.arizona's avatar
d.arizona committed
29 30 31 32 33 34 35
    constructor(props) {
        super(props)
        this.state = {
            paramsId: this.props.data,
            tempData: null,
            menuData: null,
            privileges: [],
d.arizona's avatar
d.arizona committed
36 37
            checked: false,
            selectedIndex: 0,
d.arizona's avatar
d.arizona committed
38 39 40 41 42 43 44
            date: new Date(),
            errorRoleName: false,
            errorStartDate: false,
            errorEndDate: false,
            msgErrorRN: '',
            msgErrorSD: '',
            msgErrorED: '',
Deni Rinaldi's avatar
Deni Rinaldi committed
45 46
            application: [],
            setting: [],
a.bairuha's avatar
a.bairuha committed
47 48 49
            alert: false,
            tipeAlert: '',
            messageAlert: ''
d.arizona's avatar
d.arizona committed
50 51 52 53
        }
    }

    handleChecked() {
Deni Rinaldi's avatar
Deni Rinaldi committed
54
        this.setState({ checked: !this.state.checked })
d.arizona's avatar
d.arizona committed
55
    }
Deni Rinaldi's avatar
Deni Rinaldi committed
56

d.arizona's avatar
d.arizona committed
57 58 59 60 61
    componentDidMount() {
        this.getDetailRole()
        this.getMenu()
    }

d.arizona's avatar
d.arizona committed
62
    handleChange(e, type) {
d.arizona's avatar
d.arizona committed
63
        let data = this.state
Deni Rinaldi's avatar
Deni Rinaldi committed
64
        let isDate = type !== '' ? true : false
d.arizona's avatar
d.arizona committed
65
        if (isDate && type === 'start_date') {
Deni Rinaldi's avatar
Deni Rinaldi committed
66 67
            this.setState({
                ...data, tempData: { ...this.state.tempData, start_date: format(e, 'yyyy-MM-dd'), end_date: null },
d.arizona's avatar
d.arizona committed
68 69 70 71 72 73
                errorRoleName: false,
                errorStartDate: false,
                errorEndDate: false,
                msgErrorRN: '',
                msgErrorSD: '',
                msgErrorED: '',
d.arizona's avatar
d.arizona committed
74
            })
d.arizona's avatar
d.arizona committed
75
        } else if (isDate && type === 'end_date') {
Deni Rinaldi's avatar
Deni Rinaldi committed
76 77
            this.setState({
                ...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') },
d.arizona's avatar
d.arizona committed
78 79 80 81 82 83
                errorRoleName: false,
                errorStartDate: false,
                errorEndDate: false,
                msgErrorRN: '',
                msgErrorSD: '',
                msgErrorED: '',
d.arizona's avatar
d.arizona committed
84 85
            })
        } else {
Deni Rinaldi's avatar
Deni Rinaldi committed
86 87
            this.setState({
                ...data, tempData: { ...this.state.tempData, [e.target.name]: e.target.value },
d.arizona's avatar
d.arizona committed
88 89 90 91 92
                errorRoleName: false,
                errorStartDate: false,
                errorEndDate: false,
                msgErrorRN: '',
                msgErrorSD: '',
Deni Rinaldi's avatar
Deni Rinaldi committed
93
                msgErrorED: '',
d.arizona's avatar
d.arizona committed
94
            })
d.arizona's avatar
d.arizona committed
95
        }
Deni Rinaldi's avatar
Deni Rinaldi committed
96

d.arizona's avatar
d.arizona committed
97 98 99 100
    }

    getDetailRole() {
        api.create().getDetailRole(this.state.paramsId).then((response) => {
a.bairuha's avatar
a.bairuha committed
101 102 103 104
            if (response.data) {
                if (response.ok) {
                    if (response.data.status === 'success') {
                        this.setState({ tempData: response.data.data, privileges: response.data.data.privileges })
Deni Rinaldi's avatar
Deni Rinaldi committed
105
                        // console.log(response.data.data.start_date)
a.bairuha's avatar
a.bairuha committed
106
                    } else {
a.bairuha's avatar
a.bairuha committed
107
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
a.bairuha's avatar
a.bairuha committed
108
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
109 110 111 112 113 114
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
a.bairuha's avatar
a.bairuha committed
115 116 117 118
                    }
                } else {
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
                }
d.arizona's avatar
d.arizona committed
119
            } else {
a.bairuha's avatar
a.bairuha committed
120
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
d.arizona's avatar
d.arizona committed
121 122 123 124
            }
        })
    }

d.arizona's avatar
d.arizona committed
125 126
    validasi() {
        if (R.isEmpty(this.state.tempData.role_name)) {
d.arizona's avatar
d.arizona committed
127
            this.setState({ errorRoleName: true, msgErrorRN: 'Role Cannot be Empty' })
d.arizona's avatar
d.arizona committed
128
        } else if (R.isNil(this.state.tempData.start_date)) {
d.arizona's avatar
d.arizona committed
129
            this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty' })
d.arizona's avatar
d.arizona committed
130
        } else if (R.isNil(this.state.tempData.end_date)) {
d.arizona's avatar
d.arizona committed
131
            this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty' })
Deni Rinaldi's avatar
Deni Rinaldi committed
132
        } else if (this.state.privileges.length < 1) {
d.arizona's avatar
d.arizona committed
133
            this.setState({ alert: true, messageAlert: 'You Must Choose the Access Rights', tipeAlert: 'warning' })
d.arizona's avatar
d.arizona committed
134 135 136 137
        } else {
            this.updateRole()
        }
    }
d.arizona's avatar
d.arizona committed
138 139

    updateRole() {
d.arizona's avatar
d.arizona committed
140 141
        // let startDate = format(this.state.tempData.start_date, 'yyyy-MM-dd')
        // let endDate = format(this.state.tempData.end_date, 'yyyy-MM-dd')
d.arizona's avatar
d.arizona committed
142 143 144
        let privileges = this.state.privileges
        privileges.push({
            menu_id: 23,
d.arizona's avatar
d.arizona committed
145
            button_id: [1,2,3,4]
d.arizona's avatar
d.arizona committed
146 147 148
        })
        privileges.push({
            menu_id: 24,
d.arizona's avatar
d.arizona committed
149
            button_id: [1,2,3,4]
d.arizona's avatar
d.arizona committed
150 151 152
        })
        privileges.push({
            menu_id: 25,
d.arizona's avatar
d.arizona committed
153
            button_id: [1,2,3,4]
d.arizona's avatar
d.arizona committed
154
        })
d.arizona's avatar
d.arizona committed
155
        let payload = {
d.arizona's avatar
d.arizona committed
156 157 158 159
            "role_id": this.state.tempData.role_id,
            "role_name": this.state.tempData.role_name,
            "start_date": this.state.tempData.start_date,
            "end_date": this.state.tempData.end_date,
d.arizona's avatar
d.arizona committed
160
            "privileges": privileges
d.arizona's avatar
d.arizona committed
161
        }
d.arizona's avatar
d.arizona committed
162 163
        // console.log(payload)
        api.create().editRole(payload).then((response) => {
Deni Rinaldi's avatar
Deni Rinaldi committed
164
            // console.log(response)
a.bairuha's avatar
a.bairuha committed
165 166 167 168
            if (response.data) {
                if (response.ok) {
                    if (response.data.status === 'success') {
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
d.arizona's avatar
d.arizona committed
169 170
                        setTimeout(() => {
                            this.props.onClickClose()
d.arizona's avatar
d.arizona committed
171
                            window.location.reload();
d.arizona's avatar
d.arizona committed
172 173
                            this.props.refresh()
                        }, 750);
a.bairuha's avatar
a.bairuha committed
174
                    } else {
a.bairuha's avatar
a.bairuha committed
175
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
a.bairuha's avatar
a.bairuha committed
176
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
177 178 179 180 181 182
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
a.bairuha's avatar
a.bairuha committed
183 184 185 186
                    }
                } else {
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
                }
d.arizona's avatar
d.arizona committed
187
            } else {
a.bairuha's avatar
a.bairuha committed
188
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
d.arizona's avatar
d.arizona committed
189 190
            }
        })
d.arizona's avatar
d.arizona committed
191 192
    }

Deni Rinaldi's avatar
Deni Rinaldi committed
193 194 195 196 197 198 199
    parseChildren(val) {
        let data = Object.assign([], val)
        data = data.sort((a, b) => a.menu_id - b.menu_id).map((i) => {
            return {
                menu_id: i.menu_id,
                label: i.menu_name,
                sub_menu: this.parseChildren(i.sub_menu),
d.arizona's avatar
d.arizona committed
200 201
                collapse: false,
                reference: i.reference
Deni Rinaldi's avatar
Deni Rinaldi committed
202 203 204 205 206
            }
        })
        return data
    }

d.arizona's avatar
d.arizona committed
207 208
    getMenu() {
        api.create().getMenu().then((response) => {
a.bairuha's avatar
a.bairuha committed
209 210 211 212 213 214 215 216 217 218 219 220 221 222
            if (response.data) {
                if (response.ok) {
                    if (response.data.status === 'success') {
                        let app = null
                        let set = null
                        response.data.data.map((item) => {
                            if (item.menu_name === "Application") {
                                app = this.parseChildren(item.sub_menu)
                                return app
                            } else {
                                set = this.parseChildren(item.sub_menu)
                                return set
                            }
                        })
Deni Rinaldi's avatar
Deni Rinaldi committed
223
                        // console.log(app)
a.bairuha's avatar
a.bairuha committed
224 225
                        this.setState({ application: app, setting: set, isLoad: true }, () => console.log(this.state.application))
                        // this.setState({ menuData: response.data.data })
Deni Rinaldi's avatar
Deni Rinaldi committed
226
                    } else {
a.bairuha's avatar
a.bairuha committed
227
                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
a.bairuha's avatar
a.bairuha committed
228
                            if (response.data.message.includes("Someone Logged In")) {
a.bairuha's avatar
a.bairuha committed
229 230 231 232 233 234
                                setTimeout(() => {
                                    localStorage.removeItem(Constant.TOKEN)
                                    window.location.reload();
                                }, 1000);
                            }
                        })
Deni Rinaldi's avatar
Deni Rinaldi committed
235
                    }
a.bairuha's avatar
a.bairuha committed
236 237 238
                } else {
                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
                }
d.arizona's avatar
d.arizona committed
239
            } else {
a.bairuha's avatar
a.bairuha committed
240
                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
d.arizona's avatar
d.arizona committed
241 242 243 244 245
            }
        })
    }

    handleItemChecked(item) {
d.arizona's avatar
d.arizona committed
246 247
        let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id)
        return indexID === -1 ? false : true
d.arizona's avatar
d.arizona committed
248 249 250
    }

    handleItemClick(item) {
d.arizona's avatar
d.arizona committed
251
        let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id)
Deni Rinaldi's avatar
Deni Rinaldi committed
252
        // console.log(item)
d.arizona's avatar
d.arizona committed
253
        let privileges = this.state.privileges
d.arizona's avatar
d.arizona committed
254
        if (indexID === -1) {
d.arizona's avatar
d.arizona committed
255 256
            privileges.push({
                menu_id: item.menu_id,
d.arizona's avatar
d.arizona committed
257
                button_id: [1, 2, 3, 4]
d.arizona's avatar
d.arizona committed
258
            })
d.arizona's avatar
d.arizona committed
259 260 261 262 263 264
            if (item.sub_menu.length > 0) {
                item.sub_menu.map((items,indexs) => {
                let indexIDs = this.state.privileges.findIndex((val) => val.menu_id === items.menu_id)
                if (indexIDs === -1) {
                    privileges.push({
                        menu_id: items.menu_id,
d.arizona's avatar
d.arizona committed
265
                        button_id: [1,2,3,4]
d.arizona's avatar
d.arizona committed
266 267 268 269
                    })
                }
                })
            }
d.arizona's avatar
d.arizona committed
270
        } else {
Deni Rinaldi's avatar
Deni Rinaldi committed
271
            privileges.splice(indexID, 1)
d.arizona's avatar
d.arizona committed
272 273 274 275 276 277
            if (item.sub_menu.length > 0) {
                item.sub_menu.map((items,indexs) => {
                    let indexIDs = this.state.privileges.findIndex((val) => val.menu_id === items.menu_id)
                    privileges.splice(indexIDs, 1)
                })
            }
d.arizona's avatar
d.arizona committed
278
        }
Deni Rinaldi's avatar
Deni Rinaldi committed
279
        this.setState({ privileges })
d.arizona's avatar
d.arizona committed
280 281 282
    }

    handleSubItemChecked(item, index) {
d.arizona's avatar
d.arizona committed
283
        let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id)
d.arizona's avatar
d.arizona committed
284
        let value = false
d.arizona's avatar
d.arizona committed
285
        if (indexID === -1) {
d.arizona's avatar
d.arizona committed
286 287
            value = false
        } else {
d.arizona's avatar
d.arizona committed
288 289
            let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val === index)
            if (indexButtonID === -1) {
d.arizona's avatar
d.arizona committed
290 291 292 293 294
                value = false
            } else {
                value = true
            }
        }
d.arizona's avatar
d.arizona committed
295
        return indexID === -1 ? value : value
d.arizona's avatar
d.arizona committed
296 297 298
    }

    handleSubItemClick(item, index) {
d.arizona's avatar
d.arizona committed
299 300
        let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id)
        let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val === index)
d.arizona's avatar
d.arizona committed
301 302
        let privileges = this.state.privileges
        let button_id = privileges[indexID].button_id
d.arizona's avatar
d.arizona committed
303
        
d.arizona's avatar
d.arizona committed
304
        if (indexButtonID === -1) {
d.arizona's avatar
d.arizona committed
305
            button_id.push(index)
d.arizona's avatar
d.arizona committed
306 307 308 309
            if (item.sub_menu.length > 0) {
                item.sub_menu.map((items,indexs) => {
                    let subIndexID = privileges.findIndex((val) => val.menu_id === items.menu_id)
                    if (subIndexID === -1) {
Deni Rinaldi's avatar
Deni Rinaldi committed
310
                        // console.log('masuk pa eko', subIndexID)
d.arizona's avatar
d.arizona committed
311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334
                        privileges.push({
                            menu_id: items.menu_id,
                            button_id: [index]
                        })
                    } else {
                        let subIndexButtonID = privileges[subIndexID].button_id.findIndex((val) => val === index)
                        let subButton_id = privileges[subIndexID].button_id
                        if(subIndexButtonID === -1) {
                            subButton_id.push(index)
                        }
                    }
                })
            }
            if (item.reference !== null && item.reference !== 13 && item.reference !== 1) { 
                let refIndexID = privileges.findIndex((val) => val.menu_id === item.reference)
                if (refIndexID !== -1) {
                    let refIndexButtonID = privileges[refIndexID].button_id.findIndex((val) => val === index)
                    let refButton_id = privileges[refIndexID].button_id
                    if (refIndexButtonID === -1) {
                        refButton_id.push(index)
                    }
                    privileges[refIndexID].button_id = refButton_id
                }
            }
d.arizona's avatar
d.arizona committed
335
        } else {
Deni Rinaldi's avatar
Deni Rinaldi committed
336
            button_id.splice(indexButtonID, 1)
d.arizona's avatar
d.arizona committed
337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377
            if (item.sub_menu.length > 0) {
                item.sub_menu.map((items,indexs) => {
                    let subIndexID = privileges.findIndex((val) => val.menu_id === items.menu_id)
                    if (subIndexID !== -1) {
                        let subIndexButtonID = privileges[subIndexID].button_id.findIndex((val) => val === index)
                        let subButton_id = privileges[subIndexID].button_id
                        if (subIndexButtonID !== -1) {
                            subButton_id.splice(subIndexButtonID, 1)
                            privileges[subIndexID].button_id = subButton_id
                            if (privileges[subIndexID].button_id.length < 1) {
                                privileges.splice(subIndexID, 1)
                            }
                        }
                    }
                })
            }
            if (item.reference !== null && item.reference !== 13 && item.reference !== 1) { 
                let refIndexID = privileges.findIndex((val) => val.menu_id === item.reference)
                if (refIndexID !== -1) {
                    let refIndexButtonID = privileges[refIndexID].button_id.findIndex((val) => val === index)
                    let refButton_id = privileges[refIndexID].button_id
                    let indexIDapp = this.state.application.findIndex((val) => val.menu_id === item.reference)
                    let indexIDset = this.state.setting.findIndex((val) => val.menu_id === item.reference)
                    let indexIDs = indexIDapp == -1? indexIDset : indexIDapp
                    let array = indexIDapp == -1? this.state.setting : this.state.application
                    let splicer = 0
                    array[indexIDs].sub_menu.map((refItem, refIndex) => {
                        let subIndexID = privileges.findIndex((val) => val.menu_id === refItem.menu_id)
                        if (subIndexID !== -1) {
                            let subIndexButtonID = privileges[subIndexID].button_id.findIndex((val) => val === index)
                            if (subIndexButtonID !== -1) {
                                splicer += 1
                            }                  
                        }
                    })
                    if (refIndexButtonID !== -1 && splicer < 1) {
                        refButton_id.splice(refIndexButtonID, 1)
                    }
                    privileges[refIndexID].button_id = refButton_id
                }
            }
d.arizona's avatar
d.arizona committed
378
        }
d.arizona's avatar
d.arizona committed
379
        privileges[indexID].button_id = button_id.sort((a,b) => a-b)
d.arizona's avatar
d.arizona committed
380
        if (button_id.length === 0) {
Deni Rinaldi's avatar
Deni Rinaldi committed
381
            privileges.splice(indexID, 1)
d.arizona's avatar
d.arizona committed
382
        }
d.arizona's avatar
d.arizona committed
383
        this.setState({ privileges: privileges.sort((a,b) => a.menu_id-b.menu_id) })
d.arizona's avatar
d.arizona committed
384
    }
d.arizona's avatar
d.arizona committed
385

Deni Rinaldi's avatar
Deni Rinaldi committed
386 387 388 389 390 391 392 393 394 395 396 397 398 399
    handleCollapse(item) {
        let arr = this.state.application
        let index = arr.findIndex((val) => val.label === item.label)
        arr[index].collapse = !arr[index].collapse
        this.setState({ ...this.state.application, application: arr })
    }

    handleCollapseSetting(item) {
        let arr = this.state.setting
        let index = arr.findIndex((val) => val.label === item.label)
        arr[index].collapse = !arr[index].collapse
        this.setState({ ...this.state.setting, setting: arr })
    }

d.arizona's avatar
d.arizona committed
400 401 402 403 404
    handleDate(item) {
        let value = format(item, 'dd MMMM yyyy')
        return value
    }

a.bairuha's avatar
a.bairuha committed
405 406 407 408
    closeAlert() {
      this.setState({ alert: false })
    }
    
d.arizona's avatar
d.arizona committed
409 410
    render() {
        return (
d.arizona's avatar
d.arizona committed
411
            <div className="test app-popup-show">
a.bairuha's avatar
a.bairuha committed
412 413 414 415 416
                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                        {this.state.messageAlert}
                    </Alert>
                </Snackbar>
Deni Rinaldi's avatar
Deni Rinaldi committed
417 418
                <div className="popup-content-middle background-white border-radius" style={{ borderRadius: 8 }}>
                    <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
d.arizona's avatar
d.arizona committed
419 420
                        <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
                            <div className="popup-title">
d.arizona's avatar
d.arizona committed
421
                                <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit Data</span>
d.arizona's avatar
d.arizona committed
422 423 424 425 426 427 428 429
                            </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
430
                                <img src={Images.close} />
d.arizona's avatar
d.arizona committed
431 432 433 434
                            </button>
                        </div>
                    </div>

d.arizona's avatar
d.arizona committed
435
                    <div className="grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
d.arizona's avatar
d.arizona committed
436 437 438 439
                        <div className="column-1">
                            <div className="margin-bottom-20px">
                                <TextField
                                    style={{ width: '100%' }}
d.arizona's avatar
d.arizona committed
440 441 442 443 444
                                    id="id"
                                    label="ID"
                                    disabled
                                    // id="outlined-read-only-input"
                                    variant="filled"
d.arizona's avatar
d.arizona committed
445
                                    value={this.state.tempData === null ? '' : this.state.tempData.role_id}
d.arizona's avatar
d.arizona committed
446
                                    onChange={(e) => null}
a.bairuha's avatar
a.bairuha committed
447 448 449 450 451 452 453 454 455 456 457 458 459
                                    inputProps={{
                                        style: {
                                            fontSize: 11,
                                            fontFamily: 'Nunito Sans, sans-serif',
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085',
                                            fontFamily: 'Nunito Sans, sans-serif',
                                        }
                                    }}
d.arizona's avatar
d.arizona committed
460 461 462 463 464 465 466 467 468 469 470
                                >
                                    {/* {periode.map((option) => (
                                        <MenuItem key={option.value} value={option.value}>
                                            {option.label}
                                        </MenuItem>
                                    ))} */}
                                </TextField>
                            </div>
                        </div>

                        <div className="column-2">
d.arizona's avatar
d.arizona committed
471 472
                            <div className="margin-bottom-20px">
                                <TextField
Deni Rinaldi's avatar
Deni Rinaldi committed
473 474 475 476
                                    style={{ width: '100%', marginTop: 7 }}
                                    id="userRole"
                                    name="role_name"
                                    label="User Role"
d.arizona's avatar
d.arizona committed
477
                                    value={this.state.tempData === null ? '' : this.state.tempData.role_name}
d.arizona's avatar
d.arizona committed
478 479
                                    error={this.state.errorRoleName}
                                    helperText={this.state.msgErrorRN}
Deni Rinaldi's avatar
Deni Rinaldi committed
480
                                    onChange={(e) => this.handleChange(e, '')}
a.bairuha's avatar
a.bairuha committed
481 482 483 484 485 486 487 488 489 490 491 492 493
                                    inputProps={{
                                        style: {
                                            fontSize: 11,
                                            fontFamily: 'Nunito Sans, sans-serif',
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085',
                                            fontFamily: 'Nunito Sans, sans-serif',
                                        }
                                    }}
d.arizona's avatar
d.arizona committed
494
                                // defaultValue="Default Value"
d.arizona's avatar
d.arizona committed
495 496 497 498 499 500
                                // helperText="Some important text"
                                />
                            </div>
                        </div>
                    </div>

d.arizona's avatar
d.arizona committed
501
                    <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
d.arizona's avatar
d.arizona committed
502
                        <div className="column-1">
d.arizona's avatar
d.arizona committed
503
                            <div className="margin-bottom-20px">
d.arizona's avatar
d.arizona committed
504
                                <DatePicker
Deni Rinaldi's avatar
Deni Rinaldi committed
505 506
                                    margin="normal"
                                    id="startDate"
507
                                    label="Valid From"
d.arizona's avatar
d.arizona committed
508
                                    format="dd-MM-yyyy"
d.arizona's avatar
d.arizona committed
509
                                    value={this.state.tempData === null ? null : this.state.tempData.start_date}
d.arizona's avatar
d.arizona committed
510 511
                                    error={this.state.errorStartDate}
                                    helperText={this.state.msgErrorSD}
Deni Rinaldi's avatar
Deni Rinaldi committed
512 513 514 515
                                    onChange={(e) => this.handleChange(e, 'start_date')}
                                    KeyboardButtonProps={{
                                        'aria-label': 'change date',
                                    }}
a.bairuha's avatar
a.bairuha committed
516 517 518 519 520 521 522 523 524 525 526 527 528
                                    inputProps={{
                                        style: {
                                            fontSize: 11,
                                            fontFamily: 'Nunito Sans, sans-serif',
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085',
                                            fontFamily: 'Nunito Sans, sans-serif',
                                        }
                                    }}
Deni Rinaldi's avatar
Deni Rinaldi committed
529 530

                                    style={{ padding: 0, margin: 0, width: '100%' }}
d.arizona's avatar
d.arizona committed
531
                                />
d.arizona's avatar
d.arizona committed
532 533 534
                            </div>
                        </div>

d.arizona's avatar
d.arizona committed
535 536
                        <div className="column-2">
                            <div className="margin-bottom-20px">
d.arizona's avatar
d.arizona committed
537
                                <DatePicker
Deni Rinaldi's avatar
Deni Rinaldi committed
538 539
                                    margin="normal"
                                    id="endDate"
540
                                    label="Valid To"
d.arizona's avatar
d.arizona committed
541
                                    format="dd-MM-yyyy"
d.arizona's avatar
d.arizona committed
542
                                    value={this.state.tempData === null ? null : this.state.tempData.end_date}
d.arizona's avatar
d.arizona committed
543 544
                                    error={this.state.errorEndDate}
                                    helperText={this.state.msgErrorED}
d.arizona's avatar
d.arizona committed
545
                                    minDate={this.state.tempData === null ? null : this.state.tempData.start_date}
Deni Rinaldi's avatar
Deni Rinaldi committed
546 547 548 549
                                    onChange={(e) => this.handleChange(e, 'end_date')}
                                    KeyboardButtonProps={{
                                        'aria-label': 'change date',
                                    }}
a.bairuha's avatar
a.bairuha committed
550 551 552 553 554 555 556 557 558 559 560 561 562
                                    inputProps={{
                                        style: {
                                            fontSize: 11,
                                            fontFamily: 'Nunito Sans, sans-serif',
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085',
                                            fontFamily: 'Nunito Sans, sans-serif',
                                        }
                                    }}
Deni Rinaldi's avatar
Deni Rinaldi committed
563 564

                                    style={{ padding: 0, margin: 0, width: '100%' }}
d.arizona's avatar
d.arizona committed
565 566 567 568 569
                                />
                            </div>
                        </div>
                    </div>

d.arizona's avatar
d.arizona committed
570
                    <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
d.arizona's avatar
d.arizona committed
571 572 573 574
                        <div className="column-1">
                            <div className="margin-bottom-20px">
                                <TextField
                                    style={{ width: '100%' }}
d.arizona's avatar
d.arizona committed
575 576
                                    id="status"
                                    label="Status"
d.arizona's avatar
d.arizona committed
577 578 579
                                    disabled
                                    // id="outlined-read-only-input"
                                    variant="filled"
d.arizona's avatar
d.arizona committed
580
                                    value={this.state.tempData === null ? '' : this.state.tempData.status}
a.bairuha's avatar
a.bairuha committed
581 582 583 584 585 586 587 588 589 590 591 592 593
                                    inputProps={{
                                        style: {
                                            fontSize: 11,
                                            fontFamily: 'Nunito Sans, sans-serif',
                                        }
                                    }}
                                    InputLabelProps={{
                                        style: {
                                            fontSize: 11,
                                            color: '#7e8085',
                                            fontFamily: 'Nunito Sans, sans-serif',
                                        }
                                    }}
d.arizona's avatar
d.arizona committed
594 595 596 597 598 599 600 601 602
                                >
                                    {/* {periode.map((option) => (
                                        <MenuItem key={option.value} value={option.value}>
                                            {option.label}
                                        </MenuItem>
                                    ))} */}
                                </TextField>
                            </div>
                        </div>
d.arizona's avatar
d.arizona committed
603
                    </div>
a.bairuha's avatar
a.bairuha committed
604
                    <div style={{ flexDirection: 'column', display: 'flex', paddingLeft: 30, paddingRight: 30 }}>
a.bairuha's avatar
a.bairuha committed
605 606
                        <Typography style={{ fontSize: 11 }}>{`Created By  : ${this.state.tempData === null ? '' : (this.state.tempData.created === null ? '-' : this.state.tempData.created)}`}</Typography>
                        <Typography style={{ fontSize: 11 }}>{`Updated By  : ${this.state.tempData === null ? '' : (this.state.tempData.updated === null ? '-' : this.state.tempData.updated)}`}</Typography>
d.arizona's avatar
d.arizona committed
607
                    </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
608 609
                    <Divider style={{ margin: 20 }} />
                    <div style={{ paddingLeft: 20, paddingRight: 20 }}>
d.arizona's avatar
d.arizona committed
610
                        <h5>Access Rights</h5>
Deni Rinaldi's avatar
Deni Rinaldi committed
611
                        <div className="grid grid-2x grid-mobile-none gap-15px padding-top-5px padding-bottom-5px padding-left-10px padding-right-10px " style={{ backgroundColor: '#4b4b4b' }}>
d.arizona's avatar
d.arizona committed
612
                            <div className="column-1">
d.arizona's avatar
d.arizona committed
613
                                <Typography style={{ fontSize: 12, color: 'white' }}>Authorization Module</Typography>
d.arizona's avatar
d.arizona committed
614
                            </div>
d.arizona's avatar
d.arizona committed
615
                            <div className="column-2 grid grid-4x content-center grid-mobile-none gap-15px">
d.arizona's avatar
d.arizona committed
616
                                <div className="column-1">
d.arizona's avatar
d.arizona committed
617
                                    <Typography style={{ fontSize: 12, color: 'white' }}>View</Typography>
d.arizona's avatar
d.arizona committed
618 619
                                </div>
                                <div className="column-2">
d.arizona's avatar
d.arizona committed
620
                                    <Typography style={{ fontSize: 12, color: 'white' }}>Create</Typography>
d.arizona's avatar
d.arizona committed
621 622
                                </div>
                                <div className="column 3">
d.arizona's avatar
d.arizona committed
623
                                    <Typography style={{ fontSize: 12, color: 'white' }}>Edit</Typography>
d.arizona's avatar
d.arizona committed
624
                                </div>
d.arizona's avatar
d.arizona committed
625 626 627
                                <div className="column 4">
                                    <Typography style={{ fontSize: 12, color: 'white' }}>Delete</Typography>
                                </div>
d.arizona's avatar
d.arizona committed
628 629
                            </div>
                        </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
630 631

                        <div style={{ height: '25vh', overflow: 'scroll' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
632 633 634 635 636
                            {this.state.application.map((item, index) => {
                                return (
                                    <div>
                                        <div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px">
                                            <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 8 }}>
d.arizona's avatar
d.arizona committed
637
                                                {item.sub_menu.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginRight: 2, marginLeft: -22, alignItems:'center', justifyContent:'center', display:'flex' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
638 639 640 641 642 643 644 645 646 647
                                                    {item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
                                                </span>}
                                                <span>
                                                    <CustomCheckbox
                                                        checked={this.handleItemChecked(item)}
                                                        onChange={() => this.handleItemClick(item)}
                                                    />
                                                </span>
                                                <Typography style={{ fontSize: 12, marginLeft: 5 }}>{item.label}</Typography>
                                            </div>
d.arizona's avatar
d.arizona committed
648
                                            <div className="column-2 grid grid-4x content-center grid-mobile-none gap-15px margin-left-10px">
Deni Rinaldi's avatar
Deni Rinaldi committed
649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671
                                                <div className="column-1">
                                                    <CustomCheckbox
                                                        disabled={!this.handleItemChecked(item)}
                                                        checked={this.handleSubItemChecked(item, 1)}
                                                        onChange={() => this.handleSubItemClick(item, 1)}
                                                    />
                                                </div>
                                                <div className="column-2">
                                                    <CustomCheckbox
                                                        // disabled
                                                        disabled={!this.handleItemChecked(item)}
                                                        checked={this.handleSubItemChecked(item, 2)}
                                                        onChange={() => this.handleSubItemClick(item, 2)}
                                                    />
                                                </div>
                                                <div className="column 3">
                                                    <CustomCheckbox
                                                        // disabled
                                                        disabled={!this.handleItemChecked(item)}
                                                        checked={this.handleSubItemChecked(item, 3)}
                                                        onChange={() => this.handleSubItemClick(item, 3)}
                                                    />
                                                </div>
d.arizona's avatar
d.arizona committed
672 673 674 675 676 677 678
                                                <div className="column 4">
                                                    <CustomCheckbox
                                                        disabled={!this.handleItemChecked(item)}
                                                        checked={this.handleSubItemChecked(item, 4)}
                                                        onChange={() => this.handleSubItemClick(item, 4)}
                                                    />
                                                </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
679 680 681 682 683 684 685 686 687 688 689 690 691
                                            </div>
                                        </div>
                                        {item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => {
                                            return (
                                                <Collapse in={item.collapse} timeout="auto" unmountOnExit>
                                                    <div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px">
                                                        <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingLeft: 30 }}>
                                                            <CustomCheckbox
                                                                checked={this.handleItemChecked(items)}
                                                                onChange={() => this.handleItemClick(items)}
                                                            />
                                                            <Typography style={{ fontSize: 12, maxWidth: '100%', marginLeft: 5 }}>{items.label}</Typography>
                                                        </div>
d.arizona's avatar
d.arizona committed
692
                                                        <div className="column-2 grid grid-4x content-center grid-mobile-none gap-15px margin-left-10px">
Deni Rinaldi's avatar
Deni Rinaldi committed
693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713
                                                            <div className="column-1">
                                                                <CustomCheckbox
                                                                    disabled={!this.handleItemChecked(items)}
                                                                    checked={this.handleSubItemChecked(items, 1)}
                                                                    onChange={() => this.handleSubItemClick(items, 1)}
                                                                />
                                                            </div>
                                                            <div className="column-2">
                                                                <CustomCheckbox
                                                                    disabled={!this.handleItemChecked(items)}
                                                                    checked={this.handleSubItemChecked(items, 2)}
                                                                    onChange={() => this.handleSubItemClick(items, 2)}
                                                                />
                                                            </div>
                                                            <div className="column 3">
                                                                <CustomCheckbox
                                                                    disabled={!this.handleItemChecked(items)}
                                                                    checked={this.handleSubItemChecked(items, 3)}
                                                                    onChange={() => this.handleSubItemClick(items, 3)}
                                                                />
                                                            </div>
d.arizona's avatar
d.arizona committed
714 715 716 717 718 719 720
                                                            <div className="column 4">
                                                                <CustomCheckbox
                                                                    disabled={!this.handleItemChecked(items)}
                                                                    checked={this.handleSubItemChecked(items, 4)}
                                                                    onChange={() => this.handleSubItemClick(items, 4)}
                                                                />
                                                            </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
721 722 723 724 725 726 727 728 729
                                                        </div>
                                                    </div>
                                                </Collapse>
                                            )
                                        })}
                                    </div>
                                )
                            })}
                            {this.state.setting.map((item, index) => {
d.arizona's avatar
d.arizona committed
730
                                return (
d.arizona's avatar
d.arizona committed
731
                                    <div>
d.arizona's avatar
d.arizona committed
732
                                        {item.menu_id !== 23 && <div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px">
Deni Rinaldi's avatar
Deni Rinaldi committed
733 734 735
                                            <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 8 }}>
                                                {item.sub_menu.length > 0 && <span onClick={() => this.handleCollapseSetting(item)} style={{ marginRight: 2, marginLeft: -22 }}>
                                                    {item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
d.arizona's avatar
d.arizona committed
736 737
                                                </span>}
                                                <span>
Deni Rinaldi's avatar
Deni Rinaldi committed
738 739 740 741
                                                    <CustomCheckbox
                                                        checked={this.handleItemChecked(item)}
                                                        onChange={() => this.handleItemClick(item)}
                                                    />
d.arizona's avatar
d.arizona committed
742
                                                </span>
Deni Rinaldi's avatar
Deni Rinaldi committed
743
                                                <Typography style={{ fontSize: 12, marginLeft: 5 }}>{item.label}</Typography>
d.arizona's avatar
d.arizona committed
744
                                            </div>
d.arizona's avatar
d.arizona committed
745
                                            <div className="column-2 grid grid-4x content-center grid-mobile-none gap-15px margin-left-10px">
d.arizona's avatar
d.arizona committed
746 747 748 749
                                                <div className="column-1">
                                                    <CustomCheckbox
                                                        disabled={!this.handleItemChecked(item)}
                                                        checked={this.handleSubItemChecked(item, 1)}
Deni Rinaldi's avatar
Deni Rinaldi committed
750
                                                        onChange={() => this.handleSubItemClick(item, 1)}
d.arizona's avatar
d.arizona committed
751 752 753 754 755 756 757
                                                    />
                                                </div>
                                                <div className="column-2">
                                                    <CustomCheckbox
                                                        // disabled
                                                        disabled={!this.handleItemChecked(item)}
                                                        checked={this.handleSubItemChecked(item, 2)}
Deni Rinaldi's avatar
Deni Rinaldi committed
758
                                                        onChange={() => this.handleSubItemClick(item, 2)}
d.arizona's avatar
d.arizona committed
759 760 761 762 763 764 765
                                                    />
                                                </div>
                                                <div className="column 3">
                                                    <CustomCheckbox
                                                        // disabled
                                                        disabled={!this.handleItemChecked(item)}
                                                        checked={this.handleSubItemChecked(item, 3)}
Deni Rinaldi's avatar
Deni Rinaldi committed
766
                                                        onChange={() => this.handleSubItemClick(item, 3)}
d.arizona's avatar
d.arizona committed
767 768
                                                    />
                                                </div>
d.arizona's avatar
d.arizona committed
769 770 771 772 773 774 775
                                                <div className="column 4">
                                                    <CustomCheckbox
                                                        disabled={!this.handleItemChecked(item)}
                                                        checked={this.handleSubItemChecked(item, 4)}
                                                        onChange={() => this.handleSubItemClick(item, 4)}
                                                    />
                                                </div>
d.arizona's avatar
d.arizona committed
776
                                            </div>
d.arizona's avatar
d.arizona committed
777
                                        </div>}
Deni Rinaldi's avatar
Deni Rinaldi committed
778 779
                                        {item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => {
                                            return (
Deni Rinaldi's avatar
Deni Rinaldi committed
780
                                                <Collapse in={item.collapse} timeout="auto" unmountOnExit>
d.arizona's avatar
d.arizona committed
781
                                                    <div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px">
Deni Rinaldi's avatar
Deni Rinaldi committed
782
                                                        <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingLeft: 30 }}>
d.arizona's avatar
d.arizona committed
783 784 785 786
                                                            <CustomCheckbox
                                                                checked={this.handleItemChecked(items)}
                                                                onChange={() => this.handleItemClick(items)}
                                                            />
Deni Rinaldi's avatar
Deni Rinaldi committed
787
                                                            <Typography style={{ fontSize: 12, maxWidth: '100%', marginLeft: 5 }}>{items.label}</Typography>
d.arizona's avatar
d.arizona committed
788
                                                        </div>
d.arizona's avatar
d.arizona committed
789
                                                        <div className="column-2 grid grid-4x content-center grid-mobile-none gap-15px margin-left-10px">
d.arizona's avatar
d.arizona committed
790 791 792 793
                                                            <div className="column-1">
                                                                <CustomCheckbox
                                                                    disabled={!this.handleItemChecked(items)}
                                                                    checked={this.handleSubItemChecked(items, 1)}
Deni Rinaldi's avatar
Deni Rinaldi committed
794
                                                                    onChange={() => this.handleSubItemClick(items, 1)}
d.arizona's avatar
d.arizona committed
795 796 797 798 799 800
                                                                />
                                                            </div>
                                                            <div className="column-2">
                                                                <CustomCheckbox
                                                                    disabled={!this.handleItemChecked(items)}
                                                                    checked={this.handleSubItemChecked(items, 2)}
Deni Rinaldi's avatar
Deni Rinaldi committed
801
                                                                    onChange={() => this.handleSubItemClick(items, 2)}
d.arizona's avatar
d.arizona committed
802 803 804 805 806 807
                                                                />
                                                            </div>
                                                            <div className="column 3">
                                                                <CustomCheckbox
                                                                    disabled={!this.handleItemChecked(items)}
                                                                    checked={this.handleSubItemChecked(items, 3)}
Deni Rinaldi's avatar
Deni Rinaldi committed
808
                                                                    onChange={() => this.handleSubItemClick(items, 3)}
d.arizona's avatar
d.arizona committed
809 810
                                                                />
                                                            </div>
d.arizona's avatar
d.arizona committed
811 812 813 814 815 816 817
                                                            <div className="column 4">
                                                                <CustomCheckbox
                                                                    disabled={!this.handleItemChecked(items)}
                                                                    checked={this.handleSubItemChecked(items, 4)}
                                                                    onChange={() => this.handleSubItemClick(items, 4)}
                                                                />
                                                            </div>
d.arizona's avatar
d.arizona committed
818 819 820 821 822
                                                        </div>
                                                    </div>
                                                </Collapse>
                                            )
                                        })}
d.arizona's avatar
d.arizona committed
823
                                    </div>
d.arizona's avatar
d.arizona committed
824 825 826
                                )
                            })}
                        </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
827

d.arizona's avatar
d.arizona committed
828
                    </div>
d.arizona's avatar
d.arizona committed
829 830
                    <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
                        <div className="column-1" style={{ alignSelf: 'center' }}>
Deni Rinaldi's avatar
Deni Rinaldi committed
831 832 833 834 835
                            <button
                                type="button"
                                onClick={() => this.props.onClickClose()}
                            >
                                <div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
d.arizona's avatar
d.arizona committed
836
                                    <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
Deni Rinaldi's avatar
Deni Rinaldi committed
837 838
                                </div>
                            </button>
d.arizona's avatar
d.arizona committed
839
                        </div>
Deni Rinaldi's avatar
Deni Rinaldi committed
840 841 842
                        <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                            <button
                                type="button"
d.arizona's avatar
d.arizona committed
843
                                onClick={() => this.validasi()}
Deni Rinaldi's avatar
Deni Rinaldi committed
844 845
                            >
                                <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
d.arizona's avatar
d.arizona committed
846
                                    <span style={{ color: '#fff', fontSize: 11 }}>Save</span>
Deni Rinaldi's avatar
Deni Rinaldi committed
847 848
                                </div>
                            </button>
d.arizona's avatar
d.arizona committed
849 850 851 852 853 854 855
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}