Fixed: [弱掃] p13.2 Bad use of null-like value

Tomas

2023-08-05 ffcf1c449974fffad5e827ab0dd2d3bb21327d5f

 PAMapp/components/Interview/InterviewMsg.vue

@@ -1,5 +1,5 @@
<template>
  <div>
  <div class="interview-msg-component">
    <el-dialog
      :visible.sync="dialogVisible"
      :width="dialogWidth"
@@ -7,39 +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 @click="addInterview"  :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 } 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 InterviewMsg extends Vue {

    @appointmentStore.Action
    updateAppointmentDetail!: (id: number) => Appointment;

    @appointmentStore.Action
    getMyAppointmentList!: () => Promise<Appointment[]>;

    @PropSync('isVisible')
    dialogVisible!: boolean;

@@ -49,59 +95,171 @@
    @Prop()
    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" +"以下是我的Email："+"\n" + (this.loginConsultant.email|| '尚未提供 Email') + "\n"  +"若此時間不方便，請與我聯繫！謝謝！";
      }
    }

    interviewContent = {
      addContactInfo: true,
      interviewTime: '',
      formattedInterviewTime: '',
      customContent: '',
    };

    //////////////////////////////////////////////////////////////////////

    addInterview() {
      const appointmentInformation: ToInformAppointment = {
        appointmentId: this.client.id,
        email        : this.client?.email,
        interviewDate: this.interviewTime,
        message      : this.interviewTxt,
        phone        : this.client?.phone,
      };
      appointmentService.informAppointment(appointmentInformation).then((_) => {
        // TODO: close dialog after confirm success msg drawer (assign to Helen)[Tomas, 2022/1/17 11:21];
        this.dialogVisible = false;
      });
    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>