@unipin/angular-applet 18.9.4 → 18.9.6

package/projects/unipin-angular/src/lib/components/grids/grid-snapshot/grid-snapshot.component.ts

@@ -1,229 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { ColDef, IDatasource, IGetRowsParams, ModuleRegistry, GridReadyEvent, DragStoppedEvent, SelectionChangedEvent, GridApi, PaginationChangedEvent, RowClassParams, RowNode } from '@ag-grid-community/core';
-import { AgGridModule } from '@ag-grid-community/angular';
-import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
-import { GridConfig } from '../interfaces/grid-config.interface';
-import { GridService } from '../services/grid.service';
-
-@Component({
-  standalone: true,
-  selector: 'up-snapshot-grid',
-  styleUrl: './grid-snapshot.component.scss',
-  templateUrl: './grid-snapshot.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    AgGridModule
-  ]
-})
-export class GridSnapshotComponent implements OnInit, OnDestroy {
-
-  /**
-   * Input variable for specifying the unique identifier of the ag-Grid component.
-   * @type {`grid-${ string }`}
-   */
-  @Input() public id: `grid-${ string }` = 'grid-s';
-
-  /**
-   * Input variable for the configuration object defining the ag-Grid properties.
-   * @type {GridConfig}
-   * @required
-   */
-  @Input({ required: true }) public config!: GridConfig;
-
-  /**
-   * Input variable for specifying the row selection mode. It can be 'single' or 'multiple'.
-   * @type {('single' | 'multiple')}
-   */
-  @Input() public rowSelection: 'single' | 'multiple' = 'single';
-
-  /**
-   * Callback version of property `rowClass` to set class(es) for each row individually. 
-   * Function should return either a string (class name), array of strings (array of class names) or undefined for no class.
-   * @type { RowClassParams<TData = any, TContext = any> }
-   * @returns { string }
-   */ 
-  @Input() public getRowClass: ((params: RowClassParams<RowNode, any>) => string) | undefined;
-
-  /**
-   * Output event emitter triggered when a row in the ag-Grid is clicked.
-   * Emits the data associated with the clicked row.
-   * @type {EventEmitter<any>}
-   */
-  @Output() public readonly onRowClick: EventEmitter<any> = new EventEmitter();
-
-  /**
-   * Output event emitter triggered when the ag-Grid is ready.
-   * Emits a `GridReadyEvent` object.
-   * @type {EventEmitter<GridReadyEvent>}
-   */
-  @Output() public readonly onGridReady: EventEmitter<GridReadyEvent> = new EventEmitter();
-
-  /**
-   * Output event emitter triggered when the selection in the ag-Grid changes.
-   * Emits a `SelectionChangedEvent<any>` object.
-   * @type {EventEmitter<SelectionChangedEvent<any>>}
-   */
-  @Output() public readonly onSelectionChanged: EventEmitter<SelectionChangedEvent<any>> = new EventEmitter();
-
-  /**
-   * Default column definition for the ag-Grid.
-   * @type {ColDef}
-   */
-  public readonly defaultColDef: ColDef = { minWidth: 200, flex: 1, sortable: true, resizable: true, sortingOrder: [ 'asc', 'desc' ], cellStyle: { textAlign: 'left' }};
-
-  /**
-   * Protected variable to store sorting information.
-   * @type {{ orderBy: string, order: string }}
-   */
-  protected readonly sort: { orderBy: string, order: string } = { order: '', orderBy: '' };
-  
-  /**
-   * Protected variable to store the total count of records.
-   * @type {number | undefined}
-   */
-  protected count?: number;
-
-  /**
-   * Protected variable to store the ag-Grid API.
-   * @type {GridApi}
-   */
-  protected gridApi!: GridApi;
-
-  /**
-   * Protected variable to store the subscription to data retrieval.
-   * @type {Subscription | undefined}
-   */
-  protected subs?: Subscription;
-
-  /**
-   * Protected variable to store the cursor for paginating snapshot data.
-   * @type {string | null}
-   */
-  protected after?: string | null;
-
-  constructor(
-    protected readonly service: GridService
-  ) {
-    ModuleRegistry.register(InfiniteRowModelModule);
-  }
-
-  /**
-   * Lifecycle hook to initialize the component.
-   * Sets default values for rowPerPage and noRowText properties in the configuration.
-   */
-  public ngOnInit(): void{
-    if (!this.config.rowPerPage) this.config.rowPerPage = 50;
-
-    this.config.noRowText = `<span class="f20">${ this.config.noRowText?? 'Data not found' }</span>`;
-  }
-
-  /**
-   * Lifecycle hook to handle component destruction.
-   * Unsubscribes from data retrieval subscriptions.
-   */
-  public ngOnDestroy(): void{ this.subs?.unsubscribe(); }
-
-  /**
-   * Event handler for clicking a row in the ag-Grid.
-   * Emits the data associated with the clicked row.
-   * @param {any} data - Data associated with the clicked row.
-   */
-  public clickRow(data: any): void{ this.onRowClick.emit(data.node); }
-
-  /**
-   * Event handler for when column drag stops in the ag-Grid.
-   * Saves the column state to local storage.
-   * @param {DragStoppedEvent} param0 - DragStoppedEvent object containing API information.
-   */
-  public dragColumn({ api }: DragStoppedEvent): void{ localStorage.setItem(this.id, JSON.stringify(api.getColumnState())); }
-
-  /**
-   * Event handler for selection change in the ag-Grid.
-   * Emits a `SelectionChangedEvent<any>` object.
-   * @param {SelectionChangedEvent<any>} data - SelectionChangedEvent object.
-   */
-  public changeSelected(data: SelectionChangedEvent<any>): void{ this.onSelectionChanged.emit(data); }
-
-  /**
-   * Event handler for pagination change in the ag-Grid.
-   * Updates the rowPerPage property in the configuration based on the new page size.
-   * @param {PaginationChangedEvent} ev - PaginationChangedEvent object.
-   */
-  public changePagination(ev: PaginationChangedEvent): void{
-    if (ev.newPageSize) this.config.rowPerPage = this.gridApi.paginationGetPageSize();
-  }
-
-  /**
-   * Event handler for setting the datasource when the ag-Grid is ready.
-   * Emits the onGridReady event and sets the API in the GridService.
-   * Applies column state from local storage and resets the grid.
-   * @param {GridReadyEvent} ev - GridReadyEvent object.
-   */
-  public setDatasource(ev: GridReadyEvent): void{
-    this.gridApi = ev.api;
-    this.onGridReady.emit(ev);
-    this.service.setApi(this.id, this.gridApi);
-
-    const state = JSON.parse(localStorage.getItem(this.id) as any);
-    if (state) {
-      this.gridApi.applyColumnState({ state, applyOrder: true });
-      this.gridApi.setColumnsVisible(this.gridApi.getAllGridColumns(), true);
-    }
-
-    this.reset();
-  }
-
-  /**
-   * Resets the datasource for snapshot data.
-   * Retrieves rows asynchronously based on pagination and sorting.
-   * Updates the count of records and calls success or fail callbacks accordingly.
-   */
-  public reset(): void{
-    const datasource: IDatasource = {
-      getRows: ({ sortModel: [{ colId, sort }], successCallback, failCallback }: IGetRowsParams) => {
-        this.gridApi.showLoadingOverlay();
-
-        if (colId !== this.sort.orderBy || sort !== this.sort.order) {
-          this.sort.order = sort;
-          this.sort.orderBy = colId;
-
-          this.gridApi.paginationGoToFirstPage();
-        }
-
-        const page = this.gridApi.paginationGetCurrentPage();
-        if (page === 0) this.after = null;
-
-        this.subs = this.config.getDataSnapshot!(this.config.rowPerPage!, colId, sort, this.after).subscribe({
-          next: ({ data, totalRecord }) => {
-            this.gridApi.hideOverlay();
-
-            const { edges, pageInfo } = data;
-            if (edges.length > 0) this.after = pageInfo.endCursor;
-
-            if (page === 0) {
-              if (edges.length === 0){
-                this.gridApi.setGridOption('overlayNoRowsTemplate', this.config.noRowText);
-                this.gridApi.showNoRowsOverlay();
-              }
-              this.count = totalRecord;
-            }
-
-            if (!this.config.useTotalRecord && !pageInfo.hasNextPage) {
-              this.count = (page * this.config.rowPerPage!) + edges.length;
-            }
-            successCallback(edges, this.count);
-          },
-          error: ({ message }) => {
-            this.gridApi.setGridOption('overlayNoRowsTemplate', `<span class="f20">${ message }</span>`);
-
-            this.gridApi.hideOverlay();
-            this.gridApi.showNoRowsOverlay();
-            failCallback();
-          }
-        });
-      }
-    };
-    this.gridApi.setGridOption('datasource', datasource);
-  }
-}

package/projects/unipin-angular/src/lib/components/grids/grid-snapshot/grid-snapshot.stories.ts

@@ -1,173 +0,0 @@
-import { formatDate } from '@angular/common';
-import { of } from 'rxjs';
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { ICellRendererParams } from '@ag-grid-community/core';
-import { GridSnapshotComponent } from './grid-snapshot.component';
-
-const meta: Meta<GridSnapshotComponent> = {
-  title: 'Grids/Grid Snapshot',
-  tags: [ 'autodocs' ],
-  component: GridSnapshotComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [
-        GridSnapshotComponent
-      ]
-    })
-  ],
-  argTypes: {
-    config: {
-      defaultValue: undefined,
-      description: 'Configuration object for the grid, specifying the column definitions, pagination settings, and data retrieval function.',
-      control: {
-        type: 'object'
-      },
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: true,
-        name: 'string'
-      }
-    },
-    id: {
-      defaultValue: 'grid-s',
-      description: 'Unique identifier for the grid component.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        name: 'string'
-      }
-    },
-    rowSelection: {
-      defaultValue: 'single',
-      description: 'Type of row selection allowed in the grid.',
-      control: {
-        type: 'select'
-      },
-      options: [ 'single', 'multiple' ],
-      table: {
-        category: 'Input'
-      },
-      type: {
-        name: 'string'
-      }
-    },
-    getRowClass: {
-      type: 'function',
-      description: 'Callback version of property `rowClass` to set class(es) for each row individually',
-      control: { disable: true },
-      table: { disable: true }
-    },
-    changeSelected: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    clickRow: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    defaultColDef: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    dragColumn: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    ngOnDestroy: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    ngOnInit: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    onGridReady: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    onRowClick: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    onSelectionChanged: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    reset: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    setDatasource: {
-      control: { disable: true },
-      table: { disable: true }
-    }
-  }
-};
-
-export default meta;
-type Story = StoryObj<GridSnapshotComponent>;
-
-export const DisplayData: Story = {
-  args: {
-    config: {
-      useTotalRecord: false,
-      noRowText: 'Data not found',
-      colDefs: [
-        { headerName: 'Name', sortable: false, field: 'node.name' },
-        { headerName: 'Status', sortable: false, field: 'node.status', cellRenderer: ({ value }: ICellRendererParams)=> value? `<div class='badge bg-${ value === 'ACTIVE'? 'success' : 'warning'}'>${ value }</div>` : '' },
-        { headerName: 'Created Date', colId: 'createdDate', field: 'node.createdDate', valueFormatter: ({ value }) => value? formatDate(value, 'dd MMM yyyy HH:mm', 'en-US') : '' },
-        { headerName: 'Updated Date', colId: 'updatedDate', field: 'node.updatedDate', sort: 'desc', valueFormatter: ({ value }) => value? formatDate(value, 'dd MMM yyyy HH:mm', 'en-US') : '' }
-      ],
-      getDataSnapshot: (pageSize: number, sortBy: string, dir: 'asc' | 'desc', after: any) => {
-        const criteria = { sortBy: 'createdAt', sortDirection: 'desc', pageSize: 50, after: null };
-
-        criteria.sortBy = sortBy;
-        criteria.pageSize = pageSize;
-        criteria.sortDirection = dir;
-        criteria.after = after;
-
-        return of({
-          data: {
-            'pageInfo': {
-              'endCursor': 'MzcwYzYzMGItYTM5Mi00ZWU1LWJkMTktNDg3ZTRkMmJhZTRhXzIwMjMtMTEtMDhUMDQ6NTk6NDEuNjcwMTE4Wg==',
-              'hasNextPage': false
-            },
-            'edges': [
-              {
-                'node': {
-                  'name': 'John Doe',
-                  'status': 'ACTIVE',
-                  'createdDate': '2024-01-25T09:29:31.281245Z',
-                  'updatedDate': '2024-01-25T09:29:31.281250Z',
-                  'appLoginPrincipal': [
-                    {
-                      'principalId': 'john_doe@gmail.com',
-                      'principalType': 'EMAIL_USERNAME'
-                    }
-                  ]
-                }
-              }
-            ]
-          }
-
-        });
-      }
-    },
-    getRowClass : ({ node }: any) => {
-      if(!node) return '';
-  
-      if (node.rowIndex % 2 === 1) return 'bg-primary';
-      
-      return 'bg-secondary'
-    }
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <up-snapshot-grid style="height: 500px !important; width: 768px !important;" id="id" class="flex-grow-1" rowSelection="rowSelection" [config]="config" />
-    `
-  }),
-}

package/projects/unipin-angular/src/lib/components/grids/interfaces/grid-config.interface.ts

@@ -1,44 +0,0 @@
-import { Observable } from 'rxjs';
-import { ColDef, ColGroupDef } from '@ag-grid-community/core';
-
-export interface GridConfig {
-  /**
-   * Array of column definitions for the ag-Grid.
-   * @type {(ColDef | ColGroupDef)[]}
-   */
-  colDefs: (ColDef | ColGroupDef)[];
-
-  /**
-   * Function to retrieve data asynchronously for the ag-Grid.
-   * It returns an Observable of { data, totalRecord } object, where data is an array of records and
-   * totalRecord is an optional total count of records.
-   * @type {(page: number, pageSize: number, orderBy: string, order: 'asc' | 'desc') => Observable<{ data: any[], totalRecord?: number }>}
-   */
-  getData?: (page: number, pageSize: number, orderBy: string, order: 'asc' | 'desc') => Observable<{ data: any[], totalRecord?: number }>;
-
-  /**
-   * Function to retrieve a data snapshot asynchronously for the ag-Grid.
-   * It returns an Observable of { data, totalRecord } object, where data is a single record and
-   * totalRecord is an optional total count of records.
-   * @type {(pageSize: number, orderBy: string, order: 'asc' | 'desc', after?: any) => Observable<{ data: any, totalRecord?: number }>}
-   */
-  getDataSnapshot?: (pageSize: number, orderBy: string, order: 'asc' | 'desc', after?: any) => Observable<{ data: any, totalRecord?: number }>;
-
-   /**
-   * Text to display when no rows are available in the ag-Grid.
-   * @type {string}
-   */
-  noRowText?: string;
-
-  /**
-   * Flag indicating whether to use the total record count for pagination.
-   * @type {boolean}
-   */
-  useTotalRecord?: boolean;
-
-  /**
-   * Number of rows to display per page in the ag-Grid.
-   * @type {number}
-   */
-  rowPerPage?: number;
-}

package/projects/unipin-angular/src/lib/components/grids/services/grid.service.ts

@@ -1,23 +0,0 @@
-import { Injectable } from '@angular/core';
-import { GridApi } from '@ag-grid-community/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class GridService {
-
-  protected readonly apis: { [id: string]: GridApi } = {};
-
-  public getApi(id: string): GridApi{ return this.apis[id]; }
-
-  public setApi(id: string, api: GridApi): void{ this.apis[id] = api; }
-
-  public refreshGridCache(id: string, forceRefresh: boolean = false): void{
-    this.apis[id]?.refreshInfiniteCache();
-
-    if (forceRefresh) {
-      this.apis[id]?.paginationGoToFirstPage();
-      this.apis[id]?.purgeInfiniteCache();
-    }
-  }
-}

package/projects/unipin-angular/src/lib/components/infinite-scroll/directive/infinite-scroll.directive.ts

@@ -1,72 +0,0 @@
-import { AfterViewInit, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-
-@Directive({
-  standalone: true,
-  selector: '[upInfiniteScroll]',
-})
-export class InfiniteScrollDirective implements OnInit, AfterViewInit, OnDestroy {
-
-  /**
-   * Threshold at which to trigger the callback. A value of 0.0 means that the callback
-   * will be triggered as soon as a single pixel is visible. 1.0 means that the callback will only be triggered when the entire element is visible.
-   * @type {number}
-   */
-  @Input() public threshold: number = 0.5;
-
-  /**
-   * Margin around the root. This can be used to grow or shrink the area used to
-   * determine intersections. It follows the same syntax as the CSS margin property.
-   * Example values: '10px', '10px 20px', '10%', '10% 20% 30% 40%'.
-   * @type {string}
-   */
-  @Input() public rootMargin: string = '0px';
-
-  /**
-   * Event emitted when the observed element scrolls into view.
-   * This triggers the component to load more data.
-   * @type {EventEmitter<boolean>}
-   */
-  @Output() public readonly onScrollThreshold: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-  /**
-   * IntersectionObserver instance used to observe the element.
-   * @type {IntersectionObserver}
-   */
-  protected observer!: IntersectionObserver;
-
-  constructor(
-    protected readonly element: ElementRef
-  ) {}
-
-  /**
-   * Lifecycle hook that is called after Angular has initialized all data-bound properties.
-   * Initializes the IntersectionObserver with specific options.
-   */
-  public ngOnInit(): void{
-    const options = { 
-      root: null, 
-      rootMargin: this.rootMargin, 
-      threshold: Math.max(0, Math.min(1, this.threshold))
-    };
-    
-    this.observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
-      if (entries[0].isIntersecting) this.onScrollThreshold.emit(true);
-    }, options);
-  }
-
-  /**
-   * Lifecycle hook that is called after Angular has fully initialized the component's view.
-   * Starts observing the element.
-   */
-  public ngAfterViewInit(): void{
-    this.observer.observe(this.element.nativeElement);
-  }
-
-  /**
-   * Lifecycle hook that is called when the directive is being destroyed.
-   * Disconnects the IntersectionObserver to stop observing the element to prevent memory leaks.
-   */
-  public ngOnDestroy(): void{
-    this.observer.disconnect();
-  }
-}

package/projects/unipin-angular/src/lib/components/infinite-scroll/infinite-scroll.component.html

@@ -1,13 +0,0 @@
-<div 
-    class="scroll-container"    
-    [threshold]="threshold" 
-    [rootMargin]="rootMargin" 
-    (onScrollThreshold)="scroll()"
-    upInfiniteScroll 
->
-    <ion-spinner [name]="loadingIcon" />
-
-    @if (loadingText) {
-        <div class="loading-text">{{ loadingText }}</div>
-    }
-</div>

package/projects/unipin-angular/src/lib/components/infinite-scroll/infinite-scroll.component.scss

@@ -1,10 +0,0 @@
-.scroll-container {
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-}
-.loading-text {
-    padding-top: 8px;
-}

package/projects/unipin-angular/src/lib/components/infinite-scroll/infinite-scroll.component.ts

@@ -1,61 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
-import { InfiniteScrollDirective } from './directive/infinite-scroll.directive';
-
-@Component({
-  standalone: true,
-  selector: 'up-infinite-scroll',
-  styleUrl: './infinite-scroll.component.scss',
-  templateUrl: './infinite-scroll.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    IonicModule,
-    InfiniteScrollDirective
-  ]
-})
-export class InfiniteScrollComponent {
-  
-  /**
-   * Text to display when loading more items.
-   * @type {string}
-   */
-  @Input() public loadingText?: string;
-
-  /**
-   * Threshold at which to trigger the callback. A value of 0.0 means that the callback
-   * will be triggered as soon as a single pixel is visible. 1.0 means that the callback will only be triggered when the entire element is visible.
-   * @type {number}
-   */
-  @Input() public threshold: number = 0.5;
-
-  /**
-   * Margin around the root. This can be used to grow or shrink the area used to
-   * determine intersections. It follows the same syntax as the CSS margin property.
-   * Example values: '10px', '10px 20px', '10%', '10% 20% 30% 40%'.
-   * @type {string}
-   */
-  @Input() public rootMargin: string = '0px';
-
-  /**
-   * Icon to display while loading more items. 
-   * Can be one of 'bubbles', 'circles', 'circular', 'crescent', 'dots', 'lines', 'lines-sharp', 'lines-sharp-small', or 'lines-small'.
-   * @type {'bubbles' | 'circles' | 'circular' | 'crescent' | 'dots' | 'lines' | 'lines-sharp' | 'lines-sharp-small' | 'lines-small'}
-   * @default 'dots'
-   */
-  @Input() public loadingIcon: 'bubbles' | 'circles' | 'circular' | 'crescent' | 'dots' | 'lines' | 'lines-sharp' | 'lines-sharp-small' | 'lines-small' = 'dots';
-
-  /**
-   * Event emitted when the user has scrolled to the bottom of the list.
-   * Used for triggering the component to load more data.
-   * @type {EventEmitter<void>}
-   */
-  @Output() public onScrollThreshold: EventEmitter<void> = new EventEmitter<void>();
-
-  /**
-   * Method to emit the scrolled event, indicating that the user has reached the bottom of the list.
-   * This triggers the component to load more data.
-   */
-  public scroll(): void{
-    this.onScrollThreshold.emit();
-  }
-}