@unipin/angular-applet 18.9.2 → 18.9.4

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

@@ -0,0 +1,114 @@
+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 { GridSnapshotComponent } from '../../../grids';
+import { ButtonGroupComponent } from '../../../buttons';
+
+@Component({
+  standalone: true,
+  selector: 'up-list-snapshot-container',
+  styleUrl: './list-snapshot-container.component.scss',
+  templateUrl: './list-snapshot-container.component.html',
+  host: {
+    class: 'd-flex flex-column h-100 w-100'
+  },
+  imports: [
+    FilterComponent,
+    ButtonGroupComponent,
+    GridSnapshotComponent
+  ]
+})
+export class ListSnapshotContainerComponent {
+
+  /**
+   * An Input variable that used to string for customizing header.
+   * @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-snapshot-container/list-snapshot-container.stories.ts

@@ -0,0 +1,212 @@
+import { of } from 'rxjs';
+import { formatDate } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { ActivatedRoute } from '@angular/router';
+import { ICellRendererParams } from '@ag-grid-community/core';
+import { importProvidersFrom } from '@angular/core';
+import { ListSnapshotContainerComponent } from './list-snapshot-container.component';
+import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+
+const meta: Meta<ListSnapshotContainerComponent> = {
+  title: 'Containers/List Snapshot Container',
+  tags: [ 'autodocs' ],
+  component: ListSnapshotContainerComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom([ IonicModule.forRoot() ]), 
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              paramMap: {
+                get(): string{ 
+                  return 'list-snapshot-container'; 
+                }
+              }
+            }
+          }
+        }
+      ]
+    }),
+    moduleMetadata({
+      imports: [ ListSnapshotContainerComponent ]
+    })
+  ],
+  argTypes: {
+    config: {
+      defaultValue: undefined,
+      description: 'Configuration object for the list snapshot 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 snapshot 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<ListSnapshotContainerComponent>;
+
+const 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@mail.com',
+              'principalType': 'EMAIL_USERNAME'
+            }
+          ]
+        }
+      }
+    ]
+  }
+];
+
+export const EnableCreate: Story = {
+  args: {
+    id: 'enable-create-list',
+    header: 'List Pagination Header',
+    config: {
+      baseUrl: '/main/',
+      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: '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 });
+        }
+      }
+    }
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <up-list-snapshot-container style="height: 500px !important; width: 768px !important;" id="id" [header]="header" [config]="config" />
+    `
+  }),
+}
+
+export const DisableCreate: Story = {
+  args: {
+    id: 'disable-create-list',
+    header: 'List Pagination Header',
+    config: {
+      baseUrl: '/main/',
+      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: '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 });
+        }
+      }
+    }
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <up-list-snapshot-container style="height: 500px !important; width: 768px !important;" id="id" [header]="header" [config]="config" />
+    `
+  }),
+}

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

@@ -0,0 +1,15 @@
+<ion-header class="ion-no-border">
+    <ion-toolbar>
+        <ion-buttons slot="start">
+            <ion-button [disabled]="disabled" (click)="close()">
+                <ion-icon slot="icon-only" name="close" />
+            </ion-button>
+        </ion-buttons>
+
+        <ion-title class="p-0 fs-5">{{ header }}</ion-title>
+    </ion-toolbar>
+</ion-header>
+
+<div class="p-4">
+    <ng-content />
+</div>

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

@@ -0,0 +1,2 @@
+ion-toolbar { color: #616161; }
+ion-header { border-bottom: 1px solid #e0e0e0; }

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

@@ -0,0 +1,88 @@
+import { ChangeDetectionStrategy, Component, HostListener, Input, OnInit } from '@angular/core';
+import { IonicModule, ModalController } from '@ionic/angular';
+
+/**
+ * `ModalContainerComponent` is a container to display a modal dialog
+ * this component provide the modal header.
+ * @example
+ * ```html
+ * <up-modal-container header="The title">
+ *  The content
+ * </up-modal-container>
+ * ```
+ */
+@Component({
+  standalone: true,
+  selector: 'up-modal-container',
+  styleUrl: './modal-container.component.scss',
+  templateUrl: './modal-container.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    IonicModule
+  ]
+})
+export class ModalContainerComponent implements OnInit {
+
+  /**
+   * An input public variable to set the modal header text visible on top left of the modal.
+   * Considered as modal title represent what is the modal for.
+   * @type {string}
+   * @default {null}
+   * @required
+   */
+  @Input({ required: true }) public header!: string;
+
+  /**
+   * An input public variable to set the disabled state of the modal's interactive elements.
+   * When set to true, buttons and other interactive elements within the modal will be disabled.
+   * This is useful for preventing user actions while the modal is in a specific state or when
+   * certain conditions are met (e.g., when 'suggestedLogin' is 'ChangePassword').
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public disabled: boolean = false;
+
+  /**
+   * A protected variable to set the key for window state purpose.
+   * @type {string}
+   * @default {null}
+   */
+  protected key!: string;
+
+  constructor(
+    protected readonly modalCtrl: ModalController
+  ) { }
+
+  /**
+   * Lifecycle hook to initialize the component.
+   * Set key use the header and replaicng the empty space with `-`.
+   * Push state to the window history.
+   */
+  public ngOnInit(): void{
+    this.key = this.header.replace(/ /g, '-');
+    history.pushState({ [this.key]: true }, '');
+  }
+
+  /**
+   * Lifecycle hook to handle componen destruction.
+   * Check if the state history exist then navigate to previous state.
+   */
+  public ngOnDestroy(): void{
+    if (history.state[this.key]) history.back();
+  }
+
+  /**
+   * This procedure is a listener for the 'popstate' event on the window.
+   * It is to handle browser navigation changes (e.g., back or forward button clicks).
+   * @param {PopStateEvent} ev - The PopStateEvent object containing information about the state change.
+   */
+  @HostListener('window:popstate', [ '$event' ])
+  public popState(ev: PopStateEvent): void{
+    if (!ev.state[this.key]) this.modalCtrl.dismiss();
+  }
+
+  /**
+   * A porcedure to dismiss the modal.
+   */
+  public close(): void{ this.modalCtrl.dismiss(); }
+}

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

@@ -0,0 +1,66 @@
+import { importProvidersFrom } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { moduleMetadata, type Meta, type StoryObj, applicationConfig } from '@storybook/angular';
+import { ModalContainerComponent } from './modal-container.component';
+
+const meta: Meta<ModalContainerComponent> = {
+  title: 'Containers/Modal Container',
+  tags: [ 'autodocs' ],
+  component: ModalContainerComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom([ IonicModule.forRoot() ])
+      ]
+    }),
+    moduleMetadata({
+      imports: [ ModalContainerComponent ]
+    })
+  ],
+  argTypes: {
+    header: {
+      defaultValue: undefined,
+      description: 'Header text for the modal container.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: true,
+        name: 'string'
+      }
+    },
+    close: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    ngOnDestroy: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    ngOnInit: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    popState: {
+      control: { disable: true },
+      table: { disable: true }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<ModalContainerComponent>;
+
+export const Default: Story = {
+  args: {
+    header: 'Modal Header'
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <up-modal-container [header]="header">
+        <p>Modal content goes here...</p>
+      </up-modal-container>
+    `
+  }),
+}

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

@@ -0,0 +1,112 @@
+<ion-icon name="search" class="fs-4 position-absolute" />
+
+<div class="d-flex align-items-center form-control ps-5 py-0 pe-0 gap-3">
+    @if (activeFilter.length > 0) {
+        <div class="d-flex flex-grow-1 flex-shrink-0 tag-container gap-2 text-nowrap overflow-auto">
+            @for (item of activeFilter; track item.key; let i = $index) {
+                <div class="tag-item p-1 rounded d-flex align-items-center user-select-none">
+                    <ion-icon name="close" class="pe-1 me-1 cursor-pointer text-primary" (click)="removeFilter(i);" />
+                    {{ item.label }}
+                </div>
+            }
+        </div>
+    }
+
+    <input #searchBox type="search" placeholder="{{ placeholder }}" class="flex-shrink-1 border-0 form-control ps-0 py-2" [class.adv]="config.mode === 'advanced'" (keyup.enter)="add();" />
+</div>
+
+@if (config.mode === 'advanced') {
+    <ion-icon name="filter" class="position-absolute fs-4 cursor-pointer" id="filter-{{ id }}" />
+    <ion-icon name="close" class="position-absolute fs-4 cursor-pointer" (click)="clear();" />
+    
+    <ion-popover trigger="filter-{{ id }}" triggerAction="click">
+        <ng-template>
+            <div class="d-flex flex-column filter overflow-auto">
+                <div class="flex-shrink-0 border-bottom p-1 pe-4 d-flex align-items-center">
+                    <ion-buttons>
+                        <ion-button size="small" (click)="close()">
+                            <ion-icon slot="icon-only" name="close" />
+                        </ion-button>
+                    </ion-buttons>
+        
+                    <div class="fs-5 fw-medium">Advanced Filter</div>
+                </div>
+        
+                <form class="flex-grow-1 overflow-auto px-4" [formGroup]="form">
+                    @for (c of config.fields; track c.key) {
+                        @switch (c.type) {
+                            @case ('number') {
+                                <up-input type="number" autocomplete="off" class="my-4" label="{{ c.label }}" formControlName="{{ c.key }}" /> 
+                            }
+
+                            @case ('checkbox') {
+                                <div class="my-4">
+                                    <ion-checkbox labelPlacement="end" formControlName="{{ c.key }}">{{ c.label }}</ion-checkbox>
+                                </div>
+                            }
+
+                            @case ('date-range') {
+                                <div class="d-flex gap-3 my-4">
+                                    <up-date 
+                                        class="flex-grow-1"
+                                        label="{{ c.label[0] }}" 
+                                        name="{{ c.key[0] }}-filter-from" 
+                                        formControlName="{{ c.key[0] }}" 
+                                    />
+
+                                    <up-date 
+                                        class="flex-grow-1"
+                                        label="{{ c.label[1] }}" 
+                                        name="{{ c.key[1] }}-filter-to" 
+                                        formControlName="{{ c.key[1] }}" 
+                                    />
+                                </div>
+                            }
+
+                            @case ('select') { 
+                                <up-select 
+                                    class="my-4"
+                                    appendTo="body" 
+                                    label="{{ c.label }}" 
+                                    formControlName="{{ c.key }}" 
+                                    [searchable]="true"
+                                    [items]="c.options!"
+                                    [multiple]="c.multiple || false"
+                                /> 
+                            }
+
+                            @case ('searchable-select') { 
+                                <up-searchable-select 
+                                    class="my-4" 
+                                    appendTo="body" 
+                                    label="{{ c.label }}" 
+                                    formControlName="{{ c.key }}" 
+                                    [queryFunc]="c.getOptions!" 
+                                    [initialItems]="c.options! || initialItems.get(c.key.toString())!"
+                                    [multiple]="c.multiple || false"
+                                    (onChange)="applyInitialItems($event, c.key.toString())"
+                                /> 
+                            }
+
+                            @case ('number-range') {
+                                <div class="d-flex gap-3 my-4">
+                                    <up-input type="number"  autocomplete="off" class="flex-grow-1" label="{{ c.label[0] }}" formControlName="{{ c.key[0] }}" [min]="c.min" [max]="c.max"/>
+                                    <up-input type="number" autocomplete="off" class="flex-grow-1" label="{{ c.label[1] }}" formControlName="{{ c.key[1] }}" [min]="c.min" [max]="c.max"/>
+                                </div>
+                            }
+                            
+                            @default { 
+                                <up-input type="text" autocomplete="off" class="my-4" label="{{ c.label }}" formControlName="{{ c.key }}" /> 
+                            }
+                        }
+                    }
+                </form>
+        
+                <div class="flex-shrink-0 py-3 px-4 border-top d-flex gap-3">
+                    <ion-button class="flex-grow-1" color="secondary" (click)="form.reset();">Reset</ion-button>
+                    <ion-button class="flex-grow-1" color="primary" (click)="search();">Search</ion-button>
+                </div>
+            </div>
+        </ng-template>
+     </ion-popover>    
+}

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

@@ -0,0 +1,28 @@
+ion-icon { top: 7px; }
+ion-icon[name="close"] { right: 16px; }
+ion-icon[name="search"] { left: 14px; }
+ion-icon[name="filter"] { right: 48px; }
+ion-popover { 
+    --width: 80%;
+    --max-width: 450px; 
+}
+.adv { padding-right: 60px; }
+.fs-5, ion-icon { color: #616161; }
+.tag-container {
+    max-width: 45%;
+    @media (max-width: 576px) { max-width: 35%; }
+    &::-webkit-scrollbar {
+        height: 0px;
+    }
+}
+.tag-item {
+    color: #ed6b26;
+    background-color: #fef3ee;
+    ion-icon { border-right: 1px solid #fbd1be; }
+}
+input::-webkit-search-decoration,
+input::-webkit-search-cancel-button,
+input::-webkit-search-results-button,
+input::-webkit-search-results-decoration {
+  -webkit-appearance:none;
+}