ngx-academia-uniandes-library
Version:
This library is used for Academia-Uniandes system.
155 lines • 13 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var crud_compact_component_1 = require("../crud-compact.component");
var forms_1 = require("@angular/forms");
var academia_pagination_1 = require("../../academia-pagination/academia-pagination");
var core_2 = require("@ngx-translate/core");
var crud_compact_service_1 = require("../crud-compact.service");
var exportedModules_1 = require("../../exportedModules");
var service_locator_1 = require("../../service-locator");
var ExtAdvisorCompactComponent = /** @class */ (function (_super) {
__extends(ExtAdvisorCompactComponent, _super);
/**
* Constructor for the advisor-compact component
* @param _formBuilder Form Builder for creating Reactive Forms group.
* @param paginationService Academia Pagination Service for client pagination.
* @param translate Translate service for translating keys inside component
*/
function ExtAdvisorCompactComponent(_formBuilder, paginationService, translate, crudCompactService, urlService) {
var _this = _super.call(this, _formBuilder, paginationService, translate, crudCompactService) || this;
_this._formBuilder = _formBuilder;
_this.paginationService = paginationService;
_this.translate = translate;
_this.crudCompactService = crudCompactService;
_this.urlService = urlService;
/**
* input inner advisors to component
*/
_this.advisors = [];
_this.debugFlag = false;
/**
* output external advisors to parent component
*/
_this.updatedAdvisors = new core_1.EventEmitter();
_this.formGroup = _this._formBuilder.group({
nameCtrl: ["", forms_1.Validators.compose([forms_1.Validators.required])],
lastNameCtrl: ["", forms_1.Validators.compose([forms_1.Validators.required])],
emailCtrl: [
"",
forms_1.Validators.compose([forms_1.Validators.required, forms_1.Validators.email]),
],
universityCtrl: ["", forms_1.Validators.compose([forms_1.Validators.required])],
});
_this.componentModelUniversity = new exportedModules_1.SearchComboBoxGenericModel(urlService.getUniversityUrl(), [{ name: "limit", value: 5 }], null, "universities", "name", "searchUniversities");
return _this;
}
ExtAdvisorCompactComponent.prototype.ngOnInit = function () {
_super.prototype.ngOnInit.call(this);
this.listWithAvatar = true;
this.showListAttribute = "completeName";
this.indexAttribute = "id";
this.selectMode = {
nameId: "advisor",
queryParams: [
{ name: "personType", value: "[1,3]" },
{ name: "facultyState", value: true },
{ name: "limit", value: 5 },
],
};
if (this.advisors === null || this.advisors === undefined) {
this.advisors = [];
}
else {
this.addAdvisors(this.advisors);
}
};
ExtAdvisorCompactComponent.prototype.addAdvisors = function (advisors) {
var _this = this;
if (advisors.length > 0) {
advisors.forEach(function (advisor) {
if (advisor) {
_this.inputItems.push(advisor);
}
});
}
_super.prototype.ngOnChanges.call(this);
};
ExtAdvisorCompactComponent.prototype.setNewItem = function () {
_super.prototype.setObjectFromEvent.call(this, {
item: {
id: null,
name: this.name,
lastName: this.lastName,
alternativeEmail: this.email,
university: this.university.item,
},
});
_super.prototype.setNewItem.call(this);
if (!_super.prototype.exitsElementInList.call(this, this.newItem, this.advisors)) {
this.advisors.push(this.newItem);
this.updatedAdvisors.emit(this.advisors);
}
this.formGroup.reset();
this.showAddForm = false;
};
ExtAdvisorCompactComponent.prototype.deleteItem = function (itemForDeleting) {
_super.prototype.deleteItem.call(this, itemForDeleting);
if (itemForDeleting.id === null) {
var index = this.advisors.findIndex(function (item) {
return itemForDeleting.name === item.name &&
itemForDeleting.lastName === item.lastName &&
itemForDeleting.alternativeEmail === item.alternativeEmail;
});
this.advisors.splice(index, 1);
this.updatedAdvisors.emit(this.advisors);
}
else {
var advisor = this.advisors.find(function (item) { return itemForDeleting.id === item.id; });
if (advisor) {
advisor.name = '';
advisor.lastName = '';
advisor.alternativeEmail = '';
}
this.updatedAdvisors.emit(this.advisors);
}
};
ExtAdvisorCompactComponent.prototype.cancelAdd = function () {
this.formGroup.reset();
this.showAddForm = false;
};
ExtAdvisorCompactComponent.decorators = [
{ type: core_1.Component, args: [{
selector: "ext-advisor-compact",
template: "\n <div class=\"container-fluid\">\n <div class=\"btn-add\" *ngIf=\"!readOnly\">\n <button type=\"button\" *ngIf=\"!showAddForm; else showHideButton\" class=\"btn btn-sm btn-default\" (click)=\"showAddForm = !showAddForm;\">\n <span class=\"oi oi-plus\"></span> {{ 'add' | translate}}\n </button>\n <ng-template #showHideButton>\n <button type=\"button\" class=\"btn btn-sm btn-default\" (click)=\"cancelAdd()\">\n <span class=\"oi oi-minus\"></span> {{ 'hide' | translate}}\n </button>\n </ng-template>\n </div>\n\n <div *ngIf=\"showAddForm\" class=\"details-create-container\">\n <form [formGroup]=\"formGroup\" class=\"main-form\" (ngSubmit)=\"setNewItem()\">\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n <div class=\"form-group\">\n <input type=\"text\" class=\"form-control\" id=\"form-name\" name=\"name\" [(ngModel)]=\"name\" placeholder=\"{{'facultyName' | translate}}\" formControlName=\"nameCtrl\" required>\n </div>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n <div class=\"form-group\">\n <input type=\"text\" class=\"form-control\" id=\"form-lastName\" name=\"lastName\" [(ngModel)]=\"lastName\" placeholder=\"{{'facultylastName' | translate}}\" formControlName=\"lastNameCtrl\" required>\n </div>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n <div class=\"form-group\">\n <input type=\"text\" class=\"form-control\" id=\"form-email\" name=\"email\" [(ngModel)]=\"email\" placeholder=\"{{'email' | translate}}\" formControlName=\"emailCtrl\" required>\n </div>\n </div>\n <div class=\"col-xs-12 col-sm-12 col-md-6 col-lg-6\">\n <div class=\"form-group\">\n <app-search-combo-box-generic [componentModel] = \"componentModelUniversity\" [itemControl] = \"formGroup.controls.universityCtrl\"\n (itemSelected)=\"university = $event\" id=\"form-advisor\">\n </app-search-combo-box-generic>\n </div>\n </div>\n </div>\n <div class=\"saveButton\">\n <button class=\"btn btn-defult\" (click)=\"showAddForm = !showAddForm;\">{{'cancel' | translate}}</button>\n <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"!formGroup.valid\">{{'add' | translate}}</button>\n </div>\n </form>\n </div>\n <div *ngIf=\"isModified\" class=\"alert alert-custom\" role=\"alert\">\n {{ 'changesWithoutSave' | translate }}\n </div>\n\n <table class=\"table\" *ngIf=\"(inputItems && inputItems.length > 0); else noInput\">\n <thead class=\"thead-light\">\n <tr align=\"center\">\n <th>#</th>\n <th class=\"responsive-avatar\">--</th>\n <th>{{ 'extadvisor' | translate}}</th>\n <th>{{ 'email' | translate}}</th>\n <th>{{ 'university' | translate}}</th>\n <th *ngIf=\"!readOnly\">{{ 'actions' | translate}}</th>\n </tr>\n </thead>\n <tbody>\n <ng-container *ngFor=\"let item of paginatedItems; let idx = index; \">\n <tr align=\"center\">\n <td>{{ idx + (pageSize*(page-1)) + 1 }}</td>\n <td class=\"responsive-avatar\"><img class=\"img-profile\" alt=\"\" height=\"85px\" width=\"auto\" src=\"https://academia.uniandes.edu.co/WebAcademy/academyResources/images/nophoto.png\"></td>\n <td>{{(item[showListAttribute] | titleCaseAcademia) || (item.lastName + ' ' + item.name | titlecase)}}</td>\n <td>{{ item.alternativeEmail }}</td>\n <td>{{ item.university.name }}</td>\n <td *ngIf=\"!readOnly\">\n <a (click)=\"deleteItem(item)\" class=\"btn btn-default btn-md\" role=\"button\">\n <span class=\"oi oi-trash button-delete\"></span>\n </a>\n </td>\n </tr>\n </ng-container>\n </tbody>\n </table>\n <div *ngIf=\"inputItems && inputItems.length > 0\" style=\"display:flex;justify-content: center;margin-top:30px;\">\n <academia-pagination [collectionSize]=\"inputItems.length\" [pageSize]=\"pageSize\" [page]=\"page\" (pageChanged)=\"pageChanged($event)\"></academia-pagination>\n </div>\n <ng-template #noInput>\n <div align=\"center\">\n <h5>{{'notInformation' | translate}}</h5>\n </div>\n </ng-template>\n </div>\n ",
styles: ["\n\n .container-fluid .table-responsive{\n margin-top: 20px;\n }\n\n .btn-add{\n padding-bottom: 10px; \n }\n\n .container-fluid > button{\n margin-top:20px;\n }\n\n .responsive-avatar{\n display: none;\n }\n\n .saveButton{\n display: flex;\n justify-content: flex-end;\n }\n\n\n .img-profile {\n max-width: 100%;\n margin-top: -10px;\n background-color: white;\n }\n\n .details-create-container{\n margin-top: 20px;\n }\n\n .saveButton > button{\n margin: 5px;\n }\n\n .alert-custom {\n background-color: #536dfe;\n border-color: white;\n color: #fff;\n }\n\n @media (min-width: 715px){\n\n .responsive-avatar{\n display: table-cell;\n }\n\n } \n "],
providers: [crud_compact_service_1.CrudCompactService]
},] },
];
/** @nocollapse */
ExtAdvisorCompactComponent.ctorParameters = function () { return [
{ type: forms_1.FormBuilder, },
{ type: academia_pagination_1.AcademiaPaginationService, },
{ type: core_2.TranslateService, },
{ type: crud_compact_service_1.CrudCompactService, },
{ type: service_locator_1.ServiceLocator, },
]; };
ExtAdvisorCompactComponent.propDecorators = {
"advisors": [{ type: core_1.Input },],
"debugFlag": [{ type: core_1.Input },],
"updatedAdvisors": [{ type: core_1.Output },],
};
return ExtAdvisorCompactComponent;
}(crud_compact_component_1.CrudCompactComponent));
exports.ExtAdvisorCompactComponent = ExtAdvisorCompactComponent;
//# sourceMappingURL=ext-advisor-compact.component.js.map