Skip to content

Commit

Permalink
fix: update the ui for the new split_expense_page (#3460)
Browse files Browse the repository at this point in the history 
* fix: update the ui for the new split_expense_page

* minor

* minor color change

* fix: update class name

* minor

* minor

---------

Co-authored-by: Snehasish <[email protected]>
  • Loading branch information
@Sishhhh
Sishhhh and Snehasish authored Feb 6, 2025
1 parent c5d0dcf commit 87370ff
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 122 deletions.
129 changes: 66 additions & 63 deletions src/app/fyle/split-expense/split-expense.page.html
View file
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.'"
></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
<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">
<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>
</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">
<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>
<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 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"
(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

0 comments on commit 87370ff

Please sign in to comment.