Merge branch 'Phase3' of ssh://dev.pollex.com.tw:29418/pcalife/PAM into Phase3

Jack

2022-01-18 dc0e7366e96ce773ae1690f6db28e03a684bb45e

 PAMapp/components/Appointment/AppointmentInterviewList.vue

@@ -13,27 +13,57 @@
      </template>

      <template v-if="interviewList.length">
        <div class="interview--future">
        <div
            v-for="(item, index) in futureList"
            :key="index + 'feature'"
            class="interview--future"
            @click="editInterview(item)"
        >

            <div class="record-card">
                <div class="record-card-date">
                    <span class="bold">01/10</span>
                    <span class="mt-5 line-space">09:00</span>
                    <div>
                        <UiDateFormat
                            class="date bold"
                            :date="item.interviewDate"
                            onlyShowSection="DAY" />
                    </div>
                    <div>
                        <UiDateFormat
                            class="time mt-5 line-space"
                            :date="item.interviewDate"
                            onlyShowSection="TIME" />
                    </div>
                </div>
                <div class="record-card-content">
                    <span>預計提醒客戶約在公司樓下咖啡廳，推薦熊安心醫療險與防疫保單</span>
                    <span>{{item.content}}</span>
                </div>
            </div>
        </div>

        <section class="interview--past">
        <section
            class="interview--past"
            v-for="(item, index) in pastList"
            :key="index + 'past'"
            @click="editInterview(item)"
        >
            <div class="record-card">
                <div class="record-card-date">
                    <span class="bold">01/08</span>
                    <span class="mt-5 line-space">09:00</span>
                    <div>
                        <UiDateFormat
                            class="date bold"
                            :date="item.interviewDate"
                            onlyShowSection="DAY" />
                    </div>
                    <div>
                        <UiDateFormat
                            class="time mt-5 line-space"
                            :date="item.interviewDate"
                            onlyShowSection="TIME" />
                    </div>
                </div>
                <div class="record-card-content">
                    <span>王聰明回信提供電話號碼，去電推薦預約時間</span>
                    <span>{{item.content}}</span>
                </div>
            </div>
        </section>
@@ -46,18 +76,49 @@
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';
import { Vue, Component, Prop, Watch, Mutation } from 'nuxt-property-decorator';
import { InterviewRecord } from '~/shared/models/appointment.model';

@Component
export default class AppointmentInterviewList extends Vue {
  @Prop()
  interviewList!: InterviewRecord[];

  interviewList = [];
  @Mutation
  updateInterviewRecord!: (data: InterviewRecord) => void;

  appointmentId!: string;

  futureList: InterviewRecord[] = [];
  pastList: InterviewRecord[] = [];

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

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

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

  @Watch('interviewList', {immediate: true})
  updateInterviewList() {
      if (this.interviewList && this.interviewList.length > 0) {
          this.futureList = this.interviewList
            .filter(item => new Date(item.interviewDate).getTime() >= new Date().getTime())
          this.pastList = this.interviewList
            .filter(item =>  new Date(item.interviewDate).getTime() < new Date().getTime());
      }
  }

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

  addInterview(): void {
    const appointmentId = this.$route.params.appointmentId;
    this.$router.push(`/appointment/${appointmentId}/interview/new`);
    this.$router.push(`/appointment/${this.appointmentId}/interview/new`);
  }

  editInterview(interviewRecord) {
    this.updateInterviewRecord(interviewRecord);
    this.$router.push(`/appointment/${this.appointmentId}/interview/${interviewRecord.id}`);
  }

}