Fix : sidebar button enabling and disabling based on user inputs means functinal shcecking of fields is done

This commit is contained in:
Sibin Sabu 2025-09-21 15:29:46 +05:30
parent 102b6d57df
commit 68d3ff34da
3 changed files with 64 additions and 21 deletions

View File

@ -539,3 +539,19 @@ strong{
opacity: 0.5;
cursor: not-allowed;
}
.deposit-print-btn[disabled]{
opacity: 0.5;
cursor: not-allowed;
}
.deposit-cancel-btn[disabled]{
opacity: 0.5;
cursor: not-allowed;
}
.erase-btn[disabled],.withdraw-print-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
}

View File

@ -42,15 +42,13 @@
<div class="modal-loading" *ngIf="loadingMessage">{{ loadingMessage }}</div>
</div>
<!-- <div class="modal-footer">
<button class="cancel-btn" (click)="closeCancelPopup()">CANCEL</button>
<button class="print-btn" (click)="printTicketCancel()">PRINT</button>
</div> -->
<div class="modal-footer">
<button class="cancel-btn" (click)="closeCancelPopup()">CANCEL</button>
<button class="cancel-btn" (click)="closeCancelPopup()" [disabled]="!!loadingMessage">CANCEL</button>
<button class="print-btn"
(click)="printTicketCancel()"
[disabled]="!!loadingMessage">PRINT</button>
[disabled]="!!loadingMessage"
[disabled]="!!loadingMessage || !( (ticketNo || '').trim() )">PRINT</button>
</div>
</div>
</div>
@ -67,26 +65,22 @@
id="payoutTicketNo"
class="modal-input"
[(ngModel)]="payoutTicketNo"
/>
(ngModelChange)="onPayoutTicketChange($event)"
maxlength="16"
/>
</div>
<div class="warning-message" *ngIf="payoutWarning">{{ payoutWarning }}</div>
<div class="modal-loading" *ngIf="loadingMessage">{{ loadingMessage }}</div>
<!-- <div class="modal-footer">
<button class="cancel-btn" (click)="closePayoutPopup()">CANCEL</button>
<button class="erase-btn" (click)="erasePayoutTicket()">ERASE</button>
<button class="print-btn" (click)="printPayoutTicket()">PRINT</button>
</div> -->
<!-- inside PAY-OUT modal-footer -->
<div class="modal-footer">
<button class="cancel-btn" (click)="closePayoutPopup()">CANCEL</button>
<button class="cancel-btn" (click)="closePayoutPopup()" [disabled]="!!loadingMessage">CANCEL</button>
<button class="erase-btn" (click)="erasePayoutTicket()" [disabled]="!!loadingMessage">ERASE</button>
<!-- safe: coerce to '' before trim -->
<button
class="print-btn"
(click)="printPayoutTicket()"
[disabled]="!!loadingMessage || !( (payoutTicketNo || '') .trim() )"
[disabled]="!!loadingMessage || (payoutTicketNo?.length !== 16)"
>
PRINT
</button>
@ -95,7 +89,7 @@
</div>
</div>
<!-- Deposit Modal -->
<!-- ------------------------------------------DEPOSIT MODAL ------------------------------------------------->
<div class="deposit-modal-overlay" *ngIf="showDeposit">
<div class="deposit-modal-box">
<h3 class="deposit-modal-title">DEPOSIT</h3>
@ -162,11 +156,21 @@
</div>
<div class="deposit-footer">
<button class="deposit-cancel-btn" (click)="closeDepositPopup()">
<button class="deposit-cancel-btn" (click)="closeDepositPopup()" [disabled]="!!loadingMessage">
CANCEL
</button>
<button class="deposit-print-btn" (click)="printDeposit()">PRINT</button>
<button class="deposit-print-btn" (click)="printDeposit()"
[disabled]="
!!loadingMessage ||
(depositOperatorId?.length !== 12) ||
(depositShroffId?.length !== 12) ||
!(depositAmount?.trim())
"
>
PRINT
</button>
</div>
<div class="modal-loading" *ngIf="loadingMessage">{{ loadingMessage }}</div>
</div>
</div>
@ -243,13 +247,20 @@
</div>
<div class="withdraw-footer">
<button class="withdraw-cancel-btn" (click)="closeWithdrawPopup()">
<button class="withdraw-cancel-btn" (click)="closeWithdrawPopup()" [disabled]="!!loadingMessage">
CANCEL
</button>
<button class="withdraw-print-btn" (click)="printWithdraw()">
<button class="withdraw-print-btn" (click)="printWithdraw()"
[disabled]="
!!loadingMessage ||
(withdrawOperatorId?.length !== 12) ||
(withdrawShroffId?.length !== 12) ||
!(withdrawAmount?.trim())
">
PRINT
</button>
</div>
<div class="modal-loading" *ngIf="loadingMessage">{{ loadingMessage }}</div>
</div>
</div>

View File

@ -289,6 +289,19 @@ Original Total: ₹${cancelTicketData.totalAmount}
payoutWarning = ''; // show GUI message when payout response is not as expected
onPayoutTicketChange(value: string) {
if (value.length > 16) {
this.payoutTicketNo = value.slice(0, 16); // trim to 16
} else {
this.payoutTicketNo = value;
}
// if not exactly 16 chars, you can clear it completely:
if (this.payoutTicketNo.length !== 16) {
this.payoutTicketNo = '';
}
}
async printPayoutTicket() {
console.log("🖨️ Print payout clicked");
@ -471,7 +484,7 @@ async printDeposit() {
btId: btid,
btMake: btMake
};
this.loadingMessage = 'Printing Deposit — please wait...';
console.log("📡 Sending deposit API request:", apiPayload);
try {
@ -633,6 +646,9 @@ ${content}
console.error("❌ Deposit API call failed:", err);
this.depositWarning = '❌ Deposit API call failed. Please try again.';
}
finally {
this.loadingMessage = ''; // ALWAYS clear loading message
}
}
//--------------------------------------PRINT DEPOSIT TICKET ENDS HERE -------------------------------------------------------------