Merge branch 'refactor/separate-vue' of ssh://192.168.0.10:29418/pcalife/PA...

Tomas

2021-12-09 ac235850a9287dae6977c964213176fa7c86b140

 PAMapp/components/QuickFilter/QuickFilterSelector.vue

@@ -6,79 +6,132 @@
            </span>
            <span
                class="smTxt_bold text--primary"
                v-if="questionOption.name === 'style'"
            >可複選</span>
                v-if="questionOption.name === 'communicationStyles'"
            >(最多選擇兩種)</span>
            <span
                class="smTxt_bold text--primary"
                v-if="questionOption.name === 'satisfaction'"
                v-if="questionOption.name === 'avgScore'"
            >選取星星</span>
        </div>

        <div class="quickBtnBlock" v-if="questionOption.name === 'style'">
            <el-checkbox-group class="pam-quickFilter-checkbox" v-model="pickedItem.style">
        <div class="quickBtnBlock" v-if="questionOption.name === 'communicationStyles'">
            <el-checkbox-group
                class="pam-quickFilter-checkbox"
                v-model="pickedItem.communicationStyles"
            >
                <el-checkbox
                    v-for="(i, index) in questionOption.detail"
                    :key="index"
                    :label="i.value"
                    :name="i.value"
                    :class="i.className"
                    @change="selectedCommunicationStyles"
                ></el-checkbox>
            </el-checkbox-group>
        </div>

        <div class="quickBtnBlock" v-else-if="questionOption.name === 'gender'">
            <el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.gender">
            <el-radio-group
                class="pam-quickFilter-radio"
                v-model="pickedItem.gender"
            >
                <el-radio
                    v-for="(i, index) in questionOption.detail"
                    :key="index"
                    :label="i.value"
                    :class="i.className"
                ></el-radio>
            </el-radio-group>
        </div>

        <div class="quickBtnBlock" v-else-if="questionOption.name === 'loginState'">
            <el-radio-group class="pam-quickFilter-radio" v-model="pickedItem.loginState">
                <el-radio
                    v-for="(i, index) in QuestionOption.detail"
                    :key="index"
                    :label="i.value"
                    :class="i.className"
                ></el-radio>
                >{{i.name}}</el-radio>
            </el-radio-group>
        </div>

        <div v-else>
            <el-rate class="pam-quickFilter-rate" v-model="pickedItem.satisfaction"></el-rate>
            <el-rate
                class="pam-quickFilter-rate"
                v-model="pickedItem.avgScore"
            ></el-rate>
        </div>

        <div class="text--center mt-30">
            <el-button
                class="pam-select-confirm"
                type="primary"
                @click="confirm"
                :disabled="isDisabled"
            >確認</el-button>
        </div>

    </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync, Prop, Watch } from 'nuxt-property-decorator';
import { QuestionOption, selectedItem } from '~/pages/quickFilter/index.vue';
import { Vue, Component, Prop, Watch, Emit } from 'nuxt-property-decorator';
import { FastQueryParams } from '~/assets/ts/models/fast-query-params.model';
import { Selected } from '~/assets/ts/models/selected.model';
import { QuestionOption } from '~/assets/ts/models/question-option.model';

@Component
export default class QuickFilterDrawer extends Vue {

    pickedItem: selectedItem = {
        style: [],
        onlineState: '',
    pickedItem: FastQueryParams = {
        communicationStyles: [],
        status: '',
        gender: '',
        satisfaction: 0
        avgScore: 0
    }

    @PropSync('drawerVisible') isVisible!: boolean;
    @Prop() selectedItem!: selectedItem;
    @Prop() questionOption!: QuestionOption;
    @Prop() isOpenQuestionPopUp!: boolean;
    @Prop() confirmItem!: Selected[];

    @Watch('selectedItem', {deep: true, immediate: true}) watchSelected(newValue: selectedItem) {
        if (newValue) {
            this.pickedItem = JSON.parse(JSON.stringify(this.selectedItem))
    @Watch('isOpenQuestionPopUp', {immediate: true}) onPopUpChange() {
        this.pickedItem = {
            communicationStyles: this.communicationStyles,
            status: '',
            gender: this.gender,
            avgScore: this.avgScore
        }
    }

    get gender() {
        const filter = this.confirmItem.filter(item => item.option === 'gender');
        return filter.length > 0 ? filter[0].value : '';
    }

    get avgScore() {
        const filter = this.confirmItem.filter(item => item.option === 'avgScore');
        return filter.length > 0 ? filter[0].value : 0;
    }

    get communicationStyles() {
        return this.confirmItem
            .filter(item => item.option === 'communicationStyles')
            .map(item => item.value);
    }

    get isDisabled() {
        const name = this.questionOption.name;
        return name === 'gender' && !this.pickedItem[name]
            || name === 'avgScore' && !this.pickedItem[name]
            || name === 'communicationStyles' && !this.pickedItem[name].length
    }

    selectedCommunicationStyles() {
        if (this.pickedItem.communicationStyles.length > 2) {
            this.pickedItem.communicationStyles.shift();
        }
    }

    @Emit('confirm')
    confirm() {
        const name = this.questionOption.name;
        return {
            option: this.questionOption.name,
            value: this.pickedItem[name]
        }
    }

}

</script>

<style lang="scss" scoped>
@@ -88,26 +141,6 @@
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;

        .quickBtn {
            width: 48%;
            height: 110px;
            text-align: center;
            box-shadow: 0 0 6px #22222229;
            padding: auto 0 auto 0;
            border-radius: 10px;
            color: $PRIMARY_BLACK;

            &:hover,&:focus {
                color: $PRIMARY_BLACK;
                border-color: $PRIMARY_WHITE;
                background-color: $PRIMARY_WHITE;
            }
        }

        .quickBtn+.quickBtn {
            margin-left: 0;
        }
    }

</style>
</style>