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});