PMCORE-2352 User extended attributes PMCORE-2247
This commit is contained in:
Roly Rudy Gutierrez Pinto
@@ -0,0 +1,378 @@
|
||||
<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;
|
||||
},
|
||||
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>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="text-primary">
|
||||
{{title}}
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
props: {
|
||||
title: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div>
|
||||
<titleSection :title="$root.translation('ID_USER_EXTENDED_ATTRIBUTES')"></titleSection>
|
||||
<b-form-group class="float-right">
|
||||
<b-button variant="success"
|
||||
@click="newAttribute">
|
||||
<b-icon icon="plus" aria-hidden="true"/> {{$root.translation('ID_NEW_ATTRIBUTE')}}
|
||||
</b-button>
|
||||
</b-form-group>
|
||||
<v-server-table ref="vServerTable1"
|
||||
:url="$root.baseUrl()+'userExtendedAttributes/index?option=list'"
|
||||
:columns="columns"
|
||||
:options="options">
|
||||
<div slot="roles"
|
||||
slot-scope="props">
|
||||
{{formatingRoles(props.row.rolesLabel)}}
|
||||
</div>
|
||||
<div slot="owner"
|
||||
slot-scope="props">
|
||||
{{props.row.owner}}
|
||||
<b-avatar :id="'as-b-avatar-tooltip-'+props.index"
|
||||
size="sm"
|
||||
class="float-right">
|
||||
</b-avatar>
|
||||
<b-tooltip :target="'as-b-avatar-tooltip-'+props.index"
|
||||
triggers="hover"
|
||||
custom-class="custom-tooltip"
|
||||
placement="right"
|
||||
variant="info">
|
||||
<b-container fluid>
|
||||
<b-row class="text-left">
|
||||
<b-col>
|
||||
{{props.row.usrUsername}}<br>
|
||||
{{props.row.usrFirstname}} {{props.row.usrLastname}}<br>
|
||||
{{props.row.usrEmail}}<br>
|
||||
{{props.row.usrFax}}<br>
|
||||
{{props.row.usrCellular}}<br>
|
||||
{{props.row.usrTimeZone}}<br>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-avatar size="lg"
|
||||
variant="dark">
|
||||
</b-avatar>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</b-tooltip>
|
||||
</div>
|
||||
<div slot="icons"
|
||||
slot-scope="props">
|
||||
<b-button-group>
|
||||
<b-button :title="$root.translation('ID_EDIT_ATTRIBUTE')"
|
||||
v-b-tooltip.hover
|
||||
variant="light"
|
||||
@click="editAttribute(props.row)">
|
||||
<b-icon icon="pencil-fill" aria-hidden="true" variant="info"/>
|
||||
</b-button>
|
||||
<b-button :title="$root.translation('ID_DELETE_ATTRIBUTE')"
|
||||
v-b-tooltip.hover
|
||||
variant="light"
|
||||
@click="deleteAttribute(props.row)">
|
||||
<b-icon icon="trash" aria-hidden="true" variant="danger"/>
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</div>
|
||||
</v-server-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import titleSection from "./titleSection.vue"
|
||||
import axios from "axios"
|
||||
export default {
|
||||
components: {
|
||||
titleSection
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
"name",
|
||||
"attributeId",
|
||||
"roles",
|
||||
"owner",
|
||||
"dateCreate",
|
||||
"icons"
|
||||
],
|
||||
options: {
|
||||
headings: {
|
||||
name: this.$root.translation('ID_ATTRIBUTE_NAME'),
|
||||
attributeId: this.$root.translation('ID_ATTRIBUTE'),
|
||||
roles: this.$root.translation('ID_ROLE'),
|
||||
owner: this.$root.translation('ID_OWNER'),
|
||||
dateCreate: this.$root.translation('ID_PRO_CREATE_DATE'),
|
||||
icons: ""
|
||||
},
|
||||
sortable: [
|
||||
"name",
|
||||
"attributeId",
|
||||
"roles",
|
||||
"dateCreate"
|
||||
],
|
||||
filterable: [
|
||||
"name",
|
||||
"attributeId",
|
||||
"roles",
|
||||
"dateCreate"
|
||||
],
|
||||
texts: {
|
||||
filter: "",
|
||||
filterPlaceholder: this.$root.translation("ID_EMPTY_SEARCH"),
|
||||
count: this.$root.translation("ID_SHOWING_FROM_RECORDS_COUNT"),
|
||||
noResults: this.$root.translation("ID_NO_MATCHING_RECORDS"),
|
||||
loading: this.$root.translation("ID_LOADING_GRID")
|
||||
},
|
||||
perPage: "pageSize" in window ? window.pageSize : 5,
|
||||
perPageValues: [],
|
||||
requestFunction(data) {
|
||||
data.start = (data.page - 1) * data.limit;
|
||||
return axios.get(this.url, {params: data}, {}).catch(function (e) {
|
||||
this.dispatch("error", e);
|
||||
});
|
||||
},
|
||||
responseAdapter(data) {
|
||||
return {
|
||||
data: data.data.data,
|
||||
count: data.data.count
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
newAttribute() {
|
||||
this.$emit("newAttribute");
|
||||
},
|
||||
editAttribute(row) {
|
||||
this.$emit("editAttribute", row);
|
||||
},
|
||||
deleteAttribute(row) {
|
||||
this.$bvModal.msgBoxConfirm(this.$root.translation('ID_THE_ATTRIBUTE_WILL_BE_DELETED_PLEASE_CONFIRM', [row.name]), {
|
||||
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;
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append("option", "delete");
|
||||
formData.append("id", row.id);
|
||||
axios.post(this.$root.baseUrl() + "userExtendedAttributes/index", formData)
|
||||
.then(response => {
|
||||
response;
|
||||
this.refresh();
|
||||
})
|
||||
.catch(error => {
|
||||
error;
|
||||
})
|
||||
.finally(() => {
|
||||
});
|
||||
}).catch(err => {
|
||||
err;
|
||||
});
|
||||
},
|
||||
refresh() {
|
||||
this.$refs.vServerTable1.refresh();
|
||||
},
|
||||
formatingRoles(rolesLabel) {
|
||||
return rolesLabel.join(", ");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user