From 3f4e3a8c9963ca1b5f9a5c3399cbccdd18ae1690 Mon Sep 17 00:00:00 2001 From: Ashwin Sureshkumar Date: Fri, 22 Dec 2017 11:23:39 -0500 Subject: [PATCH] feat(companies): Implement showcase of companies from list in the repo - Showcase list of companies using RxJS - Remove firebase implementation temporarily to move forward - Added a temporary list of companies to test Close #10 --- package.json | 2 - src/app/companies/companies-list.ts | 18 +++++++ src/app/companies/companies.component.html | 13 ++--- src/app/companies/companies.component.scss | 10 ++-- src/app/companies/companies.component.ts | 39 ++------------- src/app/companies/companies.model.ts | 6 +++ src/app/companies/companies.module.ts | 18 ++----- src/app/companies/company.service.spec.ts | 12 ++--- src/app/companies/company.service.ts | 23 +++------ src/app/companies/test.js | 0 .../company-dialog.component.html | 23 --------- .../company-dialog.component.scss | 0 .../company-dialog.component.spec.ts | 47 ------------------- .../company-dialog.component.ts | 41 ---------------- src/app/material/material.module.ts | 10 ++-- src/environments/environment.prod.ts | 10 +--- src/environments/environment.ts | 11 +---- 17 files changed, 57 insertions(+), 226 deletions(-) create mode 100644 src/app/companies/companies-list.ts create mode 100644 src/app/companies/companies.model.ts delete mode 100644 src/app/companies/test.js delete mode 100644 src/app/company-dialog/company-dialog.component.html delete mode 100644 src/app/company-dialog/company-dialog.component.scss delete mode 100644 src/app/company-dialog/company-dialog.component.spec.ts delete mode 100644 src/app/company-dialog/company-dialog.component.ts diff --git a/package.json b/package.json index b8286a74..40fd87e5 100644 --- a/package.json +++ b/package.json @@ -40,9 +40,7 @@ "@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", diff --git a/src/app/companies/companies-list.ts b/src/app/companies/companies-list.ts new file mode 100644 index 00000000..4b63b084 --- /dev/null +++ b/src/app/companies/companies-list.ts @@ -0,0 +1,18 @@ +import { Company } from './companies.model'; + +export const COMPANIES_LIST: Company[] = [ + { + name: 'Google', + location: 'California', + logo: + 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Google-favicon-2015.png/150px-Google-favicon-2015.png', + website: 'http://google.com' + }, + { + name: 'Microsoft', + location: 'Seattle', + logo: + 'http://diylogodesigns.com/blog/wp-content/uploads/2016/04/Microsoft-Logo-icon-png-Transparent-Background.png', + website: 'http://microsoft.com' + } +]; diff --git a/src/app/companies/companies.component.html b/src/app/companies/companies.component.html index 59aae7cf..c9e9c29c 100644 --- a/src/app/companies/companies.component.html +++ b/src/app/companies/companies.component.html @@ -1,16 +1,13 @@
-
- +
- {{company.Name}} + {{company.name}} - {{company.Location}} -
\ No newline at end of file + diff --git a/src/app/companies/companies.component.scss b/src/app/companies/companies.component.scss index ff65ed6c..c87f968a 100644 --- a/src/app/companies/companies.component.scss +++ b/src/app/companies/companies.component.scss @@ -17,13 +17,11 @@ mat-card { margin-top: 15px; } -.company-add-button { - position: absolute; - z-index: 99; - right: 0; - top: 5px; +mat-card-avatar { + margin-right: 10px; } .company-logo{ height: 40px; -} \ No newline at end of file + width: 40px; +} diff --git a/src/app/companies/companies.component.ts b/src/app/companies/companies.component.ts index 64f050cb..789797d2 100644 --- a/src/app/companies/companies.component.ts +++ b/src/app/companies/companies.component.ts @@ -1,14 +1,10 @@ +import { COMPANIES_LIST } from './companies-list'; 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'; +import { Company } from './companies.model'; @Component({ selector: 'app-companies', @@ -16,34 +12,9 @@ import { CompanyService } from './company.service'; styleUrls: ['./companies.component.scss'] }) export class CompaniesComponent { - companies: Observable; - private uploadTask: firebase.storage.UploadTask; - private companiesCollection: AngularFirestoreCollection; - 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); - }); - }); - } - }); + companies: Observable; + constructor(private companyService: CompanyService) { + this.companies = this.companyService.getCompanies(); } openWindow(url: string) { diff --git a/src/app/companies/companies.model.ts b/src/app/companies/companies.model.ts new file mode 100644 index 00000000..b848225c --- /dev/null +++ b/src/app/companies/companies.model.ts @@ -0,0 +1,6 @@ +export interface Company { + name: string; + location: string; + website: string; + logo: string; +} diff --git a/src/app/companies/companies.module.ts b/src/app/companies/companies.module.ts index 8720e879..23faea80 100644 --- a/src/app/companies/companies.module.ts +++ b/src/app/companies/companies.module.ts @@ -1,26 +1,14 @@ 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: [ - CommonModule, - CompaniesRoutingModule, - MaterialModule, - AngularFirestoreModule, - AngularFireModule.initializeApp(environment.firebase) - ], - declarations: [CompaniesComponent, CompanyDialogComponent], - entryComponents: [CompanyDialogComponent], - providers: [CompanyService, AngularFireDatabase] + imports: [CommonModule, CompaniesRoutingModule, MaterialModule], + declarations: [CompaniesComponent], + providers: [CompanyService] }) export class CompaniesModule {} diff --git a/src/app/companies/company.service.spec.ts b/src/app/companies/company.service.spec.ts index f73d9a69..72389aad 100644 --- a/src/app/companies/company.service.spec.ts +++ b/src/app/companies/company.service.spec.ts @@ -1,25 +1,19 @@ 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] + imports: [], + providers: [CompanyService] }); }); it( 'should be created', - inject([CompanyService, AngularFireDatabase], (service: CompanyService) => { + inject([CompanyService], (service: CompanyService) => { expect(service).toBeTruthy(); }) ); diff --git a/src/app/companies/company.service.ts b/src/app/companies/company.service.ts index 93877ed0..5578f02e 100644 --- a/src/app/companies/company.service.ts +++ b/src/app/companies/company.service.ts @@ -1,21 +1,12 @@ -import { Injectable } from "@angular/core"; -import { AngularFireDatabase, AngularFireList } from "angularfire2/database"; -import * as firebase from "firebase"; -import { Observable } from "rxjs/Observable"; +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs/observable'; +import { of } from 'rxjs/observable/of'; +import { COMPANIES_LIST } from './companies-list'; +import { Company } from './companies.model'; @Injectable() export class CompanyService { - constructor(private db: AngularFireDatabase) {} - basePath = "uploads"; - uploadsRef: AngularFireList; - uploads: Observable; - // 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; + getCompanies(): Observable { + return of(COMPANIES_LIST); } } diff --git a/src/app/companies/test.js b/src/app/companies/test.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/app/company-dialog/company-dialog.component.html b/src/app/company-dialog/company-dialog.component.html deleted file mode 100644 index 59573ded..00000000 --- a/src/app/company-dialog/company-dialog.component.html +++ /dev/null @@ -1,23 +0,0 @@ -

New Company Form

- -
- - - - - - - - - http://reactivex.io - - - - - -
- - - - - \ No newline at end of file diff --git a/src/app/company-dialog/company-dialog.component.scss b/src/app/company-dialog/company-dialog.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/src/app/company-dialog/company-dialog.component.spec.ts b/src/app/company-dialog/company-dialog.component.spec.ts deleted file mode 100644 index 57e25f84..00000000 --- a/src/app/company-dialog/company-dialog.component.spec.ts +++ /dev/null @@ -1,47 +0,0 @@ -// 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; -// 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(); -// }); -// }); diff --git a/src/app/company-dialog/company-dialog.component.ts b/src/app/company-dialog/company-dialog.component.ts deleted file mode 100644 index 9ee46757..00000000 --- a/src/app/company-dialog/company-dialog.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -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)); - } -} diff --git a/src/app/material/material.module.ts b/src/app/material/material.module.ts index 78be3a4c..de4019d0 100644 --- a/src/app/material/material.module.ts +++ b/src/app/material/material.module.ts @@ -12,9 +12,9 @@ import { MatCardModule, MatInputModule, MatMenuModule, - MatTooltipModule + MatTooltipModule, + MatSnackBarModule } from '@angular/material'; -import { ReactiveFormsModule, FormsModule } from '@angular/forms'; @NgModule({ declarations: [], @@ -31,8 +31,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms'; MatMenuModule, MatTooltipModule, FlexLayoutModule, - ReactiveFormsModule, - FormsModule + MatSnackBarModule ], exports: [ MatToolbarModule, @@ -47,8 +46,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms'; MatMenuModule, MatTooltipModule, FlexLayoutModule, - ReactiveFormsModule, - FormsModule + MatSnackBarModule ] }) export class MaterialModule {} diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 7b57ba02..3612073b 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,11 +1,3 @@ export const environment = { - production: true, - firebase: { - apiKey: '', - authDomain: '', - databaseURL: '', - projectId: '', - storageBucket: '', - messagingSenderId: '' - } + production: true }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 9decac33..b7f639ae 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -3,15 +3,6 @@ // `ng build --env=prod` then `environment.prod.ts` will be used instead. // The list of which env maps to which file can be found in `.angular-cli.json`. -// rxjsdemo@gmail.com //rxjsdemo1234 export const environment = { - production: false, - firebase: { - apiKey: "", - authDomain: "", - databaseURL: "", - projectId: "", - storageBucket: "", - messagingSenderId: "" - } + production: false };