From c08a2b35ba72ab6658f9fc9d81ba8f4ca6349f36 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Tue, 22 May 2018 20:58:12 -0400
Subject: [PATCH] fixing share modal

---
 .../share/share.gallery.component.html        | 188 +++++++++---------
 .../gallery/share/share.gallery.component.ts  |  21 +-
 2 files changed, 104 insertions(+), 105 deletions(-)

diff --git a/frontend/app/gallery/share/share.gallery.component.html b/frontend/app/gallery/share/share.gallery.component.html
index a34f460..f0b4df5 100644
--- a/frontend/app/gallery/share/share.gallery.component.html
+++ b/frontend/app/gallery/share/share.gallery.component.html
@@ -1,111 +1,103 @@
 <button id="shareButton" class="nav-link btn btn-default btn-link"
-        type="button" [disabled]="!enabled" (click)="showModal()">
+        type="button" [disabled]="!enabled" (click)="openModal(shareModal)">
   <span class="oi oi-share"></span>
   <ng-container i18n>Share</ng-container>
 </button>
 
-<!-- sharing Modal-->
-<div bsModal #shareModal="bs-modal"
-     class="modal fade" id="shareModal"
-     tabindex="-1" role="dialog" aria-labelledby="shareModalLabel"
-     [config]="{ backdrop: false }"
-     aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="shareModalLabel" i18n>Share</h5>
-        <button type="button" class="close" (click)="hideModal()" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+<ng-template #shareModal>
+  <!-- sharing Modal-->
+  <div class="modal-header">
+    <h5 class="modal-title" i18n>Share</h5>
+    <button type="button" class="close" (click)="hideModal()" data-dismiss="modal" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <div class="row">
+      <div class="col-7 col-sm-9">
+        <input id="shareLink"
+               name="shareLink"
+               placeholder="link"
+               class="form-control input-md"
+               type="text"
+               [ngModel]="url">
+      </div>
+      <div class="col-5 col-sm-3">
+        <button id="copyButton" name="copyButton"
+                ngxClipboard [cbContent]="url"
+                (cbOnSuccess)="onCopy()"
+                class="btn btn-primary btn-block" i18n>Copy
         </button>
       </div>
-      <div class="modal-body">
-        <div class="row">
-          <div class="col-7 col-sm-9">
-            <input id="shareLink"
-                   name="shareLink"
-                   placeholder="link"
-                   class="form-control input-md"
-                   type="text"
-                   [ngModel]="url">
-          </div>
-          <div class="col-5 col-sm-3">
-            <button id="copyButton" name="copyButton"
-                    ngxClipboard [cbContent]="url"
-                    (cbOnSuccess)="onCopy()"
-                    class="btn btn-primary btn-block" i18n>Copy
-            </button>
-          </div>
-        </div>
-        <hr/>
-        <div class="row">
-          <div class="col-4">
-            <label class="control-label" i18n>Sharing:</label>
-          </div>
-          <div class="col-8">
-            <input disabled type="text"
-                   class="full-width form-control"
-                   [ngModel]="currentDir">
-          </div>
-        </div>
+    </div>
+    <hr/>
+    <div class="row">
+      <div class="col-4">
+        <label class="control-label" i18n>Sharing:</label>
+      </div>
+      <div class="col-8">
+        <input disabled type="text"
+               class="full-width form-control"
+               [ngModel]="currentDir">
+      </div>
+    </div>
 
-        <div class="row">
-          <div class="col-4">
-            <label class="control-label" i18n>Include subfolders:</label>
-          </div>
-          <div class="col-8">
-            <bSwitch
-              class="switch"
-              name="includeSubfolders"
-              [switch-on-color]="'success'"
-              [switch-inverse]="'inverse'"
-              [switch-off-text]="text.No"
-              [switch-on-text]="text.Yes"
-              [switch-handle-width]="'100'"
-              [switch-label-width]="'20'"
-              (change)="update()"
-              [(ngModel)]="input.includeSubfolders">
-            </bSwitch>
-          </div>
-        </div>
+    <div class="row">
+      <div class="col-4">
+        <label class="control-label" i18n>Include subfolders:</label>
+      </div>
+      <div class="col-8">
+        <bSwitch
+          class="switch"
+          name="includeSubfolders"
+          [switch-on-color]="'success'"
+          [switch-inverse]="'inverse'"
+          [switch-off-text]="text.No"
+          [switch-on-text]="text.Yes"
+          [switch-handle-width]="'100'"
+          [switch-label-width]="'20'"
+          (change)="update()"
+          [(ngModel)]="input.includeSubfolders">
+        </bSwitch>
+      </div>
+    </div>
 
-        <div class="row">
-          <div class="col-4">
-            <label class="control-label">
-              <ng-container i18n>Password</ng-container>
-              :
-            </label>
-          </div>
-          <div class="col-8">
-            <input id="password"
-                   class="form-control"
-                   type="password"
-                   (change)="update()"
-                   [(ngModel)]="input.password"
-                   i18n-placeholder
-                   placeholder="Password">
-          </div>
-        </div>
+    <div class="row">
+      <div class="col-4">
+        <label class="control-label">
+          <ng-container i18n>Password</ng-container>
+          :
+        </label>
+      </div>
+      <div class="col-8">
+        <input id="password"
+               class="form-control"
+               type="password"
+               (change)="update()"
+               [(ngModel)]="input.password"
+               i18n-placeholder
+               placeholder="Password">
+      </div>
+    </div>
 
-        <div class="row">
-          <div class="col-4">
-            <label class="control-label" i18n>Valid:</label>
-          </div>
-          <div class="col-4" style="padding-right: 1px">
-            <input class="form-control" [(ngModel)]="input.valid.amount" (change)="update()"
-                   name="validAmount"
-                   type="number" min="0" step="1"/>
-          </div>
-          <div class="col-4" style="padding-left: 1px">
-            <select class="form-control" [(ngModel)]="input.valid.type" (change)="update()" name="validType"
-                    required>
-              <option [ngValue]="ValidityTypes.Minutes" i18n>Minutes</option>
-              <option [ngValue]="ValidityTypes.Hours" i18n>Hours</option>
-              <option [ngValue]="ValidityTypes.Days" i18n>Days</option>
-              <option [ngValue]="ValidityTypes.Months" i18n>Months</option>
-            </select>
-          </div>
-        </div>
+    <div class="row">
+      <div class="col-4">
+        <label class="control-label" i18n>Valid:</label>
+      </div>
+      <div class="col-4" style="padding-right: 1px">
+        <input class="form-control" [(ngModel)]="input.valid.amount" (change)="update()"
+               name="validAmount"
+               type="number" min="0" step="1"/>
+      </div>
+      <div class="col-4" style="padding-left: 1px">
+        <select class="form-control" [(ngModel)]="input.valid.type" (change)="update()" name="validType"
+                required>
+          <option [ngValue]="ValidityTypes.Minutes" i18n>Minutes</option>
+          <option [ngValue]="ValidityTypes.Hours" i18n>Hours</option>
+          <option [ngValue]="ValidityTypes.Days" i18n>Days</option>
+          <option [ngValue]="ValidityTypes.Months" i18n>Months</option>
+        </select>
       </div>
     </div>
   </div>
-</div>
+</ng-template>
diff --git a/frontend/app/gallery/share/share.gallery.component.ts b/frontend/app/gallery/share/share.gallery.component.ts
index 762e162..f6222fc 100644
--- a/frontend/app/gallery/share/share.gallery.component.ts
+++ b/frontend/app/gallery/share/share.gallery.component.ts
@@ -1,14 +1,15 @@
-import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {Component, OnDestroy, OnInit, TemplateRef} from '@angular/core';
 import {Utils} from '../../../../common/Utils';
 import {ShareService} from '../share.service';
 import {GalleryService} from '../gallery.service';
 import {ContentWrapper} from '../../../../common/entities/ConentWrapper';
 import {SharingDTO} from '../../../../common/entities/SharingDTO';
-import {ModalDirective} from 'ngx-bootstrap/modal';
 import {Config} from '../../../../common/config/public/Config';
 import {NotificationService} from '../../model/notification.service';
 import {DirectoryDTO} from '../../../../common/entities/DirectoryDTO';
 import {I18n} from '@ngx-translate/i18n-polyfill';
+import {BsModalService} from 'ngx-bootstrap/modal';
+import {BsModalRef} from 'ngx-bootstrap/modal/bs-modal-ref.service';
 
 
 @Component({
@@ -17,7 +18,6 @@ import {I18n} from '@ngx-translate/i18n-polyfill';
   styleUrls: ['./share.gallery.component.css'],
 })
 export class GalleryShareComponent implements OnInit, OnDestroy {
-  @ViewChild('shareModal') public childModal: ModalDirective;
 
   enabled = true;
   url = '';
@@ -36,6 +36,8 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
   passwordProtection = false;
   ValidityTypes: any;
 
+  modalRef: BsModalRef;
+
   text = {
     Yes: 'Yes',
     No: 'No'
@@ -44,7 +46,8 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
   constructor(private _sharingService: ShareService,
               public _galleryService: GalleryService,
               private  _notification: NotificationService,
-              public i18n: I18n) {
+              public i18n: I18n,
+              private modalService: BsModalService) {
     this.ValidityTypes = ValidityTypes;
 
     this.text.Yes = i18n('Yes');
@@ -99,10 +102,13 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
     this.url = Config.Client.publicUrl + '/share/' + this.sharing.sharingKey;
   }
 
-  async showModal() {
+  async openModal(template: TemplateRef<any>) {
     await this.get();
     this.input.password = '';
-    this.childModal.show();
+    if (this.modalRef) {
+      this.modalRef.hide();
+    }
+    this.modalRef = this.modalService.show(template);
     document.body.style.paddingRight = '0px';
   }
 
@@ -111,7 +117,8 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
   }
 
   public hideModal() {
-    this.childModal.hide();
+    this.modalRef.hide();
+    this.modalRef = null;
     this.sharing = null;
   }