pui9-datatables 1.16.4

package/src/components/desktop/toolbar/grid-configuration/PuiGridConfBtns.vue

@@ -0,0 +1,99 @@
+<template>
+	<div ref="btn" class="pui-toolbar__multiBtn ml-2" :class="compClass">
+		<div>
+			<v-btn
+				class="elevation-0 pui-toolbar__btn pui-toolbar__miniBtn"
+				:class="compClass"
+				@click.native.stop="toggleConfiguration()"
+				:title="getTitleBtn1"
+			>
+				<v-icon small>fa fa-table</v-icon>
+			</v-btn>
+			<div class="pui-toolbar__multiBtnSeparator">|</div>
+			<v-btn
+				class="elevation-0 pui-toolbar__btn pui-toolbar__superMiniBtn"
+				:class="compClass"
+				@click.native.stop="states.active = !states.active"
+				:title="getTitleBtn2"
+			>
+				<v-icon v-if="!states.active" small>fa fa-angle-down</v-icon>
+				<v-icon v-else small>fa fa-angle-up</v-icon>
+			</v-btn>
+		</div>
+		<pui-grid-conf-dialog
+			ref="dialog"
+			:columns="columns"
+			:modelName="modelName"
+			:modelNameSuffix="modelNameSuffix"
+			:position="panel.position"
+			v-if="mounted"
+			v-show="states.active"
+		></pui-grid-conf-dialog>
+	</div>
+</template>
+
+<script>
+import PuiToolbarBtnMixin from '../../../../mixins/PuiToolbarBtnMixin';
+import PuiGridConfDialog from './PuiGridConfDialog';
+
+export default {
+	name: 'PuiGridConfigBtns',
+	mixins: [PuiToolbarBtnMixin],
+	components: {
+		PuiGridConfDialog
+	},
+	props: {
+		columns: {
+			type: Array,
+			required: true
+		},
+		modelName: {
+			type: String
+		},
+		modelNameSuffix: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			idTool: 'configuration',
+			mounted: false,
+			panel: {
+				position: {}
+			},
+			//the filter object in db
+			model: null
+		};
+	},
+	watch: {
+		'states.active'(val) {
+			this.$puiEvents.$emit(`onPui-upperToolbarDialogActive-${this.modelName}`, val);
+		}
+	},
+	mounted() {
+		this.calculateDialogPosition();
+		this.mounted = true;
+
+		this.$puiEvents.$on(`onPui-apply-configuration-${this.modelName}`, () => {
+			this.states.applied = true;
+		});
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-apply-configuration-${this.modelName}`);
+	},
+	methods: {
+		toggleConfiguration() {
+			this.$refs.dialog.toggleConfiguration();
+		}
+	},
+	computed: {
+		getTitleBtn1() {
+			return this.$t('puidatatables.titleBtnEnableDisableConfig');
+		},
+		getTitleBtn2() {
+			return this.$t('puidatatables.titleBtnShowHideConfig');
+		}
+	}
+};
+</script>