gui for edit collection function

lohanitech · Feb 28, 2017 · 28711de · 28711de
1 parent b5a7b93
commit 28711de
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/src/app/components/toolbar/toolbar.component.html b/src/app/components/toolbar/toolbar.component.html
@@ -49,3 +49,20 @@
       </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>
diff --git a/src/app/components/toolbar/toolbar.component.ts b/src/app/components/toolbar/toolbar.component.ts
@@ -13,6 +13,8 @@ export class ToolbarComponent implements OnInit {
   query: string;
   showSidebar:boolean;
   deleteConfirm: string = '';
+  editDialog: string = '';
+  collectionName: string = '';
   constructor(public store: LocalStore, private api: ApiService, private picStore: PicStore) {
     store.showSidebar.subscribe(show=>this.showSidebar = show);
    }
@@ -47,4 +49,13 @@ export class ToolbarComponent implements OnInit {
       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';
+    }
+  }
 }