iptdevs-design-system 2.6.17 → 2.6.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/forms/create-user-form/create-user-form.component.mjs +41 -20
- package/fesm2015/iptdevs-design-system.mjs +40 -19
- package/fesm2015/iptdevs-design-system.mjs.map +1 -1
- package/fesm2020/iptdevs-design-system.mjs +40 -19
- package/fesm2020/iptdevs-design-system.mjs.map +1 -1
- package/lib/components/forms/create-user-form/create-user-form.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -1131,6 +1131,7 @@ class CreateUserFormComponent {
|
|
|
1131
1131
|
this.userCreated = new EventEmitter(false);
|
|
1132
1132
|
this.onHide = new EventEmitter(false);
|
|
1133
1133
|
this.loader = false;
|
|
1134
|
+
this.photo = '';
|
|
1134
1135
|
}
|
|
1135
1136
|
ngOnInit() {
|
|
1136
1137
|
this.initForm();
|
|
@@ -1182,32 +1183,17 @@ class CreateUserFormComponent {
|
|
|
1182
1183
|
this.states = response.data;
|
|
1183
1184
|
});
|
|
1184
1185
|
}
|
|
1185
|
-
initForm() {
|
|
1186
|
-
this.createUserForm = this.fb.group({
|
|
1187
|
-
name: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(32)],],
|
|
1188
|
-
last_name: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(32),],],
|
|
1189
|
-
email: ['', [Validators.required, Validators.maxLength(300)]],
|
|
1190
|
-
id_card_type: ['', [Validators.required]],
|
|
1191
|
-
id_card: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(20),]],
|
|
1192
|
-
phone_indicative: ['', [Validators.required]],
|
|
1193
|
-
city: ['', [Validators.required]],
|
|
1194
|
-
role: ['', [Validators.required]],
|
|
1195
|
-
service_hour: ['', [Validators.required]],
|
|
1196
|
-
phone_number: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(15)]],
|
|
1197
|
-
password: ['', [Validators.required, Validators.minLength(7), Validators.maxLength(32)]],
|
|
1198
|
-
re_password: ['', [Validators.required, Validators.minLength(7), Validators.maxLength(32)]],
|
|
1199
|
-
state: [''],
|
|
1200
|
-
});
|
|
1201
|
-
}
|
|
1202
1186
|
getRolesOptions() {
|
|
1203
1187
|
// Estudiante
|
|
1204
1188
|
if (this.userType === 'student') {
|
|
1189
|
+
this.setPhoto('student');
|
|
1205
1190
|
return [
|
|
1206
1191
|
{ code: '13', name: 'Student' },
|
|
1207
1192
|
];
|
|
1208
1193
|
}
|
|
1209
1194
|
// Académico
|
|
1210
1195
|
if (this.userType === 'academic') {
|
|
1196
|
+
this.setPhoto('academic');
|
|
1211
1197
|
return [
|
|
1212
1198
|
{ code: '11', name: 'Teacher PRO' },
|
|
1213
1199
|
{ code: '12', name: 'Teacher' },
|
|
@@ -1215,6 +1201,7 @@ class CreateUserFormComponent {
|
|
|
1215
1201
|
}
|
|
1216
1202
|
// Administrativo
|
|
1217
1203
|
if (this.userType === 'administrative') {
|
|
1204
|
+
this.setPhoto('administrative');
|
|
1218
1205
|
return [
|
|
1219
1206
|
{ code: '31', name: 'Administrative Supervisor' },
|
|
1220
1207
|
{ code: '32', name: 'Administrative Advisor' },
|
|
@@ -1222,6 +1209,7 @@ class CreateUserFormComponent {
|
|
|
1222
1209
|
}
|
|
1223
1210
|
// Marketing
|
|
1224
1211
|
if (this.userType === 'marketing') {
|
|
1212
|
+
this.setPhoto('marketing');
|
|
1225
1213
|
return [
|
|
1226
1214
|
{ code: '21', name: 'Marketing Supervisor' },
|
|
1227
1215
|
{ code: '22', name: 'Marketing Advisor' },
|
|
@@ -1229,6 +1217,7 @@ class CreateUserFormComponent {
|
|
|
1229
1217
|
}
|
|
1230
1218
|
// Comercial
|
|
1231
1219
|
if (this.userType === 'commercial') {
|
|
1220
|
+
this.setPhoto('commercial');
|
|
1232
1221
|
return [
|
|
1233
1222
|
{ code: '41', name: 'Commercial Supervisor' },
|
|
1234
1223
|
{ code: '42', name: 'Commercial Advisor' },
|
|
@@ -1236,12 +1225,44 @@ class CreateUserFormComponent {
|
|
|
1236
1225
|
}
|
|
1237
1226
|
// Cartera
|
|
1238
1227
|
if (this.userType === 'treasure') {
|
|
1228
|
+
this.setPhoto('treasure');
|
|
1239
1229
|
return [
|
|
1240
1230
|
{ code: '51', name: 'Treauser Supervisor' },
|
|
1241
1231
|
{ code: '52', name: 'Treauser Advisor' },
|
|
1242
1232
|
];
|
|
1243
1233
|
}
|
|
1244
1234
|
}
|
|
1235
|
+
initForm() {
|
|
1236
|
+
this.createUserForm = this.fb.group({
|
|
1237
|
+
name: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(32)],],
|
|
1238
|
+
last_name: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(32),],],
|
|
1239
|
+
email: ['', [Validators.required, Validators.maxLength(300)]],
|
|
1240
|
+
id_card_type: ['', [Validators.required]],
|
|
1241
|
+
id_card: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(20),]],
|
|
1242
|
+
phone_indicative: ['', [Validators.required]],
|
|
1243
|
+
city: ['', [Validators.required]],
|
|
1244
|
+
role: ['', [Validators.required]],
|
|
1245
|
+
service_hour: ['', [Validators.required]],
|
|
1246
|
+
phone_number: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(15)]],
|
|
1247
|
+
password: ['', [Validators.required, Validators.minLength(7), Validators.maxLength(32)]],
|
|
1248
|
+
re_password: ['', [Validators.required, Validators.minLength(7), Validators.maxLength(32)]],
|
|
1249
|
+
state: [''],
|
|
1250
|
+
});
|
|
1251
|
+
}
|
|
1252
|
+
setPhoto(type) {
|
|
1253
|
+
if (type === 'student')
|
|
1254
|
+
this.photo = '../../../assets/user-form-assets/estudiante.jpg';
|
|
1255
|
+
if (type === 'academic')
|
|
1256
|
+
this.photo = '../../../assets/user-form-assets/academico.png';
|
|
1257
|
+
if (type === 'administrative')
|
|
1258
|
+
this.photo = '../../../assets/user-form-assets/administrativo.jpg';
|
|
1259
|
+
if (type === 'marketing')
|
|
1260
|
+
this.photo = '../../../assets/user-form-assets/marketing.jpg';
|
|
1261
|
+
if (type === 'commercial')
|
|
1262
|
+
this.photo = '../../../assets/user-form-assets/comercial.jpg';
|
|
1263
|
+
if (type === 'treasure')
|
|
1264
|
+
this.photo = '../../../assets/user-form-assets/administrativo.jpg';
|
|
1265
|
+
}
|
|
1245
1266
|
selectRol(role) {
|
|
1246
1267
|
if (role !== 'Seleccione el rol') {
|
|
1247
1268
|
this.createUserForm.controls['role'].setValue(role);
|
|
@@ -1289,7 +1310,7 @@ class CreateUserFormComponent {
|
|
|
1289
1310
|
}
|
|
1290
1311
|
}
|
|
1291
1312
|
CreateUserFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: CreateUserFormComponent, deps: [{ token: i1$1.FormBuilder }, { token: ParameterService }, { token: UserService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1292
|
-
CreateUserFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: CreateUserFormComponent, selector: "ipt-create-user-form", inputs: { userType: "userType", visibility: "visibility" }, outputs: { userCreated: "userCreated", onHide: "onHide" }, ngImport: i0, template: "<main *ngIf=\"visibility\">\n <div @fade class=\"modal_container\">\n <div class=\"header_modal\">\n <h1>Crear usuario de {{ userType | titlecase}}</h1>\n <button (click)=\"closeModal()\">x</button>\n </div>\n <form autocomplete=\"off\" [formGroup]=\"createUserForm\">\n
|
|
1313
|
+
CreateUserFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: CreateUserFormComponent, selector: "ipt-create-user-form", inputs: { userType: "userType", visibility: "visibility" }, outputs: { userCreated: "userCreated", onHide: "onHide" }, ngImport: i0, template: "<main *ngIf=\"visibility\">\n <div @fade class=\"modal_container\">\n <div class=\"header_modal\">\n <h1>Crear usuario de {{ userType | titlecase}}</h1>\n <button (click)=\"closeModal()\">x</button>\n </div>\n <div class=\"grid_container\">\n <div>\n <form autocomplete=\"off\" [formGroup]=\"createUserForm\">\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Nombre completo'\"\n [control]=\"createUserForm.controls['name']\"\n [validateText]=\"'Debe ingresar el nombre'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Apellidos'\"\n [control]=\"createUserForm.controls['last_name']\"\n [validateText]=\"'Debe ingresar los apellidos'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Correo electr\u00F3nico'\"\n [control]=\"createUserForm.controls['email']\"\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [defaultText]=\"'Seleccione el rol'\"\n (eventSelect)=\"selectRol($event)\"\n [data]=\"getRolesOptions()\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n [data]=\"phoneNumberIndicatives\"\n (eventSelect)=\"selectIndicatives($event)\"\n [defaultText]=\"'Seleccione el indicativo'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'N\u00FAmero de tel\u00E9fono'\"\n [control]=\"createUserForm.controls['phone_number']\"\n [validateText]=\"'Debe ingresar un n\u00FAmero de tel\u00E9fono v\u00E1lido'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [data]=\"idTypes\"\n (eventSelect)=\"selectIdType($event)\"\n [defaultText]=\"'Ingrese el tipo de documento'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'Documento de identidad'\"\n [control]=\"createUserForm.controls['id_card']\"\n [validateText]=\"'Debe ingresar el n\u00FAmero de documento'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectState($event)\"\n [data]=\"states\"\n [defaultText]=\"'Seleccione el departamento'\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectCity($event)\"\n [data]=\"cities\"\n [defaultText]=\"'Ciudad de residencia'\"\n ></ipt-select>\n <ipt-input *ngIf=\"!(userType === 'student')\"\n [inputType]=\"'number'\"\n [placeHolder]=\"'Ingrese las horas de servicio'\"\n [control]=\"createUserForm.controls['service_hour']\"\n [validateText]=\"'Debe ingresar las horas de servicio'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'password'\"\n [placeHolder]=\"'Contrase\u00F1a'\"\n [control]=\"createUserForm.controls['password']\"\n >\n </ipt-input>\n <ipt-input\n [inputType]=\"'password'\"\n [placeHolder]=\"'Repetir contrase\u00F1a'\"\n [control]=\"createUserForm.controls['re_password']\"\n >\n </ipt-input>\n </form>\n\n <div class=\"buttons-container\">\n <ipt-button\n [label]=\"'Crear usuario'\"\n [isEnabled]=\"\n !loader &&\n createUserForm.value['re_password'] ===\n createUserForm.value['password']\n \"\n (onClick)=\"createUser()\"\n [primary]=\"true\"\n >\n </ipt-button>\n </div>\n </div>\n <div [ngStyle]=\"{'background-image': 'url(' + photo + ')'}\" class=\"user_type_image\"></div>\n </div>\n </div>\n</main>\n", styles: ["@media screen and (min-width: 320px){main{background:rgba(0,0,0,.472);color:#fff;position:fixed;top:0;left:0;height:100vh;width:100vw;transition:all .5s}main .modal_container{width:60%;height:-moz-fit-content;height:fit-content;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;background-color:#fff;border-radius:6px}.header_modal{display:flex;padding:0 15px;gap:1rem}.header_modal h1{padding:.5rem;background-color:#1c77f7;color:#fff;width:100%;border-radius:10px;font-size:1.25rem;font-weight:700}.header_modal button{margin-left:auto;font-size:26px;padding:1rem;font-weight:200;color:#6c7f7d;display:flex;width:25px;align-items:center;justify-content:center;transition:.2s;background:transparent;border:none}.header_modal button:hover{cursor:pointer;border-radius:50%;background-color:#d4d4d4}.grid_container{display:grid;grid-template-columns:1fr}form{display:grid;grid-template-columns:1fr;grid-gap:.25rem;gap:.25rem;justify-content:center;padding:0 1rem}.buttons-container{margin-top:2rem;margin-bottom:2rem;display:flex;justify-content:center;align-items:center;justify-items:center;align-content:center}.user_type_image{display:none}}@media screen and (min-width: 768px){.grid_container{display:grid;grid-template-columns:1fr 300px;grid-gap:1rem;gap:1rem}form{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem;justify-content:center}.user_type_image{display:flex;background-size:cover;background-repeat:no-repeat;background-position:center;height:100%;border-radius:1rem}}\n"], components: [{ type: InputComponent, selector: "ipt-input", inputs: ["inputType", "placeHolder", "validateText", "withPipe", "list", "iconUrl", "control", "prefix", "thousands", "decimal"], outputs: ["dateSelected"] }, { type: SelectComponent, selector: "ipt-select", inputs: ["isRequired", "data", "defaultText", "selectCode", "disabledSel", "control"], outputs: ["eventSelect"] }, { type: ButtonComponent, selector: "ipt-button", inputs: ["primary", "size", "label", "buttonType", "isEnabled"], outputs: ["onClick"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "titlecase": i1.TitleCasePipe }, animations: [
|
|
1293
1314
|
trigger('fade', [
|
|
1294
1315
|
transition('void => *', [
|
|
1295
1316
|
style({ opacity: 0 }),
|
|
@@ -1306,7 +1327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImpor
|
|
|
1306
1327
|
animate(200, style({ opacity: 1 }))
|
|
1307
1328
|
])
|
|
1308
1329
|
])
|
|
1309
|
-
], template: "<main *ngIf=\"visibility\">\n <div @fade class=\"modal_container\">\n <div class=\"header_modal\">\n <h1>Crear usuario de {{ userType | titlecase}}</h1>\n <button (click)=\"closeModal()\">x</button>\n </div>\n <form autocomplete=\"off\" [formGroup]=\"createUserForm\">\n
|
|
1330
|
+
], template: "<main *ngIf=\"visibility\">\n <div @fade class=\"modal_container\">\n <div class=\"header_modal\">\n <h1>Crear usuario de {{ userType | titlecase}}</h1>\n <button (click)=\"closeModal()\">x</button>\n </div>\n <div class=\"grid_container\">\n <div>\n <form autocomplete=\"off\" [formGroup]=\"createUserForm\">\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Nombre completo'\"\n [control]=\"createUserForm.controls['name']\"\n [validateText]=\"'Debe ingresar el nombre'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Apellidos'\"\n [control]=\"createUserForm.controls['last_name']\"\n [validateText]=\"'Debe ingresar los apellidos'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'text'\"\n [placeHolder]=\"'Correo electr\u00F3nico'\"\n [control]=\"createUserForm.controls['email']\"\n [validateText]=\"'Debe tener dominio @inglesparatodos.edu.co'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [defaultText]=\"'Seleccione el rol'\"\n (eventSelect)=\"selectRol($event)\"\n [data]=\"getRolesOptions()\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n [data]=\"phoneNumberIndicatives\"\n (eventSelect)=\"selectIndicatives($event)\"\n [defaultText]=\"'Seleccione el indicativo'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'N\u00FAmero de tel\u00E9fono'\"\n [control]=\"createUserForm.controls['phone_number']\"\n [validateText]=\"'Debe ingresar un n\u00FAmero de tel\u00E9fono v\u00E1lido'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n [data]=\"idTypes\"\n (eventSelect)=\"selectIdType($event)\"\n [defaultText]=\"'Ingrese el tipo de documento'\"\n ></ipt-select>\n <ipt-input\n [inputType]=\"'number'\"\n [placeHolder]=\"'Documento de identidad'\"\n [control]=\"createUserForm.controls['id_card']\"\n [validateText]=\"'Debe ingresar el n\u00FAmero de documento'\"\n ></ipt-input>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectState($event)\"\n [data]=\"states\"\n [defaultText]=\"'Seleccione el departamento'\"\n ></ipt-select>\n <ipt-select\n [isRequired]=\"true\"\n (eventSelect)=\"selectCity($event)\"\n [data]=\"cities\"\n [defaultText]=\"'Ciudad de residencia'\"\n ></ipt-select>\n <ipt-input *ngIf=\"!(userType === 'student')\"\n [inputType]=\"'number'\"\n [placeHolder]=\"'Ingrese las horas de servicio'\"\n [control]=\"createUserForm.controls['service_hour']\"\n [validateText]=\"'Debe ingresar las horas de servicio'\"\n ></ipt-input>\n <ipt-input\n [inputType]=\"'password'\"\n [placeHolder]=\"'Contrase\u00F1a'\"\n [control]=\"createUserForm.controls['password']\"\n >\n </ipt-input>\n <ipt-input\n [inputType]=\"'password'\"\n [placeHolder]=\"'Repetir contrase\u00F1a'\"\n [control]=\"createUserForm.controls['re_password']\"\n >\n </ipt-input>\n </form>\n\n <div class=\"buttons-container\">\n <ipt-button\n [label]=\"'Crear usuario'\"\n [isEnabled]=\"\n !loader &&\n createUserForm.value['re_password'] ===\n createUserForm.value['password']\n \"\n (onClick)=\"createUser()\"\n [primary]=\"true\"\n >\n </ipt-button>\n </div>\n </div>\n <div [ngStyle]=\"{'background-image': 'url(' + photo + ')'}\" class=\"user_type_image\"></div>\n </div>\n </div>\n</main>\n", styles: ["@media screen and (min-width: 320px){main{background:rgba(0,0,0,.472);color:#fff;position:fixed;top:0;left:0;height:100vh;width:100vw;transition:all .5s}main .modal_container{width:60%;height:-moz-fit-content;height:fit-content;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;background-color:#fff;border-radius:6px}.header_modal{display:flex;padding:0 15px;gap:1rem}.header_modal h1{padding:.5rem;background-color:#1c77f7;color:#fff;width:100%;border-radius:10px;font-size:1.25rem;font-weight:700}.header_modal button{margin-left:auto;font-size:26px;padding:1rem;font-weight:200;color:#6c7f7d;display:flex;width:25px;align-items:center;justify-content:center;transition:.2s;background:transparent;border:none}.header_modal button:hover{cursor:pointer;border-radius:50%;background-color:#d4d4d4}.grid_container{display:grid;grid-template-columns:1fr}form{display:grid;grid-template-columns:1fr;grid-gap:.25rem;gap:.25rem;justify-content:center;padding:0 1rem}.buttons-container{margin-top:2rem;margin-bottom:2rem;display:flex;justify-content:center;align-items:center;justify-items:center;align-content:center}.user_type_image{display:none}}@media screen and (min-width: 768px){.grid_container{display:grid;grid-template-columns:1fr 300px;grid-gap:1rem;gap:1rem}form{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem;justify-content:center}.user_type_image{display:flex;background-size:cover;background-repeat:no-repeat;background-position:center;height:100%;border-radius:1rem}}\n"] }]
|
|
1310
1331
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: ParameterService }, { type: UserService }]; }, propDecorators: { userType: [{
|
|
1311
1332
|
type: Input
|
|
1312
1333
|
}], visibility: [{
|