add dialog to table comp

src/app/dashboard/table/table.component.css

@@ -98,6 +98,12 @@ table {
     border:none;
   }
 
+
+  .submenu {
+    pointer-events: none;
+  }
+
+
   img {
     width: 80%;
     padding: 3%;
@@ -110,4 +116,5 @@ table {
   .form-div {
     width: 80%;
     margin:0 auto;
-  }
\ No newline at end of file
+  }
+

src/app/dashboard/table/table.component.html

@@ -57,13 +57,20 @@
 <button class="menu-button" mat-icon-button (click)="sidenavtoggle()"><mat-icon>menu</mat-icon></button>
 
   <span class="example-fill-remaining-space"></span>
-
+<!--
   <button class="menu-button" mat-button [matMenuTriggerFor]="menusite">Site</button>
 <mat-menu  #menusite="matMenu">
   <button mat-menu-item  (click)="onClickSite('dpmt')">DPMT</button>
   <button mat-menu-item (click)="onClickSite('gocdb')">GOCDB</button>
   <button mat-menu-item (click)="onClickSite('eosc')">EOSC</button>
 </mat-menu> 
+-->
+<button class="menu-button" (mouseenter) ='mouseEnter("Site")'  >Site</button>
+<mat-menu   class="submenu" #menusite="matMenu">
+  <button class="submenu" mat-menu-item  (click)="onClickSite('dpmt')">DPMT</button>
+  <button class="submenu" mat-menu-item (click)="onClickSite('gocdb')">GOCDB</button>
+  <button class="submenu"  mat-menu-item (click)="onClickSite('eosc')">EOSC</button>
+</mat-menu> 
 
 &nbsp; &nbsp;
 <button class="menu-button" mat-button [matMenuTriggerFor]="menuservice">Service</button>
@@ -78,7 +85,7 @@
 
 <button class="menu-button"  mat-button [matMenuTriggerFor]="menuuser">{{username}}</button>
 <mat-menu #menuuser="matMenu">
-  <button mat-menu-item>Profile</button>
+  <button mat-menu-item (click)="openDialog()">Profile</button>
   <button mat-menu-item (click)="onLogout()">Logout</button>
 </mat-menu>
 

src/app/dashboard/table/table.component.ts

 import {Component, OnInit, Inject, ViewContainerRef,Input, DoCheck,ViewChild,OnDestroy,ChangeDetectorRef,AfterViewInit, ViewChildren} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
-import {MatPaginator, MatTableDataSource,MatSort} from '@angular/material';
+import {MatPaginator, MatTableDataSource,MatSort,MatMenuTrigger, MatDialog} from '@angular/material';
 import {MediaMatcher} from '@angular/cdk/layout';
 
 import {SiteShort} from '../../model/site-short';
@@ -11,6 +11,7 @@ import {SharedService} from '../../shared-service';
 import {Site} from '../../model/site';
 import { AuthService } from 'src/app/auth.service';
 import { DataSource } from '@angular/cdk/table';
+import { ProfileDialogComponent } from '../profile-dialog/profile-dialog.component';
 
 
 
@@ -41,12 +42,14 @@ export class TableComponent implements OnInit, DoCheck,AfterViewInit {
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
 
   constructor(
     public siteService: SiteShortService,
     public router: Router,
     public route: ActivatedRoute,
-    public authService: AuthService
+    public authService: AuthService,
+    public dialog: MatDialog
   ) {
     console.log('table constructor');
 
@@ -353,4 +356,31 @@ getPageSizeOptions(): number[] {
 }
 
 
+mouseEnter(name: string) {
+  console.log("enter "+ name);
+  this.trigger.openMenu();
+}
+
+mouseLeave(name: string) {
+  console.log("leave " +name);
+  this.trigger.closeMenu();
+}
+
+
+openDialog(): void {
+  console.log("opening the dialog");
+  const dialogRef = this.dialog.open(ProfileDialogComponent, {
+    width: '500px'
+  });
+
+
+
+  dialogRef.afterClosed().subscribe(result => {
+    console.log('The dialog was closed');
+
+  });
+}
+
+
+
 }