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:

1. app-sidebar
2. app-header
3. app-footer
4. button-loader
5. error-control-wrapper
6. 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: Array[MenuItem] | A list of menu items (dropdown menu item is supported) | | avatarMenuItems: Array[MenuItem] | 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: Array[MenuItem] | 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} |