Merge pull request #81 from microsoft/feedback-dialog

Issue #6 Feedback dialog

src/app/app.component.html

@@ -14,7 +14,7 @@
                    [fixedInViewport]="true"
                    [fixedTopGap]="64"
                    position="end"
-                   hasBackdrop="true"  (keydown)="closeSidenav()">
+                   hasBackdrop="true" (keydown)="closeSidenav()">
         <div><button class="menu-button" mat-raised-button (click)="dialogsService.openDialog('about')">Project Charter</button></div>
         <div><button class="menu-button" mat-raised-button (click)="dialogsService.openDialog('howto')">How to use this site</button></div>
         <div><button class="menu-button" mat-raised-button (click)="dialogsService.openDialog('download')">Download Data</button></div>
@@ -22,6 +22,7 @@
         <div><button class="menu-button" mat-raised-button (click)="dialogsService.openDialog('changelog')">Change Log</button></div>
         <div><button class="menu-button" mat-raised-button (click)="dialogsService.openDialog('credits')">Credits</button></div>
         <div><button class="menu-button" mat-raised-button (click)="dialogsService.openDialog('disclaimer')">Disclaimer</button></div>
+        <div><button class="menu-button" mat-raised-button (click)="dialogsService.openDialog('feedback')">Send Feedback</button></div>
         <div class="padded-container"><a href="https://github.com/microsoft/data-protection-mapping-project" target="_blank"><img class="centered-image" src="assets/icons/github-black.svg" alt="GitHub Repository" /></a></div>
         <div class="padded-container"><a href="https://www.linkedin.com/company/dpmap" target="_blank"><img class="centered-image" src="assets/icons/LinkedIn_logo_In-Black.svg" alt="Project Linkedin Page" /></a></div>
       </mat-sidenav>

src/app/app.module.ts

@@ -68,6 +68,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { injectHighlightBodyPipe, injectHighlightSectionPipe, getCommentTextPipe } from './pipes/HighlightPipe';
 import { getNodeColorPipe, getNodeIconPipe, getNodeIconAltPipe, getBodyPipe, getSectionPipe, getConnectionsTextPipe } from './pipes/NodePipe';
 import { formatDatePipe } from './pipes/FormatDatePipe'
+import { FeedbackDialogComponent } from './dialogs/feedback-dialog.component';
 
 @NgModule({
   imports: [
@@ -128,7 +129,8 @@ import { formatDatePipe } from './pipes/FormatDatePipe'
     HowToDialogComponent,
     PurchaseDialogComponent,
     ErrorsDialogComponent,
-    CharterContentComponent
+    CharterContentComponent,
+    FeedbackDialogComponent
   ],
   declarations: [
     AppComponent,
@@ -148,6 +150,7 @@ import { formatDatePipe } from './pipes/FormatDatePipe'
     StandardMapSearchComponent,
     GraphComponent,
     CharterContentComponent,
+    FeedbackDialogComponent,
 
     injectHighlightBodyPipe,
     injectHighlightSectionPipe,

src/app/dialogs.service.ts

@@ -10,6 +10,7 @@ import { DownloadDialogComponent } from './dialogs/download-dialog.component';
 import { HowToDialogComponent } from './dialogs/howto-dialog.component';
 import { ErrorsDialogComponent } from './dialogs/errors-dialog.component';
 import { PurchaseDialogComponent } from './dialogs/purchase-dialog.component';
+import { FeedbackDialogComponent } from './dialogs/feedback-dialog.component';
 
 import { CookieService } from 'ngx-cookie-service';
 
@@ -35,8 +36,9 @@ export class DialogsService {
 			case 'disclaimer': dialogType = DisclaimerDialogComponent; break;
 			case 'download': dialogType = DownloadDialogComponent; break;
 			case 'howto': dialogType = HowToDialogComponent; break;
-      case 'purchase': dialogType = PurchaseDialogComponent; break;
-      case 'errors': dialogType = ErrorsDialogComponent; break;
+            case 'purchase': dialogType = PurchaseDialogComponent; break;
+            case 'errors': dialogType = ErrorsDialogComponent; break;
+            case 'feedback': dialogType = FeedbackDialogComponent; break;
 		}
 
 		if (dialogType) {

src/app/dialogs/feedback-dialog.component.html

@@ -0,0 +1,22 @@
+<h2 mat-dialog-title>Send Feedback</h2>
+<mat-dialog-content class="mat-typography">
+  <p>
+    This project welcomes feedback and suggestions.
+  </p>
+  <p>To submit feedback, please take the following steps:</p>
+  <ol>
+    <li>Download the current XLSX data set from: <a href="/assets/database.xlsx">Download Here</a></li>
+    <li>Take a screenshot of the issue you are seeing</li>
+    <li>
+      Email the Excel file, screenshot to Project Team Email: <a href="mailto:c8b7f414.microsoft.com@amer.teams.ms">c8b7f414.microsoft.com@amer.teams.ms</a> Include your:
+      <ul>
+        <li>Name</li>
+        <li>Organization</li>
+        <li>A detailed description of the issue you are seeing</li>
+      </ul>
+    </li>
+  </ol>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Ok</button>
+</mat-dialog-actions>

src/app/dialogs/feedback-dialog.component.ts

@@ -0,0 +1,9 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+	selector: 'feedback-dialog',
+  templateUrl: './feedback-dialog.component.html'
+})
+export class FeedbackDialogComponent {
+
+}