update TODO#134465 約訪紀錄(查看更多)

Mila

2022-01-19 e471f81737e1e113f913ac615a0a368ab3ca2cd1

 PAMapp/components/Appointment/AppointmentInterviewList.vue

@@ -1,82 +1,20 @@
<template>
    <div>
      <div class="interview__header">
          <div class="mdTxt">約訪紀錄</div>
          <div class="pam-link-button--lg"
          @click="addInterview">+新增</div>
      </div>

      <template v-if="!interviewList.length">
          <div class="record-card record-card--empty">
            無約訪紀錄
          </div>
      </template>

      <template v-if="interviewList.length">
        <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">
                    <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>{{item.content}}</span>
                </div>
            </div>
        <div class="interview__header">
            <div class="mdTxt">約訪紀錄</div>
            <div class="pam-link-button--lg"
            @click="addInterview">+新增</div>
        </div>
        <InterviewCard :interviewList="displayList.slice(0, 3)"></InterviewCard>

        <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">
                    <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>{{item.content}}</span>
                </div>
            </div>
        <section class="text--right mt-30" v-if="interviewList.length > 3">
                <div class="pam-link-button--lg" @click="readMoreBtn">展開看更多</div>
        </section>

        <section class="more-log-action">
                <div class="pam-link-button--lg">展開看更多</div>
        </section>
      </template>
    </div>
</template>

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

@Component
@@ -84,13 +22,8 @@
  @Prop()
  interviewList!: InterviewRecord[];

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

  appointmentId!: string;

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

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

@@ -103,10 +36,9 @@
  @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());
          this.displayList = this.interviewList
            .map((i) => ({ ...i, sortDate: new Date(i.interviewDate)}))
            .sort((preItem, nextItem) => +nextItem.sortDate - +preItem.sortDate);
      }
  }

@@ -116,9 +48,8 @@
    this.$router.push(`/appointment/${this.appointmentId}/interview/new`);
  }

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

}
@@ -129,49 +60,5 @@
  display        : flex;
  justify-content: space-between;
  margin-bottom  : 10px;
}
.interview--future{
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 17px;
    margin-bottom: 17px;
    .record{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
}
.record-card {
    height: 62px;
    border: 1px solid #707070;
    border-radius: 5px;
    display: flex;
    border-bottom: 1px solid #000;
    .record-card-date{
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 10px;
    }
    .record-card-content{
        height: 42px;
        margin-top: 10px;
        margin-right: 10px;
        line-height: 1.2;
    }
  &.record-card--empty {
    align-items     : center;
    background-color: #fff;
    color           : $MID_GREY;
    justify-content : center;
  }
}
.line-space{
    letter-spacing: 1px;
}
.more-log-action{
    margin-top: 30px;
    display: flex;
    justify-content:flex-end;
}
</style>