exchange-2.0/resources/assets/vue/components/admin-workflow/elements/QuestionAnswerComponent.vue

<template>
    <div class="row parentContainer m-b-10">
        <div class="col p-l-0">
            <div class="row m-l-15 m-r-5 p-t-10 b-a align-items-center pointer shadow bg-white rounded b-white">
                <div class="col-12">
                    <div class="row m-b-10">
                        <div class="col-1">{{ item.id }}</div>
                        <div class="col-1">{{ item.questionnaire.version }} - {{ item.questionnaire.description }}</div>
                        <div class="col-2">{{ item.question_title }}</div>
                        <div class="col-1">{{ item.answer }}</div>
                        <div class="col-1">{{ item.answer_value }}</div>
                        <div class="col-2">{{ item.source_email }}</div>
                        <div class="col-1">{{ item.time }}</div>
                        <div class="col-1">{{ item.created_at_with_time }}</div>
                        <div class="col parentContainer position-static">
                            <div class="row align-items-center justify-content-end">
                                <!-- <div class="col-auto position-static no-padding requestModal" data-type="deleteBillGroup">
                                    <div class="btn bg-grey no-border">
                                        <i class="fa fa-times text-danger"></i>
                                    </div>
                                    <modal-component class="animate__animated animate__fast animate__fadeIn" type="deleteBillGroup">
                                        <general-confirmation-form-component
                                            contentText="Are you sure you want to delete this Bill Group?"
                                            modalType="delete"
                                            class="text-center"
                                            :apiRoute="route('api.transaction.group.bill.delete', item.id)"
                                            apiMethod="delete"
                                            :section="section"
                                        >
                                        </general-confirmation-form-component>
                                    </modal-component>
                                </div> -->
                                <div class="col-auto no-padding" v-show="showExpandedIcon">
                                    <div class="btn btn-sm btn-default b-rad-none no-border" @click="expand()">
                                        <i class="fa fa-download" :class="[{'fa-angle-up': expanded}, {'fa-angle-down': !expanded}]"></i>
                                    </div>
                                </div>
                                <div class="col-auto no-padding" v-if="loading">
                                    <div class="btn btn-sm btn-default b-rad-none no-border">
                                        <span class="spinner"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-10" v-show="expanded">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <div class="row align-items-center m-l-10 m-r-10 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-2">Question Text</div>
                                        <div class="col-1">Answer Text</div>
                                        <div class="col-2">Answer Value</div>
                                        <div class="col-1">Documents Uploaded</div>
                                        <div class="col-1">Time(seconds)</div>
                                        <div class="col-1">Created DateTime</div>
                                        <div class="col-2">Order/Booking/Transfer</div>
                                    </div>
                                </div>
                            </div>
                            <list-component style="min-height: auto;" :section="section" :endpoint="route('api.questionnaires.qa.list')" :options="options">
                                <template slot="list" slot-scope="{data}">
                                    <question-answer-inner-component :data="data"></question-answer-inner-component>
                                </template>
                            </list-component>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        data(){
            return {
                section: 'qaListQuestionGroups-' +  this.data.reference + '-' + this.data.id,
                expanded: false,
                options: {
                   'order_by': {column: 'created_at', DESC: false},
                   'per_page': 20,
                },
                showExpandedIcon: false,
                loading: true
            }
        },
        watch: {
            pendingQueue(inComplete){
                if(!inComplete){
                    this.loading = false;
                }
            },
            expandedList(newValue){
                if (Array.isArray(newValue)) {
                    if(newValue.length > 0){
                        this.showExpandedIcon = true;
                    }
                }
            }
        },
        computed: {
            expandedList () {
                return this.$store.getters.getListData(this.section);
            },
            pendingQueue() {
                return this.$store.getters.isInCompleteQueue(this.section);
            }
        },
        created(){
            this.options['reference'] = this.item.reference;
            this.options['id_after'] = [this.item.id, this.item.reference, this.item.question_groups];
        },
        methods: {
            expand(){
                this.expanded = !this.expanded;
            },

        },
        mixins: [componentHandler]
    }
</script>
<style scoped>
    .spinner {
        border: 2px solid rgba(0, 0, 0, 0.1);
        border-left-color: #000;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 1s linear infinite;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    @keyframes spin {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }
</style>