refactor(query): Standalone

hslayers · Nov 19, 2024 · 2eafa5f · 2eafa5f
1 parent 90a71f1
commit 2eafa5f
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 85 deletions.
diff --git a/projects/hslayers/components/draw/draw.component.ts b/projects/hslayers/components/draw/draw.component.ts
@@ -10,11 +10,11 @@ import {
   HsPanelHeaderComponent,
   HsPanelHelpersModule,
 } from 'hslayers-ng/common/panels';
-import {HsQueryModule} from 'hslayers-ng/components/query';
 import {TranslateCustomPipe} from 'hslayers-ng/services/language';
 
 import {HsDrawEditComponent} from './draw-edit/draw-edit.component';
 import {HsDrawPanelComponent} from './draw-panel/draw-panel.component';
+import {HsQueryFeatureListComponent} from 'hslayers-ng/components/query';
 
 @Component({
   selector: 'hs-draw',
@@ -27,7 +27,7 @@ import {HsDrawPanelComponent} from './draw-panel/draw-panel.component';
     HsDrawEditComponent,
     HsDrawPanelComponent,
     HsPanelBaseComponent,
-    HsQueryModule,
+    HsQueryFeatureListComponent,
     HsPanelHeaderComponent,
     HsPanelHelpersModule,
   ],

diff --git a/projects/hslayers/components/query/attribute-row/attribute-row.component.ts b/projects/hslayers/components/query/attribute-row/attribute-row.component.ts
@@ -1,8 +1,11 @@
 import {Component, Input, OnInit} from '@angular/core';
+import {FormsModule} from '@angular/forms';
 
 @Component({
   selector: 'hs-query-attribute-row',
   templateUrl: './attribute-row.component.html',
+  standalone: true,
+  imports: [FormsModule],
 })
 export class HsQueryAttributeRowComponent implements OnInit {
   isObject = false;

diff --git a/...ts/hslayers/components/query/default-info-panel-body/default-info-panel-body.component.ts b/...ts/hslayers/components/query/default-info-panel-body/default-info-panel-body.component.ts
@@ -1,10 +1,18 @@
 import {Component, OnInit} from '@angular/core';
 
 import {HsQueryBaseService} from 'hslayers-ng/services/query';
-
+import {HsQueryFeatureListComponent} from '../feature-list/feature-list.component';
+import {NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';
+import {TranslateCustomPipe} from 'hslayers-ng/services/language';
 @Component({
   selector: 'hs-query-default-info-panel-body',
   templateUrl: './default-info-panel-body.component.html',
+  standalone: true,
+  imports: [
+    HsQueryFeatureListComponent,
+    NgbDropdownModule,
+    TranslateCustomPipe,
+  ],
 })
 export class HsQueryDefaultInfoPanelBodyComponent implements OnInit {
   featureInfoExpanded: boolean;

diff --git a/projects/hslayers/components/query/feature-list/feature-list.component.ts b/projects/hslayers/components/query/feature-list/feature-list.component.ts
@@ -3,17 +3,35 @@ import {Component} from '@angular/core';
 import {Feature, getUid} from 'ol';
 import {Geometry} from 'ol/geom';
 
+import {AsyncPipe, NgClass, NgStyle, SlicePipe} from '@angular/common';
+import {FormsModule} from '@angular/forms';
 import {HsConfirmDialogComponent} from 'hslayers-ng/common/confirm';
 import {HsDialogContainerService} from 'hslayers-ng/common/dialogs';
+import {HsDownloadModule} from 'hslayers-ng/common/download';
 import {HsFeatureCommonService} from '../feature-common.service';
 import {HsQueryBaseService} from 'hslayers-ng/services/query';
+import {HsQueryFeatureComponent} from '../feature/feature.component';
 import {HsQueryVectorService} from 'hslayers-ng/services/query';
+import {NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';
+import {TranslateCustomPipe} from 'hslayers-ng/services/language';
 import {exportFormats} from '../feature-common.service';
 import {getTitle} from 'hslayers-ng/common/extensions';
 
 @Component({
   selector: 'hs-query-feature-list',
   templateUrl: './feature-list.component.html',
+  standalone: true,
+  imports: [
+    TranslateCustomPipe,
+    AsyncPipe,
+    FormsModule,
+    NgbDropdownModule,
+    HsDownloadModule,
+    NgClass,
+    NgStyle,
+    HsQueryFeatureComponent,
+    SlicePipe,
+  ],
 })
 export class HsQueryFeatureListComponent {
   exportMenuVisible;

diff --git a/projects/hslayers/components/query/feature/feature.component.ts b/projects/hslayers/components/query/feature/feature.component.ts
@@ -6,16 +6,32 @@ import {Feature} from 'ol';
 import {Geometry} from 'ol/geom';
 import {Layer} from 'ol/layer';
 
+import {AsyncPipe, NgClass} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {HsDownloadModule} from 'hslayers-ng/common/download';
 import {HsFeatureCommonService} from '../feature-common.service';
 import {HsLayerUtilsService} from 'hslayers-ng/services/utils';
 import {HsMapService} from 'hslayers-ng/services/map';
+import {HsQueryAttributeRowComponent} from '../attribute-row/attribute-row.component';
 import {HsQueryVectorService} from 'hslayers-ng/services/query';
+import {NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';
+import {TranslateCustomPipe} from 'hslayers-ng/services/language';
 import {exportFormats} from '../feature-common.service';
 import {getTitle} from 'hslayers-ng/common/extensions';
 
 @Component({
   selector: 'hs-query-feature',
   templateUrl: './feature.component.html',
+  standalone: true,
+  imports: [
+    TranslateCustomPipe,
+    AsyncPipe,
+    FormsModule,
+    NgbDropdownModule,
+    HsDownloadModule,
+    NgClass,
+    HsQueryAttributeRowComponent,
+  ],
 })
 export class HsQueryFeatureComponent implements OnInit {
   @Input() feature;

diff --git a/projects/hslayers/components/query/public-api.ts b/projects/hslayers/components/query/public-api.ts
@@ -6,4 +6,3 @@ export * from './feature/feature.component';
 export * from './query-wms.service';
 export * from './query-wmts.service';
 export * from './query.component';
-export * from './query.module';
diff --git a/projects/hslayers/components/query/query.component.html b/projects/hslayers/components/query/query.component.html
@@ -1,42 +1,39 @@
 @if (isVisible$ | async) {
-  <div class="card hs-main-panel" [ngClass]="panelWidthClass">
-    <hs-panel-header name="query" [panelTabs]="'INFO'"></hs-panel-header>
-    @if (noFeatureSelected()) {
-      <div class="card hs-main-panel">
-        <div class="d-flex flex-column align-items-center p-4">
-          <i class="icon-cursor bg-primary p-3 text-white rounded "
-          style="font-size: 1.5rem; color:hsl(208, 100%, 97%)"></i>
-          <p class="h4">{{'QUERY.infoPanel.noFeaturesSelected' | translateHs }}</p>
-          <p class="small">{{'QUERY.infoPanel.clickOnMap' | translateHs }}</p>
-        </div>
-      </div>
-    }
-    @if (hsLayoutService.mainpanel === 'query') {
-      <hs-query-default-info-panel-body>
-      </hs-query-default-info-panel-body>
-    }
-    <hs-custom-info-panel-body></hs-custom-info-panel-body>
-    @if (hsQueryBaseService?.coordinates !== undefined && hsQueryBaseService?.coordinates.length > 0) {
-      <div class="container-fluid"
-        >
-        <div class="row">
-          <div class="col-12 m-2"><strong>{{hsQueryBaseService?.coordinates[0].name}}</strong></div>
-        </div>
-        <div class="row">
-          <div class="input-group m-1">
-            @if (hsQueryBaseService?.coordinates.length>0) {
-              <select class="form-control form-select" [(ngModel)]="hsQueryBaseService.selectedProj"
-                [ngModelOptions]="{standalone: true}">
-                @for (projection of hsQueryBaseService.coordinates[0].projections; track projection) {
-                  <option
-                  [ngValue]="projection">{{projection.name}}</option>
-                }
-              </select>
-            }
-            <input class="form-control" [value]="hsQueryBaseService.selectedProj.value" readonly="">
-          </div>
-        </div>
+<div class="card hs-main-panel" [ngClass]="panelWidthClass">
+  <hs-panel-header name="query" [panelTabs]="'INFO'"></hs-panel-header>
+  @if (noFeatureSelected()) {
+  <div class="card hs-main-panel">
+    <div class="d-flex flex-column align-items-center p-4">
+      <i class="icon-cursor bg-primary p-3 text-white rounded "
+        style="font-size: 1.5rem; color:hsl(208, 100%, 97%)"></i>
+      <p class="h4">{{'QUERY.infoPanel.noFeaturesSelected' | translateHs }}</p>
+      <p class="small">{{'QUERY.infoPanel.clickOnMap' | translateHs }}</p>
+    </div>
+  </div>
+  }
+  @if (hsLayoutService.mainpanel === 'query') {
+  <ng-container *ngComponentOutlet="infoPanelComponent">
+  </ng-container>
+  }
+  @if (hsQueryBaseService?.coordinates !== undefined && hsQueryBaseService?.coordinates.length > 0) {
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-12 m-2"><strong>{{hsQueryBaseService?.coordinates[0].name}}</strong></div>
+    </div>
+    <div class="row">
+      <div class="input-group m-1">
+        @if (hsQueryBaseService?.coordinates.length>0) {
+        <select class="form-control form-select" [(ngModel)]="hsQueryBaseService.selectedProj"
+          [ngModelOptions]="{standalone: true}">
+          @for (projection of hsQueryBaseService.coordinates[0].projections; track projection) {
+          <option [ngValue]="projection">{{projection.name}}</option>
+          }
+        </select>
+        }
+        <input class="form-control" [value]="hsQueryBaseService.selectedProj.value" readonly="">
       </div>
-    }
+    </div>
   </div>
+  }
+</div>
 }
diff --git a/projects/hslayers/components/query/query.component.ts b/projects/hslayers/components/query/query.component.ts
@@ -1,23 +1,45 @@
 //TODO: Check if this import is still needed. Breaks production though
 //import 'ol-popup/src/ol-popup.css';
-import {Component, OnInit} from '@angular/core';
+import {Component, Inject, OnInit, Type} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 
 import Popup from 'ol-popup';
 import {Subject} from 'rxjs';
 import {debounceTime, takeUntil} from 'rxjs/operators';
 
+import {AsyncPipe, NgClass} from '@angular/common';
+import {FormsModule} from '@angular/forms';
 import {HsDrawService} from 'hslayers-ng/services/draw';
 import {HsLogService} from 'hslayers-ng/services/log';
 import {HsMapService} from 'hslayers-ng/services/map';
-import {HsPanelBaseComponent} from 'hslayers-ng/common/panels';
+import {
+  HsPanelBaseComponent,
+  HsPanelHeaderComponent,
+} from 'hslayers-ng/common/panels';
 import {HsQueryBaseService} from 'hslayers-ng/services/query';
+import {HsQueryDefaultInfoPanelBodyComponent} from './default-info-panel-body/default-info-panel-body.component';
 import {HsQueryVectorService} from 'hslayers-ng/services/query';
 import {HsQueryWmsService} from './query-wms.service';
+import {QUERY_INFO_PANEL} from './query.tokens';
+import {TranslateCustomPipe} from 'hslayers-ng/services/language';
 
 @Component({
   selector: 'hs-query',
   templateUrl: './query.component.html',
+  standalone: true,
+  imports: [
+    TranslateCustomPipe,
+    HsPanelHeaderComponent,
+    AsyncPipe,
+    NgClass,
+    FormsModule,
+  ],
+  providers: [
+    {
+      provide: QUERY_INFO_PANEL,
+      useValue: HsQueryDefaultInfoPanelBodyComponent, // Default value
+    },
+  ],
 })
 export class HsQueryComponent extends HsPanelBaseComponent implements OnInit {
   popup = new Popup();
@@ -33,6 +55,7 @@ export class HsQueryComponent extends HsPanelBaseComponent implements OnInit {
     private hsQueryVectorService: HsQueryVectorService,
     private hsDrawService: HsDrawService,
     private hsQueryWmsService: HsQueryWmsService,
+    @Inject(QUERY_INFO_PANEL) public infoPanelComponent: Type<any>,
   ) {
     super();
   }

diff --git a/projects/hslayers/components/query/query.module.ts b/projects/hslayers/components/query/query.module.ts
diff --git a/projects/hslayers/components/query/query.tokens.ts b/projects/hslayers/components/query/query.tokens.ts
@@ -0,0 +1,5 @@
+import {InjectionToken, Type} from '@angular/core';
+
+export const QUERY_INFO_PANEL = new InjectionToken<Type<any>>(
+  'QUERY_INFO_PANEL',
+);