98 lines
3.3 KiB
Vue
98 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<template v-if="bare">
|
||
|
|
<template v-if="selection">
|
||
|
|
<button v-if="selection.display_text" class="list-group-item list-group-item-action" @click="reselect">{{selection.display_text}} [ {{selection.type}} | {{selection.IEN}} ] ({{selection.col}}, {{selection.row}})</button>
|
||
|
|
<button v-if="selection.displayText" class="list-group-item list-group-item-action" @click="reselect">{{selection.displayText}} [ {{selection.type}} | {{selection.IEN}} ] | {{selection.windowFormId}} | {{selection.displayGroupId}}</button>
|
||
|
|
<ViewOrderDialog v-if="(dfn) && (selection.type) && ((selection.type == 'D') || (selection.type == 'Q'))" :client="client" :ien="selection.IEN" :form_id="selection.windowFormId" :dfn="dfn" />
|
||
|
|
<ViewOrderMenu v-else :key="selkey" :client="client" :ien="selection.IEN" :dfn="dfn" :bare="true" />
|
||
|
|
</template>
|
||
|
|
<div v-else-if="(columns) && (columns.length > 0)" class="list-group-item container">
|
||
|
|
<div class="row">
|
||
|
|
<div v-for="column in columns" class="col">
|
||
|
|
<div class="list-group">
|
||
|
|
<template v-for="item in column.values">
|
||
|
|
<button v-if="!item.displayonly" class="list-group-item list-group-item-action" @click="selection = item">{{item.display_text}} [{{item.type}} {{item.IEN}}] ({{item.col}}, {{item.row}})</button>
|
||
|
|
<div v-else class="list-group-item bg-light displayonly" :class="{ italic: item.displayonly == '1', bold: item.displayonly == '2' }">{{item.display_text}}</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<template v-else-if="(topmenu) && (topmenu.length > 0)">
|
||
|
|
<template v-for="item in topmenu">
|
||
|
|
<button v-if="item.displayText" class="list-group-item list-group-item-action" @click="selection = item">{{item.displayText}} [{{item.type}} {{item.IEN}}] | {{item.windowFormId}} | {{item.displayGroupId}}</button>
|
||
|
|
<hr v-else />
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
<div v-else class="list-group">
|
||
|
|
<button class="list-group-item list-group-item-action active" @click="reselect">Order entry</button>
|
||
|
|
<ViewOrderMenu :key="selkey" :client="client" :ien="ien" :dfn="dfn" :bare="true" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.displayonly {
|
||
|
|
cursor: default;
|
||
|
|
white-space: pre;
|
||
|
|
}
|
||
|
|
.displayonly.italic {
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
.displayonly.bold {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
hr + hr {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { groupByArray } from './util.mjs';
|
||
|
|
|
||
|
|
import ViewOrderDialog from './ViewOrderDialog.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ViewOrderMenu',
|
||
|
|
components: {
|
||
|
|
ViewOrderDialog
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
client: Object,
|
||
|
|
ien: String,
|
||
|
|
dfn: String,
|
||
|
|
bare: {
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
topmenu: null,
|
||
|
|
submenu: null,
|
||
|
|
selection: null,
|
||
|
|
selkey: 0
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
columns() {
|
||
|
|
return (this.submenu) && (this.submenu.children.length) ? groupByArray(this.submenu.children, 'col').sort((a, b) => a.col - b.col).map(col => (col.values.sort((a, b) => a.row - b.row), col)) : [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
ien: {
|
||
|
|
async handler(value) {
|
||
|
|
if(this.bare) {
|
||
|
|
if(value) this.submenu = await client.ORWDXM_MENU(value);
|
||
|
|
else this.topmenu = await this.client.ORWDX_WRLST();
|
||
|
|
}
|
||
|
|
}, immediate: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
reselect() {
|
||
|
|
this.selkey++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|