WEB-637 :- Display "No Data Available" message instead of empty tables on Client General Tab #3060
Conversation
|
Note
|
| Cohort / File(s) | Summary |
|---|---|
Template Rendering src/app/clients/clients-view/general-tab/general-tab.component.html |
Replaced unconditional tables with conditional rendering: show a localized no-data message (div.no-data-message) when each data array is empty; otherwise render the original tables and bindings for Upcoming Charges, Loan/Saving/Fixed/Recurring Deposit, Share Accounts, and Collateral Data. |
Component Logic src/app/clients/clients-view/general-tab/general-tab.component.ts |
Converted public properties to typed arrays with defaults (loanAccounts, savingAccounts, shareAccounts, upcomingCharges, collaterals as any[] = []). Initialization now uses ` |
Styling src/app/clients/clients-view/general-tab/general-tab.component.scss |
Added .no-data-message styles (centered, gray/italic text, padding, light background, rounded corners) and nested p rules for consistent empty-state appearance. |
Translations src/assets/translations/.../*.json src/assets/translations/en-US.json, src/assets/translations/fr-FR.json, src/assets/translations/de-DE.json, src/assets/translations/es-CL.json, src/assets/translations/es-MX.json, src/assets/translations/it-IT.json, src/assets/translations/pt-PT.json, src/assets/translations/lv-LV.json, src/assets/translations/lt-LT.json, src/assets/translations/ne-NE.json, src/assets/translations/sw-SW.json, src/assets/translations/cs-CS.json |
Added multiple localized strings under messages → No Data Found for various empty-state texts (e.g., "No Upcoming Charges Available", "No Active Loan Accounts Available", "No Collateral Data Available") across locales. Purely additive JSON entries. |
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
- WEB-521 fix(i18n): add missing translations and apply translate pipes across … #2934 — also modifies i18n translations and UI placeholders related to no-data messaging.
Suggested reviewers
- IOhacker
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title clearly and accurately describes the main objective: displaying 'No Data Available' messages instead of empty tables on the Client General Tab, which aligns with all the changes across HTML, TypeScript, SCSS, and translation files. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing touches
- 📝 Generate docstrings
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
There was a problem hiding this comment.
Pull request overview
This pull request implements a UI improvement to display "No Data Available" messages instead of empty tables on the Client General Tab. This enhances the user experience by providing clear feedback when no data is available for various account types and charges.
Changes:
- Initialized account and charge arrays to empty arrays with null-coalescing operators to prevent undefined states
- Added conditional rendering logic to display "No Data Available" messages when tables are empty
- Created CSS styling for the no-data-message component
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 12 comments.
| File | Description |
|---|---|
| src/app/clients/clients-view/general-tab/general-tab.component.ts | Initialized arrays for loans, savings, shares, charges, and collaterals to empty arrays with null-coalescing operators to ensure they're never undefined |
| src/app/clients/clients-view/general-tab/general-tab.component.scss | Added styling for the no-data-message component with centered text, gray color, and light background |
| src/app/clients/clients-view/general-tab/general-tab.component.html | Added conditional rendering to display "No Data Available" messages for all 12 table sections (upcoming charges, active/closed accounts for loans, savings, fixed deposits, recurring deposits, shares, and collaterals) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </ng-container> | ||
| @if (upcomingCharges?.length === 0) { | ||
| <div class="no-data-message"> | ||
| <p>No Upcoming Charges Available</p> |
There was a problem hiding this comment.
This message should use the translate pipe for internationalization. All text displayed to users in this application uses translation. Consider wrapping this with {{ 'labels.messages.No Upcoming Charges Available' | translate }} or a similar translation key.
| <p>No Upcoming Charges Available</p> | |
| <p>{{ 'labels.messages.No Upcoming Charges Available' | translate }}</p> |
| @if (element.status.active) { | ||
| @if ((loanAccounts | accountsFilter: 'loan')?.length === 0) { | ||
| <div class="no-data-message"> | ||
| <p>No Active Loan Accounts Available</p> |
There was a problem hiding this comment.
This message should use the translate pipe for internationalization. All text displayed to users in this application uses translation. Consider wrapping this with {{ 'labels.messages.No Active Loan Accounts Available' | translate }} or a similar translation key.
| <p>No Active Loan Accounts Available</p> | |
| <p>{{ 'labels.messages.No Active Loan Accounts Available' | translate }}</p> |
| </table> | ||
| @if ((savingAccounts | accountsFilter: 'saving' : 'open' : 'isSavings')?.length === 0) { | ||
| <div class="no-data-message"> | ||
| <p>No Active Saving Accounts Available</p> |
There was a problem hiding this comment.
This message should use the translate pipe for internationalization. All text displayed to users in this application uses translation. Consider wrapping this with {{ 'labels.messages.No Active Saving Accounts Available' | translate }} or a similar translation key.
| <p>No Active Saving Accounts Available</p> | |
| <p>{{ 'labels.messages.No Active Saving Accounts Available' | translate }}</p> |
| </table> | ||
| @if ((savingAccounts | accountsFilter: 'saving' : 'closed' : 'isFixed')?.length === 0) { | ||
| <div class="no-data-message"> | ||
| <p>No Closed Fixed Deposit Accounts Available</p> |
There was a problem hiding this comment.
This message should use the translate pipe for internationalization. All text displayed to users in this application uses translation. Consider wrapping this with {{ 'labels.messages.No Closed Fixed Deposit Accounts Available' | translate }} or a similar translation key.
| </table> | ||
| @if ((savingAccounts | accountsFilter: 'saving' : 'open' : 'isRecurring')?.length === 0) { | ||
| <div class="no-data-message"> | ||
| <p>No Active Recurring Deposit Accounts Available</p> |
There was a problem hiding this comment.
This message should use the translate pipe for internationalization. All text displayed to users in this application uses translation. Consider wrapping this with {{ 'labels.messages.No Active Recurring Deposit Accounts Available' | translate }} or a similar translation key.
| <p>No Active Recurring Deposit Accounts Available</p> | |
| <p>{{ 'labels.messages.No Active Recurring Deposit Accounts Available' | translate }}</p> |
| </table> | ||
| @if ((loanAccounts | accountsFilter: 'loan' : 'closed')?.length === 0) { | ||
| <div class="no-data-message"> | ||
| <p>No Closed Loan Accounts Available</p> |
There was a problem hiding this comment.
This message should use the translate pipe for internationalization. All text displayed to users in this application uses translation. Consider wrapping this with {{ 'labels.messages.No Closed Loan Accounts Available' | translate }} or a similar translation key.
| <p>No Closed Loan Accounts Available</p> | |
| <p>{{ 'labels.messages.No Closed Loan Accounts Available' | translate }}</p> |
| </table> | ||
| @if ((savingAccounts | accountsFilter: 'saving' : 'closed' : 'isSavings')?.length === 0) { | ||
| <div class="no-data-message"> | ||
| <p>No Closed Saving Accounts Available</p> |
There was a problem hiding this comment.
This message should use the translate pipe for internationalization. All text displayed to users in this application uses translation. Consider wrapping this with {{ 'labels.messages.No Closed Saving Accounts Available' | translate }} or a similar translation key.
| <p>No Closed Saving Accounts Available</p> | |
| <p>{{ 'labels.messages.No Closed Saving Accounts Available' | translate }}</p> |
| </table> | ||
| @if ((savingAccounts | accountsFilter: 'saving' : 'open' : 'isFixed')?.length === 0) { | ||
| <div class="no-data-message"> | ||
| <p>No Active Fixed Deposit Accounts Available</p> |
There was a problem hiding this comment.
This message should use the translate pipe for internationalization. All text displayed to users in this application uses translation. Consider wrapping this with {{ 'labels.messages.No Active Fixed Deposit Accounts Available' | translate }} or a similar translation key.
| <p>No Active Fixed Deposit Accounts Available</p> | |
| <p>{{ 'labels.messages.No Active Fixed Deposit Accounts Available' | translate }}</p> |
| </table> | ||
| @if ((savingAccounts | accountsFilter: 'saving' : 'closed' : 'isRecurring')?.length === 0) { | ||
| <div class="no-data-message"> | ||
| <p>No Closed Recurring Deposit Accounts Available</p> |
There was a problem hiding this comment.
This message should use the translate pipe for internationalization. All text displayed to users in this application uses translation. Consider wrapping this with {{ 'labels.messages.No Closed Recurring Deposit Accounts Available' | translate }} or a similar translation key.
| <p>No Closed Recurring Deposit Accounts Available</p> | |
| <p>{{ 'labels.messages.No Closed Recurring Deposit Accounts Available' | translate }}</p> |
| </table> | ||
| @if ((shareAccounts | accountsFilter: 'share')?.length === 0) { | ||
| <div class="no-data-message"> | ||
| <p>No Active Share Accounts Available</p> |
There was a problem hiding this comment.
This message should use the translate pipe for internationalization. All text displayed to users in this application uses translation. Consider wrapping this with {{ 'labels.messages.No Active Share Accounts Available' | translate }} or a similar translation key.
| <p>No Active Share Accounts Available</p> | |
| <p>{{ 'labels.messages.No Active Share Accounts Available' | translate }}</p> |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/app/clients/clients-view/general-tab/general-tab.component.html`:
- Around line 57-123: Hardcoded empty-state messages (e.g., "No Upcoming Charges
Available") are not localized; replace each static string with the translate
pipe using your i18n key pattern. For the shown block (upcomingCharges) change
the <div class="no-data-message"><p>…</p></div> text to use a translation key
(for example {{ 'labels.messages.noUpcomingCharges' | translate }}), and apply
the same change to the other 12 occurrences named in the review: "No Active Loan
Accounts Available", "No Closed Loan Accounts Available", "No Active Saving
Accounts Available", "No Closed Saving Accounts Available", "No Active Fixed
Deposit Accounts Available", "No Closed Fixed Deposit Accounts Available", "No
Active Recurring Deposit Accounts Available", "No Closed Recurring Deposit
Accounts Available", "No Active Share Accounts Available", "No Closed Share
Accounts Available", and "No Collateral Data Available" — locate each message in
general-tab.component.html by its exact text and replace with the corresponding
i18n key + | translate so all empty-state messages use the translate pipe.
🧹 Nitpick comments (2)
src/app/clients/clients-view/general-tab/general-tab.component.ts (1)
220-227: Prefer explicit account/charge/collateral interfaces overany[].
Usingany[]undermines strict typing; consider domain interfaces (or existing models) for compile-time safety.As per coding guidelines: For Angular code: verify component separation, trackBy on *ngFor, strict type safety, and clean observable patterns.♻️ Possible typing refinement
- loanAccounts: any[] = []; + loanAccounts: LoanAccount[] = []; - savingAccounts: any[] = []; + savingAccounts: SavingsAccount[] = []; - shareAccounts: any[] = []; + shareAccounts: ShareAccount[] = []; - upcomingCharges: any[] = []; + upcomingCharges: ChargeItem[] = []; - collaterals: any[] = []; + collaterals: Collateral[] = [];Also applies to: 242-242
src/app/clients/clients-view/general-tab/general-tab.component.html (1)
141-278: Cache the filtered list to avoid double pipe evaluation.
accountsFilterruns twice (length check + dataSource). Consider caching with a template variable or in the component to avoid redundant work and inconsistent results if the pipe becomes impure.♻️ Example with `@let`
- `@if` (!showClosedLoanAccounts) { - `@if` ((loanAccounts | accountsFilter: 'loan')?.length === 0) { + `@if` (!showClosedLoanAccounts) { + `@let` activeLoans = loanAccounts | accountsFilter: 'loan'; + `@if` (activeLoans?.length === 0) { <div class="no-data-message"> <p>No Active Loan Accounts Available</p> </div> } `@else` { - <table mat-table [dataSource]="loanAccounts | accountsFilter: 'loan'"> + <table mat-table [dataSource]="activeLoans">
Omar-Nabil2
force-pushed
the
displaynotavalaiblemsg
branch
from
fe65718 to
b670103
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In `@src/assets/translations/es-MX.json`:
- Line 3548: The translation for the key "No Collateral Data Available" uses
"colateral" and should match the existing vocabulary in this locale; update the
value to use "Garantía" (e.g., "No hay datos de garantía disponibles") so it
aligns with other translations that use "Garantía" throughout the file.
In `@src/assets/translations/it-IT.json`:
- Around line 3533-3542: Update the Italian translations for the listed
account-related keys to use the normalized phrasing "conto di ..." to match
existing terminology (e.g., change values for "No Active Loan Accounts
Available", "No Closed Loan Accounts Available", "No Active Saving Accounts
Available", "No Closed Saving Accounts Available", "No Active Fixed Deposit
Accounts Available", "No Closed Fixed Deposit Accounts Available", "No Active
Recurring Deposit Accounts Available", "No Closed Recurring Deposit Accounts
Available", "No Active Share Accounts Available", and "No Closed Share Accounts
Available" to use "conto di prestito", "conto di risparmio", "conto di deposito
fisso", "conto di deposito ricorrente", "conto di azioni" respectively and
ensure grammatical agreement like "Nessun conto di prestito attivo disponibile"
/ "Nessun conto di prestito chiuso disponibile").
In `@src/assets/translations/ne-NE.json`:
- Around line 3531-3543: The new Nepali strings must use the existing vocabulary
from this locale: update the values for "No Active Loan Accounts Available" and
"No Closed Loan Accounts Available" to use "ऋण" instead of "रिण"; update "No
Active Fixed Deposit Accounts Available" and "No Closed Fixed Deposit Accounts
Available" to use "फिक्स्ड डिपोजिट" instead of "निश्चित निक्षेप"; update "No
Active Recurring Deposit Accounts Available" and "No Closed Recurring Deposit
Accounts Available" to use "आवर्ती जम्मा" instead of "आवर्ती निक्षेप"; and
change "No Collateral Data Available" to use "संपार्श्विक" instead of "धरौटी" so
all translation keys remain terminology-consistent with earlier entries.
|
@IOhacker I have Added translation pipes to 12 hardcoded text messages in general-tab component and updated all 13 language translation JSON files accordingly. Could you check now ? |
2 participants
Description
Display "No Data Available" message instead of empty tables on Client General Tab
Screenshots, if any
before
before.mp4
after
after.mp4
Checklist
Please make sure these boxes are checked before submitting your pull request - thanks!
If you have multiple commits please combine them into one commit by squashing them.
Read and understood the contribution guidelines at
web-app/.github/CONTRIBUTING.md.Summary by CodeRabbit
Bug Fixes
Chores
✏️ Tip: You can customize this high-level summary in your review settings.