pui9-datatables 1.16.4

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

@@ -0,0 +1,640 @@
+<template>
+	<div>
+		<v-layout justify-center>
+			<!-- dialogo para guardar una configuración de grid nueva -->
+			<pui-save-config-dialog v-if="dialogs.edit === true" :modelName="modelName"></pui-save-config-dialog>
+			<!-- dialogo alerta borrado de configuracion -->
+			<pui-modal-dialog
+				v-if="dialogs.deleteConfigAlert"
+				:cancelText="$t('form.cancel')"
+				:okText="$t('form.ok')"
+				:titleText="$t('puidatatables.grid_configuration')"
+				:messageText="`${$t('puidatatables.sure_delete')} ${model.configuration.name}`"
+				:dialogName="`deleteConfigAlert-${this.modelName}`"
+			></pui-modal-dialog>
+			<!-- dialogo alerta cambios no guardados (salta al cambiar de configuracion habiendo sido editada) -->
+			<pui-modal-dialog
+				v-if="dialogs.unsavedChanges"
+				:cancelText="$t('form.cancel')"
+				:okText="$t('puidatatables.discard_changes')"
+				:titleText="$t('puidatatables.unsaved_changes')"
+				:messageText="$t('puidatatables.unsaved_changes.desc')"
+				:dialogName="`unsavedChanges-${this.modelName}`"
+			></pui-modal-dialog>
+			<!-- dialogo para seleccionar columnas visibles -->
+			<v-dialog persistent eager v-model="dialogs.columnSelector" max-width="850px">
+				<v-card flat style="border-radius: 6px">
+					<v-card-title>
+						<div class="puiDialog__title pl-2">{{ $t('puidatatables.select_columns') }}</div>
+					</v-card-title>
+					<v-card-text>
+						<pui-multi-select
+							v-if="dialogs.columnSelector"
+							:items="columns"
+							:trackItemsToSelect="true"
+							:itemsToSelect="visibleColumns"
+							itemValue="name"
+							itemText="title"
+							:textSelected="this.$t('puidatatables.visible')"
+							:textAvailable="this.$t('puidatatables.hidden')"
+							:heightList="columnPickerHeight"
+							v-model="selectedColumns"
+							:flat="true"
+						></pui-multi-select>
+					</v-card-text>
+					<v-card-actions class="pl-3 pr-3 pb-2">
+						<v-btn text outlined @click="dialogs.columnSelector = false" class="elevation-0">{{ $t('form.cancel') }}</v-btn>
+						<v-spacer />
+						<v-btn color="primary" @click="applyColumnConfig()" class="elevation-0">{{ $t('form.apply') }}</v-btn>
+					</v-card-actions>
+				</v-card>
+			</v-dialog>
+		</v-layout>
+		<!-- dialogo principal para seleccionar y guardar configuración activa -->
+		<div class="pui-dialog pui-dialog--conf elevation-5" ref="dialog" @click.stop>
+			<v-card-text class="ma-0 pt-2 pl-2 pr-2 pb-0">
+				<v-layout :ref="'header'" wrap class="mb-3">
+					<v-toolbar class="elevation-0 pui-dialog__bar" height="50">
+						<v-toolbar-title class="pui-dialog__title pui-dialog__margin">{{ $t('puidatatables.configure') }}</v-toolbar-title>
+						<v-btn @click="undo()" class="pui-dialog__toolbarBtn elevation-0">
+							<v-icon small>fa fa-undo-alt</v-icon>
+						</v-btn>
+						<v-spacer></v-spacer>
+						<v-btn class="pui-dialog__toolbarBtn elevation-0" @click="dialogs.edit = true" :title="$t('puidatatables.save_changes')">
+							<v-icon small>fa fa-save</v-icon>
+						</v-btn>
+					</v-toolbar>
+				</v-layout>
+				<v-autocomplete
+					class="puiConf-dialog__select"
+					:class="{ 'puiConf-dialog--unsaved': updated }"
+					:items="modelGridConfigurations"
+					v-model="configurationId"
+					:disabled="configurationSelectorDisabled"
+					solo
+					flat
+					:return-object="false"
+					item-value="id"
+					:item-text="(item) => item.configuration.name"
+					clearable
+				>
+					<template v-slot:selection="data">
+						<div style="min-width: 25px">
+							<span class="puiConf-dialog__dot" v-if="updated === true">.</span>
+							<v-icon v-else-if="data.item.id === -1" class="puiConf-dialog__icon">fa fa-lock</v-icon>
+							<v-icon v-else class="puiConf-dialog__icon pointer" @click.stop="dialogs.deleteConfigAlert = true">fa fa-trash</v-icon>
+						</div>
+						<v-list-item-content class="pt-2 pb-2" :class="{ 'pl-3': updated }" style="max-width: 87%">
+							<v-list-item-title v-html="data.item.configuration.name"></v-list-item-title>
+						</v-list-item-content>
+					</template>
+				</v-autocomplete>
+			</v-card-text>
+			<v-card-actions class="pl-1 pr-1 pb-2 pt-0" :ref="'btnBar'">
+				<v-btn text outlined @click="showColumnDialog()" class="elevation-0">{{ $t('puidatatables.select_columns') }}</v-btn>
+				<v-spacer />
+				<v-btn v-if="updated === true" color="primary" @click="save()" class="elevation-0">{{ $t('form.update') }}</v-btn>
+			</v-card-actions>
+		</div>
+	</div>
+</template>
+
+<script>
+import PuiGridFormMethodsMixin from '../../../../mixins/PuiGridFormMethodsMixin';
+import PuiToolbarDialogMixin from '../../../../mixins/PuiToolbarDialogMixin';
+import PuiModelConfigurationMixin from '../../../../mixins/PuiModelConfigurationMixin';
+import PuiSaveConfigDialog from './PuiSaveConfigDialog';
+
+export default {
+	name: 'PuiGridConfDialog',
+	components: {
+		PuiSaveConfigDialog
+	},
+	mixins: [PuiGridFormMethodsMixin, PuiToolbarDialogMixin, PuiModelConfigurationMixin],
+	props: {
+		columns: {
+			type: Array,
+			required: true
+		},
+		position: {
+			type: Object
+		},
+		modelName: {
+			type: String,
+			required: true
+		},
+		modelNameSuffix: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			updated: false,
+			selectedColumns: [],
+			notifyChange: true,
+			configurationId: null,
+			configurationSelectorDisabled: false,
+			dialogs: {
+				unsavedChanges: false,
+				edit: false,
+				deleteConfigAlert: false,
+				columnSelector: false
+			},
+			width: 350,
+			modelDependencyName: 'puiusermodelconfig',
+			method: 'create',
+			modelTemplate: {
+				name: null,
+				description: null,
+				isdefault: false,
+				columns: [],
+				grouped: false,
+				pinColumn: false,
+				columnSearch: false,
+				rows: 20,
+				order: []
+			},
+			visibleColumns: null
+		};
+	},
+	created() {
+		this.setGridModel();
+		this.setVisibleColumns(this.columns);
+		this.subscribeToOtherGridConfigurations();
+		this.subscribeToModalDialogsEvents();
+	},
+	mounted() {
+		this.calculatePosition();
+	},
+	updated() {
+		this.calculatePosition();
+	},
+	destroyed() {
+		this.$puiEvents.$off(`onPui-apply-sorting-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-apply-sorting-dataTable-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-changeRowNum-dataTable-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-groupColumn-dataTable-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-fixedColumn-dataTable-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-selectItem-dataTable-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-pageChange-dataTable-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-clearSelection-dataTable-${this.modelName}${this.modelNameSuffix}`);
+		this.$puiEvents.$off(`onPui-colReorder-dataTable-${this.modelName}${this.modelNameSuffix}`);
+		this.unsubscribeToModalDialogEvent(`pui-modalDialog-deleteConfigAlert-${this.modelName}`);
+		this.unsubscribeToModalDialogEvent(`pui-modalDialog-unsavedChanges-${this.modelName}`);
+	},
+	computed: {
+		columnPickerHeight() {
+			return window.innerHeight > 600 ? 300 : 225;
+		},
+		onPuiModelsLoadedAndSaved() {
+			return this.$store.state.modelsLoadedAndSaved;
+		}
+	},
+	watch: {
+		onPuiModelsLoadedAndSaved() {
+			if (this.modelGridConfigurations === undefined) {
+				this.modelGridConfigurations = this.$store.getters.getGridConfigurationsForModel(this.modelName);
+				this.setConfiguration();
+			}
+		},
+		configurationId(newId, prevIdConfig) {
+			if (this.avoidWatch === true) {
+				this.avoidWatch = false;
+				return;
+			}
+			//this means not a valid configuration
+			if (isNaN(parseInt(newId))) {
+				this.$parent.states.applied = false;
+				this.model.edited = false;
+				this.method = 'create';
+				return;
+			}
+			//this means, jumping from one unsaved configuration to another
+			//we show the unsaved changes dialog
+			if (this.model.edited === true && prevIdConfig !== -1 && prevIdConfig !== null) {
+				if (this.dialogs.unsavedChanges === true || this.dialogs.edit === true) {
+					this.dialogs.unsavedChanges = false;
+				} else {
+					this.dialogs.unsavedChanges = true;
+				}
+				this.configurationUnsavedId = prevIdConfig;
+				return;
+			}
+			//this means, jumping without unsaved changes to another configuration
+			if (this.configurationSelectorDisabled === false && this.dialogs.unsavedChanges === false) {
+				this.model.edited = false;
+				this.setModelConfigurationById(newId, prevIdConfig);
+			}
+			this.dialogs.unsavedChanges = false;
+		}
+	},
+	methods: {
+		setNameAndDescription(configId) {
+			const models = this.$store.getters.getGridConfigurationsForModel(this.modelName);
+			for (let i = 0, length = models.length; i < length; i++) {
+				if (models[i].id === configId) {
+					this.model.configuration.name = models[i].configuration.name;
+					this.model.configuration.description = models[i].configuration.description;
+					this.model.configuration.isdefault = models[i].configuration.isdefault;
+					return;
+				}
+			}
+		},
+		subscribeToModalDialogsEvents() {
+			this.$puiEvents.$on(`pui-modalDialog-deleteConfigAlert-${this.modelName}-ok`, () => {
+				this.dialogs.deleteConfigAlert = false;
+				this.deleteConfig();
+			});
+			this.$puiEvents.$on(`pui-modalDialog-deleteConfigAlert-${this.modelName}-cancel`, () => {
+				this.dialogs.deleteConfigAlert = false;
+			});
+			this.$puiEvents.$on(`pui-modalDialog-unsavedChanges-${this.modelName}-ok`, () => {
+				this.dialogs.unsavedChanges = false;
+				this.discardChangesAndGoForward();
+			});
+			this.$puiEvents.$on(`pui-modalDialog-unsavedChanges-${this.modelName}-cancel`, () => {
+				this.cancelChangeUnsavedConfig();
+				this.dialogs.unsavedChanges = false;
+			});
+		},
+		unsubscribeToModalDialogEvent(topicPrefix) {
+			this.$puiEvents.$off(`${topicPrefix}-ok`);
+			this.$puiEvents.$off(`${topicPrefix}-cancel`);
+		},
+		onSaveError() {
+			this.model.configuration = JSON.parse(this.model.configuration);
+		},
+		onConfDeleted(configPk) {
+			this.$store.commit('deleteGridConfiguration', { model: this.modelName, configuration: configPk });
+			this.modelGridConfigurations = this.$store.getters.getGridConfigurationsForModel(this.modelName);
+			this.configurationSelectorDisabled = false;
+			if (this.modelGridConfigurations.length === 0) {
+				this.method = 'create';
+				this.configurationSelectorDisabled = true;
+			} else if (configPk.id === this.model.id) {
+				this.model = this.$store.getters.getDefaultGridConfiguration(this.modelName);
+				this.configurationId = this.model.id;
+			}
+		},
+		cancelChangeUnsavedConfig() {
+			if (this.toggling === true) {
+				this.dialogs.unsavedChanges = false;
+				this.toggling = false;
+				return;
+			}
+			this.configurationId = this.configurationUnsavedId;
+			this.model.edited = true;
+		},
+		discardChangesAndGoForward() {
+			this.model.edited = false;
+			if (this.toggling === true) {
+				this.toggleConfiguration();
+				this.toggling = false;
+			} else {
+				this.setModelConfigurationById(this.configurationId, this.configurationUnsavedId);
+			}
+			this.dialogs.unsavedChanges = false;
+		},
+		setModelConfigurationById(idConfig, prevIdConfig, configuration) {
+			if (configuration) {
+				this.model = configuration;
+			}
+			for (let i = 0, length = this.modelGridConfigurations.length; i < length; i++) {
+				const config = this.modelGridConfigurations[i];
+				if (config.id === idConfig) {
+					//here we clone the configuration object in order to do the undo action later on
+					this.model = this.cloneConfiguration(config);
+					this.setVisibleColumns(this.model.configuration.columns);
+					this.method = 'update';
+					//if prevIdConfig is null means this is the first time a configuration is setted and if also is the default one, we not publish the event because the completeDatatables componente already has that configuration
+					if (!(prevIdConfig === null && (this.model.configuration.isdefault === true || idConfig === -1))) {
+						this.$puiEvents.$emit(`onPui-apply-configuration-${this.modelName}`, this.model.configuration);
+					}
+					this.notifyChange = false;
+					this.onConfigurationChange();
+					break;
+				}
+			}
+		},
+		toggleConfiguration() {
+			if (this.model.id !== -1) {
+				if (this.model.edited === true) {
+					this.toggling = true;
+					this.dialogs.unsavedChanges = true;
+					this.configurationUnsavedId = this.model.id;
+					return;
+				}
+				this.setModelConfigurationById(-1, this.model.id);
+				this.configurationId = -1;
+			}
+		},
+		undo() {
+			const defaultConfiguration = this.$store.getters.getDefaultGridConfiguration(this.modelName);
+			if (defaultConfiguration) {
+				this.configurationId = defaultConfiguration.id;
+				this.setModelConfigurationById(defaultConfiguration.id);
+			}
+		},
+		onConfigurationChange() {
+			if (this.method === 'update') {
+				this.model.edited = this.notifyChange;
+				if (this.model.id === -1) {
+					this.notifyChange = false;
+				}
+				this.$store.commit('puiModelsSetCurrentGridConfiguration', { model: this.modelName, configuration: this.model });
+				this.$parent.states.unsaved = this.notifyChange;
+				this.updated = this.notifyChange;
+				this.notifyChange = true;
+			}
+		},
+		subscribeToOtherGridConfigurations() {
+			this.$puiEvents.$on(`onPui-pageChange-dataTable-${this.modelName}${this.modelNameSuffix}`, (page) => {
+				this.model.configuration.page = page;
+				this.notifyChange = false;
+				this.onConfigurationChange();
+			});
+			this.$puiEvents.$on(`onPui-colReorder-dataTable-${this.modelName}${this.modelNameSuffix}`, (orderArray) => {
+				clearTimeout(this.delayTimer);
+				//WHY USING SETTIMEOUT IN 2 SEC???
+				this.delayTimer = setTimeout(() => {
+					const orderedArray = [];
+					for (let order = 0, length = this.visibleColumns.length; order <= length; order++) {
+						if (order === 0) {
+							//skip check column
+							continue;
+						}
+						const indexCol = orderArray[order];
+						this.model.configuration.columns[indexCol - 1].order = order - 1;
+						orderedArray.push(this.model.configuration.columns[indexCol - 1]);
+					}
+					this.setVisibleColumns(orderedArray);
+					this.onConfigurationChange();
+				}, 2000);
+				this.onConfigurationChange();
+			});
+			this.$puiEvents.$on(`onPui-apply-sorting-${this.modelName}${this.modelNameSuffix}`, (sortingRules) => {
+				this.model.configuration.order = sortingRules;
+				this.onConfigurationChange();
+			});
+			this.$puiEvents.$on(`onPui-apply-sorting-dataTable-${this.modelName}${this.modelNameSuffix}`, (sortingRules) => {
+				this.model.configuration.order = sortingRules;
+				this.onConfigurationChange();
+			});
+			this.$puiEvents.$on(`onPui-changeRowNum-dataTable-${this.modelName}${this.modelNameSuffix}`, (rowNum) => {
+				this.model.configuration.rows = rowNum;
+				this.onConfigurationChange();
+			});
+			this.$puiEvents.$on(`onPui-fixedColumn-dataTable-${this.modelName}${this.modelNameSuffix}`, (columnInfo) => {
+				const columnIndex = columnInfo[0];
+				const newCols = columnInfo[1];
+				const pinColumn = columnIndex !== -1;
+				if (pinColumn === true) {
+					this.moveColumnToFirst(newCols);
+					this.model.configuration.grouped = false;
+				}
+				this.model.configuration.pinColumn = pinColumn;
+				this.onConfigurationChange();
+			});
+			this.$puiEvents.$on(`onPui-groupColumn-dataTable-${this.modelName}${this.modelNameSuffix}`, (columnIndex) => {
+				const grouped = columnIndex !== -1;
+				if (grouped === true) {
+					this.model.configuration.pinColumn = false;
+				}
+				this.model.configuration.grouped = grouped;
+				this.onConfigurationChange();
+			});
+			this.$puiEvents.$on(`onPui-selectItem-dataTable-${this.modelName}${this.modelNameSuffix}`, (selectedRows) => {
+				this.model.configuration.selectedRows = selectedRows;
+			});
+			this.$puiEvents.$on(`onPui-clearSelection-dataTable-${this.modelName}${this.modelNameSuffix}`, () => {
+				this.model.configuration.selectedRows = [];
+			});
+		},
+		moveColumnToFirst(newCols) {
+			for (let i = 0, length = newCols.length; i < length; i++) {
+				const name = newCols[i].name;
+				const iteratedCol = this.model.configuration.columns.find((col) => col.name === name);
+				iteratedCol.order = i;
+			}
+			this.setVisibleColumns(this.model.configuration.columns);
+		},
+		setGridModel() {
+			this.modelGridConfigurations = this.$store.getters.getGridConfigurationsForModel(this.modelName);
+			if (this.modelGridConfigurations !== undefined) {
+				this.setConfiguration();
+			}
+		},
+		setConfiguration() {
+			const addNewConfiguration = () => {
+				this.model = {};
+				this.model.id = null;
+				this.method = 'create';
+				this.model.configuration = this.modelTemplate;
+				this.model.configuration.columns = this.columns;
+				this.model.configuration.order = [];
+				this.$store.commit('puiModelsSetCurrentGridConfiguration', { model: this.modelName, configuration: this.model });
+			};
+
+			if (this.modelGridConfigurations !== undefined && this.modelGridConfigurations.length > 0) {
+				const currentConfig = this.$store.getters.getCurrentGridConfiguration(this.modelName);
+				if (currentConfig) {
+					//here we clone the configuration object in order to do the undo action later on
+					this.avoidWatch = true;
+					this.$parent.states.unsaved = (currentConfig.edited && currentConfig.id !== -1) || false;
+					this.updated = this.$parent.states.unsaved;
+					this.model = currentConfig;
+					this.method = 'update';
+					this.$parent.states.applied = true;
+					this.configurationId = this.model.id;
+				} else {
+					addNewConfiguration(this.modelGridConfigurations.length);
+				}
+			} else {
+				this.configurationSelectorDisabled = true;
+				addNewConfiguration();
+			}
+		},
+		showColumnDialog() {
+			//subscribeOrNotSubscribe
+			this.$parent.states.active = false;
+			this.dialogs.columnSelector = true;
+		},
+		beforeSave(configProperties) {
+			if (configProperties) {
+				this.model.configuration.name = configProperties.name;
+				this.model.configuration.description = configProperties.description;
+				this.model.configuration.isdefault = configProperties.isdefault;
+			}
+			this.model.type = 'datatables';
+			this.model.usr = this.$store.getters.getUser;
+			this.model.model = this.modelName;
+			this.model.configuration.columns.forEach((theColumn) => {
+				delete theColumn.bSortable;
+				delete theColumn.bVisible;
+				delete theColumn.mData;
+				delete theColumn.orderable;
+				delete theColumn.sName;
+				delete theColumn.sTitle;
+				delete theColumn.sType;
+			});
+			delete this.model.configuration.selectedRows;
+			delete this.model.configuration.page;
+			delete this.model.name;
+			this.model.configuration = JSON.stringify(this.model.configuration);
+			this.configurationSelectorDisabled = true;
+			return this.model;
+		},
+		afterSave(savedConfig) {
+			const onFinishAfterSave = () => {
+				this.configurationSelectorDisabled = false;
+				this.dialogs.edit = false;
+				this.notifyChange = false;
+				this.onConfigurationChange();
+			};
+			this.model = savedConfig;
+			let patching = false;
+			this.model.configuration = JSON.parse(savedConfig.configuration);
+			this.setVisibleColumns(this.model.configuration.columns);
+			if (this.model.configuration.isdefault === true) {
+				this.modelGridConfigurations.forEach((config) => {
+					if (this.model.id !== config.id && config.id !== -1 && config.configuration.isdefault) {
+						patching = true;
+						config.configuration.isdefault = false;
+						this.$puiRequests.patchRequest(
+							`${this.modelDependency.url.patch}?id=${config.id}`,
+							{
+								configuration: JSON.stringify(config.configuration)
+							},
+							() => {
+								patching = false;
+								onFinishAfterSave();
+							},
+							() => {
+								patching = false;
+								onFinishAfterSave();
+							}
+						);
+					}
+				});
+			}
+			const currentConfig = this.cloneConfiguration(this.model);
+			if (this.method === 'update') {
+				this.$store.commit('deleteGridConfiguration', { model: this.modelName, configuration: currentConfig });
+			}
+			this.$store.commit('addGridConfiguration', { model: this.modelName, configuration: currentConfig });
+			this.modelGridConfigurations = this.$store.getters.getGridConfigurationsForModel(this.modelName);
+			this.configurationId = this.model.id;
+			!patching && onFinishAfterSave();
+		},
+		calculatePosition() {
+			if (this.position === undefined || this.$refs.dialog === undefined) {
+				return;
+			}
+			this.$refs.dialog.style.top = this.position.top + 'px';
+			this.$refs.dialog.style.right = '0px';
+		},
+		setVisibleColumns(columns, sort = true) {
+			sort === true &&
+				columns.sort((col1, col2) => {
+					return col1.order - col2.order;
+				});
+			//las columnas que en esta configuración se ven
+			this.visibleColumns = columns.filter((column) => {
+				return column.visible === true;
+			});
+		},
+		getData() {
+			return this.model;
+		},
+		applyColumnConfig() {
+			if (this.selectedColumns.length === 0) {
+				this.dialogs.columnSelector = false;
+				return;
+			}
+			this.model.configuration.columns = this.columns;
+			this.model.configuration.columns.forEach((theColumn, index) => {
+				theColumn.visible = false;
+				theColumn.data = theColumn.name;
+				theColumn.order = this.columns.length + index;
+				for (let i = 0, length = this.selectedColumns.length; i < length; i++) {
+					if (theColumn.name === this.selectedColumns[i].name) {
+						theColumn.order = i;
+						theColumn.visible = true;
+						theColumn.bVisible = true;
+						break;
+					}
+				}
+			});
+			this.setVisibleColumns(this.model.configuration.columns);
+			this.dialogs.columnSelector = false;
+			this.$puiEvents.$emit(`onPui-apply-configuration-${this.modelName}`, this.model.configuration);
+			this.onConfigurationChange();
+		},
+		deleteConfig() {
+			this.configurationSelectorDisabled = true;
+			const params = { id: this.model.id };
+			this.$puiRequests.deleteRequest(
+				`/${this.modelDependencyName}/delete`,
+				null,
+				(response) => {
+					this.onConfDeleted(response.data);
+					this.serverMessage = this.$t('pui9.delete.success');
+					this.colorMessage = 'success';
+					this.showMessage = true;
+				},
+				(error) => {
+					if (error.response) {
+						if (error.response.data && error.response.data.message) {
+							this.serverMessage = error.response.data.message;
+						} else if (error.response.status === 400) {
+							this.serverMessage = this.$t('pui9.error.service_not_found');
+						} else if (error.response.status === 500) {
+							this.serverMessage = this.$t('pui9.error.service_not_available');
+						}
+					} else if (error.data) {
+						this.serverMessage = error.data.message;
+					} else if (error.message) {
+						this.serverMessage = error.message;
+					}
+					this.colorMessage = 'error';
+					this.showMessage = true;
+					this.configurationSelectorDisabled = false;
+				},
+				params
+			);
+		}
+	}
+};
+</script>
+<style lang="postcss">
+.puiDialog__title {
+	font-size: 25px;
+	line-height: 40px;
+	font-weight: 500;
+}
+.puiConf-dialog {
+	&--unsaved {
+		&.puiConf-dialog__select .v-input__slot {
+			background-color: var(--Y-25) !important;
+			border-color: var(--secondarycolor) !important;
+		}
+	}
+	&__dot {
+		color: var(--secondarycolor);
+		font-size: 60px;
+		position: absolute;
+		top: -5px;
+	}
+	&__icon {
+		font-size: 12px !important;
+		color: var(--N-200);
+	}
+	&__select {
+		& .v-list__tile__title {
+			white-space: normal !important;
+			height: 100%;
+		}
+	}
+}
+</style>