realtime db + file uploads

Author: codediodeio

package.json

@@ -23,9 +23,11 @@
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/platform-server": "^4.0.0",
     "@angular/router": "^4.0.0",
+    "@types/lodash": "^4.14.61",
     "angularfire2": "^2.0.0-beta.8",
     "core-js": "^2.4.1",
     "firebase": "^3.7.2",
+    "lodash": "^4.17.4",
     "rxjs": "^5.1.0",
     "typescript": "^2.2.1",
     "zone.js": "^0.7.6"

src/app/app-routing.module.ts

@@ -1,13 +1,17 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { UserLoginComponent } from './users/user-login/user-login.component';
+import { ItemsListComponent } from './items/items-list/items-list.component';
+import { UploadsListComponent } from './uploads/uploads-list/uploads-list.component';
 
 const routes: Routes = [
   {
     path: '',
     children: []
   },
   { path: 'login', component: UserLoginComponent, },
+  { path: 'items', component: ItemsListComponent, },
+  { path: 'uploads', component: UploadsListComponent, },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -6,25 +6,43 @@ import { HttpModule } from '@angular/http';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
-// FireStarter
+///// Start FireStarter
 import { environment } from '../environments/environment';
+import { AngularFireModule } from 'angularfire2';
+
+// FireStarter Users
 import { AuthService } from './core/auth.service';
 import { UserLoginComponent } from './users/user-login/user-login.component';
+import { UserProfileComponent } from './users/user-profile/user-profile.component';
 
+// FireStarter Items
+import { ItemService } from './items/shared/item.service';
+import { ItemsListComponent } from './items/items-list/items-list.component';
+import { ItemFormComponent } from './items/item-form/item-form.component';
+import { ItemDetailComponent } from './items/item-detail/item-detail.component';
 
-import { AngularFireModule } from 'angularfire2';
-import { UserProfileComponent } from './users/user-profile/user-profile.component';
-export const firebaseConfig = environment.firebaseConfig;
+// FireStarter Uploads
+import { UploadService } from './uploads/shared/upload.service';
+import { UploadFormComponent } from './uploads/upload-form/upload-form.component';
+import { UploadsListComponent } from './uploads/uploads-list/uploads-list.component';
+import { UploadDetailComponent } from './uploads/upload-detail/upload-detail.component';
 
+export const firebaseConfig = environment.firebaseConfig;
 
-// End FireStarter
+///// End FireStarter
 
 
 @NgModule({
   declarations: [
     AppComponent,
     UserLoginComponent,
-    UserProfileComponent
+    UserProfileComponent,
+    ItemsListComponent,
+    ItemFormComponent,
+    ItemDetailComponent,
+    UploadFormComponent,
+    UploadsListComponent,
+    UploadDetailComponent
   ],
   imports: [
     BrowserModule,
@@ -34,7 +52,10 @@ export const firebaseConfig = environment.firebaseConfig;
     AngularFireModule.initializeApp(firebaseConfig)
   ],
   providers: [
-    AuthService
+    AuthService,
+    ItemService,
+    UploadService,
+
   ],
   bootstrap: [
     AppComponent

src/app/core/auth.service.ts

@@ -15,6 +15,8 @@ export class AuthService {
 
             af.auth.subscribe((auth) => {
               this.authState = auth;
+              console.log(this.af.auth)
+              console.log(this.authState)
               console.log(this.authState)
             });
           }
@@ -34,6 +36,11 @@ export class AuthService {
     return this.authenticated ? this.authState.uid : '';
   }
 
+  // Returns current user display name or Guest
+  get currentUserDisplayName(): string {
+    return this.authenticated ? this.authState.auth.displayName : 'GUEST';
+  }
+
 
   //// Social Auth ////
 
@@ -55,7 +62,7 @@ export class AuthService {
 
   private socialSignIn(provider: number): firebase.Promise<FirebaseAuthState> {
     return this.af.auth.login({provider, method: AuthMethods.Popup})
-      .then(() => this.writeUserData() )
+      .then(() => this.updateUserData() )
       .catch(error => console.log(error));
     }
 
@@ -94,7 +101,7 @@ export class AuthService {
 
   //// Helpers ////
 
-  private writeUserData(): void {
+  private updateUserData(): void {
   // Writes user name and email to realtime db
   // useful if your app displays information about users or for admin features
 

src/app/items/item-detail/item-detail.component.html

@@ -0,0 +1,13 @@
+{{ item.title || 'no title' }}<br>
+{{ item.body || 'no body' }}<br>
+Active: {{ item.active }}<br>
+{{ item.lastClick | date: 'medium' }}<br>
+
+
+<span (click)='deleteItem()'>Delete</span>
+<span (click)='updateTimeStamp()'>Log Timestamp</span>
+
+<span *ngIf='item.active' (click)='updateActive(false)'>Mark Active</span>
+<span *ngIf='!item.active' (click)='updateActive(true)'>Mark Complete</span>
+
+<hr>

src/app/items/item-detail/item-detail.component.scss

@@ -0,0 +1,32 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ItemService } from '../shared/item.service';
+import { Item } from '../shared/item';
+
+@Component({
+  selector: 'item-detail',
+  templateUrl: './item-detail.component.html',
+  styleUrls: ['./item-detail.component.scss']
+})
+export class ItemDetailComponent implements OnInit {
+
+  @Input() item: Item;
+
+  constructor(private itemSvc: ItemService) { }
+
+  ngOnInit() {
+  }
+
+  updateTimeStamp() {
+    let date = new Date()
+    this.itemSvc.updateItem(this.item.$key, { lastClick: date })
+  }
+
+  updateActive(value: boolean) {
+    this.itemSvc.updateItem(this.item.$key, { active: value })
+  }
+
+  deleteItem() {
+    this.itemSvc.deleteItem(this.item.$key)
+  }
+
+}

src/app/items/item-detail/item-detail.component.ts

@@ -0,0 +1,26 @@
+<h3>New Task Form</h3>
+
+<div>
+  <label>Name: </label>
+  <input placeholder="Item Title" class="form-control"
+  [(ngModel)]="item.title"
+  required minlength="2" maxlength="23"
+  #title='ngModel'>
+
+  <div *ngIf="title.dirty || title.touched">
+    <p *ngIf='title.errors; then errors else valid'>template renders here...</p>
+  </div>
+
+  <br>
+  <label>Body: </label>
+  <textarea  placeholder="Item Body" class="form-control"
+  [(ngModel)]="item.body"
+  required minlength="2" maxlength="23"
+  #body='ngModel'>
+  </textarea>
+  <br>
+  <button (click)='createItem()' [disabled]="!title.valid || !body.valid">Create</button>
+</div>
+
+<ng-template #valid>looks good!</ng-template>
+<ng-template #errors>form contains errors!</ng-template>

src/app/items/item-form/item-form.component.html

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Item } from '../shared/item';
+import { ItemService } from '../shared/item.service';
+
+@Component({
+  selector: 'item-form',
+  templateUrl: './item-form.component.html',
+  styleUrls: ['./item-form.component.scss']
+})
+export class ItemFormComponent implements OnInit {
+
+  item: Item = new Item();
+
+  constructor(private itemSvc: ItemService) { }
+
+  ngOnInit() {
+  }
+
+  createItem() {
+    this.itemSvc.createItem(this.item)
+    this.item = new Item() // reset item
+  }
+
+}