@unipin/angular-applet 18.9.5 → 18.9.6

package/projects/unipin-angular/src/lib/components/containers/column-container/column-container.component.ts

@@ -1,139 +0,0 @@
-import { Component, HostListener, OnDestroy } from '@angular/core';
-import { NavigationEnd, Router, ActivatedRoute, Route } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { AngularSplitModule } from 'angular-split';
-import { LazyRouteDirective } from './directives/lazy-route.directive';
-
-/**
- * The `ColumnContainerComponent` is a component representing a container with dynamic columns that
- * are loaded based on route navigation.
- * * It uses lazy loading with the `LazyRouteDirective` to load components dynamically.
- * @example
- * ```html
- * <up-column-container></up-column-container>
- * ```
- */
-@Component({
-  standalone: true,
-  selector: 'up-column-container',
-  styleUrl: './column-container.component.scss',
-  templateUrl: './column-container.component.html',
-  host: {
-    class: 'd-block h-100 w-100'
-  },
-  imports: [
-    AngularSplitModule,
-    LazyRouteDirective
-  ]
-})
-export class ColumnContainerComponent implements OnDestroy {
-
-  /**
-   * An array of objects representing the columns, each containing a visibility flag and the associated route.
-   * @type {{ visible: boolean, route: Route }[]}
-   * @default {[]}
-   */
-  public readonly areas: { visible: boolean, route: Route }[] = [];
-
-  /**
-   * The default size for the split area: 100 means it will be full width, and 50 means it will be divided in half.
-   */
-  public colSize: number = 50;
-
-  /**
-   * An object to keep track of the position of opened areas based on their route paths.
-   * @type {{ [key: string]: number }}
-   * @default {{}}
-   */
-  protected readonly openedArea: { [key: string]: number } = {};
-
-  /**
-   * Subscription to router events for dynamic navigation handling.
-   */
-  protected sub!: Subscription;
-
-  constructor(
-    protected readonly router: Router,
-    protected readonly activeRoute: ActivatedRoute
-  ) { }
-
-  /**
-   * Lifecycle hook called after the component has been initialized.
-   * Subscribes to router events, initializes columns based on the initial route, and sets up the first visible column.
-   */
-  public ngOnInit(): void{
-    this.checkScreen();
-
-    this.sub = this.router.events.subscribe((e) => {
-      if (e instanceof NavigationEnd) this.navigate();
-    });
-
-    const url: string | undefined = this.activeRoute.firstChild?.routeConfig?.path;
-    const routeList: Route[] = ((this.activeRoute.snapshot.routeConfig) as any)._loadedRoutes;
-
-    this.next(routeList[0]);
-
-    for (let i = 1; i < routeList.length; i++) {
-      if (url?.startsWith(<string> routeList[i].path)) this.next(routeList[i]);
-    }
-  }
-
-  /**
-   * Lifecycle hook called when the component is about to be destroyed.
-   * Unsubscribes from the router events to prevent memory leaks.
-   */
-  public ngOnDestroy(): void{ this.sub.unsubscribe(); }
-
-  /**
-   * Handles router navigation events and adjusts the display of columns accordingly.
-   */
-  protected navigate(): void{
-    const route: Route = this.activeRoute.firstChild!.routeConfig!;
-    
-    if (this.openedArea[`r-${ route.path }`] <= this.areas.length) this.previous(this.openedArea[`r-${ route.path }`]);
-    else this.next(route); 
-  }
-
-  /**
-   * Adds a new column to the container and updates visibility based on the route navigation.
-   * @param {Route} route - Contain next route.
-   */
-  protected next(route: Route): void{
-    if (this.colSize === 100 && this.areas.length >= 1) {
-      this.areas[this.areas.length - 1].visible = false;
-    } else if (this.areas.length >= 2) {
-      this.areas[this.areas.length - 2].visible = false;
-    }
-
-    this.areas.push({ visible: true, route });
-    this.openedArea[`r-${ route.path }`] = this.areas.length;
-  }
-
-  /**
-   * Removes columns from the container based on the route navigation.
-   * @param {number} pos - Contain position of the last active area index.
-   */
-  protected previous(pos: number): void{
-    this.areas.splice(pos);
-
-    if (this.colSize === 100) {
-      this.areas[this.areas.length - 1].visible = true;
-      return;
-    }
-   
-    if (this.areas.length === 1) this.areas[0].visible = true;
-    else {
-      this.areas[pos - 1].visible = true;
-      this.areas[pos - 2].visible = true;
-    }
-  }
-
-  /**
-   * Event listener for the window resize event. Adjusts the default size of the split area based on the screen width.
-   * @param {Event} event - The resize event.
-   */
-  @HostListener('window:resize', ['$event'])
-  protected checkScreen(): void{
-    this.colSize = window.innerWidth <= 768? 100 : 50;
-  }
-}

package/projects/unipin-angular/src/lib/components/containers/column-container/directives/lazy-route.directive.ts

@@ -1,86 +0,0 @@
-import { ComponentRef, Directive, Input, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { distinctUntilChanged, filter, Subscription } from 'rxjs';
-
-/**
- * The `LazyRouteDirective` is a directive that enables lazy loading of components based on a specified route.
- * Use this directive on an HTML element with the `[loadRoute]` attribute to dynamically load a component when the route is activated.
- * @example
- * ```html
- * <div [loadRoute]="routeConfig"></div>
- * ```
- */
-@Directive({
-  standalone: true,
-  selector: '[loadRoute]'
-})
-export class LazyRouteDirective implements OnInit, OnDestroy {
-  
-  /**
-   * An input public variable as configuration object containing the `loadComponent` method.
-   * @type {any}
-   */
-  @Input({ required: true }) public loadRoute: any;
-  protected sub?: Subscription;
-
-  constructor(
-    protected readonly router: Router,
-    protected readonly vcr: ViewContainerRef,
-    protected readonly route: ActivatedRoute,
-  ){}
-  
-  /**
-   * Lifecycle hook that is called after the directive's data-bound properties have been initialized.
-   * Dynamically loads the component using the `loadComponent` method and creates it within the directive's view container.
-   */
-  public ngOnInit(): void{
-    this.loadRoute.loadComponent().then((m: any) => {
-      const cr = this.vcr.createComponent(m);
-      this.setInput(cr);
-
-      this.sub?.unsubscribe();
-      this.sub = this.router.events.pipe(
-        filter((e) => e instanceof NavigationEnd),
-        distinctUntilChanged((prev, curr) => {
-          const prevUrl = prev.urlAfterRedirects.split('#')[0];
-          const currUrl = curr.urlAfterRedirects.split('#')[0];
-          
-          return prevUrl === currUrl;
-        })
-      ).subscribe({
-        next: () => {
-          this.setInput(cr);
-        }
-      });
-    });
-  }
-
-  /**
-   * Lifecycle hook that is called after the directive is destroyed.
-   */
-  public ngOnDestroy(): void{
-    this.sub?.unsubscribe();
-  }
-
-  /**
-   * Method to manually set Input to the child component, because component created by ViewContainerRef won't accept the input from route param directly.
-   * @param { ComponentRef<any> } cr
-   */
-  protected setInput(cr: ComponentRef<any>): void{
-    const params = this.route.firstChild?.snapshot.params;
-
-    if (
-      Object.keys(params!).length === 0 && 
-      params!.constructor === Object
-    ) {
-      this.sub?.unsubscribe();
-      return;
-    }
-
-    Object.keys(params!).forEach((key) => {
-      if (key in (cr.instance)) {
-        cr.setInput(key, params![key]);
-      }
-    });
-  }
-}

package/projects/unipin-angular/src/lib/components/containers/list-container/list-pagination-container/list-pagination-container.component.html

@@ -1,19 +0,0 @@
-<div class="d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap flex-md-nowrap">
-    <div class="flex-grow-1 d-flex align-items-center gap-2">
-        <h3 class="m-0 text-truncate">{{ header }}</h3>
-
-        @if (config.buttons && config.buttons.length > 0) {
-            <up-btn-group class="flex-shrink-0" id="btn-list-snapshot-container" [config]="config.buttons" />
-        }
-    </div>
-
-    @if (config.filterConfig) {
-        <div class="flex-shrink-0 flex-grow-1 flex-lg-grow-0">
-            <up-filter placeholder="Type to search" id="filter-{{ id }}" [config]="config.filterConfig" (onSearch)="search($event)" />
-        </div>
-    }
-</div>
-
-<div class="flex-grow-1 px-1 pb-1">
-    <up-pagination-grid [config]="config.gridConfig" [id]="gridId" (onGridReady)="setGridApi($event)" (onRowClick)="openDetail($event)" />
-</div>

package/projects/unipin-angular/src/lib/components/containers/list-container/list-pagination-container/list-pagination-container.component.scss

@@ -1,7 +0,0 @@
-div:has(>up-filter) {
-    flex-basis: 50%;
-    @media (max-width: 576px) { flex-basis: 100%; }
-}
-.flex-grow-1 {
-    min-width: 0;
-}

package/projects/unipin-angular/src/lib/components/containers/list-container/list-pagination-container/list-pagination-container.component.ts

@@ -1,113 +0,0 @@
-import { Component, Attribute, Output, EventEmitter, Input } from '@angular/core';
-import { Router } from '@angular/router';;
-import { GridApi, GridReadyEvent } from '@ag-grid-community/core';
-import { ListContainerConfig } from '../interfaces/list-container-config.interface';
-import { FilterSearchEvent } from '../../../filter/interfaces/filter-search-event.interface';
-import { FilterComponent } from '../../../filter';
-import { ButtonGroupComponent } from '../../../buttons';
-import { GridPaginationComponent } from '../../../grids';
-
-@Component({
-  standalone: true,
-  selector: 'up-list-pagination-container',
-  styleUrl: './list-pagination-container.component.scss',
-  templateUrl: './list-pagination-container.component.html',
-  host: {
-    class: 'd-flex flex-column h-100 w-100'
-  },
-  imports: [
-    FilterComponent,
-    ButtonGroupComponent,
-    GridPaginationComponent
-  ]
-})
-export class ListPaginationContainerComponent {
-
-  /**
-   * An Input variable that used to string for customizing header text.
-   * @type {string}
-   */ 
-  @Input({ required: true }) public header!: string;
-  /**
-   * An input variable that used to configuration object for customizing list container config properties. This
-   * object defined by ListContainerConfig interface allows specifying baseUrl, gridConfig, filterConfig and permission.
-   * @type {ListContainerConfig}
-   */
-  @Input({ required: true }) public config!: ListContainerConfig;
-  /**
-   * The `onRowClick` EventEmitter is used to notify parent components or listeners
-   * when a row is clicked within the current component. It emits an event containing
-   * information related to the clicked row.
-   * @type {EventEmitter<any>}
-   */
-  @Output() public readonly onRowClick: EventEmitter<any> = new EventEmitter();
-  /**
-   * The `onGridReady` EventEmitter is used to inform parent components or listeners
-   * when the grid within the current component is ready for interaction. It emits an
-   * event of type `GridReadyEvent`, which may contain information about the grid's
-   * readiness and capabilities.     
-   * @type {EventEmitter<GridReadyEvent>} 
-   */
-  @Output() public readonly onGridReady: EventEmitter<GridReadyEvent> = new EventEmitter();
-  /**
-   * The `onSearch` EventEmitter is used to inform parent components or listeners
-   * when a search event is triggered within the current component. It emits an
-   * event of type `FilterSearchEvent`, which may contain information about the
-   * search query and additional details related to the search operation.
-   * @type {EventEmitter<FilterSearchEvent>}
-   */
-  @Output() public readonly onSearch: EventEmitter<FilterSearchEvent> = new EventEmitter();
-  /**
-   * The `gridId` property is a unique identifier for a grid element. It is
-   * automatically generated based on the component's `id` property. If the `id`
-   * property is not set, a default value of 'p' is used.
-   * @type {string}
-   */
-  public gridId: `grid-${ string }` = `grid-${ this.id?? 'p' }`;
-  protected gridApi!: GridApi;
-
-  constructor(
-    @Attribute('id') public id: string,
-    protected readonly router: Router
-  ) { }
-  
-  /**
-   * The `openDetail` method is used to trigger actions when a user requests to open
-   * the detail view for a specific data item. It emits a `data` event using the
-   * `onRowClick` EventEmitter, providing external components or listeners with
-   * information about the clicked data. Additionally, it navigates to the detail
-   * route associated with the data item using the Angular Router.
-   * 
-   * @param data - The data item for which the detail view is to be opened.
-   */
-  public openDetail(data: any): void{ 
-    this.onRowClick.emit(data);
-    this.router.navigate([ `${ this.config.baseUrl }${ data.guid }` ], { preserveFragment: true });
-  }
-
-  /**
-   * The `setGridApi` method is used to set the grid API when the grid is ready, typically
-   * after the `gridReady` event is fired. It assigns the grid API to the component's
-   * `gridApi` property and emits the `onGridReady` event, providing external components
-   * or listeners with information about the grid's readiness.
-   * 
-   * @param {GridReadyEvent} ev - The `GridReadyEvent` containing information about the grid's readiness.
-   */
-  public setGridApi(ev: GridReadyEvent): void{ 
-    this.gridApi = ev.api; 
-    this.onGridReady.emit(ev);
-  }
-  /**
-   * The `search` method is used to trigger a search operation based on the provided
-   * `FilterSearchEvent`. It emits the `onSearch` event, providing external components
-   * or listeners with information about the search query. Additionally, it purges
-   * the grid cache using the `purgeInfiniteCache` method of the grid API.
-   * @param {FilterSearchEvent} k - The `FilterSearchEvent` containing information about the search operation.
-   */
-  public search(k: FilterSearchEvent): void{
-    this.onSearch.emit(k);
-    
-    this.gridApi?.paginationGoToFirstPage();
-    this.gridApi?.purgeInfiniteCache();
-  }
-}

package/projects/unipin-angular/src/lib/components/containers/list-container/list-pagination-container/list-pagination-container.stories.ts

@@ -1,207 +0,0 @@
-
-import { of } from 'rxjs';
-import { formatDate } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
-import { ActivatedRoute } from '@angular/router';
-import { importProvidersFrom } from '@angular/core';
-import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { ListPaginationContainerComponent } from './list-pagination-container.component';
-
-const meta: Meta<ListPaginationContainerComponent> = {
-  title: 'Containers/List Pagination Container',
-  tags: [ 'autodocs' ],
-  component: ListPaginationContainerComponent,
-  decorators: [
-    applicationConfig({
-      providers: [
-        importProvidersFrom([ IonicModule.forRoot() ]), 
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            snapshot: {
-              paramMap: {
-                get(): string{ 
-                  return 'list-pagination-container'; 
-                }
-              }
-            }
-          }
-        }
-      ]
-    }),
-    moduleMetadata({
-      imports: [ ListPaginationContainerComponent ]
-    })
-  ],
-  argTypes: {
-    config: {
-      defaultValue: undefined,
-      description: 'Configuration object for the list pagination container. It includes properties such as `baseUrl`, `permissions`, `filterConfig`, and `gridConfig`.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        name: 'string'
-      }
-    },
-    header: {
-      defaultValue: undefined,
-      description: 'Header text for the list pagination container.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: true,
-        name: 'string'
-      }
-    },
-    id: {
-      defaultValue: undefined,
-      description: 'Unique identifier for the component. Used as the `id` attribute in the HTML and will be used as the `id` for the associated filter & grid component.',
-      table: {
-        category: 'Input',
-        subcategory: 'Attribute'
-      },
-      type: {
-        name: 'string'
-      },
-    },
-    gridId: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    onGridReady: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    onRowClick: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    onSearch: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    openDetail: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    search: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    setGridApi: {
-      control: { disable: true },
-      table: { disable: true }
-    }
-  }
-};
-
-export default meta;
-type Story = StoryObj<ListPaginationContainerComponent>;
-
-const data = [
-  {
-    createdAt: new Date('2024-01-25T04:50:18.393Z'),
-    description: 'auth.error.password_not_match',
-    user: {
-      name: 'John Doe',
-      appLoginPrincipal: [
-        {
-          principalType: 'EMAIL_USERNAME',
-          principalId: 'john.doe@mail.com'
-        }
-      ]
-    }
-  }
-];
-
-export const EnableCreate: Story = {
-  args: {
-    id: 'enable-create-list',
-    header: 'List Pagination Header',
-    config: {
-      baseUrl: '/main/',
-      buttons: [
-        { disabled: true, onClick: () => alert('Button'), label: 'Create' }
-      ],
-      filterConfig: {
-        mode: 'advanced',
-        fields: [
-          { type: 'text', key: 'name', label: 'Name' },
-          { type: 'text', key: 'code', label: 'Code' }
-        ]
-      },
-      gridConfig: {
-        useTotalRecord: false,
-        noRowText: 'Data not found',
-        colDefs: [
-          { headerName: 'User', field: 'user.name', sortable: false },
-          { headerName: 'Description', field: 'description', minWidth: 350, sortable: false },
-          { headerName: 'Created Date', field: 'createdAt', sort: 'desc', valueFormatter: ({ value }) => value? formatDate(value, 'dd MMM yyyy HH:mm', 'en-US') : '' }
-        ],
-        getData: (page: number, pageSize: number, sortBy: string, dir: 'asc' | 'desc') => {
-          const criteria = { sortBy: 'createdAt', sortDirection: 'desc', page: 0, pageSize: 50 };
-
-          criteria.page = page;
-          criteria.sortBy = sortBy;
-          criteria.pageSize = pageSize;
-          criteria.sortDirection = dir;
-
-          return of({ data, totalRecord: 1 });
-        }
-      }
-    }
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <up-list-pagination-container style="height: 500px !important; width: 100vw !important;" id="id" [header]="header" [config]="config" />
-    `
-  }),
-}
-
-export const DisableCreate: Story = {
-  args: {
-    id: 'disable-create-list',
-    header: 'List Pagination Header',
-    config: {
-      baseUrl: '/main/',
-      buttons: [
-        { disabled: true, onClick: () => alert('Button'), label: 'Create' }
-      ],
-      filterConfig: {
-        mode: 'advanced',
-        fields: [
-          { type: 'text', key: 'name', label: 'Name' },
-          { type: 'text', key: 'code', label: 'Code' }
-        ]
-      },
-      gridConfig: {
-        useTotalRecord: false,
-        noRowText: 'Data not found',
-        colDefs: [
-          { headerName: 'User', field: 'user.name', sortable: false },
-          { headerName: 'Description', field: 'description', minWidth: 350, sortable: false },
-          { headerName: 'Created Date', field: 'createdAt', sort: 'desc', valueFormatter: ({ value }) => value? formatDate(value, 'dd MMM yyyy HH:mm', 'en-US') : '' }
-        ],
-        getData: (page: number, pageSize: number, sortBy: string, dir: 'asc' | 'desc') => {
-          const criteria = { sortBy: 'createdAt', sortDirection: 'desc', page: 0, pageSize: 50 };
-
-          criteria.page = page;
-          criteria.sortBy = sortBy;
-          criteria.pageSize = pageSize;
-          criteria.sortDirection = dir;
-
-          return of({ data, totalRecord: 1 });
-        }
-      }
-    }
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <up-list-pagination-container style="height: 500px !important; width: 100vw !important;" id="id" [header]="header" [config]="config" />
-    `
-  }),
-}

package/projects/unipin-angular/src/lib/components/containers/list-container/list-snapshot-container/list-snapshot-container.component.html

@@ -1,19 +0,0 @@
-<div class="d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap flex-md-nowrap">
-    <div class="flex-grow-1 d-flex align-items-center gap-2">
-        <h3 class="m-0 text-truncate">{{ header }}</h3>
-
-        @if (config.buttons && config.buttons.length > 0) {
-            <up-btn-group class="flex-shrink-0" id="btn-list-snapshot-container" [config]="config.buttons" />
-        }
-    </div>
-
-    @if (config.filterConfig) {
-        <div class="flex-shrink-0 flex-grow-1 flex-lg-grow-0">
-            <up-filter placeholder="Type to search" id="filter-{{ id }}" [config]="config.filterConfig" (onSearch)="search($event)" />
-        </div>
-    }
-</div>
-
-<div class="flex-grow-1 px-1 pb-1">
-    <up-snapshot-grid [config]="config.gridConfig" [id]="gridId" (onGridReady)="setGridApi($event)" (onRowClick)="openDetail($event)" />
-</div>

package/projects/unipin-angular/src/lib/components/containers/list-container/list-snapshot-container/list-snapshot-container.component.scss

@@ -1,7 +0,0 @@
-div:has(>up-filter) {
-    flex-basis: 50%;
-    @media (max-width: 576px) { flex-basis: 100%; }
-}
-.flex-grow-1 {
-    min-width: 0;
-}