@unipin/angular-applet 18.9.4 → 18.9.6

package/projects/unipin-angular/src/lib/components/audit/list/audit-list.stories.ts

@@ -1,170 +0,0 @@
-import { importProvidersFrom } from '@angular/core';
-import { formatDate } from '@angular/common';
-import { ApolloModule } from 'apollo-angular';
-import { of } from 'rxjs';
-import { type Meta, StoryObj, applicationConfig } from '@storybook/angular';
-import { AuditTrailCriteria } from 'projects/unipin-angular/src/graphql/generated';
-import { AuditListComponent } from './audit-list.component';
-
-const meta: Meta<AuditListComponent> = {
-  title: 'Audit/Audit List',
-  tags: [ 'autodocs' ],
-  component: AuditListComponent,
-  decorators: [
-    applicationConfig({
-      providers: [ 
-        importProvidersFrom([ ApolloModule ]) 
-      ]
-    })
-  ],
-  argTypes: {
-    id: {
-      defaultValue: undefined,
-      Description: 'Unique identifier for the component, used as the `id` attribute for the pagination grid component in the HTML.',
-      table: {
-        category: 'Input',
-        subcategory: 'Attribute'
-      },
-      type: {
-        name: 'string'
-      },
-    },
-    relatedEntities: {
-      defaultValue: undefined,
-      description: 'An array of related entities for filtering the audit trail data.',
-      table: {
-        category: 'Input'
-      },
-      control: {
-        type: 'object'
-      }
-    },
-    tagKeys: {
-      defaultValue: undefined,
-      description: 'An array of tag keys for filtering the audit trail data.',
-      table: {
-        category: 'Input'
-      },
-      control: {
-        type: 'object'
-      }
-    },
-    filterConfig: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    gridConfig: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    ngOnChanges: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    setGridApi: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    setGuid: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    rowClicked: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    search: {
-      control: { disable: true },
-      table: { disable: true }
-    }
-  }
-};
-
-const template = `
-  <up-audit-list style="height: 500px !important; width: 768px !important;"
-      id="id"
-      mainUrl="mainUrl"
-      [relatedEntities]="relatedEntities"
-      [tagKeys]="tagKeys"
-  />
-`;
-
-export default meta;
-type Story = StoryObj<AuditListComponent>;
-
-export const DisplayData: Story = {
-  args: {
-    id: 'audit-list',
-    relatedEntities: [ 'User', 'AppLoginSubject' ],
-    gridConfig: {
-      useTotalRecord: true,
-      noRowText: 'Audit 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: AuditTrailCriteria = { sortBy: 'createdAt', sortDirection: 'desc', page: 0, pageSize: 50 };
-        
-        criteria.page = page;
-        criteria.sortBy = sortBy;
-        criteria.pageSize = pageSize;
-        criteria.sortDirection = dir;
-
-        return of({
-          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'
-                  }
-                ]
-              }
-            }
-          ], 
-          totalRecord: 1
-        });
-      },
-    },
-  },
-  render: (args) => ({
-    props: args,
-    template
-  })
-};
-
-export const NoData: Story = {
-  args: {
-    id: 'audit-list',
-    relatedEntities: [ 'User', 'AppLoginSubject' ],
-    gridConfig: {
-      useTotalRecord: true,
-      noRowText: 'Audit 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: AuditTrailCriteria = { sortBy: 'createdAt', sortDirection: 'desc', page: 0, pageSize: 50 };
-        
-        criteria.page = page;
-        criteria.sortBy = sortBy;
-        criteria.pageSize = pageSize;
-        criteria.sortDirection = dir;
-
-        return of({ data: [], totalRecord: 0 });
-      },
-    },
-  },
-  render: (args) => ({
-    props: args,
-    template
-  })
-};

package/projects/unipin-angular/src/lib/components/audit/service/audit.service.ts

@@ -1,48 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { ApolloQueryResult } from '@apollo/client/core';
-import { Apollo, gql } from 'apollo-angular';
-import { AuditTrail, AuditTrailCriteria } from './../../../../graphql/generated';
-
-@Injectable({ 
-  providedIn: 'root' 
-})
-export class AuditService {
-
-  protected readonly baseAttr: string = `
-    action
-    createdAt
-    description
-    function
-    guid
-    msSource
-    sourceIp
-    user {
-      name
-      sourcePlatform
-      status
-      appLoginPrincipal {
-        principalType
-        principalId
-      }
-    }
-  `;
-
-  constructor(
-    protected readonly apollo: Apollo
-  ) { }
-
-  public query(input: AuditTrailCriteria, extraAttr: string = ''): Observable<ApolloQueryResult<{ auditMsAuditTrail: AuditTrail[] }>> {
-    return this.apollo.query({
-      variables: { input },
-      query: gql`
-        query QueryAudit($input: AuditTrailCriteria!) {
-          auditMsAuditTrail(input: $input) {
-            ${ this.baseAttr }
-            ${ extraAttr }
-          }
-        }
-      `
-    });
-  }
-}

package/projects/unipin-angular/src/lib/components/audit/types/audit-detail-form.type.ts

@@ -1,13 +0,0 @@
-import { FormControl } from '@angular/forms';
-
-export type AuditDetailForm = {
-  guid: FormControl<string | null>;
-  action: FormControl<string | null>;
-  description: FormControl<string | null>;
-  userName: FormControl<string | null>;
-  sourceIp: FormControl<string | null>;
-  createdAt: FormControl<string | null>;
-  msSource: FormControl<string | null>;
-  sourcePlatform: FormControl<string | null>;
-  function: FormControl<string | null>;
-}

package/projects/unipin-angular/src/lib/components/buttons/group/btn-group.component.html

@@ -1,42 +0,0 @@
-@if (config().length > 0) {
-    @let c = config();
-
-    <up-btn-loading class="flex-grow-1" [class.multi]="config.length > 1" [type]="c[activeIndex].type" [disabled]="c[activeIndex].disabled" [form]="c[activeIndex].form" [color]="c[activeIndex].color" (onClick)="clickBtn($event);">
-        @if (c[activeIndex].icon) {
-            <ion-icon class="me-2" name="{{ c[activeIndex].icon }}" />
-        }
-        {{ c[activeIndex].label }}
-    </up-btn-loading>
-
-    @defer (when config().length > 1) {
-        @if (config().length > 1) {
-            <ion-button class="flex-shrink-0" id="btn-{{ id }}" [color]="c[activeIndex].color">
-                <ion-icon name="caret-down-outline" />
-            </ion-button>
-
-            <ion-popover trigger="btn-{{ id }}" triggerAction="click">
-                <ng-template>
-                    @for (c of c; track $index; let i = $index) {
-                        <div class="item px-2 py-3 cursor-pointer border-bottom d-flex gap-2" (click)="change(i);">
-                            <div class="icon flex-shrink-0">
-                                @if (i === activeIndex) {
-                                    <ion-icon name="checkmark" />
-                                }
-                            </div>
-
-                            <div class="flex-grow-1">
-                                <div class="fw-medium">{{ c.label }}</div>
-
-                                @if (c.description) {
-                                    <div class="f12 pt-1">
-                                        {{ c.description }}
-                                    </div>
-                                }
-                            </div>
-                        </div>
-                    }
-                </ng-template>
-            </ion-popover>
-        }
-    }
-}

package/projects/unipin-angular/src/lib/components/buttons/group/btn-group.component.scss

@@ -1,19 +0,0 @@
-:host { display: flex; }
-up-btn-loading.multi ::ng-deep ion-button {
-    --border-radius: 4px 0 0 4px;
-} 
-ion-button::part(native) {
-    border-radius: 0 4px 4px 0; 
-    border-left: 1px solid rgba(255, 255, 255, .3);
-}
-.item {
-    &:hover {
-        color: #ED6B26;
-        background: #fef3ee;
-    }
-    ion-icon {
-        --ionicon-stroke-width: 64px;
-    }
-    .icon { width: 14px; }
-    .f12 { color: #616161; }
-}

package/projects/unipin-angular/src/lib/components/buttons/group/btn-group.component.ts

@@ -1,72 +0,0 @@
-import { Attribute, ChangeDetectionStrategy, Component, HostBinding, input, InputSignal, SimpleChanges } from '@angular/core';
-import { IonicModule, PopoverController } from '@ionic/angular';
-import { ButtonGroupConfig } from './interfaces/btn-group-config.interface';
-import { ButtonLoadingComponent } from '../loading/btn-loading.component';
-
-@Component({
-  standalone: true,
-  selector: 'up-btn-group',
-  styleUrl: './btn-group.component.scss',
-  templateUrl: './btn-group.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    IonicModule,
-    ButtonLoadingComponent
-  ]
-})
-export class ButtonGroupComponent {
-
-  /**
-   * An input variable that used to configuration object for customizing button group properties. This
-   * object defined by ButtonGroupConfig interface allows specifying button such as icon,
-   * color, description, disabled, form, label, and type
-   * @type {ButtonGroupConfig[]}
-   */
-  public readonly config: InputSignal<ButtonGroupConfig[]> = input.required();
-  @HostBinding('class.d-none') protected isHidden: boolean = false;
-
-  /**
-   * A flag variable that used to control showed button. When set a new value, current button
-   * is hidden and and a new button is shown. Default value is 0.
-   * @type {number}
-   */
-  public activeIndex: number = 0;
-
-  constructor(
-    /**
-     * An identifier that used to uniquely identify an HTML element such as a ion-button and
-     * a ion-popover.
-     * @type {string}
-     */
-    @Attribute('id') public id: string,
-    protected readonly popoverCtrl: PopoverController
-  ) { }
-
-  public ngOnChanges(changes: SimpleChanges): void{
-    if (changes['config']) {
-      this.isHidden = this.config().length <= 0;
-      this.activeIndex = 0;
-    }
-  }
-
-  /**
-   * A method that executes another method inside active button defined within ButtonGroupConfig
-   * interface after a button is clicked. It receives a ButtonLoadingComponent as a parameter
-   * allowing modification of the active button.
-   * @param {ButtonLoadingComponent} b - Contain values from current button.
-   */
-  public clickBtn(b: ButtonLoadingComponent): void{
-    this.config()[this.activeIndex].onClick(b);
-  }
-
-  /**
-   * A method that change variable activeIndex value to current index of the active button and dismiss
-   * popover. It receives a number variable as a parameter and the value of the parameter will be set
-   * to variable activeIndex.
-   * @param {number} i - New index of the active button.
-   */
-  public change(i: number): void{
-    this.activeIndex = i;
-    this.popoverCtrl.dismiss();
-  }
-}

package/projects/unipin-angular/src/lib/components/buttons/group/btn-group.stories.ts

@@ -1,132 +0,0 @@
-import { importProvidersFrom } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
-import { moduleMetadata, type Meta, StoryObj, applicationConfig } from '@storybook/angular';
-import { ButtonGroupComponent } from './btn-group.component';
-import { ButtonLoadingComponent } from '../loading/btn-loading.component';
-
-const meta: Meta<ButtonGroupComponent> = {
-  title: 'Buttons/Group',
-  tags: [ 'autodocs' ],
-  component: ButtonGroupComponent, 
-  decorators: [
-    applicationConfig({
-      providers: [ 
-        importProvidersFrom([ IonicModule.forRoot() ])
-      ],
-    }),
-    moduleMetadata({
-      imports: [ 
-        ButtonGroupComponent, 
-        ButtonLoadingComponent 
-      ],
-    }),
-  ],
-  argTypes: {
-    id: {
-      defaultValue: undefined,
-      description: 'Will used as ion-button `id`.',
-      table: {
-        category: 'Input',
-        subcategory: 'Attribute'
-      },
-      type: {
-        required: false,
-        name: 'string'
-      }
-    },
-    config: {
-      defaultValue: undefined,
-      description: 'Array of button configuration objects.',
-      control: { 
-        name: 'objects' 
-      },
-      table: { 
-        category: 'Input' 
-      },
-      type: { 
-        required: true, 
-        name: 'ButtonGroupConfig[]' as any 
-      },
-    },
-    activeIndex: {
-      table: { disable: true },
-      control: { disable: true },
-    },
-    change: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    clickBtn: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    ngOnChanges: {
-      table: { disable: true },
-      control: { disable: true }
-    }
-  },
-};
-
-export default meta;
-type Story = StoryObj<ButtonGroupComponent>;
-
-export const Default: Story = {
-  args: {
-    id: 'default',
-    config: [
-      { type: 'button', disabled: false, color: 'primary', icon: 'add-circle', label: 'Button 1', description: 'Description Button 1', onClick: (button: ButtonLoadingComponent) => { console.log('Clicked Button 1', button); } },
-      { type: 'submit', disabled: false, color: 'danger', icon: 'remove-circle', label: 'Button 2', description: 'Description Button 2', onClick: (button: ButtonLoadingComponent) => { console.log('Clicked Button 2', button); } },
-    ],
-  }
-};
-
-export const OneDisabled: Story = {
-  name: 'One Button Disabled',
-  args: {
-    id: 'disabled',
-    config: [
-      { type: 'button', disabled: false, color: 'primary', icon: 'add-circle', label: 'Button 1', description: 'Description Button 1', onClick: (button: ButtonLoadingComponent) => { console.log('Clicked Button 1', button); } },
-      { type: 'submit', disabled: true, color: 'danger', icon: 'remove-circle', label: 'Button 2', description: 'Description Button 2', onClick: (button: ButtonLoadingComponent) => { console.log('Clicked Button 2', button); } },
-    ],
-  }
-};
-
-export const AllDisabled: Story = {
-  name: 'All Button Disabled',
-  args: {
-    id: 'disabled',
-    config: [
-      { type: 'button', disabled: true, color: 'primary', icon: 'add-circle', label: 'Button 1', description: 'Description Button 1', onClick: (button: ButtonLoadingComponent) => { console.log('Clicked Button 1', button); } },
-      { type: 'submit', disabled: true, color: 'danger', icon: 'remove-circle', label: 'Button 2', description: 'Description Button 2', onClick: (button: ButtonLoadingComponent) => { console.log('Clicked Button 2', button); } },
-    ],
-  }
-};
-
-export const NoDescription: Story = {
-  name: 'No Button Description',
-  args: {
-    id: 'no-description',
-    config: [
-      { type: 'button', disabled: false, color: 'primary', icon: 'add-circle', label: 'Button 1', onClick: (button: ButtonLoadingComponent) => { console.log('Clicked Button 1', button); } },
-      { type: 'submit', disabled: false, color: 'danger', icon: 'remove-circle', label: 'Button 2', onClick: (button: ButtonLoadingComponent) => { console.log('Clicked Button 2', button); } },
-    ],
-  }
-};
-
-export const SingleConfig: Story = {
-  name: 'Single Button',
-  args: {
-    id: 'single-config',
-    config: [
-      { type: 'button', disabled: false, color: 'primary', icon: 'add-circle', label: 'Button 1', onClick: (button: ButtonLoadingComponent) => { console.log('Clicked Button 1', button); } },
-    ],
-  }
-}
-
-export const NoConfig: Story = {
-  name: 'No Config Button',
-  args: {
-    id: 'no-config',
-    config: [],
-  }
-}

package/projects/unipin-angular/src/lib/components/buttons/group/interfaces/btn-group-config.interface.ts

@@ -1,63 +0,0 @@
-import { ButtonLoadingComponent } from '../../loading/btn-loading.component';
-
-/**
- * An Interface that represents an entity with config for button group. This interface defines
- * properties such as icon, color, description, disabled, form, label, type, and function onClick.
- */
-export interface ButtonGroupConfig {
-  /**
-   * A variable that used to add icon in the button. This variable is nullable and if the value is
-   * null, it will show the text only.
-   * @type {string}
-   */
-  icon?: string,
-
-  /**
-   * A variable that used to set the button color. This variable is nullable and if the value is
-   * null, it will set the color to 'primary'.
-   * @type {'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark'}
-   */
-  color?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'light' | 'medium' | 'dark';
-
-  /**
-   * A variable that used to set the description of the button will do in popover. This variable
-   * is nullable and if the value is null, it will only show the button label without description.
-   * @type {string}
-   */
-  description?: string;
-
-  /**
-   * An variable that used to control showed button. When set the value to true, the button will be
-   * disabled and cannot be clicked. When set the value to false, the button will be enabled and can
-   * be clicked.
-   * @type {boolean}
-   */
-  disabled: boolean;
-
-  /**
-   * An variable that used to set form to button. This variable is nullable and if the value is null,
-   * it will not in any form.
-   * @type {HTMLFormElement | string}
-   */
-  form?: HTMLFormElement | string;
-
-  /**
-   * An variable that used to set text in button.
-   * @type { string}
-   */
-  label: string;
-
-  /**
-   * A variable that used to set the type of the button. This variable is nullable and if the value is
-   * null, it will set the type to 'button'.
-   * @type {'button' | 'reset' | 'submit'}
-   */
-  type?: 'button' | 'reset' | 'submit';
-
-  /**
-   * A method that performs necessary actions after a button is clicked. It receives a ButtonLoadingComponent
-   * as a parameter allowing modification of the active button.
-   * @param {ButtonLoadingComponent} b - Contain values from current button.
-   */
-  onClick: (b: ButtonLoadingComponent) => void;
-}

package/projects/unipin-angular/src/lib/components/buttons/loading/btn-loading.component.html

@@ -1,9 +0,0 @@
-<ion-button type="{{ type }}" fill="{{ fill }}" color="{{ color }}" expand="block" mode="md" [disabled]="disabled" [form]="form" (click)="clickBtn()">
-    @if (isLoading) {
-        <ion-spinner />
-    } @else {
-        <ng-content select="ion-icon" />
-    }
-    
-    <ng-content />
-</ion-button>

package/projects/unipin-angular/src/lib/components/buttons/loading/btn-loading.component.scss

@@ -1,8 +0,0 @@
-ion-spinner {
-    width: 14px;
-    height: 14px;
-    margin-right: 8px;
-}
-circle {
-    stroke-width: 8;
-}

package/projects/unipin-angular/src/lib/components/buttons/loading/btn-loading.component.ts

@@ -1,87 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { IonButton, IonicModule } from '@ionic/angular';
-
-@Component({
-  standalone: true,
-  selector: 'up-btn-loading',
-  styleUrl: './btn-loading.component.scss',
-  templateUrl: './btn-loading.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    IonicModule
-  ]
-})
-export class ButtonLoadingComponent {
-
-  /**
-   * An input variable that used to control showed button. When set the value to true, the button
-   * will be disabled and cannot be pressed. When set the value to false, the button will be enabled
-   * and can be pressed. Default value is false.
-   * @type {boolean}
-   */
-  @Input() public disabled: boolean = false;
-
-  /**
-   * An input variable that used to set form of ion-button.
-   * @type {HTMLFormElement | string | undefined}
-   */
-  @Input() public form: HTMLFormElement | string | undefined;
-
-  /**
-   * An input variable that used to set type of ion-button. Default value is 'button'.
-   * @type {'button' | 'reset' | 'submit'}
-   */
-  @Input() public type?: 'button' | 'reset' | 'submit' = 'button';
-
-  /**
-   * An input variable that used to set fill of ion-button. Default value is 'solid'.
-   * @type {'clear' | 'default' | 'outline' | 'solid'}
-   */
-  @Input() public fill: 'clear' | 'default' | 'outline' | 'solid' = 'solid';
-
-  /**
-   * An input variable that used to set color of ion-button. Default value is 'primary'.
-   * @type {'danger' | 'dark' | 'light' | 'medium' | 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning' | string}
-   */
-  @Input() public color?: 'danger' | 'dark' | 'light' | 'medium' | 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning' | string = 'primary';
-
-  /**
-   * An output variable that used to emits event of type ButtonLoadingComponent when clicked. This
-   * output variable, when subscribed to, emits events containing instances of ButtonLoadingComponent
-   * or its subclass.
-   * @type {EventEmitter<ButtonLoadingComponent>}
-   */
-  @Output() public onClick: EventEmitter<ButtonLoadingComponent> = new EventEmitter();
-  @ViewChild(IonButton) protected btn!: IonButton;
-
-  /**
-   * A flag variable that used to control showed button. When set the value to true, the button
-   * will replaced to ion-spinner for marking the application still loading. When set the value
-   * to false, it will shown the button. Default value is false.
-   * @type {boolean}
-   */
-  public isLoading: boolean = false;
-
-  constructor(
-    protected readonly ch: ChangeDetectorRef,
-  ) { }
-
-  /**
-   * A method that emit onClick variable and call toggleLoading function after a button is clicked.
-   */
-  public clickBtn(): void{
-    this.onClick.emit(this);
-    this.toggleLoading();
-  }
-
-  /**
-   * A method when it's called, it'll make either the button is in loading state or in normal state.
-   * If the current condition is normal state, the button will be in loading state and vice versa.
-   */
-  public toggleLoading(): void{
-    this.isLoading = !this.isLoading;
-    this.btn.disabled = !this.btn.disabled;
-
-    this.ch.markForCheck();
-  }
-}