refactor: pages component - separate vue files

Tomas

2021-12-08 b6661a090e8bcf8f45be24a01b6a7bb08e3aaff1

 PAMapp/pages/record/index.vue

@@ -12,7 +12,7 @@
    </section>

    <section class="user-reviews-content">
        <div 
        <div
            class="user-reviews-card"
            v-for="(appointmentLog, index) in myAppointmentReviewLogList"
            :key="index">
@@ -24,92 +24,25 @@
            </div>
            <div class="user-reviews-card-date">
                <div class="date">
                    <UiDateFormat 
                    <UiDateFormat
                        :date="appointmentLog.lastModifiedDate"
                        onlyShowSection="DAY" />
                </div>
                <div class="time">
                    <UiDateFormat 
                    <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 '~/assets/ts/models/appointment.model';

const roleStorage = namespace('localStorage');
<script src="./record.component.ts"></script>

@Component
export default  class Reviews extends Vue{

    today = new Date();

    @roleStorage.Getter currentRole!:string;

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

    @Action storeMyAppointmentReviewLog!: any;

    appointmentLogList: AppointmentLog[] = [];

    mounted() {
        this.storeMyAppointmentReviewLog();
    }

    
    
}
</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>
<style lang="scss">
  @import "./record.component.scss";
</style>