• Vicoders Angular Common Module
  • Install
  • How to use
    • Pipes
      • hasItem
      • isArray
      • length
      • orderBy
      • sumBy
      • timeFormat
    • Directives
      • custom-selection
      • length-aware-paginator
      • per-page
      • search-form
      • sort-by-field
    • 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

import { PipesModule } from "@vicoders/angular";

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

hasItem

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

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

isArray

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

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

length

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

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

orderBy

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

<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

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

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

timeFormat

export class Component {
  public birth_date = '2018-01-30';
}

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

Directives

Import module

import { DirectivesModule } from "@vicoders/angular";

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

custom-selection

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);
  }
}

<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

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;
      })
    );
  }
}

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

per-page

<per-page></per-page>

search-form

<search-form></search-form>

sort-by-field

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

<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

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

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

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
          }
        }
      }
    ]
  };
}

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