starting to add the new custom dropdown module, UI: Renewing Study page

#1802

dcm4chee-arc-ui2/src/app/app.module.ts

@@ -102,6 +102,7 @@ import { StudyComponent } from './study/study/study.component';
 import {StudyService} from "./study/study/study.service";
 import { DicomStudiesTableComponent } from './helpers/dicom-studies-table/dicom-studies-table.component';
 import { DynamicPipePipe } from './pipes/dynamic-pipe.pipe';
+import {OptionService} from "./widgets/dropdown/option.service";
 
 @NgModule({
  declarations: [
@@ -251,6 +252,7 @@ import { DynamicPipePipe } from './pipes/dynamic-pipe.pipe';
  StorageVerificationService,
  StudyService,
  ContentDescriptionPipe,
+ OptionService,
  {provide: LOCALE_ID, useValue: 'en-US' }
  ],
  bootstrap: [AppComponent]

dcm4chee-arc-ui2/src/app/constants/globalvar.ts

@@ -749,6 +749,12 @@ export class Globalvar {
  description:"Expiration State",
  placeholder:"Expiration State",
  }
+ ,{
+ tag:"range-picker",
+ type:"text",
+ filterKey:"ExpirationDate",
+ description:"Expiration Date"
+ }
  ];
  }
  return [
@@ -779,6 +785,13 @@ export class Globalvar {
  description:"Patient ID",
  placeholder:"Patient ID"
  },
+ {
+ tag:"input",
+ type:"text",
+ filterKey:"StudyInstanceUID",
+ description:"Study Instance UID",
+ placeholder:"Study Instance UID"
+ },
  {
  tag:"input",
  type:"text",
@@ -858,11 +871,6 @@ export class Globalvar {
  type:"text",
  filterKey:"StudyAccessDateTime",
  description:"Study Access"
- },{
- tag:"range-picker",
- type:"text",
- filterKey:"ExpirationDate",
- description:"Expiration Date"
  },{
  tag:"select",
  options:[

dcm4chee-arc-ui2/src/app/interfaces.ts

@@ -26,11 +26,13 @@ export class SelectDropdown {
  private _text:string;
  private _label:any;
  private _title?:string;
- constructor(value:any,text:string, title?:string, label?:any){
+ private _htmlLabel:string;
+ constructor(value:any,text:string, title?:string, label?:any, htmlLabel?:string){
  this._value = value;
  this._text = text;
  this._label = label || text;
  this._title = title;
+ this._htmlLabel = htmlLabel;
  }
 
  get value(): string {
@@ -64,6 +66,15 @@ export class SelectDropdown {
  set title(value: string) {
  this._title = value;
  }
+
+
+ get htmlLabel(): string {
+ return this._htmlLabel;
+ }
+
+ set htmlLabel(value: string) {
+ this._htmlLabel = value;
+ }
 }
 export type Quantity = "count"|"size"|string;
 export type StudyDateMode = "StudyReceiveDateTime"|"StudyDate"|string;

dcm4chee-arc-ui2/src/app/study/study/study.component.html

@@ -2,6 +2,10 @@
  <study-tab></study-tab>
  <div class="tab-content" [ngClass]="{'tab_content_with_fixed_header':fixedHeader}">
  <div [ngClass]="{'fixed_header':fixedHeader}">
+<!-- model2:{{model|json}}
+ <j4care-select [(model)]="model">
+ <j4care-option *ngFor="let el of test" [value]="el.value" [htmlLabel]="el.label"></j4care-option>
+ </j4care-select>-->
  <h2>Studies {{studyConfig.tab}}</h2>
  <div class="filter_line">
  <div class="filter_block">

dcm4chee-arc-ui2/src/app/widgets/dropdown/dropdown.component.html

@@ -0,0 +1,8 @@
+<ng-container *ngIf="selectedValue">
+ <div class="selected_value" *ngIf="!selectedValue.htmlLabel" (click)="toggleDropdown()">{{selectedValue.label || selectedValue.text}}</div>
+ <div class="selected_value" *ngIf="selectedValue && selectedValue.htmlLabel" [innerHTML]="selectedValue.htmlLabel" (click)="toggleDropdown()"></div>
+</ng-container>
+<div *ngIf="!selectedValue" class="selected_value empty_field" placeholder="Test" (click)="toggleDropdown()">Placeholder</div>
+<div class="select" *ngIf="showDropdown">
+ <ng-content></ng-content>
+</div>

dcm4chee-arc-ui2/src/app/widgets/dropdown/dropdown.component.ts

@@ -0,0 +1,34 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {OptionService} from "./option.service";
+import {SelectDropdown} from "../../interfaces";
+
+@Component({
+ selector: 'j4care-select',
+ templateUrl: './dropdown.component.html',
+ styleUrls: ['./dropdown.component.scss']
+})
+export class DropdownComponent implements OnInit {
+ selectedValue:SelectDropdown;
+
+ @Input() model: SelectDropdown;
+
+ @Output() modelChange = new EventEmitter();
+
+ showDropdown:boolean = false;
+ constructor(public service:OptionService) {
+ this.service.valueSet$.subscribe(value=>{
+ console.log("value",value);
+ this.selectedValue = value;
+ this.modelChange.emit(value);
+ })
+ }
+
+ ngOnInit() {
+ this.selectedValue = this.model;
+ }
+
+ toggleDropdown(){
+ this.showDropdown = !this.showDropdown;
+ }
+
+}

dcm4chee-arc-ui2/src/app/widgets/dropdown/option.component.ts

@@ -0,0 +1,38 @@
+import {Component, ContentChild, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from "@angular/core";
+import {OptionService} from "./option.service";
+import {SelectDropdown} from "../../interfaces";
+
+@Component({
+ selector: 'j4care-option',
+ template:`
+ <div class="option" (click)="select($event)" #options>
+ <div *ngIf="htmlLabel" [innerHTML]="htmlLabel"></div>
+ <ng-content *ngIf="!htmlLabel">
+ </ng-content>
+ </div>
+ `
+})
+export class OptionComponent implements OnInit {
+ @Input() value;
+ @Input() htmlLabel;
+ constructor(
+ public service:OptionService,
+ private element:ElementRef
+ ){}
+ ngOnInit() {
+ }
+
+ select(e){
+ console.log("select",e);
+ console.log("value",this.value);
+ console.log("element",this.element);
+ console.log("element",this.element.nativeElement.innerHTML);
+ console.log("outerText",this.element.nativeElement.outerText);
+ console.log("htmlLabel",this.htmlLabel);
+ if(this.htmlLabel){
+ this.service.setValue(new SelectDropdown(this.value,'','','',this.htmlLabel));
+ }else{
+ this.service.setValue(new SelectDropdown(this.value,this.element.nativeElement.outerText));
+ }
+ }
+}

dcm4chee-arc-ui2/src/app/widgets/dropdown/option.service.ts

@@ -0,0 +1,18 @@
+import {Injectable, Input, Output} from "@angular/core";
+import {Subject} from "rxjs/Subject";
+import {SelectDropdown} from "../../interfaces";
+
+
+@Injectable()
+export class OptionService {
+
+
+
+ private setValueSource = new Subject<SelectDropdown>();
+
+ valueSet$ = this.setValueSource.asObservable();
+ setValue(value: SelectDropdown) {
+ console.log('in set value', value);
+ this.setValueSource.next(value);
+ }
+}

dcm4chee-arc-ui2/src/app/widgets/modality/modality.component.html

@@ -1,5 +1,5 @@
-<input type="text" size="5" [(ngModel)]="model" (keyup)="selectModality(model)" (click)="showModalitySelector = !showModalitySelector" placeholder="Modality" class="col-md-12" ng-keypress="checkKeyModality($event)"/>
-<div class="modality_selector [hidden]" *ngIf="showModalitySelector">
+<input type="text" [(ngModel)]="model" (keyup)="selectModality(model)" (click)="showModalitySelector = !showModalitySelector" placeholder="Modality" class="col-md-12 input_field"/>
+<div class="modality_selector [hidden]" *ngIf="showModalitySelector" (clickOutside)="closeFromOutside()" [clickOutsideExceptionClass]="['form-group','more_block','more','input_field']">
  <a href="" (click)="showModalitySelector=false" class="close"><i class="glyphicon glyphicon-remove"></i></a>
  <div class="common">
  <a href="" *ngFor="let value of modalities.common | getKey;" (click)="$event.preventDefault();selectModality(value._KEY)" title="{{value._VALUE}}">{{value._KEY}}</a>

dcm4chee-arc-ui2/src/app/widgets/modality/modality.component.ts

@@ -2,8 +2,13 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {Globalvar} from "../../constants/globalvar";
 
 @Component({
- selector: 'modality',
- templateUrl: './modality.component.html'
+ selector: 'modality',
+ templateUrl: './modality.component.html',
+ styles:[`
+ .input_field{
+ width:100%;
+ }
+ `]
 })
 export class ModalityComponent implements OnInit {
 
@@ -19,6 +24,9 @@ export class ModalityComponent implements OnInit {
  this.modelChange.emit(this.model);
  this.showModalitySelector = false;
  };
+ closeFromOutside(){
+ this.showModalitySelector = false;
+ }
  ngOnInit() {
  }
 

dcm4chee-arc-ui2/src/app/widgets/widgets.module.ts

@@ -36,6 +36,8 @@ import { DynamicFieldComponent } from './dynamic-field/dynamic-field.component';
 import { DcmSelectComponent } from './dcm-select/dcm-select.component';
 import { CsvUploadComponent } from './dialogs/csv-upload/csv-upload.component';
 import { SizeRangePickerComponent } from './size-range-picker/size-range-picker.component';
+import { DropdownComponent } from './dropdown/dropdown.component';
+import {OptionComponent} from "./dropdown/option.component";
 
 
 @NgModule({
@@ -81,5 +83,7 @@ export const WidgetsComponents = [
  DynamicFieldComponent,
  DcmSelectComponent,
  CsvUploadComponent,
- SizeRangePickerComponent
+ SizeRangePickerComponent,
+ DropdownComponent,
+ OptionComponent
 ];