bug fixes in pin edit

aviabird · Dec 14, 2016 · 249593b · 249593b
1 parent 57f78ed
commit 249593b
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 57 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -31,6 +31,8 @@ import { HttpService } from './services/http';
 import { LoaderService } from './services/loader';
 import { NotificationEffects } from './effects/notification';
 import { ToasterService, ToasterModule } from 'angular2-toaster/angular2-toaster';
+import { CanActivateViaAuthGuard } from './guards/authenticated';
+import { CanEditPinGuard } from './guards/can-edit-pin';
 
 // Must export the config
 export const firebaseConfig = {
@@ -93,6 +95,8 @@ export const firebaseConfig = {
       deps: [ XHRBackend, RequestOptions, LoaderService, Store]
     },
     ToasterService,
+    CanActivateViaAuthGuard,
+    CanEditPinGuard
   ],
   bootstrap: [AppComponent]
 })

diff --git a/src/app/components/pins/pin-detail/pin-detail.component.html b/src/app/components/pins/pin-detail/pin-detail.component.html
@@ -1,6 +1,6 @@
 <pin-modal title='' klass='pinModal-{{pinIndex}}' size='large'>
   <div *ngIf="(pin | async)" class="row">
-    <div class="large-6 columns">
+    <div class="large-5 columns">
       <a [href]="(pin | async).url" target="_blank">
         <h5>
           {{(pin | async).name}}
@@ -13,7 +13,22 @@ <h5>
       <br>
     </div>
 
-    <div class="large-6 columns">
+    <div class="large-7 columns">
+      <ul class="dropdown menu pull-right" data-dropdown-menu="" *ngIf="canAccessPin | async">
+        <li class="is-dropdown-submenu-parent">
+          <div>
+            ...
+            <span class="fa fa-cog"></span>
+          </div>
+          <ul class="menu">
+            <li>
+              <a (click)="onEditPin()">
+                Edit
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
       <br>
       <p>
         {{(pin | async).description}}

diff --git a/src/app/components/pins/pin-detail/pin-detail.component.scss b/src/app/components/pins/pin-detail/pin-detail.component.scss
@@ -44,7 +44,8 @@ p{
 }
 
 #message{
-  background: rgba(0, 0, 0, 0.03);
+  background: rgba(255, 255, 255, 0.78) !important;
+  box-shadow: inset 0 0 3px #aaa;
   border: none;
   border-radius: 27px;
 }
diff --git a/src/app/components/pins/pin-detail/pin-detail.component.ts b/src/app/components/pins/pin-detail/pin-detail.component.ts
@@ -10,6 +10,7 @@ import * as comment from '../../../actions/comment';
 import { User } from '../../../models/user';
 import { Comment } from '../../../models/comment';
 import { FormArray, FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
+import { go } from '@ngrx/router-store';
 
 declare var $:any;
 declare var Foundation:any;
@@ -28,6 +29,7 @@ export class PinDetailComponent implements OnInit {
   private userIsAuthenticated: Observable<boolean>;
   private authUser: Observable<User>;
   private commentForm: FormGroup;
+  private canAccessPin: Observable<boolean>;
 
   constructor(
     private router: Router,
@@ -39,6 +41,7 @@ export class PinDetailComponent implements OnInit {
     this.comments = this.store.select(fromRoot.getSelectedPinComments);
     this.userIsAuthenticated = this.store.select(fromRoot.getUserAuthStatus);
     this.authUser = this.store.select(fromRoot.getAuthUser);
+    this.canAccessPin = this.store.select(fromRoot.getPinAccessStatus);
   }
 
   ngOnInit() {
@@ -117,4 +120,8 @@ export class PinDetailComponent implements OnInit {
     }
   }
 
+  onEditPin() {
+    this.store.dispatch(go(`/pins/${this.pinIndex}/edit`))
+  }
+
 }
diff --git a/src/app/components/pins/pin-edit/pin-edit.component.html b/src/app/components/pins/pin-edit/pin-edit.component.html
@@ -1,26 +1,26 @@
 <pin-modal [title]='title' klass='pinEditModal' size='large'>
-  <div class="large-4 columns callout">
+  <div class="large-5 columns callout">
     <legend>Preview Pin</legend>
     <div class="pin-image">
       <div class="pin-url-wrapper">
-        <a [href]="url" class="pin-url" target="_blank">
+        <a href="{{pin.url || '#'}}" class="pin-url" target="_blank">
           <strong>
             Learn More Here
           </strong>
         </a>
       </div>
-      <img [src]="image_url" alt="Image Preview">
+      <img src="{{pin.image_url || 'http://www.worsleymemorials.co.uk/wp-content/uploads/2015/11/image-placeholder.png'}}" alt="Image Preview">
     </div>
 
     <h6>
       <strong>
-        {{name}}
+        {{pin.name || 'Title'}}
       </strong>
     </h6>
 
     <p>
       <small class="pin-desc">
-        {{description}}
+        {{pin.description || 'What is it about'}}
       </small>
     </p>
 
@@ -32,7 +32,7 @@ <h6>
     </p>
   </div>
 
-  <form [formGroup]="pinForm" class="large-8 columns" (ngSubmit)="onPinSave()">
+  <form [formGroup]="pinForm" class="large-7 columns" (ngSubmit)="onPinSave()">
     <input type="hidden" formControlName="user_id" [ngModel]="(authUser | async).id">
 
     <div class="input-group">
@@ -41,15 +41,15 @@ <h6>
         id="pin-name"
         class="input-group-field"
         formControlName="name"
-        [(ngModel)]="name"
+        [(ngModel)]="pin.name"
         placeholder="Title">
     </div>
 
     <div class="input-group">
       <input
         type="text"
         formControlName="image_url"
-        [(ngModel)]="image_url"
+        [(ngModel)]="pin.image_url"
         placeholder="Image Url"
         class="input-group-field">
     </div>
@@ -59,7 +59,7 @@ <h6>
         type="text"
         formControlName="url"
         placeholder="Work/Blog Url"
-        [(ngModel)]="url"
+        [(ngModel)]="pin.url"
         class="input-group-field">
     </div>
 
@@ -68,7 +68,7 @@ <h6>
         type="text"
         formControlName="description"
         placeholder="Small Description"
-        [(ngModel)]="description"
+        [(ngModel)]="pin.description"
         class="input-group-field">
       </textarea>
     </div>
@@ -78,21 +78,24 @@ <h6>
         type="text"
         formControlName="tags"
         placeholder="Tags"
+        [(ngModel)]="pin.tags"
         class="input-group-field">
     </div>
 
     <div class="row">
       <div class="text-right">
-        <div class="button-group">
-          <button type="submit" class="large hollow success button" [disabled]="!pinForm.valid">
-            Save
-            <span class="fa fa-save"></span>
-          </button>
-          <button class="large hollow alert button" (click)="onCancel()">
-            Cancel
-            <span class="fa fa-times"></span>
-          </button>
-        </div>
+        <button type="submit" class="button" [disabled]="!pinForm.valid">
+          Save
+          <span class="fa fa-save"></span>
+        </button>
+        <button class="warning button" (click)="onCancel()">
+          Cancel
+          <span class="fa fa-times"></span>
+        </button>
+        <button class="alert button" (click)="onPinDelete(pin.id)" *ngIf="!isNew">
+          Delete
+          <span class="fa fa-trash"></span>
+        </button>
       </div>
     </div>
 

diff --git a/src/app/components/pins/pin-edit/pin-edit.component.ts b/src/app/components/pins/pin-edit/pin-edit.component.ts
@@ -8,7 +8,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import * as pin from '../../../actions/pin';
 import { Observable } from 'rxjs/Observable';
 import { User } from '../../../models/user';
- import { back } from '@ngrx/router-store';
+import { replace } from '@ngrx/router-store';
 
 declare var $:any;
 declare var Foundation:any;
@@ -22,7 +22,7 @@ export class PinEditComponent implements OnInit, AfterViewInit {
   private pinForm: FormGroup;
   private title: string;
   private isNew = true;
-  private pin: Pin;
+  private pin: any;
   private pinIndex: string;
   private subscription: Subscription;
   private authUser: Observable<User>;
@@ -47,15 +47,15 @@ export class PinEditComponent implements OnInit, AfterViewInit {
 
           this.store.select(fromRoot.getSelectedPin).subscribe(
             pin => {
-              this.pin = pin
+              this.pin = pin;
               this.initForm();
             }
           );
 
           this.title = "Update Pin";
         } else {
           this.isNew = true;
-          this.pin = null;
+          this.pin = {};
           this.title = "Create Pin";
           this.initForm();
         }
@@ -71,15 +71,22 @@ export class PinEditComponent implements OnInit, AfterViewInit {
     const newPin = this.pinForm.value;
     if(this.pinForm.valid){
       this.store.dispatch(new pin.AddPinAction(newPin));
+      this.closeModal();
     }
   }
 
   onPinDelete(id) {
-    this.store.dispatch(new pin.DeletePinAction(id))
+    this.store.dispatch(new pin.DeletePinAction(id));
+    this.closeModal();
   }
 
-  onCancel() {
-    this.store.dispatch(back());
+  onCancel(){
+    this.closeModal();
+  }
+
+  closeModal() {
+    this.store.dispatch(replace(['']));
+    $('body').toggleClass('is-reveal-open');
   }
 
   loadModal() {
@@ -102,26 +109,12 @@ export class PinEditComponent implements OnInit, AfterViewInit {
   }
 
   private initForm() {
-    let pinName= "";
-    let pinImageUrl= "";
-    let pinUrl = "";
-    let pinDescription= "";
-    let pinTags = "";
-
-    if (!this.isNew) {
-      pinName = this.pin.name;
-      pinImageUrl = this.pin.image_url;
-      pinUrl = this.pin.url;
-      pinDescription = this.pin.description;
-      pinTags = this.pin.tags;
-    }
-
     this.pinForm = this.formBuilder.group({
-      name: [pinName, Validators.required],
-      image_url: [pinImageUrl, Validators.required],
-      url: [pinUrl, Validators.required],
-      description: [pinDescription, Validators.required],
-      tags: [pinTags, Validators.required],
+      name: [, Validators.required],
+      image_url: [, Validators.required],
+      url: [, Validators.required],
+      description: [, Validators.required],
+      tags: [, Validators.required],
       user_id: ['', Validators.required]
     });
   }

diff --git a/src/app/components/pins/pins.routes.ts b/src/app/components/pins/pins.routes.ts
@@ -1,9 +1,13 @@
 import { Routes } from '@angular/router';
 import { PinDetailComponent } from './pin-detail/pin-detail.component';
 import { PinEditComponent } from './pin-edit/pin-edit.component';
+import { CanActivateViaAuthGuard } from '../../guards/authenticated';
+import { CanEditPinGuard } from '../../guards/can-edit-pin';
 
 export const PINS_ROUTES: Routes = [
-  { path: 'new', component: PinEditComponent },
+  { path: 'new', component: PinEditComponent , canActivate: [CanActivateViaAuthGuard]},
   { path: ':id', component: PinDetailComponent },
-  { path: ':id/edit', component: PinEditComponent }
+  { path: ':id/edit', component: PinEditComponent,
+    canActivate: [ CanActivateViaAuthGuard, CanEditPinGuard ]
+  }
 ];
diff --git a/src/app/components/shared/modal/modal.component.ts b/src/app/components/shared/modal/modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import * as fromRoot from '../../../reducers/index';
 
@@ -11,7 +11,7 @@ declare var $:any;
   inputs: ["title", "klass", "size"]
 })
 
-export class ModalComponent implements OnInit, OnDestroy {
+export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
   title: string;
   klass: string;
   size: string;
@@ -22,6 +22,10 @@ export class ModalComponent implements OnInit, OnDestroy {
   ngOnInit() {
   }
 
+  ngAfterViewInit() {
+    $(document).foundation();
+  }
+
   ngOnDestroy() {
     $('.reveal').remove();
     $('.reveal-overlay').remove();

diff --git a/src/app/guards/authenticated.ts b/src/app/guards/authenticated.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState, getUserAuthStatus } from '../reducers/index';
+
+@Injectable()
+export class CanActivateViaAuthGuard implements CanActivate {
+
+  constructor(private store: Store<AppState>) {}
+
+  canActivate() {
+    return this.store.select(getUserAuthStatus);
+  }
+}
diff --git a/src/app/guards/can-edit-pin.ts b/src/app/guards/can-edit-pin.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState, getPinAccessStatus } from '../reducers/index';
+
+@Injectable()
+export class CanEditPinGuard implements CanActivate {
+
+  constructor(private store: Store<AppState>) {}
+
+  canActivate() {
+    return this.store.select(getPinAccessStatus);
+  }
+}
diff --git a/src/app/models/base.ts b/src/app/models/base.ts
@@ -1,8 +1,14 @@
 export class Base {
   public id:string;
-  
+
   constructor(attributes?) {
-    Object.assign(this, attributes);
+    if(attributes){
+      let keys = Object.keys(attributes)
+      if (keys.length) {
+        keys.forEach(el => {
+          this[el] = attributes[el];
+        })
+      }
+    }
   }
-
 }