@unipin/angular-applet 18.9.3 → 18.9.4

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,87 @@
+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();
+  }
+}