New MSDS page

src/app/app.module.ts

@@ -1,99 +1,101 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule } from '@angular/router';
-import { AngularFireModule } from 'angularfire2';
-import { AngularFirestoreModule, AngularFirestore } from 'angularfire2/firestore';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { AppComponent } from './app.component';
-import { environment } from '../environments/environment';
-import { ConvertFromGPipe, ConvertToGPipe } from './formulaManager/units.pipe';
-import { ScalePipe } from './formulaManager/scale.pipe';
-import { AngularMaterialModule } from './material.module';
-import { HomeComponent } from './home/home.component';
-import { ServiceWorkerModule } from '@angular/service-worker';
-import { FormulaManagerComponent } from './formulaManager/formulaManager.component';
-import { NgxElectronModule } from 'ngx-electron';
-import { AboutComponent } from './about/about.component';
-import { CategoriesComponent } from './store/categories.component';
-import { AngularFireStorageModule } from 'angularfire2/storage';
-import { LoginComponent } from './login/login.component';
-import { AngularFireAuthModule } from 'angularfire2/auth';
-import { NewCategoryComponent } from './store/newCategory/newCategory.component';
-import { NewProductComponent } from './store/newProduct/newProduct.component';
-import { DeleteComponent } from './delete/delete.component';
-import { ProductsComponent } from './store/products/products.component';
-import { CartComponent } from './store/cart/cart.component';
-import { ViewComponents } from './formulaManager/viewComponents/viewComponents.component';
-import { NewComponentComponent } from './formulaManager/newComponent/newComponent.component';
-import { NewFormulaComponent } from './formulaManager/newFormula/newFormula.component';
-import { AppStore } from './app.store';
-import { SlideshowModule } from 'ng-simple-slideshow';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {RouterModule} from '@angular/router';
+import {AngularFireModule} from 'angularfire2';
+import {AngularFirestoreModule, AngularFirestore} from 'angularfire2/firestore';
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {AppComponent} from './app.component';
+import {environment} from '../environments/environment';
+import {ConvertFromGPipe, ConvertToGPipe} from './formulaManager/units.pipe';
+import {ScalePipe} from './formulaManager/scale.pipe';
+import {AngularMaterialModule} from './material.module';
+import {HomeComponent} from './home/home.component';
+import {ServiceWorkerModule} from '@angular/service-worker';
+import {FormulaManagerComponent} from './formulaManager/formulaManager.component';
+import {NgxElectronModule} from 'ngx-electron';
+import {AboutComponent} from './about/about.component';
+import {CategoriesComponent} from './store/categories.component';
+import {AngularFireStorageModule} from 'angularfire2/storage';
+import {LoginComponent} from './login/login.component';
+import {AngularFireAuthModule} from 'angularfire2/auth';
+import {NewCategoryComponent} from './store/newCategory/newCategory.component';
+import {NewProductComponent} from './store/newProduct/newProduct.component';
+import {DeleteComponent} from './delete/delete.component';
+import {ProductsComponent} from './store/products/products.component';
+import {CartComponent} from './store/cart/cart.component';
+import {ViewComponents} from './formulaManager/viewComponents/viewComponents.component';
+import {NewComponentComponent} from './formulaManager/newComponent/newComponent.component';
+import {NewFormulaComponent} from './formulaManager/newFormula/newFormula.component';
+import {AppStore} from './app.store';
+import {SlideshowModule} from 'ng-simple-slideshow';
 import {HttpClientModule} from '@angular/common/http';
 import {ScrollingModule} from '@angular/cdk/scrolling';
 import {MSDSComponent} from './msds/msds.component';
+import {SizePipe} from './size.pipe';
 
 @NgModule({
-  declarations: [
-    AboutComponent,
-    AppComponent,
-    CategoriesComponent,
-    CartComponent,
-    ConvertFromGPipe,
-    ConvertToGPipe,
-    DeleteComponent,
-    FormulaManagerComponent,
-    HomeComponent,
-    LoginComponent,
-    MSDSComponent,
-    NewCategoryComponent,
-    NewComponentComponent,
-    NewFormulaComponent,
-    NewProductComponent,
-    ProductsComponent,
-    ScalePipe,
-    ViewComponents
-  ],
-  imports: [
-    AngularMaterialModule,
-    AngularFireAuthModule,
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFirestoreModule,
-    AngularFireStorageModule,
-    BrowserAnimationsModule,
-    BrowserModule,
-    FormsModule,
-    HttpClientModule,
-    NgxElectronModule,
-    ReactiveFormsModule,
-    RouterModule.forRoot([
-      { path: 'about', component: AboutComponent },
-      { path: 'cart', component: CartComponent },
-      { path: 'formulaManager', component: FormulaManagerComponent },
-      { path: 'msds', component: MSDSComponent },
-      { path: 'products/:product', component: ProductsComponent },
-      { path: 'store/:category', component: CategoriesComponent },
-      { path: 'store', component: CategoriesComponent },
-      { path: '**', component: HomeComponent }
-    ]),
-    ScrollingModule,
-    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
-    SlideshowModule
-  ],
-  providers: [AppStore],
-  entryComponents: [
-    DeleteComponent,
-    LoginComponent,
-    NewCategoryComponent,
-    NewComponentComponent,
-    NewFormulaComponent,
-    NewProductComponent,
-    ViewComponents
-  ],
-  bootstrap: [AppComponent]
+    declarations: [
+        AboutComponent,
+        AppComponent,
+        CategoriesComponent,
+        CartComponent,
+        ConvertFromGPipe,
+        ConvertToGPipe,
+        DeleteComponent,
+        FormulaManagerComponent,
+        HomeComponent,
+        LoginComponent,
+        MSDSComponent,
+        NewCategoryComponent,
+        NewComponentComponent,
+        NewFormulaComponent,
+        NewProductComponent,
+        ProductsComponent,
+        ScalePipe,
+        SizePipe,
+        ViewComponents
+    ],
+    imports: [
+        AngularMaterialModule,
+        AngularFireAuthModule,
+        AngularFireModule.initializeApp(environment.firebase),
+        AngularFirestoreModule,
+        AngularFireStorageModule,
+        BrowserAnimationsModule,
+        BrowserModule,
+        FormsModule,
+        HttpClientModule,
+        NgxElectronModule,
+        ReactiveFormsModule,
+        RouterModule.forRoot([
+            {path: 'about', component: AboutComponent},
+            {path: 'cart', component: CartComponent},
+            {path: 'formulaManager', component: FormulaManagerComponent},
+            {path: 'msds', component: MSDSComponent},
+            {path: 'products/:product', component: ProductsComponent},
+            {path: 'store/:category', component: CategoriesComponent},
+            {path: 'store', component: CategoriesComponent},
+            {path: '**', component: HomeComponent}
+        ]),
+        ScrollingModule,
+        ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
+        SlideshowModule
+    ],
+    providers: [AppStore],
+    entryComponents: [
+        DeleteComponent,
+        LoginComponent,
+        NewCategoryComponent,
+        NewComponentComponent,
+        NewFormulaComponent,
+        NewProductComponent,
+        ViewComponents
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule {
-  constructor(private db: AngularFirestore) {
-    this.db.firestore.enablePersistence();
-  }
+    constructor(private db: AngularFirestore) {
+        this.db.firestore.enablePersistence();
+    }
 }

src/app/msds/msds.component.html

@@ -1,4 +1,5 @@
-<div class="bg-white" style="min-height: 450px">
+<mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+<div class="bg-white pt-4" style="min-height: 450px">
   <div class="container py-3">
     <div style="overflow: auto">
       <h4 class="ml-3 d-inline">MSDS</h4>
@@ -7,9 +8,25 @@
       </button>
     </div>
     <mat-divider></mat-divider>
-    <mat-list>
-      <mat-list-item *ngFor="let l of links" (click)="open(l)">{{l.name}}</mat-list-item>
-    </mat-list>
+    <table class="table">
+      <thead>
+        <tr>
+          <td>File Name</td>
+          <td>Size</td>
+          <td></td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let l of links">
+          <td>{{l.name}}</td>
+          <td>{{l.size / 1024 | size}}</td>
+          <td class="text-right">
+            <button mat-raised-button (click)="open(l)">Download</button>
+            <button *ngIf="store.user" mat-raised-button class="ml-2" color="warn" (click)="delete(l)">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
     <input #file type="file" accept="application/pdf" (change)="upload($event.target)" hidden>
   </div>
 </div>

src/app/msds/msds.component.ts

@@ -9,6 +9,7 @@ import {AppStore} from '../app.store';
 export class MSDSComponent implements OnInit {
     firestore;
     links = [];
+    loading = false;
     storage;
 
     constructor(public store: AppStore) {
@@ -16,6 +17,18 @@ export class MSDSComponent implements OnInit {
         this.storage = firebase.storage();
     }
 
+    async delete(link) {
+        this.loading = true;
+        let wait = [
+            this.storage.ref(`MSDS/${link.name}`).delete(),
+            this.firestore.collection('msds').doc(link.name).delete()
+        ];
+
+        await Promise.all(wait);
+        this.links.splice(this.links.indexOf(link), 1);
+        this.loading = false;
+    }
+
     async ngOnInit() {
         let docs = await this.firestore.collection('msds').get();
         docs.forEach(snap => this.links = this.links.concat([snap.data()]).sort());
@@ -26,16 +39,17 @@ export class MSDSComponent implements OnInit {
     }
 
     upload(e) {
+        this.loading = true;
         this.storage.ref(`MSDS/${e.files[0].name}`).put(e.files[0]).then(async e => {
             let data = {
                 name: e.metadata.name,
+                size: e.metadata.size,
                 src: await this.storage.ref(e.metadata.fullPath).getDownloadURL()
             };
 
-            console.log(data);
-
-            this.links.concat([data]).sort();
-            this.firestore.collection('msds').doc(e.metadata.name).set(data);
+            await this.firestore.collection('msds').doc(e.metadata.name).set(data);
+            this.links = this.links.concat([data]).sort();
+            this.loading = false;
         });
     }
 }

src/app/size.pipe.ts

@@ -0,0 +1,13 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+    name: 'size'
+})
+export class SizePipe implements PipeTransform {
+
+    constructor() { }
+
+    transform(val, unit) {
+        return `${Math.round(val)} KB`;
+    }
+}