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 {
@Input() document!: GetSigningRequestResponseSigningRequestDocument;
getStatusClasses() {
getStatusClasses(): string {
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">
<h2 class="text-lg font-semibold mb-2">Signing {{ documents.length }} documents</h2>
<p class="text-gray-500 text-sm mb-4">Submitted 5 days ago.</p>
<h2 class="text-lg font-semibold mb-2">Confirming {{ documents.length }} documents</h2>
<p class="text-gray-500 text-sm mb-4">You must confirm all documents before signing.</p>
<ul>
<app-signing-sidebar-item *ngFor="let doc of documents"
class="cursor-pointer"
(click)="selectDocument(doc)"
[document]="doc"></app-signing-sidebar-item>
class="cursor-pointer"
(click)="selectDocument(doc)"
[document]="doc" />
</ul>
<div class="mt-6 flex justify-between">
<button class="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>
<div class="mt-6 flex flex-col lg:flex-row md:justify-between gap-4">
<button class="w-full md:w-auto px-4 py-2 bg-gray-300 rounded">Reject all</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>

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

@ -16,4 +16,11 @@ export class SigningSidebarComponent {
selectDocument(doc: GetSigningRequestResponseSigningRequestDocument): void {
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="bg-gray-700 text-white p-4 flex justify-between">
<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 class="bg-grey p-6 shadow-lg mt-4 h-[calc(100vh-10rem)] overflow-auto">