mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-22 05:53:58 +00:00
Dillon Ngo
203 lines
11 KiB
Vue
203 lines
11 KiB
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-2">{{ item.id }} <br> {{ item.created_at_with_time }} <br> {{ item.source_email }}</div>
|
|
<div class="col-1">{{ item.questionnaire.version }} <br> {{ item.questionnaire.description }}</div>
|
|
<div class="col-2">{{ item.question_title }} <br> Time(s): {{ item.time }} </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-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).company">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 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 && item.question_groups.includes(item.answer_value)"> -->
|
|
<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" v-if="item.question_groups.includes(item.answer_value)"> -->
|
|
<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-1">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: 'qaListQuestions-' + 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);
|
|
},
|
|
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) {
|
|
return this.item.answer_value;
|
|
}
|
|
},
|
|
},
|
|
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>
|