@unipin/angular-applet 18.9.3 → 18.9.4

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

@@ -0,0 +1,141 @@
+import { importProvidersFrom } from '@angular/core';
+import { formatDate } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { ApolloModule } from 'apollo-angular';
+import { Observable, of } from 'rxjs';
+import { type Meta, StoryObj, applicationConfig } from '@storybook/angular';
+import { ApprovalCriteria } from '../../../../graphql/generated';
+import { ApprovalListComponent } from './approval-list.component';
+
+const meta: Meta<ApprovalListComponent> = {
+  title: 'Approval/List',
+  tags: [ 'autodocs' ],
+  component: ApprovalListComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom([ ApolloModule ]),
+        { provide: 'ENTITIES', useValue: undefined },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              paramMap: {
+                get(): string{ return 'approval-list'; },
+              }
+            }
+          }
+        }
+      ]
+    })
+  ],
+  argTypes: {
+    filterConfig: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    gridConfig: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    btnConfig: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    setGridApi: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    openDetail: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    selectApprovals: {
+      control: { disable: true },
+      table: { disable: true }
+    },
+    search: {
+      control: { disable: true },
+    table: { disable: true }
+    }
+  }
+};
+
+const template = `<up-approval-list style="height: 500px !important; width: 768px !important;" />`;
+
+export default meta;
+type Story = StoryObj<ApprovalListComponent>;
+
+export const DisplayData: Story = {
+  render: (props) => ({ props, template }),
+  args: {
+    gridConfig: {
+      noRowText: 'Approval not found',
+      colDefs: [
+        { headerName: 'Entity', field: 'entity', checkboxSelection: true },
+        { headerName: 'Remark', field: 'remark' },
+        { headerName: 'Source Platform', field: 'sourcePlatform' },
+        { headerName: 'Status', field: 'status', maxWidth: 100 },
+        { 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 criteria: ApprovalCriteria = { page: 0, pageSize: 50 };
+
+        criteria.page = page;
+        criteria.sortBy = sortBy;
+        criteria.pageSize = pageSize;
+        criteria.sortDirection = dir;
+
+        return of({
+          totalRecord: 2,
+          data: [
+            {
+              entity: 'AppLoginSubjectToRole',
+              remark: 'Attach role to User',
+              sourcePlatform: 'ms-auth',
+              status: 'PENDING',
+              type: 'LINKAGE',
+              createdAt: new Date('2023-12-01T07:32:10.548Z')
+            },
+            {
+              entity: 'AppLoginSubjectToRole',
+              remark: 'Revoke role from user',
+              sourcePlatform: 'ms-auth',
+              status: 'PENDING',
+              type: 'UNLINK',
+              createdAt: new Date('2023-12-01T07:34:35.323Z')
+            }
+          ]
+        });
+      }
+    }
+  }
+};
+
+export const NoData: Story = {
+  render: (props) => ({ props, template }),
+  args: {
+    gridConfig: {
+      noRowText: 'Approval not found',
+      colDefs: [
+        { headerName: 'Entity', field: 'entity', checkboxSelection: true },
+        { headerName: 'Remark', field: 'remark' },
+        { headerName: 'Source Platform', field: 'sourcePlatform' },
+        { headerName: 'Status', field: 'status', maxWidth: 100 },
+        { 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 criteria: ApprovalCriteria = { page: 0, pageSize: 50 };
+
+        criteria.page = page;
+        criteria.sortBy = sortBy;
+        criteria.pageSize = pageSize;
+        criteria.sortDirection = dir;
+
+        return of({ data: [], totalRecord: 0 });
+      }
+    }
+  }
+};

package/projects/unipin-angular/src/lib/components/approval/list/provide-approval-entities.util.ts

@@ -0,0 +1,10 @@
+import { InjectionToken, Provider } from '@angular/core';
+
+export const APPROVAL_ENTITIES = new InjectionToken<string[]>('APPROVAL_ENTITIES');
+
+export function provideApprovalEntities(entities: string[]): Provider{
+  return { 
+    provide: APPROVAL_ENTITIES, 
+    useValue: entities 
+  };
+}

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

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ApolloQueryResult, FetchPolicy } from '@apollo/client/core';
+import { Apollo, gql, MutationResult } from 'apollo-angular';
+import { ApprovalCriteria, PageableResponse, MutationApprovalMsApproveOrDeclineRequestArgs } from './../../../../graphql/generated';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApprovalService {
+
+  protected readonly baseAttr: string = `guid createdAt entity remark sourcePlatform status type approvalGroup { guid }`;
+
+  constructor(
+    protected readonly apollo: Apollo
+  ) { }
+
+  public query(input: ApprovalCriteria, extraAttr: string = '', fetchPolicy?: FetchPolicy): Observable<ApolloQueryResult<{ approvalMsApprovals: PageableResponse }>>{
+    return this.apollo.query({
+      fetchPolicy,
+      variables: { input },
+      query: gql`
+        query QueryApproval($input: ApprovalCriteria) {
+          approvalMsApprovals(input: $input) {
+            data {
+              ${ this.baseAttr }
+              ${ extraAttr }
+            }
+            ${ input.page === 0? 'totalRecord' : '' }
+          }
+        }
+      `
+    });
+  }
+
+  public request(variables: MutationApprovalMsApproveOrDeclineRequestArgs): Observable<MutationResult<{ approvalMsApproveOrDeclineRequest: string }>>{
+    return this.apollo.mutate({
+      variables,
+      mutation: gql`
+        mutation ${ variables.isApprove? 'ApproveApproval' : 'DeclineApproval' }($approvalGroupGuid: String, $guids: [String], $isApprove: Boolean, $reason: String) {
+          approvalMsApproveOrDeclineRequest(approvalGroupGuid: $approvalGroupGuid, guids: $guids, isApprove: $isApprove, reason: $reason)
+        }
+      `
+    });
+  }
+}

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

@@ -0,0 +1,50 @@
+<up-tab-group class="h-100">
+    <up-tab-content header="Detail" fragment="detail">
+        @if (isLoading) {
+            @for(i of [0,1,2,3,4,5,6]; track $index) {
+                <ion-skeleton-text class="sk-input mx-4 mb-4" />
+            }
+        } @else {
+            <form [formGroup]="form" class="px-4 pb-4">
+                <div class="d-flex align-items-center gap-2 pb-3">
+                    <ion-icon name="information-circle" />
+                    <h5 class="m-0">Information</h5>
+                </div>
+  
+                <div class="d-flex flex-column flex-lg-row gap-4">
+                    <div class="flex-grow-1">
+                        <up-input class="mb-lg-4" label="Action" formControlName="action" />
+                    </div>
+  
+                    <div class="flex-grow-1">
+                        <up-input class="mb-4" label="Source IP" formControlName="sourceIp" />
+                    </div>
+                </div>
+                
+                <up-input class="mb-4" label="User Name" formControlName="userName" />
+                <up-textarea class="mb-4" label="Description" formControlName="description" />
+  
+                <div class="d-flex align-items-center gap-2 pb-3 pt-2">
+                    <ion-icon name="laptop" />
+                    <h5 class="m-0">System Information</h5>
+                </div>
+  
+                <div class="d-flex flex-column flex-lg-row gap-4">
+                    <div class="flex-grow-1">
+                        <up-input class="mb-4" label="Action Date" formControlName="createdAt" />
+                        <up-input class="mb-lg-4" label="Source Platform" formControlName="sourcePlatform" />
+                    </div>
+  
+                    <div class="flex-grow-1">
+                        <up-input class="mb-4" label="MS Source" formControlName="msSource" />
+                        <up-input class="mb-4" label="Function" formControlName="function" />
+                    </div>
+                </div>
+            </form>
+        }   
+    </up-tab-content>
+
+    <up-tab-content header="Attributes" fragment="attributes">
+        <up-pagination-grid id="grid-audit-detail" rowModelType="clientSide" [config]="gridConfig" (onGridReady)="setGridApi($event)" />
+    </up-tab-content>
+</up-tab-group>

package/projects/unipin-angular/src/lib/components/audit/detail/audit-detail.component.scss

@@ -0,0 +1,4 @@
+ion-icon {
+    font-size: 24px;
+    margin-right: 5px;
+}

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

@@ -0,0 +1,51 @@
+import { TestBed } from '@angular/core/testing';
+import { AuditDetailComponent } from './audit-detail.component';
+import { ApolloTestingModule } from 'apollo-angular/testing';
+import { ActivatedRoute } from '@angular/router';
+
+describe('AuditDetailComponent', () => {
+  let component: AuditDetailComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        AuditDetailComponent, 
+        ApolloTestingModule
+      ],
+      providers: [
+        { 
+          provide: ActivatedRoute, 
+          useValue: { 
+            children: [
+              { snapshot: { params: { audit: 'someGuid' } } }
+            ] 
+          } 
+        }
+      ],
+    });
+
+    const fixture = TestBed.createComponent(AuditDetailComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should format ISO date correctly', () => {
+    const isoDateString = '2022-01-01T12:00:00Z';
+    const formattedDate = component.formatData(isoDateString);
+
+    expect(formattedDate).toEqual('01 Jan 2022 19:00');
+  });
+
+  it('should return true for valid ISO date string', () => {
+    const isoDateString = '2022-01-01T12:00:00Z';
+    const isIsoDate = component.isIsoDateString(isoDateString);
+
+    expect(isIsoDate).toBe(true);
+  });
+
+  it('should return false for invalid ISO date string', () => {
+    const nonIsoDateString = 'not-an-iso-date';
+    const isIsoDate = component.isIsoDateString(nonIsoDateString);
+
+    expect(isIsoDate).toBe(false);
+  });
+});

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

@@ -0,0 +1,141 @@
+import { Component, OnDestroy } from '@angular/core';
+import { formatDate } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { IonicModule, NavController } from '@ionic/angular';
+import { GridApi, GridReadyEvent } from '@ag-grid-community/core';
+import { AuditTrail } from './../../../../graphql/generated';
+import { AuditDetailForm } from '../types/audit-detail-form.type';
+import { GridConfig } from '../../grids/interfaces/grid-config.interface';
+import { AuditService } from '../service/audit.service';
+import { FormInputComponent } from '../../forms/input/form-input.component';
+import { FormTextareaComponent } from '../../forms/textarea/form-textarea.component';
+import { GridPaginationComponent } from '../../grids/grid-pagination/grid-pagination.component';
+import { TabContentComponent, TabGroupComponent } from '../../tabs';
+
+@Component({
+  standalone: true,
+  selector: 'up-audit-detail',
+  styleUrl: './audit-detail.component.scss',
+  templateUrl: './audit-detail.component.html',
+  imports: [
+    IonicModule,
+    TabGroupComponent,
+    TabContentComponent,
+    GridPaginationComponent,
+    FormInputComponent,
+    FormTextareaComponent,
+    ReactiveFormsModule
+  ]
+})
+export class AuditDetailComponent implements OnDestroy {
+
+  public readonly gridConfig: GridConfig = {
+    useTotalRecord: false,
+    colDefs: [
+      { headerName: 'Attribute Name', field: 'attribute', sort: 'asc' },
+      { headerName: 'Old Value', field: 'oldData' },
+      { headerName: 'New Value', field: 'newData' }
+    ]
+  };
+  public readonly form: FormGroup<AuditDetailForm> = this.fb.group<AuditDetailForm>({
+    guid: new FormControl({ value: null, disabled: true}),
+    action: new FormControl({ value: null, disabled: true}),
+    description: new FormControl({ value: null, disabled: true}),
+    userName: new FormControl({ value: null, disabled: true}),
+    sourceIp: new FormControl({ value: null, disabled: true}),
+    createdAt: new FormControl({ value: null, disabled: true}),
+    msSource: new FormControl({ value: null, disabled: true}),
+    sourcePlatform: new FormControl({ value: null, disabled: true}),
+    function: new FormControl({ value: null, disabled: true}),
+  });
+  public data!: AuditTrail;
+  public isLoading: boolean = true;
+  protected guid: string = '';
+  protected gridApi!: GridApi;
+  protected sub?: Subscription;
+
+  constructor(
+    protected readonly fb: FormBuilder,
+    protected readonly service: AuditService,
+    protected readonly route: ActivatedRoute,
+    protected readonly navCtrl: NavController
+  ) { }
+
+  public ngOnDestroy(): void{
+    this.sub?.unsubscribe();
+  }
+
+  public setGridApi({ api }: GridReadyEvent): void{
+    this.gridApi = api;
+    this.getData();
+  }
+
+  public isIsoDateString(str: string): boolean{
+    const regex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{1,9})?Z$/;
+    return regex.test(str);
+  }
+
+  public formatData(value: any): any{
+    if (value === null) return value;
+    if (typeof value === 'object') return JSON.stringify(value);
+    if (this.isIsoDateString(value)) return formatDate(value, 'dd MMM yyyy HH:mm', 'en-US');
+    return value;
+  }
+
+  public getData(): void{
+    const newGuid = this.route.children[0].snapshot.params['audit'];
+    if (!newGuid || this.guid === newGuid) return;
+
+    this.sub?.unsubscribe();
+    this.gridApi?.showLoadingOverlay();
+
+    this.guid = newGuid;
+    this.isLoading = true;
+    this.sub = this.service.query({ guid: this.guid }, 'data tags { tagKey tagValue }').subscribe({
+      next: ({ data: { auditMsAuditTrail: data }}) => {
+        this.gridApi?.hideOverlay();
+
+        if (data.length !== 1) {
+          this.navCtrl.back();
+          return;
+        }
+
+        const { guid, action, description, function: func, msSource, sourceIp, createdAt } = data[0];
+        this.form.patchValue({
+          guid,
+          function: func, 
+          msSource, sourceIp,
+          action, description,
+          userName: data[0].user?.name,
+          sourcePlatform: data[0].user?.sourcePlatform,
+          createdAt: formatDate(createdAt, 'dd MMM yyyy HH:mm', 'en-US'),
+        });
+
+        this.isLoading = false;
+        this.getChangedData(data[0].data);
+      },
+      error: () => this.navCtrl.back()
+    });
+  }
+
+  protected getChangedData({ oldData, newData }: any): void{
+    if (!newData || Array.isArray(JSON.parse(newData))) {
+      this.gridApi.setGridOption('rowData', []);
+      return;
+    }
+
+    const objNewData = JSON.parse(newData);
+    const changedData = Object.entries(oldData? JSON.parse(oldData) : JSON.parse(newData))
+      .filter(([key, oldVal]) => JSON.stringify(oldData? oldVal : null) !== JSON.stringify(objNewData[key]) && !key.match(/update|created/))
+      .map(([key, oldVal]) => ({
+        attribute: key,
+        oldData: oldData? this.formatData(oldVal) : null,
+        newData: this.formatData(objNewData[key])
+      })
+    );
+
+    this.gridApi.setGridOption('rowData', changedData);
+  }
+}

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

@@ -0,0 +1,126 @@
+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 { AuditDetailComponent } from './audit-detail.component';
+import { ColumnHeaderContainerComponent } from '../../containers';
+
+const meta: Meta<AuditDetailComponent> = {
+  title: 'Audit/Detail',
+  tags: [ 'autodocs' ],
+  component: AuditDetailComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom([ 
+          ApolloModule, 
+          IonicModule.forRoot() 
+        ]),
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              paramMap: {
+                get(): string{ return 'audit-detail'; },
+              },
+            },
+          },
+        }
+      ],
+    }),
+    moduleMetadata({
+      imports: [
+        AuditDetailComponent,
+        ColumnHeaderContainerComponent
+      ]
+    })
+  ],
+  argTypes: {
+    data: {
+      defaultValue: undefined,
+      description: 'Audit Trail Data: An array of data representing the audit trail information.',
+      control: {
+        type: 'object'
+      }
+    },
+    gridConfig: {
+      defaultValue: undefined,
+      description: 'Configuration options for the AG-Grid component used to display changed attributes.',
+      control: {
+        type: 'object'
+      }
+    },
+    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'
+      },
+    },
+    form: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    getData: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    ngOnDestroy: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    setGridApi: {
+      table: { disable: true },
+      control: { disable: true }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<AuditDetailComponent>;
+
+export const Default: Story = {
+  args: {
+    gridConfig: {
+      useTotalRecord: false,
+      colDefs: [
+        { headerName: 'Attribute Name', field: 'attribute', sort: 'asc' },
+        { headerName: 'Old Value', field: 'oldData' },
+        { headerName: 'New Value', field: 'newData' }
+      ]
+    },
+    isLoading: false
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <up-column-header-container header="Audit Detail" class="bg-white">
+        <up-audit-detail />
+      </up-column-header-container>
+    `
+  })
+};
+
+export const Loading: Story = {
+  args: {
+    gridConfig: {
+      useTotalRecord: false,
+      colDefs: [
+        { headerName: 'Attribute Name', field: 'attribute', sort: 'asc' },
+        { headerName: 'Old Value', field: 'oldData' },
+        { headerName: 'New Value', field: 'newData' }
+      ]
+    },
+    isLoading: true
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <up-column-header-container header="Audit Detail" class="bg-white">
+        <up-audit-detail />
+      </up-column-header-container>
+    `
+  })
+};

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

@@ -0,0 +1,5 @@
+<div class="d-flex justify-content-end px-4 pb-4 flex-shrink-0">
+    <up-filter class="w-100" id="audit-filter" placeholder="Type to search" [config]="filterConfig" (onSearch)="search($event);" />
+</div>
+          
+<up-pagination-grid id="grid-audit" class="flex-grow-1" [config]="gridConfig" (onGridReady)="setGridApi($event)" (onRowClick)="rowClicked($event)" />

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

@@ -0,0 +1,85 @@
+import { Attribute, Component, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
+import { formatDate } from '@angular/common';
+import { Router } from '@angular/router';
+import { map, of } from 'rxjs';
+import { GridApi, GridReadyEvent } from '@ag-grid-community/core';
+import { AuditTagEnum, AuditTrail, AuditTrailCriteria } 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 { AuditService } from '../service/audit.service';
+import { FilterComponent } from '../../filter';
+import { GridPaginationComponent } from '../../grids/grid-pagination/grid-pagination.component';
+
+@Component({
+  standalone: true,
+  selector: 'up-audit-list',
+  templateUrl: './audit-list.component.html',
+  styleUrls: ['./audit-list.component.scss'],
+  host: {
+    class: 'd-flex flex-column h-100'
+  },
+  imports: [
+    FilterComponent,
+    GridPaginationComponent
+  ]
+})
+export class AuditListComponent implements OnChanges {
+
+  @Input({ required: true }) public relatedEntities!: string[];
+  @Input() public tagKeys!: AuditTagEnum[];
+  @ViewChild(GridPaginationComponent) protected gridComponent!: GridPaginationComponent;
+  public readonly filterConfig: FilterConfig = { mode: 'simple', fields: [{ key: 'description', label: '', type: 'text' }] };
+  public readonly gridConfig: GridConfig = {
+    useTotalRecord: false,
+    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') => {
+      if (!this.criteria.tagValues) return of({ data: [] });
+
+      this.criteria.page = page;
+      this.criteria.sortBy = sortBy;
+      this.criteria.pageSize = pageSize;
+      this.criteria.sortDirection = dir;
+      
+      return this.service.query(this.criteria).pipe(
+        map(({ data: { auditMsAuditTrail: data }}) => ({ data }))
+      );
+    },
+  };
+  protected readonly criteria: AuditTrailCriteria = { sortBy: 'createdAt', sortDirection: 'desc', page: 0, pageSize: 50 };
+  protected gridApi?: GridApi;
+
+  constructor(
+    @Attribute('id') public id: string,
+    @Attribute('mainUrl') protected url: string,
+    protected readonly router: Router,
+    protected readonly service: AuditService
+  ) { }
+
+  public ngOnChanges(e: SimpleChanges): void{
+    if (e['tagKeys']) this.criteria.tagKeys = this.tagKeys;
+    if (e['relatedEntities']) this.criteria.relatedEntities = this.relatedEntities;
+  }
+
+  public setGridApi({ api }: GridReadyEvent): void{ this.gridApi = api; }
+
+  public rowClicked({ guid }: AuditTrail): void{
+    this.router.navigate([ `${ this.url }/${ this.criteria.tagValues![0] }/audit/${ guid }` ], { preserveFragment: true });
+  }
+
+  public search({ data }: FilterSearchEvent): void{
+    this.criteria.description = data?.description;
+    this.gridComponent.reset();
+  }
+
+  public setGuid(guid: string): void{
+    this.criteria.description = null;
+    this.criteria.tagValues = [ guid ];
+    this.gridComponent.reset(); 
+  }
+}