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 Version</label>
                                <selectable-component :endpoint="route('api.questionnaires.list')" :section="section + 'QuestionnaireSet'" valueColumn="id" :labelColumn="['name', 'version']" v-model="filterQuestionnaireSet"></selectable-component>
                            </validation-wrapper-component>
                        </div>
                        <div class="col-md-4">
                            <validation-wrapper-component selectable :validator="$v.filterQuestionGroup">
                                <label>Question Groups</label>
                                <select-component :options="questionGroups" v-model="filterQuestionGroup"></select-component>
                                <!-- <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>
                    <loading-component style="height: 200px; top: 0;" color="success" v-show="questionGroups.length === 0"></loading-component>
                    <div class="row justify-content-end m-t-10" v-show="questionGroups.length > 0 && !$store.getters.isLoading(section + 'ListQuestionGroups')">
                        <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.with.groups') + '?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 DateTime</div>
                    </div>
                </div>
                <list-component style="min-height: 600px;" :key="currentKey" :section="section + 'ListQuestionGroups'" :endpoint="route('api.questionnaires.qa.list')" :options="options" v-if="questionGroups.length > 0">
                    <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
            },
        },
        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: true},
                   'with_answers': [],
                },
                currentKey: 1,
                questionGroups: [],
            }
        },
        created(){
            this.fetchQuestionnaireSets();
        },
        validations: {
            filterUserId: {},
            filterQuestionGroup: {},
            filterQuestionnaireSet: {},
            filterStartDate: {},
            filterEndDate: {},
        },
        methods: {
            fetchQuestionnaireSets(){
                this.submit(route('api.questionnaires.list') +'?filters=' + JSON.stringify({ 'per_page': 10, order_by: {column: 'id', DESC: true} }), 'get', this.section, false, false)
            },
            successHandler(response){
                this.questionGroups = response.payload.data[0].group;
                this.options.with_answers = this.questionGroups;
            },
            onSelected(userId){
                this.updateOptions();
                this.currentKey+=1;
            },
            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.with.groups') + '?filters=' + JSON.stringify(this.options);
            },
            resetSarch() {
                this.filterUserId = "",
                this.filterQuestionGroup = "",
                this.filterQuestionnaireSet = "",
                this.filterStartDate = "",
                this.filterEndDate = "",
                this.options['with_answers'] = this.questionGroups;
                delete this.options['user_id'];
                delete this.options['has_questionnaire'];
                delete this.options['start_date'];
                delete this.options['end_date'];
                this.currentKey+=1;
            },
        },
    }
</script>