@unipin/angular-applet 18.9.3 → 18.9.5

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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,86 @@
+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/{lib/components/containers/index.d.ts → projects/unipin-angular/src/lib/components/containers/index.ts}

@@ -1,5 +1,6 @@
 export { AppletContainerComponent } from './applet-container/applet-container.component';
 export { provideAppletConfig, AppletConfig, APPLET_CONFIG } from './applet-container/provide-applet-config.util';
+
 export { ColumnContainerComponent } from './column-container/column-container.component';
 export { ColumnHeaderContainerComponent } from './colum-header-container/column-header-container.component';
 export { ModalContainerComponent } from './modal-container/modal-container.component';

package/{lib/components/containers/list-container/interfaces/list-container-config.interface.d.ts → projects/unipin-angular/src/lib/components/containers/list-container/interfaces/list-container-config.interface.ts}

@@ -1,9 +1,10 @@
 import { ButtonGroupConfig } from '../../../buttons';
 import { GridConfig } from '../../../grids/interfaces/grid-config.interface';
 import { FilterConfig } from '../../../filter/interfaces/filter-config.interface';
+
 export interface ListContainerConfig {
-    baseUrl: `${string}/`;
-    buttons?: ButtonGroupConfig[];
-    gridConfig: GridConfig;
-    filterConfig?: FilterConfig;
+  baseUrl: `${ string }/`;
+  buttons?: ButtonGroupConfig[];
+  gridConfig: GridConfig;
+  filterConfig?: FilterConfig;
 }

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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,207 @@
+
+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

@@ -0,0 +1,19 @@
+<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

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