@unipin/angular-applet 18.9.2 → 18.9.4

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

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

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

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

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

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

@@ -0,0 +1,111 @@
+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/{lib/components/approval/index.d.ts → projects/unipin-angular/src/lib/components/approval/index.ts}

@@ -1,4 +1,5 @@
 export { ApprovalService } from './services/approval.service';
 export { ApprovalListComponent } from './list/approval-list.component';
 export { provideApprovalEntities, APPROVAL_ENTITIES } from './list/provide-approval-entities.util';
+
 export { ApprovalDetailComponent } from './detail/approval-detail.component';

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

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

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