feat(companies): initial work, added firebase for companies list

package.json

@@ -40,7 +40,9 @@
     "@angular/platform-browser-dynamic": "5.0.2",
     "@angular/router": "5.0.2",
     "@types/hammerjs": "2.0.35",
+    "angularfire2": "5.0.0-rc.3",
     "core-js": "2.4.1",
+    "firebase": "4.6.2",
     "hammerjs": "2.0.8",
     "rxjs": "5.5.2",
     "ts-loader": "3.1.1",

src/app/companies/companies.component.html

@@ -1 +1,24 @@
+<div fxLayout="row" fxLayoutAlign="space-evenly center" fxLayoutGap="10px" fxLayoutWrap class="companies-container">
+  <button mat-fab color="primary" class="company-add-button" (click)="addCompany()">
+    <mat-icon>add</mat-icon>
+  </button>
+  <mat-card *ngFor="let company of companies | async" fxFlex.xs="100" fxFlex.sm="45" fxFlex.md="30" fxFlex.lg="23">
+    <mat-card-header>
+      <div mat-card-avatar>
+        <img [src]="company.File" class="company-logo">
+      </div>
+      <mat-card-title>{{company.Name}}</mat-card-title>
+      <mat-card-subtitle>
+        {{company.Location}}
+        <button class="website-button" mat-icon-button aria-label="website" (click)="openWindow(company.Website)">
+          <mat-icon>
+            link
+          </mat-icon>
+        </button>
+      </mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
 
+    </mat-card-content>
+  </mat-card>
+</div>

src/app/companies/companies.component.scss

@@ -0,0 +1,29 @@
+.example-header-image {
+  background-image: url('../../assets/img/Rx_Logo-96-96.png');
+  background-size: cover;
+}
+
+.companies-container {
+  margin: 0 15px;
+}
+
+.website-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+mat-card {
+  margin-top: 15px;
+}
+
+.company-add-button {
+  position: absolute;
+  z-index: 99;
+  right: 0;
+  top: 5px;
+}
+
+.company-logo{
+  height: 40px;
+}

src/app/companies/companies.component.ts

@@ -1,10 +1,52 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import {
+  AngularFirestore,
+  AngularFirestoreCollection
+} from 'angularfire2/firestore';
+import * as firebase from 'firebase';
+import { MatDialog } from '@angular/material';
+
+import { CompanyDialogComponent } from '../company-dialog/company-dialog.component';
+import { CompanyService } from './company.service';
 
 @Component({
   selector: 'app-companies',
   templateUrl: './companies.component.html',
   styleUrls: ['./companies.component.scss']
 })
 export class CompaniesComponent {
-  constructor() {}
+  companies: Observable<any[]>;
+  private uploadTask: firebase.storage.UploadTask;
+  private companiesCollection: AngularFirestoreCollection<any>;
+  constructor(
+    db: AngularFirestore,
+    private dialog: MatDialog,
+    private companyService: CompanyService
+  ) {
+    this.companiesCollection = db.collection('companies');
+    this.companies = this.companiesCollection.valueChanges();
+  }
+
+  uploadSingle(file: any) {
+    return this.companyService.pushUpload(file);
+  }
+
+  addCompany() {
+    const dialogRef = this.dialog.open(CompanyDialogComponent, {});
+    dialogRef.afterClosed().subscribe(company => {
+      if (company) {
+        const file = this.uploadSingle(company.File).then((fileResult: any) => {
+          company.File = fileResult.downloadURL;
+          this.companiesCollection.add(company).then(result => {
+            console.log(result);
+          });
+        });
+      }
+    });
+  }
+
+  openWindow(url: string) {
+    window.open(url, '_blank');
+  }
 }

src/app/companies/companies.module.ts

@@ -1,9 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { MaterialModule } from './../material/material.module';
 import { NgModule } from '@angular/core';
+import { AngularFireModule } from 'angularfire2';
+import { AngularFirestoreModule } from 'angularfire2/firestore';
+
 import { CompaniesComponent } from './companies.component';
 import { CompaniesRoutingModule } from './companies-routing.module';
-
+import { environment } from '../../environments/environment';
+import { CompanyDialogComponent } from '../company-dialog/company-dialog.component';
+import { MatDialogRef } from '@angular/material';
+import { CompanyService } from './company.service';
+import { AngularFireDatabase } from 'angularfire2/database';
 @NgModule({
-  imports: [CompaniesRoutingModule],
-  declarations: [CompaniesComponent]
+  imports: [
+    CommonModule,
+    CompaniesRoutingModule,
+    MaterialModule,
+    AngularFirestoreModule,
+    AngularFireModule.initializeApp(environment.firebase)
+  ],
+  declarations: [CompaniesComponent, CompanyDialogComponent],
+  entryComponents: [CompanyDialogComponent],
+  providers: [CompanyService, AngularFireDatabase]
 })
 export class CompaniesModule {}

src/app/companies/company.service.spec.ts

@@ -0,0 +1,26 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { CompanyService } from './company.service';
+import { AngularFireDatabase } from 'angularfire2/database';
+import { AngularFirestoreModule } from 'angularfire2/firestore';
+import { AngularFireModule } from 'angularfire2';
+import { environment } from '../../environments/environment';
+
+describe('CompanyService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        AngularFirestoreModule,
+        AngularFireModule.initializeApp(environment.firebase)
+      ],
+      providers: [CompanyService, AngularFireDatabase]
+    });
+  });
+
+  it(
+    'should be created',
+    inject([CompanyService, AngularFireDatabase], (service: CompanyService) => {
+      expect(service).toBeTruthy();
+    })
+  );
+});

src/app/companies/company.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from "@angular/core";
+import { AngularFireDatabase, AngularFireList } from "angularfire2/database";
+import * as firebase from "firebase";
+import { Observable } from "rxjs/Observable";
+
+@Injectable()
+export class CompanyService {
+  constructor(private db: AngularFireDatabase) {}
+  basePath = "uploads";
+  uploadsRef: AngularFireList<any>;
+  uploads: Observable<any[]>;
+  // Executes the file uploading to firebase https://firebase.google.com/docs/storage/web/upload-files
+
+  pushUpload(upload: any) {
+    const storageRef = firebase.storage().ref();
+    const uploadTask = storageRef
+      .child(`${this.basePath}/${upload.name}`)
+      .put(upload);
+    return uploadTask;
+  }
+}

src/app/company-dialog/company-dialog.component.html

@@ -0,0 +1,23 @@
+<h2 mat-dialog-title>New Company Form</h2>
+<mat-dialog-content>
+  <form fxLayout="row" fxLayoutAlign="space-evenly center" fxLayoutGap="15px" fxLayoutWrap [formGroup]="companyForm" autocomplete="false">
+    <mat-form-field fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="45" fxFlex.lg="23" fxFlex.xl="23">
+      <input matInput placeholder="Name" formControlName="Name">
+    </mat-form-field>
+    <mat-form-field fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="45" fxFlex.lg="23" fxFlex.xl="23">
+      <input matInput placeholder="Location" formControlName="Location">
+    </mat-form-field>
+    <mat-form-field fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="45" fxFlex.lg="23" fxFlex.xl="23">
+      <input matInput type="url" placeholder="Website" formControlName="Website">
+      <mat-hint>http://reactivex.io</mat-hint>
+    </mat-form-field>
+    <input hidden type="file" #tempFile class="button" (change)="detectFiles($event)">
+    <mat-form-field fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="45" fxFlex.lg="23" fxFlex.xl="23">
+      <input matInput placeholder="Logo" (click)="tempFile.click()" [ngModel]="selectedFile" [ngModelOptions]="{standalone: true}">
+    </mat-form-field>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <button mat-raised-button color="warn" mat-dialog-close>Cancel</button>
+  <button mat-raised-button color="primary" [disabled]="!companyForm.valid" [mat-dialog-close]="companyForm.value">Submit</button>
+</mat-dialog-actions>

src/app/company-dialog/company-dialog.component.spec.ts

@@ -0,0 +1,47 @@
+// import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+// import { CompanyDialogComponent } from './company-dialog.component';
+// import { NgModule } from '@angular/core';
+// import { MatDialogModule, MatDialog } from '@angular/material';
+// import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+// import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+// import { SharedModule } from '../shared.module';
+// import { inject } from '@angular/core/testing';
+// import { CompaniesModule } from '../companies/companies.module';
+// import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+// import { CommonModule } from '@angular/common';
+
+// describe('CompanyDialogComponent', () => {
+//   let component: CompanyDialogComponent;
+//   let fixture: ComponentFixture<CompanyDialogComponent>;
+//   let dialog: MatDialog;
+
+//   beforeEach(
+//     async(() => {
+//       TestBed.configureTestingModule({
+//         imports: [SharedModule, NoopAnimationsModule],
+//         declarations: [CompanyDialogComponent],
+//         providers: [],
+//       }).overrideModule(BrowserDynamicTestingModule, {
+//         set: {
+//           entryComponents: [CompanyDialogComponent]
+//         }
+//       }).compileComponents();
+//     })
+//   );
+
+//   beforeEach(() => {
+//     fixture = TestBed.createComponent(CompanyDialogComponent);
+//     component = fixture.componentInstance;
+//     fixture.detectChanges();
+
+//     dialog = TestBed.get(MatDialog);
+//     let dialogRef = dialog.open(CompanyDialogComponent);
+//     component = dialogRef.componentInstance;
+//   });
+
+//   it('should create', () => {
+//     expect(component).toBeTruthy();
+//   });
+// });

src/app/company-dialog/company-dialog.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { CompanyService } from '../companies/company.service';
+
+@Component({
+  selector: 'app-company-dialog',
+  templateUrl: './company-dialog.component.html',
+  styleUrls: ['./company-dialog.component.scss']
+})
+export class CompanyDialogComponent {
+  companyForm: FormGroup;
+  selectedFile: File;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.createCompanyForm();
+  }
+
+  detectFiles(event) {
+    const fileControl = this.companyForm.get('File');
+    this.selectedFile = event.target.files.item(0).name;
+    fileControl.setValue(event.target.files.item(0));
+  }
+
+  private createCompanyForm() {
+    this.companyForm = this.formBuilder.group({
+      Name: ['', Validators.required],
+      Location: ['', Validators.required],
+      Website: ['', Validators.required],
+      File: ''
+    });
+  }
+
+  private subscribeToForm() {
+    const nameControl = this.companyForm.get('Name');
+    nameControl.valueChanges.forEach((value: string) => console.log(value));
+    const locationControl = this.companyForm.get('Location');
+    nameControl.valueChanges.forEach((value: string) => console.log(value));
+    const websiteControl = this.companyForm.get('Website');
+    nameControl.valueChanges.forEach((value: string) => console.log(value));
+  }
+}

src/app/material/material.module.ts

@@ -4,44 +4,51 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import {
   MatToolbarModule,
   MatIconModule,
+  MatButtonModule,
+  MatDialogModule,
   MatListModule,
   MatSidenavModule,
-  MatButtonModule,
   MatExpansionModule,
   MatCardModule,
   MatInputModule,
   MatMenuModule,
-  MatTooltipModule,
-  MatSnackBarModule
+  MatTooltipModule
 } from '@angular/material';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [],
   imports: [
     MatToolbarModule,
     MatIconModule,
+    MatButtonModule,
+    MatDialogModule,
     MatListModule,
     MatSidenavModule,
-    MatButtonModule,
     MatExpansionModule,
     MatCardModule,
     MatInputModule,
     MatMenuModule,
     MatTooltipModule,
-    MatSnackBarModule
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    FormsModule
   ],
   exports: [
     MatToolbarModule,
     MatIconModule,
+    MatButtonModule,
+    MatDialogModule,
     MatListModule,
     MatSidenavModule,
-    MatButtonModule,
     MatExpansionModule,
     MatCardModule,
     MatInputModule,
     MatMenuModule,
     MatTooltipModule,
-    MatSnackBarModule
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    FormsModule
   ]
 })
 export class MaterialModule {}

src/environments/environment.prod.ts

@@ -1,3 +1,11 @@
 export const environment = {
-  production: true
+  production: true,
+  firebase: {
+    apiKey: '',
+    authDomain: '',
+    databaseURL: '',
+    projectId: '',
+    storageBucket: '',
+    messagingSenderId: ''
+  }
 };