@unipin/angular-applet 18.9.4 → 18.9.6

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

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

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

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

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

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

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

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

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