@vicoders/angular/README.md

- [Vicoders Angular Common Module](#vicoders-angular-common-module) - [Install](#install) - [How to use](#how-to-use) - [Pipes](#pipes) - [hasItem](#hasitem) - [isArray](#isarray) - [length](#length) - [orderBy](#orderby)

- [Vicoders Angular Common Module](#vicoders-angular-common-module)
  - [Install](#install)
  - [How to use](#how-to-use)
    - [Pipes](#pipes)
      - [hasItem](#hasitem)
      - [isArray](#isarray)
      - [length](#length)
      - [orderBy](#orderby)
      - [sumBy](#sumby)
      - [timeFormat](#timeformat)
    - [Directives](#directives)
      - [custom-selection](#custom-selection)
      - [length-aware-paginator](#length-aware-paginator)
      - [per-page](#per-page)
      - [search-form](#search-form)
      - [sort-by-field](#sort-by-field)
    - [Use Activity Log Component](#use-activity-log-component)

# Vicoders Angular Common Module

## Install

Download package form npm

```
yarn add @vicoders/angular
```

or

```
npm install @vicoders/angular
```

## How to use

### Pipes
Import module
```javascript
import { PipesModule } from "@vicoders/angular";

@NgModule({
  declarations: [AppComponent],
  imports: [PipesModule]
})
export class YourModule {}
```

#### hasItem
```javascript
export class Component {
  public users = [
    {
      id: 1,
      name: 'Tony'
    },
    {
      id: 1,
      name: 'John'
    }
  ]
}
```

```html
<div *ngIf="users | hasItem">
  users has item
</div>
```

#### isArray
```javascript
export class Component {
  public users = [
    {
      id: 1,
      name: 'Tony'
    },
    {
      id: 1,
      name: 'John'
    }
  ]
}
```

```html
<div *ngIf="users | isArray">
  users variable is array
</div>
```

#### length
```javascript
export class Component {
  public users = [
    {
      id: 1,
      name: 'Tony'
    },
    {
      id: 1,
      name: 'John'
    }
  ]
}
```

```html
<div>{{ users | length }}</div>
```

#### orderBy
```javascript
export class Component {
  public users = [
    {
      id: 1,
      name: 'Tony'
    },
    {
      id: 1,
      name: 'John'
    }
  ]
}
```

```html
<div *ngFor="let item of users | orderBy:['id','desc']">
  <div>
    <strong>ID: </strong> {{ item.id }}
  </div>
  <div>
    <strong>Name: </strong> {{ item.name }}
  </div>
</div>
```

#### sumBy
```javascript
export class Component {
  public products = [
    {
      id: 1,
      name: 'Laptop',
      price: 2000
    },
    {
      id: 2,
      name: 'Mobile',
      price: 1000
    }
  ];
}
```

```html
<div>{{ products | sumBy: 'price' }}</div>
```

#### timeFormat
```javascript
export class Component {
  public birth_date = '2018-01-30';
}
```

```html
<div>{{ birth_date | timeFormat: 'DD/MM/YYYY' }}</div>
```

### Directives
Import module
```javascript
import { DirectivesModule } from "@vicoders/angular";

@NgModule({
  declarations: [AppComponent],
  imports: [DirectivesModule]
})
export class YourModule {}
```

#### custom-selection
```javascript
export class Component {
  public UserStatus = [
    {
      label: 'Pending',
      value: 1
    },
    {
      label: 'Activated',
      value: 2
    },
    {
      label: 'Banned',
      value: 3
    },
    {
      label: 'Deleted',
      value: 4
    }
  ];

  public users = [
    {
      id: 1,
      name: 'Andy',
      status: 1
    },
    {
      id: 1,
      name: 'John',
      status: 2
    }
  ];

  changeUserStatus(user) {
    console.log('changeUserStatus ', user);
  }
}
```

```html
<table>
  <thead>
    <tr>
      <td>ID</td>
      <td>Name</td>
      <td>Status</td>
    </tr>
  </thead>
  <tbody *ngIf="users | hasItem">
    <tr *ngFor="let item of users">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>
        <custom-selection name="user-status-{{i}}" [(ngModel)]="item.status" [(options)]="UserStatus" (change)="changeUserStatus(item)"></custom-selection>
      </td>
    </tr>
  </tbody>
</table>
```

#### length-aware-paginator
```javascript
import { ApiService } from '../../../api/api.service';
import { HttpClient, HttpParams } from '@angular/common/http';
import { catchError, map } from 'rxjs/operators';
import User from '../../../models/User';
import LengthAwarePaginator from '../../../models/LengthAwarePaginator';

export class Component {
  public fetched = false;
  public pagination;

  constructor(private router: Router, private api: ApiService, private http: HttpClient) {
    const url = 'https://vinaco.local/api/admin/users';
    this.getUsers(url, { per_page: 2, page: 1 }).subscribe(
      response => {
        this.fetched = true;
        this.pagination = response.pagination;
      },
      error => {
        throw error;
      }
    );
  }

  getUsers(url, params: {}) {
    const queryParams = new HttpParams({ fromObject: params });
    return this.http.get(url, { params: queryParams }).pipe(
      map(result =>
        _.assign(
          {},
          {
            items: (result as any).data.map(item => new User(item)),
            pagination: new LengthAwarePaginator((result as any).meta.pagination)
          }
        )
      ),
      catchError(error => {
        throw error;
      })
    );
  }
}
```

```html
<length-aware-paginator *ngIf="fetched" [(paginator)]="pagination"></length-aware-paginator>
```

#### per-page
```html
<per-page></per-page>
```

#### search-form
```html
<search-form></search-form>
```

#### sort-by-field
```javascript
export class Component {
  public users = [
    {
      id: 1,
      name: 'Tony'
    },
    {
      id: 1,
      name: 'John'
    }
  ]
}
```

```html
<table>
  <thead>
    <tr>
      <th>ID
        <sort-by-field field="id"></sort-by-field>
      </th>
      <th>Name
        <sort-by-field field="name"></sort-by-field>
      </th>
    </tr>
  </thead>
  <tbody *ngIf="users | hasItem">
    <tr *ngFor="let item of users">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
    </tr>
  </tbody>
</table>
```

### Use Activity Log Component
Import module

```javascript
import { VicodersActivityLogModule } from "@vicoders/angular";

@NgModule({
  declarations: [AppComponent],
  imports: [VicodersActivityLogModule]
})
export class YourModule {}
```

```javascript
export class Component {
  public activity_logs = {
    fetched: true,
    items: [
      {
        id: 1,
        event: 'UserCreated',
        description: 'Người dùng đăng nhập với email: admin@vicoders.com',
        timestamps: {
          created_at: {
            date: '2018-12-11 10:15:02.000000',
            timezone: 'UTC',
            timezone_type: 3
          }
        }
      },
      {
        id: 2,
        event: 'UserLoggedIn',
        description: 'Người dùng đăng nhập với email: admin@vicoders.com',
        timestamps: {
          created_at: {
            date: '2018-12-11 10:15:02.000000',
            timezone: 'UTC',
            timezone_type: 3
          }
        }
      }
    ]
  };
}
```

```html
<vicoders-activity-log
  [(activity_log_data)]="activity_logs"
></vicoders-activity-log>
```