add confirm box

src/components/AdminPage/Wristband/Location/index.js

@@ -75,13 +75,15 @@ class Location extends React.Component {
 
     delLocation = (id) => {
         if(!id) return ;
-        let {showDialog} = this.props;
+        let {showDialog, callConfirm} = this.props;
-        fetch('/api/wristband/dellocation', getRequest({id}))
+        callConfirm('確定要刪除這筆定位點資料?', ()=>{
-            .then(response => response.json())
+            fetch('/api/wristband/dellocation', getRequest({id}))
-            .then(json => {
+                .then(response => response.json())
-                if(json.status != 1) return showDialog(json.message);
+                .then(json => {
-                this.getList();
+                    if(json.status != 1) return showDialog(json.message);
-            })
+                    this.getList();
+                })
+        })
     }
 
     render() {

src/components/AdminPage/Wristband/WristbandInfo/index.js

@@ -44,13 +44,16 @@ class WristbandInfo extends React.Component {
 
     delWristband = (id) => {
         if(!id) return ;
+        let {showDialog, callConfirm} = this.props;
 
-        fetch('/api/wristband/delwristband', getRequest({id}))
+        callConfirm('確定要刪除這筆手環資料?', ()=>{
-            .then(response=>response.json())
+            fetch('/api/wristband/delwristband', getRequest({id}))
-            .then(json=>{
+                .then(response=>response.json())
-                if(json.status!=1) return showDialog(json.message);
+                .then(json=>{
-                this.getList();
+                    if(json.status!=1) return showDialog(json.message);
-            })
+                    this.getList();
+                })
+        })
     }
 
     openModal = (type, data = {}) => {

src/components/ConfirmBox.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Modal, Button} from 'semantic-ui-react';
+
+const ConfirmBox = ({obj, getNext}) => (
+	<Modal open={obj && obj.msg != '' ? true : false} onClose={() => getNext()} style={{zIndex: "2001"}}>
+		<Modal.Content>{obj && obj.msg ? obj.msg : ''}</Modal.Content>
+		<Modal.Actions>
+			<Button onClick={() => getNext(true, obj.act)} content="Submit" />
+            <Button onClick={() => getNext()} content="Cancel" />
+		</Modal.Actions>
+	</Modal>
+);
+
+
+export default ConfirmBox;

src/containers/AdminPage/Wristband/Location.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { add_dialog_msg, toggle_loading } from '../../../actions';
+import { add_dialog_msg, toggle_loading, add_confirm } from '../../../actions';
 import LocationPage from '../../../components/AdminPage/Wristband/Location';
 
 
@@ -13,6 +13,9 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
     },
     toggleLoading: (flag = false) => {
         dispatch(toggle_loading(flag));
+    },
+    callConfirm: (msg, act = null) => {
+        dispatch(add_confirm(msg, act))
     }
 })
 

src/containers/AdminPage/Wristband/WristbandInfo.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { add_dialog_msg, toggle_loading } from '../../../actions';
+import { add_dialog_msg, toggle_loading, add_confirm } from '../../../actions';
 import WristbandInfo from '../../../components/AdminPage/Wristband/WristbandInfo';
 
 
@@ -13,6 +13,9 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
     },
     toggleLoading: (flag = false) => {
         dispatch(toggle_loading(flag));
+    },
+    callConfirm: (msg, act = null) => {
+        dispatch(add_confirm(msg, act))
     }
 })
 

src/containers/AdminPage/Wristband/index.js

@@ -1,16 +1,16 @@
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
-import {add_dialog_msg, toggle_loading} from '../../../actions';
+import { add_dialog_msg, toggle_loading, add_confirm } from '../../../actions';
 import WristbandPage from '../../../components/AdminPage/Wristband';
 
 
 const mapStateToProps = (state) => ({
-	i18n: state.i18n
+    i18n: state.i18n
 });
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
-	showDialog: (msg) => {
+    showDialog: (msg) => {
-		dispatch(add_dialog_msg(msg));
+        dispatch(add_dialog_msg(msg));
-	},
+    },
     toggleLoading: (flag = false) => {
         dispatch(toggle_loading(flag));
     }

src/containers/AdminPage/index.js

@@ -4,6 +4,7 @@ import Datetime from 'react-datetime';
 import MainMenu from '../../containers/MenuControl';
 import Loading from '../../containers/LoadingControl';
 import Dialog from '../DialogControl';
+import ConfirmBox from '../ConfirmControl';
 import Dashboard from '../../containers/DashBoard';
 import {toggle_dashboard} from '../../actions'
 
@@ -27,6 +28,7 @@ class AdmPage extends React.Component {
 			<div style={{height: '100%'}}>
 				<Loading />
 				<Dialog />
+				<ConfirmBox />
 				<MainMenu i18n={i18n} >
 					<Dashboard />
 					{children}

src/containers/ConfirmControl.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import ConfirmBox from '../components/ConfirmBox';
+import { remove_confirm } from '../actions'
+
+const mapStateToProps = (state) => ({
+    obj: state.confirmbox[0] || null
+});
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    getNext: (doit = false, act = null) => {
+        //get next dialog message
+        if (doit) {
+            if (typeof act == 'function') act();
+        }
+        dispatch(remove_confirm());
+    }
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConfirmBox);

src/reducers/confirmbox.js

@@ -0,0 +1,15 @@
+const confirmbox = (state = [], action) => {
+    switch (action.type) {
+        case 'confirm_addmsg':
+            return [...state, {
+                msg: action.msg,
+                act: action.act || null
+            }];
+        case 'confirm_remove':
+            return state.slice(1);
+        default:
+            return state;
+    }
+}
+
+export default confirmbox;

src/reducers/index.js

@@ -1,16 +1,18 @@
-import {combineReducers} from 'redux';
+import { combineReducers } from 'redux';
 import dialog from './dialog';
 import i18n from './i18n';
 import ui from './ui';
 import sysinfo from './sysinfo';
 import lists from './lists';
+import confirmbox from './confirmbox';
 
 const reducers = combineReducers({
-	dialog,
+    dialog,
-	i18n,
+    i18n,
-	ui,
+    ui,
-	sysinfo,
+    sysinfo,
-	lists
+    lists,
+    confirmbox
 });
 
 export default reducers;