Skip to content
This repository was archived by the owner on Oct 1, 2018. It is now read-only.

Commit a744ede

Browse files
Only1MrAndersonashwin-sureshkumar
Only1MrAnderson
authored and
ashwin-sureshkumar
committed
feat(companies): initial work, added firebase for companies list
1 parent a6affdc commit a744ede

15 files changed

+309
-14
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,9 @@
4141
"@angular/router": "5.1.1",
4242
"@angular/service-worker": "5.1.1",
4343
"@types/hammerjs": "2.0.35",
44+
"angularfire2": "5.0.0-rc.3",
4445
"core-js": "2.4.1",
46+
"firebase": "4.6.2",
4547
"hammerjs": "2.0.8",
4648
"rxjs": "5.5.5",
4749
"ts-loader": "3.1.1",

‎src/app/companies/companies.component.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,24 @@
1+
<div fxLayout="row" fxLayoutAlign="space-evenly center" fxLayoutGap="10px" fxLayoutWrap class="companies-container">
2+
<button mat-fab color="primary" class="company-add-button" (click)="addCompany()">
3+
<mat-icon>add</mat-icon>
4+
</button>
5+
<mat-card *ngFor="let company of companies | async" fxFlex.xs="100" fxFlex.sm="45" fxFlex.md="30" fxFlex.lg="23">
6+
<mat-card-header>
7+
<div mat-card-avatar>
8+
<img [src]="company.File" class="company-logo">
9+
</div>
10+
<mat-card-title>{{company.Name}}</mat-card-title>
11+
<mat-card-subtitle>
12+
{{company.Location}}
13+
<button class="website-button" mat-icon-button aria-label="website" (click)="openWindow(company.Website)">
14+
<mat-icon>
15+
link
16+
</mat-icon>
17+
</button>
18+
</mat-card-subtitle>
19+
</mat-card-header>
20+
<mat-card-content>
121

22+
</mat-card-content>
23+
</mat-card>
24+
</div>

‎src/app/companies/companies.component.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.example-header-image {
2+
background-image: url('../../assets/img/Rx_Logo-96-96.png');
3+
background-size: cover;
4+
}
5+
6+
.companies-container {
7+
margin: 0 15px;
8+
}
9+
10+
.website-button {
11+
position: absolute;
12+
right: 0;
13+
top: 0;
14+
}
15+
16+
mat-card {
17+
margin-top: 15px;
18+
}
19+
20+
.company-add-button {
21+
position: absolute;
22+
z-index: 99;
23+
right: 0;
24+
top: 5px;
25+
}
26+
27+
.company-logo{
28+
height: 40px;
29+
}

‎src/app/companies/companies.component.ts

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,52 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
2+
import { Observable } from 'rxjs/Observable';
3+
import {
4+
AngularFirestore,
5+
AngularFirestoreCollection
6+
} from 'angularfire2/firestore';
7+
import * as firebase from 'firebase';
8+
import { MatDialog } from '@angular/material';
9+
10+
import { CompanyDialogComponent } from '../company-dialog/company-dialog.component';
11+
import { CompanyService } from './company.service';
212

313
@Component({
414
selector: 'app-companies',
515
templateUrl: './companies.component.html',
616
styleUrls: ['./companies.component.scss']
717
})
818
export class CompaniesComponent {
9-
constructor() {}
19+
companies: Observable<any[]>;
20+
private uploadTask: firebase.storage.UploadTask;
21+
private companiesCollection: AngularFirestoreCollection<any>;
22+
constructor(
23+
db: AngularFirestore,
24+
private dialog: MatDialog,
25+
private companyService: CompanyService
26+
) {
27+
this.companiesCollection = db.collection('companies');
28+
this.companies = this.companiesCollection.valueChanges();
29+
}
30+
31+
uploadSingle(file: any) {
32+
return this.companyService.pushUpload(file);
33+
}
34+
35+
addCompany() {
36+
const dialogRef = this.dialog.open(CompanyDialogComponent, {});
37+
dialogRef.afterClosed().subscribe(company => {
38+
if (company) {
39+
const file = this.uploadSingle(company.File).then((fileResult: any) => {
40+
company.File = fileResult.downloadURL;
41+
this.companiesCollection.add(company).then(result => {
42+
console.log(result);
43+
});
44+
});
45+
}
46+
});
47+
}
48+
49+
openWindow(url: string) {
50+
window.open(url, '_blank');
51+
}
1052
}

‎src/app/companies/companies.module.ts

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
1+
import { CommonModule } from '@angular/common';
2+
import { MaterialModule } from './../material/material.module';
13
import { NgModule } from '@angular/core';
4+
import { AngularFireModule } from 'angularfire2';
5+
import { AngularFirestoreModule } from 'angularfire2/firestore';
6+
27
import { CompaniesComponent } from './companies.component';
38
import { CompaniesRoutingModule } from './companies-routing.module';
4-
9+
import { environment } from '../../environments/environment';
10+
import { CompanyDialogComponent } from '../company-dialog/company-dialog.component';
11+
import { MatDialogRef } from '@angular/material';
12+
import { CompanyService } from './company.service';
13+
import { AngularFireDatabase } from 'angularfire2/database';
514
@NgModule({
6-
imports: [CompaniesRoutingModule],
7-
declarations: [CompaniesComponent]
15+
imports: [
16+
CommonModule,
17+
CompaniesRoutingModule,
18+
MaterialModule,
19+
AngularFirestoreModule,
20+
AngularFireModule.initializeApp(environment.firebase)
21+
],
22+
declarations: [CompaniesComponent, CompanyDialogComponent],
23+
entryComponents: [CompanyDialogComponent],
24+
providers: [CompanyService, AngularFireDatabase]
825
})
926
export class CompaniesModule {}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { TestBed, inject } from '@angular/core/testing';
2+
3+
import { CompanyService } from './company.service';
4+
import { AngularFireDatabase } from 'angularfire2/database';
5+
import { AngularFirestoreModule } from 'angularfire2/firestore';
6+
import { AngularFireModule } from 'angularfire2';
7+
import { environment } from '../../environments/environment';
8+
9+
describe('CompanyService', () => {
10+
beforeEach(() => {
11+
TestBed.configureTestingModule({
12+
imports: [
13+
AngularFirestoreModule,
14+
AngularFireModule.initializeApp(environment.firebase)
15+
],
16+
providers: [CompanyService, AngularFireDatabase]
17+
});
18+
});
19+
20+
it(
21+
'should be created',
22+
inject([CompanyService, AngularFireDatabase], (service: CompanyService) => {
23+
expect(service).toBeTruthy();
24+
})
25+
);
26+
});

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Injectable } from "@angular/core";
2+
import { AngularFireDatabase, AngularFireList } from "angularfire2/database";
3+
import * as firebase from "firebase";
4+
import { Observable } from "rxjs/Observable";
5+
6+
@Injectable()
7+
export class CompanyService {
8+
constructor(private db: AngularFireDatabase) {}
9+
basePath = "uploads";
10+
uploadsRef: AngularFireList<any>;
11+
uploads: Observable<any[]>;
12+
// Executes the file uploading to firebase https://firebase.google.com/docs/storage/web/upload-files
13+
14+
pushUpload(upload: any) {
15+
const storageRef = firebase.storage().ref();
16+
const uploadTask = storageRef
17+
.child(`${this.basePath}/${upload.name}`)
18+
.put(upload);
19+
return uploadTask;
20+
}
21+
}

‎src/app/companies/test.js

Whitespace-only changes.

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<h2 mat-dialog-title>New Company Form</h2>
2+
<mat-dialog-content>
3+
<form fxLayout="row" fxLayoutAlign="space-evenly center" fxLayoutGap="15px" fxLayoutWrap [formGroup]="companyForm" autocomplete="false">
4+
<mat-form-field fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="45" fxFlex.lg="23" fxFlex.xl="23">
5+
<input matInput placeholder="Name" formControlName="Name">
6+
</mat-form-field>
7+
<mat-form-field fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="45" fxFlex.lg="23" fxFlex.xl="23">
8+
<input matInput placeholder="Location" formControlName="Location">
9+
</mat-form-field>
10+
<mat-form-field fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="45" fxFlex.lg="23" fxFlex.xl="23">
11+
<input matInput type="url" placeholder="Website" formControlName="Website">
12+
<mat-hint>http://reactivex.io</mat-hint>
13+
</mat-form-field>
14+
<input hidden type="file" #tempFile class="button" (change)="detectFiles($event)">
15+
<mat-form-field fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="45" fxFlex.lg="23" fxFlex.xl="23">
16+
<input matInput placeholder="Logo" (click)="tempFile.click()" [ngModel]="selectedFile" [ngModelOptions]="{standalone: true}">
17+
</mat-form-field>
18+
</form>
19+
</mat-dialog-content>
20+
<mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
21+
<button mat-raised-button color="warn" mat-dialog-close>Cancel</button>
22+
<button mat-raised-button color="primary" [disabled]="!companyForm.valid" [mat-dialog-close]="companyForm.value">Submit</button>
23+
</mat-dialog-actions>

‎src/app/company-dialog/company-dialog.component.scss

Whitespace-only changes.

0 commit comments

Comments
 (0)