Ng Ulti

• Ng Ulti
  • Install
  • How to use
    • Pipes
      • hasItem
      • length
      • isArray
      • filterBy
      • orderBy
      • sumBy
      • flatMap
      • findBy
    • Directives
      • custom-selection
      • length-aware-paginator
      • per-page
      • search-form
      • sort-by-field
      • loader
      • autoresize
    • Use Activity Log Component

Install

Download package form npm

yarn add @vicoders/ng-utils

or

npm install @vicoders/ng-utils

How to use

Pipes

Import module

import { PipesModule } from "@vicoders/ng-utils";

@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>

length

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

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

isArray

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

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

filterBy

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

<div *ngIf="users | filterBy:'name':'Tony'">
  All user who has name is Tony
</div>

<div *ngIf="users | filterBy:'class':[1,2]">
  All user who has class is 1 or 2
</div>

<div *ngIf="users | filterBy:'name':'Tony':'not'">
  All user who has name is not Tony
</div>

<div *ngIf="users | filterBy:'id':'1':'>'">
  All user who has id is larger than 1
</div>

<div *ngIf="users | filterBy:'id':'1':'<'">
  All user who has id is less than 1
</div>

orderBy

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

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

<div *ngFor="let item of users | orderBy:['id','desc']:['class':'asc']">
  <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>

flatMap

Creates a flattened array of values by running each element in collection thru iteratee and flattening the mapped results. The iteratee is invoked with three arguments: (value, index|key, collection).

export class Component {

  public mapName = (item) => item.name;

  public products = [
    orders: [{
      id: 1,
      name: 'Laptop',
    },
    {
      id: 2,
      name: 'Mobile',
    }],
    pending:[{
      id: 3,
      name: 'TV',
    },
    {
      id: 4,
      name: 'Tablet',
    }]
  ];
}

<div>{{ products | flatMap:flatMap }}</div>

// ['Laptop', 'Mobile', 'TV', 'Tablet']

findBy

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

<div *ngIf="users | findBy:'name':'Tony'">
  First user who has name is Tony
</div>

<div *ngIf="users | findBy:'class':[1,2]">
  First user who has class is 1 or 2
</div>

<div *ngIf="users | findBy:'name':'Tony':'not'">
  First user who has name is not Tony
</div>

<div *ngIf="users | findBy:'id':'1':'>'">
  First user who has id is larger than 1
</div>

<div *ngIf="users | findBy:'id':'1':'<'">
  First user who has id is less than 1
</div>

Directives

Import module

import { DirectivesModule } from "@vicoders/ng-utils";

@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>

loader

<ng-container *ngIf="fetched; else loader">Content goes here</ng-container>
<ng-template #loader>
  <loader></loader>
</ng-template>

autoresize

<textarea autoresize></textarea> <textarea autoresize="10"></textarea>

Use Activity Log Component

Import module

import { VicodersActivityLogModule } from "@vicoders/ng-utils";

@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: [email protected]',
        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: [email protected]',
        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>