ngx-step

A simple library module to generate the different stages for activity to track multiple stages.

Detailed Tracking summary support:

Dependent modules

1. Fontawsome module need to install at project level to support icons used in this library. this library you need to install manually in your application.

npm i @fortawesome/fontawesome-free

2. Moment.js This library you need to install manually in your application. Library is used for the purpose of datetime data to display in user time zone converted format.

npm i moment

then

npm i ngx-step

NgxStep

NgxStep library is easy to use into your angular project which can be use for the purpose of generating and showing different stages for any lifecycle stages and their status. i.e Product lifycycle stages , Supply chain lifecycle stages, Product shipment and delivery tracking and many more.

Library is easy to configure and customizes as per your requirements.

This Library comes with Two options :

1) BASIC

2) CUSTOM

How to use

Use of this library is very simple .

app.module.ts

import {NgxStepModule} from 'ngx-step'

Then add into imports array of app module file

@NgModule({
  declarations: [
  ],
  imports: [
    NgxStepModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use inside your component and HTML

component.ts code

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'demoapp';
  stages = [
  {
    "name": "Order Placed",
    "status": "COMPLETED",
  },
  {
    "name": "Order Shipped",
    "status": "COMPLETED",
  },
  {
    "name": "Out For Delivery",
    "status": "IN_PROGRESS",
  }
]
}

component.html code

<ngx-step [stages]="stages">
</ngx-step>

Advanced usages to show Detailed Summary in tabular format ( Works Only with CUSTOM type option )

component.html file code

<ngx-step 
[updateProgressLogs]="progressDataObject" 
[stages]="stages"
[jobOverallStatus]="'ACTIVE'"
[options]="stepperOptions"
[showLogs]="true"
[logsTableData]="tableLogs"
[logTableOptions]="logTableOptions">
</ngx-step>

component.ts code

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'demoapp';
  stages = [
    {
      "name": "Order Placed",
      "status": "COMPLETED",
    },
    {
      "name": "Order Shipped",
      "status": "COMPLETED",
    },
    {
      "name": "Out For Delivery",
      "status": "COMPLETED",
    }
  ]
  stepperOptions : any ={
    type: 'CUSTOM',
    finalStageName: 'DELIVERED',
    isMultiWordStageName: true,
    textSeparator: '_'
  };
  logTableOptions: any = {
    tableTitle: 'Tracking Information',
    showTimeDiffColumn: true
  }
  tableLogs: any = [
      {
      "error_message": "",
      "message": "Your Order accepted by seller and has been placed.",
      "stage": "Order Placed",
      "status": "COMPLETED",
      "time_stamp": "2023-01-03T09:15:19.855000"
      },
      {
        "error_message": "",
        "message": "Order has been shipped. Moved to neareast delivery hub.",
        "stage": "Order Shipped",
        "status": "COMPLETED",
        "time_stamp": "2023-01-03T09:15:32.806000"
      },
      {
        "error_message": "",
        "message": "Out For Delivery. Agent will contact you soon.",
        "stage": "Out For Delivery",
        "status": "IN_PROGRESS",
        "time_stamp": "2023-01-03T09:15:41.687000"
      },
      {
        "error_message": "Customer Door was Locked!",
        "message": "We have tried to reach you. Dont worry we have rescheduled your delivery for next working day.",
        "stage": "Out For Delivery",
        "status": "IN_PROGRESS",
        "time_stamp": "2023-01-03T09:15:49.787000"
      },
      {
        "error_message": "Customer not reachable.",
        "message": "We have tried to reach you. Dont worry we have rescheduled your delivery for next working day.",
        "stage": "Out For Delivery",
        "status": "FAILED",
        "time_stamp": "2023-01-03T09:15:49.787000"
      }
  ]
}

Advanced Configuration inputs parameters

1) stages

Array of Object which will hold your stage data. Each object in an array represent one stage. Stage object will have Two Keys:

1. name = This is the Name of your Stage and will be visible to UI . Stage name can be any text.

2. status = this will hold the current status value of your stage.

Possible Values of Stage status are NOT_STARTED , IN_PROGRESS , COMPLETED , FAILED , SKIPPED

Example:

stages =[{'name':'STEP-1','status':'COMPLETED'},{'name':'STEP-2','status':'IN_PROGRESS'},{'name':'STEP-3','status':'SKIPPED'}] 

2) options

This input parameter is an object and used for overriding the default configurations to get the more felxibility of use as your requirements. If user is passing this parameter then make sure to select the type 'CUSTOM' .

options

Object has following keys:

1. type : Default BASIC Possible Values are a) BASIC - Default Selected value for simple stages with status. b) CUSTOM - Use this option if want to manage your own custom stages and status logic from diffrent progress update info data.

2. finalStageName : By default it will be 'FINISH', and will be the name of last Stage. Pass the string value if you want to override the Last stage name. Default value is set to FINISH.

3. isMultiWordStageName: Aceept Boolean value, Set as True if your stage name is multiple words name like ORDER_SHIPPED , DEVICE_INSTALLATION etc.

Note: If value is true then textSeparator value must be provide.

4. textSeparator : Is the symbol used identified the text separator symbol used for multiple Word stage names. Default value is '_'.

Structure:

options = {
    type: 'BASIC', 
    finalStageName: 'FINISH',
    isMultiWordStageName : false,
    textSeparator: '_'
  }

3) updateProgressLogs

Its and array of object will be used when user has selected the CUSTOM type stepper i.e options.type = 'CUSTOM' . This option will be usefull when you have some real time stage data updates with some additional information about each stage in addition to name and status. like Message to end user , Detailed Logs information, Error information etc.

Structure:

[{'name':'STEP-1','status':'COMPLETED' , 'message': "We have completed the stage1"},{'name':'STEP-2','status':'IN_PROGRESS' , 'message': "This stage is in progress"}]

4) jobOverallStatus

Overall status of Job or Task which will have following values

a) ACTIVE : Pass this value to represent that main process is Active and in progress.

b) NOT_STARTED: Pass this value to represent that main process is not yet started . In this case status of your sub stages and child stages will be NOT_STARTED.

c) COMPLETED : Pass this value to represent that main process is completed and all its sub or child stages has been completed successfully.

d) FAILED: Pass this value to represent that main process is Failed due to any of the reason or any of the state failed.

Additional Configuration options for Progress summary Table at the bottom of progress stepper.

5) showLogs

A boolean variable use as TRUE when you want to show Detailed summary table information on Tracking details. If value is true then a table will be visible below stage progress.

6) logsTableData

An array of objects which hold all of your summary table data and will be visible in UI just below the stepper progress diagram.Each object in this array reperesent one table row of data.

Note- Make sure to use the exactaly same keys of object in logTableData Array.

Sample Example:

tableLogs: any = [{
  "error_message": "",
  "message": "Your Order accepted by seller and has been placed.",
  "stage": "Order Placed",
  "status": "COMPLETED",
  "time_stamp": "2023-01-03T09:15:19.855000"
},
{
  "error_message": "",
  "message": "Order has been shipped. Moved to neareast delivery hub.",
  "stage": "Order Shipped",
  "status": "COMPLETED",
  "time_stamp": "2023-01-03T09:15:32.806000"
},
{
  "error_message": "",
  "message": "Out For Delivery. Agent will contact you soon.",
  "stage": "Out For Delivery",
  "status": "IN_PROGRESS",
  "time_stamp": "2023-01-03T09:15:41.687000"
},
{
  "error_message": "Customer Door was Locked!",
  "message": "We have tried to reach you. Dont worry we have rescheduled your delivery for next working day.",
  "stage": "Out For Delivery",
  "status": "IN_PROGRESS",
  "time_stamp": "2023-01-03T09:15:49.787000"
},
{
  "error_message": "Customer not reachable.",
  "message": "We have tried to reach you. Dont worry we have rescheduled your delivery for next working day.",
  "stage": "Out For Delivery",
  "status": "FAILED",
  "time_stamp": "2023-01-03T09:15:49.787000"
}
]

7)logTableOptions

This is again an configuration Object to override the default configuration of summary table

Structure:

 logTableOptions: any = {
    tableTitle: 'Tracking Information',
    showTimeDiffColumn: true // use this value as true if you want to show the relative time duration calulation for each stage. ( i.e Time taken by each stage to complete)
  }

Changes Logs

1. v0.0.1 -Supports only BASIC type stepper.

2. v1.0.0 - Added support for CUSTOM option to customise your stages in more flexible way.

3. v1.1.0 - Fixed issue related to CUSTOM stages and added support to allow normal STGAE array data as well.

4. v1.2.1 - Added support to show the detailed Logs.

Added configuration options:

logsTableData: any = [];

showLogs: Boolean = false;

logTableOptions:any = {
    tableTitle: 'Events & Logs',
    showTimeDiffColumn: false,
  };

Screenshot

example: For custom now you can provide the stages in below formats as well:

stages=['order_placed' , 'order_shipped', 'out_for_delivery']

OR

stages = [
  {
    "name": "Order Placed",
    "status": "COMPLETED",
  },
  {
    "name": "Order Shipped",
    "status": "COMPLETED",
  },
  {
    "name": "Out For Delivery",
    "status": "IN_PROGRESS",
  }
]

5. v1.2.2 - Added support for custom color option given to logs & traking information Table to override the stages colors.

How to override the Color of Status in Events and Logs Table

Add the below code into your component level CSS file.

:host ::ng-deep .stage_completed {
  color: rgb(0, 128, 23) !important;
}

:host ::ng-deep .stage_progress {
  color: rgb(241, 213, 30) !important;
}
:host ::ng-deep .stage_failed {
  color: rgb(244, 43, 17) !important;
}

:host ::ng-deep .stage_progress {
  color: rgb(241, 213, 30) !important;
}

:host ::ng-deep .stage_not_started {
  color: rgb(68, 96, 232) !important;
}

6. v1.2.4 - Added support for New Status as SKIPPED

stages = [
  {
    "name": "Order Placed",
    "status": "COMPLETED",
  },
  {
    "name": "Order Shipped",
    "status": "COMPLETED",
  },
  {
    "name": "Out For Delivery",
    "status": "COMPLETED",
  },
  {
    "name": "Live Tracking",
    "status": "SKIPPED",
  },
  {
    "name": "Product Deivered",
    "status": "COMPLETED",
  }
]

7. v1.2.5 - Added support for Final Stage Progress Indicator for ACTIVE/ IN PROGRESS Tracking
8. v1.2.6 - Added support to show the data of time taken by each stage either from server data or autocalculate by library. We have added new configuration key manualCalculationForDuration to support autocalculation of time taken or just simply show the time taken vaue coming with data.

New Key addition is in logTableOptions configuration object

logTableOptions: any = {
   tableTitle: 'Tracking Information',
   showTimeDiffColumn: true // use this value as true if you want to show the relative time duration calulation for each stage. ( i.e Time taken by each stage to complete) ,
   manualCalculationForDuration: true  ,  // use this value as true if you want to use the server data provide relative time duration calulation for each stage.  default false( i.e library will auto calculate the Time taken by each stage to complete)
 }

Reference

This library was generated with Angular CLI version 12.2.18.

License

MIT