exchange-2.0/resources/assets/vue/components/admin-workflow/sections/QuestionAnswerSectionComponent.vue

<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row">
                        <div class="col-md-4">
                            <validation-wrapper-component selectable :validator="$v.filterQuestionnaireSet">
                                <label>Questionnaire Set</label>
                                <selectable-component :endpoint="route('api.questionnaires.list')" :section="section + 'QuestionnaireSet'" valueColumn="id" :labelColumn="['version', 'name']" v-model="filterQuestionnaireSet"></selectable-component>
                            </validation-wrapper-component>
                        </div>
                        <div class="col-md-4">
                            <validation-wrapper-component selectable :validator="$v.filterQuestionGroup">
                                <label>Question Group</label>
                                <selectable-hard-coded-component section="questionGroupSelectable" :selectable-options="questionGroups" v-model="filterQuestionGroup"></selectable-hard-coded-component >
                            </validation-wrapper-component>
                        </div>
                        <div class="col-md-4">
                            <validation-wrapper-component selectable :validator="$v.filterUserId">
                                <label>Users</label>
                                <selectable-component :endpoint="route('api.account.user.list') + '?filters=' + JSON.stringify(userListOptions)" :section="section + 'UserList'" valueColumn="id" :labelColumn="['name', 'email']" v-model="filterUserId"></selectable-component>
                            </validation-wrapper-component>
                        </div>
                    </div>
                    <div class="row m-t-10">
                        <div class="col-md-4">
                            <validation-wrapper-component :validator="$v.filterStartDate">
                                <label class="all-caps">Start Date</label>
                                <date-picker-component v-model.lazy="filterStartDate"></date-picker-component>
                            </validation-wrapper-component>
                        </div>
                        <div class="col-md-4">
                            <validation-wrapper-component :validator="$v.filterEndDate">
                                <label class="all-caps">End Date</label>
                                <date-picker-component v-model.lazy="filterEndDate"></date-picker-component>
                            </validation-wrapper-component>
                        </div>
                    </div>
                    <div class="row justify-content-end m-t-10">
                        <div class="col-auto p-l-0">
                            <open-link-in-new-tab-component custom-class="btn btn-sm b-rad-none fs-14" :url="route('api.questionnaires.qa.export') + '?filters=' + JSON.stringify(this.options)" :is-url-protected="true" :onClick="exportAction">
                            <i class="fa fa-download lh-40"></i> Download
                            </open-link-in-new-tab-component>
                        </div>
                        <div class="col-auto p-l-0">
                            <div class="btn b-rad-none" @click="resetSarch">
                                <i class="fa fa-refresh lh-40"></i> Clear
                            </div>
                        </div>
                        <div class="col-auto p-l-0">
                            <div class="btn btn-primary b-rad-none" @click="onSelected">
                                <i class="fa fa-search lh-40"></i> Search
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center m-t-10 p-t-10 p-b-10 b-t b-grey muted all-caps fs-10">
                        <div class="col-1">Id</div>
                        <div class="col-1">Version/Question Set</div>
                        <div class="col-2">Question Text</div>
                        <div class="col-1">Answer Text</div>
                        <div class="col-1">Answer Value</div>
                        <div class="col-2">Source Email</div>
                        <div class="col-1">Time(seconds)</div>
                        <div class="col-1">Created Date</div>
                    </div>
                </div>
                <list-component style="min-height: 600px;" :key="currentKey" :section="'list' + section" :endpoint="route('api.questionnaires.qa.list')" :options="options">
                    <template slot="list" slot-scope="{data}">
                        <question-answer-component :key="data.id" :data="data"></question-answer-component>
                    </template>
                </list-component>
            </div>
        </div>
    </div>
</template>

<script>
    import { required } from "vuelidate/lib/validators";
    export default {
        props: {
            section:{
                type: String,
                required: true
            },
            questionGroups: {
                type: Array,
                required: true
            },
        },
        data(){
            return {
                filterUserId: "",
                filterQuestionGroup: "",
                filterQuestionnaireSet: "",
                filterStartDate: "",
                filterEndDate: "",
                userListOptions: {
                    'type_in': this.$store.getters.isSuperAdmin ? [1, 2] : [2],
                },
                options: {
                   'per_page': 10,
                   'order_by': {column: 'created_at', DESC: false},
                   'with_answers': "",
                },
                currentKey: 1,
            }
        },
        created(){
            this.submit(route('api.company.list')  + '?filters=' + JSON.stringify({'business_type': 3, 'status_in': [1, 2, 0]}), 'get', 'transactionGroupsListPaymentSection', false, false)
        },
        validations: {
            filterUserId: {},
            filterQuestionGroup: {},
            filterQuestionnaireSet: {},
            filterStartDate: {},
            filterEndDate: {},
        },
        methods: {
            onSelected(userId){
                this.updateOptions();
                this.currentKey+=1;
                // this.updateList();
            },
            updateOptions(){
                if(this.filterUserId){
                    this.options['user_id'] = this.filterUserId;
                }
                if(this.filterQuestionGroup){
                    this.options['with_answers'] = this.filterQuestionGroup;
                }
                if(this.filterQuestionnaireSet){
                    this.options['has_questionnaire'] = this.filterQuestionnaireSet;
                }
                if(this.filterStartDate){
                    this.options['start_date'] = this.filterStartDate;
                }
                if(this.filterEndDate){
                    this.options['end_date'] = this.filterEndDate;
                }
            },
            exportAction(){
                this.updateOptions();
                return route('api.questionnaires.qa.export') + '?filters=' + JSON.stringify(this.options);
            },
            resetSarch() {
                this.filterUserId = "",
                this.filterQuestionGroup = "",
                this.filterQuestionnaireSet = "",
                this.filterStartDate = "",
                this.filterEndDate = "",
                this.options['with_answers'] = "";
                delete this.options['user_id'];
                delete this.options['has_questionnaire'];
                delete this.options['start_date'];
                delete this.options['end_date'];
                this.currentKey+=1;
            },
            // updateList(){
            //     this.$refs.questionsAnswersList.updateFilters({'per_page': 10, 'has_questionnaire_group_in':['feedback'], 'user_id': this.filterUserId, order_by: {column: 'created_at', DESC: false}});
            // },
        },
    }
</script>