Merged feature/albums into develop

src/app/components/image-gallery/image-gallery.component.html

@@ -14,16 +14,23 @@
                     <i class="fa fa-download"></i>
                   </span>
                 </a>
-                <a *ngIf="!isFavourite(pic)"  class="button" (click)="addToFavourite(pic)">
-                  <span class="icon">
-                    <i class="fa fa-heart"></i>
-                  </span>
-                </a>
-                <a *ngIf="isFavourite(pic)"  class="button is-danger" (click)="removeFromFavourite(pic)">
-                  <span class="icon">
-                    <i class="fa fa-heart"></i>
-                  </span>
-                </a>
+                <span *ngIf="pic.source.name !='Pixabay'">
+                  <a *ngIf="!isFavourite(pic)"  class="button" (click)="addToFavourite(pic)">
+                    <span class="icon">
+                      <i class="fa fa-heart"></i>
+                    </span>
+                  </a>
+                  <a *ngIf="isFavourite(pic)"  class="button is-danger" (click)="removeFromFavourite(pic)">
+                    <span class="icon">
+                      <i class="fa fa-heart"></i>
+                    </span>
+                  </a>
+                  <a  class="button is-primary" (click)="toggleAddToAlbum(pic)">
+                    <span class="icon">
+                      <i class="fa fa-plus-circle"></i>
+                    </span>
+                  </a>
+                </span>
                 <a class="button is-info" (click)="select(pic)">
                   <span class="icon">
                     <i class="fa fa-eye"></i>
@@ -58,4 +65,38 @@
     <app-image-viewer *ngIf="picStore.selectedPic" [pic]="picStore.selectedPic"></app-image-viewer>
   </div>
   <button class="modal-close" (click)="toggleViewer()"></button>
+</div>
+
+<div *ngIf="showAddToAlbum"  class="modal {{showAddToAlbum}}">
+  <div class="modal-background" (click)="toggleAddToAlbum()"></div>
+  <div class="modal-content">
+    <div class="box">
+      <article class="media">
+        <figure class="media-left">
+          <p class="image">
+            <img [src]="picStore.selectedPic.thumbnailUrl">
+          </p>
+        </figure>
+        <div class="media-content">
+          <div class="content">
+            <nav class="menu">
+              <p class="menu-label">Add to</p>
+              <ul class="menu-list">
+                <ng-container *ngFor="let collection of collections">
+                  <li *ngIf="!isInCollection(picStore.selectedPic, collection)" ><a (click)="addToAlbum(picStore.selectedPic,collection)">{{collection}}</a></li> 
+                </ng-container>
+              </ul>
+              <p class="menu-label">Remove From</p>
+              <ul class="menu-list">
+                <ng-container *ngFor="let collection of collections">
+                  <li *ngIf="isInCollection(picStore.selectedPic, collection)" ><a (click)="removeFromAlbum(picStore.selectedPic,collection)">{{collection}}</a></li> 
+                </ng-container>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+  <button class="modal-close" (click)="toggleAddToAlbum()"></button>
 </div>

src/app/components/image-gallery/image-gallery.component.scss

@@ -64,6 +64,19 @@ app-toolbar {
   margin-right: 20px;
   top: 20px;
 }
+.modal{
+  .menu{
+    ul{
+      list-style: none;
+    }
+  }
+  .media{
+    img{
+      max-width: 200px;
+      height: auto;
+    }
+  }
+}
 
 @media(max-width: 1600px){
   .pics{

src/app/components/image-gallery/image-gallery.component.ts

@@ -17,6 +17,8 @@ export class ImageGalleryComponent implements OnInit {
   scrollComplete:boolean = true;
   fullWidth='';
   isActive='';
+  showAddToAlbum='';
+  collections:any;
   constructor(public api: ApiService, public electron:ElectronService, public picStore: PicStore, public store: LocalStore){
     store.showSidebar.subscribe(show=>{
       this.fullWidth = (show)?'':'full-width';
@@ -26,6 +28,7 @@ export class ImageGalleryComponent implements OnInit {
       console.log(this.pics);
       this.scrollComplete = true;
     })
+    store.collections.subscribe(collections=>this.collections = collections.collections);
   }
   nextPage(){
     this.api.nextPage();
@@ -58,10 +61,25 @@ export class ImageGalleryComponent implements OnInit {
   addToFavourite(pic){
     this.store.addPicToCollection(pic,LocalStore.KEY_FAVOURITE)
   }
+  toggleAddToAlbum(pic){
+    this.picStore.selectedPic = pic;
+    this.showAddToAlbum = (this.showAddToAlbum === '')?'is-active':'';
+  }
+  addToAlbum(pic,album){
+    this.store.addPicToCollection(pic,album);
+    this.toggleAddToAlbum(pic);
+  }
+  removeFromAlbum(pic,album){
+    this.store.removeFromCollection(pic,album);
+    this.toggleAddToAlbum(pic);
+  }
   removeFromFavourite(pic){
     this.store.removeFromCollection(pic, LocalStore.KEY_FAVOURITE);
   }
   isFavourite(pic){
     return this.store.isInCollection(pic,LocalStore.KEY_FAVOURITE);
   }
+  isInCollection(pic,album){
+    return this.store.isInCollection(pic, album);
+  }
 }

src/app/components/sidebar/sidebar.component.html

@@ -20,7 +20,14 @@
     <div class="box sidebar-box">
       <div class="sidebar-sources">
         <aside class="menu">
-          <p class="menu-label">Albums</p>
+          <div style="padding: 0; margin: 0;" class="level">
+            <span class="level-left"><p class="menu-label">Albums</p></span>
+            <span class="level-right">
+              <a (click)="toggleAddAlbum()">
+                <span class="icon"><i class="fa fa-plus-circle"></i></span>
+              </a>
+            </span>
+          </div>
           <ul class="menu-list">
             <li *ngFor="let collection of collections.collections"><a (click)="selectCollection(collection)">{{collection}}</a></li> 
           </ul>
@@ -42,7 +49,7 @@
   </div>
 
 
-  <div class="modal {{isActive}}">
+  <div id="settings-modal" class="modal {{isActive}}">
     <div class="modal-background" (click)="toggleSettings()"></div>
     <div class="modal-content">
       <div class="box">
@@ -84,4 +91,22 @@
       </div>
     </div>
     <button class="modal-close" (click)="toggleSettings()"></button>
+  </div>
+
+  <div id="add-album-modal" class="modal {{showAddAlbum}}">
+    <div class="modal-background" (click)="toggleAddAlbum()"></div>
+    <div class="modal-content">
+      <div class="panel">
+        <p class="panel-heading">Add Album</p>
+        <div class="panel-block">
+            <input class="input" type="text" placeholder="Name your album" [(ngModel)]="albumName">
+        </div>
+        <div class="panel-block">
+            <a class="button is-info" (click)="saveAlbum()">
+              Save
+            </a>
+        </div>
+      </div>
+    </div>
+    <button class="modal-close" (click)="toggleAddAlbum()"></button>
   </div>

src/app/components/sidebar/sidebar.component.scss

@@ -22,3 +22,7 @@ $white: #ffffff;
     background-color: rgba($background,0.8);
   }
 }
+
+.panel-block{
+  background: #ffffff;
+}

src/app/components/sidebar/sidebar.component.ts

@@ -14,7 +14,9 @@ export class SidebarComponent implements OnInit {
   sources:any=[];
   collections:any;
   isActive='';
+  showAddAlbum='';
   downloadPath;
+  albumName;
   constructor(public store:LocalStore, public picStore: PicStore, public electron: ElectronService, public zone: NgZone) {
     for (var key in SOURCES) {
       this.sources.push(SOURCES[key]);
@@ -35,6 +37,15 @@ export class SidebarComponent implements OnInit {
   toggleSettings(){
     this.isActive = (this.isActive === '')?'is-active':'';
   }
+  toggleAddAlbum(){
+    this.showAddAlbum = (this.showAddAlbum === '')?'is-active':'';
+  }
+  saveAlbum(){
+    if(!this.albumName)return;
+    this.store.addCollection(this.albumName);
+    this.albumName = null;
+    this.toggleAddAlbum();
+  }
   changeDownloadPath(){
     this.electron.changeDownloadPath();
   }

src/app/components/toolbar/toolbar.component.html

@@ -12,8 +12,14 @@
    <span class="level-item" *ngIf="api.showPrev() && api.loadComplete()" >
     <a class="button is-primary" (click)="prevPage()">Previous</a>
   </span>
+  <span class="level-item" *ngIf="showDeleteCollection()" >
+    <a class="button is-success" (click)="editCollection()">Edit</a>
+  </span>
 </div>
 <div class="level-right">
+  <span class="level-item" *ngIf="showDeleteCollection()" >
+    <a class="button is-danger" (click)="deleteCollection()">Delete</a>
+  </span>
   <span class="level-item" *ngIf="api.loadComplete() && api.showNext()" >
     <a class="button is-primary" (click)="nextPage()">Next</a>
   </span>
@@ -26,3 +32,37 @@
       </p>
   </span>
 </div>
+
+<div class="modal {{deleteConfirm}}">
+  <div class="modal-background" (click)="deleteConfirm=''"></div>
+  <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Delete Album</p>
+        <button class="delete" (click)="deleteConfirm=''"></button>
+      </header>
+      <section class="modal-card-body">
+        <p class="title">Are you sure you want to delete album {{picStore.selectedCollection}}?</p>
+      </section>
+      <footer class="modal-card-foot">
+        <a class="button is-danger" (click)="deleteCollection(true)">Delete</a>
+        <a class="button is-info" (click)="deleteConfirm=''">Cancel</a>
+      </footer>
+    </div>
+</div>
+
+<div *ngIf="editDialog != ''"  class="modal {{editDialog}}">
+  <div class="modal-background" (click)="editDialog=''"></div>
+  <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Delete Album</p>
+        <button class="delete" (click)="editDialog=''"></button>
+      </header>
+      <section class="modal-card-body">
+        <input class="input" [(ngModel)]="collectionName">
+      </section>
+      <footer class="modal-card-foot">
+        <a class="button is-success" (click)="editCollection(true)">Save</a>
+        <a class="button is-danger" (click)="editDialog=''">Cancel</a>
+      </footer>
+    </div>
+</div>

src/app/components/toolbar/toolbar.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { LocalStore } from '../../services/local-store';
 import { ApiService } from '../../services/api.service';
+import { PicStore } from '../../services/pic-store/pic-store';
 
 @Component({
   selector: 'app-toolbar',
@@ -11,7 +12,10 @@ export class ToolbarComponent implements OnInit {
   @Output() search = new EventEmitter();
   query: string;
   showSidebar:boolean;
-  constructor(public store: LocalStore, private api: ApiService) {
+  deleteConfirm: string = '';
+  editDialog: string = '';
+  collectionName: string = '';
+  constructor(public store: LocalStore, private api: ApiService, private picStore: PicStore) {
     store.showSidebar.subscribe(show=>this.showSidebar = show);
    }
 
@@ -33,4 +37,25 @@ export class ToolbarComponent implements OnInit {
   prevPage(){
     this.api.prevPage();
   }
+  showDeleteCollection(){
+    return (this.picStore.selectedCollection != null) && this.picStore.selectedCollection != 'Favourite';
+  }
+  deleteCollection(confirmed?:boolean){
+    if(confirmed){
+      this.store.removeCollection(this.picStore.selectedCollection);
+      this.deleteConfirm = '';
+      this.picStore.initPics();
+    }else{
+      this.deleteConfirm = 'is-active'
+    }
+  }
+  editCollection(confirmed?:boolean){
+    if(confirmed){
+      this.store.editCollection(this.picStore.selectedCollection, this.collectionName);
+      this.editDialog = '';
+    }else{
+      this.collectionName = this.picStore.selectedCollection;
+      this.editDialog = 'is-active';
+    }
+  }
 }

src/app/services/local-store.ts

@@ -60,10 +60,12 @@ export class LocalStore{
         this._collections.next(collections);
     }
     isInCollection(pic, collection){
+        collection = collection.toLowerCase();
         let item = this._collections.getValue()[collection].find(item => item.foundAt == pic.foundAt);
         return (item !== undefined);
     }
     removeFromCollection(pic, collection){
+        collection = collection.toLowerCase();
         let pics = this._collections.getValue()[collection];
         let item = pics.find(item => item.fullUrl === pic.fullUrl);
         pics.splice(pics.indexOf(item), 1);
@@ -83,7 +85,26 @@ export class LocalStore{
         this.storeCollections(collections);
         this.updateCollections(collections);
     }
+    removeCollection(collection:string){
+        var key = collection.toLowerCase();
+        var collections = this._collections.getValue();
+        collections.collections.splice(collections.collections.indexOf(collection),1);
+        delete collections[key];
+        this.storeCollections(collections);
+        this.updateCollections(collections);
+    }
+    editCollection(oldName:string,newName:string){
+        var key = oldName.toLowerCase();
+        var newKey = newName.toLowerCase();
+        var collections = this._collections.getValue();
+        collections[newKey] = collections[key];
+        delete collections[key];
+        collections.collections.splice(collections.collections.indexOf(oldName),1, newName);
+        this.storeCollections(collections);
+        this.updateCollections(collections);
+    }
     addPicToCollection(pic, collection){
+        collection = collection.toLowerCase();
         var collections = this._collections.getValue();
         collections[collection].push(pic);
         this.storeCollections(collections);