add confirm modal for buttons in ticketdetail

src/components/TicketListItem/TicketListItem.tsx

@@ -15,7 +15,6 @@ export class TicketListItem {
   status: FixStatus;
   createAt: moment.Moment;
   iconMap: Map<FixStatus, string>;
-  isMember: boolean;
 
   constructor(
     id: number,
@@ -23,14 +22,12 @@ export class TicketListItem {
     model: string,
     status: FixStatus,
     createAt: moment.Moment,
-    isMember: boolean,
   ) {
     this.id = id;
     this.brand = brand;
     this.model = model;
     this.status = status;
     this.createAt = createAt;
-    this.isMember = isMember;
     this.iconMap = new Map<FixStatus, string>([
       [1, repair],
       [2, repair],
@@ -51,11 +48,7 @@ export class TicketListItem {
         thumb={this.iconMap.get(this.status)}
         onClick={() => {
           Taro.navigateTo({
-            url:
+            url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
-              '/pages/TicketDetail/TicketDetail?id=' +
-              this.id +
-              '&isMember=' +
-              this.isMember,
           });
         }}
       />

src/pages/TicketDetail/TicketDetail.tsx

@@ -3,6 +3,8 @@ import { View } from '@tarojs/components';
 import { getCurrentInstance } from '@tarojs/runtime';
 import pt from '@/plain-text';
 import {
+  AtActionSheet,
+  AtActionSheetItem,
   AtButton,
   AtFloatLayout,
   AtForm,
@@ -14,6 +16,7 @@ import DetailFramework from '@/components/DetailFramework/DetailFramework';
 import PageFooter from '@/components/PageFooter/PageFooter';
 import { submitComment } from '@/service/submitComment';
 import Taro from '@tarojs/taro';
+import wechatUser from '@/wechat';
 
 const submitInterval = 5000;
 
@@ -22,6 +25,9 @@ interface TicketDetailState {
   isMember: boolean;
   showOreoModal: boolean;
   showCommentModal: boolean;
+  showRetrieveModal: boolean;
+  showStatusSheet: boolean;
+  showPickModal: boolean;
   comment: string;
   isLoading: boolean;
   isDisable: boolean;
@@ -33,6 +39,9 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
     isMember: false,
     showOreoModal: false,
     showCommentModal: false,
+    showRetrieveModal: false,
+    showStatusSheet: false,
+    showPickModal: false,
     comment: '',
     isLoading: false,
     isDisable: false,
@@ -41,10 +50,9 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
   componentDidMount(): void {
     const { router } = getCurrentInstance();
     const id = router?.params.id as number;
-    const isMember = router?.params.isMember as boolean;
     this.setState({
       id: id,
-      isMember: isMember,
+      isMember: wechatUser.getAccess(),
     });
   }
 
@@ -60,6 +68,24 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
     });
   }
 
+  onRetrieved(): void {
+    this.setState({
+      showRetrieveModal: true,
+    });
+  }
+
+  onPick(): void {
+    this.setState({
+      showPickModal: true,
+    });
+  }
+
+  onChangeStatus(): void {
+    this.setState({
+      showStatusSheet: true,
+    });
+  }
+
   handleOreoCancel(): void {
     this.setState({
       showOreoModal: false,
@@ -72,6 +98,24 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
     });
   }
 
+  handleRetrieveCancel(): void {
+    this.setState({
+      showRetrieveModal: false,
+    });
+  }
+
+  handleStatusCancel(): void {
+    this.setState({
+      showStatusSheet: false,
+    });
+  }
+
+  handlePickCancel(): void {
+    this.setState({
+      showPickModal: false,
+    });
+  }
+
   handleOreoConfirm(): void {
     return;
   }
@@ -80,6 +124,20 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
     return;
   }
 
+  handleRetrieveConfirm(): void {
+    return;
+  }
+
+  handlePickConfirm(): void {
+    return;
+  }
+
+  handleStatusChange(status: number): void {
+    this.setState({
+      showStatusSheet: false,
+    });
+  }
+
   handleCommentChange(comment: string) {
     this.setState({
       comment: comment,
@@ -113,29 +171,48 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
 
   render(): ReactNode {
     const middleButton = this.state.isMember ? (
+      <View>
         <View
           className='at-row'
           style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
         >
           <View
             className='at-col'
-          style={{ marginLeft: 10, paddingRight: 5, width: '33%' }}
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
           >
-          <AtButton type='secondary'>{pt.get().ticketDetail.pick}</AtButton>
+            <AtButton type='secondary' onClick={this.onPick.bind(this)}>
+              {pt.get().ticketDetail.pick}
+            </AtButton>
           </View>
           <View
             className='at-col'
-          style={{ marginLeft: 10, paddingRight: 5, width: '33%' }}
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
-          onClick={this.onAddToOreo.bind(this)}
           >
-          <AtButton type='primary'>{pt.get().ticketDetail.addToOreo}</AtButton>
+            <AtButton type='primary' onClick={this.onAddToOreo.bind(this)}>
+              {pt.get().ticketDetail.addToOreo}
+            </AtButton>
+          </View>
+        </View>
+        <View
+          className='at-row'
+          style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
+        >
+          <View
+            className='at-col'
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
+          >
+            <AtButton type='primary' onClick={this.onChangeStatus.bind(this)}>
+              {pt.get().ticketDetail.status.button}
+            </AtButton>
           </View>
           <View
             className='at-col'
-          style={{ marginRight: 10, paddingLeft: 5, width: '33%' }}
+            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
-          onClick={this.onAddComment.bind(this)}
           >
-          <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
+            <AtButton type='secondary' onClick={this.onAddComment.bind(this)}>
+              {pt.get().ticketDetail.addNote}
+            </AtButton>
+          </View>
         </View>
       </View>
     ) : (
@@ -147,13 +224,17 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
           className='at-col'
           style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
         >
-          <AtButton type='primary'>{pt.get().ticketDetail.tookAway}</AtButton>
+          <AtButton type='primary' onClick={this.onRetrieved.bind(this)}>
+            {pt.get().ticketDetail.tookAway}
+          </AtButton>
         </View>
         <View
           className='at-col'
           style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
         >
-          <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
+          <AtButton type='secondary' onClick={this.onChangeStatus.bind(this)}>
+            {pt.get().ticketDetail.addNote}
+          </AtButton>
         </View>
       </View>
     );
@@ -178,6 +259,24 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
           onConfirm={this.handleOreoConfirm.bind(this)}
           content={pt.get().modal.addToOreo.content}
         />
+        <AtModal
+          isOpened={this.state.showRetrieveModal}
+          title={pt.get().modal.retrieve.title}
+          cancelText={pt.get().modal.cancel}
+          confirmText={pt.get().modal.confirm}
+          onCancel={this.handleRetrieveCancel.bind(this)}
+          onConfirm={this.handleRetrieveConfirm.bind(this)}
+          content={pt.get().modal.retrieve.content}
+        />
+        <AtModal
+          isOpened={this.state.showPickModal}
+          title={pt.get().modal.pick.title}
+          cancelText={pt.get().modal.cancel}
+          confirmText={pt.get().modal.confirm}
+          onCancel={this.handlePickCancel.bind(this)}
+          onConfirm={this.handlePickConfirm.bind(this)}
+          content={pt.get().modal.pick.content}
+        />
         <AtFloatLayout
           isOpened={this.state.showCommentModal}
           title={pt.get().ticketDetail.comment.title}
@@ -202,6 +301,32 @@ export default class TicketDetail extends Component<{}, TicketDetailState> {
             </AtButton>
           </AtForm>
         </AtFloatLayout>
+        <AtActionSheet
+          isOpened={this.state.showStatusSheet}
+          cancelText={pt.get().ticketDetail.status.cancel}
+          title={pt.get().ticketDetail.status.title}
+          onCancel={this.handleStatusCancel.bind(this)}
+          onClose={this.handleStatusCancel.bind(this)}
+        >
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 0)}>
+            {pt.get().ticketDetail.status.status0}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 1)}>
+            {pt.get().ticketDetail.status.status1}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 2)}>
+            {pt.get().ticketDetail.status.status2}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 3)}>
+            {pt.get().ticketDetail.status.status3}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 4)}>
+            {pt.get().ticketDetail.status.status4}
+          </AtActionSheetItem>
+          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 5)}>
+            {pt.get().ticketDetail.status.status5}
+          </AtActionSheetItem>
+        </AtActionSheet>
         <DetailFramework
           middleButton={middleButton}
           id={this.state.id}

src/plain-text/Modal.ts

@@ -1,5 +1,5 @@
 export interface ModalText {
-  comment: {
+  pick: {
     title: string;
     content: string;
   };
@@ -7,32 +7,45 @@ export interface ModalText {
     title: string;
     content: string;
   };
+  retrieve: {
+    title: string;
+    content: string;
+  };
   cancel: string;
   confirm: string;
 }
 
 export const modalZhCn: ModalText = {
-  comment: {
+  pick: {
-    title: '添加评论',
+    title: '认领此工单',
-    content: '',
+    content: '工单可多人认领！认领后将无法撤销！',
   },
   addToOreo: {
     title: '将工单加入 Oreo',
     content: '确认加入 Oreo？加入后将无法撤回！',
   },
+  retrieve: {
+    title: '机器取回确认',
+    content: '确认该机器已取回？取回后工单完成，将无法添加评论！',
+  },
   cancel: '取消',
   confirm: '确认',
 };
 
 export const modalEnUs: ModalText = {
-  comment: {
+  pick: {
-    title: 'Add comment',
+    title: 'Pick this ticket',
-    content: '',
+    content: '工单可多人认领！认领后将无法撤销！',
   },
   addToOreo: {
     title: 'Add ticket to Oreo',
     content: 'Once Confirmed, the change will be irrevocably!',
   },
+  retrieve: {
+    title: 'Confirm the retrieving',
+    content:
+      'Once Confirmed, the ticket will be closed and cannot add any comment!',
+  },
   cancel: 'Cancel',
   confirm: 'Confirm',
 };

src/plain-text/TicketDetail.ts

@@ -18,6 +18,17 @@ export interface TicketDetailText {
     title: string;
     placeholder: string;
   };
+  status: {
+    button: string;
+    title: string;
+    cancel: string;
+    status0: string;
+    status1: string;
+    status2: string;
+    status3: string;
+    status4: string;
+    status5: string;
+  };
 }
 
 export const ticketDetailZhCn: TicketDetailText = {
@@ -45,6 +56,17 @@ export const ticketDetailZhCn: TicketDetailText = {
     title: '添加评论',
     placeholder: '可以在这里交流机器情况、维修进度、提出问题~',
   },
+  status: {
+    button: '改变工单状态',
+    title: '请选择要改变成为的状态',
+    cancel: '取消',
+    status0: '',
+    status1: '',
+    status2: '',
+    status3: '',
+    status4: '',
+    status5: '',
+  },
 };
 
 export const ticketDetailEnUs: TicketDetailText = {
@@ -69,7 +91,18 @@ export const ticketDetailEnUs: TicketDetailText = {
   addNote: 'Comment',
   pick: 'Pick',
   comment: {
-    title: '添加评论',
+    title: 'Add Comment',
     placeholder: '可以在这里交流机器情况、维修进度、提出问题~',
   },
+  status: {
+    button: 'Change Status',
+    title: '请选择要改变成为的状态',
+    cancel: 'Cancel',
+    status0: '',
+    status1: '',
+    status2: '',
+    status3: '',
+    status4: '',
+    status5: '',
+  },
 };