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

<template>
     <div class="row parentContainer m-b-10">
        <div class="col">
            <div class="row m-l-0 m-r-0 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-2">{{ item.question_title }}</div>
                        <div class="col-1">{{ parsedAnswer === 'go_back' ? '' : item.answer }}</div>
                        <div class="col-2">{{ parsedAnswer }}</div>

                        <div class="col-1" style="display: flex; flex-wrap: nowrap; gap: 5px;" v-if="item.documentsList != null && item.documentsList.length > 1" >
                            <div
                                v-for="document in item.documentsList"
                                :key="document.id"
                                style="display: flex; flex-wrap: nowrap; gap: 5px;"
                            >
                                <div
                                v-for="file in document.files"
                                :key="file.id"
                                class="col-auto no-padding"
                                >
                                <document-file-viewer-component :file="file">
                                    <template v-slot:button>
                                    <button
                                        class="btn btn-xs btn-default bg-master-lightest b-rad-none no-border"
                                    >
                                        <i class="fa fa-download"></i>
                                    </button>
                                    </template>
                                </document-file-viewer-component>
                                </div>
                            </div>
                        </div>
                        <div class="col-1" style="display: flex; flex-wrap: nowrap; gap: 5px;" v-else>
                            <div v-if="item.documents != null" style="display: flex; flex-wrap: nowrap; gap: 5px;">
                                <div
                                    v-for="file in item.documents.files"
                                    v-bind:key="file.id"
                                    class="col-auto no-padding">
                                    <document-file-viewer-component :file="file">
                                        <template slot="button">
                                            <button class="btn btn-xs btn-default bg-master-lightest b-rad-none no-border">
                                                <i class="fa fa-download"></i>
                                            </button>
                                        </template>
                                    </document-file-viewer-component>
                                </div>
                            </div>
                        </div>
                        <div class="col-1">{{ item.time }}</div>
                        <div class="col-1">{{ item.created_at_with_time }}</div>
                        <div class="col-2">
                            <span class="bold d-inline-block">Reference: <a :href="route('booking.details', JSON.parse(item.question_metadata).marking)" target="_blank" v-if="JSON.parse(item.question_metadata)">
                                {{ JSON.parse(item.question_metadata).marking }}
                            </a></span>

                            <span class="bold d-inline-block" v-if="JSON.parse(item.question_metadata) && JSON.parse(item.question_metadata).comapny">Marking: {{ JSON.parse(item.question_metadata).company.reference }} </span>

                            <span class="bold d-inline-block" v-if="JSON.parse(item.question_metadata) && JSON.parse(item.question_metadata).payment_history">Currency Rate: {{ JSON.parse(item.question_metadata).payment_history[0].currency_rate }} </span>

                            <span class="bold d-inline-block" v-if="JSON.parse(item.question_metadata) && JSON.parse(item.question_metadata).payment_history">Total Amount: {{ JSON.parse(item.question_metadata).payment_history[0].currency.short_code}} {{((Math.round(( JSON.parse(item.question_metadata).payment_history[0].amount + Number.EPSILON) * 100) / 100)).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        computed: {
            parsedAnswer() {
                try {
                    const parsed = this.item && this.item.answer_value ? JSON.parse(this.item.answer_value) : null;
                    return parsed && parsed.text ? parsed.text : this.item.answer_value;
                } catch (error) {
                    // console.error("Error parsing JSON:", error);
                    return this.item.answer_value;
                }
            },
        },
        mixins: [componentHandler]
    }
</script>