Skip to content

paritshivani/nsdl-event-library

Repository files navigation

Getting Started

Event Library powered by angular. These componentsare designed to be used in
mobile and web portals to drive reusability, maintainabilityhence reducing the
redundant development effort significantly.

Step 1: Install the package

npm install ngtek-event-library

Step 2: Import the modules and components

Import the NgModule in your app app.module.ts file:
import { EventLibraryModule } from 'ngtek-event-library'; <---
import * as configData from '../environments/urlConfig';<- - -

@NgModule({
declarations: [
AppComponent
],
imports: [
.....
...

EventLibraryModule.forChild(configData), <---
....
],
providers: [ ]

})
export class AppModule { }

urlConfig.ts file in your project root path and addyour api url with respective Key

export const urlConfig = {
detail : "/api/event/v4/read/",
list : "assets/api/eventlist.json",
create: "/api/event/v4/create",
update: "/api/event/v4/update",
formConfig : "assets/api/event-create.json",
ernrolEvents : "assets/api/enroll-list.json",
enroll: "/v1/event/enroll",
retire : "/private/event/v4/retire",
publish: "/event/v4/publish"
};

Step 3: Include the sb-styles and assets in angular.json

Below mentioned lines add in your angular.json file
"assets" : [
{
"glob": "**/*",
"input": "./node_modules/ngtek-event-library/assets/",
"output": "/assets/"
}
]

"styles": [
...
...

"./node_modules/ngtek-event-library/assets/styles/styles.scss",
"node_modules/izitoast/dist/css/iziToast.min.css"

],
"scripts": [
"node_modules/izitoast/dist/js/iziToast.min.js"
]

Available components

Feature Description Selector Codes
Event List Use for show card list sb-event-list <sb-event-list [list]="eventList" (eventDetailData)="navToEventDetail($event) " >
Event Cover Use for show event cover data sb-cover-event-detail <sb-cover-event-detail [eventDetailItem]="eventItem" (retireEventId)="retire($event)" [userData]="userId" >
Event Join Button Use for show event join and enroll button sb-join-event-button <sb-join-event-button [eventDetailItem]="eventItem" [userData]="userId" [canUnenroll]="true" >
Event Advance detail Use for show more data about event sb-advance-event-detail <sb-advance-event-detail [eventDetailItem]="eventItem">
Event Create Use for show event create form sb-event-create <sb-event-create *ngIf="!isDetail" [formFieldProperties]="formFieldProperties" [userId]="userId" (closeSaveForm)="cancel($event)" (navAfterSave)="navAfterSave($event);">

Available Services

1. Event List Service:

Inject service in the component where you have touse:
import { EventListService} from 'ngtek-event-library';
Method Description
getEventList() This method will Provide a list of events

2. Event DetailService:

Inject service in the component where you have touse:
import { EventDetailService} from 'ngtek-event-library';
Method Description
getEvent(identifier) Pass list api config and event Identifier to getEvent method and it will Provide a list of events with given filters

3. Event Create Service:

Inject service in the component where you have touse:
import { EventCreateService} from 'ngtek-event-library';
Method Description
getEventFormConfig() function is provide event form configurations
createEvent(formData) Pass formData ({Key : value}) to the createEvent method and it will create a new event and return success/error response.
updateEvent(formData) Pass formData ({Key : value}) to the updateEvent method and it will create a new event and return success/error response.

4.TimezoneService:

Import {TimezoneCal }from 'ngtek-event-library';
Method Description
calcTime(date, Time) Pass date and GMT time (Eg: 23:12:04+5.30) format it will return current country/city location in all over word
timeZoneAbbreviated Function return the timezone code (eg: IST)
getTimeOffset() Return time offset (eg: 5.30)

5.Toast Message Service:

Import { SbToastService} from 'ngtek-event-library';
Method Description
showIziToastMsg(message: string, type: string): Show toast messages Message - Text display to user Type - error/success/warning /info
destroyIzitoast() Destroy toast message

6.Post Request Service

Import { DataService} from 'ngtek-event-library';
Method Description
post(requestParam) For request post call
get(requestParam) For request get call

RequestParam structure:

const RequestParam = {

url: api-url,
data: requestBody,
header: { 'Content-Type' : 'application/json'}
};

7.Event Service:

Method Description
Method Description
getEnrollEvents() For get enroll event list
enrollToEventPost() To enroll event

Available Properties:

Event List

@Input() list: any; Event List Object

Event Cover

@Input() list: any; Event Detail Object
@Output() retireEventId EventEmitter<string>
@Input() userId :any; User Id

Event Join Button

@Input() eventDetailItem :any; EventEmitter<string>
@Input() userId :any; User id

Event Advance Detail

@Input() eventDetailItem :any; Event Detail Object

Event Create

@Input()formFieldProperties
:any;
Event Form Object
@Input() userId :any; User Id
@Output() closeSaveForm EventEmitter<string>
@Output() navAfterSave EventEmitter<string>

Handle Redirections:

1. Event List to Event Detail Page:

Add following line in your event list selector whereyou add the sb-event-list
selector

(eventDetailData)="navToEventDetail($event)"

Eg:

<sb-event-list (eventDetailData)="navToEventDetail($event) " >
</sb-event-list>

Then

Go to demo-event-list.ts file and insert followingcode:

navToEventDetail(res){
this.router.navigate(['/demo-event-detail]); //add your code here
....
}

2. Cancel button on Event creation form

Add following line in your event create selector whereyou add the sb-event-create
selector

(creationCancel)=" functionName ($event)"

Eg:

<sb-event-create [formFieldProperties]="formFieldProperties"
(closeSaveForm)="cancel($event)" ></sb-event-create>

Then

Go to demo-event-create.ts file and insert followingcode:
functionName (){
this.router.navigate(['/home']); //add your codehere
}

3. Save Event:

Add following line in your event create selector whereyou add the sb-event-create
selector

(navAfterSave)=" functionName ($event)"

Eg:

<sb-event-create ( navAfterSave )="saveData();" ></sb-event-create>

Then

Go to demo-event-create.ts file and insert followingcode:
saveData (){
//add your code here
....
}