https://github.com/rbkgh/ngfluentordertracker
Your one-stop beautiful order tracker component for angular.
https://github.com/rbkgh/ngfluentordertracker
angular angular-component angular-library angular-widget angular2 angular4 angular6 ionic ionic-framework
Last synced: 2 months ago
JSON representation
Your one-stop beautiful order tracker component for angular.
- Host: GitHub
- URL: https://github.com/rbkgh/ngfluentordertracker
- Owner: RbkGh
- Created: 2018-07-27T11:16:35.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-28T13:33:15.000Z (almost 8 years ago)
- Last Synced: 2025-03-05T03:41:30.030Z (over 1 year ago)
- Topics: angular, angular-component, angular-library, angular-widget, angular2, angular4, angular6, ionic, ionic-framework
- Language: TypeScript
- Size: 187 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NgFluentOrderTracker - Your one-stop beautiful order tracker component for angular apps
Github Url :
=================
[https://github.com/RbkGh/NgFluentOrderTracker](https://github.com/RbkGh/NgFluentOrderTracker)
Demo
=================
Table of contents
=================
* [Getting started & Usage](#getting-started)
* [Contributing](#contributing)
* [Development](#contributing)
## Getting started & Usage
### Step 1: Install `ng-fluent-order-tracker`:
```shell
npm i ng-fluent-order-tracker
```
### Step 2: (i) Import the FluentOrderTrackerModule by including it in its @NgModule imports array:
```js
import {FluentOrderTrackerModule} from './modules/fluent-order-tracker/fluent-order-tracker.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FluentOrderTrackerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### Step 2 (ii) initialize orderEntities in your component.Eg :
```js
import {Component, OnInit} from '@angular/core';
import {OrderEntity} from './modules/fluent-order-tracker/models/order-entity';
import {OrderState} from './modules/fluent-order-tracker/models/order-state.enum';
import {OrderStateTextUtil} from './modules/fluent-order-tracker/util/order-state-text.enum';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
orderEntities: Array = [];
ngOnInit(): void {
this.initOrderEntities();
}
initOrderEntities() {
const orderEntityProcessed: OrderEntity = {} as OrderEntity;
orderEntityProcessed.orderState = OrderState.COMPLETED;
orderEntityProcessed.orderStateText = OrderStateTextUtil.ORDER_PROCESSED;
const orderEntityApproved: OrderEntity = {} as OrderEntity;
orderEntityApproved.orderState = OrderState.DECLINED;
orderEntityApproved.orderStateText = OrderStateTextUtil.ORDER_DECLINED;
const orderEntityShipped: OrderEntity = {} as OrderEntity;
orderEntityShipped.orderState = OrderState.TODO;
orderEntityShipped.orderStateText = OrderStateTextUtil.ORDER_SHIPPED;
const orderEntityInTransit: OrderEntity = {} as OrderEntity;
orderEntityInTransit.orderState = OrderState.COMPLETED;
orderEntityInTransit.orderStateText = OrderStateTextUtil.ORDER_IN_TRANSIT;
const orderEntityDelivered: OrderEntity = {} as OrderEntity;
orderEntityDelivered.orderState = OrderState.COMPLETED;
orderEntityDelivered.orderStateText = OrderStateTextUtil.ORDER_DELIVERED;
this.orderEntities.push(orderEntityProcessed);
this.orderEntities.push(orderEntityApproved);
this.orderEntities.push(orderEntityShipped);
this.orderEntities.push(orderEntityInTransit);
this.orderEntities.push(orderEntityDelivered);
}
}
```
### Step 3 : Use the selector in a component template :
```html
```
# checkout how to populate orderEntities in app.component.ts for more details
## Contributing
Contributions are welcome. You can start by looking at [issues](https://github.com/RbkGh/NgFluentOrderTracker/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) with label *Help wanted* or creating new Issue with proposal or bug report.
Note that we are using https://conventionalcommits.org/ commits format.
## Development
```npm run packagr```
```npm pack ``` in dist folder
```npm login```
```npm publish dist```
## Inspiration
This library is inspired by [Order Status Tracking](https://codepen.io/manit/pen/uFnJw)
## Warning
Library is under active development and may have API breaking changes for subsequent major versions after 1.0.0.
Author(s)
---------
- Rodney Boachie
### License:
Copyright (C) 2018 Rodney Boachie
This file is part of NgFluentOrderTracker
NgFluentOrderTracker is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see .