From bb682522ce2e18f7c67f087620134d3aadba559d Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期二, 16 十一月 2021 21:00:50 +0800
Subject: [PATCH] update 預約清單: 使用 store 存放 AppointmentList

---
 PAMapp/components/Client/ClientCard.vue |   74 ++++++++++++++++++++++++------------
 1 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue
index 477cf7f..2a2eef9 100644
--- a/PAMapp/components/Client/ClientCard.vue
+++ b/PAMapp/components/Client/ClientCard.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <el-row type="flex" class="rowStyle">
+        <el-row type="flex" class="rowStyle" @click.native="openDetail">
             <el-col :xs="5" :sm="3">
                 <el-avatar
                     :size="50"
@@ -32,7 +32,6 @@
             <el-col class="flex-column contactInfo" :xs="5" :sm="6">
                 <div class="smTxt_bold cursor--pointer"
                     :class="client.communicateStatus"
-                    @click="openDetail"
                 >{{isReserved ? '撌脤���' : '撌脰蝯�'}}
                 </div>
                 <div class="date xsTxt text--mid_grey">{{date}}</div>
@@ -51,26 +50,38 @@
                 <p>憪��{client.name}}</p>
                 <p>�閰梧�{client.phone}}</p>
                 <p>Email嚗{client.email}}</p>
-                <p>�批嚗{client.gender === 'male' ? '���' : '憟單��'}}</p>
+                <p>�批嚗{gender}}</p>
                 <p>撟湧翩嚗{client.age}}</p>
                 <p>�璆哨�{client.job}}</p>
-                <p>��瘙�{client.requirements}}</p>
-                <p>��蝯⊥�挾銝�嚗{hopeContactTime}}</p>
+                <p>��瘙�{client.requirement.replace(',', '��')}}</p>
+                <p v-for="(item, index) in hopeContactTime" :key="index">��蝯⊥�挾{{index + 1 | formatNumber}}嚗{item}}</p>
                 <div class="mt-30 text--center" v-if="isReserved">
-                    <el-button>璅酉�撌脤��蝯�</el-button>
+                    <el-button @click="markAppointment">璅酉�撌脤��蝯�</el-button>
                 </div>
+
             </div>
         </Ui-Dialog>
     </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'nuxt-property-decorator';
-import { ClientInfo } from '~/assets/ts/api/consultant';
+import { Vue, Component, Prop, Mutation, Action } from 'nuxt-property-decorator';
 import { isMobileDevice } from '~/assets/ts/device';
+import { ClientInfo, markAsContact } from '~/assets/ts/api/appointment';
 
-@Component
+@Component({
+    filters: {
+        formatNumber(index: number) {
+            if (index) {
+                const upperNumber = ['�', '銝�', '鈭�', '銝�', '���', '鈭�', '�', '銝�', '�', '銋�', '���']
+                return upperNumber[index];
+            }
+        }
+    }
+})
 export default class ClientList extends Vue {
+    @Action updateMyAppointment!: (data: ClientInfo) => void
+
     @Prop() client!: ClientInfo;
     isVisibleDialog = false;
     width = '';
@@ -79,27 +90,26 @@
         return this.client.requirement.split(',');
     }
 
-    get hopeContactTime() {
-        return this.client.hopeContactTime.slice(1, this.client.hopeContactTime.length - 1)
-    }
-    get time() {
-        if (this.client.appointmentDate) {
-            const newDate = new Date(this.client.appointmentDate);
-            const hours = newDate.getHours();
-            const minutes = newDate.getMinutes();
-            return `${hours} : ${minutes}`
+    get gender() {
+        if (this.client.gender) {
+            return this.client.gender === 'male' ? '���' : '憟單��';
         }
         return ''
     }
 
+    get hopeContactTime() {
+        const contactList = this.client.hopeContactTime.split("'").map(item => item.slice(0, item.length));
+        return contactList.filter(item => !!item)
+    }
+
+    get time() {
+        const formatDate = (this.$options.filters as any).formatDate(this.client.appointmentDate);
+        return formatDate.split(' ')[1]
+    }
+
     get date() {
-        if (this.client.appointmentDate) {
-            const newDate = new Date(this.client.appointmentDate);
-            const month = newDate.getMonth();
-            const date = newDate.getDate();
-            return `${month} / ${date}`
-        }
-        return ''
+        const formatDate = (this.$options.filters as any).formatDate(this.client.appointmentDate);
+        return formatDate.split(' ')[0]
     }
 
     get isReserved() {
@@ -111,6 +121,20 @@
         this.isVisibleDialog = true;
     }
 
+    markAppointment() {
+        markAsContact(this.client.id).then(data => {
+            // TODO: 閬敺����� updated client 鞈�� - Ben 2021/11/16
+
+            const updatedClient = {...this.client};
+            updatedClient.communicateStatus = 'contacted';
+            updatedClient.appointmentDate = new Date();
+
+            this.updateMyAppointment(updatedClient);
+            this.isVisibleDialog = false;
+
+        })
+    }
+
 }
 </script>
 

--
Gitblit v1.8.0