Merge branch 'sit' into uat

wayne

2022-02-17 a3716f72066d25d745f4d5103ff23a553c3e102b

 PAMapp/components/Interview/InterviewCard.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,176 @@
<template>
    <div>
      <template v-if="!interviewList.length">
          <span class="record-card record-card--empty" style="display:flex">
            ç„¡ç´„訪紀錄
          </span>
      </template>

      <template v-else>
        <div class="interview--future">
          <div class="record-card mb-10"
                v-for="(item, index) in futureList"
                :key="index + 'feature'"
                @click="editInterview(item)"
          >
            <div class="remind-container">
              <div class="remind-date mr-10">
                <div class="mb-3 smTxt bgc-primary-red date-year">
                  <div class="mb-3 mt-2">
                    <UiDateFormat
                            class="date bold"
                            :date="item.interviewDate"
                            onlyShowSection="YEAR" />
                  </div>
                </div>
              <div class="p mt-5">
                <UiDateFormat
                            class="mt-5 line-space time"
                            :date="item.interviewDate"
                            onlyShowSection="DATE" />
              </div>
            </div>
            <div class="remind-content-txt">
              <div style="display:flex">
                <UiDateFormat
                            class="mt-5 line-space mb-3 time"
                            :date="item.interviewDate"
                            onlyShowSection="TIME" />
              </div>
                <div class="interview-card-content">{{item.content}}</div>
            </div>

          </div>
            </div>
        </div>

        <section class="interview--past" v-if="pastList.length">
            <div class="record-card mb-10"
                v-for="(item, index) in pastList"
                :key="index + 'past'"
                @click="editInterview(item)"
            >

              <div class="remind-container">
                <div class="remind-date mr-10">
                  <div class="mb-3 smTxt bgc-primary-red date-year">
                    <div class="mb-3 mt-2">
                      <UiDateFormat
                            class=" date"
                            :date="item.interviewDate"
                            onlyShowSection="YEAR" />
                    </div>
                    </div>
                  <div class="p mt-5">
                    <UiDateFormat
                            class="mt-5 line-space time"
                            :date="item.interviewDate"
                            onlyShowSection="DATE" />
                  </div>
                </div>
                <div class="remind-content-txt">
                  <div style="display:flex">
                    <UiDateFormat
                            class="mt-5 line-space mb-3 time"
                            :date="item.interviewDate"
                            onlyShowSection="TIME" />
                  </div>
                    <div class="interview-card-content">{{item.content}}</div>
                </div>
              </div>
            </div>
        </section>
      </template>
    </div>
</template>

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

@Component
export default class InterviewCard extends Vue {

    @Prop()
    interviewList!: InterviewRecord[];

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

    appointmentId!: number;

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

    @Watch('interviewList', {immediate: true})
    onInterviewListChange() {
        if (this.interviewList.length > 0) {
            this.futureList = this.interviewList
            .filter(item => new Date(item.interviewDate).getTime() >= new Date().getTime())
            .sort((preItem, nextItem) => +new Date(nextItem.interviewDate) - +new Date(preItem.interviewDate));
          this.pastList = this.interviewList
            .filter(item =>  new Date(item.interviewDate).getTime() < new Date().getTime())
            .sort((preItem, nextItem) => +new Date(nextItem.interviewDate) - +new Date(preItem.interviewDate));
        }

    }

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

<style lang="scss" scoped>
.interview--future{
    .record{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
}
.interview--past {
    margin-top: 10px;
    border-top: 1px solid #CCCCCC;
    padding-top: 17px;
    margin-top: 17px;
}
.record-card {
    height: 64px;
    margin-bottom: 20px;
    .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;
  }
}
.interview-card-content{
 overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        word-break: break-all;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
}
.line-space{
    letter-spacing: 1px;
}
</style>