cloud-hms-ui-lib v0.2.3
Cloud HMS UI Lib
this angular component lib is planned to hold different sort of UI components needed to complete the excercise
A list of available components:
app-sidebar
app-header
app-footer
button-loader
error-control-wrapper
login-form
How to use?
- Make sure to add
CloudHmsUiModule
your module
import { CloudHmsUiModule } from 'cloud-hms-ui-lib';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
CloudHmsUiModule //<-- add the module in imports
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Usage
app-sidebar
A sidebar component that support 1-level menu item. Please see below for a common usage:
<app-sidebar [items]="sidebarItems"> </app-sidebar>
Configure sidebar items
sidebarItems: SidebarItem[] = [
{
path : '#',
title: 'Sidebar Item 1'
},
{
path : '#',
title: 'Sidebar Item 2'
}
];
Customization
The sidebar item template can be changed by using sidebarItem
directive as shown below:
<app-sidebar [items]="sidebarItems">
<ng-template sidebarItem let-sidebarItem>
<ul class="sidebar-list custom-class">
<li class="sidebar-item" ngClass="{'active': {{ sidebarItem.isActive }}}">
<ng-container *ngIf="sidebarItem.path; then pathAvailable else textOnly;"></ng-container>
<ng-template #pathAvailable>
<a href="{{sidebarItem.path}}">{{sidebarItem.title}}</a>
</ng-template>
<ng-template #textOnly>
<span>{{sidebarItem.title}}</span>
</ng-template>
</li>
</ul>
</ng-template>
</app-sidebar>
app-header
A component to show header by using configuration:
Configuration model:
headerConfig: HeaderConfig = {
logoUrl: '/assets/images/logo.png',
avatarUrl: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg',
userInfo: {
user: this.authenticationService.getUserInfo()
},
menuItems: [
{
path: '#',
title: 'User',
type: MENU_ITEM_DROPDOWN_TYPE,
dropdownItems: [
{
path: '#',
title: 'Edit Profile'
},
{
path: '#',
title: 'Track Order'
},
{
path: '#',
title: 'Permission Management',
disabled: true
},
{
title: '---'
},
{
path: '#',
title: 'Change Password'
}
]
},
{
path: '#',
title: 'Configuration',
disabled: true
},
{
path: '#',
title: 'Help'
}
],
avatarMenuItems: [
{
path: '#',
title: 'View My Profile'
},
{
path: '#',
title: 'Settings',
disabled: true
}
]
}
Events
Event Name | Description |
---|---|
loggedOut: (event) => void | The event fired when the Logout menu item is clicked |
Below is a common usage:
<app-header [headerConfig]="headerConfig" (loggedOut)="logout()"></app-header>
Properties of Header Configuration Object
:
Property Name | Description |
---|---|
logoUrl: string | The URL / a path to logo image |
avatarUrl: string | The URL / a path to avatar image |
userInfo: { user: {username: string, loggedDate: number} } | The object that holds user information like username and logged date |
menuItems: ArrayMenuItem | A list of menu items (dropdown menu item is supported) |
avatarMenuItems: ArrayMenuItem | A list of dropdown menu items |
Properties of MenuItem
:
Property Name | Description |
---|---|
path: string | The URL that the menu item is associated to |
type: dropdown or null | The type of the menu item. It can be null or dropdown type |
dropdownItems: ArrayMenuItem | A list of dropdown menu items |
title: string | The title of the menu item |
disabled: boolean | Indicates that the menu item is disabled |
onClick: Function | The function associated to 'click' event of the menu item |
Customization
Header component can be customized to override the default templates. Following are directives created to support header customization:
headerAvatarDropdownMenu
headerAvatarMenu
headerMenu
headerDropdownMenu
For example, to change the avatar dropdown menu template, we could do
<app-header [headerConfig]="headerConfig">
<ng-template headerAvatarDropdownMenu>
<div class="dropdown-menu dropdown-menu-right custom-avatar-dropdown-menu" aria-labelledby="avatarDropdownMenu">
Custom Dropdown Menu
</div>
</ng-template>
</app-header>
button-loader
To add a spinning icon next to the button label. Please see below for a common usage:
<button class="btn btn-block btn-lg btn-info" type="submit">
<app-button-loader
[isLoading]="isLoading"
[label]="'Log In'"
></app-button-loader>
</button>
Inputs
isLoading: boolean | Indicates that the button is in Loading state |
---|---|
label: string | The button label |
error-control-wrapper
A utility component to provide validation feedback to form control. Please see below for a common usage:
<app-error-control-wrapper
[controlName]="'Password'"
[control]="loginForm.controls['password']"
[inputGroupClasses]="{ 'mb-3': true }"
[inputGroupTextClasses]="'ti ti-pencil'"
>
<input
aria-describedby="basic-addon2"
aria-label="Password"
class="form-control form-control-lg"
formControlName="password"
placeholder="Password"
type="text"
/>
</app-error-control-wrapper>
Given the fact that the validation for the control is configured as below:
this.loginForm = this.formBuilder.group({
username: ['', [Validators.required]],
password: ['', Validators.required]
});
login-form
A component for displaying Login Form
<div class="col-12">
<app-login-form
[isLoading]="isLoading"
(formSubmitted)="login($event)"
></app-login-form>
</div>
Inputs
isLoading: boolean | Indicates that the form is still in Loading state |
---|---|
formSubmitted | The event fired when the form is submitted. The event is the object containing username and password: {username, password} |
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago