pui9-components 1.17.3 → 2.0.7

package/package.json

@@ -4,42 +4,40 @@
 	"author": {
 		"name": "Prodevelop S.L."
 	},
-	"version": "1.17.3",
+	"version": "2.0.7",
 	"license": "Copyright",
 	"main": "dist/pui9-components.common.js",
 	"scripts": {
 		"serve": "vue-cli-service serve",
-		"build-bundle": "vue-cli-service build --target lib --name pui9-components ./src/index.js",
+		"build-bundle": "vue-cli-service build --target lib --formats commonjs --name pui9-components ./src/index.js",
 		"prepare": "npm run build-bundle",
 		"lint": "vue-cli-service lint",
-		"test:unit": "vue-cli-service test:unit"
+		"test:unit": "vue-cli-service test:unit --watchAll"
 	},
 	"dependencies": {
-		"@tinymce/tinymce-vue": "3.2.0",
-		"current-device": "0.10.2",
-		"moment": "2.29.3",
-		"moment-timezone": "0.5.34",
+		"jodit": "3.24.9",
+		"moment": "2.29.4",
+		"sanitize-html": "2.7.3",
 		"vue-codemirror": "4.0.6",
 		"vue-infinite-loading": "2.4.5",
-		"sanitize-html": "2.7.3",
 		"vuedraggable": "2.24.3"
 	},
 	"devDependencies": {
-		"@fortawesome/fontawesome-pro": "5.15.4",
-		"@vue/cli-plugin-babel": "4.5.15",
-		"@vue/cli-plugin-eslint": "4.5.15",
-		"@vue/cli-plugin-unit-jest": "4.5.15",
-		"@vue/cli-service": "4.5.15",
+		"@vue/cli-plugin-babel": "4.5.19",
+		"@vue/cli-plugin-eslint": "4.5.19",
+		"@vue/cli-plugin-unit-jest": "5.0.8",
+		"@vue/cli-service": "4.5.19",
 		"autoprefixer": "9.8.6",
-		"@vue/test-utils": "1.2.2",
-		"@vue/vue2-jest": "28.0.0",
+		"@vue/test-utils": "1.3.3",
+		"@vue/vue2-jest": "29.2.1",
 		"babel-eslint": "10.1.0",
-		"babel-jest": "23.6.0",
-		"css-loader": "0.28.11",
-		"core-js": "3.23.1",
+		"babel-jest": "29.3.1",
+		"css-loader": "5.2.7",
+		"core-js": "3.26.1",
 		"deepmerge": "4.2.2",
 		"eslint": "6.8.0",
 		"eslint-plugin-vue": "6.2.2",
+		"postcss": "8.4.20",
 		"postcss-css-variables": "0.18.0",
 		"postcss-import": "12.0.1",
 		"postcss-loader": "4.3.0",
@@ -47,14 +45,12 @@
 		"postcss-url": "8.0.0",
 		"sass": "1.27.0",
 		"sass-loader": "10.0.2",
-		"stylus": "0.55.0",
-		"stylus-loader": "4.3.3",
-		"vue": "2.6.14",
-		"vue-i18n": "8.26.8",
-		"vue-cli-plugin-vuetify": "2.5.1",
-		"vue-template-compiler": "2.6.14",
-		"vuetify-loader": "1.7.3",
-		"vuetify": "2.6.6",
+		"vue": "2.7.14",
+		"vue-i18n": "8.28.2",
+		"vue-cli-plugin-vuetify": "2.5.8",
+		"vue-template-compiler": "2.7.14",
+		"vuetify-loader": "1.9.2",
+		"vuetify": "2.6.12",
 		"vuex": "3.6.2"
 	},
 	"eslintConfig": {

package/src/components/PuiCauDialog.vue

@@ -0,0 +1,192 @@
+<template>
+	<v-container class="puiCau">
+		<v-dialog v-model="dialogModel" width="700" @click:outside="closeDialog()">
+			<v-card>
+				<v-toolbar elevation="3" height="50" color="light-blue darken-3">
+					<v-spacer></v-spacer>
+					<v-toolbar-title style="color: white">{{ getBtnTitle }}</v-toolbar-title>
+					<v-spacer></v-spacer>
+					<v-icon color="white" @click="closeDialog()">fas fa-window-close</v-icon>
+				</v-toolbar>
+
+				<v-card-text>
+					<v-form ref="form">
+						<v-container class="pa-0 pt-4">
+							<pui-text-field v-model="model.subject" :label="$t('puicau.subject')" toplabel required></pui-text-field>
+							<pui-text-area v-model="model.content" :label="$t('puicau.content')" toplabel required></pui-text-area>
+							<pui-select
+								v-if="dialogModel"
+								:label="$t('puicau.urgency')"
+								v-model="model"
+								:items="urgencyValues"
+								:modelFormMapping="{ urgency: 'urgency' }"
+								:itemsToSelect="itemsToSelect"
+								:itemValue="['urgency']"
+								itemText="text"
+								toplabel
+								required
+							></pui-select>
+
+							<!-- adjuntos -->
+							<pui-field-set v-if="isLogged" :title="$t('form.puidocument.title')" class="mt-0 mb-8">
+								<pui-file-upload-group v-model="model.files" ref="fileUploadGroup" :minDocuments="0"></pui-file-upload-group>
+							</pui-field-set>
+
+							<pui-field-set :title="$t('puicau.contact')" class="pa-4 pb-0">
+								<pui-text-field
+									v-model="model.name"
+									:label="$t('puicau.name')"
+									toplabel
+									required
+									:readonly="getUser != null"
+								></pui-text-field>
+								<pui-text-field
+									v-model="model.email"
+									:label="$t('puicau.email')"
+									toplabel
+									emailMask
+									required
+									:readonly="getEmail != null"
+								></pui-text-field>
+								<pui-text-field v-model="model.phone" :label="$t('puicau.phone')" toplabel required></pui-text-field>
+							</pui-field-set>
+						</v-container>
+					</v-form>
+				</v-card-text>
+
+				<v-divider></v-divider>
+
+				<v-card-actions>
+					<v-btn color="primary" text @click="closeDialog()">Cancelar</v-btn>
+					<v-spacer></v-spacer>
+					<v-btn color="secondary" text @click="send(model)">Enviar</v-btn>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+	</v-container>
+</template>
+
+<script>
+export default {
+	name: 'PuiCauDialog',
+	props: {
+		dialogModel: {
+			required: true
+		}
+	},
+	data() {
+		return {
+			model: null,
+			urgencyValues: [
+				{
+					text: this.$t('puicau.urgencyValues.maximum'),
+					urgency: 'MAXIMUM'
+				},
+				{
+					text: this.$t('puicau.urgencyValues.high'),
+					urgency: 'HIGH'
+				},
+				{
+					text: this.$t('puicau.urgencyValues.medium'),
+					urgency: 'MEDIUM'
+				},
+				{
+					text: this.$t('puicau.urgencyValues.low'),
+					urgency: 'LOW'
+				}
+			]
+		};
+	},
+	computed: {
+		isIssueTicketActive() {
+			return this.$store.getters.isIssueTicketActive;
+		},
+		getUser() {
+			return this.$store.getters.getSession.name;
+		},
+		getEmail() {
+			return this.$store.getters.getSession.email;
+		},
+		isLogged() {
+			return this.getUser != null;
+		},
+		getBtnTitle() {
+			return this.isLogged ? this.$t('puicau.menu_entry') : this.$t('puicau.title');
+		},
+		itemsToSelect() {
+			return [{urgency: this.model.urgency}]
+		}
+	},
+	created() {
+		this.setInitialValues();
+	},
+	methods: {
+		setInitialValues() {
+			this.model = this.getEmptyModel();
+			this.model.name = this.getUser;
+			this.model.email = this.getEmail;
+		},
+		getEmptyModel() {
+			return {
+				subject: null,
+				content: null,
+				urgency: null,
+				name: null,
+				email: null,
+				phone: null,
+				files: []
+			};
+		},
+		send(formData) {
+			if (this.$refs.form.validate() && this.validateFileUploads()) {
+				let fileData = new window.FormData();
+				if (this.isLogged && this.model && this.model.files && this.model.files.length > 0) {
+					this.model.files.forEach((file) =>
+					fileData.append('files', file.selectedFile, file.selectedFile.name)
+					);
+				} /*else {
+					fileData.append('files', new Blob(), ''); // EMPTY BLOB
+				}*/
+
+				delete formData.files;
+
+				this.$puiRequests.uploadFileRequest(
+					'/issueTicket',
+					fileData,
+					() => {
+						this.closeDialog();
+					},
+					(error) => {
+						console.log(error)
+						this.$puiNotify.error(error.message);
+						this.dialog = false;
+					},
+					formData // as parameters
+				);
+			}
+		},
+		validateFileUploads() {
+			if (!this.isLogged) {
+				return true;
+			}
+
+			return this.$refs.fileUploadGroup.validateFileUploads();
+		},
+		closeDialog() {
+			this.setInitialValues();
+			this.$puiEvents.$emit('pui-modalDialogForm-cau-close');
+		}
+	}
+};
+</script>
+
+<style lang="postcss">
+.puiCau {
+	position: absolute;
+	bottom: 0;
+}
+
+.v-btn--plain .v-btn__content {
+	opacity: 1 !important;
+}
+</style>

package/src/components/PuiCheckbox.vue

@@ -1,7 +1,7 @@
 <template>
 	<v-checkbox
 		:class="isRequired"
-		class="ml-2 mr-2"
+		class="d-flex ml-2 mr-2"
 		:label="getLabel"
 		:rules="getRules"
 		v-model="internalModel"
@@ -12,7 +12,14 @@
 		:true-value="trueValue"
 		color="primary"
 		:error="internalError"
-	></v-checkbox>
+	>
+		<template v-slot:label>
+			<v-container class="d-flex pa-0 align-center">
+				<span>{{ label }}</span>
+				<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-tooltip>
+			</v-container>
+		</template>
+	</v-checkbox>
 </template>
 
 <script>
@@ -41,7 +48,15 @@ export default {
 			type: [Boolean, String, Number],
 			default: true,
 			required: false
-		}
+		},
+		tooltipDescription: {
+			type: String,
+			required: false
+		},
+		tooltipIcon: {
+			type: String,
+			required: false,
+		},
 	},
 	computed: {
 		getRules() {
@@ -64,7 +79,13 @@ export default {
 		},
 		requiredMessage() {
 			return this.$t('pui9.error.field_selected');
-		}
+		},
+		showTooltip() {
+            if (this.getLabel === '' || this.getLabel === null) {
+                return false;
+            }
+            return this.tooltipDescription || this.tooltip;
+        }
 	},
 	watch: {
 		value(val) {

package/src/components/PuiCodeEditor.vue

@@ -91,7 +91,8 @@ export default {
 			const self = this;
 			this.editor = CodeMirror.fromTextArea(this.$refs.codemirror, {
 				mode: this.mode,
-				lineNumbers: true
+				lineNumbers: true,
+				lineWrapping: true
 			});
 			this.editor.on('change', (editor) => {
 				this.data = editor.getValue();