ngx-monitorias-uniandes-lib
Version:
This library is used for Monitorias-Uniandes system.
380 lines • 25.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
var operators_1 = require("rxjs/operators");
var of_1 = require("rxjs/observable/of");
var rxjs_1 = require("rxjs");
var search_combo_box_generic_service_1 = require("../search-combo-box-generic/search-combo-box-generic.service");
var search_combo_box_1 = require("../search-combo-box");
var RemoteMultiChoiceComponent = /** @class */ (function () {
function RemoteMultiChoiceComponent(service, cd, formBuilder) {
this.service = service;
this.cd = cd;
this.formBuilder = formBuilder;
this.searchSubject$ = new rxjs_1.Subject();
this.destroy$ = new rxjs_1.Subject();
this.dataLabel = [];
this.preSelectedFields = [];
this.selectedFields = [];
this.preSelectedOptions = [];
this.selectedOptions = [];
this.preSelectedValues = [];
this.itemSelected = new core_1.EventEmitter();
this.formGroup = this.formBuilder.group({
filterCtrl: ['', forms_1.Validators.compose([])],
listOriginCtrl: ['', forms_1.Validators.compose([])],
listTargetCtrl: ['', forms_1.Validators.compose([])]
});
}
RemoteMultiChoiceComponent.prototype.ngOnInit = function () {
this.subscribeToSearch();
};
RemoteMultiChoiceComponent.prototype.ngOnChanges = function () {
this.setValuesFromParent();
};
RemoteMultiChoiceComponent.prototype.ngOnDestroy = function () {
this.destroy$.next();
this.destroy$.complete();
};
RemoteMultiChoiceComponent.prototype.subscribeToSearch = function () {
var _this = this;
this.searchSubject$.pipe(operators_1.takeUntil(this.destroy$), operators_1.debounceTime(700), operators_1.distinctUntilChanged(), operators_1.switchMap(function (value) {
return _this.searchItems(value, _this.componentModel).pipe(operators_1.catchError(function (error) {
console.error('Error searching items:', error);
return of_1.of([]);
}));
})).subscribe(function (values) {
_this.getInfoDatalabel(values);
});
};
/**
*
*/
/**
*
*/
RemoteMultiChoiceComponent.prototype.setValuesFromParent = /**
*
*/
function () {
var _this = this;
if (this.preSelectedValues && this.preSelectedValues.length > 0) {
this.selectedFields = Object.assign([], this.preSelectedValues);
this.selectedFields.forEach(function (element) {
_this.removeItemInListFields(_this.preSelectedFields, element);
});
}
else {
this.selectedFields = [];
}
};
/**
* Listen to every change that is typed into the filter component
* @param event
*/
/**
* Listen to every change that is typed into the filter component
* @param event
*/
RemoteMultiChoiceComponent.prototype.changeDataSelected = /**
* Listen to every change that is typed into the filter component
* @param event
*/
function (value) {
if (!value) {
return;
}
this.searchSubject$.next(value);
};
/**
* fill the list of preselected items
* @param data
*/
/**
* fill the list of preselected items
* @param data
*/
RemoteMultiChoiceComponent.prototype.getInfoDatalabel = /**
* fill the list of preselected items
* @param data
*/
function (data) {
var _this = this;
this.dataLabel = Object.assign([], data);
this.dataLabel.forEach(function (item) {
_this.preSelectedFields.push(item);
});
this.preSelectedFields = Object.assign([], this.dataLabel);
this.setItems();
};
RemoteMultiChoiceComponent.prototype.searchItems = function (token, componentModel) {
return this.service.getItems(token, componentModel).map(function (values) {
return values[componentModel.collectionName] ? values[componentModel.collectionName] : values;
});
};
/**
* Triggers event when smth in selected select changes
* @param event
*/
/**
* Triggers event when smth in selected select changes
* @param event
*/
RemoteMultiChoiceComponent.prototype.selectedChanges = /**
* Triggers event when smth in selected select changes
* @param event
*/
function (event) {
if (event && event.length) {
this.selectedOptions = Array.from(event);
}
};
/**
* Triggers event when smth in preselected select changes
* @param event
*/
/**
* Triggers event when smth in preselected select changes
* @param event
*/
RemoteMultiChoiceComponent.prototype.preSelectedChanges = /**
* Triggers event when smth in preselected select changes
* @param event
*/
function (event) {
if (event && event.length) {
this.preSelectedOptions = Array.from(event);
}
};
/**
* Set all items to preselected list
*/
/**
* Set all items to preselected list
*/
RemoteMultiChoiceComponent.prototype.setAllPreselectedItems = /**
* Set all items to preselected list
*/
function () {
if (!this.disabledBtn()) {
this.selectedFields = this.selectedFields.concat(this.preSelectedFields);
this.selectedFields = this.sortArraysMultichoise(this.selectedFields);
this.preSelectedFields = [];
this.setItems();
}
};
/**
* Set many items from selected list
*/
/**
* Set many items from selected list
*/
RemoteMultiChoiceComponent.prototype.setMultipleSelectFields = /**
* Set many items from selected list
*/
function () {
var _this = this;
if (!this.disabledBtn()) {
this.selectedOptions.forEach(function (element) {
_this.selectedFields.push(element);
_this.removeItemInListFields(_this.preSelectedFields, element);
});
this.selectedFields = this.sortArraysMultichoise(this.selectedFields);
this.selectedOptions = [];
this.setItems();
}
};
/**
* Set many items from preselected list
*/
/**
* Set many items from preselected list
*/
RemoteMultiChoiceComponent.prototype.setMultiplePreSelectFields = /**
* Set many items from preselected list
*/
function () {
var _this = this;
if (!this.disabledBtn()) {
this.preSelectedOptions.forEach(function (element) {
_this.preSelectedFields.push(element);
_this.removeItemInListFields(_this.selectedFields, element);
});
this.preSelectedFields = this.sortArraysMultichoise(this.preSelectedFields);
this.preSelectedOptions = [];
this.setItems();
}
};
/**
* Set all items to selected list
*/
/**
* Set all items to selected list
*/
RemoteMultiChoiceComponent.prototype.setAllSelectedItems = /**
* Set all items to selected list
*/
function () {
if (!this.disabledBtn()) {
this.preSelectedFields = this.preSelectedFields.concat(this.selectedFields);
this.preSelectedFields = this.sortArraysMultichoise(this.preSelectedFields);
this.selectedFields = [];
this.setItems();
}
};
/**
* Set selected items dbclick
*/
/**
* Set selected items dbclick
*/
RemoteMultiChoiceComponent.prototype.setSelectedItems = /**
* Set selected items dbclick
*/
function (event) {
if (event) {
this.removeItemInListFields(this.preSelectedFields, event);
this.selectedFields.push(event);
this.selectedFields = this.sortArraysMultichoise(this.selectedFields);
this.setItems();
}
};
/**
* Set preselected items dbclick
* @param event
*/
/**
* Set preselected items dbclick
* @param event
*/
RemoteMultiChoiceComponent.prototype.setPreSelectedItems = /**
* Set preselected items dbclick
* @param event
*/
function (event) {
if (event) {
this.removeItemInListFields(this.selectedFields, event);
this.preSelectedFields.push(event);
this.preSelectedFields = this.sortArraysMultichoise(this.preSelectedFields);
this.setItems();
}
};
/**
* Order the array according to the variables entered in the model
* @param arraytmp
*/
/**
* Order the array according to the variables entered in the model
* @param arraytmp
*/
RemoteMultiChoiceComponent.prototype.sortArraysMultichoise = /**
* Order the array according to the variables entered in the model
* @param arraytmp
*/
function (arraytmp) {
return Object.assign([], arraytmp);
};
/**
* Returns the converted variable according to the data type defined in the model
* @param value
*/
/**
* Returns the converted variable according to the data type defined in the model
* @param value
*/
RemoteMultiChoiceComponent.prototype.castTypeValue = /**
* Returns the converted variable according to the data type defined in the model
* @param value
*/
function (value) {
return value;
};
/**
* Removes items by label
* @param list
* @param item
*/
/**
* Removes items by label
* @param list
* @param item
*/
RemoteMultiChoiceComponent.prototype.removeItemInListFields = /**
* Removes items by label
* @param list
* @param item
*/
function (list, item) {
var _this = this;
var indexToRemove = list.findIndex(function (field) { return _this.getValue(field) === _this.getValue(item); });
list.splice(indexToRemove, 1);
};
/**
* Set items and emits selected items events
*/
/**
* Set items and emits selected items events
*/
RemoteMultiChoiceComponent.prototype.setItems = /**
* Set items and emits selected items events
*/
function () {
this.emitValues = this.selectedFields;
this.itemSelected.emit(this.emitValues);
};
/**
* Disable button when you don't have a collection
*/
/**
* Disable button when you don't have a collection
*/
RemoteMultiChoiceComponent.prototype.disabledBtn = /**
* Disable button when you don't have a collection
*/
function () {
if (this.preSelectedFields.length === 0 && this.selectedFields.length === 0) {
return true;
}
else {
return false;
}
};
/**
* Returns the comparison and display variable that has been predefined in the model
* @param value
*/
/**
* Returns the comparison and display variable that has been predefined in the model
* @param value
*/
RemoteMultiChoiceComponent.prototype.getValue = /**
* Returns the comparison and display variable that has been predefined in the model
* @param value
*/
function (value) {
return value[this.componentModel.optionField] ? String(value[this.componentModel.optionField]) : null;
};
RemoteMultiChoiceComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'app-remote-multi-choice',
template: "\n <form [formGroup]=\"formGroup\">\n <div class=\"form-group\">\n <div class=\"grid-container\">\n <div class=\"left-panel mb-3\">\n <input [formControl]=\"itemControl\" [(ngModel)]=\"asyncDataSelected\" class=\"form-control\" type=\"text\"\n formControlName=\"filterCtrl\" (ngModelChange)=\"changeDataSelected($event)\"\n placeholder=\"{{(componentModel.placeholder?componentModel.placeholder:'search')|translate}}\">\n </div>\n </div>\n </div>\n\n <div class=\"form-group\">\n <div class=\"grid-container\">\n <div class=\"left-panel\">\n <select class=\"select-item\" multiple [(ngModel)]=\"dataOrigin\"\n (ngModelChange)=\"selectedChanges($event)\" formControlName=\"listOriginCtrl\" name=\"formatTemplateFields\">\n <option *ngFor=\"let field of preSelectedFields\" (dblclick)=\"setSelectedItems(field)\" [ngValue]=\"field\">\n {{getValue(field)}} </option>\n </select>\n </div>\n <div class=\"middle-panel\">\n <span class=\"class-icon-size icon-ico14\" (click)=\"setAllPreselectedItems()\"></span>\n <span class=\"class-icon-size icon-ico15\" (click)=\"setMultipleSelectFields()\"></span>\n <span class=\"class-icon-size icon-ico16\" (click)=\"setMultiplePreSelectFields()\"></span>\n <span class=\"class-icon-size icon-ico17\" (click)=\"setAllSelectedItems()\"></span>\n </div>\n <div class=\"right-panel\">\n <select class=\" select-item\" multiple formControlName=\"listTargetCtrl\" [(ngModel)]=\"dataTarget\"\n (ngModelChange)=\"preSelectedChanges($event)\" formControlName=\"filterCtrl\" name=\"formatTemplateFields\">\n <option *ngFor=\"let field of selectedFields\" (dblclick)=\"setPreSelectedItems(field)\" [ngValue]=\"field\">\n {{getValue(field)}}</option>\n </select>\n </div>\n </div>\n </div>\n </form>\n ",
styles: ["\n .btn {\n background-color: #00ac8e;\n height: 35px;\n width: 106px;\n border-radius: 2.1px;\n font-size: 0.9rem;\n }\n .btn-success {\n color: #ffffff;\n background-color: #00ac8e;\n border-color: #00ac8e;\n }\n .class-icon-size {\n color: #0f1577;\n font-size: 30px;\n padding-left: 5px;\n padding-right: 5px;\n padding-top: 5px;\n }\n .grid-container {\n display: grid;\n grid-template-rows: 1fr;\n grid-template-columns: 1fr 35px 1fr;\n gap: 5px;\n }\n .form-group {\n margin-bottom: 5px;\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 padding: 2px 6px 2px;\n border: 1px solid #ced4da;\n border-radius: 0.25rem;\n }\n\n .middle-panel {\n display: flex;\n flex-direction: column;\n margin-bottom: 10px;\n align-items: center;\n }\n\n .control-btns {\n margin-top: 10px;\n display: flex;\n justify-content: flex-end;\n }\n\n .btn-apply {\n margin-right: 5px;\n }\n\n\n\n /**\n *Libreria iconos\n */\n\n @font-face {\n font-family: \"icomoon\";\n src: url(\"/assets/fonts/icomoon.eot?mg0wa9\");\n src: url(\"/assets/fonts/icomoon.eot?mg0wa9#iefix\") format(\"embedded-opentype\"), url(\"/assets/fonts/icomoon.ttf?mg0wa9\") format(\"truetype\"), url(\"/assets/fonts/icomoon.woff?mg0wa9\") format(\"woff\"), url(\"/assets/fonts/icomoon.svg?mg0wa9#icomoon\") format(\"svg\");\n font-weight: normal;\n font-style: normal;\n }\n [class^=\"icon-\"], [class*=\" icon-\"] {\n /* use !important to prevent issues with browser extensions that change fonts */\n font-family: \"icomoon\" !important;\n speak-as: none;\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n /* Better Font Rendering =========== */\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n .icon-bombillo:before {\n content: \"\\e900\";\n }\n .icon-analysis:before {\n content: \"\\e910\";\n }\n .icon-convenio:before {\n content: \"\\e983\";\n }\n .icon-reportes:before {\n content: \"\\e984\";\n }\n .icon-historicoM:before {\n content: \"\\e985\";\n }\n .icon-checklist:before {\n content: \"\\e90e\";\n }\n .icon-monitores:before {\n content: \"\\e90f\";\n }\n .icon-tax:before {\n content: \"\\e901\";\n }\n .icon-ico8:before {\n content: \"\\e902\";\n }\n .icon-ico9:before {\n content: \"\\e903\";\n }\n .icon-ico10:before {\n content: \"\\e904\";\n }\n .icon-ico11:before {\n content: \"\\e905\";\n }\n .icon-ico12:before {\n content: \"\\e906\";\n }\n .icon-ico13:before {\n content: \"\\e907\";\n }\n .icon-ico14:before {\n content: \"\\e908\";\n }\n .icon-ico15:before {\n content: \"\\e909\";\n }\n .icon-ico16:before {\n content: \"\\e90a\";\n }\n .icon-ico17:before {\n content: \"\\e90b\";\n }\n .icon-ico18:before {\n content: \"\\e90c\";\n }\n .icon-ico19:before {\n content: \"\\e90d\";\n }\n .icon-docu1:before {\n content: \"\\e912\";\n }\n .icon-summary:before {\n content: \"\\e913\";\n }\n .icon-pick:before {\n content: \"\\e914\";\n }\n .icon-selec:before {\n content: \"\\e915\";\n }\n .icon-book:before {\n content: \"\\e916\";\n }\n .icon-clip:before {\n content: \"\\e917\";\n }\n .icon-excel:before {\n content: \"\\e918\";\n }\n .icon-edit1:before {\n content: \"\\e919\";\n }\n .icon-bandera2:before {\n content: \"\\e91a\";\n }\n .icon-bandera1:before {\n content: \"\\e91b\";\n color: #ccc;\n }\n .icon-error_2:before {\n content: \"\\e91c\";\n }\n .icon-icon-success:before {\n content: \"\\e91d\";\n }\n .icon-ico1:before {\n content: \"\\e91e\";\n }\n .icon-ico2:before {\n content: \"\\e91f\";\n }\n .icon-ico3:before {\n content: \"\\e920\";\n }\n .icon-ico4:before {\n content: \"\\e921\";\n }\n .icon-ico5:before {\n content: \"\\e922\";\n }\n .icon-ico6:before {\n content: \"\\e923\";\n }\n .icon-ico7:before {\n content: \"\\e924\";\n }\n .icon-plus-2:before {\n content: \"\\e925\";\n }\n .icon-add_circle_outline:before {\n content: \"\\e926\";\n }\n .icon-admin-with-cogwheels:before {\n content: \"\\e927\";\n }\n .icon-icon-analysis:before {\n content: \"\\e928\";\n }\n .icon-arrow-down:before {\n content: \"\\e929\";\n }\n .icon-arrow-left:before {\n content: \"\\e92a\";\n }\n .icon-arrow-right:before {\n content: \"\\e92b\";\n }\n .icon-arrow-up:before {\n content: \"\\e92c\";\n }\n .icon-ban_gris:before {\n content: \"\\e92d\";\n color: #ccc;\n }\n .icon-bell:before {\n content: \"\\e92e\";\n }\n .icon-broom:before {\n content: \"\\e92f\";\n }\n .icon-broom-1:before {\n content: \"\\e930\";\n }\n .icon-businessman:before {\n content: \"\\e931\";\n }\n .icon-calendar:before {\n content: \"\\e932\";\n }\n .icon-calendar-1:before {\n content: \"\\e933\";\n }\n .icon-calendar-2:before {\n content: \"\\e934\";\n }\n .icon-calendar-3:before {\n content: \"\\e935\";\n }\n .icon-car:before {\n content: \"\\e936\";\n }\n .icon-caret-down:before {\n content: \"\\e937\";\n }\n .icon-sort-left:before {\n content: \"\\e938\";\n }\n .icon-check_circle:before {\n content: \"\\e939\";\n }\n .icon-icon-checklist:before {\n content: \"\\e93a\";\n }\n .icon-error:before {\n content: \"\\e93b\";\n }\n .icon-compare:before {\n content: \"\\e93c\";\n }\n .icon-declaration:before {\n content: \"\\e93d\";\n }\n .icon-delete:before {\n content: \"\\e93e\";\n }\n .icon-delete-2:before {\n content: \"\\e93f\";\n }\n .icon-document-2:before {\n content: \"\\e940\";\n }\n .icon-edit:before {\n content: \"\\e941\";\n }\n .icon-error-1:before {\n content: \"\\e942\";\n }\n .icon-exam:before {\n content: \"\\e943\";\n }\n .icon-exam-2:before {\n content: \"\\e944\";\n }\n .icon-exclamation-mark:before {\n content: \"\\e945\";\n }\n .icon-eye:before {\n content: \"\\e946\";\n }\n .icon-eye-2:before {\n content: \"\\e947\";\n }\n .icon-file:before {\n content: \"\\e948\";\n }\n .icon-files-and-folders:before {\n content: \"\\e949\";\n }\n .icon-folder:before {\n content: \"\\e94a\";\n }\n .icon-gears:before {\n content: \"\\e94b\";\n }\n .icon-group:before {\n content: \"\\e94c\";\n }\n .icon-hiring:before {\n content: \"\\e94d\";\n }\n .icon-hiring-1:before {\n content: \"\\e94e\";\n }\n .icon-home:before {\n content: \"\\e94f\";\n }\n .icon-home-1:before {\n content: \"\\e950\";\n }\n .icon-home-2:before {\n content: \"\\e951\";\n }\n .icon-home-3:before {\n content: \"\\e952\";\n }\n .icon-house:before {\n content: \"\\e953\";\n }\n .icon-house-1:before {\n content: \"\\e954\";\n }\n .icon-id:before {\n content: \"\\e955\";\n }\n .icon-idea:before {\n content: \"\\e956\";\n }\n .icon-information:before {\n content: \"\\e957\";\n }\n .icon-job:before {\n content: \"\\e958\";\n }\n .icon-job-2:before {\n content: \"\\e959\";\n }\n .icon-leader:before {\n content: \"\\e95a\";\n }\n .icon-list:before {\n content: \"\\e95b\";\n }\n .icon-logout:before {\n content: \"\\e95c\";\n }\n .icon-logout-2:before {\n content: \"\\e95d\";\n }\n .icon-loupe:before {\n content: \"\\e95e\";\n }\n .icon-man:before {\n content: \"\\e95f\";\n }\n .icon-menu:before {\n content: \"\\e960\";\n }\n .icon-menu-2:before {\n content: \"\\e961\";\n }\n .icon-minus-sign-circle:before {\n content: \"\\e962\";\n }\n .icon-minus-sign-circle-2:before {\n content: \"\\e963\";\n }\n .icon-more-details-circle:before {\n content: \"\\e964\";\n }\n .icon-notification:before {\n content: \"\\e965\";\n }\n .icon-passport:before {\n content: \"\\e966\";\n }\n .icon-pc-administrator:before {\n content: \"\\e967\";\n }\n .icon-plus:before {\n content: \"\\e968\";\n }\n .icon-profiles:before {\n content: \"\\e969\";\n }\n .icon-report:before {\n content: \"\\e96a\";\n }\n .icon-report-1:before {\n content: \"\\e96b\";\n }\n .icon-save:before {\n content: \"\\e96c\";\n }\n .icon-save-1:before {\n content: \"\\e96d\";\n }\n .icon-search:before {\n content: \"\\e96e\";\n }\n .icon-select:before {\n content: \"\\e96f\";\n }\n .icon-share:before {\n content: \"\\e970\";\n }\n .icon-share_lef:before {\n content: \"\\e971\";\n }\n .icon-sort-down:before {\n content: \"\\e972\";\n }\n .icon-caret-left:before {\n content: \"\\e973\";\n }\n .icon-sort-up:before {\n content: \"\\e974\";\n }\n .icon-sweep:before {\n content: \"\\e975\";\n }\n .icon-tap:before {\n content: \"\\e976\";\n }\n .icon-test:before {\n content: \"\\e977\";\n }\n .icon-test-1:before {\n content: \"\\e978\";\n }\n .icon-upload:before {\n content: \"\\e979\";\n }\n .icon-upload-2:before {\n content: \"\\e97a\";\n }\n .icon-upload-1:before {\n content: \"\\e97b\";\n }\n .icon-user:before {\n content: \"\\e97c\";\n }\n .icon-verified:before {\n content: \"\\e97d\";\n }\n .icon-video-conference:before {\n content: \"\\e97e\";\n }\n "]
},] },
];
/** @nocollapse */
RemoteMultiChoiceComponent.ctorParameters = function () { return [
{ type: search_combo_box_generic_service_1.SearchComboBoxGenericService, },
{ type: core_1.ChangeDetectorRef, },
{ type: forms_1.FormBuilder, },
]; };
RemoteMultiChoiceComponent.propDecorators = {
"itemControl": [{ type: core_1.Input },],
"componentModel": [{ type: core_1.Input },],
"preSelectedValues": [{ type: core_1.Input },],
"itemSelected": [{ type: core_1.Output },],
};
return RemoteMultiChoiceComponent;
}());
exports.RemoteMultiChoiceComponent = RemoteMultiChoiceComponent;
//# sourceMappingURL=remote-multi-choice.component.js.map