From 6093201b4337675800e91777172f26f259de1422 Mon Sep 17 00:00:00 2001
From: Yunlong Li <yunlong.li@csiro.au>
Date: Thu, 9 Nov 2023 10:16:18 +0800
Subject: [PATCH] AUS-4028 make popup windows movable

---
 .../querier/querier.modal.component.html      | 10 ++++----
 .../querier/querier.modal.component.ts        | 23 +++++++++++++++----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/app/modalwindow/querier/querier.modal.component.html b/src/app/modalwindow/querier/querier.modal.component.html
index ee5508c4..f92cfe1d 100644
--- a/src/app/modalwindow/querier/querier.modal.component.html
+++ b/src/app/modalwindow/querier/querier.modal.component.html
@@ -1,7 +1,8 @@
 
 <!-- Modal for querier-->
-<div class="modal-header">
-	<h1 class="page-header">Response: <small>Feature Info result</small></h1>
+<div cdkDrag cdkDragRootElement=".modal-content" #childElement cdkDragBoundary="body">
+<div class="modal-header" cdkDragHandle>
+	<h1 class="page-header">Feature Information</h1>
 </div>
 <div class="modal-body">
 
@@ -28,7 +29,7 @@ <h2 style="margin-top:10px;">No results found, try zooming to improve accuracy</
 				</div>
 				<div *ngFor="let doc of docs | querierFeatureSearchPipe:selectLayerNameFilter; let i = index;" class="card card-default card-bordered">
 					<!-- BEGIN card-header -->
-					<div class="card-header">
+					<div class="card-header" >
 						<h4 class="card-title">
 							<a (click)="transformToHtml(doc)" *ngIf="doc.node_name !== null" class="accordion-link" data-toggle="collapse" href="#doc-collapse{{i}}">
 								{{doc.layer.name}}{{doc.node_name ? ': ' + doc.node_name : ''}}&nbsp;<i *ngIf="transformingToHtml[doc.key] && doc.expanded" class="fa fa-spinner fa-spin"></i>
@@ -120,7 +121,7 @@ <h4 *ngIf="doc.analytic" class="card-title">Analytic</h4>
 				<!-- BEGIN card -->
 				<div *ngFor="let html of htmls | querierFeatureSearchPipe:selectLayerNameFilter; let i = index" class="card card-default card-bordered">
 					<!-- BEGIN card-header -->
-					<div class="card-header">
+					<div class="card-header" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
 						<h4 class="card-title">
 							<a class="accordion-link"  data-toggle="collapse" href="#html-collapse{{i}}">
 								{{html.key}}
@@ -144,3 +145,4 @@ <h4 class="card-title">
 <div class="modal-footer">
 	<button type="button" class="btn btn-light" (click)="bsModalRef.hide()">Close</button>
 </div>
+</div>
\ No newline at end of file
diff --git a/src/app/modalwindow/querier/querier.modal.component.ts b/src/app/modalwindow/querier/querier.modal.component.ts
index ee182546..37c7ba97 100644
--- a/src/app/modalwindow/querier/querier.modal.component.ts
+++ b/src/app/modalwindow/querier/querier.modal.component.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/member-ordering */
-import { ApplicationRef, ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
+import { ApplicationRef, ChangeDetectorRef, Component, Inject, OnInit, ElementRef, ViewChild, AfterViewInit, Renderer2, HostListener } from '@angular/core';
 import { environment } from '../../../environments/environment';
 import { config } from '../../../environments/config';
 import { ref } from '../../../environments/ref';
@@ -13,7 +13,6 @@ import * as _ from 'lodash';
 import * as X2JS from 'x2js';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MSCLService } from '../layeranalytic/mscl/mscl.service';
-
 export class FileNode {
   children: FileNode[];
   filename: string;
@@ -34,7 +33,8 @@ interface FlatNode {
   styleUrls: ['../modalwindow.scss']
 })
 
-export class QuerierModalComponent  implements OnInit {
+export class QuerierModalComponent  implements OnInit, AfterViewInit {
+  @ViewChild('childElement', { static: false }) childElement: ElementRef;
   public downloading: boolean;
   public transformingToHtml: Map<string, boolean> = new Map<string, boolean>();
   public docs: QuerierInfoModel[] = [];
@@ -84,14 +84,29 @@ export class QuerierModalComponent  implements OnInit {
    * If this was not done the two components would not see the same state of the service variable "isAnalytic"
   */
   public flagNVCLAnalytic: boolean;
+  private screenWidth: number;
+
 
   constructor(public nvclService: NVCLService, public bsModalRef: BsModalRef, public csClipboardService: CsClipboardService,
         private manageStateService: ManageStateService, private gmlParserService: GMLParserService,
         private http: HttpClient, @Inject('env') private env, private sanitizer: DomSanitizer,
         private changeDetectorRef: ChangeDetectorRef, private appRef: ApplicationRef,
-        private msclService: MSCLService) {
+        private msclService: MSCLService,private renderer: Renderer2, private elementRef: ElementRef) {
     this.analyticMap = ref.analytic;
     this.flagNVCLAnalytic = false;
+    this.screenWidth = window.innerWidth;
+  }
+  ngAfterViewInit(): void {
+    const parentElement = this.childElement.nativeElement.parentElement.parentElement;
+    const left = this.screenWidth
+    const height = window.innerHeight
+    this.renderer.setStyle(parentElement, 'resize', 'both');
+    this.renderer.setStyle(parentElement, 'overflow', 'auto');
+    this.renderer.setStyle(parentElement, 'width', '500px');
+    this.renderer.setStyle(parentElement, 'min-height', '400px');
+    this.renderer.setStyle(parentElement, 'min-width', '400px');
+    this.renderer.setStyle(parentElement, 'left', left/2 + 'px');
+    this.renderer.setStyle(parentElement, 'height', height*0.8  + 'px');
   }
 
   ngOnInit() {