nuVistA/htdocs/ViewOrderDialogGeneric.vue

119 lines
5.0 KiB
Vue
Raw Normal View History

2023-04-24 23:10:19 -04:00
<template>
<div v-if="prompts">
<div class="row">
<template v-for="item in prompts">
<template v-if="(item.hid == '1') || (item.type == 'H')"></template>
<div v-else-if="(odslct) && (odslct[item.id]) && (odslct[item.id].items)" class="col-12">
<div class="card mb-3">
<div class="card-header">{{item.prompt.replace(/\:\s*$/, '')}}</div>
<ul class="list-group list-group-flush" style="max-height: 25vh; overflow-y: auto;"><li v-for="item in odslct[item.id].items" class="list-group-item"><input class="form-check-input me-1" type="checkbox" /> {{item}}</li></ul>
<div v-if="item.help" class="card-footer form-text">{{item.help}}</div>
</div>
</div>
<div v-else-if="item.type == 'P'" class="col-12">
<div class="card mb-3">
<ViewLocationLookup :client="client" :dfn="dfn" :label="item.prompt.replace(/\:\s*$/, '')" />
<div v-if="item.help" class="form-text">{{item.help}}</div>
</div>
</div>
<div v-else-if="item.type == 'Y'" class="col col-12 col-md-6 col-lg-4 col-xl-3">
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" role="switch" v-model="inputs[item.id]" />
<label class="form-check-label">{{item.prompt.replace(/\:\s*$/, '')}}</label>
<div v-if="item.help" class="form-text">{{item.help}}</div>
</div>
</div>
<div v-else-if="item.type == 'R'" class="col col-12 col-md-6 col-lg-4 col-xl-3">
<div class="mb-3">
<label class="form-label">{{item.prompt.replace(/\:\s*$/, '')}}</label>
<DateTimePicker dateonly v-model="inputs[item.id]" />
<div v-if="item.help" class="form-text">{{item.help}}</div>
</div>
</div>
<div v-else-if="item.type == 'N'" class="col col-12 col-md-6 col-lg-4 col-xl-3">
<div class="form-floating mb-3">
<input type="number" class="form-control" :placeholder="item.default || ' '" v-model="inputs[item.id]" />
<label>{{item.prompt.replace(/\:\s*$/, '')}}</label>
<div v-if="item.help" class="form-text">{{item.help}}</div>
</div>
</div>
<div v-else-if="item.type == 'W'" class="col-12">
<div class="card mb-3" style="background-color: #fdfbd7;">
<div class="card-header">{{item.prompt.replace(/\:\s*$/, '')}}</div>
<div class="card-body" style="font-family: monospace; white-space: pre;">{{item.detail}}</div>
</div>
</div>
<div v-else class="col col-12">
<div class="form-floating mb-3">
<input type="text" class="form-control" :placeholder="item.default || ' '" :disabled="item.type == 'P'" v-model="inputs[item.id]" />
<label>{{item.prompt.replace(/\:\s*$/, '')}}</label>
<div v-if="item.help" class="form-text">{{item.help}}</div>
</div>
</div>
</template>
</div>
<div v-if="(odslct) && (odslct.Info) && (odslct.Info.text)" class="card mb-3" style="background-color: #fdfbd7;"><div class="card-body" style="font-family: monospace; white-space: pre;">{{odslct.Info.text}}</div></div>
<div class="btn-group mb-3">
<button type="button" class="btn btn-primary" @click="e => $emit('submit', output)">Submit</button>
<button type="button" class="btn btn-danger" @click="e => $emit('cancel')">Cancel</button>
</div>
</div>
</template>
<script>
import ViewLocationLookup from './ViewLocationLookup.vue';
import DateTimePicker from './DateTimePicker.vue';
export default {
components: {
ViewLocationLookup, DateTimePicker
},
props: {
client: Object,
ien: String,
dfn: String,
location_ien: String,
dlgname: Object,
dlgdef: Object,
modelValue: Object
},
emits: [
'submit',
'cancel',
'update:modelValue'
],
data() {
return {
prompts: null,
inputs: null,
odslct: null
};
},
computed: {
output() {
if((this.dlgdef) && (this.prompts) && (this.inputs)) {
return this.dlgdef.reduce((acc, val) => (acc['"' + val.promptIEN + '","1"'] = this.inputs[val.promptID] || this.prompts[val.promptID].idflt, acc), {});
}
}
},
created() {
this.$watch(
() => (this.client, this.ien, this.dlgdef, {}),
async () => {
var bldqrsp, loadrsp;
if((this.client) && (this.ien) && (this.dlgdef) && (bldqrsp = (await this.client.ORWDXM1_BLDQRSP(this.ien, '^^^^^^;;;^^^^', 0, 0))[0])) {
this.inputs = this.dlgdef.reduce((acc, val) => (acc[val.promptID] = null, acc), {});
this.prompts = await client.ORWDXM_PROMPTS(this.dlgname.BaseDialogIEN);
if(this.prompts) Object.assign(this.inputs, this.prompts.reduce((acc, val) => (acc[val.id] = val.default, acc), {}));
if((bldqrsp.ResponseID) && (bldqrsp.ResponseID != '0')) {
loadrsp = await this.client.ORWDX_LOADRSP(bldqrsp.ResponseID, 0, 0);
if(loadrsp) Object.assign(this.inputs, loadrsp.reduce((acc, val) => (acc[val.promptID] = val.iValue, acc), {}));
}
} else this.prompts = this.inputs = null;
},
{ immediate: true }
);
}
};
</script>