Data Controller Client
  1. Components
  2. ApproveComponent
src/app/review/approve/approve.component.ts

Implements

OnInit

Metadata

encapsulation ViewEncapsulation.None
host {
}
selector app-approve
styleUrls ./approve.component.scss
templateUrl ./approve.component.html

Relationships

Used by

Depends on

Index

Properties
Methods

Constructor

constructor(sasStoreService: SasStoreService, eventService: EventService, route: Router, sasService: SasService, cdr: ChangeDetectorRef)
Defined in src/app/review/approve/approve.component.ts:68
Parameters :
Name Type Optional
sasStoreService SasStoreService No
eventService EventService No
route Router No
sasService SasService No
cdr ChangeDetectorRef No

Methods

Public download
download(id: any)
Defined in src/app/review/approve/approve.component.ts:153
Parameters :
Name Type Optional
id any No
Returns : void
Private Async fetchApprovals
fetchApprovals()
Defined in src/app/review/approve/approve.component.ts:124
Returns : any
Public getClicked
getClicked(ind: any)
Defined in src/app/review/approve/approve.component.ts:82
Parameters :
Name Type Optional
ind any No
Returns : void
Public getTable
getTable(table_id: any)
Defined in src/app/review/approve/approve.component.ts:78
Parameters :
Name Type Optional
table_id any No
Returns : void
Async ngOnInit
ngOnInit()
Defined in src/app/review/approve/approve.component.ts:120
Returns : any
Public Async rejecting
rejecting(ind: any)
Defined in src/app/review/approve/approve.component.ts:91
Parameters :
Name Type Optional
ind any No
Returns : any

Properties

Public approveList
Type : Array<ApproveData> | undefined
Defined in src/app/review/approve/approve.component.ts:58
Public baseTableFilter
Type : unknown
Default value : new BaseTableFilter()
Defined in src/app/review/approve/approve.component.ts:66
Public itemsNum
Type : number
Default value : 10
Defined in src/app/review/approve/approve.component.ts:62
Public loaded
Type : boolean
Default value : false
Defined in src/app/review/approve/approve.component.ts:61
Public remained
Type : any
Defined in src/app/review/approve/approve.component.ts:59
Public submitReasonFilter
Type : unknown
Default value : new SubmitReasonFilter()
Defined in src/app/review/approve/approve.component.ts:68
Public submittedFilter
Type : unknown
Default value : new SubmittedFilter()
Defined in src/app/review/approve/approve.component.ts:67
Public submitterFilter
Type : unknown
Default value : new SubmitterFilter()
Defined in src/app/review/approve/approve.component.ts:65
Public tableId
Type : any
Defined in src/app/review/approve/approve.component.ts:60
 
import {
  Component,
  OnInit,
  ChangeDetectorRef,
  ViewEncapsulation
} from '@angular/core'
import { SasStoreService } from '../../services/sas-store.service'
import { Router } from '@angular/router'
import { SasService } from '../../services/sas.service'
import { EventService } from '../../services/event.service'
import { ClrDatagridStringFilterInterface } from '@clr/angular'

interface ApproveData {
  tableId: string
  submitter: string
  baseTable: string
  submitted: string
  submitReason: string
  approver: string
  rejectLoading?: boolean
}

class SubmitterFilter implements ClrDatagridStringFilterInterface<ApproveData> {
  accepts(data: ApproveData, search: string): boolean {
    return data.submitter.toLowerCase().indexOf(search.toLowerCase()) >= 0
  }
}

class BaseTableFilter implements ClrDatagridStringFilterInterface<ApproveData> {
  accepts(data: ApproveData, search: string): boolean {
    return data.baseTable.toLowerCase().indexOf(search.toLowerCase()) >= 0
  }
}

class SubmittedFilter implements ClrDatagridStringFilterInterface<ApproveData> {
  accepts(data: ApproveData, search: string): boolean {
    return data.submitted.toLowerCase().indexOf(search.toLowerCase()) >= 0
  }
}

class SubmitReasonFilter implements ClrDatagridStringFilterInterface<ApproveData> {
  accepts(data: ApproveData, search: string): boolean {
    return data.submitReason.toLowerCase().indexOf(search.toLowerCase()) >= 0
  }
}

@Component({
  selector: 'app-approve',
  templateUrl: './approve.component.html',
  styleUrls: ['./approve.component.scss'],
  host: {
    class: 'content-container'
  },
  encapsulation: ViewEncapsulation.None,
  standalone: false
})
export class ApproveComponent implements OnInit {
  public approveList: Array<ApproveData> | undefined
  public remained: any
  public tableId: any
  public loaded: boolean = false
  public itemsNum: number = 10

  // Filter instances for datagrid accessibility
  public submitterFilter = new SubmitterFilter()
  public baseTableFilter = new BaseTableFilter()
  public submittedFilter = new SubmittedFilter()
  public submitReasonFilter = new SubmitReasonFilter()

  constructor(
    private sasStoreService: SasStoreService,
    private eventService: EventService,
    private route: Router,
    private sasService: SasService,
    private cdr: ChangeDetectorRef
  ) {}

  public getTable(table_id: any) {
    this.route.navigateByUrl('/stage/' + table_id)
  }

  public getClicked(ind: any) {
    if (this.approveList !== undefined) {
      this.tableId = this.approveList[ind].tableId
      this.route.navigateByUrl(
        'review/approveDet/' + this.approveList[ind].tableId
      )
    }
  }

  public async rejecting(ind: any) {
    if (this.approveList !== undefined) {
      this.tableId = this.approveList[ind].tableId
    }
    let rejParams = {
      STP_ACTION: 'REJECT_TABLE',
      TABLE: this.tableId,
      STP_REASON: 'quick rejection'
    }
    try {
      ;(this.approveList || [])[ind].rejectLoading = true

      let res = await this.sasStoreService.rejecting(
        rejParams,
        'BrowserParams',
        'approvers/rejection'
      )

      if (res.fromsas[0].RESPONSE.includes('SUCCESS')) {
        ;(this.approveList || [])[ind].rejectLoading = false
        this.approveList?.splice(ind, 1)
        this.remained--
        this.cdr.detectChanges()
      }
    } catch (error) {
      this.eventService.catchResponseError('approvers/rejection', error)
    }
  }

  async ngOnInit() {
    this.fetchApprovals()
  }

  private async fetchApprovals() {
    this.itemsNum = 10
    let myJsParams: any = {}
    myJsParams.STP_ACTION = 'OPEN_APPROVALS'

    try {
      let res = await this.sasStoreService.getApprovals(
        myJsParams,
        'BrowserParams',
        'approvers/getapprovals'
      )

      this.remained = res.fromsas.length
      let approveList: ApproveData[] = res.fromsas.map(function (item: any) {
        return {
          tableId: item.TABLE_ID,
          submitter: item.SUBMITTED_BY_NM,
          submitted: item.SUBMITTED_ON_DTTM,
          baseTable: item.BASE_TABLE,
          submitReason: item.SUBMITTED_REASON_TXT
        }
      })
      this.approveList = approveList
      this.loaded = true
    } catch (error) {
      this.eventService.catchResponseError('approvers/getapprovals', error)
    }
  }

  public download(id: any) {
    let sasjsConfig = this.sasService.getSasjsConfig()
    let storage = sasjsConfig.serverUrl
    let metaData = sasjsConfig.appLoc
    let path = this.sasService.getExecutionPath()
    let downUrl =
      storage +
      path +
      '/?_program=' +
      metaData +
      '/services/auditors/getauditfile&table=' +
      id
    window.open(downUrl)
  }
}

<div class="content-area">
  <div class="card">
    @if (remained === 0) {
      <div class="d-flex justify-content-center">
        <div class="card-block noapprovals-info-wrapper">
          <clr-icon
            shape="warning-standard"
            size="60"
            class="is-info icon-dc-fill"
          ></clr-icon>
          <h3 class="text-center color-gray">
            There are no approvals remaining
          </h3>
        </div>
      </div>
    }
    <div class="card-header" [ngClass]="{ noBorder: !loaded }">
      @if (loaded && remained !== 0) {
        <h3 class="center clr-col-md-12 text-center">REVIEW</h3>
      }
      @if (loaded && remained !== 0) {
        <p class="text-center font-weight-700 color-dark-gray">
          You have <span>{{ remained }} </span>approvals remaining
        </p>
      }
    </div>
    @if (!loaded) {
      <div class="approvals-list-wrapper">
        @if (!loaded) {
          <span class="spinner"> Loading... </span>
        }
        @if (!loaded) {
          <div>
            <h3>Loading approvals list</h3>
          </div>
        }
      </div>
    }
    <div class="clr-col-md-12" ng-if="loaded">
      @if (approveList && remained !== 0) {
        <div>
          <clr-datagrid class="datagrid-compact datagrid-custom-footer">
            <clr-dg-column [clrDgField]="'submitter'">
              SUBMITTER
              <clr-dg-string-filter
                [clrDgStringFilter]="submitterFilter"
                aria-label="Filter submitter"
              ></clr-dg-string-filter>
            </clr-dg-column>
            <clr-dg-column [clrDgField]="'baseTable'">
              BASE TABLE
              <clr-dg-string-filter
                [clrDgStringFilter]="baseTableFilter"
                aria-label="Filter base table"
              ></clr-dg-string-filter>
            </clr-dg-column>
            <clr-dg-column [clrDgField]="'submitted'">
              SUBMITTED
              <clr-dg-string-filter
                [clrDgStringFilter]="submittedFilter"
                aria-label="Filter submitted date"
              ></clr-dg-string-filter>
            </clr-dg-column>
            <clr-dg-column [clrDgField]="'submitReason'">
              SUBMIT REASON
              <clr-dg-string-filter
                [clrDgStringFilter]="submitReasonFilter"
                aria-label="Filter submit reason"
              ></clr-dg-string-filter>
            </clr-dg-column>
            <clr-dg-column>ACTION</clr-dg-column>
            <clr-dg-column>DOWNLOAD</clr-dg-column>
            <clr-dg-row
              *clrDgItems="let approveItem of approveList; let i = index"
            >
              <clr-dg-cell>{{ approveItem.submitter }}</clr-dg-cell>
              <clr-dg-cell>{{ approveItem.baseTable }}</clr-dg-cell>
              <clr-dg-cell>{{ approveItem.submitted }}</clr-dg-cell>
              <clr-dg-cell>{{ approveItem.submitReason }}</clr-dg-cell>
              <clr-dg-cell>
                <div
                  class="clr-row d-flex justify-content-around"
                  role="toolbar"
                  aria-label="Table actions"
                >
                  <a
                    class="column-center links tooltip tooltip-md tooltip-bottom-left color-green"
                    (click)="getClicked(i)"
                  >
                    <clr-icon
                      shape="check"
                      size="24"
                      aria-hidden="true"
                    ></clr-icon>
                    <span class="tooltip-content"
                      >Go to review page screen</span
                    >
                  </a>
                  <a
                    class="column-center links tooltip tooltip-md tooltip-bottom-left color-red"
                    (click)="!approveItem.rejectLoading ? rejecting(i) : ''"
                  >
                    @if (!approveItem.rejectLoading) {
                      <clr-icon
                        shape="ban"
                        size="22"
                        aria-hidden="true"
                      ></clr-icon>
                    }
                    @if (approveItem.rejectLoading) {
                      <clr-spinner
                        [clrSmall]="true"
                        aria-hidden="true"
                      ></clr-spinner>
                    }
                    <span class="tooltip-content">Reject</span>
                  </a>
                  <a
                    class="column-center links tooltip tooltip-md tooltip-bottom-left color-blue"
                    (click)="getTable(approveItem.tableId)"
                  >
                    <clr-icon
                      shape="code"
                      size="28"
                      aria-hidden="true"
                    ></clr-icon>
                    <span class="tooltip-content"
                      >Go to staged data screen</span
                    >
                  </a>
                </div>
              </clr-dg-cell>
              <clr-dg-cell class="p-0 d-flex justify-content-center">
                <button
                  class="btn btn-success"
                  aria-label="Download audit file"
                  [id]="approveItem.tableId"
                  (click)="
                    download(approveItem.tableId); $event.stopPropagation()
                  "
                >
                  <clr-icon shape="download"></clr-icon>
                </button>
              </clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
              <clr-dg-pagination #pagination [clrDgPageSize]="10">
                <clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]"
                  >Items per page</clr-dg-page-size
                >
                {{ pagination.firstItem + 1 }} -
                {{ pagination.lastItem + 1 }} of
                {{ pagination.totalItems }} approvals
              </clr-dg-pagination>
            </clr-dg-footer>
          </clr-datagrid>
        </div>
      }
    </div>
  </div>
</div>

./approve.component.scss

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""