UI: Renewing Study page #1802

dcm4che · Mar 7, 2019 · a7bdb5f · a7bdb5f
1 parent a988912
commit a7bdb5f
Show file tree

Hide file tree

Showing 11 changed files with 448 additions and 49 deletions.
diff --git a/dcm4chee-arc-ui2/src/app/constants/globalvar.ts b/dcm4chee-arc-ui2/src/app/constants/globalvar.ts
@@ -950,9 +950,56 @@ export class Globalvar {
  ]
  }
 
- static PATIENT_STUDIES_TABLE_SCHEMA():DicomTableSchema{
+ static PATIENT_STUDIES_TABLE_SCHEMA($this, actions):DicomTableSchema{
  return {
  patient:[
+ {
+ type:"actions",
+ header:"",
+ actions:[
+ {
+ icon:{
+ tag:'span',
+ cssClass:'glyphicon glyphicon-chevron-down',
+ text:'',
+ showIf:(e)=>{
+ return e.showStudies
+ }
+ },
+ click:(e)=>{
+ console.log("e",e);
+ actions.call($this, {
+ event:"click",
+ level:"patient",
+ action:"toggle_studies"
+ },e);
+ // e.showStudies = !e.showStudies;
+ }
+ },{
+ icon:{
+ tag:'span',
+ cssClass:'glyphicon glyphicon-chevron-right',
+ text:'',
+ showIf:(e)=>{
+ return !e.showStudies
+ }
+ },
+ click:(e)=>{
+ console.log("e",e);
+ // e.showStudies = !e.showStudies;
+ actions.call($this, {
+ event:"click",
+ level:"patient",
+ action:"toggle_studies"
+ },e);
+ // actions.call(this, 'study_arrow',e);
+ }
+ }
+ ],
+ headerDescription:"Show studies",
+ widthWeight:0.2,
+ calculatedWidth:"6%"
+ },
  {
  type:"index",
  header:'',
@@ -1036,12 +1083,53 @@ export class Globalvar {
  }
  ],
  studies:[
+ {
+ type:"actions",
+ header:"",
+ actions:[
+ {
+ icon:{
+ tag:'span',
+ cssClass:'glyphicon glyphicon-chevron-down',
+ text:'',
+ showIf:(e)=>{
+ return e.showSeries
+ }
+ },
+ click:(e)=>{
+ actions.call($this, {
+ event:"click",
+ level:"studies",
+ action:"toggle_series"
+ },e);
+ }
+ },{
+ icon:{
+ tag:'span',
+ cssClass:'glyphicon glyphicon-chevron-right',
+ text:'',
+ showIf:(e)=>{
+ return !e.showSeries
+ }
+ },
+ click:(e)=>{
+ actions.call($this, {
+ event:"click",
+ level:"studies",
+ action:"toggle_series"
+ },e);
+ }
+ }
+ ],
+ headerDescription:"Show studies",
+ widthWeight:0.2,
+ calculatedWidth:"6%"
+ },
  {
  type:"index",
  header:'',
  pathToValue:'',
- widthWeight:0.2,
- calculatedWidth:"6%"
+ widthWeight:0.2
  },
  {
  type:"actions",
@@ -1074,7 +1162,7 @@ export class Globalvar {
  header:"Study Instance UID",
  pathToValue:"[0020000D].Value[0]",
  headerDescription:"Study Instance UID",
- widthWeight:1.6,
+ widthWeight:3,
  calculatedWidth:"20%"
  },
  {
@@ -1096,7 +1184,7 @@ export class Globalvar {
  {
  type:"value",
  header:"R. Physician's Name",
- pathToValue:"[00080090].Value[0]",
+ pathToValue:"[00080090].Value[0].Alphabetic",
  headerDescription:"Referring Physician's Name",
  widthWeight:1,
  calculatedWidth:"20%"
@@ -1143,6 +1231,48 @@ export class Globalvar {
  }
  ],
  series:[
+ {
+ type:"actions",
+ header:"",
+ actions:[
+ {
+ icon:{
+ tag:'span',
+ cssClass:'glyphicon glyphicon-chevron-down',
+ text:'',
+ showIf:(e)=>{
+ return e.showInstances
+ }
+ },
+ click:(e)=>{
+ actions.call($this, {
+ event:"click",
+ level:"series",
+ action:"toggle_instances"
+ },e);
+ }
+ },{
+ icon:{
+ tag:'span',
+ cssClass:'glyphicon glyphicon-chevron-right',
+ text:'',
+ showIf:(e)=>{
+ return !e.showInstances
+ }
+ },
+ click:(e)=>{
+ actions.call($this, {
+ event:"click",
+ level:"series",
+ action:"toggle_instances"
+ },e);
+ }
+ }
+ ],
+ headerDescription:"Show Instances",
+ widthWeight:0.2,
+ calculatedWidth:"6%"
+ },
  {
  type:"index",
  header:'',

diff --git a/dcm4chee-arc-ui2/src/app/helpers/dicom-studies-table/dicom-studies-table.component.html b/dcm4chee-arc-ui2/src/app/helpers/dicom-studies-table/dicom-studies-table.component.html
@@ -1,5 +1,5 @@
 <h3 *ngIf="title">{{title}}</h3>
-<div class="j4care_dynamic_table" [ngClass]="config?.cssTableClass">
+<div class="j4care_dynamic_table" [ngClass]="config?.cssTableClass" *ngIf="patients && patients.length > 0">
  <!--Patient header 1:-->
  <div class="th patient" [ngClass]="config?.cssThClass">
  <div class="td"*ngFor="let patient_table of tableSchema.patient" [ngClass]="config?.cssTdClass" [ngStyle]="{width: patient_table.calculatedWidth}">
@@ -11,33 +11,59 @@ <h3 *ngIf="title">{{title}}</h3>
 
  <!--Patient Table 1:-->
  <div class="tr" [ngClass]="config?.cssTrClass" *ngFor="let patient of patients;let i = index">
- <div class="td" *ngFor="let patient_table of tableSchema.patient" [ngClass]="config?.cssTdClass" [ngStyle]="{width: patient_table.calculatedWidth}" [ngSwitch]="patient_table.type">
- <ng-container *ngSwitchCase="'index'">{{i + config.offset + 1}}</ng-container>
- <ng-container *ngSwitchCase="'actions'">
- <a (click)="$event.preventDefault();action.click(patient)" *ngFor="let action of patient_table.actions">
- <span *ngIf="action.icon.tag === 'span'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
- <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
- </a>
- </ng-container>
- <ng-container *ngSwitchCase="'pipe'">{{patient_table.pipe | dynamicPipe}}</ng-container>
- <ng-container *ngSwitchCase="'value'">{{_.get(patient.attrs,patient_table.pathToValue) || '&nbsp;'}}</ng-container>
- </div>
- <attribute-list *ngIf="patient.showAttributes" [attrs]="patient.attrs"></attribute-list>
-
- <!--Studies 2:-->
- <div class="tr" [ngClass]="config?.cssTrClass" *ngFor="let study of patient.studies;let i = index">
- <div class="td" *ngFor="let studies_table of tableSchema.studies" [ngClass]="config?.cssTdClass" [ngStyle]="{width: studies_table.calculatedWidth}" [ngSwitch]="studies_table.type">
+ <div class="patient_block table_item">
+ <div class="td" *ngFor="let patient_table of tableSchema.patient" [ngClass]="config?.cssTdClass" [ngStyle]="{width: patient_table.calculatedWidth}" [ngSwitch]="patient_table.type">
  <ng-container *ngSwitchCase="'index'">{{i + config.offset + 1}}</ng-container>
  <ng-container *ngSwitchCase="'actions'">
-  <a (click)="$event.preventDefault();action.click(study)" *ngFor="let action of studies_table.actions">
-  <span *ngIf="action.icon.tag === 'span'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
-  <i *ngIf="action.icon.tag === 'i'" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
-  </a>
+ <a class="pointer" (click)="$event.preventDefault();action.click(patient)" *ngFor="let action of patient_table.actions">
+ <span *ngIf="action.icon.tag === 'span' && (!action.icon.showIf || action.icon.showIf(patient))" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
+ <i *ngIf="action.icon.tag === 'i' && (!action.icon.showIf || action.icon.showIf(patient))" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
+ </a>
  </ng-container>
- <ng-container *ngSwitchCase="'pipe'">{{studies_table.pipe | dynamicPipe}}</ng-container>
- <ng-container *ngSwitchCase="'value'">{{_.get(study.attrs,studies_table.pathToValue) || '&nbsp;'}}</ng-container>
+ <ng-container *ngSwitchCase="'pipe'">{{patient_table.pipe | dynamicPipe}}</ng-container>
+ <ng-container *ngSwitchCase="'value'">{{_.get(patient.attrs,patient_table.pathToValue) || '&nbsp;'}}</ng-container>
+ </div>
+ <attribute-list *ngIf="patient.showAttributes" [attrs]="patient.attrs"></attribute-list>
+ </div>
+
+ <!--Studies 2:-->
+ <div *ngIf="patient.showStudies">
+ <div class="tr" [ngClass]="config?.cssTrClass" *ngFor="let study of patient.studies;let i = index">
+ <div class="study_block table_item">
+ <div class="td" *ngFor="let studies_table of tableSchema.studies" [ngClass]="config?.cssTdClass" [ngStyle]="{width: studies_table.calculatedWidth}" [ngSwitch]="studies_table.type">
+ <ng-container *ngSwitchCase="'index'">{{study.offset + 1}}</ng-container>
+ <ng-container *ngSwitchCase="'actions'">
+ <a class="pointer" (click)="$event.preventDefault();action.click(study)" *ngFor="let action of studies_table.actions">
+ <span *ngIf="action.icon.tag === 'span' && (!action.icon.showIf || action.icon.showIf(study))" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
+ <i *ngIf="action.icon.tag === 'i' && (!action.icon.showIf || action.icon.showIf(study))" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
+ </a>
+ </ng-container>
+ <ng-container *ngSwitchCase="'pipe'">{{studies_table.pipe | dynamicPipe}}</ng-container>
+ <ng-container *ngSwitchCase="'value'">{{_.get(study.attrs,studies_table.pathToValue) || '&nbsp;'}}</ng-container>
+ </div>
+ <attribute-list *ngIf="study.showAttributes" [attrs]="study.attrs"></attribute-list>
+ </div>
+ <!--Series 3:-->
+ <div *ngIf="study.showSeries">
+ <div class="tr" [ngClass]="config?.cssTrClass" *ngFor="let serie of study.series;let i = index">
+ <div class="series_block table_item">
+ <div class="td" *ngFor="let serie_table of tableSchema.series" [ngClass]="config?.cssTdClass" [ngStyle]="{width: serie_table.calculatedWidth}" [ngSwitch]="serie_table.type">
+ <ng-container *ngSwitchCase="'index'">{{serie.offset + 1}}</ng-container>
+ <ng-container *ngSwitchCase="'actions'">
+ <a class="pointer" (click)="$event.preventDefault();action.click(serie)" *ngFor="let action of serie_table.actions">
+ <span *ngIf="action.icon.tag === 'span' && (!action.icon.showIf || action.icon.showIf(serie))" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
+ <i *ngIf="action.icon.tag === 'i' && (!action.icon.showIf || action.icon.showIf(serie))" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
+ </a>
+ </ng-container>
+ <ng-container *ngSwitchCase="'pipe'">{{serie_table.pipe | dynamicPipe}}</ng-container>
+ <ng-container *ngSwitchCase="'value'">{{_.get(serie.attrs,serie_table.pathToValue) || '&nbsp;'}}</ng-container>
+ </div>
+ <attribute-list *ngIf="serie.showAttributes" [attrs]="serie.attrs"></attribute-list>
+ </div>
+ </div>
+ </div>
+ <!--3:END;-->
  </div>
- <attribute-list *ngIf="study.showAttributes" [attrs]="study.attrs"></attribute-list>
  </div>
  <!--2:END;-->
 

diff --git a/dcm4chee-arc-ui2/src/app/helpers/dicom-studies-table/dicom-studies-table.component.scss b/dcm4chee-arc-ui2/src/app/helpers/dicom-studies-table/dicom-studies-table.component.scss
@@ -21,19 +21,50 @@
  .tr{
  width: 100%;
  float: left;
- background:white;
- border-bottom: 1px solid rgba(0, 0, 0, 0.46);
- margin-bottom: 1px;
  .td{
  float: left;
  padding: 5px 7px;
  border-right: 1px solid rgba(0, 0, 0, 0.19);
  &:last-child{
  border:none;
  }
+ a{
+ .glyphicon{
+ position: static;
+ }
+ }
+ }
+
+ }
+ .table_item{
+ float: left;
+ width: 100%;
+ background:white;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.46);
+ margin-bottom: 1px;
+ &.patient_block{
+ -webkit-box-shadow: 4px 0px 6px rgba(68, 68, 68, 0.57);
+ -moz-box-shadow: 4px 0px 6px rgba(68, 68, 68, 0.57);
+ box-shadow: 4px 0px 6px rgba(68, 68, 68, 0.57);
  }
- .tr{
+ &.study_block{
+ -webkit-box-shadow: inset 0px 9px 7px -7px rgba(68, 68, 68, 0.52), 2px 0px 10px 0px rgba(68, 68, 68, 0.7);
+ -moz-box-shadow: inset 0px 9px 7px -7px rgba(68, 68, 68, 0.52), 2px 0px 10px 0px rgba(68, 68, 68, 0.7);
+ box-shadow: inset 0px 9px 7px -7px rgba(68, 68, 68, 0.52), 2px 0px 10px 0px rgba(68, 68, 68, 0.7);
+ margin-left: 2px;
+ width: calc(100% - 2px);
+ background: rgba(235, 235, 235, 0.9);
  padding-left: 20px;
  }
+ &.series_block{
+ -webkit-box-shadow: inset 0px 9px 7px -7px rgba(68, 68, 68, 0.52), 1px 0px 8px 0px rgba(68, 68, 68, 0.7);
+ -moz-box-shadow: inset 0px 9px 7px -7px rgba(68, 68, 68, 0.52), 1px 0px 8px 0px rgba(68, 68, 68, 0.7);
+ box-shadow: inset 0px 9px 7px -7px rgba(68, 68, 68, 0.52), 1px 0px 8px 0px rgba(68, 68, 68, 0.7);
+ margin-left: 4px;
+ width: calc(100% - 4px);
+ background: rgba(215, 215, 215, 0.8);
+ padding-left: 40px;
+
+ }
  }
 }
diff --git a/dcm4chee-arc-ui2/src/app/helpers/dicom-studies-table/dicom-studies-table.interfaces.ts b/dcm4chee-arc-ui2/src/app/helpers/dicom-studies-table/dicom-studies-table.interfaces.ts
@@ -23,7 +23,8 @@ export interface TableSchemaElement {
 export interface Icon{
  tag:("span"|"i");
  cssClass:string;
- text?:string
+ text?:string;
+ showIf?:Function
 }
 
 export interface TableAction{

diff --git a/dcm4chee-arc-ui2/src/app/models/patient-dicom.ts b/dcm4chee-arc-ui2/src/app/models/patient-dicom.ts
@@ -5,10 +5,12 @@ export class PatientDicom {
  private _attrs:any[];
  private _studies:StudyDicom[];
  private _showAttributes:boolean;
- constructor(attrs:any[], studies:StudyDicom[], showAttributes?:boolean){
+ private _showStudies:boolean;
+ constructor(attrs:any[], studies:StudyDicom[], showAttributes?:boolean, showStudies?:boolean){
  this._attrs = attrs;
  this._studies = studies;
- this._showAttributes = showAttributes;
+ this._showAttributes = showAttributes || false;
+ this._showStudies = showStudies || false;
  }
 
 
@@ -35,4 +37,12 @@ export class PatientDicom {
  set showAttributes(value: boolean) {
  this._showAttributes = value;
  }
+
+ get showStudies(): boolean {
+ return this._showStudies;
+ }
+
+ set showStudies(value: boolean) {
+ this._showStudies = value;
+ }
 }