From 85505970b7bb197f895ce72d0f30d3d7dedb8050 Mon Sep 17 00:00:00 2001
From: Braun Patrik <braun.patrik@aut.bme.hu>
Date: Wed, 21 Jun 2017 13:47:21 +0200
Subject: [PATCH] improving folder navigation

---
 frontend/app/gallery/gallery.component.html   | 16 ++--
 frontend/app/gallery/gallery.component.ts     | 21 +++---
 frontend/app/gallery/gallery.service.ts       | 73 ++++++++++---------
 .../gallery/map/map.gallery.component.html    | 36 ++++-----
 4 files changed, 78 insertions(+), 68 deletions(-)

diff --git a/frontend/app/gallery/gallery.component.html b/frontend/app/gallery/gallery.component.html
index 6cca827c..9f50c87a 100644
--- a/frontend/app/gallery/gallery.component.html
+++ b/frontend/app/gallery/gallery.component.html
@@ -5,21 +5,21 @@
     <gallery-search #search *ngIf="showSearchBar"></gallery-search>
   </div>
 
-  <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.directory">
-    <gallery-navbar [directory]="_galleryService.content.directory"></gallery-navbar>
+  <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.directory">
+    <gallery-navbar [directory]="_galleryService.content.value.directory"></gallery-navbar>
 
     <gallery-directory *ngFor="let directory of directories"
                        [directory]="directory"></gallery-directory>
 
-    <gallery-map [photos]="_galleryService.content.directory.photos"></gallery-map>
-    <gallery-grid [photos]="_galleryService.content.directory.photos" [lightbox]="lightbox"></gallery-grid>
+    <gallery-map [photos]="_galleryService.content.value.directory.photos"></gallery-map>
+    <gallery-grid [photos]="_galleryService.content.value.directory.photos" [lightbox]="lightbox"></gallery-grid>
   </div>
 
-  <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.searchResult">
+  <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.searchResult">
     <ol class="breadcrumb">
       <li class="active">
         Searching for:
-        <span [ngSwitch]="_galleryService.content.searchResult.searchType">
+        <span [ngSwitch]="_galleryService.content.value.searchResult.searchType">
                         <span *ngSwitchCase="0" class="glyphicon glyphicon-picture"></span>
                         <span *ngSwitchCase="1" class="glyphicon glyphicon-folder-open"></span>
                         <span *ngSwitchCase="2" class="glyphicon glyphicon-tag"></span>
@@ -29,11 +29,11 @@
       </li>
     </ol>
 
-    <gallery-map [photos]="_galleryService.content.searchResult.photos"></gallery-map>
+    <gallery-map [photos]="_galleryService.content.value.searchResult.photos"></gallery-map>
 
     <div *ngFor="let directory of directories">
       <gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
     </div>
-    <gallery-grid [photos]="_galleryService.content.searchResult.photos" [lightbox]="lightbox"></gallery-grid>
+    <gallery-grid [photos]="_galleryService.content.value.searchResult.photos" [lightbox]="lightbox"></gallery-grid>
   </div>
 </app-frame>
diff --git a/frontend/app/gallery/gallery.component.ts b/frontend/app/gallery/gallery.component.ts
index 79837fb2..283b9e3d 100644
--- a/frontend/app/gallery/gallery.component.ts
+++ b/frontend/app/gallery/gallery.component.ts
@@ -35,12 +35,16 @@ export class GalleryComponent implements OnInit {
       return;
     }
 
-    const dirSorter = (a: DirectoryDTO, b: DirectoryDTO) => {
-      return a.name.localeCompare(b.name);
-    };
+    this._galleryService.content.subscribe((content) => {
+      const dirSorter = (a: DirectoryDTO, b: DirectoryDTO) => {
+        return a.name.localeCompare(b.name);
+      };
+      const dirs = <DirectoryDTO[]>(content.searchResult || content.directory || {directories: []}).directories;
+      this.directories = dirs.sort(dirSorter);
+    });
 
     this._route.params
-      .subscribe(async (params: Params) => {
+      .subscribe((params: Params) => {
         let searchText = params['searchText'];
         if (searchText && searchText != "") {
           console.log("searching");
@@ -49,13 +53,11 @@ export class GalleryComponent implements OnInit {
           if (typeString && typeString != "") {
             console.log("with type");
             let type: SearchTypes = <any>SearchTypes[typeString];
-            await this._galleryService.search(searchText, type);
-            this.directories = this._galleryService.content.searchResult.directories.sort(dirSorter);
+            this._galleryService.search(searchText, type);
             return;
           }
 
-          await this._galleryService.search(searchText);
-          this.directories = this._galleryService.content.searchResult.directories.sort(dirSorter);
+          this._galleryService.search(searchText);
           return;
         }
 
@@ -63,8 +65,7 @@ export class GalleryComponent implements OnInit {
         let directoryName = params['directory'];
         directoryName = directoryName ? directoryName : "";
 
-        await this._galleryService.getDirectory(directoryName);
-        this.directories = this._galleryService.content.directory.directories.sort(dirSorter);
+        this._galleryService.getDirectory(directoryName);
 
       });
 
diff --git a/frontend/app/gallery/gallery.service.ts b/frontend/app/gallery/gallery.service.ts
index e378d113..c354e9a7 100644
--- a/frontend/app/gallery/gallery.service.ts
+++ b/frontend/app/gallery/gallery.service.ts
@@ -6,59 +6,64 @@ import {PhotoDTO} from "../../../common/entities/PhotoDTO";
 import {DirectoryDTO} from "../../../common/entities/DirectoryDTO";
 import {SearchTypes} from "../../../common/entities/AutoCompleteItem";
 import {GalleryCacheService} from "./cache.gallery.service";
+import {BehaviorSubject} from "rxjs/BehaviorSubject";
 
 @Injectable()
 export class GalleryService {
 
-  public content: ContentWrapper;
+  public content: BehaviorSubject<ContentWrapper>;
   private lastDirectory: DirectoryDTO;
   private searchId: any;
 
   constructor(private networkService: NetworkService, private galleryCacheService: GalleryCacheService) {
-    this.content = new ContentWrapper();
+    this.content = new BehaviorSubject<ContentWrapper>(new ContentWrapper());
   }
 
   lastRequest: { directory: string } = {
     directory: null
   };
 
-  public getDirectory(directoryName: string): Promise<Message<ContentWrapper>> {
-    this.content = new ContentWrapper();
+  public async getDirectory(directoryName: string): Promise<Message<ContentWrapper>> {
+    const content = new ContentWrapper();
 
-    this.content.directory = this.galleryCacheService.getDirectory(directoryName);
-    this.content.searchResult = null;
+    content.directory = this.galleryCacheService.getDirectory(directoryName);
+    content.searchResult = null;
+
+    this.content.next(content);
     this.lastRequest.directory = directoryName;
-    return this.networkService.getJson("/gallery/content/" + directoryName).then(
-      (message: Message<ContentWrapper>) => {
-        if (!message.error && message.result) {
 
-          this.galleryCacheService.setDirectory(message.result.directory); //save it before adding references 
+    let message: Message<ContentWrapper> = await this.networkService.getJson<Message<ContentWrapper>>("/gallery/content/" + directoryName);
 
-          if (this.lastRequest.directory != directoryName) {
-            return;
-          }
+    if (!message.error && message.result) {
 
-          //Add references
-          let addDir = (dir: DirectoryDTO) => {
-            dir.photos.forEach((photo: PhotoDTO) => {
-              photo.directory = dir;
-            });
+      this.galleryCacheService.setDirectory(message.result.directory); //save it before adding references
 
-            dir.directories.forEach((directory: DirectoryDTO) => {
-              addDir(directory);
-              directory.parent = dir;
-            });
+      if (this.lastRequest.directory != directoryName) {
+        return;
+      }
+
+      //Add references
+      let addDir = (dir: DirectoryDTO) => {
+        dir.photos.forEach((photo: PhotoDTO) => {
+          photo.directory = dir;
+        });
+
+        dir.directories.forEach((directory: DirectoryDTO) => {
+          addDir(directory);
+          directory.parent = dir;
+        });
 
 
-          };
-          addDir(message.result.directory);
+      };
+      addDir(message.result.directory);
 
 
-          this.lastDirectory = message.result.directory;
-          this.content = message.result;
-        }
-        return message;
-      });
+      this.lastDirectory = message.result.directory;
+      this.content.next(message.result);
+    }
+
+    return message;
+
   }
 
   //TODO: cache
@@ -76,7 +81,7 @@ export class GalleryService {
     return this.networkService.getJson(queryString).then(
       (message: Message<ContentWrapper>) => {
         if (!message.error && message.result) {
-          this.content = message.result;
+          this.content.next(message.result);
         }
         return message;
       });
@@ -85,8 +90,10 @@ export class GalleryService {
   //TODO: cache (together with normal search)
   public instantSearch(text: string): Promise<Message<ContentWrapper>> {
     if (text === null || text === '') {
-      this.content.directory = this.lastDirectory;
-      this.content.searchResult = null;
+      const content = new ContentWrapper();
+      content.directory = this.lastDirectory;
+      content.searchResult = null;
+      this.content.next(content);
       clearTimeout(this.searchId);
       return Promise.resolve(new Message(null, null));
     }
@@ -103,7 +110,7 @@ export class GalleryService {
     return this.networkService.getJson("/instant-search/" + text).then(
       (message: Message<ContentWrapper>) => {
         if (!message.error && message.result) {
-          this.content = message.result;
+          this.content.next(message.result);
         }
         return message;
       });
diff --git a/frontend/app/gallery/map/map.gallery.component.html b/frontend/app/gallery/map/map.gallery.component.html
index f4017fe0..7cbcd853 100644
--- a/frontend/app/gallery/map/map.gallery.component.html
+++ b/frontend/app/gallery/map/map.gallery.component.html
@@ -1,19 +1,21 @@
-<gallery-map-lightbox [photos]="photos"></gallery-map-lightbox>
-<div id="map" #map>
+<ng-template [ngIf]="mapPhotos.length>0">
+  <gallery-map-lightbox [photos]="photos"></gallery-map-lightbox>
+  <div id="map" #map>
     <agm-map
-        (click)="click()"
-        [disableDefaultUI]="true"
-        [zoomControl]="false"
-        [streetViewControl]="false"
-        [usePanning]="false"
-        [draggable]="false"
-        [zoom]="0"
-        [latitude]="mapCenter.latitude"
-        [longitude]="mapCenter.longitude">
-        <agm-marker
-            *ngFor="let photo of mapPhotos"
-            [latitude]="photo.latitude"
-            [longitude]="photo.longitude">
-        </agm-marker>
+      (click)="click()"
+      [disableDefaultUI]="true"
+      [zoomControl]="false"
+      [streetViewControl]="false"
+      [usePanning]="false"
+      [draggable]="false"
+      [zoom]="0"
+      [latitude]="mapCenter.latitude"
+      [longitude]="mapCenter.longitude">
+      <agm-marker
+        *ngFor="let photo of mapPhotos"
+        [latitude]="photo.latitude"
+        [longitude]="photo.longitude">
+      </agm-marker>
     </agm-map>
-</div>
\ No newline at end of file
+  </div>
+</ng-template>