refactor: reviews / userReviews page (add ReviewRecords feature component)

Tomas

2021-12-22 8f5057969ef0943cd4ee68fa8770aeb3e4737b67

refactor: reviews / userReviews page (add ReviewRecords feature component)

 PAMapp/components/ReviewRecords/ReviewRecords.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,110 @@
<template>
<div class="user-reviews-page">
    <section class="mdTxt">
        æŸ¥çœ‹ç´€éŒ„
    </section>

    <section class="user-reviews-header">
        <div class="header-title mdTxt">
            æ»¿æ„åº¦ç´€éŒ„
        </div>
    </section>
    <div class="user-reviews-page">

        <section class="user-reviews-content">
            <div
                class="user-reviews-card"
                v-for="(appointmentLog, index) in myAppointmentReviewLogList"
                :key="index">
                <div class="user-reviews-card-content" v-if="isUserLogin">
                    æ‚¨å°<span class="mdTxt">{{ ` ${appointmentLog.agentName} ` }}</span>做了 <UiReviewScore :score="appointmentLog.score" /> è©•åƒ¹ï¼
                </div>
                <div class="user-reviews-card-content" v-else>
                    {{ `${appointmentLog.customerName} `}} å°æ‚¨åšäº† <UiReviewScore :score="appointmentLog.score" /> è©•åƒ¹ï¼
                </div>
                <div class="user-reviews-card-date">
                    <div class="date">
                        <UiDateFormat
                            :date="appointmentLog.lastModifiedDate"
                            onlyShowSection="DAY" />
                    </div>
                    <div class="time">
                        <UiDateFormat
                            :date="appointmentLog.lastModifiedDate"
                            onlyShowSection="TIME" />
                    </div>
                </div>
            </div>
        </section>

    </div>
</div>

</template>
<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator';

import authService from '~/shared/services/auth.service';
import { AppointmentLog } from '~/shared/models/appointment.model';

@Component
export default  class ReviewRecords extends Vue{

    @Prop()
    myAppointmentReviewLogList!: AppointmentLog[];

    isUserLogin = false;

    mounted() {
      this.isUserLogin = authService.isUserLogin();
    }

}
</script>

<style lang="scss" scoped>
.user-reviews-page{
    margin-bottom:155px;
    .user-reviews-header{
        height: 43px;
        margin-top: 28px;
        display: flex;
        justify-content: center;
        border-bottom: 2px solid black;
    }
    .user-reviews-content{
        .user-reviews-card{
            display: flex;
            justify-content: space-between;
            margin-top: 26px;
            border-bottom: 1px solid #707070;
            height: 54px;
            padding-bottom: 15px;
            .user-reviews-card-content{
                width: 242px;
                padding-right:50px;
                line-height: 1.2;
                font-size: 20px;
                margin-left: 15px;
            }
            .user-reviews-card-date{
                font-size: 12px;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                margin-right: 15px;
                width:52px;
                .date{
                    margin-bottom: 2px;

                }
            }
        }
    }
}
@include desktop{
    .user-reviews-card-content{
        flex: 1;
    }
}
</style>

 PAMapp/pages/record/index.vue

@@ -1,69 +1,29 @@
<template>

<div class="user-reviews-page">
    <section class="mdTxt">
        æŸ¥çœ‹ç´€éŒ„
    </section>

    <section class="user-reviews-header">
        <div class="header-title mdTxt">
            æ»¿æ„åº¦ç´€éŒ„
<div>
    <ReviewRecords
      :myAppointmentReviewLogList="myAppointmentReviewLogList"
    ></ReviewRecords>
        </div>
    </section>

    <section class="user-reviews-content">
        <div
            class="user-reviews-card"
            v-for="(appointmentLog, index) in myAppointmentReviewLogList"
            :key="index">
            <div class="user-reviews-card-content" v-if="currentRole === 'user'">
                æ‚¨å°<span class="mdTxt">{{ ` ${appointmentLog.agentName} ` }}</span>做了 <UiReviewScore :score="appointmentLog.score" /> è©•åƒ¹ï¼
            </div>
            <div class="user-reviews-card-content" v-else>
                {{ `${appointmentLog.customerName} `}} å°æ‚¨åšäº† <UiReviewScore :score="appointmentLog.score" /> è©•åƒ¹ï¼
            </div>
            <div class="user-reviews-card-date">
                <div class="date">
                    <UiDateFormat
                        :date="appointmentLog.lastModifiedDate"
                        onlyShowSection="DAY" />
                </div>
                <div class="time">
                    <UiDateFormat
                        :date="appointmentLog.lastModifiedDate"
                        onlyShowSection="TIME" />
                </div>
            </div>
        </div>
    </section>

</div>

</template>
<script lang="ts">
import { Vue, Component, Action, State, namespace } from 'nuxt-property-decorator';
import { AppointmentLog } from '~/shared/models/appointment.model';
import { Vue, Component, Action, State } from 'nuxt-property-decorator';

const roleStorage = namespace('localStorage');
import { AppointmentLog } from '~/shared/models/appointment.model';

@Component
export default  class Reviews extends Vue{

    today = new Date();
    @State('myAppointmentReviewLogList')
    myAppointmentReviewLogList!: AppointmentLog[];

    @roleStorage.Getter currentRole!:string;
    @Action
    storeMyAppointmentReviewLog!: any;

    @State('myAppointmentReviewLogList') myAppointmentReviewLogList!: AppointmentLog[];

    @Action storeMyAppointmentReviewLog!: any;

    appointmentLogList: AppointmentLog[] = [];
    //////////////////////////////////////////////////////////////////////

    mounted() {
        this.storeMyAppointmentReviewLog();
    }



}
</script>

 PAMapp/pages/userReviewsRecord/index.vue

@@ -1,49 +1,14 @@
<template>

<div class="user-reviews-page">
    <section class="mdTxt">
        æŸ¥çœ‹ç´€éŒ„
    </section>

    <section class="user-reviews-header">
        <div class="header-title mdTxt">
            æ»¿æ„åº¦ç´€éŒ„
        </div>
    </section>

    <section class="user-reviews-content">
        <div
            class="user-reviews-card"
            v-for="(appointmentLog, index) in myAppointmentReviewLogList"
            :key="index">
            <div class="user-reviews-card-content" v-if="isUserLogin">
                æ‚¨å°<span class="mdTxt">{{ ` ${appointmentLog.agentName} ` }}</span>做了 <UiReviewScore :score="appointmentLog.score" /> è©•åƒ¹ï¼
            </div>
            <div class="user-reviews-card-content" v-else>
                {{ `${appointmentLog.clientName} `}} å°æ‚¨åšäº† <UiReviewScore :score="appointmentLog.score" /> è©•åƒ¹ï¼
            </div>
            <div class="user-reviews-card-date">
                <div class="date">
                    <UiDateFormat
                        :date="appointmentLog.lastModifiedDate"
                        onlyShowSection="DAY" />
                </div>
                <div class="time">
                    <UiDateFormat
                        :date="appointmentLog.lastModifiedDate"
                        onlyShowSection="TIME" />
                </div>
            </div>
        </div>
    </section>

<div>
    <ReviewRecords
      :myAppointmentReviewLogList="myAppointmentReviewLogList"
    ></ReviewRecords>
</div>

</template>
<script lang="ts">
import { Vue, Component, Action, State } from 'nuxt-property-decorator';

import authService from '~/shared/services/auth.service';
import { AppointmentLog } from '~/shared/models/appointment.model';

@Component
@@ -55,13 +20,9 @@
    @Action
    storeMyAppointmentReviewLog!: any;

    appointmentLogList: AppointmentLog[] = [];
    isUserLogin = false;

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

    mounted() {
      this.isUserLogin = authService.isUserLogin();
      this.storeMyAppointmentReviewLog();
    }


 PAMapp/shared/services/auth.service.ts

@@ -1,15 +1,13 @@
import { Role } from "../models/enum/role";

class AuthService {
  private idToken = localStorage.getItem('id_token');
  private currentRole = localStorage.getItem('current_role');

  isAdminLogin(): boolean {
    return this.currentRole === Role.ADMIN;
    return localStorage.getItem('current_role') === Role.ADMIN;
  }

  isUserLogin(): boolean {
    return this.currentRole === Role.USER;
    return localStorage.getItem('current_role') === Role.USER;
  }
}