From 57fd7c30fb07b3b45418a0184ca6776409305d0a Mon Sep 17 00:00:00 2001
From: "kelly.nguyen" <kelly.nguyen@etu.hesge.ch>
Date: Fri, 22 Dec 2023 14:59:13 +0100
Subject: [PATCH] add popup to card-assignment
---
.../card-assignment.component.html | 2 +-
.../card-assignment.component.ts | 29 +++++++++++++++++--
.../material-components.module.ts | 7 +++--
3 files changed, 32 insertions(+), 6 deletions(-)
diff --git a/AngularApp/src/app/card-assignment/card-assignment.component.html b/AngularApp/src/app/card-assignment/card-assignment.component.html
index 262a09a..218798b 100644
--- a/AngularApp/src/app/card-assignment/card-assignment.component.html
+++ b/AngularApp/src/app/card-assignment/card-assignment.component.html
@@ -5,7 +5,7 @@
</div>
<p class="card-category">{{assgn.description}}</p>
<h3 class="card-title">{{assgn.title}}</h3>
- <a mat-raised-button type="submit" class="btn btn-outline-info pull-right">Create</a>
+ <a mat-raised-button (click)="openDialog()" class="btn btn-outline-info pull-right">Details</a>
</div>
<div class="card-footer">
<p>{{assgn.language}}</p>
diff --git a/AngularApp/src/app/card-assignment/card-assignment.component.ts b/AngularApp/src/app/card-assignment/card-assignment.component.ts
index 81d0de0..7637828 100644
--- a/AngularApp/src/app/card-assignment/card-assignment.component.ts
+++ b/AngularApp/src/app/card-assignment/card-assignment.component.ts
@@ -2,16 +2,39 @@ import { Component, OnInit, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Assignment } from 'app/model/assignment';
+import { TableListComponent } from 'app/table-list/table-list.component';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+export interface DialogData {
+ animal: string;
+ name: string;
+}
+
@Component({
selector: 'app-card-assignment',
templateUrl: './card-assignment.component.html',
styleUrls: ['./card-assignment.component.scss'],
})
export class CardAssignmentComponent implements OnInit {
- @Input() assgn : Assignment;
- constructor() { }
+ @Input() assgn : Assignment;
+
+ animal: string;
+ name: string;
+ constructor(public dialog: MatDialog) { }
+
ngOnInit(): void {
}
-
+
+ openDialog(): void {
+ const dialogRef = this.dialog.open(TableListComponent, {
+ width: '800px',
+ // data: {name: this.name, animal: this.animal}
+ });
+
+ dialogRef.afterClosed().subscribe(result => {
+ console.log('The dialog was closed');
+ this.animal = result;
+ });
+ }
+
}
diff --git a/AngularApp/src/app/material-components/material-components.module.ts b/AngularApp/src/app/material-components/material-components.module.ts
index 647c672..aa8584f 100644
--- a/AngularApp/src/app/material-components/material-components.module.ts
+++ b/AngularApp/src/app/material-components/material-components.module.ts
@@ -5,6 +5,7 @@ import {MatTableModule} from '@angular/material/table';
import {MatInputModule} from '@angular/material/input';
import {MatSelectModule} from '@angular/material/select';
import {MatCardModule} from '@angular/material/card';
+import {MatDialogModule} from '@angular/material/dialog';
@NgModule({
declarations: [],
@@ -13,13 +14,15 @@ import {MatCardModule} from '@angular/material/card';
CommonModule,
MatInputModule,
MatSelectModule,
- MatCardModule
+ MatCardModule,
+ MatDialogModule
],
exports:[
MatTableModule,
MatInputModule,
MatSelectModule,
- MatCardModule
+ MatCardModule,
+ MatDialogModule
]
})
export class MaterialComponentsModule { }
--
GitLab