update: package-lock.json

Tomas

2024-04-30 b4d6944076f1df6eedaae35c4c2a7072fe988e8a

 PAMapp/components/Interview/InterviewAdd.vue

@@ -1,48 +1,243 @@
<template>
  <div class="edit-appointment-record">
      <div class="edit-appointment-record-date">
          <span>今天 11:00 建立</span>
          <span>今天 11:00 更新</span>
      <div class="edit-appointment-record-date" v-if="interviewId && interviewRecord">
          <span>{{interviewRecord.createdDate | formatDate}} 建立</span>
          <span>{{interviewRecord.lastModifiedDate | formatDate}} 更新</span>
      </div>
      <el-row class="mdTxt mb-10">
          <el-col :xs="16" :sm="20">
            <span :class="{'required': !interviewId || isEdit}">約訪時間</span>
          </el-col>
          <el-col :xs="8" :sm="4" class="text--right" v-if="interviewId">
              <span
                v-if="!isEdit"
                class="mr-10 text--primary  cursor--pointer"
                @click="showCancelPopUp = true"
              ><i class="icon-delet"></i></span>
              <span
                v-if="!isEdit"
                class="text--primary  cursor--pointer"
                @click="isEdit = !isEdit"
              ><i class="icon-edit"></i></span>
          </el-col>
      </el-row>

      <template v-if="!interviewId || isEdit">
          <DateTimePicker
            :disabledBeforeSpecificDate="appointmentDetail.appointmentDate"
            @changeDateTime="interviewTime = $event"
            :defaultValue="defaultValue"
          ></DateTimePicker>
      </template>
      <template v-else>
          <div class="fs-20 mt-20">
              {{formatInterviewDate}}
          </div>
      </template>

      <div class="mdTxt mb-10 mt-30" :class="{'required': !interviewId || isEdit}">約訪紀錄</div>
      <template v-if="!interviewId || isEdit">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="請輸入約訪紀錄"
            resize="none"
            v-model="content"
        >
        </el-input>
      </template>
      <template v-else>
          <div class="fs-20 mt-20 text--break-all line-height">
              {{content}}
          </div>
      </template>
      <div class="edit-appointment-record-btn" v-if="!interviewId || isEdit">
          <el-button @click="cancel">取消</el-button>
          <el-button
            :disabled="!interviewTime || !content"
            @click="saveInterviewRecord"
          >確定</el-button>
      </div>

      <div class="mdTxt mb-10">約訪時間</div>
      <DateTimePicker
        @changeDateTime="interviewTime = $event"
      ></DateTimePicker>
      <PopUpFrame :isOpen.sync="showCancelPopUp"
         @closePopUp="showCancelPopUp = false"
      >
        <div class="text--center mdTxt">是否刪除此筆約訪記錄？</div>
        <div class="text--center mt-30">
            <el-button @click="showCancelPopUp = false">否</el-button>
            <el-button @click="deleteInterviewRecord" type="primary">是</el-button>
        </div>
      </PopUpFrame>

      <div class="mdTxt mb-10 mt-10">約訪紀錄</div>
      <el-input type="textarea" :rows="5" placeholder="約訪通知" resize="none">
      </el-input>
      <PopUpFrame :isOpen.sync="showConfirmPopup"
        @closePopUp="closePopup">
        <div class="text--center mdTxt">{{confirmTxt}}！</div>
        <div class="text--center mt-30">
            <el-button @click="closePopup" type="primary">確定</el-button>
        </div>
      </PopUpFrame>

      <div class="edit-appointment-record-btn">
          <el-button>取消</el-button>
          <el-button :disabled="!interviewTime">確定</el-button>
      </div>
      <PopUpFrame :isOpen.sync="showFutureDateConfirmPopup"
        @closePopUp="closePopup">
        <div class="text--center mdTxt">{{confirmTxt}}！</div>
        <div class="text--center mdTxt">立即發送約訪通知？</div>
        <div class="text--center mt-30 confirm-btn">
            <el-button @click="closePopup">先不發送</el-button>
            <el-button @click="showInterviewMsgPopup = true" type="primary">傳送約訪通知</el-button>
        </div>
      </PopUpFrame>

      <InterviewMsg
        :isVisible.sync="showInterviewMsgPopup"
        :client="appointmentDetail"
        :defaultValue="interviewTime"
        @closeDialog="closePopup"
      ></InterviewMsg>
  </div>
</template>
<script lang="ts">
import { AppointmentLog } from '~/shared/models/appointment.model';
import { Vue, Component, Prop } from 'nuxt-property-decorator';
import authService from '~/shared/services/auth.service';
import { Appointment, InterviewRecord, InterviewRecordInfo } from '~/shared/models/appointment.model';
import { Vue, Component, Watch, namespace } from 'nuxt-property-decorator';
import appointmentService from '~/shared/services/appointment.service';

const appointmentStore = namespace('appointment.store');

@Component
export default class InterviewAdd extends Vue {

    @appointmentStore.State
    appointmentDetail!: Appointment;

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

    interviewTime = '';
    content = '';

    // @Prop()
    // myAppointmentReviewLogList!: AppointmentLog[];
    interviewId = '';
    appointmentId = '';
    confirmTxt: '新增成功' | '編輯成功' | '刪除成功' = '新增成功';

    // isUserLogin = false;
    isEdit = false;

    //////////////////////////////////////////////////////////////////////
    // mounted() {
    //   this.isUserLogin = authService.isUserLogin();
    // }
    showConfirmPopup = false;
    showCancelPopUp = false;
    showInterviewMsgPopup = false;
    showFutureDateConfirmPopup = false;

    defaultValue = '';

    interviewRecord!: InterviewRecord;

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

    mounted() {
        this.interviewId = this.$route.params.interviewId;
        this.appointmentId = this.$route.params.appointmentId;

        this.onAppointmentDetailChange();
    }

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

    @Watch('appointmentDetail', {immediate: true})
    onAppointmentDetailChange() {
        if (this.appointmentDetail && this.appointmentDetail.id === +this.appointmentId) {
            this.interviewRecord = this.appointmentDetail.interviewRecordDTOs
                .filter(item => item.id === +this.interviewId)[0];

                if (this.interviewRecord && this.interviewId) {
                    this.content = this.interviewRecord.content;
                    this.defaultValue = this.interviewRecord.interviewDate;
                }
        }
    }

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

    saveInterviewRecord() {
        const interviewRecordInfo: InterviewRecordInfo = {
            content: this.content,
            interviewDate: this.interviewTime,
            appointmentId: +this.appointmentId
        };
        if (!this.interviewId) {
            this.createdRecord(interviewRecordInfo);
        } else {
            const updateInterviewRecord = {
                ...interviewRecordInfo,
                id: +this.interviewId
            }
            this.updateRecord(updateInterviewRecord);
        }
    }

    private createdRecord(interviewRecordInfo) {
        appointmentService.createInterviewRecord(interviewRecordInfo).then(res => {
            this.showPopUp('新增成功');
        });
    }

  private async updateRecord(updateInterviewRecord) {
    try {
      const response = await appointmentService.updateInterviewRecord(updateInterviewRecord);
      if (response !== null) {
        this.showPopUp('編輯成功');
      } else {
        throw new Error('appointmentService.updateInterviewRecord returned null-like value.');
      }
    } catch (error) {
      console.error('An error occurred while updating interview record:', error);
      throw error;
    }
  }

    private showPopUp(confirmTxt) {
        this.confirmTxt = confirmTxt;
        this.updateAppointmentDetail(+this.appointmentId);

        if (new Date(this.interviewTime).getTime() >= new Date().getTime() && (!this.appointmentDetail.appointmentClosedInfo)) {
            this.showFutureDateConfirmPopup = true;
        } else {
            this.showConfirmPopup = true;
        }
    }

    deleteInterviewRecord() {
        appointmentService.deleteInterviewRecord(this.interviewId).then(res => {
            this.confirmTxt = '刪除成功';
            this.showConfirmPopup = true;
            this.updateAppointmentDetail(+this.appointmentId);
        });
    }

    cancel() {
        if (this.interviewId) {
           this.content = this.interviewRecord.content;
           this.defaultValue = this.interviewRecord.interviewDate;
           this.isEdit = false;
        } else {
           this.$router.go(-1);
        }
    }

    closePopup() {
        this.$router.go(-1);
    }

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

    get formatInterviewDate() {
        const interviewDate = new Date(this.interviewRecord.interviewDate);
        const hours = interviewDate.getHours();
        const minutes = interviewDate.getMinutes();
        return `${interviewDate.getFullYear()}/${interviewDate.getMonth() + 1}/${interviewDate.getDate()} ${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
    }

}
</script>

<style lang="scss" scoped>
<style lang="scss" >
.edit-appointment-record {
    padding-left : 10px;
    padding-right: 10px;
@@ -53,15 +248,32 @@
        margin-bottom  : 26px;
    }
}
.icon {
    color          : $PRIMARY_RED;
    display        : flex;
    flex           : 1;
    justify-content: flex-end;
}
.edit-appointment-record-btn{
    margin-top: 30px;
    display: flex;
    justify-content: center;
}
.el-textarea__inner {
    border: 1px solid #707070;
    padding: 10px 20px;
    font-size: 20px;
    &::placeholder {
        font-size: 20px;
    }
}
.required {
      position: relative;

      &::before {
        content: '*';
        position: absolute;
        color: #FF0000;
        transform: translate(-12px, 0);
        z-index: 5;
      }
    }
.confirm-btn{
  display: flex;
  justify-content: center;
}
</style>