ngx-academia-uniandes-library
Version:
This library is used for Academia-Uniandes system.
333 lines • 16.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var ngx_bootstrap_1 = require("ngx-bootstrap");
var dependency_service_1 = require("./dependency.service");
var forms_1 = require("@angular/forms");
var core_2 = require("@ngx-translate/core");
var SearchDependencyMultiChoiceComponent = /** @class */ (function () {
function SearchDependencyMultiChoiceComponent(ref, translate, modalService, dependecyService, _formBuilder) {
this.ref = ref;
this.translate = translate;
this.modalService = modalService;
this.dependecyService = dependecyService;
this._formBuilder = _formBuilder;
this.preSelectedFields = [];
this.dependenciesLabel = [];
this.selectedFields = [];
this.dependencies = [];
this.selectedOptions = [];
this.preSelectedOptions = [];
this.preSelectedValues = [];
this.itemsSelected = new core_1.EventEmitter();
this.formGroup = this._formBuilder.group({
filterCtrl: ['', forms_1.Validators.compose([])],
});
}
Object.defineProperty(SearchDependencyMultiChoiceComponent.prototype, "userRestrict", {
set: function (usr) {
this.getDependecies(usr);
},
enumerable: true,
configurable: true
});
SearchDependencyMultiChoiceComponent.prototype.ngOnInit = function () {
this.setFilterListener();
};
SearchDependencyMultiChoiceComponent.prototype.ngOnChanges = function () {
this.setValuesFromParent();
};
SearchDependencyMultiChoiceComponent.prototype.setValuesFromParent = function () {
if (this.preSelectedValues.length > 0) {
this.selectedFields = Object.assign([], this.preSelectedValues.map(function (el) { return el.name; }));
this.previewText = this.preparePreviewText(this.preSelectedValues);
}
};
SearchDependencyMultiChoiceComponent.prototype.setFilterListener = function () {
var _this = this;
this.formGroup.get('filterCtrl').valueChanges.subscribe(function (change) {
_this.preSelectedFields = _this.dependenciesLabel.filter(function (field) { return field.toLowerCase().search(change.toLowerCase()) >= 0; });
_this.ref.detectChanges();
});
};
SearchDependencyMultiChoiceComponent.prototype.cleanFilter = function () {
this.formGroup.get('filterCtrl').setValue("");
this.preSelectedFields = Object.assign([], this.dependenciesLabel);
this.selectedFields = [];
};
/**
* Get all academic dependencies
*/
/**
* Get all academic dependencies
*/
SearchDependencyMultiChoiceComponent.prototype.getDependecies = /**
* Get all academic dependencies
*/
function (userRestrict) {
var _this = this;
var params = { isAcademic: true };
if (userRestrict != null) {
if (userRestrict['facultyDependency']) {
var extId = userRestrict['facultyDependency']['externalId'];
params['parentDependencyExternalId'] = extId;
params['includeParent'] = true;
}
else if (userRestrict['dependency']) {
var extId = userRestrict['dependency']['externalId'];
params['parentDependencyExternalId'] = extId;
params['includeParent'] = true;
}
}
this.dependecyService.getDependencies(params).subscribe(function (response) {
_this.dependencies = response.dependencies;
_this.dependenciesLabel = Object.assign([], _this.dependencies.map(function (dep) { return dep.name; }));
if (_this.selectedFields.length > 0) {
_this.selectedFields.forEach(function (el) {
_this.dependenciesLabel.splice(_this.dependenciesLabel.findIndex(function (dep) { return dep === el; }), 1);
});
}
_this.preSelectedFields = Object.assign([], _this.dependenciesLabel);
});
};
/**
* Open reports modal
* @param template
*/
/**
* Open reports modal
* @param template
*/
SearchDependencyMultiChoiceComponent.prototype.openModal = /**
* Open reports modal
* @param template
*/
function (template) {
if (this.modalRef) {
this.modalRef.hide();
}
this.modalRef = this.modalService.show(template, Object.assign({}, { class: 'modal-lg' }));
};
/** Set selected items
*
*/
/** Set selected items
*
*/
SearchDependencyMultiChoiceComponent.prototype.setSelectedItems = /** Set selected items
*
*/
function (event) {
if (event.target) {
var dependencySelected = this.dependencies.find(function (dep) { return dep.name === event.target.value; });
this.removeItemInListFields(this.preSelectedFields, event.target.value);
this.selectedFields.push(dependencySelected.name);
}
};
/**
* Set preselected items
* @param event
*/
/**
* Set preselected items
* @param event
*/
SearchDependencyMultiChoiceComponent.prototype.setPreSelectedItems = /**
* Set preselected items
* @param event
*/
function (event) {
if (event.target) {
var dependencySelected = this.dependencies.find(function (dep) { return dep.name === event.target.value; });
this.removeItemInListFields(this.selectedFields, event.target.value);
this.preSelectedFields.push(dependencySelected.name);
}
};
/**
* Triggers event when smth in selected select changes
* @param event
*/
/**
* Triggers event when smth in selected select changes
* @param event
*/
SearchDependencyMultiChoiceComponent.prototype.selectedChanges = /**
* Triggers event when smth in selected select changes
* @param event
*/
function (event) {
if (event.target) {
this.selectedOptions = Array.from(event.target.selectedOptions);
this.selectedOptions = this.selectedOptions.map(function (sel) { return sel.value; });
}
};
/**
* Triggers event when smth in preselected select changes
* @param event
*/
/**
* Triggers event when smth in preselected select changes
* @param event
*/
SearchDependencyMultiChoiceComponent.prototype.preSelectedChanges = /**
* Triggers event when smth in preselected select changes
* @param event
*/
function (event) {
if (event.target) {
this.preSelectedOptions = Array.from(event.target.selectedOptions);
this.preSelectedOptions = this.preSelectedOptions.map(function (sel) { return sel.value; });
}
};
/**
* Set many items from selected list
*/
/**
* Set many items from selected list
*/
SearchDependencyMultiChoiceComponent.prototype.setMultipleSelectFields = /**
* Set many items from selected list
*/
function () {
var _this = this;
this.selectedOptions.forEach(function (element) {
_this.selectedFields.push(element);
_this.removeItemInListFields(_this.preSelectedFields, element);
});
this.selectedOptions = [];
};
/**
* Set many items from preselected list
*/
/**
* Set many items from preselected list
*/
SearchDependencyMultiChoiceComponent.prototype.setMultiplePreSelectFields = /**
* Set many items from preselected list
*/
function () {
var _this = this;
this.preSelectedOptions.forEach(function (element) {
_this.preSelectedFields.push(element);
_this.removeItemInListFields(_this.selectedFields, element);
});
this.preSelectedOptions = [];
};
/**
* Set all items to preselected list
*/
/**
* Set all items to preselected list
*/
SearchDependencyMultiChoiceComponent.prototype.setAllPreselectedItems = /**
* Set all items to preselected list
*/
function () {
this.selectedFields = this.selectedFields.concat(this.preSelectedFields);
this.preSelectedFields = [];
};
/**
* Set all items to selected list
*/
/**
* Set all items to selected list
*/
SearchDependencyMultiChoiceComponent.prototype.setAllSelectedItems = /**
* Set all items to selected list
*/
function () {
this.preSelectedFields = this.preSelectedFields.concat(this.selectedFields);
this.selectedFields = [];
};
/**
* Removes items by label
* @param list
* @param item
*/
/**
* Removes items by label
* @param list
* @param item
*/
SearchDependencyMultiChoiceComponent.prototype.removeItemInListFields = /**
* Removes items by label
* @param list
* @param item
*/
function (list, item) {
var indexToRemove = list.findIndex(function (field) { return field === item; });
list.splice(indexToRemove, 1);
};
/**
* Set items and emits selected items events
*/
/**
* Set items and emits selected items events
*/
SearchDependencyMultiChoiceComponent.prototype.setItems = /**
* Set items and emits selected items events
*/
function () {
var _this = this;
this.emitValues = this.selectedFields.map(function (elm) {
return _this.dependencies.find(function (e) { return e.name === elm; });
});
this.itemsSelected.emit(this.emitValues);
this.previewText = this.preparePreviewText(this.emitValues);
this.modalRef.hide();
};
SearchDependencyMultiChoiceComponent.prototype.close = function () {
this.modalRef.hide();
};
/**
* Produce a string with all externalId dependencies selected
* @param array
*/
/**
* Produce a string with all externalId dependencies selected
* @param array
*/
SearchDependencyMultiChoiceComponent.prototype.preparePreviewText = /**
* Produce a string with all externalId dependencies selected
* @param array
*/
function (array) {
if (array.length > 0) {
if (array.length === 1) {
return array[0].externalId;
}
return array.reduce(function (accum, currentvalue, index) {
if (index === 1) {
return accum.externalId + '-' + currentvalue.externalId;
}
return accum + '-' + currentvalue.externalId;
});
}
else {
return undefined;
}
};
SearchDependencyMultiChoiceComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'app-search-dependency-multi-choice',
template: "\n <label for=\"select-btn\">{{'dependencies' | translate }}</label>\n <button type=\"button\" id=\"select-btn\" class=\"btn btn-sm btn-default\" (click)=\"openModal(multiDependencies)\">{{'select' | translate}}</button>\n <div *ngIf=\"previewText; else noDependencies\">\n <p class=\"text-size-sm\">[{{previewText | translate}}]</p>\n </div>\n <ng-template #noDependencies>\n <div>\n <p class=\"text-size-sm\">{{\"noDependenciesSelected\" | translate}}</p>\n </div>\n </ng-template>\n\n <ng-template #multiDependencies >\n <div class=\"modal-header\">\n <h4 class=\"modal-title pull-left\">{{'dependencies' | translate }}</h4>\n <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\"\n (click)=\"modalRef.hide()\">\n <span aria-hidden=\"true\">×</span>\n </button>\n </div>\n <div class=\"modal-body\">\n <div class=\"container\">\n <h6>{{'selectMultipleDependenciesMessage' | translate}}</h6>\n <form [formGroup]=\"formGroup\">\n <div>\n <label for=\"filter\">{{'filter' | translate}}</label>\n <div class=\"input-group mb-3\">\n <input type=\"text\" class=\"form-control\" placeholder=\"{{'filter' | translate}}\" aria-label=\"filter\" aria-describedby=\"basic-addon1\" formControlName=\"filterCtrl\">\n <div class=\"input-group-append\">\n <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"cleanFilter()\">{{'clear' | translate}}</button>\n </div>\n </div>\n </div>\n </form>\n <div class=\"grid-container\">\n <div class=\"left-panel\">\n <select class=\"select-item\" multiple (dblclick)=\"setSelectedItems($event)\" (change)=\"selectedChanges($event)\" name=\"formatTemplateFields\">\n <option *ngFor=\"let field of preSelectedFields\" [value]=\"field\">{{field}} </option>\n </select>\n </div>\n <div class=\"middle-btns\">\n <button type=\"button\" class=\"btn btn-default btn-sm\" (click)=\"setAllPreselectedItems()\"><i class=\"material-icons\">last_page</i></button>\n <button type=\"button\" class=\"btn btn-default btn-sm\" (click)=\"setMultiplePreSelectFields()\"><i class=\"material-icons\">chevron_left</i></button>\n <button type=\"button\" class=\"btn btn-default btn-sm\" (click)=\"setMultipleSelectFields()\"><i class=\"material-icons\">chevron_right</i></button>\n <button type=\"button\" class=\"btn btn-default btn-sm\" (click)=\"setAllSelectedItems()\"><i class=\"material-icons\">first_page</i></button>\n </div>\n <div class=\"right-panel\">\n <select class=\"select-item\" multiple (dblclick)=\"setPreSelectedItems($event)\" (change)=\"preSelectedChanges($event)\" name=\"formatTemplateFields\">\n <option *ngFor=\"let field of selectedFields\" [value]=\"field\">{{field}} </option>\n </select>\n </div>\n </div>\n <div class=\"control-btns\">\n <button type=\"button\" class=\"btn btn-primary btn-md btn-apply\" (click)=\"setItems()\">{{'select' | translate}}</button>\n <button type=\"button\" class=\"btn btn-default btn-md\" (click)=\"close()\">{{'cancel' | translate}}</button>\n </div>\n </div> \n </div>\n </ng-template>\n ",
styles: ["\n .grid-container {\n display: grid;\n grid-template-rows: 1fr;\n grid-template-columns: 1fr 100px 1fr;\n gap: 5px;\n }\n\n .btn-default {\n border: 1px solid #b7b7b7;\n }\n\n .text-size-sm {\n font-size: 12px;\n }\n\n .select-item {\n width: 100%;\n height: 100%;\n }\n\n .middle-btns {\n display: flex;\n flex-direction: column;\n margin-bottom: 10px;\n }\n\n .control-btns {\n margin-top: 10px;\n display: flex;\n justify-content: center;\n }\n\n .btn-apply {\n margin-right: 5px;\n }\n "]
},] },
];
/** @nocollapse */
SearchDependencyMultiChoiceComponent.ctorParameters = function () { return [
{ type: core_1.ChangeDetectorRef, },
{ type: core_2.TranslateService, },
{ type: ngx_bootstrap_1.BsModalService, },
{ type: dependency_service_1.DependencyService, },
{ type: forms_1.FormBuilder, },
]; };
SearchDependencyMultiChoiceComponent.propDecorators = {
"preSelectedValues": [{ type: core_1.Input },],
"userRestrict": [{ type: core_1.Input, args: ['userRestrict',] },],
"itemsSelected": [{ type: core_1.Output },],
};
return SearchDependencyMultiChoiceComponent;
}());
exports.SearchDependencyMultiChoiceComponent = SearchDependencyMultiChoiceComponent;
//# sourceMappingURL=search-dependency-multi-choice.component.js.map