update download, visualisasi, preview

src/container/ApprovalMatrix/CreateApprovalMatrix.js

@@ -22,7 +22,9 @@ export default class CreateApprovalMatrix extends Component {
             endDate: '',
             userData: [],
             value: null,
-            date: new Date()
+            date: new Date(),
+            errorOrder: false,
+            msgErrOrder: '',
         }
     }
 
@@ -105,22 +107,34 @@ export default class CreateApprovalMatrix extends Component {
         let data = this.state
         let isDate = type !== '' ? true : false
         if (isDate && type == 'start_date') {
-            this.setState({ startDate: format(e, 'yyyy-MM-dd') }, () => {
+            this.setState({ startDate: format(e, 'yyyy-MM-dd'),
+                errorOrder: false,
+                msgErrOrder: '',
+            // }, () => {
                 // console.log(this.state.startDate)
             })
         } else if (isDate && type == 'end_date') {
-            this.setState({ endDate: format(e, 'yyyy-MM-dd') }, () => {
+            this.setState({ endDate: format(e, 'yyyy-MM-dd'), 
+                errorOrder: false,
+                msgErrOrder: '',
+            // }, () => {
                 // console.log(this.state.endDate)
             })
         } else {
             // this.setState({...data, tempData: {...this.state.tempData, [e.target.name] :  e.target.value}})
+            this.setState({ 
+                errorOrder: false,
+                msgErrOrder: '',
+            })
         }
 
     }
 
     validasi() {
         if (R.isNil(this.state.typeId)) return alert("Tipe Persetujuan is Required.");
-        if (R.isEmpty(this.state.order)) return alert("Order is Required.");
+        if (R.isEmpty(this.state.order)) {
+            this.setState({ errorOrder: true, msgErrOrder: 'Order is Required.'})
+        }
         if (R.isNil(this.state.userId)) return alert("Pemberi Persetujuan is Required.");
         if (R.isNil(this.state.operatorId)) return alert("Operator is Required.");
         if (!R.isEmpty(this.state.startDate) && !R.isEmpty(this.state.endDate) && (this.state.startDate > this.state.endDate)) return alert("Masa Berlaku Tidak Boleh Kurang Dari Tanggal Mulai");
@@ -224,6 +238,8 @@ export default class CreateApprovalMatrix extends Component {
                                         id="order"
                                         label="Order"
                                         value={this.state.order}
+                                        error={this.state.errorOrder}
+                                        helperText={this.state.msgErrOrder}
                                         onChange={(e) => this.setState({ order: e.target.value })}
                                         inputProps={{
                                             style: {

src/container/ApprovalMatrix/VisualisasiAM.js

@@ -47,13 +47,13 @@ export default class VisualisasiAM extends Component {
         api.create().getTypeAM().then((response) => {
             if (response.data.status == 'success') {
                 let data = response.data.data
+                // console.log(data)
                 let typeData = data.map((item) => {
                     return {
                         approval_type_id: item.approval_type_id,
                         approval_type_name: item.approval_type_name
                     }
                 })
-                // console.log(userData)
                 let typeProps = {
                     options: typeData,
                     getOptionLabel: (option) => option.approval_type_name,
@@ -73,7 +73,7 @@ export default class VisualisasiAM extends Component {
         api.create().searchAM(body).then(response => {
             if (response.data.status == 'success') {
                 let data = response.data.data
-                console.log(data)
+                // console.log(data)
                 let listVisual = []
                 data.map((item, index) => {
                     let indexId = listVisual.findIndex((val) => val.orderId == item.orders)
@@ -82,13 +82,15 @@ export default class VisualisasiAM extends Component {
                             orderId: item.orders,
                             data: [item]
                         })
-                        console.log(listVisual);
+                        // console.log(listVisual);
                     } else {
                         listVisual[indexId].data.push(item)
+                        // console.log('listVisual');
+                        // console.log(listVisual);
                     }
                 })
                 this.setState({ listApproval: listVisual})
-                console.log(listVisual);
+                // console.log(listVisual);
             } else {
                 alert(response.data.message)
             }
@@ -100,33 +102,43 @@ export default class VisualisasiAM extends Component {
         let orderIdFrom = listApproval[fromIndex].orderId
         listApproval[fromIndex].orderId = listApproval[toIndex].orderId
         listApproval[toIndex].orderId = orderIdFrom
-        that.setState({listEdit: listApproval})
+        that.setState({listEdit: listApproval}, () => console.log(this.state.listEdit))
     }
 
     handleSave() {
         let data = []
-        this.state.listEdit.map((item,index) => {
-            item.data.map((items,index) => {
-                data.push({
-                    approval_matrix_id: items.approval_matrix_id,
-                    approval_type_id: items.approval_type_id,
-                    approval_type_name: items.approval_type_name,
-                    created: items.created,
-                    end_date: items.end_date,
-                    fullname: items.fullname,
-                    operator_type_id: items.operator_type_id,
-                    operator_type_name: items.operator_type_name,
-                    orders: item.orderId,
-                    start_date: items.start_date,
-                    status: items.status,
-                    updated: items.updated,
-                    user_id: items.user_id
+        if (this.state.listEdit.length == 0) {
+            this.state.listApproval.map((item,index) => {
+                item.data.map((items,index) => {
+                    data.push({
+                        approval_matrix_id: items.approval_matrix_id,
+                        approval_type_id: items.approval_type_id,
+                        operator_type_id: items.operator_type_id,
+                        orders: item.orderId,
+                        user_id: items.user_id
+                    })
                 })
             })
-        })
-
+        } else {
+            this.state.listEdit.map((item,index) => {
+                item.data.map((items,index) => {
+                    data.push({
+                        approval_matrix_id: items.approval_matrix_id,
+                        approval_type_id: items.approval_type_id,
+                        operator_type_id: items.operator_type_id,
+                        orders: item.orderId,
+                        user_id: items.user_id
+                    })
+                })
+            })
+        }
         setTimeout(() => {
-            this.setState({listOriginal: data})
+            let payload = {
+                approval_type_id: data[0].approval_type_id,
+                approval_matrix_detail : data
+            }
+            this.setState({listOriginal: payload})
+            this.props.updateVAM(this.state.listOriginal)
         }, 500);
     }
 
@@ -174,7 +186,7 @@ export default class VisualisasiAM extends Component {
                                     </div>
                                     <ReactDragListView {...dragProps}>
                                         <ol style={{paddingLeft: 15}}>
-                                        {this.state.listApproval.map((item, index) => (
+                                        {this.state.listApproval.sort((a,b) => a.orderId - b.orderId).map((item, index) => (
                                             <li key={index} style={{color: '#4b4b4b', fontSize: 14}}>
                                                 <a href='#' style={{ color: '#4b4b4b', fontSize: '14px', cursor: 'auto', outline: 'none' }}>
                                                     <div className="grid grid-3x grid-mobile-none gap-20px margin-bottom-20px" style={{width: '75%'}}>