From 41c13a35c5cc4ac58260a70435117ea25e6784d1 Mon Sep 17 00:00:00 2001 From: Shefki Esadi Date: Thu, 5 Sep 2024 14:13:19 +0200 Subject: [PATCH] UI: Navigation: Change the Patient identifier Widget to look like the Patient Name widget #4554 --- .../src/app/helpers/j4care.service.ts | 23 +++ .../edit-patient/edit-patient.service.spec.ts | 2 +- .../issuer-selector.component.html | 62 ++++---- .../issuer-selector.component.scss | 149 +++++++++++++++++- .../issuer-selector.component.spec.ts | 4 + .../issuer-selector.component.ts | 43 ++++- 6 files changed, 244 insertions(+), 39 deletions(-) diff --git a/dcm4chee-arc-ui2/src/app/helpers/j4care.service.ts b/dcm4chee-arc-ui2/src/app/helpers/j4care.service.ts index a40ee4c8ac..c0edad1021 100644 --- a/dcm4chee-arc-ui2/src/app/helpers/j4care.service.ts +++ b/dcm4chee-arc-ui2/src/app/helpers/j4care.service.ts @@ -485,6 +485,29 @@ export class j4care { } } + /* + *Removes the last empty elements until it finds one that is not empty + *Example: + * input: ['test', 'selam', '', 'hb', '', ''] + * output:["test", "selam", "", "hb"] + * */ + static removeLastEmptyStringsFromArray(arr:string[]) { + try{ + let emergencyBrake = arr.length; + while (arr.length > 0 && emergencyBrake > 0) { + if (!arr[arr.length - 1] || arr[arr.length - 1] === '') { + arr.splice(arr.length - 1, 1); + } else { + break; + } + emergencyBrake--; + } + return arr; + }catch (e) { + return arr; + } + }; + static isAtLeastOneElementOfArrayInArray(firstArray:string[],secondArray:string[]){ try{ return firstArray.filter((el1:string) => secondArray.filter(el2 => el1===el2).length > 0).length > 0; diff --git a/dcm4chee-arc-ui2/src/app/widgets/dialogs/edit-patient/edit-patient.service.spec.ts b/dcm4chee-arc-ui2/src/app/widgets/dialogs/edit-patient/edit-patient.service.spec.ts index 93fcc858b6..a5cb02120f 100644 --- a/dcm4chee-arc-ui2/src/app/widgets/dialogs/edit-patient/edit-patient.service.spec.ts +++ b/dcm4chee-arc-ui2/src/app/widgets/dialogs/edit-patient/edit-patient.service.spec.ts @@ -45,7 +45,7 @@ describe('EditPatientService', () => { firstLevelCode:"00100024" }, TypeofPatientID:{ - text:"typeOfPID", + text:"TEXT", modelPath:"00100022.Value[0]", firstLevelCode:"00100022" } diff --git a/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.html b/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.html index 111829d122..3f71baedd4 100644 --- a/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.html +++ b/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.html @@ -1,37 +1,41 @@ -
-
- - +
+
+
+ + +
subdirectory_arrow_right - -
-
-
-
{{title}}
- -
-
-
{{issuer.label}}
-
-
-
- +
+
+
+
+ +
+
{{title}}
+ +
+
+
{{issuer.label}}
+
+
+
+ +
-
- - -
-
- - + + +
+
+ + +
-
- - -
- + +
+ +
\ No newline at end of file diff --git a/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.scss b/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.scss index 5c03acb54d..7013975c81 100644 --- a/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.scss +++ b/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.scss @@ -1,3 +1,140 @@ + + +.patient_name_picker{ + position: relative; + color: black; + .input_field{ + display: grid; + grid-template-columns: auto 26px; + width: 100%; + border-bottom: 1px solid #ccc; + input{ + width: 100%; + border:none; + background: transparent; + } + i.material-icons{ + display: flex; + justify-content: center; + align-items: center; + background: #161d23; + color: white; + &:hover{ + cursor: pointer; + } + } + .input_block{ + position: relative; + span.glyphicon-remove{ + display: none; + position: absolute; + right: 3px; + top: 7px; + background: transparent; + color: black; + &:hover{ + cursor: pointer; + } + } + } + &:hover .input_block span.glyphicon-remove{ + display: block; + } + } + .dialog{ + position: absolute; + background: white; + padding: 20px; + -webkit-box-shadow: 3px 4px 8px #cccccc; + -moz-box-shadow: 3px 4px 8px #cccccc; + box-shadow: 3px 4px 8px #cccccc; + z-index: 1001; +/* .dialog_block{ + margin-bottom: 10px; + float: left; + padding-bottom: 10px; + width: 100%; + .table{ + min-width: 600px; + grid-template-rows: 1fr 1fr 1fr 1fr; + display: grid; + box-shadow: none; + .tr{ + display: grid; + grid-template-columns: 100px 1fr 1fr 1fr 70px 70px; + &.active{ + .td,.th{ + color:black; + border: 1px solid #000000c4; + box-shadow: 0px 0px 6px 0px #000000c4; + input{ + width: 100%; + min-width: 50px; + color: black; + &::placeholder{ + color: #666666; + } + } + } + } + .td,.th{ + color:#3333338f; + input{ + width: 100%; + height: 100%; + min-width: 50px; + color: #3333338f; + &::placeholder{ + color: #3333338f; + } + } + span{ + padding: 3px 7px; + height: 30px; + line-height: 30px; + } + } + .th{ + color: black; + } + } + } + } + h5{ + font-weight: bold; + font-size: 16px; + border-bottom: 1px solid #ccc; + padding-bottom: 5px; + }*/ + input{ + color:black; + } + } + .dicom_components{ + display: grid; + grid-template-columns: 90px 10px 90px 10px 90px 10px 60px 10px 60px; + float: left; + span{ + display: flex; + justify-content: center; + } + } + &.open{ + .input_field{ + input{ + z-index: 1002; + position: relative; + background: white; + color: black; + } + &:hover .input_block span.glyphicon-remove{ + display: block; + z-index: 10004; + } + } + } +} + $height:27px; .main_input_block{ position: relative; @@ -41,7 +178,7 @@ $height:27px; } .content_block{ - display: block; +/* display: block; position: absolute; background: white; z-index: 9999; @@ -51,7 +188,7 @@ $height:27px; border-top: 20px solid rgba(6, 29, 47, 0.84); border-top-right-radius: 5px; border-top-left-radius: 5px; - color:black; + color:black;*/ &::placeholder{ color:black; } @@ -70,8 +207,8 @@ $height:27px; } .table{ min-width: 600px; -/* grid-template-rows: 1fr 1fr 1fr 1fr; - display: grid;*/ + /* grid-template-rows: 1fr 1fr 1fr 1fr; + display: grid;*/ box-shadow: none; margin: 20px 0; .tr{ @@ -121,7 +258,7 @@ $height:27px; } } } -.overlay{ +/*.overlay{ position: fixed; top: 0; bottom: 0; @@ -134,7 +271,7 @@ $height:27px; transition: opacity .4s cubic-bezier(.25,.8,.25,1); opacity: 1; background: rgba(0,0,0,.32); -} +}*/ .clear_picker{ position: absolute; right: 25px; diff --git a/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.spec.ts b/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.spec.ts index ec1536fb0b..012b75fea8 100644 --- a/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.spec.ts +++ b/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.spec.ts @@ -23,4 +23,8 @@ describe('IssuerSelectorComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + it("Should extract the model parts from string",()=>{ + component.model = "test^^^selam"; + + }) }); diff --git a/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.ts b/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.ts index 08bce9029d..f3b7dde458 100644 --- a/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.ts +++ b/dcm4chee-arc-ui2/src/app/widgets/issuer-selector/issuer-selector.component.ts @@ -12,7 +12,8 @@ export class IssuerSelectorComponent implements OnInit { @Input() placeholder:string; @Input() title:string; - @Input() issuers:string[]; + @Input() issuers:any[]; + splitters = []; @Input('model') set model(value){ console.log("value",value); @@ -32,23 +33,59 @@ export class IssuerSelectorComponent implements OnInit { } set(){ - const issuerPart = _.values(_.pickBy(this.filterModel,(value,key)=>key != "PatientID")).join('&'); + let issuerPart = _.values(_.pickBy(this.filterModel,(value,key)=>key != "PatientID")); + issuerPart = j4care.removeLastEmptyStringsFromArray(issuerPart).join('&'); if(issuerPart){ this.model = `${j4care.appendStringIfExist(this.filterModel["PatientID"], "^^^")}${issuerPart}`; }else{ this.model = `${this.filterModel?.["PatientID"] || ''}`; } this.modelChange.emit(this.filterModel); - this.selectorOpen = false; } togglePicker(){ this.selectorOpen = !this.selectorOpen; } hardClear(){ + this.clearInnerModels(); this.model = ""; this.modelChange.emit(undefined); } filterChanged(){ + this.extractModelsFromString(); + } + + initSplitters(){ + this.splitters = []; + this.issuers.forEach((value,i)=>{ + if(i === 0 && _.hasIn(this.issuers,"0.key") && this.issuers[0].key === "PatientID"){ + this.splitters[i] = "^^^"; + }else{ + this.splitters[i] = "&"; + } + }); + } + extractModelsFromString(){ + try{ + if(this.model){ + let modelTemp = this.model; + this.initSplitters(); + this.issuers.forEach((value,i)=>{ + const split = this.splitters[i] || "&"; + let splitted = modelTemp.split(split); + this.filterModel[this.issuers[i].key] = splitted[0].replace(/\&/g,"").replace(/\^/g,"") || ""; + splitted.shift(); + modelTemp = splitted.join(split); + }); + }else{ + this.clearInnerModels(); + } + }catch (e) { + } + } + clearInnerModels(){ + this.issuers.forEach(issue=>{ + this.filterModel[issue.key] = ""; + }) } }