From 18098111cc905e88524e7d9ce788b742637e0824 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期二, 14 十二月 2021 16:02:04 +0800
Subject: [PATCH] refactor: 快速篩選 1. 整理 methods 順序 2. 整理 interface、const
---
PAMapp/components/QuickFilter/QuickFilterSelector.vue | 13 --
PAMapp/pages/quickFilter/index.vue | 107 ++++++++------------------
PAMapp/components/QuickFilter/QuickFilterConsultantList.vue | 17 ++--
PAMapp/assets/ts/models/quickFilter.model.ts | 24 ++++++
PAMapp/store/localStorage.ts | 2
PAMapp/assets/ts/api/consultant.ts | 10 --
PAMapp/assets/ts/const/quickFilter-questionList.ts | 36 +++++++++
7 files changed, 107 insertions(+), 102 deletions(-)
diff --git a/PAMapp/assets/ts/api/consultant.ts b/PAMapp/assets/ts/api/consultant.ts
index 2cf639b..d3462a4 100644
--- a/PAMapp/assets/ts/api/consultant.ts
+++ b/PAMapp/assets/ts/api/consultant.ts
@@ -5,6 +5,7 @@
import { UserSetting } from '../models/account.model';
import { Consultant } from '~/assets/ts/models/consultant.model';
import { http } from '../services/httpClient';
+import { FastQueryParams } from '../models/quickFilter.model';
// 憿批恥��(TODO: OTP隤����� ���蝙�)
export function login(user: any) {
@@ -34,7 +35,7 @@
// 敹恍�祟�
export function fastQuery(data: FastQueryParams) {
- return http.post('/consultant/fastQuery', data)
+ return http.post<Consultant[]>('/consultant/fastQuery', data).then(res => res.data);
}
// ������
@@ -138,13 +139,6 @@
Authorization: 'Bearer ' + localStorage.getItem('id_token')
}
return http.put('/appointment', editAppointmentParams, {headers});
-}
-
-export interface FastQueryParams {
- gender : string,
- communicationStyles: string[],
- avgScore : number,
- status : string
}
export interface AppointmentRequests {
diff --git a/PAMapp/assets/ts/const/quickFilter-questionList.ts b/PAMapp/assets/ts/const/quickFilter-questionList.ts
new file mode 100644
index 0000000..ea35dca
--- /dev/null
+++ b/PAMapp/assets/ts/const/quickFilter-questionList.ts
@@ -0,0 +1,36 @@
+import { QuestionOption } from "../models/quickFilter.model";
+
+export const questionList: QuestionOption[] = [
+ {
+ name: 'gender',
+ title: '憿批��批',
+ detail: [
+ { name: '���', value: 'male', className: 'btn_man'},
+ { name: '憟單��', value: 'female', className: 'btn_woman'}
+ ],
+ type: 'radio'
+ },
+ // { TODO:���遛��漲
+ // name: 'avgScore',
+ // title: '憿批�遛��漲',
+ // detail: [],
+ // type: ''
+ // },
+ {
+ name: 'communicationStyles',
+ title: '皞�◢�',
+ detail: [
+ { value: '雓寞��祕', className: 'btn_owl'},
+ { value: '��翰銝餃��', className: 'btn_tiger'},
+ { value: '���', className: 'btn_koala'},
+ { value: '�隢◢頞�', className: 'btn_peacock'}
+ ],
+ type: 'checkbox'
+ },
+ // {
+ // name: 'status',
+ // title: '銝�����',
+ // detail: [],
+ // type: 'radio'
+ // }
+];
\ No newline at end of file
diff --git a/PAMapp/assets/ts/models/quickFilter.model.ts b/PAMapp/assets/ts/models/quickFilter.model.ts
new file mode 100644
index 0000000..9445659
--- /dev/null
+++ b/PAMapp/assets/ts/models/quickFilter.model.ts
@@ -0,0 +1,24 @@
+export interface QuestionOption {
+ title: string;
+ detail: Detail[];
+ type: string;
+ name: string;
+}
+
+interface Detail {
+ value: string;
+ name?: string;
+ className: string;
+}
+
+export interface FastQueryParams {
+ gender : string,
+ communicationStyles: string[],
+ avgScore : number,
+ status : string
+}
+
+export interface Selected {
+ option: string;
+ value: any;
+}
\ No newline at end of file
diff --git a/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue b/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
index d76e739..4e722f1 100644
--- a/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
+++ b/PAMapp/components/QuickFilter/QuickFilterConsultantList.vue
@@ -96,6 +96,15 @@
endYPosition = 0;
hideReviews = hideReviews ;
+ openPopUp(txt: string) {
+ this.popUpTxt = txt;
+ this.isVisiblePopUp = true;
+ }
+
+ showAgentDetail(agentNo: string): void {
+ this.$router.push(`/agentInfo/${agentNo}`);
+ }
+
moveStart(event: TouchEvent) {
this.startPosition = event.changedTouches[0].clientX;
this.startYPosition = event.changedTouches[0].clientY;
@@ -124,14 +133,6 @@
(this.$refs.carouselRef as ElCarousel).prev();
}
- openPopUp(txt: string) {
- this.popUpTxt = txt;
- this.isVisiblePopUp = true;
- }
-
- showAgentDetail(agentNo: string): void {
- this.$router.push(`/agentInfo/${agentNo}`);
- }
}
</script>
diff --git a/PAMapp/components/QuickFilter/QuickFilterSelector.vue b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
index 558e338..e6800fb 100644
--- a/PAMapp/components/QuickFilter/QuickFilterSelector.vue
+++ b/PAMapp/components/QuickFilter/QuickFilterSelector.vue
@@ -66,13 +66,10 @@
<script lang="ts">
import { Vue, Component, Prop, Watch, Emit } from 'nuxt-property-decorator';
-import { FastQueryParams } from '~/assets/ts/api/consultant';
-import { QuestionOption } from '~/pages/quickFilter/index.vue';
import { hideReviews } from '~/assets/ts/const/hide-reviews';
+import { FastQueryParams, QuestionOption, Selected } from '~/assets/ts/models/quickFilter.model';
@Component
export default class QuickFilterDrawer extends Vue {
-
-
pickedItem: FastQueryParams = {
communicationStyles: [],
status: '',
@@ -80,7 +77,7 @@
avgScore: 0
}
hideReviews = hideReviews ;
-
+
@Prop() questionOption!: QuestionOption;
@Prop() isOpenQuestionPopUp!: boolean;
@Prop() confirmItem!: Selected[];
@@ -131,12 +128,6 @@
value: this.pickedItem[name]
}
}
-
-}
-
-export interface Selected {
- option: string;
- value: any;
}
</script>
diff --git a/PAMapp/pages/quickFilter/index.vue b/PAMapp/pages/quickFilter/index.vue
index 2e35267..7c8764f 100644
--- a/PAMapp/pages/quickFilter/index.vue
+++ b/PAMapp/pages/quickFilter/index.vue
@@ -66,10 +66,10 @@
<script lang="ts">
import { Vue, Component, namespace } from 'nuxt-property-decorator';
-import { FastQueryParams } from '~/assets/ts/api/consultant';
import { Consultant } from '~/assets/ts/models/consultant.model';
-import { Selected } from '~/components/QuickFilter/QuickFilterSelector.vue';
import { fastQuery } from '~/assets/ts/api/consultant';
+import { questionList } from '~/assets/ts/const/quickFilter-questionList';
+import { FastQueryParams, QuestionOption, Selected } from '~/assets/ts/models/quickFilter.model';
const localStorage = namespace('localStorage');
@Component
@@ -81,41 +81,9 @@
consultantList: Consultant[] = [];
questionOption = {};
confirmItem: Selected[] = [];
- questionList: QuestionOption[] = [
- {
- name: 'gender',
- title: '憿批��批',
- detail: [
- { name: '���', value: 'male', className: 'btn_man'},
- { name: '憟單��', value: 'female', className: 'btn_woman'}
- ],
- type: 'radio'
- },
- // { TODO:���遛��漲
- // name: 'avgScore',
- // title: '憿批�遛��漲',
- // detail: [],
- // type: ''
- // },
- {
- name: 'communicationStyles',
- title: '皞�◢�',
- detail: [
- { value: '雓寞��祕', className: 'btn_owl'},
- { value: '��翰銝餃��', className: 'btn_tiger'},
- { value: '���', className: 'btn_koala'},
- { value: '�隢◢頞�', className: 'btn_peacock'}
- ],
- type: 'checkbox'
- },
- // {
- // name: 'status',
- // title: '銝�����',
- // detail: [],
- // type: 'radio'
- // }
- ];
+ questionList = questionList;
+ //////////////// lifecycle ////////////////
mounted() {
if (this.quickFilterSelectedData && this.quickFilterSelectedData.length > 0) {
this.confirmItem = this.quickFilterSelectedData;
@@ -123,26 +91,8 @@
}
}
- gender(): string {
- const filter = this.confirmItem.filter(item => item.option === 'gender').map(i => i.value);
- return filter.length === 0 ? '' : filter[0];
- }
- avgScore(): number {
- const filter = this.confirmItem.filter(item => item.option === 'avgScore').map(i => i.value);
- return filter.length === 0 ? '' : filter[0];
- }
-
- communicationStyles(): string[] {
- return this.confirmItem.filter(item => item.option === 'communicationStyles').map(i => i.value);
- }
-
- isActive(name: string) {
- return name === 'gender' && !!this.gender()
- || name === 'avgScore' && !!this.avgScore()
- || name === 'communicationStyles' && !!this.communicationStyles().length
- }
-
+ //////////////////////////////////////////
openPopUp(question: QuestionOption) {
this.questionOption = question;
this.isOpenQuestionPopUp =true;
@@ -159,7 +109,29 @@
this.isOpenQuestionPopUp = false;
}
- setConfirmData(event: Selected) {
+ isActive(name: string) {
+ return name === 'gender' && !!this.gender()
+ || name === 'avgScore' && !!this.avgScore()
+ || name === 'communicationStyles' && !!this.communicationStyles().length
+ }
+
+
+ //////////////// private ////////////////
+ private gender(): string {
+ const filter = this.confirmItem.filter(item => item.option === 'gender').map(i => i.value);
+ return filter.length === 0 ? '' : filter[0];
+ }
+
+ private avgScore(): number {
+ const filter = this.confirmItem.filter(item => item.option === 'avgScore').map(i => i.value);
+ return filter.length === 0 ? '' : filter[0];
+ }
+
+ private communicationStyles(): string[] {
+ return this.confirmItem.filter(item => item.option === 'communicationStyles').map(i => i.value);
+ }
+
+ private setConfirmData(event: Selected) {
if (event.option === 'communicationStyles') {
this.filterCommunicationStyles(event);
} else {
@@ -168,7 +140,7 @@
}
}
- filterCommunicationStyles(event: Selected) {
+ private filterCommunicationStyles(event: Selected) {
const confirmValue = this.confirmItem
.filter(item => item.option === 'communicationStyles')
.map(i => i.value);
@@ -188,7 +160,7 @@
}
}
- getRecommendList() {
+ private getRecommendList() {
const data: FastQueryParams = {
gender: this.gender(),
communicationStyles: this.communicationStyles(),
@@ -196,25 +168,12 @@
status: ''
}
- fastQuery(data).then((res) => {
- this.consultantList = res.data;
+ fastQuery(data).then((consultantList) => {
+ this.consultantList = consultantList;
this.storageQuickFilter(JSON.stringify(this.confirmItem))
})
}
-}
-
-export interface QuestionOption {
- title: string;
- detail: Detail[];
- type: string;
- name: string;
-}
-
-interface Detail {
- value: string;
- name?: string;
- className: string;
}
</script>
@@ -240,7 +199,7 @@
.quickBtnBlock {
display: flex;
width: 100%;
- height: 132px;
+ // height: 132px;
flex-wrap: wrap;
justify-content: space-between;
diff --git a/PAMapp/store/localStorage.ts b/PAMapp/store/localStorage.ts
index 84f5bb0..e31bf7c 100644
--- a/PAMapp/store/localStorage.ts
+++ b/PAMapp/store/localStorage.ts
@@ -1,6 +1,6 @@
-import { Selected } from '~/components/QuickFilter/QuickFilterSelector.vue';
import { Module, Mutation, VuexModule ,Action } from 'vuex-module-decorators';
import { Role } from '~/assets/ts/models/enum/Role';
+import { Selected } from '~/assets/ts/models/quickFilter.model';
@Module
export default class LocalStorage extends VuexModule {
id_token = localStorage.getItem('id_token');
--
Gitblit v1.8.0