adding mocked detail data for frontend viewing. placeholders for settings panels. Add dialog panel for Details setings.

webapp/frontend/src/app/modules/detail/detail.component.html

@@ -17,7 +17,7 @@
                     <span class="ml-2">Export</span>
                 </button>
                 <button class="ml-2 xs:hidden"
-                        matTooltip="not yet implemented"
+                        (click)="openDialog()"
                         mat-stroked-button>
                     <mat-icon class="icon-size-20 rotate-90 mirror"
                               [svgIcon]="'tune'"></mat-icon>
@@ -38,7 +38,7 @@
                             <span class="ml-2">Export</span>
                         </button>
                         <button mat-menu-item
-                                matTooltip="not yet implemented">
+                                (click)="openDialog()">
                             <mat-icon class="icon-size-20 rotate-90 mirror"
                                       [svgIcon]="'tune'"></mat-icon>
                             <span class="ml-2">Settings</span>

webapp/frontend/src/app/modules/detail/detail.component.ts

@@ -6,6 +6,8 @@ import {Subject} from "rxjs";
 import {DetailService} from "./detail.service";
 import {takeUntil} from "rxjs/operators";
 import {fadeOut} from "../../../@treo/animations/fade";
+import {DetailSettingsComponent} from "app/layout/common/detail-settings/detail-settings.component";
+import {MatDialog} from "@angular/material/dialog";
 
 @Component({
   selector: 'detail',
@@ -34,7 +36,9 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
      * @param {DetailService} _detailService
      */
     constructor(
-        private _detailService: DetailService
+        private _detailService: DetailService,
+        public dialog: MatDialog
+
     )
     {
         // Set the private defaults
@@ -277,6 +281,15 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
         this.smartAttributeDataSource.data = this._generateSmartAttributeTableDataSource(this.data.data.smart_results);
 
     }
+
+    openDialog() {
+        const dialogRef = this.dialog.open(DetailSettingsComponent);
+
+        dialogRef.afterClosed().subscribe(result => {
+            console.log(`Dialog result: ${result}`);
+        });
+    }
+
     /**
      * Track by function for ngFor loops
      *

webapp/frontend/src/app/modules/detail/detail.module.ts

@@ -13,6 +13,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip'
 import { NgApexchartsModule } from 'ng-apexcharts';
 import { TreoCardModule } from '@treo/components/card';
+import {DetailSettingsModule} from "app/layout/common/detail-settings/detail-settings.module";
 
 @NgModule({
     declarations: [
@@ -31,7 +32,7 @@ import { TreoCardModule } from '@treo/components/card';
         NgApexchartsModule,
         TreoCardModule,
         SharedModule,
-
+        DetailSettingsModule,
     ]
 })
 export class DetailModule