refactor(record-data-preview): introduce new component for preview an…

…d move code there from record-metadata

apps/datahub/src/app/app.module.ts

@@ -102,7 +102,7 @@ import {
   matStarOutline,
 } from '@ng-icons/material-icons/outline'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
-import { MAX_FEATURE_COUNT } from './record/record-metadata/record-metadata.component'
+import { MAX_FEATURE_COUNT } from './record/record-data-preview/record-data-preview.component'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 

apps/datahub/src/app/record/record-data-preview/record-data-preview.component.css

@@ -0,0 +1,39 @@
+/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+::ng-deep .mat-mdc-tab-labels {
+  /* move tabs on the right to let the title show */
+  margin-left: 140px;
+}
+::ng-deep .mat-mdc-tab.mdc-tab {
+  letter-spacing: 0.88px;
+}
+::ng-deep .mat-mdc-tab.mdc-tab:hover .tab-header-label {
+  color: var(--color-primary-darkest);
+}
+::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .tab-header-label {
+  opacity: 100%;
+  font-weight: bold;
+}
+::ng-deep .mdc-tab-indicator--active .mdc-tab-indicator__content {
+  border: none !important;
+}
+::ng-deep .mdc-tab__ripple::before {
+  background-color: transparent !important;
+}
+@media only screen and (max-width: 639px) {
+  /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+  ::ng-deep .mat-mdc-tab-labels {
+    margin-left: 0px;
+  }
+  ::ng-deep .mat-mdc-tab.mdc-tab {
+    padding: 0px !important;
+    margin-right: 24px;
+    justify-content: left !important;
+  }
+  /*hide chart tab on mobile*/
+  ::ng-deep .mat-mdc-tab.mdc-tab:nth-child(3) {
+    display: none;
+  }
+}
+.tab-header-label {
+  @apply uppercase text-sm text-primary opacity-75 hover:text-primary-darker;
+}

apps/datahub/src/app/record/record-data-preview/record-data-preview.component.html

@@ -0,0 +1,81 @@
+<div
+  style="height: 612px"
+  *ngIf="(displayMap$ | async) || (displayData$ | async)"
+  id="preview"
+>
+  <div
+    class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
+    style="height: 512px"
+  >
+    <div class="container-lg px-4 lg:mx-auto">
+      <div>
+        <div
+          class="text-[28px] text-title font-title transform sm:translate-y-10"
+          translate
+        >
+          record.metadata.preview
+        </div>
+        <mat-tab-group
+          (selectedIndexChange)="onTabIndexChange($event)"
+          [selectedIndex]="(displayMap$ | async) ? 0 : 1"
+          animationDuration="200ms"
+          mat-stretch-tabs="false"
+          mat-align-tabs="start"
+        >
+          <mat-tab [disabled]="(displayMap$ | async) === false">
+            <ng-template mat-tab-label>
+              <span class="tab-header-label" translate>record.tab.map</span>
+            </ng-template>
+            <div
+              class="block"
+              style="height: 500px"
+              *ngIf="displayMap$ | async"
+            >
+              <gn-ui-map-view
+                [excludeWfs]="exceedsMaxFeatureCount$ | async"
+              ></gn-ui-map-view>
+            </div>
+          </mat-tab>
+          <mat-tab [disabled]="(displayData$ | async) === false">
+            <ng-template mat-tab-label>
+              <span class="tab-header-label" translate>record.tab.data</span>
+            </ng-template>
+            <div class="block" *ngIf="displayData$ | async">
+              <gn-ui-data-view
+                mode="table"
+                [paginate]="exceedsMaxFeatureCount$ | async"
+              ></gn-ui-data-view>
+            </div>
+          </mat-tab>
+          <mat-tab [disabled]="(displayData$ | async) === false">
+            <ng-template mat-tab-label>
+              <span class="tab-header-label" translate>record.tab.chart</span>
+            </ng-template>
+            <div class="block" *ngIf="displayData$ | async">
+              <ng-container
+                *ngIf="exceedsMaxFeatureCount$ | async; else chartView"
+              >
+                <gn-ui-popup-alert
+                  type="warning"
+                  icon="matErrorOutlineOutline"
+                  class="block h-12 p-1"
+                >
+                  <span translate [translateParams]="{ count: maxFeatureCount }"
+                    >record.feature.limit</span
+                  >
+                </gn-ui-popup-alert>
+              </ng-container>
+              <ng-template #chartView>
+                <gn-ui-data-view mode="chart"></gn-ui-data-view>
+              </ng-template>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+    </div>
+  </div>
+</div>
+<gn-ui-data-view-share
+  *ngIf="displayViewShare$ | async"
+  [viewType]="selectedView$ | async"
+></gn-ui-data-view-share>

apps/datahub/src/app/record/record-data-preview/record-data-preview.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { RecordDataPreviewComponent } from './record-data-preview.component'
+
+describe('RecordDataPreviewComponent', () => {
+  let component: RecordDataPreviewComponent
+  let fixture: ComponentFixture<RecordDataPreviewComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RecordDataPreviewComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(RecordDataPreviewComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

apps/datahub/src/app/record/record-data-preview/record-data-preview.component.ts

@@ -0,0 +1,122 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  InjectionToken,
+  Optional,
+} from '@angular/core'
+import { MatTabsModule } from '@angular/material/tabs'
+import { DataService } from '@geonetwork-ui/feature/dataviz'
+import {
+  DataViewComponent,
+  DataViewShareComponent,
+  MapViewComponent,
+  MdViewFacade,
+} from '@geonetwork-ui/feature/record'
+import { PopupAlertComponent } from '@geonetwork-ui/ui/widgets'
+import { TranslateModule } from '@ngx-translate/core'
+import {
+  BehaviorSubject,
+  combineLatest,
+  map,
+  of,
+  startWith,
+  switchMap,
+} from 'rxjs'
+
+export const MAX_FEATURE_COUNT = new InjectionToken<string>('maxFeatureCount')
+
+@Component({
+  selector: 'datahub-record-data-preview',
+  templateUrl: './record-data-preview.component.html',
+  styleUrls: ['./record-data-preview.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatTabsModule,
+    TranslateModule,
+    DataViewShareComponent,
+    DataViewComponent,
+    MapViewComponent,
+    PopupAlertComponent,
+  ],
+})
+export class RecordDataPreviewComponent {
+  displayMap$ = combineLatest([
+    this.metadataViewFacade.mapApiLinks$,
+    this.metadataViewFacade.geoDataLinksWithGeometry$,
+  ]).pipe(
+    map(([mapApiLinks, geoDataLinksWithGeometry]) => {
+      return mapApiLinks?.length > 0 || geoDataLinksWithGeometry?.length > 0
+    }),
+    startWith(false)
+  )
+
+  displayData$ = combineLatest([
+    this.metadataViewFacade.dataLinks$,
+    this.metadataViewFacade.geoDataLinks$,
+  ]).pipe(
+    map(
+      ([dataLinks, geoDataLinks]) =>
+        dataLinks?.length > 0 || geoDataLinks?.length > 0
+    )
+  )
+
+  exceedsMaxFeatureCount$ =
+    this.metadataViewFacade.geoDataLinksWithGeometry$.pipe(
+      map(
+        (links) =>
+          links.filter((link) => link.accessServiceProtocol === 'wfs')[0]
+      ),
+      switchMap((link) =>
+        link
+          ? this.dataService
+              .getWfsFeatureCount(link.url.toString(), link.name)
+              .pipe(map((count) => !count || count > this.maxFeatureCount))
+          : of(false)
+      )
+    )
+
+  selectedView$ = new BehaviorSubject('map')
+
+  displayViewShare$ = combineLatest([
+    this.displayMap$,
+    this.displayData$,
+    this.selectedView$,
+    this.exceedsMaxFeatureCount$,
+  ]).pipe(
+    map(
+      ([displayMap, displayData, selectedView, exceedsMaxFeatureCount]) =>
+        (displayData || displayMap) &&
+        !(selectedView === 'chart' && exceedsMaxFeatureCount)
+    )
+  )
+
+  constructor(
+    public metadataViewFacade: MdViewFacade,
+    private dataService: DataService,
+    @Inject(MAX_FEATURE_COUNT)
+    @Optional()
+    protected maxFeatureCount: number
+  ) {}
+
+  onTabIndexChange(index: number): void {
+    let view
+    switch (index) {
+      case 0:
+        view = 'map'
+        break
+      case 1:
+        view = 'table'
+        break
+      default:
+        view = 'chart'
+    }
+    this.selectedView$.next(view)
+    setTimeout(() => {
+      window.dispatchEvent(new Event('resize'))
+    }, 0)
+  }
+}

apps/datahub/src/app/record/record-metadata/record-metadata.component.css

@@ -1,43 +1,3 @@
-/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
-::ng-deep .mat-mdc-tab-labels {
-  /* move tabs on the right to let the title show */
-  margin-left: 140px;
-}
-::ng-deep .mat-mdc-tab.mdc-tab {
-  letter-spacing: 0.88px;
-}
-::ng-deep .mat-mdc-tab.mdc-tab:hover .tab-header-label {
-  color: var(--color-primary-darkest);
-}
-::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .tab-header-label {
-  opacity: 100%;
-  font-weight: bold;
-}
-::ng-deep .mdc-tab-indicator--active .mdc-tab-indicator__content {
-  border: none !important;
-}
-::ng-deep .mdc-tab__ripple::before {
-  background-color: transparent !important;
-}
-@media only screen and (max-width: 639px) {
-  /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
-  ::ng-deep .mat-mdc-tab-labels {
-    margin-left: 0px;
-  }
-  ::ng-deep .mat-mdc-tab.mdc-tab {
-    padding: 0px !important;
-    margin-right: 24px;
-    justify-content: left !important;
-  }
-  /*hide chart tab on mobile*/
-  ::ng-deep .mat-mdc-tab.mdc-tab:nth-child(3) {
-    display: none;
-  }
-}
 .tracking-wider {
   letter-spacing: 0.88px;
 }
-
-.tab-header-label {
-  @apply uppercase text-sm text-primary opacity-75 hover:text-primary-darker;
-}