ngx-monitorias-uniandes-lib/lib/crud-compact/crud-compact.component.metadata.json

This library is used for Monitorias-Uniandes system.

[{"__symbolic":"module","version":4,"metadata":{"CrudCompactComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"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  "]}]}],"members":{"updatedItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":3}}]}],"lastNewItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":3}}]}],"inputItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"indexAttribute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"showListAttribute":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"selectMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"componentModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"listWithAvatar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"customTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3}}]}],"pageSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":3}}]}],"readOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":3}}]}],"clearComponentState":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":97,"character":35},{"__symbolic":"reference","module":"../monitorias-pagination/monitorias-pagination.component.service","name":"MonitoriasPaginationService","line":97,"character":74},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":97,"character":121},{"__symbolic":"reference","module":"./crud-compact.service","name":"CrudCompactService","line":97,"character":166}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setPaginatedItems":[{"__symbolic":"method"}],"setNewItem":[{"__symbolic":"method"}],"deleteItem":[{"__symbolic":"method"}],"exitsElementInList":[{"__symbolic":"method"}],"setObjectFromEvent":[{"__symbolic":"method"}],"pageChanged":[{"__symbolic":"method"}],"setComponentState":[{"__symbolic":"method"}]}}}}]