mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-23 06:24:03 +00:00
Dillon Ngo
195 lines
10 KiB
Vue
195 lines
10 KiB
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>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<validation-wrapper-component selectable :validator="$v.filterQuestion">
|
|
<label class="all-caps">Question</label>
|
|
<!-- <select-component :options="['1688_login_issue', '1688_login_issue_others', '1688_proceed_order_issue', '1688_proceed_order_issue_others', '1688_login_successful_cannot_verify', '1688_login_successful_cannot_verify_others', 'approve_po_reject', 'approve_po_reject_others', 'approve_po_edit_po_issue', 'approve_po_edit_po_issue_others', 'fill_po_edit_issue', 'fill_po_issue_others']" v-model="filterQuestion"></select-component> -->
|
|
<selectable-component :endpoint="route('api.questionnaires.q.list', 0) + '?filters=' + JSON.stringify({'is_admin_filter': true, order_by: {column: 'question_number', DESC: false}})" :section="section + 'QuestionsFiltering'" valueColumn="question_number" :labelColumn="['question_number']" v-model="filterQuestion"></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 class="col-md-4">
|
|
<validation-wrapper-component :validator="$v.filterAnswerText">
|
|
<label class="all-caps">Answer Text</label>
|
|
<input type="text" class="form-control" v-model.lazy="filterAnswerText">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-10">
|
|
<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>
|
|
<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="!$store.getters.isLoading(section + 'ListQuestions')">
|
|
<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.without.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-2">Id</div>
|
|
<div class="col-1">Version/Question Set</div>
|
|
<div class="col-2">Question Text / Time(seconds)</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-2">Order/Booking/Transfer</div>
|
|
</div>
|
|
</div>
|
|
<list-component style="min-height: 600px;" :key="currentKey" :section="section + 'ListQuestions'" :endpoint="route('api.questionnaires.qa.list')" :options="options">
|
|
<template slot="list" slot-scope="{data}">
|
|
<question-answer-2-component :key="data.id" :data="data"></question-answer-2-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: "",
|
|
filterQuestion: "",
|
|
filterQuestionGroup: "",
|
|
filterQuestionnaireSet: "",
|
|
filterStartDate: "",
|
|
filterEndDate: "",
|
|
filterAnswerText: "",
|
|
userListOptions: {
|
|
'type_in': this.$store.getters.isSuperAdmin ? [1, 2] : [2],
|
|
},
|
|
options: {
|
|
'per_page': 10,
|
|
'order_by': {column: 'created_at', DESC: true},
|
|
},
|
|
currentKey: 1,
|
|
questionGroups: [],
|
|
}
|
|
},
|
|
created(){
|
|
this.fetchQuestionnaireSets();
|
|
},
|
|
validations: {
|
|
filterUserId: {},
|
|
filterQuestion: {},
|
|
filterQuestionGroup: {},
|
|
filterQuestionnaireSet: {},
|
|
filterStartDate: {},
|
|
filterEndDate: {},
|
|
filterAnswerText: {},
|
|
},
|
|
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['question_group_in'] = this.questionGroups;
|
|
},
|
|
onSelected(userId){
|
|
this.updateOptions();
|
|
this.currentKey+=1;
|
|
},
|
|
updateOptions(){
|
|
// if(this.filterUserId){
|
|
// this.options['user_id'] = this.filterUserId;
|
|
// }
|
|
if(this.filterQuestion){
|
|
this.options['question_in'] = [this.filterQuestion];
|
|
}
|
|
if(this.filterQuestionGroup){
|
|
this.options['question_group_in'] = [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;
|
|
}
|
|
if(this.filterAnswerText || this.filterUserId){
|
|
this.options['answer_like_with_user_id'] = [this.filterAnswerText, this.filterUserId];
|
|
}
|
|
},
|
|
exportAction(){
|
|
this.updateOptions();
|
|
return route('api.questionnaires.qa.export.without.groups') + '?filters=' + JSON.stringify(this.options);
|
|
},
|
|
resetSarch() {
|
|
this.filterUserId = "",
|
|
this.filterQuestion = "",
|
|
this.filterQuestionGroup = "",
|
|
this.filterQuestionnaireSet = "",
|
|
this.filterStartDate = "",
|
|
this.filterEndDate = "",
|
|
this.filterAnswerText = "",
|
|
// delete this.options['user_id'];
|
|
delete this.options['question_in'];
|
|
delete this.options['has_questionnaire'];
|
|
delete this.options['start_date'];
|
|
delete this.options['end_date'];
|
|
delete this.options['answer_like_with_user_id'];
|
|
delete this.options['question_group_in'];
|
|
// this.options['question_group_in'] = this.questionGroups;
|
|
this.currentKey+=1;
|
|
},
|
|
},
|
|
}
|
|
</script>
|