From ffcf1c449974fffad5e827ab0dd2d3bb21327d5f Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期六, 05 八月 2023 17:46:45 +0800
Subject: [PATCH] Fixed: [弱掃] p13.2 Bad use of null-like value

---
 PAMapp/components/Interview/InterviewMsg.vue |  266 ++++++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 222 insertions(+), 44 deletions(-)

diff --git a/PAMapp/components/Interview/InterviewMsg.vue b/PAMapp/components/Interview/InterviewMsg.vue
index b9518c4..ac9f657 100644
--- a/PAMapp/components/Interview/InterviewMsg.vue
+++ b/PAMapp/components/Interview/InterviewMsg.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="interview-msg-component">
     <el-dialog
       :visible.sync="dialogVisible"
       :width="dialogWidth"
@@ -7,35 +7,85 @@
       :lock-scroll="false"
         >
         <div class="subTitle msg-dialog-title">蝝赤�</div>
-      <div class="send-msg-nav">
-        <div class="mdTxt">��摰�</div>
-        <div class="mdTxt text--primary text--underline">蝺刻摩</div>
+
+      <div v-if="!!client.phone">
+        <div class="mdTxt mt-30 mb-10 required">����赤��挾</div>
+        <DateTimePicker
+          @changeDateTime="interviewContent.interviewTime = $event"
+          :isPastDateDisabled="true"
+          :defaultValue="defaultValue"
+        ></DateTimePicker>
+      </div>
+
+      <div class="send-msg-nav mt-10" style="justify-content: flex-start; align-items: center ;">
+        <div class="mdTxt">�隞��摰�</div>
       </div>
 
       <el-input
         type="textarea"
-        :rows="9"
-        placeholder="蝝赤�"
+        placeholder="隢撓��摰�"
         resize="none"
-        v-model="interviewTxt">
+        rows="2"
+        v-model="interviewContent.customContent">
         </el-input>
-      <div class="mdTxt mt-30 mb-10">����赤��挾</div>
-      <DateTimePicker
-        @changeDateTime="interviewTime = $event"
-      ></DateTimePicker>
+
+      <div class="send-msg-nav mt-10">
+        <div class="mdTxt">��汗��摰�</div>
+      </div>
+
+      <!-- <el-input
+        type="textarea"
+        :autosize="true"
+        placeholder="��汗蝝赤�"
+        resize="none"
+        :disabled="true"
+        v-model="interviewTxt"> -->
+        <!-- </el-input> -->
+        <div class="interviewContent">
+          <div style="padding:10px;line-height:25px">
+            <i class="content">�憟踝��靽���像����憿批�{loginConsultant.name}}嚗��������</i><br/>
+            <el-input type="textarea" :placeholder="'\{{ 憒����������ㄐ憿舐內 }}'" resize="none" v-model="interviewContent.customContent" readonly :autosize="true" ></el-input><br/>
+            <i class="content">{{client.phone ||defaultValue ? ("�����銝膩������蝜�"+ "\n" + (this.interviewContent.formattedInterviewTime || "(撠����赤��挾)")): ""}}</i><br/>
+              <i class="content">隞乩����閰梯�Ⅳ/Email嚗{loginConsultant.phoneNumber || '撠���閰梯�Ⅳ'}} / {{loginConsultant.email || '撠���� Email'}}</i><br/>
+              <i class="content">�甇斗���靘選����蝜恬�����</i>
+          </div>
+        </div>
 
       <div class="msg-dialog-btn">
-        <el-button :disabled="!interviewTime">���</el-button>
+        <el-button @click="addInterview"  :disabled="isBtnDisabled">���</el-button>
       </div>
 
         </el-dialog>
+
+        <PopUpFrame
+          :isOpen.sync="isShowSuccessAlert"
+          @closePopUp="closeAllDialog">
+        <div class="text--middle invite-review">
+            <div class="mb-30 mt-10">撌脩��赤�</div>
+            <div class="text--primary text--middle cursor--pointer text--underline" @click="closeAllDialog " :size="'250px'">������</div>
+          </div>
+        </PopUpFrame>
   </div>
 </template>
 <script lang="ts">
-import { Vue, Component, Prop, PropSync, Emit, Action } from 'nuxt-property-decorator';
+import { Vue, Component, Prop, PropSync, Emit, namespace, Watch } from 'nuxt-property-decorator';
+
+import appointmentService from '~/shared/services/appointment.service';
+import { Appointment, ToInformAppointment } from '~/shared/models/appointment.model';
+import { AgentInfo } from '~/shared/models/agent-info.model';
+
+const loginStore = namespace('login.store');
+const appointmentStore = namespace('appointment.store');
 
 @Component
-export default class InterviewAdd extends Vue {
+export default class InterviewMsg extends Vue {
+
+    @appointmentStore.Action
+    updateAppointmentDetail!: (id: number) => Appointment;
+
+    @appointmentStore.Action
+    getMyAppointmentList!: () => Promise<Appointment[]>;
+
     @PropSync('isVisible')
     dialogVisible!: boolean;
 
@@ -43,45 +93,173 @@
     dialogWidth!:string;
 
     @Prop()
-    appointmentId!: number;
+    client!: Appointment;
+
+    @Prop()
+    defaultValue!: string;
+
+    @Watch('defaultValue', { immediate: true })
+    onDefaultValueChange(): void {
+      if (this.defaultValue) {
+        this.interviewContent.interviewTime = this.defaultValue;
+      }
+    }
 
     @Emit('closeDialog')
     closeDialog() {
         return;
     }
 
-    interviewTxt = "";
-    interviewTime = '';
+    @loginStore.State
+    loginConsultant!: AgentInfo;
+
+    isShowSuccessAlert = false;
+    interviewTxt = '';
+
+    @Watch('interviewContent', { immediate: true, deep: true })
+    onInterviewContentChange() {
+      if (this.interviewContent.addContactInfo) {
+        if (this.interviewContent.interviewTime) {
+          const targetDate = new Date(this.interviewContent.interviewTime);
+          this.interviewContent.formattedInterviewTime = `${targetDate.getFullYear()}撟�${targetDate.getMonth() + 1}���${targetDate.getDate()}� ${targetDate.getHours()}���${targetDate.getMinutes()}��;
+        }
+        if(this.loginConsultant.phoneNumber){
+          let temp = '';
+          for (var i=0;i<this.loginConsultant.phoneNumber.length;i++) {
+            let charCode = this.loginConsultant.phoneNumber.charCodeAt(i);
+            if(charCode <=126 && charCode>= 33) {
+              charCode += 65248;
+            } else if (charCode ===32) {
+              charCode =12288;
+            }
+            temp = temp + String.fromCharCode(charCode);
+          }
+          this.interviewTxt = "�憟踝��靽���像����憿批��"+this.loginConsultant.name+"嚗��������"+"\n"+this.interviewContent.customContent+ "\n" ��+ ( this.client.phone || this.defaultValue ? ("�����銝膩������蝜�"+ "\n" + (this.interviewContent.formattedInterviewTime || "(撠����赤��挾)")): "") + "\n" +"隞乩����閰梯�Ⅳ/Email嚗�"+"\n" + ( temp || '(撠���閰梯�Ⅳ)') + "\n" + (this.loginConsultant.email|| '撠���� Email') + "\n"  +"�甇斗���靘選����蝜恬�����";
+        }
+      } else {
+        // this.interviewTxt = this.interviewContent.customContent;
+        this.interviewTxt = "�憟踝��靽���像����憿批��"+this.loginConsultant.name+"嚗��������"+"\n"+this.interviewContent.customContent+ "\n" ��+ ( this.client.phone || this.defaultValue ? ("�����銝膩������蝜�"+ "\n" + (this.interviewContent.formattedInterviewTime || "(撠����赤��挾)")): "") + "\n" +"隞乩����mail嚗�"+"\n" + (this.loginConsultant.email|| '撠���� Email') + "\n"  +"�甇斗���靘選����蝜恬�����";
+      }
+    }
+
+    interviewContent = {
+      addContactInfo: true,
+      interviewTime: '',
+      formattedInterviewTime: '',
+      customContent: '',
+    };
+
+    //////////////////////////////////////////////////////////////////////
+
+    mounted() {
+      this.interviewContent.customContent ='';
+    }
+
+  addInterview() {
+    const appointmentInformation: ToInformAppointment = {
+      appointmentId: this.client?.id || 0,
+      email: this.client?.email || '',
+      interviewDate: this.interviewContent.interviewTime,
+      message: this.interviewTxt,
+      phone: this.client?.phone || '',
+    };
+    appointmentService.informAppointment(appointmentInformation).then((_) => {
+      this.isShowSuccessAlert = true;
+    });
+  }
+
+
+    closeAllDialog() {
+      this.isShowSuccessAlert = false ;
+      this.dialogVisible = false;
+      this.updateAppointmentDetail(this.client.id);
+      this.getMyAppointmentList();
+    }
+
+    get isBtnDisabled() :Boolean {
+      const isFormValid = this.client.phone ? this.interviewTxt && this.interviewContent.formattedInterviewTime : this.interviewTxt
+      return !isFormValid
+    }
 
 }
 </script>
 
-<style lang="scss" scoped>
-.msg-dialog-title{
-  display: flex;
-  justify-content: center;
-  margin-bottom:30px;
-  color: $PRIMARY_BLACK;
-}
-.send-msg-nav{
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-  color: $PRIMARY_BLACK;
-}
-.el-dialog{
-  width:90%
-}
-.el-textarea__inner{
-  font-size: 20px;
-  padding:10px;
-  text-align: justify;
-  font-weight: 500;
-}
-.msg-dialog-btn{
-  margin-top: 30px;
-  display: flex;
-  justify-content: center;
-}
+<style lang="scss" >
+.interview-msg-component{
 
+  .required {
+  position: relative;
+  &::before {
+      content: '*';
+      position: absolute;
+      color: #FF0000;
+      transform: translate(-12px, 0);
+    }
+  }
+  .msg-dialog-title{
+    display: flex;
+    justify-content: center;
+    margin-bottom:30px;
+    color: $PRIMARY_BLACK;
+  }
+  .send-msg-nav{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    color: $PRIMARY_BLACK;
+  }
+  .el-dialog{
+    width:90%
+  }
+  .el-textarea__inner{
+    font-size: 20px;
+    padding:10px;
+    text-align: justify;
+    font-weight: 600;
+
+  }
+  .msg-dialog-btn{
+    margin-top: 30px;
+    display: flex;
+    justify-content: center;
+  }
+  .invite-review{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+  .interviewContent {
+    border: 1px solid #D0D0CE;
+    border-radius: 4px;
+    overflow-y: auto;
+    height: 180px;
+    background-color:#F8F9FA;
+    textarea {
+      outline:none !important;
+      border: none;
+      background-color:transparent;
+      color: red;
+    }
+    ::placeholder {
+      color: red;
+    }
+  }
+  .content{
+    font-size: 18px;
+    font-weight: bold;
+    color: #CCCCCC;
+  }
+
+  .el-input__inner {
+    border:1px solid #707070;
+    border-radius:4px;
+  }
+  .interview-other-msg {
+    max-height: 80px;
+    overflow-y: auto;
+    margin-bottom: 5px;
+    margin-top: 5px;
+  }
+}
 </style>

--
Gitblit v1.8.0