dlmw/swisssign-challenge-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Disable/enable buttons along with some styling

Browse Source
This commit is contained in:
dylan
2025-01-31 15:16:11 +01:00
parent f95444f61c
commit dac11b8dc5
4 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/signing/signing-sidebar/signing-sidebar-item/signing-sidebar-item.component.ts
View File

@ -14,7 +14,7 @@ import {GetSigningRequestResponseSigningRequestDocument} from '../../../../../ge
export class SigningSidebarItemComponent { export class SigningSidebarItemComponent {
@Input() document!: GetSigningRequestResponseSigningRequestDocument; @Input() document!: GetSigningRequestResponseSigningRequestDocument;
getStatusClasses() { getStatusClasses(): string {
return this.document.confirmed ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700'; return this.document.confirmed ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-700';
} }
} }

22
src/app/components/signing/signing-sidebar/signing-sidebar.component.html
View File

@ -1,16 +1,22 @@
<div class="w-full h-full bg-white p-6 shadow-lg"> <div class="w-full h-full bg-white p-6 shadow-lg">
<h2 class="text-lg font-semibold mb-2">Signing {{ documents.length }} documents</h2> <h2 class="text-lg font-semibold mb-2">Confirming {{ documents.length }} documents</h2>
<p class="text-gray-500 text-sm mb-4">Submitted 5 days ago.</p> <p class="text-gray-500 text-sm mb-4">You must confirm all documents before signing.</p>
<ul> <ul>
<app-signing-sidebar-item *ngFor="let doc of documents" <app-signing-sidebar-item *ngFor="let doc of documents"
class="cursor-pointer" class="cursor-pointer"
(click)="selectDocument(doc)" (click)="selectDocument(doc)"
[document]="doc"></app-signing-sidebar-item> [document]="doc" />
</ul> </ul>
<div class="mt-6 flex justify-between"> <div class="mt-6 flex flex-col lg:flex-row md:justify-between gap-4">
<button class="px-4 py-2 bg-gray-300 rounded">Reject all</button> <button class="w-full md:w-auto px-4 py-2 bg-gray-300 rounded">Reject all</button>
<button class="px-4 py-2 bg-gray-500 text-white rounded" disabled>Confirm signing</button> <button class="w-full md:w-auto px-4 py-2 bg-gray-500 text-white rounded"
[ngClass]="{
'bg-gray-500 cursor-not-allowed': canSign(),
'bg-red-500 hover:bg-red-600 cursor-pointer': !canSign()
}"
[disabled]="!canSign()">Confirm signing
</button>
</div> </div>
</div> </div>

7
src/app/components/signing/signing-sidebar/signing-sidebar.component.ts
View File

@ -16,4 +16,11 @@ export class SigningSidebarComponent {
selectDocument(doc: GetSigningRequestResponseSigningRequestDocument): void { selectDocument(doc: GetSigningRequestResponseSigningRequestDocument): void {
this.documentSelected.emit(doc); this.documentSelected.emit(doc);
} }
canSign(): boolean {
const firstUnconfirmedDocument = this.documents.find(doc => {
return !doc.confirmed
})
return firstUnconfirmedDocument !== undefined;
}
} }

9
src/app/components/signing/signing.component.html
View File

@ -6,7 +6,14 @@
<div class="w-3/4 p-6"> <div class="w-3/4 p-6">
<div class="bg-gray-700 text-white p-4 flex justify-between"> <div class="bg-gray-700 text-white p-4 flex justify-between">
<span>Review document before confirming</span> <span>Review document before confirming</span>
<button class="bg-red-600 px-4 py-2 rounded cursor-pointer" (click)="onConfirm()">Confirm</button> <button class="px-4 py-2 rounded"
[ngClass]="{
'bg-gray-500 cursor-not-allowed': selectedDocumentPdf == undefined,
'bg-red-500 hover:bg-red-600 cursor-pointer': selectedDocumentPdf != undefined
}"
[disabled]="selectedDocumentPdf == undefined"
(click)="onConfirm()">Confirm
</button>
</div> </div>
<div class="bg-grey p-6 shadow-lg mt-4 h-[calc(100vh-10rem)] overflow-auto"> <div class="bg-grey p-6 shadow-lg mt-4 h-[calc(100vh-10rem)] overflow-auto">