0.0.7 • Published 4 years ago
user-feedback-lib v0.0.7
UserFeedbackTool
This library was generated with Angular CLI version 9.1.9.
Installation
Run npm install user-feedback-lib
to install the library.
Usage
Import the UserFeedbackLibModule in App module and pass config using providers as below
import { LibConfig, UserFeedbackLibModule, UserFeedbackLibService } from "user-feedback-lib";
@NgModule({
declarations: [
AppComponent
],
imports: [
...,
UserFeedbackLibModule,
...
],
providers: [{ provide: LibConfig,
useValue: {
//dropdown values for popup component
issueTypes: [
{ value: 'issue-type-1', viewValue: 'Issue type 1' },
{ value: 'issue-type-2', viewValue: 'Issue type 2' },
{ value: 'issue-type-3', viewValue: 'Issue type 3' }
],
//API url
apiUrl: 'http://localhost:8080/api/feedback',
//Instruction text to be shown when user is customizing the screenshot
textOverlay:
'Use white squared button to highlight the issue or black squared button to hide sensitive info',
//popup component
popupComponent: PopupComponent
}
}],
bootstrap: [AppComponent]
})
//Import UserFeedbackLibService use the below mentioned functions
import { UserFeedbackLibService } from "user-feedback-lib";
export class AppComponent{
constructor(private userFeedbackLibService:UserFeedbackLibService){
}
//Open popup and attach a default screenshot
this.userFeedbackLibService.openPopup();
//Highlight a part of the screenshot
this.userFeedbackLibService.selectRect();
//Open popup and attach customized screenshot(to be called when a user clicks on done after customizing a screenshot)
this.userFeedbackLibService.openDialog();
//Change rect background to black, cover some private data
this.userFeedbackLibService.hideRect();
}
Add data-html2canvas-ignore
attribute to an element to hide it in a screenshot.
Emit events specified below from the your component
@Output() feedbackSaved: EventEmitter<any> = new EventEmitter();
@Output() feedbackClosed: EventEmitter<any> = new EventEmitter();
@Output() openTools: EventEmitter<any> = new EventEmitter();
//to open screenshot tools when clicked on image
this.openTools.emit({description: this.description, issueType:this.issueType});
//when close button is clicked
this.feedbackClosed.emit(null);
//when send button is clicked
this.feedbackSaved.emit({description:this.description, issueType:this.issueType, screenshotUrl:this.screenshotUrl});