add generic list component to render lists

gisktzh · Nov 5, 2024 · 620ad5b · 620ad5b
1 parent d607611
commit 620ad5b
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 60 deletions.
diff --git a/src/app/data-catalogue/components/data-display-section/data-display-section.component.html b/src/app/data-catalogue/components/data-display-section/data-display-section.component.html
@@ -1,5 +1,5 @@
 <div class="data-display-section">
-  <h3 class="ktzh-h3-medium--bold">{{ sectionTitle }}</h3>
+  <h2 class="ktzh-h2-big">{{ sectionTitle }}</h2>
   <div class="data-display-section__content">
     <ng-content></ng-content>
   </div>

diff --git a/src/app/data-catalogue/components/dataset-detail/dataset-detail.component.html b/src/app/data-catalogue/components/dataset-detail/dataset-detail.component.html
@@ -66,35 +66,38 @@
 
   <data-catalogue-detail-page-section *ngIf="linkedData.maps.length > 0">
     <data-display-section [sectionTitle]="'Karten mit diesem Datensatz'">
-      <descriptive-highlighted-link *ngFor="let map of linkedData.maps" [title]="map.name" [multiLine]="screenMode === 'mobile'">
-        @if (screenMode === 'mobile') {
-          <a [queryParams]="{initialMapIds: map.topic}" [routerLink]="['/', mainPageEnum.Maps]" class="dataset-detail__linked-data-link">
-            Im GIS-Browser öffnen
-          </a>
-          <span>|</span>
-          <a [routerLink]="['/', mainPageEnum.Data, dataCataloguePageEnum.Maps, map.uuid]" class="dataset-detail__linked-data-link">
-            Zu Metadaten springen
-          </a>
-        } @else {
-          <a
-            [queryParams]="{initialMapIds: map.topic}"
-            [routerLink]="['/', mainPageEnum.Maps]"
-            class="dataset-detail__linked-data-button"
-            mat-button
-          >
-            <mat-icon [svgIcon]="'ktzh_arrow_right'"></mat-icon>
-            Im GIS-Browser öffnen
-          </a>
-          <a
-            [routerLink]="['/', mainPageEnum.Data, dataCataloguePageEnum.Maps, map.uuid]"
-            class="dataset-detail__linked-data-button"
-            mat-button
-          >
-            <mat-icon [svgIcon]="'ktzh_arrow_right'"></mat-icon>
-            Zu Metadaten springen
-          </a>
-        }
-      </descriptive-highlighted-link>
+      <generic-list [listData]="linkedData.maps" [itemTemplate]="linkedMap"></generic-list>
+      <ng-template #linkedMap let-map>
+        <descriptive-highlighted-link [title]="map.name" [multiLine]="screenMode === 'mobile'">
+          @if (screenMode === 'mobile') {
+            <a [queryParams]="{initialMapIds: map.topic}" [routerLink]="['/', mainPageEnum.Maps]" class="dataset-detail__linked-data-link">
+              Im GIS-Browser öffnen
+            </a>
+            <span>|</span>
+            <a [routerLink]="['/', mainPageEnum.Data, dataCataloguePageEnum.Maps, map.uuid]" class="dataset-detail__linked-data-link">
+              Zu Metadaten springen
+            </a>
+          } @else {
+            <a
+              [queryParams]="{initialMapIds: map.topic}"
+              [routerLink]="['/', mainPageEnum.Maps]"
+              class="dataset-detail__linked-data-button"
+              mat-button
+            >
+              <mat-icon [svgIcon]="'ktzh_arrow_right'"></mat-icon>
+              Im GIS-Browser öffnen
+            </a>
+            <a
+              [routerLink]="['/', mainPageEnum.Data, dataCataloguePageEnum.Maps, map.uuid]"
+              class="dataset-detail__linked-data-button"
+              mat-button
+            >
+              <mat-icon [svgIcon]="'ktzh_arrow_right'"></mat-icon>
+              Zu Metadaten springen
+            </a>
+          }
+        </descriptive-highlighted-link>
+      </ng-template>
     </data-display-section>
   </data-catalogue-detail-page-section>
 </data-catalogue-detail-page>
diff --git a/src/app/data-catalogue/components/map-detail/map-detail.component.html b/src/app/data-catalogue/components/map-detail/map-detail.component.html
@@ -27,16 +27,18 @@
 
   <data-catalogue-detail-page-section *ngIf="linkedDatasets.length > 0">
     <data-display-section [sectionTitle]="'Verwendete Geodaten'">
-      <descriptive-highlighted-link
-        *ngFor="let linkedDataset of linkedDatasets"
-        [description]="linkedDataset.shortDescription"
-        [title]="linkedDataset.name"
-        [id]="linkedDataset.gisZHNr"
-      >
-        <a [routerLink]="['/', mainPageEnum.Data, dataCataloguePageEnum.Datasets, linkedDataset.uuid]" mat-icon-button>
-          <mat-icon svgIcon="ktzh_arrow_right"></mat-icon>
-        </a>
-      </descriptive-highlighted-link>
+      <generic-list [listData]="linkedDatasets" [itemTemplate]="linkedDataset"></generic-list>
+      <ng-template #linkedDataset let-linkedDataset>
+        <descriptive-highlighted-link
+          [description]="linkedDataset.shortDescription"
+          [title]="linkedDataset.name"
+          [id]="linkedDataset.gisZHNr"
+        >
+          <a [routerLink]="['/', mainPageEnum.Data, dataCataloguePageEnum.Datasets, linkedDataset.uuid]" mat-icon-button>
+            <mat-icon svgIcon="ktzh_arrow_right"></mat-icon>
+          </a>
+        </descriptive-highlighted-link>
+      </ng-template>
     </data-display-section>
   </data-catalogue-detail-page-section>
 </data-catalogue-detail-page>
diff --git a/src/app/data-catalogue/components/product-detail/product-detail.component.html b/src/app/data-catalogue/components/product-detail/product-detail.component.html
@@ -15,16 +15,18 @@
 
   <data-catalogue-detail-page-section *ngIf="linkedDatasets.length > 0">
     <data-display-section [sectionTitle]="'Verwendete Geodatensätze'">
-      <descriptive-highlighted-link
-        *ngFor="let linkedDataset of linkedDatasets"
-        [description]="linkedDataset.shortDescription"
-        [title]="linkedDataset.name"
-        [id]="linkedDataset.gisZHNr"
-      >
-        <a [routerLink]="['/', mainPageEnum.Data, dataCataloguePageEnum.Datasets, linkedDataset.uuid]" mat-icon-button>
-          <mat-icon svgIcon="ktzh_arrow_right"></mat-icon>
-        </a>
-      </descriptive-highlighted-link>
+      <generic-list [listData]="linkedDatasets" [itemTemplate]="linkedDataset"></generic-list>
+      <ng-template #linkedDataset let-linkedDataset>
+        <descriptive-highlighted-link
+          [description]="linkedDataset.shortDescription"
+          [title]="linkedDataset.name"
+          [id]="linkedDataset.gisZHNr"
+        >
+          <a [routerLink]="['/', mainPageEnum.Data, dataCataloguePageEnum.Datasets, linkedDataset.uuid]" mat-icon-button>
+            <mat-icon svgIcon="ktzh_arrow_right"></mat-icon>
+          </a>
+        </descriptive-highlighted-link>
+      </ng-template>
     </data-display-section>
   </data-catalogue-detail-page-section>
 </data-catalogue-detail-page>
diff --git a/src/app/data-catalogue/components/service-detail/service-detail.component.html b/src/app/data-catalogue/components/service-detail/service-detail.component.html
@@ -15,16 +15,18 @@
 
   <data-catalogue-detail-page-section *ngIf="linkedDatasets.length > 0">
     <data-display-section [sectionTitle]="'Verwendete Geodatensätze'">
-      <descriptive-highlighted-link
-        *ngFor="let linkedDataset of linkedDatasets"
-        [description]="linkedDataset.shortDescription"
-        [title]="linkedDataset.name"
-        [id]="linkedDataset.gisZHNr"
-      >
-        <a [routerLink]="['/', mainPageEnum.Data, dataCataloguePageEnum.Datasets, linkedDataset.uuid]" mat-icon-button>
-          <mat-icon svgIcon="ktzh_arrow_right"></mat-icon>
-        </a>
-      </descriptive-highlighted-link>
+      <generic-list [listData]="linkedDatasets" [itemTemplate]="linkedDataset"></generic-list>
+      <ng-template #linkedDataset let-linkedDataset>
+        <descriptive-highlighted-link
+          [description]="linkedDataset.shortDescription"
+          [title]="linkedDataset.name"
+          [id]="linkedDataset.gisZHNr"
+        >
+          <a [routerLink]="['/', mainPageEnum.Data, dataCataloguePageEnum.Datasets, linkedDataset.uuid]" mat-icon-button>
+            <mat-icon svgIcon="ktzh_arrow_right"></mat-icon>
+          </a>
+        </descriptive-highlighted-link>
+      </ng-template>
     </data-display-section>
   </data-catalogue-detail-page-section>
 </data-catalogue-detail-page>
diff --git a/src/app/data-catalogue/data-catalogue.module.ts b/src/app/data-catalogue/data-catalogue.module.ts
@@ -17,6 +17,7 @@ import {DatasetElementDetailComponent} from './components/dataset-detail/dataset
 import {DataDisplayComponent} from './components/data-display/data-display.component';
 import {OverviewSearchResultItemComponent} from '../shared/components/data-catalogue-overview-item/overview-search-result-item.component';
 import {FormatLineBreaksPipe} from '../shared/pipes/format-line-breaks.pipe';
+import {GenericListComponent} from '../shared/components/list/generic-list.component';
 
 @NgModule({
   declarations: [
@@ -41,6 +42,7 @@ import {FormatLineBreaksPipe} from '../shared/pipes/format-line-breaks.pipe';
     OverviewSearchResultItemComponent,
     NgOptimizedImage,
     FormatLineBreaksPipe,
+    GenericListComponent,
   ],
   exports: [],
 })

diff --git a/src/app/shared/components/list/generic-list.component.html b/src/app/shared/components/list/generic-list.component.html
@@ -0,0 +1,5 @@
+<ul class="list">
+  <li *ngFor="let item of listData" class="list__item">
+    <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
+  </li>
+</ul>
diff --git a/src/app/shared/components/list/generic-list.component.scss b/src/app/shared/components/list/generic-list.component.scss
@@ -0,0 +1,11 @@
+.list {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .list__item {
+    list-style-type: none;
+  }
+}
diff --git a/src/app/shared/components/list/generic-list.component.ts b/src/app/shared/components/list/generic-list.component.ts
@@ -0,0 +1,14 @@
+import {Component, Input, TemplateRef} from '@angular/core';
+import {NgForOf, NgTemplateOutlet} from '@angular/common';
+
+@Component({
+  selector: 'generic-list',
+  standalone: true,
+  imports: [NgForOf, NgTemplateOutlet],
+  templateUrl: './generic-list.component.html',
+  styleUrl: './generic-list.component.scss',
+})
+export class GenericListComponent {
+  @Input() public listData: any[] = [];
+  @Input() public itemTemplate: TemplateRef<any> | null = null;
+}