Foundation for order entry

htdocs/ViewOrderMenu.vue

@@ -0,0 +1,97 @@
+<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>