ngx-monitorias-uniandes-lib
Version:
This library is used for Monitorias-Uniandes system.
218 lines • 15.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
var monitorias_pagination_component_service_1 = require("../monitorias-pagination/monitorias-pagination.component.service");
var core_2 = require("@ngx-translate/core");
var sweetalert2_1 = require("sweetalert2");
var crud_compact_service_1 = require("./crud-compact.service");
var search_combo_box_generic_model_1 = require("../search-combo-box/search-combo-box-generic/search-combo-box-generic.model");
var CrudCompactComponent = /** @class */ (function () {
/**
* Constructor for the crud-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 CrudCompactComponent(_formBuilder, paginationService, translate, crudCompactService) {
this._formBuilder = _formBuilder;
this.paginationService = paginationService;
this.translate = translate;
this.crudCompactService = crudCompactService;
/**
* updatedItems from table
*/
this.updatedItems = new core_1.EventEmitter();
/**
* last new item added from table
*/
this.lastNewItem = new core_1.EventEmitter();
/**
* input items to component
*/
this.inputItems = [];
/**
* define if crud-component displays an image inside table
*/
this.listWithAvatar = false;
/**
* define number of elements by page inside table.
*/
this.pageSize = 5;
/**
* define whether crud compact is read Only
*/
this.readOnly = false;
/**
* define
*/
this.clearComponentState = false;
/**
* variable to show or to hide add button.
*/
this.showAddForm = false;
/**
* variable to define number page
*/
this.page = 1;
/**
* variable to define component state (true => Modified, false => NoModified or saved)
*/
this.isModified = false;
this.formGroup = this._formBuilder.group({
itemCtrl: ['', forms_1.Validators.compose([forms_1.Validators.required])],
});
}
CrudCompactComponent.prototype.ngOnInit = function () {
var _this = this;
this.crudCompactService.currentStateObs.subscribe(function (data) {
_this.setComponentState(data);
});
if (!this.componentModel)
console.error(crud_compact_service_1.NO_COMPONENT_MODEL);
};
CrudCompactComponent.prototype.ngOnChanges = function () {
if (this.inputItems) {
this.setPaginatedItems();
}
};
/**
* The method set paginated items according changes in page and pageSize
*/
/**
* The method set paginated items according changes in page and pageSize
*/
CrudCompactComponent.prototype.setPaginatedItems = /**
* The method set paginated items according changes in page and pageSize
*/
function () {
this.paginatedItems = this.paginationService.getRecordsByPage(this.page, this.pageSize, this.inputItems);
if (this.paginatedItems.length === 0 && this.inputItems.length != 0) {
this.page--;
this.paginatedItems = this.paginationService.getRecordsByPage(this.page, this.pageSize, this.inputItems);
}
};
/**
* The method save new item
*/
/**
* The method save new item
*/
CrudCompactComponent.prototype.setNewItem = /**
* The method save new item
*/
function () {
if (this.newItem) {
var exist = this.exitsElementInList(this.newItem, this.inputItems);
if (!exist) {
this.inputItems.unshift(this.newItem);
this.lastNewItem.emit(this.newItem);
}
else {
sweetalert2_1.default(this.translate.instant('errorAdd'), this.translate.instant('itemDuplicated'), 'error');
}
this.updatedItems.emit(this.inputItems);
this.setPaginatedItems();
this.crudCompactService.updateState(true);
}
};
/**
* The method deletes specific item from of list
*/
/**
* The method deletes specific item from of list
*/
CrudCompactComponent.prototype.deleteItem = /**
* The method deletes specific item from of list
*/
function (itemForDeleting) {
var index = this.inputItems.findIndex(function (item) { return itemForDeleting.id === item.id; });
this.inputItems.splice(index, 1);
this.updatedItems.emit(this.inputItems);
this.setPaginatedItems();
this.crudCompactService.updateState(true);
};
/**
* The method checks if specific item is in a list
*/
/**
* The method checks if specific item is in a list
*/
CrudCompactComponent.prototype.exitsElementInList = /**
* The method checks if specific item is in a list
*/
function (item, list) {
var _this = this;
var exist = false;
if (list) {
list.forEach(function (element) {
if (element[_this.indexAttribute] === item[_this.indexAttribute]) {
exist = true;
}
});
}
return exist;
};
/**
* The method sets Object from Academia Components to newItem object
*/
/**
* The method sets Object from Academia Components to newItem object
*/
CrudCompactComponent.prototype.setObjectFromEvent = /**
* The method sets Object from Academia Components to newItem object
*/
function (event) {
this.newItem = event ? event.item : event;
};
/**
* The method sets Academia Paginator changes over current list
*/
/**
* The method sets Academia Paginator changes over current list
*/
CrudCompactComponent.prototype.pageChanged = /**
* The method sets Academia Paginator changes over current list
*/
function (event) {
if (event) {
this.page = event.page;
this.pageSize = event.pageSize;
this.setPaginatedItems();
}
};
CrudCompactComponent.prototype.setComponentState = function (isModified) {
this.isModified = isModified;
};
CrudCompactComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'crud-compact',
template: "\n <div class=\"container-fluid\">\n <ng-template #defaultTemplate>\n <div *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)=\"showAddForm = !showAddForm;\">\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()\" [ngSwitch]=\"selectMode.nameId\">\n <div class=\"form-group\" *ngSwitchCase=\"'program'\">\n <search-program-combo-box [debugFlag]=true [placeHolder]=\"'selectProgram'\" [queryParams]=\"selectMode.queryParams ? selectMode.queryParams :[{'name':'limit','value': 5}]\"\n (itemSelected)=\"setObjectFromEvent($event)\" [itemControl]=\"formGroup.controls.itemCtrl\" ></search-program-combo-box>\n </div>\n <div class=\"form-group\" *ngSwitchCase=\"'user'\">\n <search-user-combo-box [debugFlag]=true [placeHolder]=\"'selectUser'\" [queryParams]=\"selectMode.queryParams ? selectMode.queryParams :[{'name':'limit','value': 5}]\"\n (itemSelected)=\"setObjectFromEvent($event)\" [itemControl]=\"formGroup.controls.itemCtrl\" ></search-user-combo-box>\n </div>\n <div class=\"form-group\" *ngSwitchCase=\"'person'\">\n <search-person-combo-box [debugFlag]=true [placeHolder]=\"'selectPerson'\" [queryParams]=\"selectMode.queryParams ? selectMode.queryParams :[{'name':'limit','value': 5}]\"\n (itemSelected)=\"setObjectFromEvent($event)\" [itemControl]=\"formGroup.controls.itemCtrl\" ></search-person-combo-box>\n </div>\n <div class=\"form-group\" *ngSwitchCase=\"'dependency'\">\n <search-dependency-combo-box [debugFlag]=true [placeHolder]=\"'selectDependency'\" [queryParams]=\"selectMode.queryParams ? selectMode.queryParams :[{'name':'limit','value': 5}]\"\n (itemSelected)=\"setObjectFromEvent($event)\" [itemControl]=\"formGroup.controls.itemCtrl\" ></search-dependency-combo-box>\n </div>\n <div class=\"form-group\" *ngSwitchDefault >\n <app-search-combo-box-generic [componentModel]=\"componentModel\" [itemControl]=\"formGroup.controls.itemCtrl\" (itemSelected)=\"setObjectFromEvent($event)\"></app-search-combo-box-generic>\n </div>\n\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]=\"!newItem\">{{'add' | translate}}</button>\n </div>\n </form>\n </div>\n <div *ngIf=\"isModified\" class=\"alert alert-warning\" role=\"alert\">\n {{ 'changesWithoutSave' | translate }}\n </div>\n <div class=\"table-responsive\">\n <ng-template #withoutAvatar>\n <table class=\"table\">\n <thead class=\"thead-light\">\n <tr>\n <th>#</th>\n <th>{{ selectMode.nameId | 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>\n <td>{{ idx + (pageSize*(page-1)) + 1 }}</td>\n <td>{{item.name | titlecase}}</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 </ng-template>\n <ng-template #withAvatar>\n <table class=\"table\">\n <thead class=\"thead-light\">\n <tr>\n <th>#</th>\n <th class=\"responsive-avatar\">{{ 'photo' | translate}}</th>\n <th>{{ selectMode.nameId | 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>\n <td>{{ idx + (pageSize*(page-1)) + 1 }}</td>\n <td class=\"responsive-avatar\"><img class=\"img-profile\" alt=\"\" height=\"85px\" width=\"auto\" onerror=\"this.src='https://academia.uniandes.edu.co/WebAcademy/academyResources/images/nophoto.png'\"\n src=\"/WebServicesAcademy/api/AcademyImages/photos/{{item.id}}.JPG\"></td>\n <td>{{(item[showListAttribute] | titleCaseAcademia) || (item.name | titlecase)}}</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 </ng-template>\n <ng-container *ngTemplateOutlet=\"listWithAvatar ? withAvatar : withoutAvatar\" ></ng-container>\n </div>\n\n\n <div *ngIf=\"inputItems && inputItems.length > 0\" style=\"display:flex;justify-content: center;margin-top:30px;\">\n <monitorias-pagination [collectionSize]=\"inputItems.length\" [pageSize]=\"pageSize\" [page]=\"page\" (pageChanged)=\"pageChanged($event)\"></monitorias-pagination>\n </div>\n <div *ngIf=\"!(inputItems && inputItems.length > 0) && !showAddForm\" style=\"display:flex;justify-content: center;margin-top:30px;\">\n <h4>{{ 'noData' | translate}}</h4>\n </div>\n </ng-template>\n\n\n <ng-container *ngTemplateOutlet=\"customTemplate ? customTemplate: defaultTemplate\"></ng-container>\n </div>\n ",
styles: ["\n\n .container-fluid .table-responsive{\n margin-top: 20px;\n }\n\n .container-fluid > button{\n margin-top:20px;\n }\n\n .saveButton{\n display: flex;\n justify-content: flex-end;\n }\n\n .responsive-avatar{\n display: none;\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 @media (min-width: 715px){\n\n .responsive-avatar{\n display: table-cell;\n }\n\n } \n "]
},] },
];
/** @nocollapse */
CrudCompactComponent.ctorParameters = function () { return [
{ type: forms_1.FormBuilder, },
{ type: monitorias_pagination_component_service_1.MonitoriasPaginationService, },
{ type: core_2.TranslateService, },
{ type: crud_compact_service_1.CrudCompactService, },
]; };
CrudCompactComponent.propDecorators = {
"updatedItems": [{ type: core_1.Output },],
"lastNewItem": [{ type: core_1.Output },],
"inputItems": [{ type: core_1.Input },],
"indexAttribute": [{ type: core_1.Input },],
"showListAttribute": [{ type: core_1.Input },],
"selectMode": [{ type: core_1.Input },],
"componentModel": [{ type: core_1.Input },],
"listWithAvatar": [{ type: core_1.Input },],
"customTemplate": [{ type: core_1.Input },],
"pageSize": [{ type: core_1.Input },],
"readOnly": [{ type: core_1.Input },],
"clearComponentState": [{ type: core_1.Input },],
};
return CrudCompactComponent;
}());
exports.CrudCompactComponent = CrudCompactComponent;
//# sourceMappingURL=crud-compact.component.js.map