Implement selectedDocument (communication between parent-child components

This commit is contained in:
2025-01-31 09:36:15 +01:00
parent f626dc5c15
commit c55936b293
4 changed files with 19 additions and 3 deletions

View File

@ -3,7 +3,9 @@
<p class="text-gray-500 text-sm mb-4">Submitted 5 days ago.</p> <p class="text-gray-500 text-sm mb-4">Submitted 5 days ago.</p>
<ul> <ul>
<app-signing-sidebar-item *ngFor="let doc of documents" [document]="doc"></app-signing-sidebar-item> <app-signing-sidebar-item *ngFor="let doc of documents"
(click)="selectDocument(doc)"
[document]="doc"></app-signing-sidebar-item>
</ul> </ul>
<div class="mt-6 flex justify-between"> <div class="mt-6 flex justify-between">

View File

@ -1,4 +1,4 @@
import {Component, Input} from '@angular/core'; import {Component, EventEmitter, Input, Output} from '@angular/core';
import {GetSigningRequestResponseSigningRequestDocument} from '../../../../gen'; import {GetSigningRequestResponseSigningRequestDocument} from '../../../../gen';
@Component({ @Component({
@ -10,4 +10,10 @@ import {GetSigningRequestResponseSigningRequestDocument} from '../../../../gen';
}) })
export class SigningSidebarComponent { export class SigningSidebarComponent {
@Input() documents!: GetSigningRequestResponseSigningRequestDocument[]; @Input() documents!: GetSigningRequestResponseSigningRequestDocument[];
@Output() documentSelected = new EventEmitter<GetSigningRequestResponseSigningRequestDocument>();
selectDocument(doc: GetSigningRequestResponseSigningRequestDocument): void {
this.documentSelected.emit(doc);
}
} }

View File

@ -1,6 +1,6 @@
<div class="flex h-screen bg-gray-100"> <div class="flex h-screen bg-gray-100">
<div class="w-1/4"> <div class="w-1/4">
<app-signing-sidebar [documents]="documents"></app-signing-sidebar> <app-signing-sidebar [documents]="documents" (documentSelected)="setActiveDocument($event)"></app-signing-sidebar>
</div> </div>
<div class="w-3/4 p-6"> <div class="w-3/4 p-6">

View File

@ -14,6 +14,9 @@ import {
}) })
export class SigningComponent implements OnInit { export class SigningComponent implements OnInit {
documents: GetSigningRequestResponseSigningRequestDocument[] = []; documents: GetSigningRequestResponseSigningRequestDocument[] = [];
selectedDocument: GetSigningRequestResponseSigningRequestDocument = {
confirmed: false, id: '', name: ''
}
constructor(private route: ActivatedRoute, private signingRequestService: SigningRequestService) { constructor(private route: ActivatedRoute, private signingRequestService: SigningRequestService) {
} }
@ -30,4 +33,9 @@ export class SigningComponent implements OnInit {
} }
}); });
} }
setActiveDocument(document: GetSigningRequestResponseSigningRequestDocument): void {
this.selectedDocument = document;
console.log(this.selectedDocument);
}
} }