#bttm header | Explore Tumblr Posts and Blogs

angking · 2 years

Text

Common Mat Table

table { width: 100%; }

.textWrap { word-break: break-word; }

.table-cell-padding { padding: 5px; }

html

table mat-table id="mt" [dataSource]="mtDataSource" matSort class="table table-striped table-hover force-style-gcweb-4-0-29" [attr.aria-label]="ariaLabel"

ng-container *ngFor="let col of columnDefinitionList" [matColumnDef]="col.matColumnDef" th mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="col.cssClass" span translate{{col.headerText}}/span /th td mat-cell *matCellDef="let element" [ngClass]="col.cssClass"{{element[col.matColumnDef]}}/td /ng-container tr mat-header-row *matHeaderRowDef="columnsToDisplay"/tr tr tabindex="0" mat-row *matRowDef="let row; columns: columnsToDisplay" (click)="onDataRowClick(row)"/tr tr class="mat-row" *cdkNoDataRow td class="mat-cell" colspan="9999"{{noRecordsFoundMessage}}/td /tr /table

import { CcColumnDef } from './../../model/common-components/cc-column-def'; import {Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { MatSort } from '@angular/material/sort'; import { MatTableDataSource} from '@angular/material/table';

@Component({ selector: 'app-table', templateUrl: './table.component.html', styleUrls: [''] }) export class TableComponent implements OnInit, AfterViewInit {

mtDataSource = new MatTableDataSourceany(); @ViewChild(MatSort) matSort: MatSort;

private _dataSource: Arrayany = []; get dataSource():Arrayany{ return this._dataSource; } @Input() set dataSource(value: Arrayany){ this._dataSource=value; this.mtDataSource.data=this.dataSource; }

private _columnsToDisplay: string[]; get columnsToDisplay():string[]{ return this._columnsToDisplay; } @Input() set columnsToDisplay(value:string[]){ this._columnsToDisplay=value; }

private _columnDefinitionList: ArrayCcColumnDef; get columnDefinitionList():ArrayCcColumnDef{ return this._columnDefinitionList; } @Input() set columnDefinitionList(value:ArrayCcColumnDef){ this._columnDefinitionList=value; }

@Input() ariaLabel:string; @Input() noRecordsFoundMessage:string;

@Output() tableRowClick: EventEmitterany = new EventEmitterany()

constructor() { } ngAfterViewInit(): void { this.mtDataSource.sort=this.matSort; }

ngOnInit(): void { }

onDataRowClick(data:Event){ this.tableRowClick.next(data); } }

Client

div *ngIf=" caseDetail && caseDetail.phase && participantSessionStorage && filteredCaseTypes && filteredCaseTypes.length 0 " class="container"

h1 tabindex="0" {{ participantSessionStorage?.participantName }} - {{ participantSessionStorage?.displayedCaseId }} /h1 div class="panel panel-default force-style-gcweb-4-0-29" header class="panel-heading" h6 class="panel-title" div *ngIf="caseDetail" span tabindex="0" {{ "phase" | translate }}: {{ caseDetail.phase | titlecase }}/span span tabindex="0" *ngIf="caseDetail.rss" class="pull-right" {{ "assignedRss" | translate }}: {{ caseDetail.rss.firstName }} {{ caseDetail.rss.lastName }}/span /div /h6 /header div class="panel-body" div class="wb-frmvld mrgn-tp-md" form-error [validateForm]="casePageForm" [appFormErrors]="appFormErrors" /form-error form #casePageForm="ngForm" class="form-inline" div class="form-group input-group col-md-9 mrgn-bttm-md" label tabindex="0" for="caseType" class="required" span class="field-name"{{ "caseType" | translate }}/span strong class="required" ({{ "required" | translate }})/strong /label select ngModel #caseType="ngModel" class="form-control" id="caseType" name="caseType" autocomplete="honorific-prefix" required="required" (change)="onCaseTypeSelection($event)" option value=""Select/option option class="case-options" *ngFor="let caseType of filteredCaseTypes" [value]="getCaseType(caseType)" [selected]="selectedCase.displayText === caseType.displayText" {{ caseType.displayText }} /option /select /div div class="table-responsive table table-striped table-hover force-style-gcweb-4-0-29" ng-container *ngIf="selectedCase?.value !== ''" app-simple-table [columnDefinitionList]="columnDefinitions" [columnsToDisplay]="displayedColumns" [dataSource]="mappedDS" [ariaLabel]="ariaLabelInfo" [noRecordsFoundMessage]="noRecordsFoundMessage" (tableRowClick)="onTableRowClick($event)" /app-simple-table /ng-container !-- Need to remove this if condition once the pagination is done for all case types (BE)-- app-pagination *ngIf="selectedCase?.value === 'caseNotes'|| selectedCase?.value === 'assessments' || selectedCase?.value === 'serviceRequests'" [index]="page" [data]="mappedDS" [pageSize]="pageSize" [totalCount]="totalCount" [rulerSize]="ruleSize" (pageChange)="paginate($event)" /app-pagination /div div *ngIf="selectedCase?.value === CASE_NOTES" class="input-group col-md-12 caseNotesTextSection" label for="caseNotesText" class="required" span class="field-name" {{ "addNote" | translate }} /span strong class="required"(required)/strong/label textarea title="{{ 'addCaseNoteHere' | translate }}" id="caseNotesText" name="caseNotesText" (input)="onCaseNotesInput($event)" #caseNotesText="ngModel" [(ngModel)]="caseNotes" required [ng-maxlength]="maxCaseNoteLength" [maxlength]="maxCaseNoteLength + 1" placeholder="{{ 'addCaseNoteHere' | translate }}" class="form-control case-note-text-area" [class]="{ 'case-note-text-area-error': !caseNotesText.valid && caseNotesText.dirty }" /textarea /div div span{{ caseNotes ? caseNotes.length + "/" + maxCaseNoteLength : "" }}/span /div /form /div /div footer *ngIf="selectedCase?.value === CASE_NOTES" class="panel-footer" a href="#" (click)="openAddNoteConfirmation($event)" class="wb-lbx btn btn-primary" {{ "addNote" | translate }}/a /footer

/div /div

import { Sort } from '@angular/material/sort'; import { AppFormError } from './../../common-components/app-form-error/model/app-form-error'; import { ModalDialogComponent, ModalActionButton, ModalActionTypeEnum, ModalAlertCssEnum } from 'src/app/common-components' import { ActivatedRoute, Router } from '@angular/router'; import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";

// Note : Do not change the order of the contents of JSON file "CaseTypesJson" below import CaseTypesJson from "../../../assets/dropdowns/case-types.json"; import { MatDialog } from "@angular/material/dialog"; import { ModalDialogConfig } from "src/app/common-components/modal-dialog/modal-dialog-config"; import { Subject, takeUntil } from "rxjs"; import { NgForm, FormGroup } from "@angular/forms"; import { CaseTypesRequest, CaseType, CcColumnDef, } from "src/app/model"; @Component({ selector: "app-case", templateUrl: "./case.component.html", styleUrls: [ "./case.component.css", ], })

export class CaseComponent implements OnInit, OnDestroy { noRecordsFoundMessage = ""; ariaLabelInfo: string; CASE_NOTES = CaseTypesJson[11].value; // Case notes dropdown value maxCaseNoteLength = AppSettings.CASE_NOTE_MAX_LENGTH; caseNotes = ""; caseDetail: CaseDetail; //breadcrumbs displayCaseId: string = ""; participantSessionStorage: ParticipantInfoSessionStorage; // Data for "Drop down" originalCaseTypes: Array = CaseTypesJson; filteredCaseTypes: Array = []; selectedCase: CaseType = ModelUtil.getDefaultModelForCaseType(); columnDefinitions: Array = [];

currentSort: Sort; pageSize: number = AppSettings.DEFAULT_PAGE_SIZE; page = 1; pageIndex: number = 1; ruleSize: number = AppSettings.RULE_SIZE; totalCount: number = 0; paginationDetails = { PageNumber: AppSettings.DEFAULT_PAGE_NUMBER, PageSize: AppSettings.DEFAULT_PAGE_SIZE, };

//#region "Object Properties" displayedColumns: string[]; apiOriginalData: Array; mappedDS: Array = []; //#endregion "Object Properties"

//#region App form erros get appFormErrors(): AppFormError[] { return this.getErrorMessages(); } //#endregion

private readonly _destroying$ = new Subject();

@ViewChild("caseNotesText") caseNotesText: NgForm; @ViewChild("casePageForm") casePageForm: FormGroup;

private roles: string[] = [];

constructor( private router: Router, private route: ActivatedRoute, ) { }

ngOnInit(): void { this.subscribeToLanguageChange(); this.setUpCaseTypes();// get participant session storage this.participantSessionStorage = JSON.parse( this.sessionStorageSrv.getItem( SessionStorageKeys.PARTICIPANT_INFO_SESSION_STORAGE ) ); if (this.participantSessionStorage) { //setting a value for breadcrumbs label this.displayCaseId = this.participantSessionStorage.displayedCaseId; this.breadcrumbService.set("@displayCaseId", this.displayCaseId); // get case detail this.caseService .getCaseDetail(this.participantSessionStorage.caseId) .subscribe({ next: (res) => { if (res) { this.caseDetail = res; } }, error: (error: Error) => { //TODO : Error Handling console.log("test", error); }, }); }

}

ngOnDestroy(): void { this._destroying$.next(undefined); this._destroying$.complete(); }

onCaseTypeSelection(event: Event) { let selectedStringValue = (event.target as HTMLSelectElement).value;if (selectedStringValue === "") { this.resetCaseTypeControl(); } else { this.selectedCase = JSON.parse(selectedStringValue); this.caseNotes = ""; this.loadDataWithSelectedCaseType(); }

}

getCaseType(type: CaseType) { return JSON.stringify(type); }

loadDataWithSelectedCaseType() { switch (this.selectedCase.value) { // "value": "claims" case CaseTypesJson[0].value: { this.setupModelsForClaims(); break; } // "value": "assessments" case CaseTypesJson[2].value: { this.setupModelsForAssessments(); break; } // "value": "rehabilitationPlans" case CaseTypesJson[3].value: { this.setupModelsForRehabilitationPlan(); break; } // "value": "vocationalTrainingPlans" case CaseTypesJson[4].value: { this.setupModelsForVocationalTrainingPlan(); break; } // "value": "progressUpdates" case CaseTypesJson[5].value: { this.setupModelsForPrgUpdates(); break; } // "value": "serviceRequests" case CaseTypesJson[7].value: { this.setupModelsForSrvRequests(); break; } // "value": "closureRequests" case CaseTypesJson[8].value: { this.setupModelsForClosureRequests(); break; } // "value": "authorizationTravelRequests" case CaseTypesJson[10].value: { this.setupModelsForAuthTrvRequests(); break; } // "value": "caseNotes" case CaseTypesJson[11].value: { this.setupModelsForCaseNotes(); break; } // "value": "participantExperienceFeedback" case CaseTypesJson[12].value: { this.setupModelsForPartExpFeedback(); break; } // "value": "referralToRSP" case CaseTypesJson[13].value: { this.setupModelsForReferralToRSP(); break; } // TODO : This would need some thought // when "Select" is selected default: { // this.resetCaseTypeControl(); break; } }

}

resetCaseTypeControl() { this.mappedDS = []; this.ariaLabelInfo = ""; this.noRecordsFoundMessage = ""; this.displayedColumns = []; this.selectedCase = ModelUtil.getDefaultModelForCaseType(); this.caseNotes = ""; }

setNoRecordsFoundMessage(mappedDS: Array) { if (mappedDS && mappedDS.length === 0) { this.noRecordsFoundMessage = this.translateFilter.transform("casePage.noDataRow"); } }

setAriaPropertyForCases(displayText: string) { if (displayText) { this.ariaLabelInfo = displayText; } }

setupModelsForAssessments() { this.columnDefinitions = CaseTypeAssessmentUtil.getColumnDefinitionListForAssessments(); if (this.columnDefinitions) { this.displayedColumns = this.columnDefinitions.map((c) => c.columnName); }if (this.displayedColumns && this.displayedColumns.length > 0) { this.mappedDS = []; // TODO: need to remove hardcoded case id, once we are ready to point to real CMS endpoint for assemments this.caseService .getCaseDetailByType( "8709a1d6-d3a6-41b7-615b-08da433495bd", "assessment", this.paginationDetails ) .subscribe({ next: (res: any) => { if (res && res.data && res.data.length > 0) { this.mappedDS = CaseTypeAssessmentUtil.transformDSForAssessment( res.data ); this.pageSize = res.pageSize; this.totalCount = res.totalRecords; this.paginate(this.pageIndex); } this.setNoRecordsFoundMessage(this.mappedDS); this.setAriaPropertyForCases(CaseTypesJson[2].displayText); }, error: (error: Error) => { //TODO : Error Handling console.log("test", error); }, }); }

}

util

import { DateTimeUtil } from 'src/app//utils/datetime-util'; import { CcColumnDef } from 'src/app/model'; export class CaseTypeAssessmentUtil{// TODO: need to remove this once BE integration is done static getData() { return [{ "requestNumber": 'RQ-001', "service": 'IVA', "referralDate": DateTimeUtil.isoToYYYY_MM_DD(new Date()), "reports": 'TBD'},{ "requestNumber": 'RQ-002', "service": 'IVA', "referralDate": DateTimeUtil.isoToYYYY_MM_DD(new Date()), "reports": 'TBD' }]; } static getColumnDefinitionListForAssessments(): Array<CcColumnDef>{ return [ { "cssClass": "widthFlex1", "matColumnDef": "requestNumber", "headerText": "caseTypeAssessmentTable.requestNumber", "columnName": "requestNumber" }, { "cssClass": "widthFlex1", "matColumnDef": "service", "headerText": "caseTypeAssessmentTable.service", "columnName": "service" }, { "cssClass": "widthFlex1", "matColumnDef": "referralDate", "headerText": "caseTypeAssessmentTable.referralDate", "columnName": "referralDate" }, { "cssClass": "widthFlex1", "matColumnDef": "reports", "headerText": "caseTypeAssessmentTable.reports", "columnName": "reports" } ]; } static transformDSForAssessment(apiOriginalData:Array<any>) : Array<any>{ let dataArray:Array<any>=[]; if(apiOriginalData && apiOriginalData.length>0){ dataArray = apiOriginalData.map((row) => { return { "requestNumber": row.requestNumber, "service": row.service, "referralDate": DateTimeUtil.isoToYYYY_MM_DD(new Date(row.referralDate)), "reports": row.reports, "assessmentId": row.assessmentId }; }); } return dataArray; }

}

int

export interface CcColumnDef { cssClass: string; matColumnDef:string; headerText?:string; columnName: string; }

export interface CaseType { displayText: string; value: string; enableOption?:boolean; }

0 notes