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