From 12f068df982d473817a4d79cc15f16615146767e Mon Sep 17 00:00:00 2001
From: shefki <shralsheki@gmail.com>
Date: Mon, 28 Jan 2019 13:02:42 +0100
Subject: [PATCH] UI: Renewing Study page #1802

---
 .../filter-generator.component.ts             |  22 ++-
 .../src/app/study/study/study.component.html  | 136 +++++++++++++++++-
 .../src/app/study/study/study.component.scss  |  25 ++++
 .../src/app/study/study/study.component.ts    |  50 ++++++-
 4 files changed, 219 insertions(+), 14 deletions(-)

diff --git a/dcm4chee-arc-ui2/src/app/helpers/filter-generator/filter-generator.component.ts b/dcm4chee-arc-ui2/src/app/helpers/filter-generator/filter-generator.component.ts
index f7a1516b8..67891bce2 100644
--- a/dcm4chee-arc-ui2/src/app/helpers/filter-generator/filter-generator.component.ts
+++ b/dcm4chee-arc-ui2/src/app/helpers/filter-generator/filter-generator.component.ts
@@ -25,7 +25,7 @@ export class FilterGeneratorComponent implements OnInit, OnDestroy, AfterContent
 
     @Input() schema;
     @Input() model;
-    @Input() filterTreeHeight;
+    private _filterTreeHeight;
     @Input() filterID;
     @Input() hideClearButtons;
     @Input() filterIdTemplate;
@@ -50,10 +50,24 @@ export class FilterGeneratorComponent implements OnInit, OnDestroy, AfterContent
         public config: MatDialogConfig,
         private deviceConfigurator:DeviceConfiguratorService,
         private devices:DevicesService
-    ) { }
+    ) {
+        console.log("test",this._filterTreeHeight)
+    }
+    get filterTreeHeight() {
+        return this._filterTreeHeight;
+    }
+
+    @Input("filterTreeHeight")
+    set filterTreeHeight(value) {
+        this._filterTreeHeight = value;
+        if(this._filterTreeHeight) {
+            this.cssBlockClass = `height_${this._filterTreeHeight}`;
+        }
+    }
+
     ngOnInit() {
-        if(this.filterTreeHeight) {
-            this.cssBlockClass = `height_${this.filterTreeHeight}`;
+        if(this._filterTreeHeight) {
+            this.cssBlockClass = `height_${this._filterTreeHeight}`;
         }
         if(!this.filterID){
             try{
diff --git a/dcm4chee-arc-ui2/src/app/study/study/study.component.html b/dcm4chee-arc-ui2/src/app/study/study/study.component.html
index 21d26595b..3012e12c9 100644
--- a/dcm4chee-arc-ui2/src/app/study/study/study.component.html
+++ b/dcm4chee-arc-ui2/src/app/study/study/study.component.html
@@ -1,10 +1,12 @@
-<div class="main_content white_design">
+<div class="main_content white_design" >
+
   <study-tab></study-tab>
-  <div class="tab-content">
+  <div class="tab-content" [ngClass]="{'tab_content_with_fixed_header':fixedHeader}">
+    <div [ngClass]="{'fixed_header':fixedHeader}">
     <h2>Studies {{studyConfig.tab}}</h2>
     <ng-container *ngIf="studyConfig.tab === 'study' || studyConfig.tab === 'patient'">
-      <h4>Select the Location Mode</h4>
-      <div class="controll_header">
+      <h4 [@showHide]="fixedHeader ? 'hide':'show'">Select the Location Mode</h4>
+      <div [@showHide]="fixedHeader ? 'hide':'show'" class="controll_header">
         <mat-radio-group class="example-radio-group" [(ngModel)]="studyConfig.accessLocation" (change)="accessLocationChange($event)">
           <mat-radio-button value="internal" >
             Internal
@@ -30,7 +32,7 @@ <h4>Select the Location Mode</h4>
         <filter-generator *ngIf="filter.filterSchemaMain.lineLength" [schema]="filter.filterSchemaExpand.schema" [filterID]="'study-filter'" [model]="filter.filterModel" [filterTreeHeight]="filter.filterSchemaExpand.lineLength" (onChange)="filterChanged()"></filter-generator>
       </div>
     </div>
-    <div class="filter_line">
+    <div class="filter_line" [@showHide]="fixedHeader ? 'hide':'show'">
       <div class="filter single_block" [permission]="{id:'action-monitoring->diff_monitor-all_action',param:'visible'}">
         <div class="filter_block">
           <div class="line">
@@ -50,4 +52,128 @@ <h4>Select the Location Mode</h4>
       </div>
     </div>
   </div>
+
+    <div class="open-close-container">
+      <p>The box is now!
+        The box is now
+        The box is nowThe box is nowThe box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+
+      </p>
+      <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!
+        The box is now
+        The box is nowThe box is nowThe box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+
+      </p>
+      <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!
+        The box is now
+        The box is nowThe box is nowThe box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+        The box is now
+
+      </p>
+    </div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/dcm4chee-arc-ui2/src/app/study/study/study.component.scss b/dcm4chee-arc-ui2/src/app/study/study/study.component.scss
index e69de29bb..b5bd0ee73 100644
--- a/dcm4chee-arc-ui2/src/app/study/study/study.component.scss
+++ b/dcm4chee-arc-ui2/src/app/study/study/study.component.scss
@@ -0,0 +1,25 @@
+:host {
+  display: block;
+}
+
+.open-close-container {
+  border: 1px solid #dddddd;
+  margin-top: 1em;
+  padding: 20px 20px 0px 20px;
+  color: #000000;
+  font-weight: bold;
+  font-size: 20px;
+  float:left;
+  width: 100%;
+  overflow: auto;
+  height: 1000px;
+}
+.fixed_header{
+  width: calc(100% - 80px);
+  background: white;
+  position: fixed;
+  top: 0;
+}
+.tab_content_with_fixed_header{
+  margin-top: 226px;
+}
\ No newline at end of file
diff --git a/dcm4chee-arc-ui2/src/app/study/study/study.component.ts b/dcm4chee-arc-ui2/src/app/study/study/study.component.ts
index 06a7d33fd..fbe1429b4 100644
--- a/dcm4chee-arc-ui2/src/app/study/study/study.component.ts
+++ b/dcm4chee-arc-ui2/src/app/study/study/study.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, HostListener, OnInit} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
 import {AccessLocation, FilterSchema, StudyFilterConfig, StudyPageConfig, StudyTab} from "../../interfaces";
 import {StudyService} from "./study.service";
@@ -10,15 +10,42 @@ import {AppService} from "../../app.service";
 import { retry } from 'rxjs/operators';
 import {Globalvar} from "../../constants/globalvar";
 import {unescape} from "querystring";
+import {animate, state, style, transition, trigger} from "@angular/animations";
 
 @Component({
     selector: 'app-study',
     templateUrl: './study.component.html',
-    styleUrls: ['./study.component.scss']
+    styleUrls: ['./study.component.scss'],
+    animations:[
+        trigger("showHide",[
+            state("show",style({
+                padding:"*",
+                height:'*',
+                opacity:1
+            })),
+            state("hide",style({
+                padding:"0",
+                opacity:0,
+                height:'0px',
+                margin:"0"
+            })),
+            transition("show => hide",[
+                animate('0.4s')
+            ]),
+            transition("hide => show",[
+                animate('0.3s')
+            ])
+        ])
+    ]
 })
 export class StudyComponent implements OnInit {
 
     test = Globalvar.ORDERBY;
+
+    isOpen = true;
+    testToggle(){
+        this.isOpen = !this.isOpen;
+    }
     studyConfig:StudyPageConfig = {
         tab:"study",
         accessLocation:"internal"
@@ -63,7 +90,6 @@ export class StudyComponent implements OnInit {
         private appService:AppService
     ) { }
 
-
     ngOnInit() {
         console.log("aet",this.applicationEntities);
         this.route.params.subscribe(params => {
@@ -71,6 +97,20 @@ export class StudyComponent implements OnInit {
           this.getApplicationEntities();
         });
     }
+    testShow = true;
+    fixedHeader = false;
+    @HostListener("window:scroll", [])
+    onWindowScroll(e) {
+        let html = document.documentElement;
+        if(html.scrollTop > 73){
+            this.fixedHeader = true;
+            this.testShow = false;
+        }else{
+            this.fixedHeader = false;
+            this.testShow = true;
+        }
+
+    }
 
     search(e){
         console.log("e",e);
@@ -83,10 +123,10 @@ export class StudyComponent implements OnInit {
     setSchema(){
         this.filter.filterSchemaMain.lineLength = undefined;
         this.filter.filterSchemaExpand.lineLength = undefined;
-        setTimeout(()=>{
+        // setTimeout(()=>{
             this.filter.filterSchemaMain  = this.service.getFilterSchema(this.studyConfig.tab,  this.applicationEntities.aes[this.studyConfig.accessLocation],this.filter.quantityText,false);
             this.filter.filterSchemaExpand  = this.service.getFilterSchema(this.studyConfig.tab, this.applicationEntities.aes[this.studyConfig.accessLocation],this.filter.quantityText,true);
-        },0);
+        // },0);
     }
 
     accessLocationChange(e){