Merged PR 1349: Dashboard // nicht alle Infos werden angezeigt

Related work items: #3299

apps/domain/isa/src/lib/defs/index.ts

@@ -1,4 +1,6 @@
 // start:ng42.barrel
+export * from './info-feed-item';
+export * from './info-feed';
 export * from './kpi-feed-item';
 export * from './kpi-feed';
 export * from './products-feed';

apps/domain/isa/src/lib/defs/info-feed-item.ts

@@ -0,0 +1,4 @@
+export interface InfoFeedItem {
+  heading: string;
+  text: string;
+}

apps/domain/isa/src/lib/defs/info-feed.ts

@@ -0,0 +1,7 @@
+import { FeedDTO } from '@swagger/isa';
+import { InfoFeedItem } from './info-feed-item';
+
+export interface InfoFeed extends FeedDTO {
+  type: 'info';
+  items: InfoFeedItem[];
+}

apps/page/dashboard/src/lib/dashboard.component.html

@@ -1,4 +1,5 @@
 <ng-container *ngFor="let feed of feeds$ | async">
   <page-kpi-card *ngIf="feed?.type === 'kpi'" [feed]="feed"></page-kpi-card>
   <page-products-card class="tablet:col-span-2" *ngIf="feed?.type === 'products'" [feed]="feed"></page-products-card>
+  <page-info-card class="tablet:col-span-2" *ngIf="feed?.type === 'info'" [feed]="feed"></page-info-card>
 </ng-container>

apps/page/dashboard/src/lib/dashboard.module.ts

@@ -5,11 +5,12 @@ import { UiProgressModule } from '@ui/progress';
 import { UiSliderModule } from '@ui/slider';
 import { DashboardRoutingModule } from './dashboard-routing-module';
 import { DashboardComponent } from './dashboard.component';
+import { InfoCardComponent } from './info-card/info-card.component';
 import { KpiCardComponent } from './kpi-card/kpi-card.component';
 import { ProductsCardComponent } from './products-card/product-card.component';
 
 @NgModule({
-  declarations: [DashboardComponent, KpiCardComponent, ProductsCardComponent],
+  declarations: [DashboardComponent, KpiCardComponent, ProductsCardComponent, InfoCardComponent],
   imports: [CommonModule, DashboardRoutingModule, UiProgressModule, UiSliderModule, ProductImageModule],
   exports: [DashboardComponent],
 })

apps/page/dashboard/src/lib/info-card/info-card.component.html

@@ -0,0 +1,12 @@
+<div class="info">
+  <div class="title">{{ feed?.label }}</div>
+  <div class="text-2xl font-bold mt-2">{{ feed?.headline }}</div>
+  <div class="desc" [innerHtml]="feed?.desc"></div>
+</div>
+
+<div class="info-item" *ngFor="let item of feed?.items">
+  <div class="text-2xl font-bold">{{ item?.heading }}</div>
+  <div class="desc" [innerHtml]="item?.text"></div>
+</div>
+
+<img *ngIf="feed?.emphasize === 10" src="assets/images/recommendation_tag.png" class="emphasize-tag" />

apps/page/dashboard/src/lib/info-card/info-card.component.scss

@@ -0,0 +1,25 @@
+:host {
+  @apply grid grid-flow-row gap-2 bg-white rounded p-4 pb-10 shadow relative;
+}
+
+.info {
+  .title {
+    @apply font-bold uppercase;
+    color: var(--page-dashboard-card-title-color);
+  }
+}
+
+::ng-deep page-info-card {
+  .info-item {
+    .desc p {
+      @apply mt-4;
+    }
+  }
+
+  .desc p {
+    @apply mt-4;
+  }
+}
+.emphasize-tag {
+  @apply absolute top-0 right-0 mr-8 -mt-1 w-12 z-popover;
+}

apps/page/dashboard/src/lib/info-card/info-card.component.ts

@@ -0,0 +1,15 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { InfoFeed } from '@domain/isa';
+
+@Component({
+  selector: 'page-info-card',
+  templateUrl: 'info-card.component.html',
+  styleUrls: ['info-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InfoCardComponent {
+  @Input()
+  feed: InfoFeed;
+
+  constructor() {}
+}

apps/page/dashboard/src/lib/kpi-card/kpi-card.component.scss

@@ -1,5 +1,5 @@
 :host {
-  @apply grid grid-flow-col gap-4 bg-white rounded p-4 shadow;
+  @apply grid grid-flow-col gap-4 bg-white rounded p-4 shadow relative;
   grid-template-columns: 1fr auto;
 }
 

apps/page/dashboard/src/lib/products-card/product-card.component.html

@@ -12,3 +12,5 @@
     [alt]="item?.product?.name"
   />
 </ui-slider>
+
+<img *ngIf="feed?.emphasize === 10" src="assets/images/recommendation_tag.png" class="emphasize-tag" />

apps/page/dashboard/src/lib/products-card/product-card.component.scss

@@ -1,5 +1,5 @@
 :host {
-  @apply grid grid-flow-row gap-4 bg-white rounded p-4 shadow;
+  @apply grid grid-flow-row gap-4 bg-white rounded p-4 shadow relative;
 
   @screen tablet {
     @apply grid-flow-col grid-cols-2;
@@ -33,3 +33,7 @@ ui-slider {
 ::ng-deep page-products-card .desc ul li {
   @apply list-disc ml-8;
 }
+
+.emphasize-tag {
+  @apply absolute top-0 right-0 mr-8 -mt-1 w-12 z-popover;
+}

package.json

@@ -118,4 +118,4 @@
     "tslint": "~6.1.0",
     "typescript": "~4.3.5"
   }
-}
+}