sk_fems_ui commit

components/common/form/SelectBoxes.vue

@@ -0,0 +1,97 @@
+<template>
+	<v-row class="search-box" align="center" no-gutters>
+		<v-col v-if="item.label" cols="4">
+			<label for="" class="search-box-label">
+				<v-icon
+					x-small
+					:color="item.required ? '#fb8200' : 'primary'"
+					class="mr-1"
+					>mdi-record-circle</v-icon
+				>
+				{{ item.label }}
+				<span v-if="item.essential">*</span>
+			</label>
+		</v-col>
+		<v-col :cols="item.label ? 8 : ''">
+			<v-row>
+				<template v-for="(groupItem, idx) in item.groups">
+					<v-col
+						:cols="groupItem.cols"
+						:class="groupItem.class"
+						:key="'SelectBoxes' + idx"
+					>
+						<template v-if="groupItem.text">
+							<span>{{ groupItem.text }}</span>
+						</template>
+						<template v-else>
+							<component
+								:is="'SelectBox'"
+								:parentPrgmId="parentPrgmId"
+								:item="groupItem"
+								@gridEditingFinish="gridEditingFinish"
+							/>
+						</template>
+					</v-col>
+				</template>
+			</v-row>
+		</v-col>
+	</v-row>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex';
+import SelectBox from './SelectBox';
+export default {
+	props: {
+		parentPrgmId: {
+			type: String,
+			require: true,
+		},
+		item: {
+			require: true,
+		},
+		bindingData: {
+			type: String,
+			require: false,
+		},
+		// gridEditingFinish: {
+		//   // type: function
+		//   // require: true
+		// }
+	},
+	components: {
+		SelectBox,
+	},
+	data() {
+		return {};
+	},
+	computed: {
+		...mapState({
+			rowGridSelectData(state) {
+				if (!this.bindingData) {
+					return state.pageData[this.parentPrgmId]['rowGridSelectData'];
+				} else {
+					return state.pageData[this.parentPrgmId][this.bindingData][
+						'rowGridSelectData'
+					];
+				}
+			},
+		}),
+	},
+	created() {},
+	methods: {
+		...mapMutations({ setPageData: 'setPageData' }),
+		gridEditingFinish(data) {
+			const newData = {
+				[data.columnName]: data.value,
+			};
+			this.setPageData({
+				rowGridSelectData: Object.assign(this.rowGridSelectData, newData),
+			});
+			this.$emit('gridEditingFinish', data);
+		},
+	},
+};
+</script>
+
+<style></style>