ngx-monitorias-uniandes-lib/lib/crud-compact/advisor-compact/advisor-compact.component.js

This library is used for Monitorias-Uniandes system.

"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 monitorias_pagination_1 = require("../../monitorias-pagination/monitorias-pagination");
var api_1 = require("api-angular-monitorias-dto/api");
var core_2 = require("@ngx-translate/core");
var util_1 = require("util");
var crud_compact_service_1 = require("../crud-compact.service");
var AdvisorCompactComponent = /** @class */ (function (_super) {
    __extends(AdvisorCompactComponent, _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 AdvisorCompactComponent(_formBuilder, paginationService, translate, crudCompactService) {
        var _this = _super.call(this, _formBuilder, paginationService, translate, crudCompactService) || this;
        _this._formBuilder = _formBuilder;
        _this.paginationService = paginationService;
        _this.translate = translate;
        _this.crudCompactService = crudCompactService;
        /**
           *  input inner advisors to component
           */
        _this.advisors = [];
        /**
           *  output external advisors to parent component
           */
        _this.updatedAdvisors = new core_1.EventEmitter();
        return _this;
    }
    AdvisorCompactComponent.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 }] };
        this.addAdvisors(this.advisors);
    };
    AdvisorCompactComponent.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);
    };
    AdvisorCompactComponent.prototype.setNewItem = function () {
        _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);
        }
    };
    AdvisorCompactComponent.prototype.deleteItem = function (itemForDeleting) {
        _super.prototype.deleteItem.call(this, itemForDeleting);
        var index = this.advisors.findIndex(function (item) { return itemForDeleting.id === item.id; });
        this.advisors.splice(index, 1);
        this.updatedAdvisors.emit(this.advisors);
    };
    AdvisorCompactComponent.prototype.getPersonType = function (item) {
        var _this = this;
        var typesTranslated = [];
        if (item.types) {
            item.types.forEach(function (element) {
                if (util_1.isString(element)) {
                    typesTranslated.push(_this.translate.instant(element));
                }
                else {
                    var typeTranslate = api_1.Person_Type.getAllEnumValues().find(function (e) { return e.type === element; }).nameid;
                    typesTranslated.push(_this.translate.instant(typeTranslate));
                }
            });
            return typesTranslated.reduce(function (acum, currentValue) {
                return acum + ", " + currentValue;
            });
        }
        return this.translate.instant('notInformation');
    };
    AdvisorCompactComponent.decorators = [
        { type: core_1.Component, args: [{
                    selector: '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)=\"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()\">\n                <div class=\"form-group\">\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\" id=\"form-advisor\"></search-person-combo-box>\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]=\"!newItem\">{{'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>{{ 'advisor' | translate}}</th>\n                <th>{{ 'category' | 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\" 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.lastName + ' ' + item.name | titlecase)}}</td>\n                    <td>{{ getPersonType(item) }}</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          <monitorias-pagination [collectionSize]=\"inputItems.length\" [pageSize]=\"pageSize\" [page]=\"page\" (pageChanged)=\"pageChanged($event)\"></monitorias-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  "]
                },] },
    ];
    /** @nocollapse */
    AdvisorCompactComponent.ctorParameters = function () { return [
        { type: forms_1.FormBuilder, },
        { type: monitorias_pagination_1.MonitoriasPaginationService, },
        { type: core_2.TranslateService, },
        { type: crud_compact_service_1.CrudCompactService, },
    ]; };
    AdvisorCompactComponent.propDecorators = {
        "advisors": [{ type: core_1.Input },],
        "updatedAdvisors": [{ type: core_1.Output },],
    };
    return AdvisorCompactComponent;
}(crud_compact_component_1.CrudCompactComponent));
exports.AdvisorCompactComponent = AdvisorCompactComponent;
//# sourceMappingURL=advisor-compact.component.js.map