Summary Table

Categories Total Count
PII 0
URL 0
DNS 0
EKL 0
IP 0
PORT 0
VsID 0
CF 0
AI 0
VPD 0
PL 0
Other 0

File Content

import { Component, Input } from '@angular/core';
import { GridElement } from '../../models/uiModels';
import * as _ from 'lodash';
import { QueryParams, Problem } from '../../models/patientModels';
import { AppState } from '../../models/state';
import { Store } from '@ngrx/store';
import * as patientActions from '../../actions/patient.action';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ProblemComponent } from '../problem/problem.component';

@Component({
selector: 'app-problem-list',
templateUrl: './problem-list.component.html',
styleUrls: ['./problem-list.component.css']
})
export class ProblemListComponent {

showComments = false;

/**
* local data store for problem data, error info and the datatable to display
*/
_problemList = {
data: [],
err: '',
dataTable: []
};

/**
* input property for current querystring parameters
*/
@Input()
queryParams: QueryParams;

/**
* input property of problem list for display. In format {data: Problem[], err: string }
* @description When input array changes, clear the data table & repopulate
*/
@Input()
set problemList(problemList: {data: Problem[], err: string}) {
this._problemList.data = problemList.data;
this._problemList.err = problemList.err;
this._problemList.dataTable = [];

if (problemList.data) { this.generateDataTable(); }
}

/**
* property defines the data elements, headers & tooltips to display on the grid
*/
dataDef: Array<GridElement> = [
{ header: 'Status ', key: 'status', tooltip: 'The status of this problem, active or inactive' },
{ header: 'Verified', key: 'verified', tooltip: 'This reflects the current condition of this entry, \
unverified, verified or marked as removed from the patient\'s list' },
{ header: 'Immediacy', key: 'immediacy', tooltip: 'This is an indication of how critical a problem \
is; acute, chronic or if no value has been entered – unknown' },
{ header: 'Description / Comments', key: 'description', tooltip: 'A description of the patient\'s problem. \
The display of comments can be turned on or off', altKey: 'comments.text' },
{ header: 'Onset Date', key: 'onsetDate', tooltip: 'This is the approximate date this problem \
appeared, as precisely as known', format: 'date'},
{ header: 'Last Updated Date', key: 'lastUpdatedDate', tooltip: 'This is the last date/time this \
problem was changed', format: 'date'},
{ header: 'Facility',
key: 'facility.stationNumber',
tooltip: 'The station number of the facility at which this problem was originally observed \
and documented',
dataTooltipKey: 'facility.siteName'
}
];

queryBuilderDef: Array<GridElement> = [
{ header: 'Description', key: 'description'},
{ header: 'Comments', key: 'comments.text' }
];

constructor(private _store: Store<AppState>, private modalService: NgbModal) {

// QueryBuilderDef should contain all the columns from the grid definition, but we have to separate out the
// description+comments column into their own fields
this.queryBuilderDef = [..._.filter(this.dataDef, (itm) => itm.key !== 'description'), ...this.queryBuilderDef];

}

/**
* used by template to display dataDef's header text for a field.
*
* @param itm - Field name to get the display text for
*/
displayText(itm: string) {
return _.find(this.dataDef, (elem) => elem.key === itm ).header;
}

/**
* creates local dataTable array from the patient problem data, applying local filters and
* sorting it.
*/
generateDataTable() {

this._problemList.dataTable = [];

// push the data into the data table
this._problemList.data.forEach((itm, idx) => {

let allComments = '';

if (itm.comments) {
itm.comments.forEach((comment) => {
allComments += '<br />' + '&nbsp;&nbsp;&nbsp;&nbsp;' + comment.text;
});
}

this._problemList.dataTable.push({
status: itm.status,
verified: itm.verified,
immediacy: itm.immediacy,
description: (this.showComments && itm.comments) ? itm.description + allComments
: itm.description,
onsetDate: itm.onsetDate,
lastUpdatedDate: itm.lastUpdatedDate,
'facility.stationNumber': itm.facility.stationNumber,
'facility.siteName': itm.facility.siteName,
dataIndex: idx
});
});

}

/**
* Method for displaying detailed Problem record in a modal popup
* @param dataTableRecord the Problem to display
*/
viewDetail(dataTableRecord: any) {
const problemModal = this.modalService.open(ProblemComponent, {size: 'lg', windowClass: 'record-popup'});
problemModal.componentInstance.data = {...this._problemList.data[dataTableRecord.dataIndex]};
}

/**
* Method for displaying Comments for the Problem records
*/
viewComments() {
this.showComments = !this.showComments;
this.generateDataTable();
}

/**
* Paging events bubble up from grid component. updating the store here triggers a requery
* @param action string in [prev, next, number]
*/
changePage(action: any) {

const newParams = JSON.parse(JSON.stringify(this.queryParams));
switch (action) {
case 'next':
newParams.page++;
break;
case 'prev':
if (newParams.page > 1) { newParams.page--; }
break;
default:
if (Number.isInteger(action)) { newParams.page = action; }
}

this._store.dispatch(new patientActions.SetQueryParameters({element: 'problemList', params: JSON.parse(JSON.stringify(newParams)) }));

}

sync(params: QueryParams) {

const newParams = JSON.parse(JSON.stringify(this.queryParams));
newParams.filter = JSON.parse(JSON.stringify(params.filter));
newParams.sort = JSON.parse(JSON.stringify(params.sort));
newParams.size = params.size;
newParams.page = 1;
this._store.dispatch(new patientActions.SetQueryParameters({element: 'problemList', params: JSON.parse(JSON.stringify(newParams)) }));

}

resetAndSync() {
this._store.dispatch(new patientActions.ResetQueryParameters({element: 'problemList'}));
}

}