Commit 6fb9c020 authored by Jie Yuan's avatar Jie Yuan

add dialog to table comp

parent c94bc32f
......@@ -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
}
......@@ -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>
......
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');
});
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment