Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update the ui for the new split_expense_page #3460

Merged
merged 6 commits into from
Feb 6, 2025
Merged

fix: update the ui for the new split_expense_page #3460

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
684ab2c
fix: update the ui for the new split_expense_page
Jan 30, 2025
c5a67f2
minor
Jan 30, 2025
173b725
minor color change
Jan 30, 2025
eb1c49a
fix: update class name
Jan 30, 2025
6b05bb2
minor
Jan 31, 2025
17fadb3
minor
Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 66 additions & 63 deletions src/app/fyle/split-expense/split-expense.page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</ion-buttons>

<div class="split-expense--header-block">
<div class="split-expense--header-title" mode="md">Split by {{ splitExpenseHeader }}</div>
<div class="split-expense--header-title" mode="md">Split expense</div>
<ion-buttons>
<ion-button
(click)="save()"
Expand All @@ -26,30 +26,45 @@
</ion-header>

<div class="split-expense--top-bar">
<app-fy-alert-info [type]="'warning'" [message]="'Split expense cannot be undone'"></app-fy-alert-info>
<app-fy-alert-info
[type]="'warning'"
[message]="'Split expense is a permanent action and cannot be undone.'"
Sishhhh marked this conversation as resolved.
Show resolved Hide resolved
></app-fy-alert-info>

<div class="split-expense--amount-block" *ngIf="amount">
<div class="split-expense--amount-block__label">
Total:
<div class="split-expense--split-amount">{{ currency }} {{totalSplitAmount}}</div>
No.of splits
Sishhhh marked this conversation as resolved.
Show resolved Hide resolved
<div class="split-expense--split-amount">{{splitExpensesFormArray.controls.length}}</div>
</div>
<div class="split-expense--amount-block__label">
Remaining:
Total amount
<div class="split-expense--split-amount">{{ currency }} {{totalSplitAmount}}</div>
</div>
<div class="split-expense--amount-block__label split-expense--remaining-amount">
Remaining amount
<div class="split-expense--split-amount">{{ currency }} {{remainingAmount }}</div>
</div>
</div>
<div *ngIf="splitExpensesFormArray.controls.length === 30" class="split-expense--error-message-block">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Sishhhh, is this updated as per latest design Ashwathi shared?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Dimple16 Yess

<mat-icon class="split-expense--error-icon" svgIcon="danger-fill"></mat-icon>
<div>Cannot have more than 30 splits for an expense.</div>
</div>
<div *ngIf="showErrorBlock" class="split-expense--error-message-block">
<mat-icon class="split-expense--error-icon" svgIcon="danger-fill"></mat-icon>
<div>{{errorMessage}}</div>
</div>
</div>

<ion-content>
<div class="split-expense--container">
<div class="split-expense--card" *ngFor="let splitExpenseForm of splitExpensesFormArray.controls; index as i">
<div class="split-expense--card-header">
<p
class="split-expense--index"
[ngClass]="{'split-expense--remove': splitExpensesFormArray.controls.length > 2}"
>
SPLIT {{ i + 1 }}
</p>
<div class="split-expense--card-header-left-content">
<div class="split-expense--icon-container">
<mat-icon class="split-expense--split-count-icon" svgIcon="split"></mat-icon>
</div>
<div class="split-expense--index">SPLIT {{ i + 1 }}</div>
Sishhhh marked this conversation as resolved.
Show resolved Hide resolved
</div>
<mat-icon
class="split-expense--remove-icon"
*ngIf="splitExpensesFormArray.controls.length > 2"
Expand Down Expand Up @@ -78,7 +93,7 @@
</div>

<div class="split-expense--item split-expense--percentage">
<span class="split-expense--label">Percentage</span>
<span class="split-expense--label">Amount in %</span>
<input
inputmode="decimal"
type="number"
Expand All @@ -90,6 +105,30 @@
</div>
</div>

<div class="split-expense--main-block">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this the expense fields block?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yess

<div
class="split-expense--item split-expense--date"
[ngClass]="{'split-expense--date-invalid': splitExpenseForm.controls.txn_dt.touched && !splitExpenseForm.controls.txn_dt.valid}"
>
<div class="split-expense--label split-expense--date-label">Date of spend</div>
Sishhhh marked this conversation as resolved.
Show resolved Hide resolved
<span class="split-expense--mandatory">*</span>
<input
appFormatDate
class="split-expense--date-input date-input__format smartlook-show"
type="date"
formControlName="txn_dt"
[min]="minDate"
[max]="maxDate"
/>
</div>
<div
class="split-expense--error"
*ngIf="splitExpenseForm.controls.txn_dt.touched && !splitExpenseForm.controls.txn_dt.valid"
>
Please select a valid date.
</div>
</div>
Comment on lines +108 to +130
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Date input needs some validation power-up!

Add client-side date validation to prevent future dates:

 <input
   appFormatDate
   class="split-expense--date-input date-input__format smartlook-show"
   type="date"
   formControlName="txn_dt"
   [min]="minDate"
   [max]="maxDate"
+  (change)="validateDate($event)"
 />

Also, consider adding a date picker icon for better user experience:

 <div class="split-expense--label split-expense--date-label">Date of spend</div>
 <span class="split-expense--mandatory">*</span>
+<div class="date-input-container">
 <input
   appFormatDate
   class="split-expense--date-input date-input__format smartlook-show"
   type="date"
   formControlName="txn_dt"
   [min]="minDate"
   [max]="maxDate"
 />
+<mat-icon class="date-picker-icon" svgIcon="calendar"></mat-icon>
+</div>

Committable suggestion skipped: line range outside the PR's diff.


<div class="split-expense--main-block">
<div class="split-expense--internal-block" *ngIf="splitType === 'categories'">
<div *ngIf="categories$|async as categories">
Expand Down Expand Up @@ -152,30 +191,6 @@
Please select a cost center.
</div>
</div>

<div class="split-expense--internal-block">
<div
class="split-expense--item split-expense--date"
[ngClass]="{'split-expense--date-invalid': splitExpenseForm.controls.txn_dt.touched && !splitExpenseForm.controls.txn_dt.valid}"
>
<div class="split-expense--label split-expense--date-label">Date</div>
<span class="split-expense--mandatory">*</span>
<input
appFormatDate
class="split-expense--date-input date-input__format smartlook-show"
type="date"
formControlName="txn_dt"
[min]="minDate"
[max]="maxDate"
/>
</div>
<div
class="split-expense--error"
*ngIf="splitExpenseForm.controls.txn_dt.touched && !splitExpenseForm.controls.txn_dt.valid"
>
Please select a valid date.
</div>
</div>
</div>

<div
Expand All @@ -184,35 +199,23 @@
></div>
</ng-container>
</div>

<div class="split-expense--more-actions">
<div class="split-expense--add-more" *ngIf="splitExpensesFormArray.controls.length < 30" (click)="add()">
<mat-icon class="split-expense--add-more-icon" svgIcon="plus-square"></mat-icon>
<div class="text-center split-expense--add-more-label">Add Split</div>
</div>

<div *ngIf="splitExpensesFormArray.controls.length < 30" class="split-expense--more-actions__divider"></div>

<div class="split-expense--split-evenly" (click)="splitEvenly()">
<mat-icon class="split-expense--split-evenly-icon" svgIcon="split"></mat-icon>
<div class="text-center split-expense--split-evenly-label">Split Evenly</div>
</div>
</div>
</div>

<div class="split-expense--limit" *ngIf="splitExpensesFormArray.controls.length === 30">
<app-fy-alert-info
[type]="'warning'"
[message]="'Limit Reached: You cannot split an expense into more than 30 parts.'"
></app-fy-alert-info>
</div>
</ion-content>

<ion-footer *ngIf="showErrorBlock" class="split-expense--footer">
<div class="split-expense--error-container">
<div class="split-expense--error-message-block">
<mat-icon class="split-expense--error-icon" svgIcon="danger-fill"></mat-icon>
<p class="split-expense--error-message">{{errorMessage}}</p>
</div>
<ion-footer>
<div class="split-expense--more-actions">
<button
class="btn-outline-secondary split-expense--add-more"
*ngIf="splitExpensesFormArray.controls.length < 30"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should allow 30th split also right?

Copy link
Contributor Author

@Sishhhh Sishhhh Jan 30, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the split count is 29, this condition will remain true, so the add split button will remain visible, then the user can click on it and the split count will become 30 and the button will disappear

(click)="add()"
>
<mat-icon class="split-expense--add-more-icon" svgIcon="plus-square"></mat-icon>
<div class="split-expense--add-more-label">Add Split</div>
</button>

<button class="btn-outline-secondary split-expense--split-evenly" (click)="splitEvenly()">
<mat-icon class="split-expense--split-evenly-icon" svgIcon="split"></mat-icon>
<div class="split-expense--split-evenly-label">Split Evenly</div>
</button>
</div>
</ion-footer>
Loading