380 lines
18 KiB
Vue
380 lines
18 KiB
Vue
<template>
|
|
<div>
|
|
<titleSection :title="$root.translation('ID_NEW_USER_ATTRIBUTE')"></titleSection>
|
|
<b-form @submit.stop.prevent="onsubmit">
|
|
<b-container fluid>
|
|
<b-row>
|
|
<b-col cols="6">
|
|
<b-form-group :label="$root.translation('ID_NAME')">
|
|
<b-form-input v-model="form.name"
|
|
autocomplete="off"
|
|
:state="statusName"
|
|
@keyup="validateName"/>
|
|
<b-form-invalid-feedback>{{statusNameMessage}}</b-form-invalid-feedback>
|
|
</b-form-group>
|
|
</b-col>
|
|
<b-col>
|
|
<b-form-group :label="$root.translation('ID_ATTRIBUTE_ID')">
|
|
<b-form-input v-model="form.attributeId"
|
|
autocomplete="off"
|
|
:state="statusAttributeId"
|
|
@keyup="validateAttributeId"/>
|
|
<b-form-invalid-feedback>{{statusAttributeIdMessage}}</b-form-invalid-feedback>
|
|
</b-form-group>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row>
|
|
<b-col cols="6">
|
|
<b-form-group :label="$root.translation('ID_PROPERTIES')">
|
|
<b-form-checkbox v-model="form.hidden"
|
|
value="1"
|
|
unchecked-value="0"
|
|
:disabled="form.required===1 || form.password===1">
|
|
{{$root.translation('ID_HIDDEN')}}
|
|
<b-button variant="outline-light"
|
|
v-b-tooltip="{title:$root.translation('ID_ATTRIBUTE_WONT_BE_SEEN_IN_USER_INFORMATION'),placement:'right',variant:'warning',customClass:'custom-tooltip'}">
|
|
<b-icon icon="question-circle-fill"
|
|
aria-hidden="true"
|
|
variant="primary"/>
|
|
</b-button>
|
|
</b-form-checkbox>
|
|
<b-form-checkbox v-model="form.required"
|
|
value="1"
|
|
unchecked-value="0"
|
|
:disabled="form.hidden===1">
|
|
{{$root.translation('ID_REQUIRED')}}
|
|
<b-button variant="outline-light"
|
|
v-b-tooltip="{title:$root.translation('ID_ATTRIBUTE_WILL_BE_REQUIRED_WHEN_EDITING_USER_SETTINGS'),placement:'right',variant:'warning',customClass:'custom-tooltip'}">
|
|
<b-icon icon="question-circle-fill"
|
|
aria-hidden="true"
|
|
variant="primary"/>
|
|
</b-button>
|
|
</b-form-checkbox>
|
|
<b-form-checkbox v-model="form.password"
|
|
value="1"
|
|
unchecked-value="0"
|
|
:disabled="form.hidden===1">
|
|
{{$root.translation('ID_TYPE_PASSWORD')}}
|
|
<b-button variant="outline-light"
|
|
v-b-tooltip="{title:$root.translation('ID_ATTRIBUTE_WILL_BE_HIDDEN_USING_PLACEHOLDER'),placement:'right',variant:'warning',customClass:'custom-tooltip'}">
|
|
<b-icon icon="question-circle-fill"
|
|
aria-hidden="true"
|
|
variant="primary"/>
|
|
</b-button>
|
|
</b-form-checkbox>
|
|
</b-form-group>
|
|
</b-col>
|
|
<b-col>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="bv-row-flex-cols">
|
|
<b-col cols="6">
|
|
<b-form-group :label="$root.translation('ID_PROPERTIES')">
|
|
<b-form-radio v-model="form.option"
|
|
value="allUser"
|
|
class="mt-2">
|
|
{{$root.translation('ID_ALL_USERS')}}
|
|
</b-form-radio>
|
|
<b-form-radio v-model="form.option"
|
|
value="byRol"
|
|
class="mt-3">
|
|
{{$root.translation('ID_BY_ROLE')}}
|
|
</b-form-radio>
|
|
</b-form-group>
|
|
</b-col>
|
|
<b-col cols="6" align-self="end">
|
|
<b-form-group>
|
|
<b-input-group>
|
|
<b-form-select v-model="form.rol"
|
|
:disabled="form.option==='allUser'"
|
|
:options="roles"></b-form-select>
|
|
<b-input-group-append>
|
|
<b-button variant="outline-secondary"
|
|
@click="refreshRoles"
|
|
:disabled="form.option==='allUser'">
|
|
<b-icon icon="arrow-repeat"
|
|
aria-hidden="true"/>
|
|
</b-button>
|
|
</b-input-group-append>
|
|
<b-input-group-append>
|
|
<b-button variant="success"
|
|
@click="addRole"
|
|
:disabled="form.option==='allUser'">
|
|
<b-icon icon="plus" aria-hidden="true"/> {{$root.translation('ID_ADD')}}
|
|
</b-button>
|
|
</b-input-group-append>
|
|
</b-input-group>
|
|
</b-form-group>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row>
|
|
<b-col>
|
|
<b-form-group>
|
|
<b-form-tags v-model="form.selectedRoles"
|
|
style="min-height:55px"
|
|
:disabled="form.option==='allUser'">
|
|
<template v-slot="{ tags, inputAttrs, inputHandlers, tagVariant, addTag, removeTag, disabled}">
|
|
<!--important is the control body-->
|
|
<div class="d-inline-block">
|
|
<div v-for="tag in tags"
|
|
:key="tag"
|
|
:title="tag"
|
|
class="d-inline-block border bg-light rounded-lg p-1 mr-2">
|
|
{{getTextRol(tag)}}
|
|
<b-button size="sm"
|
|
variant="light"
|
|
:disabled="disabled"
|
|
@click="deleteRol(tag,function(){removeTag(tag);})">
|
|
<b-icon icon="x"
|
|
aria-hidden="true"
|
|
variant="primary"/>
|
|
</b-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</b-form-tags>
|
|
</b-form-group>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row class="text-right">
|
|
<b-col>
|
|
<b-form-group>
|
|
<b-button variant="danger"
|
|
@click="$emit('cancel')">{{$root.translation('ID_CANCEL')}}</b-button>
|
|
<b-button type="submit"
|
|
variant="success"
|
|
:disabled="!statusValidation">{{$root.translation('ID_SAVE')}}</b-button>
|
|
</b-form-group>
|
|
</b-col>
|
|
</b-row>
|
|
</b-container>
|
|
</b-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import titleSection from "./titleSection.vue"
|
|
import axios from "axios"
|
|
import { validationMixin } from "vuelidate"
|
|
export default {
|
|
mixins: [validationMixin],
|
|
components: {
|
|
titleSection
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
id: "",
|
|
name: "",
|
|
attributeId: "",
|
|
hidden: 0,
|
|
required: 0,
|
|
password: 0,
|
|
option: "allUser",
|
|
selectedRoles: [],
|
|
rol: "0"
|
|
},
|
|
roles: this.getRoles(),
|
|
statusValidation: true,
|
|
statusName: null,
|
|
statusNameMessage: "",
|
|
statusAttributeId: null,
|
|
statusAttributeIdMessage: ""
|
|
};
|
|
},
|
|
methods: {
|
|
reset() {
|
|
this.form = {
|
|
id: "",
|
|
name: "",
|
|
attributeId: "",
|
|
hidden: 0,
|
|
required: 0,
|
|
password: 0,
|
|
option: "allUser",
|
|
selectedRoles: [],
|
|
rol: "0"
|
|
};
|
|
this.statusValidation = true;
|
|
this.statusName = null;
|
|
this.statusAttributeId = null;
|
|
},
|
|
onsubmit() {
|
|
this.statusName = true;
|
|
if (this.form.name.trim() === "") {
|
|
this.statusName = false;
|
|
this.statusNameMessage = this.$root.translation("ID_IS_REQUIRED");
|
|
return;
|
|
}
|
|
this.statusAttributeId = true;
|
|
if (this.form.attributeId.trim() === "") {
|
|
this.statusAttributeId = false;
|
|
this.statusAttributeIdMessage = this.$root.translation("ID_IS_REQUIRED");
|
|
return;
|
|
}
|
|
if (/^[a-zA-Z][_0-9a-zA-Z]+$/.test(this.form.attributeId) === false) {
|
|
this.statusAttributeId = false;
|
|
this.statusAttributeIdMessage = this.$root.translation("ID_INVALID_DATA");
|
|
return;
|
|
}
|
|
this.saveForm();
|
|
},
|
|
validateName() {
|
|
this.statusValidation = false;
|
|
let formData = new FormData();
|
|
formData.append("id", this.form.id);
|
|
formData.append("name", this.form.name);
|
|
return axios.post(this.$root.baseUrl() + "userExtendedAttributes/index?option=verifyName", formData)
|
|
.then(response => {
|
|
response;
|
|
if (response.data.valid === false) {
|
|
this.statusName = false;
|
|
this.statusNameMessage = response.data.message;
|
|
} else {
|
|
this.statusName = true;
|
|
this.statusValidation = true;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
error;
|
|
})
|
|
.finally(() => {
|
|
});
|
|
},
|
|
validateAttributeId() {
|
|
this.statusValidation = false;
|
|
if (/^[a-zA-Z][_0-9a-zA-Z]+$/.test(this.form.attributeId) === false) {
|
|
this.statusAttributeId = false;
|
|
this.statusAttributeIdMessage = this.$root.translation("ID_INVALID_DATA");
|
|
return;
|
|
}
|
|
let formData = new FormData();
|
|
formData.append("id", this.form.id);
|
|
formData.append("attributeId", this.form.attributeId);
|
|
return axios.post(this.$root.baseUrl() + "userExtendedAttributes/index?option=verifyAttributeId", formData)
|
|
.then(response => {
|
|
response;
|
|
if (response.data.valid === false) {
|
|
this.statusAttributeId = false;
|
|
this.statusAttributeIdMessage = response.data.message;
|
|
} else {
|
|
this.statusAttributeId = true;
|
|
this.statusValidation = true;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
error;
|
|
})
|
|
.finally(() => {
|
|
});
|
|
},
|
|
saveForm() {
|
|
this.statusValidation = false;
|
|
let formData = this.formToFormData(this.form);
|
|
return axios.post(this.$root.baseUrl() + "userExtendedAttributes/index?option=save", formData)
|
|
.then(response => {
|
|
response;
|
|
this.$emit("save");
|
|
this.statusValidation = true;
|
|
})
|
|
.catch(error => {
|
|
error;
|
|
})
|
|
.finally(() => {
|
|
});
|
|
},
|
|
getRoles() {
|
|
this.refreshRoles();
|
|
return this.roles;
|
|
},
|
|
refreshRoles() {
|
|
let formData = new FormData();
|
|
formData.append("request", "allRoles");
|
|
axios.post(this.$root.baseUrl() + "roles/roles_Ajax", formData)
|
|
.then(response => {
|
|
response;
|
|
let data = [
|
|
{value: "0", text: this.$root.translation('ID_EMPTY_TYPE')}
|
|
];
|
|
for (let i in response.data) {
|
|
data.push({
|
|
value: response.data[i].ROL_CODE,
|
|
text: response.data[i].ROL_NAME
|
|
});
|
|
}
|
|
this.roles = data;
|
|
})
|
|
.catch(error => {
|
|
error;
|
|
})
|
|
.finally(() => {
|
|
});
|
|
},
|
|
addRole() {
|
|
if (this.form.rol === "0") {
|
|
return;
|
|
}
|
|
let obj = this.form.selectedRoles.find(rol => rol === this.form.rol);
|
|
if (obj !== undefined) {
|
|
return;
|
|
}
|
|
this.form.selectedRoles.push(this.form.rol);
|
|
},
|
|
getTextRol(tag) {
|
|
let obj = this.roles.find(rol => rol.value === tag);
|
|
return obj.text;
|
|
},
|
|
deleteRol(tag, process) {
|
|
this.$bvModal.msgBoxConfirm(this.$root.translation('ID_THE_USER_ROLES_FOR_ATTRIBUTE_HAS_BEEN_DELETED_PLEASE_CONFIRM', ['']), {
|
|
title: " ", //is important because title disappear
|
|
hideHeaderClose: false,
|
|
okTitle: this.$root.translation('ID_CONFIRM'),
|
|
okVariant: "success",
|
|
cancelTitle: this.$root.translation('ID_CANCEL'),
|
|
cancelVariant: "danger"
|
|
}).then(value => {
|
|
if (value === false) {
|
|
return;
|
|
}
|
|
process();
|
|
}).catch(err => {
|
|
err;
|
|
});
|
|
},
|
|
formToFormData(form) {
|
|
let formData = new FormData();
|
|
formData.append("UEA_ID", form.id);
|
|
formData.append("UEA_NAME", form.name);
|
|
formData.append("UEA_ATTRIBUTE_ID", form.attributeId);
|
|
formData.append("UEA_HIDDEN", form.hidden);
|
|
formData.append("UEA_REQUIRED", form.required);
|
|
formData.append("UEA_PASSWORD", form.password);
|
|
formData.append("UEA_OPTION", form.option);
|
|
formData.append("UEA_ROLES", JSON.stringify(form.selectedRoles));
|
|
return formData;
|
|
},
|
|
rowToForm(row) {
|
|
let form = {
|
|
id: row.id,
|
|
name: row.name,
|
|
attributeId: row.attributeId,
|
|
hidden: row.hidden,
|
|
required: row.required,
|
|
password: row.password,
|
|
option: row.option,
|
|
selectedRoles: JSON.parse(row.roles)
|
|
};
|
|
return form;
|
|
},
|
|
load(row) {
|
|
this.form = this.rowToForm(row);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bv-row-flex-cols{
|
|
min-height:7rem;
|
|
}
|
|
</style> |