@unipin/angular-applet 18.9.4 → 18.9.6

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

@@ -1,14 +0,0 @@
-<up-column-header-container header="Approval Detail" prevUrl="/approval" class="bg-white">
-    @if (!formComponent?.isLoading) {
-        <up-btn-group id="approval-detail-button" [config]="btnConfig" button />
-    }
-    @else {
-        <ion-skeleton-text class="m-0 sk-btn" button />
-    }
-
-    <up-tab-group class="h-100" (onChange)="changeTab($event)">
-        <up-tab-content header="Detail" fragment="detail">
-            <up-approval-form />
-        </up-tab-content>
-    </up-tab-group>
-</up-column-header-container>

package/projects/unipin-angular/src/lib/components/approval/detail/approval-detail.component.ts

@@ -1,90 +0,0 @@
-import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { filter, Subscription } from 'rxjs';
-import { IonicModule } from '@ionic/angular';
-import { TabContentComponent, TabGroupComponent, TabsChangedEvent } from '../../tabs';
-import { ButtonGroupConfig } from '../../buttons/group/interfaces/btn-group-config.interface';
-import { ApprovalFormComponent } from '../form/approval-form.component';
-import { ButtonGroupComponent } from '../../buttons/group/btn-group.component';
-import { ColumnHeaderContainerComponent } from '../../containers/colum-header-container/column-header-container.component';
-
-@Component({
-  standalone: true,
-  selector: 'up-approval-detail',
-  styleUrl: './approval-detail.component.scss',
-  templateUrl: './approval-detail.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'd-block h-100'
-  },
-  imports: [
-    IonicModule,
-    TabGroupComponent,
-    TabContentComponent,
-    ButtonGroupComponent,
-    ColumnHeaderContainerComponent,
-    ApprovalFormComponent
-  ]
-})
-export class ApprovalDetailComponent implements OnInit, AfterViewInit, OnDestroy {
-
-  @ViewChild(ApprovalFormComponent) public formComponent?: ApprovalFormComponent;
-  public btnConfig: ButtonGroupConfig[] = [];
-  protected guids?: string[];
-  protected guid: string = '';
-  protected sub!: Subscription;  
-  protected isApprove?: boolean;
-  protected approvalGroupGuid?: string;
-
-  constructor(
-    protected readonly router: Router,
-    protected readonly activatedRoute: ActivatedRoute
-  ) { }
-
-  public ngOnInit(): void {
-    this.sub = this.activatedRoute.queryParams.subscribe((params) => {
-      if (params) {
-        this.guids = params['guids'];
-        this.isApprove = params['isApprove'] === 'true';
-
-        this.approvalGroupGuid = params['approvalGroupGuid'];
-      }
-    });
-  }
-
-  public ngAfterViewInit(): void{
-    if (this.guids) {
-      this.setChildGuid(this.guids);
-      this.changeTab({ fragment: this.activatedRoute.snapshot.fragment, index: 0 });
-    } else {
-      this.setChildGuid([this.activatedRoute.children[0].snapshot.params['guid']]);
-      this.changeTab({ fragment: this.activatedRoute.snapshot.fragment, index: 0 });
-
-      this.sub = this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe({
-        next: () => {
-          const newGuid: string = this.activatedRoute.children[0].snapshot.params['guid'];
-
-          if (this.guid !== newGuid) {
-            this.guid = newGuid;
-            this.setChildGuid([ this.guid ]);
-          }
-        }
-      });
-    }
-  }
-
-  public ngOnDestroy(): void{ 
-    this.sub.unsubscribe(); 
-  }
-
-  public changeTab({ fragment }: TabsChangedEvent): void{
-    switch (fragment) {
-      default:
-        this.btnConfig = this.formComponent?.btnConfig?? [];
-    }
-  }
-
-  protected setChildGuid(guids: string[]): void{
-    this.formComponent?.setGuid(guids, this.approvalGroupGuid, this.isApprove);
-  }
-}

package/projects/unipin-angular/src/lib/components/approval/detail/approval-detail.stories.ts

@@ -1,61 +0,0 @@
-import { importProvidersFrom } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { IonicModule } from '@ionic/angular';
-import { type Meta, StoryObj, applicationConfig } from '@storybook/angular';
-import { ApolloModule } from 'apollo-angular';
-import { ApprovalDetailComponent } from './approval-detail.component';
-
-const meta: Meta<ApprovalDetailComponent> = {
-  title: 'Approval/Detail',
-  tags: [ 'autodocs' ],
-  component: ApprovalDetailComponent,
-  decorators: [
-    applicationConfig({
-      providers: [
-        importProvidersFrom([
-          ApolloModule,
-          IonicModule.forRoot()
-        ]),
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            snapshot: {
-              paramMap: {
-                get(): string{ return 'approval-detail'; },
-              }
-            }
-          }
-        }
-      ]
-    })
-  ],
-  argTypes: {
-    btnConfig: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    ngOnInit: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    ngAfterViewInit: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    ngOnDestroy: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    changeTab: {
-      table: { disable: true },
-      control: { disable: true }
-    }
-  }
-};
-
-export default meta;
-type Story = StoryObj<ApprovalDetailComponent>;
-
-export const Default: Story = {
-  render: (props) => ({ props, template: `<up-approval-detail />` })
-};

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

@@ -1,41 +0,0 @@
-@if (isLoading) {
-    <div class="d-flex flex-column flex-lg-row gap-4">
-        <div class="flex-grow-1">
-            <ion-skeleton-text class="m-0 mb-4 sk-input" />
-            <ion-skeleton-text class="m-0 mb-4 sk-input" />
-        </div>
-
-        <div class="flex-grow-1">
-            <ion-skeleton-text class="m-0 mb-4 sk-input" />
-            <ion-skeleton-text class="m-0 mb-4 sk-input" />
-        </div>
-    </div>
-    
-    <ion-skeleton-text class="m-0 mb-4 sk-input" />
-    <ion-skeleton-text class="m-0 sk-input" />
-}
-@else {
-    @for (d of data; track $index) {
-        @if (data.length > 1) {
-            <div class="d-flex align-items-center gap-2 pb-3 pt-2">
-                <ion-icon name="document" />
-                <h5 class="m-0">Approval {{ $index + 1 }}</h5>
-            </div>
-        }
-    
-        <div class="d-flex flex-column flex-lg-row gap-4">
-            <div class="flex-grow-1">
-                <up-input class="mb-4" label="Entity" [disabled]="true" [value]="d.entity" />
-                <up-input class="mb-4" label="Remark" [disabled]="true" [value]="d.remark" />
-            </div>
-
-            <div class="flex-grow-1">
-                <up-input class="mb-4" label="Created At" [disabled]="true" [value]="d.createdAt | date:'dd MMM yyyy HH:mm'" />
-                <up-input class="mb-4" label="Status" [disabled]="true" [value]="d.status" />
-            </div>
-        </div>
-
-        <up-textarea label="JSON" [disabled]="true" [value]="d.data | json" />
-        <up-textarea class="mt-4" label="Reason" [disabled]="true" [value]="d.reason" *ngIf="d.status !== 'PENDING'" />
-    }
-}

package/projects/unipin-angular/src/lib/components/approval/form/approval-form.component.ts

@@ -1,152 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy } from '@angular/core';
-import { DatePipe, JsonPipe } from '@angular/common';
-import { Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { AlertButton, AlertController, IonicModule } from '@ionic/angular';
-import { Approval, ApprovalStatusEnum } from '../../../../graphql/generated';
-import { ButtonGroupConfig } from '../../buttons/group/interfaces/btn-group-config.interface';
-import { ApprovalService } from '../services/approval.service';
-import { GridService } from '../../grids/services/grid.service';
-import { PermissionService } from '../../../modules/permission/services/permission.service';
-import { FormInputComponent } from '../../forms/input/form-input.component';
-import { ButtonLoadingComponent } from '../../buttons/loading/btn-loading.component';
-import { FormTextareaComponent } from '../../forms/textarea/form-textarea.component';
-
-@Component({
-  standalone: true,
-  selector: 'up-approval-form',
-  styleUrl: './approval-form.component.scss',
-  templateUrl: './approval-form.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'px-4 pb-4 d-block'
-  },
-  imports: [
-    DatePipe,
-    JsonPipe,
-    IonicModule,
-    FormInputComponent,
-    FormTextareaComponent
-  ]
-})
-export class ApprovalFormComponent implements OnDestroy {
-
-  @Input() public isLoading: boolean = true;
-  public readonly btnConfig: ButtonGroupConfig[] = [];
-  public data: Approval[] = [];
-  protected guids!: string[];
-  protected sub?: Subscription;
-  protected approvalGroupGuid?: string;
-
-  constructor(
-    protected readonly router: Router,
-    protected readonly ch: ChangeDetectorRef,
-    protected readonly service: ApprovalService,
-    protected readonly gridService: GridService,
-    protected readonly alertCtrl: AlertController,
-    protected readonly permService: PermissionService
-  ) { }
-
-  public ngOnDestroy(): void{
-    this.sub?.unsubscribe();
-  }
-
-  public setGuid(guids: string[], approvalGroupGuid?: string, isApprove?: boolean): void{
-    this.guids = guids;
-    if (approvalGroupGuid) {
-      this.approvalGroupGuid = approvalGroupGuid;
-    }
-
-    this.btnConfig.length = 0;
-    this.setLoading(true);
-
-    this.sub = this.service.query({ guids, status: [ ApprovalStatusEnum.Approved, ApprovalStatusEnum.Declined, ApprovalStatusEnum.Pending ] }, 'data permission reason').subscribe({
-      next: ({ data: { approvalMsApprovals: { data }}}) => {
-        if (!data || data.length === 0) {
-          this.router.navigateByUrl('approval');
-          return;
-        }
-
-        this.data = data as any;
-        if (data.length === 1) {
-          const { status, permission } = data[0] as any;
-
-          if (status === ApprovalStatusEnum.Pending) {
-            const perm: string[] = permission!.split('.');
-
-            if (this.permService.checkPermission(perm[0], perm[1], perm[2])) {
-              this.btnConfig.push(
-                { label: 'Approve', icon: 'checkmark', description: 'Approve the approval' , disabled: false, onClick: this.request.bind(this) },
-                { label: 'Decline', icon: 'close', description: 'Decline the approval', color: 'danger', disabled: false, onClick: this.request.bind(this) }
-              );
-            }
-          }
-        } else {
-          let dataCount: number = 0;
-
-          data.map(({ permission, status }: any) => {
-            if (status === ApprovalStatusEnum.Pending) {
-              const perm: string[] = permission.split('.');
-
-              if (this.permService.checkPermission(perm[0], perm[1], perm[2])) {
-                dataCount++;
-              }
-
-              if (dataCount === data.length) {
-                if (isApprove) {
-                  this.btnConfig.push({ label: 'Approve', icon: 'checkmark', description: 'Approve the approval(s)' , disabled: false, onClick: this.request.bind(this) });
-                } else {
-                  this.btnConfig.push({ label: 'Decline', icon: 'close', description: 'Decline the approval', color: 'danger', disabled: false, onClick: this.request.bind(this) })
-                }                
-              }
-            }
-          });
-        }
-        this.setLoading(false);
-      },
-      error: ({ message }) => {
-        this.showAlert('Error', message);
-        this.router.navigateByUrl('approval');
-      }
-    });
-  }
-
-  protected request(btn: ButtonLoadingComponent): void{
-    const isApprove: boolean = btn.color !== 'danger';
-
-    this.showAlert('Confirm', `Are you sure want to ${ isApprove? 'approve the approval?' : 'decline the approval? Please input the reason if you want to decline.' }`, [
-      { text: 'Cancel', handler: () => btn.toggleLoading() },
-      {
-        text: `${ isApprove? 'Approve' : 'Decline' }`,
-        handler: ({ reason }) => {
-          this.sub?.unsubscribe();
-
-          this.sub = this.service.request({
-            reason,
-            isApprove,
-            guids: this.guids,
-            approvalGroupGuid: this.approvalGroupGuid
-          }).subscribe({
-            next: () => {
-              this.showAlert('Success', `Approval ${ isApprove? 'approved' : 'declined' }`);
-              this.router.navigateByUrl('approval');
-
-              this.gridService.refreshGridCache('grid-approval-list');
-            },
-            error: ({ message }: any) => {
-              btn.toggleLoading();
-              this.showAlert('Error', message);
-            }
-          });
-        }
-      }
-    ], [{ name: 'reason', type: 'textarea', placeholder: 'Reason' }]);
-  }
-
-  protected setLoading(b: boolean): void{
-    this.isLoading = b;
-    this.ch.markForCheck();
-  }
-
-  protected async showAlert(header: string, message: string, buttons: (AlertButton | string)[] = ['OK'], inputs: any[] = []): Promise<void>{ (await this.alertCtrl.create({ header, message, buttons, inputs })).present(); }
-}

package/projects/unipin-angular/src/lib/components/approval/form/approval-form.stories.ts

@@ -1,111 +0,0 @@
-import { importProvidersFrom } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { IonicModule } from '@ionic/angular';
-import { moduleMetadata, type Meta, StoryObj, applicationConfig } from '@storybook/angular';
-import { ApolloModule } from 'apollo-angular';
-import { ColumnHeaderContainerComponent } from '../../containers';
-import { TabContentComponent, TabGroupComponent } from '../../tabs';
-import { ApprovalFormComponent } from './approval-form.component';
-
-const meta: Meta<ApprovalFormComponent> = {
-  title: 'Approval/Detail Form',
-  tags: [ 'autodocs' ],
-  component: ApprovalFormComponent,
-  decorators: [
-    applicationConfig({
-      providers: [
-        importProvidersFrom([
-          ApolloModule,
-          IonicModule.forRoot()
-        ]),
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            snapshot: {
-              paramMap: {
-                get(): string{ return 'approval-form'; },
-              }
-            }
-          }
-        }
-      ],
-    }),
-    moduleMetadata({
-      imports: [
-        ApprovalFormComponent,
-        ColumnHeaderContainerComponent,
-        TabGroupComponent,
-        TabContentComponent,
-      ]
-    })
-  ],
-  argTypes: {
-    isLoading: {
-      defaultValue: true,
-      description: 'Set to `true` to display a skeleton loading UI, set to `false` to display actual data if data is already available.',
-      type: {
-        required: false,
-        name: 'boolean'
-      },
-    },
-    data: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    btnConfig: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    ngOnDestroy: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    setGuid: {
-      table: { disable: true },
-      control: { disable: true }
-    }
-  }
-};
-
-const template = `
-  <up-column-header-container header="Approval Detail" class="bg-white">
-    <up-tab-group class="h-100">
-      <up-tab-content header="Detail" fragment="detail">
-        <up-approval-form [isLoading]='isLoading' />
-      </up-tab-content>
-    </up-tab-group>
-  </up-column-header-container>
-`;
-
-export default meta;
-type Story = StoryObj<ApprovalFormComponent>;
-
-export const Default: Story = {
-  render: (props) => ({ props, template }),
-  args: {
-    isLoading: false,
-    data: [
-      {
-        entity: 'AppLoginSubjectToRole',
-        remark: 'Attach role to User',
-        createdAt: new Date('2023-12-01T07:32:10.548Z'),
-        status: 'PENDING' as any
-      }
-    ]
-  }
-};
-
-export const Loading: Story = {
-  render: (props) => ({ props, template }),
-  args: {
-    isLoading: true,
-    data: [
-      {
-        entity: 'AppLoginSubjectToRole',
-        remark: 'Attach role to User',
-        createdAt: new Date('2023-12-01T07:32:10.548Z'),
-        status: 'PENDING' as any
-      }
-    ]
-  }
-};

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

@@ -1,15 +0,0 @@
-<div class="d-flex align-items-center justify-content-between gap-4 p-4 flex-shrink-0 flex-wrap">
-    <div class="flex-grow-1 d-flex align-items-center gap-3">
-        <h3 class="m-0">Approval</h3>
-
-        <up-btn-group id="approval-list" [config]="btnConfig" />
-    </div>
-
-    <div class="flex-shrink-0 flex-grow-1">
-        <up-filter placeholder="Type to search" id="filter-approval-list" [config]="filterConfig" (onSearch)="search($event)" />
-    </div>
-</div>
-
-<div class="flex-grow-1 px-1 pb-1">
-    <up-pagination-grid [config]="gridConfig" id="grid-approval-list" rowSelection="multiple" (onGridReady)="setGridApi($event)" (onRowClick)="openDetail($event)" (onSelectionChanged)="selectApprovals()" />
-</div>

package/projects/unipin-angular/src/lib/components/approval/list/approval-list.component.ts

@@ -1,136 +0,0 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { formatDate } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
-import { map, Observable } from 'rxjs';
-import { AlertController } from '@ionic/angular';
-import { FetchPolicy } from '@apollo/client/core';
-import { GridApi, GridReadyEvent } from '@ag-grid-community/core';
-import { ApprovalCriteria, ApprovalGroup, ApprovalStatusEnum } from '../../../../graphql/generated';
-import { GridConfig } from '../../grids/interfaces/grid-config.interface';
-import { FilterConfig } from '../../filter/interfaces/filter-config.interface';
-import { FilterSearchEvent } from '../../filter/interfaces/filter-search-event.interface';
-import { ButtonGroupConfig } from '../../buttons/group/interfaces/btn-group-config.interface';
-import { APPROVAL_ENTITIES } from './provide-approval-entities.util';
-import { ApprovalService } from '../services/approval.service';
-import { FilterComponent } from '../../filter/filter.component';
-import { ButtonGroupComponent } from '../../buttons/group/btn-group.component';
-import { ButtonLoadingComponent } from '../../buttons/loading/btn-loading.component';
-import { GridPaginationComponent } from '../../grids/grid-pagination/grid-pagination.component';
-
-@Component({
-  standalone: true,
-  selector: 'up-approval-list',
-  styleUrl: './approval-list.component.scss',
-  templateUrl: './approval-list.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'd-flex flex-column h-100 w-100'
-  },
-  imports: [
-    FilterComponent,
-    ButtonGroupComponent,
-    GridPaginationComponent
-  ]
-})
-export class ApprovalListComponent {
-
-  public readonly gridConfig: GridConfig = {
-    noRowText: 'Approval not found',
-    colDefs: [
-      { headerName: 'Entity', field: 'entity', checkboxSelection: ({ data: d }) => this.isCheckboxSelectable(d?.approvalGroup) },
-      { headerName: 'Remark', field: 'remark' },
-      { headerName: 'Source Platform', field: 'sourcePlatform' },
-      { headerName: 'Status', field: 'status', maxWidth: 100, cellRenderer: ({ value }: any) => value? `<div class="badge m-auto bg-${ value === ApprovalStatusEnum.Pending? 'warning' : value === ApprovalStatusEnum.Approved? 'success' : 'danger'}">${ value }</div>` : '' },
-      { headerName: 'Type', field: 'type', maxWidth: 100 },
-      { 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'): Observable<{ data: any, totalRecord: number }> => {
-      const policy: FetchPolicy | undefined = this.input.page === page? 'no-cache' : undefined;
-
-      this.input.page = page;
-      this.input.sortBy = sortBy;
-      this.input.pageSize = pageSize;
-      this.input.sortDirection = dir;
-
-      return this.service.query(this.input, '', policy).pipe(
-        map(({ data: { approvalMsApprovals: { data, totalRecord: t } }}) => ({ data, totalRecord: t! }))
-      );
-    }
-  };
-  public readonly filterConfig: FilterConfig = {
-    mode: 'advanced',
-    fields: [
-      { key: 'status', label: 'Status', type: 'select', initialValue: [ 'PENDING' ], options: [
-        { label: 'Approved', value: [ 'APPROVED' ] as any },
-        { label: 'Declined', value: [ 'DECLINED' ] as any },
-        { label: 'Pending', value: [ 'PENDING' ] as any }
-      ]},
-      { key: 'type', label: 'Type', type: 'select', options: [
-        { label: 'Creation', value: [ 'CREATION' ] as any },
-        { label: 'Deletion', value: [ 'DELETION' ] as any },
-        { label: 'Linkage', value: [ 'LINKAGE' ] as any },
-        { label: 'Unlink', value: [ 'UNLINK' ] as any },
-        { label: 'Update', value: [ 'UPDATE' ] as any }
-      ]}
-    ]
-  };
-  public btnConfig: ButtonGroupConfig[] = [
-    { label: 'Approve', icon: 'checkmark', description: 'Approve the approvals' , disabled: true, onClick: this.multipleApproval.bind(this) },
-    { label: 'Decline', icon: 'close', description: 'Decline the approvals', color: 'danger', disabled: true, onClick: this.multipleApproval.bind(this) }
-  ];
-  protected gridApi!: GridApi;
-  protected selectedApprovalGroupGuid?: string;
-  protected input: ApprovalCriteria = { page: 0, pageSize: 50, entity: this.entities };
-
-  constructor(
-    @Inject(APPROVAL_ENTITIES) public readonly entities: string[],
-    protected readonly router: Router,
-    protected readonly route: ActivatedRoute,
-    protected readonly service: ApprovalService,
-    protected readonly alertCtrl: AlertController
-  ) { }
-
-  public setGridApi({ api }: GridReadyEvent): void{ 
-    this.gridApi = api; 
-  }
-
-  public openDetail({ guid }: any): void{ 
-    this.router.navigate([ `/approval/${ guid }` ], { preserveFragment: true }); 
-  }
-
-  public selectApprovals(): void{
-    const dataGrid: any[] = this.gridApi.getSelectedRows();
-
-    this.btnConfig[0].disabled = this.btnConfig[1].disabled = dataGrid.length < 1;
-
-    this.selectedApprovalGroupGuid = dataGrid.length === 0? undefined : dataGrid[0].approvalGroup.guid;
-    this.gridApi.refreshCells({ force: true });
-  }
-
-  public search({ data }: FilterSearchEvent): void{
-    this.input.type = data?.type;
-    this.input.status = data?.status;
-
-    this.gridApi.getSelectedNodes().forEach((e) => e.setSelected(false));
-    this.gridApi.refreshInfiniteCache();
-  }
-
-  protected isCheckboxSelectable(approvalGroup?: ApprovalGroup): boolean{
-    if (!approvalGroup) return false;
-    if (approvalGroup.guid === this.selectedApprovalGroupGuid) return true;
-    return true;
-  }
-
-  protected multipleApproval(btn: ButtonLoadingComponent): void{
-    btn.toggleLoading();
-
-    this.router.navigate([ `/approval/approval-group` ], {
-      preserveFragment: true,
-      queryParams: {
-        isApprove: btn.color !== 'danger',
-        approvalGroupGuid: this.selectedApprovalGroupGuid,
-        guids: this.gridApi.getSelectedRows().map(({ guid }) => guid)
-      }
-    });
-  }
-}