From acb70f9002a399c6e12aafbb095ee4ea4beb2961 Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas.leder@jobrouter.com>
Date: Wed, 16 Mar 2022 11:30:08 +0100
Subject: [PATCH] get data from graphql
---
src/app/bestand/bestand.component.html | 2 +-
src/app/bestand/bestand.component.ts | 34 +++++++++++++++++++-------
2 files changed, 26 insertions(+), 10 deletions(-)
diff --git a/src/app/bestand/bestand.component.html b/src/app/bestand/bestand.component.html
index 3fd4857..947107c 100644
--- a/src/app/bestand/bestand.component.html
+++ b/src/app/bestand/bestand.component.html
@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="products" class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> ID </th>
diff --git a/src/app/bestand/bestand.component.ts b/src/app/bestand/bestand.component.ts
index 5cb0d8b..054f506 100644
--- a/src/app/bestand/bestand.component.ts
+++ b/src/app/bestand/bestand.component.ts
@@ -1,6 +1,8 @@
import { Component, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Apollo, gql } from 'apollo-angular';
-export interface PeriodicElement {
+export interface Product {
id: number;
manufacturer: string;
name: string;
@@ -8,11 +10,6 @@ export interface PeriodicElement {
position: string;
}
-const ELEMENT_DATA: PeriodicElement[] = [
- {id: 1, manufacturer: "Draka", name: "Cat 6a 1,5m", amount: 70, position: "Netzwerk"},
- {id: 2, manufacturer: "AzDelivery", name: "NODEMCU 32", amount: 3, position: "Schrank"}
-];
-
@Component({
selector: 'app-bestand',
templateUrl: './bestand.component.html',
@@ -20,11 +17,30 @@ const ELEMENT_DATA: PeriodicElement[] = [
})
export class BestandComponent implements OnInit {
displayedColumns: string[] = ['id', 'manufacturer', 'name', 'amount', 'position'];
- dataSource = ELEMENT_DATA;
+ loading: boolean = true;
+ products: Product[] = [];
+ private querySubscription: Subscription = new Subscription();
+
+ constructor(private apollo: Apollo) { }
- constructor() { }
+ ngOnInit() {
+ this.querySubscription = this.apollo.watchQuery<any>({
+ query: gql`query {
+ products {
+ id
+ name
+ }
+ }`
+ })
+ .valueChanges
+ .subscribe(({ data, loading }) => {
+ this.loading = loading;
+ this.products = data.products;
+ });
+ }
- ngOnInit(): void {
+ ngOnDestroy() {
+ this.querySubscription.unsubscribe();
}
}
--
GitLab