feat(dashboard-lib): Start fixing components

Author: samirtechlab

gravitee-apim-portal-webui-next/package.json

@@ -48,6 +48,8 @@
     "@angular/router": "19.2.4",
     "@asciidoctor/core": "3.0.4",
     "@asyncapi/web-component": "2.6.3",
+    "@danielmoncada/angular-datetime-picker": "^20.0.1",
+    "@danielmoncada/angular-datetime-picker-moment-adapter": "^7.0.1",
     "@emoji-mart/data": "1.2.1",
     "@fontsource/dm-mono": "5.2.5",
     "@fontsource/dm-sans": "5.2.5",
@@ -75,6 +77,7 @@
     "marked-extended-tables": "1.1.1",
     "marked-gfm-heading-id": "3.2.0",
     "marked-highlight": "2.2.1",
+    "moment": "^2.30.1",
     "ng2-charts": "8.0.0",
     "ngx-dynamic-hooks": "3.1.2",
     "ngx-infinite-scroll": "19.0.0",

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/package.json

@@ -8,7 +8,10 @@
     "chart.js": "4.3.0",
     "ng2-charts": "8.0.0",
     "@angular/material": "19.2.7",
-    "@angular/cdk": "19.2.7"
+    "@angular/cdk": "19.2.7",
+    "@danielmoncada/angular-datetime-picker": "19.0.0",
+    "@danielmoncada/angular-datetime-picker-moment-adapter": "6.0.2",
+    "moment": "2.30.1"
   },
   "dependencies": {
     "tslib": "2.3.1"

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/filter/dropdown-search/dropdown-search-overlay/dropdown-search-overlay.component.html

@@ -19,7 +19,7 @@
   <!-- Search input -->
   <div class="gio-select-search__search">
     <mat-form-field class="gio-select-search__search-field" appearance="outline">
-      <mat-icon matPrefix svgIcon="gio:search"></mat-icon>
+      <mat-icon matPrefix svgIcon="gio:search" />
       <input matInput [formControl]="searchControl" [placeholder]="placeholder" #searchInput />
       @if (searchControl.value) {
         <button matSuffix mat-icon-button type="button" (click)="searchControl.setValue('')" [attr.aria-label]="'Clear search'">
@@ -38,19 +38,19 @@
           [disabled]="option.disabled"
           [value]="option.value"
           class="gio-select-search__option-checkbox"
-          color="primary"
-        />
+          color="primary" />
         <span class="gio-select-search__option-label">{{ option.label }}</span>
       </div>
     }
 
     @if (isLoading) {
       <div class="gio-select-search__loading-more">
-        <gio-loader />
+        <!--         <gio-loader />-->
+        Loading...
       </div>
     } @else if (options().length === 0) {
       <div class="gio-select-search__option disabled-option">
-        <mat-checkbox disabled checked="false" class="gio-select-search__option-checkbox"> </mat-checkbox>
+        <mat-checkbox disabled checked="false" class="checkbox" />
         <span class="gio-select-search__option-label">No options available</span>
       </div>
     }
@@ -61,8 +61,7 @@
       type="button"
       [disabled]="selectedValues.length === 0"
       (click)="clearSelection()"
-      [attr.aria-label]="'Clear selection'"
-    >
+      [attr.aria-label]="'Clear selection'">
       Clear Selection
       @if (selectedValues.length > 0) {
         ({{ selectedValues.length }})

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/filter/dropdown-search/dropdown-search-overlay/dropdown-search-overlay.component.scss

@@ -0,0 +1,77 @@
+/*
+ * Copyright (C) 2025 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@use '@angular/material' as mat;
+//@use '@gravitee/ui-particles-angular' as gio;
+
+.gio-select-search-overlay {
+  max-width: 280px;
+}
+
+.gio-select-search {
+  &__search {
+    padding: 16px;
+    //border-bottom: 1px solid mat.m2-get-color-from-palette(gio.$mat-smoke-palette, 'lighter20');
+    width: 100%;
+  }
+
+  &__search-field {
+    width: 100%;
+    margin: 0;
+  }
+
+  &__options {
+    max-height: 250px;
+    overflow-y: scroll;
+    padding-left: 8px;
+  }
+
+  &__loading-more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 16px;
+
+    gio-loader {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &-label {
+      flex: 1;
+    }
+  }
+
+  &__clear-selection {
+    //border-top: 1px solid mat.m2-get-color-from-palette(gio.$mat-smoke-palette, 'lighter20');
+    height: 70px;
+    padding-left: 10px;
+    display: flex;
+    flex-flow: column;
+    align-items: flex-start;
+    justify-content: center;
+  }
+}
+
+.disabled-option {
+  //color: mat.m2-get-color-from-palette(gio.$mat-smoke-palette, 'default');
+  cursor: auto;
+}

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/filter/dropdown-search/dropdown-search-overlay/dropdown-search-overlay.component.spec.ts

@@ -1,3 +1,18 @@
+/*
+ * Copyright (C) 2025 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DropdownSearchOverlayComponent } from './dropdown-search-overlay.component';
@@ -8,9 +23,8 @@ describe('DropdownSearchOverlayComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [DropdownSearchOverlayComponent]
-    })
-    .compileComponents();
+      imports: [DropdownSearchOverlayComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(DropdownSearchOverlayComponent);
     component = fixture.componentInstance;

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/filter/dropdown-search/dropdown-search-overlay/dropdown-search-overlay.component.ts

@@ -1,18 +1,32 @@
-import { Component, ElementRef, signal, ViewChild, AfterViewInit, DestroyRef, inject, OnInit } from '@angular/core';
+/*
+ * Copyright (C) 2025 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { CdkScrollable } from '@angular/cdk/scrolling';
 import { CommonModule } from '@angular/common';
+import { Component, ElementRef, signal, ViewChild, AfterViewInit, DestroyRef, inject, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { GioIconsModule, GioLoaderModule } from '@gravitee/ui-particles-angular';
-import { distinctUntilChanged, startWith, tap } from 'rxjs/operators';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject } from 'rxjs';
-import { MatOptionModule } from '@angular/material/core';
-import { MatCardModule } from '@angular/material/card';
-import { CdkScrollable } from '@angular/cdk/scrolling';
+import { distinctUntilChanged, startWith, tap } from 'rxjs/operators';
 
 export interface SelectOption {
   value: string;
@@ -30,8 +44,6 @@ export interface SelectOption {
     MatInputModule,
     MatButtonModule,
     MatCheckboxModule,
-    GioIconsModule,
-    GioLoaderModule,
     MatOptionModule,
     MatCardModule,
     CdkScrollable,
@@ -40,6 +52,9 @@ export interface SelectOption {
   styleUrl: './dropdown-search-overlay.component.scss',
 })
 export class DropdownSearchOverlayComponent implements OnInit, AfterViewInit {
+  @ViewChild('searchInput', { static: false }) searchInput!: ElementRef<HTMLInputElement>;
+  @ViewChild(CdkScrollable) scrollable: CdkScrollable | undefined;
+
   // Input from gio-select-search component
   options = signal<SelectOption[]>([]);
   selectedValues: string[] = [];
@@ -49,9 +64,6 @@ export class DropdownSearchOverlayComponent implements OnInit, AfterViewInit {
 
   searchControl = new FormControl('');
 
-  @ViewChild('searchInput', { static: false }) searchInput!: ElementRef<HTMLInputElement>;
-  @ViewChild(CdkScrollable) scrollable: CdkScrollable | undefined;
-
   // Output to gio-select-search component
   selectionChange = new Subject<string>();
   clearSelectionChange = new Subject<void>();

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/filter/dropdown-search/dropdown-search.component.html

@@ -1,6 +1,6 @@
 <!--
 
-    Copyright (C) 2025 The Gravitee team (http://gravitee.io)
+    Copyright (C) 2015 The Gravitee team (http://gravitee.io)
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
@@ -15,18 +15,27 @@
     limitations under the License.
 
 -->
-<p>dropdown-search works!</p>
-<mat-chip-set aria-label="Dog selection">
-  <mat-chip>
-    <img matChipAvatar src="https://material.angular.dev/assets/img/examples/shiba1.jpg" alt="Photo of a Shiba Inu" />
-    Dog one
-  </mat-chip>
-  <mat-chip>
-    <img matChipAvatar src="https://material.angular.dev/assets/img/examples/shiba1.jpg" alt="Photo of a Shiba Inu" />
-    Dog two
-  </mat-chip>
-  <mat-chip>
-    <img matChipAvatar src="https://material.angular.dev/assets/img/examples/shiba1.jpg" alt="Photo of a Shiba Inu" />
-    Dog three
-  </mat-chip>
-</mat-chip-set>
+<div
+  #trigger
+  class="gio-select-search__trigger"
+  [class.disabled]="isDisabled"
+  [class.opened]="isOpen()"
+  (click)="toggleOverlay($event)"
+  tabindex="-1"
+  role="listbox"
+  [attr.aria-multiselectable]="multiple"
+  [attr.aria-expanded]="isOpen()"
+  [attr.aria-haspopup]="true"
+  [attr.aria-label]="label()">
+  <span class="gio-select-search__trigger__label">
+    {{ label() }}
+
+    @if (selectedCount() > 0) {
+      <span class="gio-select-search__trigger__count">
+        {{ selectedCount() }}
+      </span>
+    }
+  </span>
+
+  <mat-icon class="search" [class.opened-icon]="isOpen()"> expand_more </mat-icon>
+</div>

gravitee-apim-portal-webui-next/projects/gravitee-dashboard/src/lib/components/filter/dropdown-search/dropdown-search.component.scss

@@ -1,15 +1,76 @@
 /*
  * Copyright (C) 2025 The Gravitee team (http://gravitee.io)
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *         http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@use '@angular/material' as mat;
+
+:host {
+  display: block;
+}
+
+.gio-select-search {
+  &__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    border: 1px solid var(--mdc-outlined-text-field-outline-color);
+    border-radius: 4px;
+    cursor: pointer;
+    min-height: var(--mat-form-field-container-height);
+    transition: border-color 0.2s ease;
+
+    &:hover:not(.disabled) {
+      //border-color: mat.m2-get-color-from-palette(gio.$mat-smoke-palette, darker80);
+    }
+
+    &.disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    &__label {
+      flex: 1;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+
+    &__count {
+      //color: mat.m2-get-color-from-palette(gio.$mat-primary-palette, default-contrast);
+      //background-color: mat.m2-get-color-from-palette(gio.$mat-primary-palette, default);
+      border-radius: 50%;
+      height: 24px;
+      width: 24px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    &__arrow {
+      margin-left: 8px;
+      color: var(--mat-select-enabled-arrow-color);
+    }
+  }
+}
+.opened {
+  //border-color: mat.m2-get-color-from-palette(gio.$mat-smoke-palette, darker80);
+  border-width: 2px;
+  padding: 7px 11px;
+}
+
+.opened-icon {
+  //color: mat.m2-get-color-from-palette(gio.$mat-smoke-palette, darker80);
+}