add confirm box

src/actions/index.js

@@ -16,6 +16,16 @@ export const remove_dialog_msg = () => ({
     type: 'dialog_remove_first'
 });
 
+export const add_confirm = (msg, act = null) => ({
+    type: 'confirm_addmsg',
+    msg,
+    act
+})
+
+export const remove_confirm = () => ({
+    type: 'confirm_remove'
+})
+
 /**
  * set i18next object
  * @param {object} i18n i18next object

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;
+        callConfirm('確定要刪除這筆定位點資料?', ()=>{
             fetch('/api/wristband/dellocation', getRequest({id}))
                 .then(response => response.json())
                 .then(json => {
                     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;
 
+        callConfirm('確定要刪除這筆手環資料?', ()=>{
             fetch('/api/wristband/delwristband', getRequest({id}))
                 .then(response=>response.json())
                 .then(json=>{
                     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,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 WristbandPage from '../../../components/AdminPage/Wristband';
 
 

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

@@ -4,13 +4,15 @@ import i18n from './i18n';
 import ui from './ui';
 import sysinfo from './sysinfo';
 import lists from './lists';
+import confirmbox from './confirmbox';
 
 const reducers = combineReducers({
     dialog,
     i18n,
     ui,
     sysinfo,
-	lists
+    lists,
+    confirmbox
 });
 
 export default reducers;