Skip to content

Commit

Permalink
Merge pull request #118 from udsm-dhis2-lab/feature/standardise-iadap…
Browse files Browse the repository at this point in the history 
…ter-applications

feat: Add support to add msd codes in mappings
  • Loading branch information
@yuzalsif
yuzalsif authored Dec 15, 2024
2 parents f38bb42 + 70bd442 commit fcf5260
Show file tree
Hide file tree
Showing 7 changed files with 211 additions and 73 deletions.
135 changes: 81 additions & 54 deletions ...action/src/app/modules/mappings/containers/dataset-mapping/dataset-mapping.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,19 +49,32 @@
></custom-select>
</div>
<div nz-col nzSpan="12">
<custom-select
[placeHolder]="placeHolderForIcdCodeSelect"
[isMultiple]="false"
[isLoading]="isLoadingIcdCodes"
[optionList]="icdCodeOptionList"
(onSearchChange)="onSearchIcdCode($event)"
(onSelectChange)="onIcdCodeSelect($event)"
></custom-select>
<nz-select
style="width: 100%"
[ngModel]="selectedDataTemplateBlock"
(ngModelChange)="onDataTemplateBlockSelect($event)"
>
<ng-container *ngFor="let option of dataTemplatesBlocks">
<nz-option
[nzValue]="option.key"
[nzLabel]="option.name"
></nz-option>
</ng-container>
<nz-option
[nzValue]="selectedDataTemplateBlock"
[nzLabel]="
selectedDataTemplateBlock !== ''
? selectedDataTemplateBlock
: 'Template blocks'
"
nzHide
></nz-option>
</nz-select>
</div>
</div>

<div nz-row style="margin-bottom: 16px">
<div nz-col nzSpan="24">
<div nzGutter="16" nz-row style="margin-bottom: 16px">
<div nz-col nzSpan="12">
<custom-select
[placeHolder]="placeHolderForLoincCodeSelectObs"
[isMultiple]="false"
Expand All @@ -71,25 +84,36 @@
(onSelectChange)="onLoincCodeSelectObs($event)"
></custom-select>
</div>
<div nz-col nzSpan="12">
<custom-select
[placeHolder]="placeHolderForLoincCodeSelect"
[isMultiple]="false"
[isLoading]="isLoadingLoincCodes"
[optionList]="loincCodeOptionList"
(onSearchChange)="onSearchLoincCode($event)"
(onSelectChange)="onLoincCodeSelect($event)"
></custom-select>
</div>
</div>

<!-- list of selected icd codes && loinc observation codes -->
<!-- list of selected loinc codes && loinc observation codes -->
<div
*ngIf="
selectedICdCodes.length > 0 || selectedLoincCodesObs.length > 0
selectedLoincCodes.length > 0 ||
selectedLoincCodesObs.length > 0
"
nz-row
nzGutter="16"
style="margin-top: 16px; margin-bottom: 16px"
>
<div *ngIf="selectedICdCodes.length > 0" nz-col nzSpan="12">
<div *ngIf="selectedLoincCodes.length > 0" nz-col nzSpan="12">
Loinc codes (Order)
<nz-card style="width: 100%">
<p>ICD Codes</p>
@for (icdCode of selectedICdCodes; track $index) {
@for (loincCode of selectedLoincCodes; track $index) {
<nz-tag
nzMode="closeable"
(nzOnClose)="onRemoveIcdCode(icdCode)"
>{{ icdCode.name }}</nz-tag
(nzOnClose)="onRemoveLoincCode(loincCode)"
>{{ loincCode.name }}</nz-tag
>
}
</nz-card>
Expand All @@ -111,54 +135,57 @@
<div nz-row [nzGutter]="16" style="margin-bottom: 16px">
<div nz-col nzSpan="12">
<custom-select
[placeHolder]="placeHolderForLoincCodeSelect"
[placeHolder]="placeHolderForMsdCodes"
[isMultiple]="false"
[isLoading]="isLoadingLoincCodes"
[optionList]="loincCodeOptionList"
(onSearchChange)="onSearchLoincCode($event)"
(onSelectChange)="onLoincCodeSelect($event)"
[isLoading]="isLoadingMsdCodes"
[optionList]="msdCodesOptionList"
(onSearchChange)="onSearchMsdCode($event)"
(onSelectChange)="onMsdCodeSelect($event)"
></custom-select>
</div>
<div nz-col nzSpan="12">
<nz-select
style="width: 100%"
[ngModel]="selectedDataTemplateBlock"
(ngModelChange)="onDataTemplateBlockSelect($event)"
>
<ng-container *ngFor="let option of dataTemplatesBlocks">
<nz-option
[nzValue]="option.key"
[nzLabel]="option.name"
></nz-option>
</ng-container>
<nz-option
[nzValue]="selectedDataTemplateBlock"
[nzLabel]="
selectedDataTemplateBlock !== ''
? selectedDataTemplateBlock
: 'Template blocks'
"
nzHide
></nz-option>
</nz-select>
<custom-select
[placeHolder]="placeHolderForIcdCodeSelect"
[isMultiple]="false"
[isLoading]="isLoadingIcdCodes"
[optionList]="icdCodeOptionList"
(onSearchChange)="onSearchIcdCode($event)"
(onSelectChange)="onIcdCodeSelect($event)"
></custom-select>
</div>
</div>

<!-- list of selected loinc codes -->
<!-- list of selected loinc codes && Msd Codes -->
<div
*ngIf="selectedLoincCodes.length > 0"
*ngIf="selectedICdCodes.length > 0 || selectedMsdCodes.length > 0"
nz-row
nzGutter="16"
style="margin-top: 16px; margin-bottom: 16px"
>
<nz-card style="width: 100%">
@for (loincCode of selectedLoincCodes; track $index) {
<nz-tag
nzMode="closeable"
(nzOnClose)="onRemoveLoincCode(loincCode)"
>{{ loincCode.name }}</nz-tag
>
}
</nz-card>
<div *ngIf="selectedICdCodes.length > 0" nz-col nzSpan="12">
<nz-card style="width: 100%">
<p>ICD Codes</p>
@for (icdCode of selectedICdCodes; track $index) {
<nz-tag
nzMode="closeable"
(nzOnClose)="onRemoveIcdCode(icdCode)"
>{{ icdCode.name }}</nz-tag
>
}
</nz-card>
</div>
<div *ngIf="selectedMsdCodes.length > 0" nz-col nzSpan="12">
Msd Codes
<nz-card style="width: 100%">
@for (msdCode of selectedMsdCodes; track $index) {
<nz-tag
nzMode="closeable"
(nzOnClose)="onRemoveMsdCode(msdCode)"
>{{ msdCode.name }}</nz-tag
>
}
</nz-card>
</div>
</div>

<!-- table -->
Expand Down
99 changes: 80 additions & 19 deletions ...traction/src/app/modules/mappings/containers/dataset-mapping/dataset-mapping.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,20 @@ export class DatasetMappingComponent implements OnInit {
selectedLoincCode?: { name: string; code: string };
loincCodeOptionList: any[] = [];

selectedLoincCodesObs: { name: string; code: string }[] = [];
searchLoincCodeChangeObs$ = new BehaviorSubject('');
placeHolderForLoincCodeSelectObs: string = 'Select LOINC Code (Obs)';
isLoadingLoincCodesObs: boolean = false;
selectedLoincCodeObs?: { name: string; code: string };
loincCodeOptionListObs: any[] = [];

selectedMsdCodes: { name: string; code: string }[] = [];
searchMsdCodesChange$ = new BehaviorSubject('');
placeHolderForMsdCodes: string = 'Select Msd Codes';
isLoadingMsdCodes: boolean = false;
selectedMsdCode?: { name: string; code: string };
msdCodesOptionList: any[] = [];

onSearchLoincCode(value: string): void {
this.isLoadingLoincCodes = true;
this.searchLoincCodeChange$.next(value);
Expand All @@ -158,13 +172,6 @@ export class DatasetMappingComponent implements OnInit {
);
}

selectedLoincCodesObs: { name: string; code: string }[] = [];
searchLoincCodeChangeObs$ = new BehaviorSubject('');
placeHolderForLoincCodeSelectObs: string = 'Select LOINC Code (Obs)';
isLoadingLoincCodesObs: boolean = false;
selectedLoincCodeObs?: { name: string; code: string };
loincCodeOptionListObs: any[] = [];

onSearchLoincCodeObs(value: string): void {
this.isLoadingLoincCodesObs = true;
this.searchLoincCodeChangeObs$.next(value);
Expand Down Expand Up @@ -195,6 +202,21 @@ export class DatasetMappingComponent implements OnInit {
);
}

onSearchMsdCode(value: string): void {
this.isLoadingMsdCodes = true;
this.searchMsdCodesChange$.next(value);
}

onMsdCodeSelect(value: { name: string; code: string }) {
this.selectedMsdCodes = [...this.selectedMsdCodes, value];
}

onRemoveMsdCode(tag: { name: string; code: string }) {
this.selectedMsdCodes = this.selectedMsdCodes.filter(
(item) => item.code !== tag.code
);
}

constructor(
private route: ActivatedRoute,
private dataSetManagementService: DatasetManagementService,
Expand All @@ -216,6 +238,7 @@ export class DatasetMappingComponent implements OnInit {
this.searchConfigurations();
this.searchLoincCodes();
this.searchLoincCodesObs();
this.searchMsdCodes();
this.loadDatasetByIdFromServer(this.dataSetIds.uuid);
}

Expand Down Expand Up @@ -253,6 +276,7 @@ export class DatasetMappingComponent implements OnInit {
this.selectedICdCodes = [];
this.selectedLoincCodes = [];
this.selectedLoincCodesObs = [];
this.selectedMsdCodes = [];
this.mappingUuid = undefined;
this.getCategoryOptionCombos(this.selectedInputId);
}
Expand Down Expand Up @@ -305,36 +329,40 @@ export class DatasetMappingComponent implements OnInit {
next: (data: any) => {
if (data.uuid === null) return;
this.mappingUuid = data.uuid;
if (data.mapping.type !== '') {
if (data.mapping?.type !== '') {
this.selectedDataTemplateBlock = data.mapping.type;
}

if (data.mapping.icdMappings.length > 0) {
if (data?.mapping?.icdMappings?.length > 0) {
this.selectedICdCodes = data?.mapping?.icdMappings.map(
(item: any) => item
);
}

if (data.mapping.loincMappings.length > 0) {
if (data?.mapping?.loincMappings?.length > 0) {
this.selectedLoincCodes = data?.mapping?.loincMappings.map(
(item: any) => item
);
}

if (data.mapping.loincObsMappings.length > 0) {
if (data?.mapping?.loincObsMappings?.length > 0) {
this.selectedLoincCodesObs = data?.mapping?.loincObsMappings.map(
(item: any) => item
);
}

if (data.mapping.params.length > 0) {
if (data?.mapping?.msdMappings?.length > 0) {
this.selectedMsdCodes = data?.mapping?.msdMappings.map(
(item: any) => item
);
}

if (data?.mapping?.params?.length > 0) {
// Consider taking one param, every param have the same number and type of configuration
// Find respective configurations against the prefetched list of configurations

const param = data.mapping.params[0];

let configurations: any[] = [];

Object.keys(param).forEach((key) => {
if (key === 'startAge') {
const configuration = this.configurationOptionList.find(
Expand All @@ -343,7 +371,6 @@ export class DatasetMappingComponent implements OnInit {
this.assignConfigurationToSelectedDisaggregation(
configuration.value
);
configurations = [configuration];
} else if (key === 'endAge' || key === 'co') {
return;
} else {
Expand All @@ -355,7 +382,6 @@ export class DatasetMappingComponent implements OnInit {
configuration.value
);
}
configurations = [...configurations, configuration];
}
});

Expand All @@ -364,7 +390,7 @@ export class DatasetMappingComponent implements OnInit {
if (key === 'endAge' || key === 'co') {
return;
} else if (key === 'startAge') {
const configuration = configurations.find(
const configuration = this.configurationOptionList.find(
(item: any) => item.value.keyToUseInMappings === 'ageGroup'
);
const selectedOption = configuration.value.options.find(
Expand All @@ -379,7 +405,7 @@ export class DatasetMappingComponent implements OnInit {
keyToUseInMappings: configuration.value.keyToUseInMappings,
});
} else {
const configuration = configurations.find(
const configuration = this.configurationOptionList.find(
(item: any) => item.value.keyToUseInMappings === key
);
if (configuration) {
Expand Down Expand Up @@ -493,7 +519,6 @@ export class DatasetMappingComponent implements OnInit {
loincList$.subscribe({
next: (data: any) => {
this.isLoadingLoincCodesObs = false;
console.log('Loinc Obs: ', data);
this.loincCodeOptionListObs =
data?.listOfLoincCodes?.map((item: any) => {
return {
Expand All @@ -509,6 +534,35 @@ export class DatasetMappingComponent implements OnInit {
});
}

searchMsdCodes() {
const msdList$: Observable<LoincCodePage> = this.searchMsdCodesChange$
.asObservable()
.pipe(debounceTime(500))
.pipe(
switchMap((value: string) => {
return this.dataSetManagementService.getMsdCodes(1, 10, [
{ key: 'q', value: [value] },
]);
})
);
msdList$.subscribe({
next: (data: any) => {
this.isLoadingMsdCodes = false;
this.msdCodesOptionList =
data?.listOfMsdCodes?.map((item: any) => {
return {
value: {
code: item.code,
name: item.name,
},
label: `${item.code}-${item.name}`,
};
}) ?? [];
},
error: (error: any) => {},
});
}

searchConfigurations() {
const configurationsList$: Observable<ConfigurationPage> =
this.searchConfigurationChange$
Expand Down Expand Up @@ -590,6 +644,13 @@ export class DatasetMappingComponent implements OnInit {
};
}),

msdMappings: this.selectedMsdCodes.map((item) => {
return {
code: item.code,
name: item.name,
};
}),

dataElement: {
id: this.selectedInputId,
name: '',
Expand Down
Loading

0 comments on commit fcf5260

Please sign in to comment.