update standarisasi ui

src/container/MasterData/ReportItems.js

@@ -575,7 +575,7 @@ export default class ReportItems extends Component {
         api.create().uploadReportItems(this.state.payload).then(response => {
             if (response.data) {
                 if (response.data.status === "success") {
-                    alert(response.data.message)
+                    // alert(response.data.message)
                     this.getData()
                     this.setState({ itemReport: true, alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
                 } else {
@@ -824,7 +824,7 @@ export default class ReportItems extends Component {
                                     </button>
                                 </a>
                                 <ReactTooltip border={true} id="visualisasi" place="bottom" type="light" effect="solid" />
-                                <a data-tip={'Add'} data-for="tambah">
+                                <a data-tip={'Add New'} data-for="tambah">
                                     <button
                                         style={{
                                             backgroundColor: 'transparent',
@@ -881,7 +881,7 @@ export default class ReportItems extends Component {
                                 style={{ marginRight: 20 }}
                             >
                                 <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>
+                                    <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
                                 </div>
                             </button>
                             <button
@@ -890,7 +890,7 @@ export default class ReportItems extends Component {
                                 style={{}}
                             >
                                 <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
-                                    <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
+                                    <span style={{ color: '#fff', fontSize: 11 }}>Save</span>
                                 </div>
                             </button>
                         </div>

src/container/MasterData/formReportItems/CreateReportItems.js

@@ -147,32 +147,32 @@ export default class CreateReportItems extends Component {
     validasi() {
         // alert('coba ya')
         if (R.isNil(this.state.reportType)) {
-            this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Report type cannot be empty.'})
+            this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Report type is required.'})
         } else if (R.isNil(this.state.company)){
-            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company cannot be empty.'})
+            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company is required.'})
         } else if (R.isEmpty(this.state.order)) {
-            this.setState({ errorOrder: true, msgErrorOrder: 'Order cannot be empty.' })
+            this.setState({ errorOrder: true, msgErrorOrder: 'Order is required.' })
         }
         else if (R.isEmpty(this.state.description)) {
-            this.setState({ errorDesc: true, msgErrorDesc: 'Description cannot be empty.' })
+            this.setState({ errorDesc: true, msgErrorDesc: 'Description is required.' })
         }
         else if (R.isNil(this.state.InputType)) {
-            this.setState({ errorTipeData: true, msgErrorTipeData: 'Data type cannot be empty' })
+            this.setState({ errorTipeData: true, msgErrorTipeData: 'Data type is required.' })
         }
         else if (this.state.disabledFormula === false && R.isEmpty(this.state.formula)) {
-            this.setState({ errorFormula: true, msgErrorFormula: 'Formula cannot be empty' })
+            this.setState({ errorFormula: true, msgErrorFormula: 'Formula is required.' })
         }
         else if (this.state.disabledValue === false && R.isEmpty(this.state.realVal)) {
-            this.setState({ errorRV: true, msgErrorRV: 'True Value cannot be empty' })
+            this.setState({ errorRV: true, msgErrorRV: 'True value is required.' })
         }
         else if (this.state.disabledCondt === false && R.isEmpty(this.state.condition)) {
-            this.setState({ errorCondition: true, msgErrorCondition: 'False Condition cannot be empty' })
+            this.setState({ errorCondition: true, msgErrorCondition: 'False condition is required.' })
         }
         else if (R.isNil(this.state.startDate)) {
-            this.setState({ errorStartDate: true, msgErrorSD: 'Start Date cannot be empty' })
+            this.setState({ errorStartDate: true, msgErrorSD: 'Start date is required.' })
         }
         else if (R.isNil(this.state.endDate)) {
-            this.setState({ errorEndDate: true, msgErrorED: 'End Date cannot be empty' })
+            this.setState({ errorEndDate: true, msgErrorED: 'End date is required.' })
         }
         else {
             this.addReportItems()
@@ -338,6 +338,10 @@ export default class CreateReportItems extends Component {
         })
     }
 
+    closeAlert() {
+        this.setState({ alert: false })
+    }
+
     render() {
 
         return (

src/container/MasterData/formReportItems/EditReportItems.js

@@ -128,25 +128,25 @@ export default class EditReportItems extends Component {
     validasi() {
         // alert('coba ya')
         if (R.isNil(this.state.reportType)){
-            this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Report type cannot be empty'})
+            this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Report type is required.'})
         } else if (R.isNil(this.state.company)){
-            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company cannot be empty'})
+            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company is required.'})
         } else if (R.isEmpty(this.state.tempData.order)) {
-            this.setState({ errorOrder: true, msgErrorOrder: 'Order cannot be empty.' })
+            this.setState({ errorOrder: true, msgErrorOrder: 'Order is required..' })
         } else if (R.isEmpty(this.state.tempData.description)) {
-            this.setState({ errorDesc: true, msgErrorDesc: 'Description cannot be empty.' })
+            this.setState({ errorDesc: true, msgErrorDesc: 'Description is required..' })
         } else if (R.isNil(this.state.InputType)) {
-            this.setState({ errorTipeData: true, msgErrorTipeData: 'Data type cannot be empty' })
+            this.setState({ errorTipeData: true, msgErrorTipeData: 'Data type is required.' })
         } else if ((this.state.InputType.type_report_name === 'Formula' && R.isEmpty(this.state.tempData.formula)) || (this.state.InputType.type_report_name === 'Validation' && R.isEmpty(this.state.tempData.formula))) {
-            this.setState({ errorFormula: true, msgErrorFormula: 'Formula cannot be empty' })
+            this.setState({ errorFormula: true, msgErrorFormula: 'Formula is required.' })
         } else if (this.state.InputType.type_report_name === 'Validation' && R.isEmpty(this.state.tempData.condition_it_should_be)) {
-            this.setState({ errorRV: true, msgErrorRV: 'True Value cannot be empty' })
+            this.setState({ errorRV: true, msgErrorRV: 'True value is required.' })
         } else if (this.state.InputType.type_report_name === 'Validation' && R.isNil(this.state.tempData.condition_if_wrong)) {
-            this.setState({ errorCondition: true, msgErrorCondition: 'False Condition cannot be empty' })
+            this.setState({ errorCondition: true, msgErrorCondition: 'False condition is required.' })
         } else if (R.isNil(this.state.tempData.start_date)) {
-            this.setState({ errorStartDate: true, msgErrorSD: 'Start Date cannot be empty' })
+            this.setState({ errorStartDate: true, msgErrorSD: 'Start date is required.' })
         } else if (R.isNil(this.state.tempData.end_date)) {
-            this.setState({ errorEndDate: true, msgErrorED: 'End Date cannot be empty' })
+            this.setState({ errorEndDate: true, msgErrorED: 'End date is required.' })
         } else {
             this.updateReportItems()
         }

src/container/MasterData/formReportItems/VisualReportItems.js

 import React, { Component } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { TextField, List, ListSubheader, Typography, Collapse } from '@material-ui/core';
+import { TextField, Snackbar, withStyles } from '@material-ui/core';
 import MinimizeIcon from '@material-ui/icons/Minimize';
 import AddIcon from '@material-ui/icons/Add';
 import RemoveIcon from '@material-ui/icons/Remove';
@@ -8,6 +8,7 @@ import Nestable from 'react-nestable';
 import api from '../../../api';
 import { titleCase } from '../../../library/Utils';
 import Autocomplete from '@material-ui/lab/Autocomplete';
+import MuiAlert from '@material-ui/lab/Alert';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -20,6 +21,8 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
 
 const type = [
     {
@@ -81,7 +84,10 @@ export default class VisualReportItems extends Component {
             listReport: null,
             report: null,
             listCompany: null,
-            company: null
+            company: null,
+            alert: false,
+            tipeAlert: '',
+            messageAlert: ''
         }
     }
 
@@ -93,6 +99,8 @@ export default class VisualReportItems extends Component {
     getReportType() {
         api.create().getReportType().then((response) => {
             this.getCompanyActive()
+            if (response.data) {
+                if (response.ok) {
                     if (response.data.status === 'success') {
                         let data = response.data.data
                         let reportData = data.map((item) => {
@@ -108,13 +116,21 @@ export default class VisualReportItems extends Component {
         
                         this.setState({ listReport: defaultProps, report: reportData[0] })
                     } else {
-                alert(response.data.message)
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
+                      }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
 
     getCompanyActive() {
         api.create().getPerusahaanActive().then((response) => {
+            if (response.data) {
+                if (response.ok) {
                     if (response.data.status === 'success') {
                         let data = response.data.data
                         let companyData = data.map((item) => {
@@ -131,7 +147,13 @@ export default class VisualReportItems extends Component {
                             this.getItemHierarki()
                         })
                     } else {
-                alert(response.data.message)
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
+                      }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -144,9 +166,17 @@ export default class VisualReportItems extends Component {
         api.create().getItemReportHierarki(payload).then((response) => {
             console.log(response.data)
             if (response.data) {
+                if (response.ok) {
                     if (response.data.status == 'success') {
                         this.setState({ items: response.data.data })
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
+                      }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
                 }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -186,8 +216,25 @@ export default class VisualReportItems extends Component {
             "item_report": this.state.items
         }
         api.create().saveVisualisasiReport(payload).then((response) => {
+            console.log(response);
             // if (response.data.status == 'ucces') {
+                if (response.data) {
+                    if (response.ok) {
+                        if (response.data.status === "success") {
+                            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' }, () => {
+                                setTimeout(() => {
                                     this.props.onClickClose()
+                                }, 1000);
+                            }) 
+                        } else {
+                            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
+                        }
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                    }
+                } else {
+                        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+                }
             // } else {
             // alert(response.data.message)
             // }
@@ -203,9 +250,18 @@ export default class VisualReportItems extends Component {
         )
     };
 
+    closeAlert() {
+        this.setState({ alert: false })
+    }
+
     render() {
         return (
             <div>
+                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                        {this.state.messageAlert}
+                    </Alert>
+                </Snackbar>
                 <div style={{ height: this.props.height }}>
                     <div style={{ width: '100%' }}  className={"main-color"}  />
                     <div>
@@ -262,15 +318,15 @@ export default class VisualReportItems extends Component {
                         </div>
                         <div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
                             <div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: 'dodgerblue', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor: "pointer" }}>
-                                <span style={{ color: '#fff', fontSize: 11 }}>Kembali</span>
+                                <span style={{ color: '#fff', fontSize: 11 }}>Back</span>
                             </div>
                             <div className="row" style={{ float: 'right', marginRight: 25 }}>
                                 <div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor: "pointer" }}>
-                                    <span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
+                                    <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
                                 </div>
                                 <button onClick={() => this.handleSave()}>
                                     <div style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor: "pointer" }}>
-                                        <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
+                                        <span style={{ color: '#fff', fontSize: 11 }}>Save</span>
                                     </div>
                                 </button>
                             </div>

src/container/Profile.js

@@ -36,9 +36,9 @@ export default class Profile extends Component {
             errorOldPassword: false,
             errorPassword: false,
             errorConfirmPassword: false,
-            msgOldPassword: 'Terdiri 8 karakter dengan kombinasi angka.',
-            msgPassword: 'Terdiri 8 karakter dengan kombinasi angka.',
-            msgConfirmPassword: 'Terdiri 8 karakter dengan kombinasi angka.',
+            msgOldPassword: 'Consists of 8 characters with a combination of numbers.',
+            msgPassword: 'Consists of 8 characters with a combination of numbers.',
+            msgConfirmPassword: 'Consists of 8 characters with a combination of numbers.',
             company: [],
             listCompany: [],
             selectedIndex: 0,
@@ -68,23 +68,23 @@ export default class Profile extends Component {
         this.setState({ ...data, [e.target.name]: e.target.value })
         console.log(e.target.name);
         if (e.target.name == "password") {
-            this.setState({ errorPassword: false, msgPassword: 'Password consists of 8 characters with a combination of numbers.' })
+            this.setState({ errorPassword: false, msgPassword: 'Consists of 8 characters with a combination of numbers.' })
         } else if (e.target.name == "confirmPassword") {
-            this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Password consists of 8 characters with a combination of numbers.' })
+            this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Consists of 8 characters with a combination of numbers.' })
         } else if (e.target.name == "oldPassword") {
-            this.setState({ errorOldPassword: false, msgOldPassword: 'Password consists of 8 characters with a combination of numbers.' })
+            this.setState({ errorOldPassword: false, msgOldPassword: 'Consists of 8 characters with a combination of numbers.' })
         }
     }
 
     validasi() {
         if (this.state.oldPassword == "") {
-            this.setState({ errorOldPassword: true, msgOldPassword: 'Old Password is required.' })
+            this.setState({ errorOldPassword: true, msgOldPassword: 'Old password is required.' })
         } else if (this.state.oldPassword.length < 8) {
-            this.setState({ errorOldPassword: true, msgOldPassword: 'Old Password minimum 8 characters.' })
+            this.setState({ errorOldPassword: true, msgOldPassword: 'Old password minimum 8 characters.' })
         } else if (this.isEmail(this.state.oldPassword)) {
-            this.setState({ errorOldPassword: true, msgOldPassword: 'Old Password format should not use email.' })
+            this.setState({ errorOldPassword: true, msgOldPassword: 'Old password format should not use email.' })
         } else if (!this.isRegex(this.state.oldPassword)) {
-            this.setState({ errorOldPassword: true, msgOldPassword: 'Old Password must be a combination of characters, letters and numbers.' })
+            this.setState({ errorOldPassword: true, msgOldPassword: 'Old password must be a combination of characters, letters and numbers.' })
         } else if (this.state.password.trim() == "") {
             this.setState({ errorPassword: true, msgPassword: 'Password is required.' })
         } else if (this.state.password.length < 8) {
@@ -94,11 +94,11 @@ export default class Profile extends Component {
         } else if (!this.isRegex(this.state.password)) {
             this.setState({ errorPassword: true, msgPassword: 'Password must be a combination of characters, letters and numbers.' })
         } else if (this.state.confirmPassword.trim() == "") {
-            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm Password is required.' })
+            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation is required.' })
         } else if (this.state.confirmPassword.length < 8) {
-            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password of at least 8 characters.' })
+            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation of at least 8 characters.' })
         } else if (this.isEmail(this.state.confirmPassword)) {
-            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation format may not use email.' })
+            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation format should not use email.' })
         } else if (!this.isRegex(this.state.confirmPassword)) {
             this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation must be a combination of characters, letters and numbers.' })
         } else if (this.state.password !== this.state.confirmPassword) {

src/container/ResetPassword.js

@@ -33,7 +33,7 @@ class ResetPassword extends Component {
       console.log(this.props.match.params.id)
       let userId = this.props.match.params.id
       this.setState({userId})
-    //   this.checkExpiredLink(userId)
+      this.checkExpiredLink(userId)
       // console.log(this.props)
     }
 
@@ -67,7 +67,7 @@ class ResetPassword extends Component {
         if (this.state.password.trim() == "") {
             this.setState({ errorPassword: true, msgPassword: 'Password is required' })
         } else if (this.state.password.length < 8) {
-            this.setState({ errorPassword: true, msgPassword: 'Password of at least 8 characters.' })
+            this.setState({ errorPassword: true, msgPassword: 'Password minimum 8 characters.' })
         } else if (this.isEmail(this.state.password)) {
             this.setState({ errorPassword: true, msgPassword: 'Password format should not use email.' })
         } else if (!this.isRegex(this.state.password)) {
@@ -75,7 +75,7 @@ class ResetPassword extends Component {
         } else if (this.state.confirmPassword.trim() == "") {
             this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password is required.' })
         } else if (this.state.confirmPassword.length < 8) {
-            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password of at least 8 characters.' })
+            this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password minimum 8 characters.' })
         } else if (this.isEmail(this.state.confirmPassword)) {
             this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation format should not use email.' })
         } else if (!this.isRegex(this.state.confirmPassword)) {