ngx-monitorias-uniandes-lib/README.md

This library is used for Monitorias-Uniandes system.

# Ngx Monitorias Uniandes Library

This library is used for Monitorias-Uniandes system. 

## Install

Use [npm](https://www.npmjs.com/search?q=ng2-typeahead) 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.

```typescript
    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 :

```typescript
    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:

```html
<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:

```html
<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.

```typescript
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:

```html
<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.

```typescript
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:

```html
<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.

```typescript
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. 

```html
<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:*

```html
<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  \  |/ __ \_
    \____|__  /\___  >____  /\____ |\___  >__|_|  /__(____  /
            \/     \/     \/      \/    \/      \/        \/ 
    
    ____ ___      .__                   .___             
    |    |   \____ |__|____    ____    __| _/____   ______
    |    |   /    \|  \__  \  /    \  / __ |/ __ \ /  ___/
    |    |  /   |  \  |/ __ \|   |  \/ /_/ \  ___/ \___ \ 
    |______/|___|  /__(____  /___|  /\____ |\___  >____  >
                    \/        \/     \/      \/    \/     \/