Ngx Monitorias Uniandes Library

This library is used for Monitorias-Uniandes system.

Install

Use npm package manager and execute following command:

npm i ngx-monitorias-uniandes-lib --save

Then import any avaliable ngx-monitorias-uniandes module in your main module. The following example imports SearchComboBoxModule module.

    import { AppComponent } from './app.component';
    import { SearchComboBoxModule } from 'ngx-monitorias-uniandes';



    @NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        SearchComboBoxModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

Use

Once ngx-academia uniandes modules were imported, you can add the components in your main app.

Search Combo Box

1. Define a component model object in component.ts like this :

    this.componentModel = {
        "urlService" : "http://myapi/items",
        "queryParams" : [{"name": "start", "value": 0}],
        "body": {"userName": "juanx", "age": 11}, 
        "collectionName": "records",
        "optionField" : "fullName", //Optional
        "placeholder" : "Search items", //Optional
        "optionsLimit" : 5, //Optional
        "findBy": "UserName",//Optional
    }

where urlService is an API service URL, queryParams is an array with queryParams for API requests, body is an object search params for searchs with POST method, collectioName is attribute name where are located array data (if response object is paginated), optionField is attribute name that contains the options value to show, placeholder is a string for setting the placeholder to component (Default "search"), optionsLimit* you can configure number of options to display and with findBy you can set up which attribute in the body must be used for searching (Only works when body is configured).

Finally, add component selector in html template like this:

<form [formGroup]="formGroup">
<div class="form-group">
  <app-search-combo-box-generic [preSelectedValue]="model.name" [componentModel]="componentModel" [itemControl]="formGroup.controls.searchItemDepCtrl" (itemSelected)="itemSelected=$event"></app-search-combo-box-generic>
</div>

Where preSelectedValue can set a previous value componentModel is previous object defined, itemControl is a formControl object of reactive angular forms and itemSelected is an event when someone selects an option.

Search Person Combo Box (Only for Academia System)

Define a person model for Search Generic Combo Box. This component allows a fast and easy configuration.

1. Add component selector in html template like this:

<form [formGroup]="formGroup">
<div class="form-group">
  <search-person-combo-box [debugFlag]=true [placeHolder]="'Búsqueda en Academia'"  
  [itemControl]="formGroup.controls.searchPersonItemCtrl" (itemSelected)="verifyEvent($event)">
  </search-person-combo-box>
</div>

where debugFlag can configure component url to 'http://localhost:8080' for debug purposes if this property is set up with true.

2. Finally, remember to add the function that will respond when selectedEvent will be fired. In this case, we add verifyEvent function on component.

verifyEvent(event: any){
    //TO DO SMTH WITH event 
}

As you can see, search person combo box component already has all configuration for work well inside Academia.

Search Product Combo Box (Only for Academia System)

Define a product model for Search Generic Combo Box. This component allows a fast and easy configuration.

1. Add component selector in html template like this:

<form [formGroup]="formGroup">
<div class="form-group">
  <search-product-combo-box [debugFlag]=true [placeHolder]="'Búsqueda de Productos'"  
  [itemControl]="formGroup.controls.searchProductItemCtrl" (itemSelected)="verifyEvent($event)">
  </search-product-combo-box>
</div>

where debugFlag can configure component url to 'http://localhost:8080' for debug purposes if this property is set up with true.

2. Finally, remember to add the function that will respond when selectedEvent will be fired. In this case, we add verifyEvent function on component.

verifyEvent(event: any){
    //TO DO SMTH WITH event 
}

Search Dependency Combo Box (Only for Academia System)

Define a dependency search model for Search Generic Combo Box. This component allows a fast and easy configuration.

1. Add component selector in html template like this:

<form [formGroup]="formGroup">
<div class="form-group">
  <search-dependency-combo-box [debugFlag]=true [placeHolder]="'Búsqueda de Dependencias'"  
  [itemControl]="formGroup.controls.searchDependencyItemCtrl" (itemSelected)="verifyEvent($event)">
  </search-dependency-combo-box>
</div>

where debugFlag can configure component url to 'http://localhost:8080' for debug purposes if this property is set up with true. itemControl property is optional if you have a reactive form.

2. Finally, remember to add the function that will respond when selectedEvent will be fired. In this case, we add verifyEvent function on component.

verifyEvent(event: any){
    //TO DO SMTH WITH event 
}

Search Users (Only for Academia System)

Define an user search model for Search Generic Combo Box. This component allows a fast and easy configuration. This component works for users with ADMINISTRATOR role inside Academia.

<search-user-combo-box [debugFlag]=true [itemControl]="formGroup.controls.searchUsersCtrl" (itemSelected)="verifyUserEvent($event)"></search-user-combo-box>

Crud shared compact (Only for Academia System)

Define a crud compact component UI. This UI has a table where each record has a description, a delete button, an avatar, a pagination for more tha 6 records and a title. Besides this component validates if records are unique inside table and if true it shows an alert. Crud compact has an Academia Search Box which must be configured for developers (Person, Products, Users, Dependencies, etc) in select mode input parameter. The following table shows all Academia Search Box avaliable in crud compact component.

| nameId | Academia Search Combo Box | Description | |------------|:---------------------------------|-----------------------------------------------------:| | person | Search Person Combo Box | It searches people (faculties, external people, students) | | user | Search User Combo Box | It searches Academia users | | dependency | Search Dependency Combo Box | It searches Academia dependencies | | program | Search Program Combo Box | It searches Academia programs |

Input parameters in crud component:

| Parameter | Description | Type | Example | |-------------------|:---------------------------------|:-----------:|:----------------------------------:| | listWithAvatar | It defines if table has or not user Avatar | boolean | [listWithAvatar]=false | | selectMode | It selects Academia Search Box and configure it | Object | [selectMode]="{'nameId':'person', 'queryParams': [{'name':'personType', 'value': 1}] | | showListAttribute | It defines which attribute will be shown in the table | String | [showListAttribute]="'completeName'" | | indexAttribute | It define what is the attribute | String | [indexAttribute]="'idFaculty'" | | inputItems | Previous data which will be added in the table | Array[Object] | [inputItems]="phdStudent.advisors" | | updatedItems | Updated data after handling crud compact |Array[Object] | (updatedItems)="phdStudent.advisors=$event" | | readOnly | it defines if crud compact is read only | boolean | [readOnly]=true |

Example:

<crud-compact [listWithAvatar]=true [selectMode]="{'nameId':'person', 'queryParams': [{'name':'personType', 'value': 1},{'name':'facultyState', 'value': true},{'name':'limit','value': 5}]}" [showListAttribute]="'completeName'" [indexAttribute]="'idFaculty'" [inputItems]="phdStudent.advisors" (updatedItems)="phdStudent.advisors=$event" [readOnly]="setReadOnly('PHD_CONSULT', 'PHD_STUDENT')"></crud-compact>

Explanation: Crud compact is configured: Records has an user avatar. Academia search box is search person and its queryparams are: personType equals to 1, facultyState is true and limit is equals to 5. The attribute shown in table is completeName, index attribute is idFaculty and inputItems are phdStudent.advisors. If there are a change in the table updatedItems will emit event and it will update phdStudent.advisors. Read Only parameter will be the result of setReadOnly function.

Information Dialog

TODO

Yes/No Dialog

TODO

File Upload

TODO

© 2019

   _____                     .___             .__        
  /  _  \   ____ _____     __| _/____   _____ |__|____   
 /  /_\  \_/ ___\\__  \   / __ |/ __ \ /     \|  \__  \  
/    |    \  \___ / __ \_/ /_/ \  ___/|  Y Y  \  |/ __ \_
\____|__  /\___  >____  /\____ |\___  >__|_|  /__(____  /
        \/     \/     \/      \/    \/      \/        \/ 

____ ___      .__                   .___             
|    |   \____ |__|____    ____    __| _/____   ______
|    |   /    \|  \__  \  /    \  / __ |/ __ \ /  ___/
|    |  /   |  \  |/ __ \|   |  \/ /_/ \  ___/ \___ \ 
|______/|___|  /__(____  /___|  /\____ |\___  >____  >
                \/        \/     \/      \/    \/     \/