feat: implement filter icon

Author: AntoineRelief

apps/back-office/src/app/application/application.component.html

@@ -17,6 +17,7 @@
     [title]="title"
     [navItems]="adminNavItems"
     [canUpdate]="application?.canUpdate!"
+    class="overflow-hidden"
   ></app-application-header>
 </ng-template>
 <!--Need the nav variable, don't remove let-nav, used in layout-->

apps/back-office/src/app/components/application-header/application-header.component.html

@@ -1,5 +1,5 @@
 <div class="flex flex-row items-center justify-between gap-x-2">
-  <div class="flex items-center gap-2">
+  <div class="flex items-center gap-2 overflow-hidden">
     <!-- Title -->
     <h2 class="!m-0 truncate">
       {{ title }}
@@ -13,6 +13,7 @@ <h2 class="!m-0 truncate">
       [uiMenuTriggerFor]="settingsMenu"
       [uiTooltip]="'common.settings' | translate"
     ></ui-button>
+    <shared-dashboard-filter-icon></shared-dashboard-filter-icon>
   </div>
   <div class="flex flex-row gap-2 items-center" *ngIf="canUpdate">
     <!-- Unlock application edition -->

apps/back-office/src/app/components/application-header/application-header.module.ts

@@ -2,9 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ApplicationHeaderComponent } from './application-header.component';
 import { TranslateModule } from '@ngx-translate/core';
-import { IconModule, TooltipModule } from '@oort-front/ui';
+import {
+  IconModule,
+  TooltipModule,
+  MenuModule,
+  ButtonModule,
+} from '@oort-front/ui';
 import { RouterModule } from '@angular/router';
-import { MenuModule, ButtonModule } from '@oort-front/ui';
+import { DashboardFilterIconComponent } from '@oort-front/shared';
 
 /**
  * Application toolbar module.
@@ -19,6 +24,7 @@ import { MenuModule, ButtonModule } from '@oort-front/ui';
     RouterModule,
     ButtonModule,
     TooltipModule,
+    DashboardFilterIconComponent,
   ],
   exports: [ApplicationHeaderComponent],
 })

apps/front-office/src/app/application/application.component.html

@@ -39,6 +39,7 @@ <h2 class="!m-0 overflow-hidden text-ellipsis whitespace-nowrap">
     [uiMenuTriggerFor]="settingsMenu"
     [uiTooltip]="'common.settings' | translate"
   ></ui-button>
+  <shared-dashboard-filter-icon></shared-dashboard-filter-icon>
 </ng-template>
 
 <!-- Admin pages -->

apps/front-office/src/app/application/application.module.ts

@@ -2,7 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ApplicationComponent } from './application.component';
 import { ApplicationRoutingModule } from './application-routing.module';
-import { LayoutModule, EmptyModule, NavbarModule } from '@oort-front/shared';
+import {
+  LayoutModule,
+  EmptyModule,
+  NavbarModule,
+  DashboardFilterIconComponent,
+} from '@oort-front/shared';
 import { TranslateModule } from '@ngx-translate/core';
 import {
   ButtonModule,
@@ -30,6 +35,7 @@ import {
     ButtonModule,
     SpinnerModule,
     TooltipModule,
+    DashboardFilterIconComponent,
   ],
 })
 export class ApplicationModule {}

libs/shared/src/index.ts

@@ -83,6 +83,7 @@ export * from './lib/components/content-choice/public-api';
 export * from './lib/components/workflow-stepper/public-api';
 export * from './lib/components/applications-summary/public-api';
 export * from './lib/components/dashboard-filter/public-api';
+export * from './lib/components/dashboard-filter-icon/public-api';
 export * from './lib/components/snackbar-spinner/public-api';
 export * from './lib/components/skeleton/skeleton-table/public-api';
 export * from './lib/components/mapping/public-api';
@@ -93,7 +94,6 @@ export * from './lib/components/utils/unsubscribe/public-api';
 export * from './lib/components/editable-text/public-api';
 export * from './lib/components/cron-expression-control/public-api';
 export * from './lib/components/applications-archive/public-api';
-export * from './lib/components/dashboard-filter/public-api';
 export * from './lib/components/editor-control/editor-control.component';
 export * from './lib/components/button-action/public-api';
 export * from './lib/components/custom-widget-style/custom-widget-style.component';

libs/shared/src/lib/components/applications-archive/applications-archive.component.ts

@@ -2,12 +2,10 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
-import {
-  ApplicationService,
-  ConfirmService,
-  UnsubscribeComponent,
-} from '@oort-front/shared';
 import { distinctUntilChanged, takeUntil } from 'rxjs';
+import { ApplicationService } from '../../services/application/application.service';
+import { ConfirmService } from '../../services/confirm/confirm.service';
+import { UnsubscribeComponent } from '../utils/unsubscribe/unsubscribe.component';
 
 /**
  * Mocked Interface

libs/shared/src/lib/components/dashboard-filter-icon/dashboard-filter-icon.component.html

@@ -0,0 +1,15 @@
+<kendo-badge-container>
+  <ui-button
+    [isIcon]="true"
+    variant="light"
+    icon="filter_alt"
+    size="large"
+  ></ui-button>
+  <kendo-badge
+    shape="dot"
+    themeColor="error"
+    size="small"
+    class="!-translate-x-1/4 !translate-y-full"
+    *ngIf="active"
+  ></kendo-badge>
+</kendo-badge-container>

libs/shared/src/lib/components/dashboard-filter-icon/dashboard-filter-icon.component.scss

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardFilterIconComponent } from './dashboard-filter-icon.component';
+
+describe('DashboardFilterIconComponent', () => {
+  let component: DashboardFilterIconComponent;
+  let fixture: ComponentFixture<DashboardFilterIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardFilterIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DashboardFilterIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});