Fix/frontend bugs (#3931)

* Add snack-bar instead 'offline' field in header

* Add filter tags for Customers

* Fix sorting in customers orders table

* Remove coma

* Add tests for snack bar and filter tags

* Fix coderabbit issues

* Fix coderabbit issues

* Remove commas

Author: AnastasiaRakuta

src/app/app.component.html

@@ -1,7 +1,3 @@
-<div *ngIf="offline" class="offline">
-  <span>offline</span>
-</div>
-
 <router-outlet></router-outlet>
 
 <app-chat-contact-admin-pop-up></app-chat-contact-admin-pop-up>

src/app/app.component.scss

@@ -1,16 +1,5 @@
 @import '../typography/typography';
 
-.offline {
-  top: 50px;
-  left: 50%;
-  position: fixed;
-  font-weight: 500;
-  font-size: larger;
-  background: transparent;
-  color: var(--error-red);
-  z-index: 999;
-}
-
 ::ng-deep .mat-select:focus-visible {
   outline: 2px solid currentcolor !important;
 }

src/app/app.component.ts

@@ -7,6 +7,7 @@ import { filter, Subject } from 'rxjs';
 import { LocalStorageService } from 'src/app/shared/services/localstorage/local-storage.service';
 import { MetaService } from 'src/app/shared/services/meta/meta.service';
 import { SwUpdate, VersionReadyEvent } from '@angular/service-worker';
+import { MatSnackBarService } from '@global-service/mat-snack-bar/mat-snack-bar.service';
 
 @Component({
   selector: 'app-root',
@@ -21,7 +22,7 @@ export class AppComponent implements OnInit, OnDestroy {
   private readonly destroy$: Subject<void> = new Subject<void>();
   router: Router = inject(Router);
   metaService: MetaService = inject(MetaService);
-  offline: boolean;
+  private readonly snackBar = inject(MatSnackBarService);
 
   ngOnInit(): void {
     this.metaService.setMetaOnRouteChange();
@@ -45,7 +46,9 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   onNetworkStatusChange(): void {
-    this.offline = !navigator.onLine;
+    if (!navigator.onLine) {
+      this.snackBar.openSnackBar('noInternet');
+    }
   }
 
   ngOnDestroy(): void {

src/app/ubs/ubs-admin/components/ubs-admin-customers/customers-filters.interface.ts

@@ -0,0 +1,9 @@
+export interface FilterCustomers {
+  key: string;
+  labelKey: string;
+  fromValue?: string | null;
+  toValue?: string | null;
+  fromControl: string;
+  toControl: string;
+  isDate?: boolean;
+}

src/app/ubs/ubs-admin/components/ubs-admin-customers/ubs-admin-customer-orders/ubs-admin-customer-orders.component.html

@@ -18,10 +18,12 @@
         <th id="head" mat-header-cell *matHeaderCellDef [appResizeColumn]="{ resizable: true, index: i }">
           <div class="columns_header">
             <span>{{ column.title | serverTranslate: currentLang }}</span>
-            <mat-icon *ngIf="arrowDirection !== column.title.key" (click)="onSortTable(column.title.key, 'DESC')">
+            <mat-icon *ngIf="arrowDirection !== column.title.key" (click)="onSortTable(column.title.key, 'ASC')">
               arrow_downward
             </mat-icon>
-            <mat-icon *ngIf="arrowDirection === column.title.key" (click)="onSortTable(column.title.key, 'ASC')"> arrow_upward </mat-icon>
+            <mat-icon *ngIf="arrowDirection === column.title.key" (click)="onSortTable(column.title.key, 'DESC')">
+              arrow_upward
+            </mat-icon>
           </div>
         </th>
         <td mat-cell *matCellDef="let row">

src/app/ubs/ubs-admin/components/ubs-admin-customers/ubs-admin-customers.component.html

@@ -285,6 +285,25 @@
     </div>
   </div>
 </div>
+<div class="tag-filtrs-list" *ngIf="activeFilters.length">
+  <div class="tag-filter-item" *ngFor="let filter of activeFilters">
+    <button
+      type="button"
+      class="remove-item-btn"
+      (click)="removeActiveFilter(filter)"
+      [attr.aria-label]="'ubs-tables.clear-filters' | translate"
+    ></button>
+    <span class="filter-content">
+      {{ filter.labelKey | translate }}
+      <ng-container *ngIf="filter.fromValue">
+        {{ 'ubs-customer-filters.from' | translate }} {{ filter.fromValue }}
+      </ng-container>
+      <ng-container *ngIf="filter.toValue">
+        {{ 'ubs-customer-filters.to' | translate }} {{ filter.toValue }}
+      </ng-container>
+    </span>
+  </div>
+</div>
 
 <div id="table-container" class="scrolling" infiniteScroll [infiniteScrollThrottle]="100" (scrolled)="onScroll()" [scrollWindow]="false">
   <mat-table [dataSource]="dataSource" id="table" class="customers_table" *ngIf="!isLoading" cdkDropListGroup>

src/app/ubs/ubs-admin/components/ubs-admin-customers/ubs-admin-customers.component.scss

@@ -404,3 +404,40 @@ button:disabled {
   background-color: var(--ubs-primary-light-grey);
   border-color: var(--ubs-quaternary-light-grey);
 }
+
+.tag-filtrs-list {
+  display: flex;
+  flex-wrap: wrap; 
+  gap: 6px; 
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.tag-filter-item {
+  display: flex;
+  flex-direction: row; 
+  align-items: center; 
+  padding: 2px 6px; 
+  border-radius: 4px;
+  font-size: 12px; 
+  line-height: 16px;
+  max-width: fit-content;
+}
+
+.remove-item-btn {
+  width: 6px; 
+  height: 6px;
+  margin-left: 1px;
+  margin-right: 5px;
+  background-image: url('/assets/img/ubs-admin-employees/cross.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  border: 0;
+  background-color: transparent
+}
+
+.filter-content {
+  color: var(--ubs-dark-purple);
+  white-space: nowrap;
+}

src/app/ubs/ubs-admin/components/ubs-admin-customers/ubs-admin-customers.component.spec.ts

@@ -335,6 +335,28 @@ describe('UbsAdminCustomersComponent', () => {
     expect((component as any)['getTable']).toHaveBeenCalledTimes(1);
   });
 
+  it('should remove active filter and reset form controls', () => {
+    spyOn(component, 'submitFilterForm');
+    component.activeFilters = [{
+      key: 'bonuses',
+      labelKey: 'ubs-customer-filters.bonuses',
+      fromValue: '10',
+      toValue: '20',
+      fromControl: 'bonusesFrom',
+      toControl: 'bonusesTo',
+      isDate: false
+    }];
+    component.filterForm.patchValue({
+      bonusesFrom: 10,
+      bonusesTo: 20
+    });
+    component.removeActiveFilter(component.activeFilters[0]);
+    expect(component.activeFilters.length).toBe(0);
+    expect(component.filterForm.value.bonusesFrom).toBe('');
+    expect(component.filterForm.value.bonusesTo).toBe('');
+    expect(component.submitFilterForm).toHaveBeenCalled();
+  });
+
   it('should clear all filters and submit form', () => {
     component.filterForm.get('bonusesFrom').setValue('10');
     spyOn(component, 'submitFilterForm').and.callThrough();

src/app/ubs/ubs-admin/components/ubs-admin-customers/ubs-admin-customers.component.ts

@@ -34,6 +34,8 @@ import { ClientStatusEnum } from '@ubs/ubs/enums/client-status.enum';
 import { MatSelectChange } from '@angular/material/select';
 import { IAppState } from '../../../../store/state/app.state';
 import { ColumnParam, columnsParams } from '@ubs/ubs-admin/components/ubs-admin-customers/columnsParams.mock';
+import { DatePipe } from '@angular/common';
+import { FilterCustomers } from './customers-filters.interface';
 
 export const CUSTOM_DATE_FORMATS = {
   parse: {
@@ -78,6 +80,7 @@ export class UbsAdminCustomersComponent implements OnInit, AfterViewChecked, OnD
   enterPressed: boolean;
   adminTableOfCustomersSelector$ = this.store.select(adminTableOfCustomersSelector);
   tableData: any[];
+  activeFilters: FilterCustomers[] = [];
   readonly customerStatus = Object.values(ClientStatusEnum);
   private sortType: string;
   private sortingColumn: string;
@@ -256,7 +259,79 @@ export class UbsAdminCustomersComponent implements OnInit, AfterViewChecked, OnD
       this.currentPage = 0;
       this.getTable();
     }
-  }
+    this.buildActiveFilters();
+  }
+
+  private buildActiveFilters(): void {
+  this.activeFilters = [];
+
+  const map = [
+    {
+      key: 'registrationDate',
+      label: 'ubs-customer-filters.registration-date',
+      from: 'registrationDateFrom',
+      to: 'registrationDateTo',
+      isDate: true
+    },
+    {
+      key: 'lastOrderDate',
+      label: 'ubs-customer-filters.last-order-date',
+      from: 'lastOrderDateFrom',
+      to: 'lastOrderDateTo',
+      isDate: true
+    },
+    {
+      key: 'ordersCount',
+      label: 'ubs-customer-filters.orders-amount',
+      from: 'ordersCountFrom',
+      to: 'ordersCountTo'
+    },
+    {
+      key: 'violations',
+      label: 'ubs-customer-filters.violations',
+      from: 'violationsFrom',
+      to: 'violationsTo'
+    },
+    {
+      key: 'bonuses',
+      label: 'ubs-customer-filters.bonuses',
+      from: 'bonusesFrom',
+      to: 'bonusesTo'
+    }
+  ];
+
+  const locale = this.currentLang === 'uk' ? 'uk-UA' : 'en-GB';
+  const datePipe = new DatePipe(locale);
+
+  map.forEach((f) => {
+    let from = this.filterForm.get(f.from).value;
+    let to = this.filterForm.get(f.to).value;
+
+    if (f.isDate) {
+      from = from ? datePipe.transform(new Date(from), 'dd/MM/yyyy') : from;
+      to = to ? datePipe.transform(new Date(to), 'dd/MM/yyyy') : to;
+    }
+       
+    if (from || to) {
+      this.activeFilters.push({
+        key: f.key,
+        labelKey: f.label,
+        fromValue: from,
+        toValue: to,
+        fromControl: f.from,
+        toControl: f.to,
+        isDate: f.isDate
+      });
+    }
+  });
+}
+
+removeActiveFilter(filter): void {
+  this.filterForm.get(filter.fromControl).setValue('');
+  this.filterForm.get(filter.toControl).setValue('');
+  this.activeFilters = this.activeFilters.filter(f => f.key !== filter.key);
+  this.submitFilterForm();
+}
 
   onDeleteFilter(filterFrom: string, filterTo: string) {
     this.filterForm.get(filterFrom).setValue('');