<template>
|
<div>
|
<template v-if="clients.length > 0">
|
<ClientCard
|
v-for="(client) in clients"
|
:key="client.id"
|
:client="client"
|
></ClientCard>
|
</template>
|
<template v-else>
|
<div class="client-list--empty">
|
<div class="smTxt txt">{{ noDataPlaceholder }}</div>
|
</div>
|
</template>
|
</div>
|
</template>
|
|
<script lang='ts'>
|
import { Vue, Component, Prop } from 'nuxt-property-decorator';
|
|
import { Appointment } from '~/shared/models/appointment.model';
|
|
@Component
|
export default class ClientList extends Vue {
|
@Prop() clients!: Appointment[];
|
@Prop() title!: string;
|
|
//////////////////////////////////////////////////////////////////////
|
|
get noDataPlaceholder(): string {
|
return this.title === 'reservedList'
|
? '您目前無已預約客戶'
|
: '您目前無已聯絡客戶';
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.client-list--empty {
|
background-color: $PRIMARY_WHITE;
|
width: 100%;
|
height: 100px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.txt {
|
color: $PRUDENTIAL_GREY;
|
margin-left: 17px;
|
}
|
}
|
</style>
|
