dataSorce functionala

Author: ALEXANDRU BEZDADEA

src/app/app.component.html

@@ -1,48 +1,32 @@
 <div class="error-message" *ngIf="errorMessage">
   {{ errorMessage }}
 </div>
-
 <div id="scanner-container">
   <!-- QuaggaJS will populate this element -->
 </div>
-
 <div class="instructions">
   <!-- This is a companion app for the blog post located <a target="_blank" href="https://blog.classycode.com/">here</a>.
   The source code is available on <a target="_blank" href="https://github.com/classycodeoss/mobile-scanning-demo">Github</a>. -->
-
   <ul>
     <li *ngFor="let item of catalogue2">{{item.name}}, preț: {{item.price}}</li>
   </ul>
   <!-- <p>{{catalogue2.price}}</p> -->
-
-
 </div>
-
 <div class="controls">
   <form>
     <input id="acceptAnyCode" type="checkbox" [(ngModel)]="acceptAnyCode" name="acceptAnyCode" required />
     <label for="acceptAnyCode">Acceptă și coduri neînregistrate în sistem</label>
     &nbsp;
-
     <button (click)="clearCart()">Șterge selecții</button>
   </form>
-
 </div>
-
 <div class="shopping-cart">
-
-
-
-  <ul>
+  <!-- <ul>
     <small>
       <li *ngFor="let item of catalogue2"> {{item.name}}, Cod bare: {{item.ean}}</li>
     </small>
-  </ul>
-
-
-
+  </ul> -->
   <span *ngIf="items.length === 0 else shoppingCartItems">Lista e goală</span>
-
   <mat-tab-group>
     <mat-tab>
       <ng-template mat-tab-label>
@@ -51,30 +35,40 @@
       </ng-template>
       Content 1
     </mat-tab>
-
     <mat-tab>
       <ng-template mat-tab-label>
         <!-- <mat-icon class="example-tab-icon">thumb_up</mat-icon> -->
         Second
       </ng-template>
-      Content 2
+      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+        <!--- Note that these columns can be defined in any order.
+              The actual rendered columns are set as a property on the row definition" -->
+        <!-- Name Column -->
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef> Name </th>
+          <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+        </ng-container>
+        <!-- Ean Column -->
+        <ng-container matColumnDef="ean">
+          <th mat-header-cell *matHeaderCellDef> Ean </th>
+          <td mat-cell *matCellDef="let element"> {{element.ean}} </td>
+        </ng-container>
+        <!-- Price Column -->
+        <ng-container matColumnDef="price">
+          <th mat-header-cell *matHeaderCellDef> Price </th>
+          <td mat-cell *matCellDef="let element"> {{element.price}} </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
     </mat-tab>
-
-
   </mat-tab-group>
-
   <ng-template #shoppingCartItems>
-
     <app-shopping-cart-item *ngFor="let articleAndCount of items" [article]="articleAndCount[0]"
       [count]="articleAndCount[1]">
     </app-shopping-cart-item>
-
     <div class="shopping-cart-total">
       Total: {{ totalPrice }} Lei
     </div>
-
-
-
-
   </ng-template>
 </div>

src/app/app.component.scss

@@ -47,3 +47,7 @@
   font-weight: bold;
   text-align: right;
 }
+
+table {
+  width: 100%;
+}

src/app/app.component.ts

@@ -13,7 +13,7 @@ import { DocumentData } from '@angular/fire/firestore';
 import { enableDebugTools } from '@angular/platform-browser';
 import {MatTabsModule} from '@angular/material/tabs';
 // import { MatIconModule } from '@angular/material/icon'
-
+import {MatTableDataSource, MatTableModule} from '@angular/material/table'
 
 @Component({
   selector: 'app-root',
@@ -34,7 +34,14 @@ export class AppComponent implements AfterViewInit {
     { name: 'Classy Crab (gold, ltd. ed.)', ean: '7601234564561', image: 'assets/classy_crab_gold.png', price: 50 },
     { name: 'Cafea', ean: '8000070038028', image: 'https://www.lavazza.ro/ro/cafea/macinata/qualita-rossa.html', price: 50 }
   ];
-  public catalogue2: any = [];
+  public catalogue2: Article[] = [];
+
+
+
+
+  displayedColumns: string[] = ['name', 'ean', 'price'];
+  dataSource: any;
+
 
   pokemon$: Observable<DocumentData>;
 
@@ -71,6 +78,7 @@ export class AppComponent implements AfterViewInit {
     }
     this.logheaza();
     this.getDocs();
+    this.getDocsForTable();
     this.pokemon$ = this.pokedexService.getAll();
   }
 
@@ -83,6 +91,14 @@ export class AppComponent implements AfterViewInit {
         console.log('mongo Crabs=>', this.catalogue2);
       });
   }
+  public getDocsForTable() {
+    this.beepService
+      .getDocs()
+      .subscribe((data) => {
+        this.dataSource = data;
+        console.log('table docs=>', this.dataSource);
+      });
+  }
 
   logheaza(){
     console.log("WORKS")

src/app/app.module.ts

@@ -17,18 +17,27 @@ import { provideFunctions,getFunctions } from '@angular/fire/functions';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MatTabsModule} from '@angular/material/tabs';
 
+import {MatTableModule} from '@angular/material/table'
+
+import { MaterialComponentsModule } from './material-components/material-components.module';
+
+
 @NgModule({
   declarations: [
     AppComponent,
     ShoppingCartItemComponent,
-    AfisareProduseComponent
+    AfisareProduseComponent,
+
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpClientModule,
     RouterModule,
     MatTabsModule,
+    MatTableModule,
+    MaterialComponentsModule,
+    BrowserAnimationsModule,
 
 
 

src/app/material-components/material-components.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {MatTableModule} from '@angular/material/table';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+import {MatCardModule} from '@angular/material/card';
+import {MatSortModule} from '@angular/material/sort';
+
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    MatTableModule,
+    CommonModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCardModule,
+    MatSortModule
+  ],
+  exports:[
+    MatTableModule,
+    MatInputModule,
+    MatSelectModule,
+    MatCardModule,
+    MatSortModule
+  ]
+})
+export class MaterialComponentsModule { }