From d79759ca129863f3a00a9ce024bc88365fc2e4e2 Mon Sep 17 00:00:00 2001 From: Pranjal Goyal Date: Sun, 6 Jul 2025 13:38:48 +0530 Subject: [PATCH 001/120] migrate: spatial unit component --- app/app.module.ts | 9 +- .../kommonitor-admin.template.html | 2 +- ...min-spatial-units-management.component.css | 198 +++++++++++++++ ...in-spatial-units-management.component.html | 62 +++++ ...dmin-spatial-units-management.component.ts | 234 ++++++++++++++++++ 5 files changed, 503 insertions(+), 2 deletions(-) create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.css create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts diff --git a/app/app.module.ts b/app/app.module.ts index c4952c82d..2bcae228d 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -73,6 +73,7 @@ import { AdminAppConfigComponent } from './components/ngComponents/admin/adminCo import { AdminControlsConfigComponent } from './components/ngComponents/admin/adminConfig/adminControlsConfig/admin-controls-config.component'; import { AdminRoleExplanationComponent } from './components/ngComponents/admin/adminRoleExplanation/admin-role-explanation.component'; import { AdminDashboardManagementComponent } from './components/ngComponents/admin/adminDashboardManagement/admin-dashboard-management.component'; +import { AdminSpatialUnitsManagementComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component'; // currently the AngularJS routing is still used as part of kommonitorClient module @@ -155,7 +156,8 @@ declare var MathJax; AdminAppConfigComponent, AdminControlsConfigComponent, AdminRoleExplanationComponent, - AdminDashboardManagementComponent + AdminDashboardManagementComponent, + AdminSpatialUnitsManagementComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA @@ -251,6 +253,11 @@ export class AppModule implements DoBootstrap { component: AdminDashboardManagementComponent }) as angular.IDirectiveFactory); + angular.module('kommonitorAdmin') + .directive('adminSpatialUnitsManagementNew', downgradeComponent({ + component: AdminSpatialUnitsManagementComponent + }) as angular.IDirectiveFactory); + console.log("registered downgraded Angular components for AngularJS usage"); } diff --git a/app/components/kommonitorAdmin/kommonitor-admin.template.html b/app/components/kommonitorAdmin/kommonitor-admin.template.html index b4d5352db..9ccc4fcce 100644 --- a/app/components/kommonitorAdmin/kommonitor-admin.template.html +++ b/app/components/kommonitorAdmin/kommonitor-admin.template.html @@ -197,7 +197,7 @@

Gruppen (Hierarchie)

- +
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.css b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.css new file mode 100644 index 000000000..785f43150 --- /dev/null +++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.css @@ -0,0 +1,198 @@ +/* Admin Spatial Units Management Component Styles */ + +.loading-overlay-admin-panel { + width: 100%; + height: 100%; + position: absolute; + background-color: rgb(128,128,128); + top: 0; + left: 0; + border-radius: 5px; + opacity: 0.8; + z-index: 100000; +} + +.loading-overlay-admin-panel .icon-spin { + font-size: 25px; + width: 25px; + height: 25px; + position: absolute; + top: 50%; + left: 50%; + margin: -12.5px 0 0 -12.5px; + + -webkit-animation: spin 1s infinite linear; + -moz-animation: spin 1s infinite linear; + -o-animation: spin 1s infinite linear; + animation: spin 1s infinite linear; + -webkit-transform-origin: 50% 50%; + transform-origin:50% 50%; + -ms-transform-origin:50% 50%; /* IE 9 */ +} + +.adminTableButtonWrapper { + display: flex; + float: right; + background: transparent; + font-size: 12px; + position: absolute; + top: 15px; + right: 40px; +} + +.verticalAlign { + display: table; +} + +.verticalAlign * { + display: table-cell; + vertical-align: middle; + padding-right: 1em; +} + +.verticalAlign div { + position: relative; + top: .2em; +} + +/* Switch styles */ +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 28px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.switchslider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.switchslider:before { + position: absolute; + content: ""; + height: 20px; + width: 20px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .switchslider { + background-color: var(--kommonitor-primary); +} + +input:focus + .switchslider { + box-shadow: 0 0 1px var(--kommonitor-primary); +} + +input:checked + .switchslider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.switchslider.round { + border-radius: 20px; +} + +.switchslider.round:before { + border-radius: 50%; +} + +/* AG Grid customizations */ +.ag-theme-alpine { + --ag-header-height: 50px; + --ag-row-height: 60px; + --ag-header-background-color: #f4f4f4; + --ag-header-foreground-color: #333; + --ag-border-color: #ddd; +} + +.admin-table-wrapper { + margin-top: 20px; +} + +/* Box styles */ +.box-primary { + border-top-color: #3c8dbc; +} + +.box-header { + padding: 15px; + border-bottom: 1px solid #f4f4f4; +} + +.box-title { + margin: 0; + font-size: 18px; + font-weight: 600; +} + +.box-body { + padding: 15px; +} + +/* Button styles */ +.btn-success { + background-color: #00a65a; + border-color: #008d4c; +} + +.btn-success:hover { + background-color: #008d4c; + border-color: #006633; +} + +.btn-success:disabled { + background-color: #ccc; + border-color: #ccc; + cursor: not-allowed; +} + +/* Content header styles */ +.content-header { + padding: 15px 0; + background-color: #f9f9f9; + border-bottom: 1px solid #ddd; +} + +.content-header h1 { + margin: 0; + font-size: 24px; + font-weight: 300; +} + +.content-header h1 small { + font-size: 14px; + color: #777; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .adminTableButtonWrapper { + flex-direction: column; + gap: 10px; + } + + .verticalAlign { + justify-content: center; + } +} \ No newline at end of file diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html new file mode 100644 index 000000000..6a20faf55 --- /dev/null +++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html @@ -0,0 +1,62 @@ +
+ +
+
+ +
+
+ + +
+

+ Verwalten der Raumebenen + Info +

+ +
+
+ Nur editierbare Datensätze anzeigen +
+ +
+
+ + + + + + +
+
+ + +
+ + +
+
+

Raumebenen

+
+ +
+ +
+ +
+ +
+
+ +
+ + +
+ +
\ No newline at end of file diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts new file mode 100644 index 000000000..f5ba3bd5c --- /dev/null +++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts @@ -0,0 +1,234 @@ +import { Component, Inject, OnInit, NgZone, OnDestroy, ViewChild, ElementRef } from '@angular/core'; +import { BroadcastService } from 'services/broadcast-service/broadcast.service'; +import { DOCUMENT } from '@angular/common'; +import { Subscription } from 'rxjs'; +import { HttpClient } from '@angular/common/http'; +declare const agGrid: any; +declare const $: any; +declare const __env: any; + +@Component({ + selector: 'admin-spatial-units-management-new', + templateUrl: './admin-spatial-units-management.component.html', + styleUrls: ['./admin-spatial-units-management.component.css'] +}) +export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy { + @ViewChild('spatialUnitOverviewTable', { static: true }) spatialUnitOverviewTable!: ElementRef; + + loadingData = true; + tableViewSwitcher = false; + gridApi: any; + gridColumnApi: any; + gridOptions: any; + kommonitorDataExchangeServiceInstance: any; + + private subscription: Subscription | undefined; + private initializationTimeout: any; + + constructor( + @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any, + @Inject('kommonitorCacheHelperService') public kommonitorCacheHelperService: any, + @Inject('kommonitorDataGridHelperService') public kommonitorDataGridHelperService: any, + private broadcastService: BroadcastService, + private ngZone: NgZone, + @Inject(DOCUMENT) private document: Document, + private http: HttpClient + ) { + console.log('AdminSpatialUnitsManagementComponent constructor initialized'); + this.kommonitorDataExchangeServiceInstance = this.kommonitorDataExchangeService; + } + + ngOnInit(): void { + console.log('AdminSpatialUnitsManagementComponent ngOnInit'); + this.loadingData = true; + + // initialize any adminLTE box widgets + ($('.box') as any).boxWidget(); + + this.setupBroadcastListeners(); + + // Check if data is already available and initialize immediately + this.checkDataAvailabilityAndInitialize(); + + // Fallback timeout in case no events are fired + this.initializationTimeout = setTimeout(() => { + console.log('Fallback: Initializing spatial units management after timeout'); + this.checkDataAvailabilityAndInitialize(); + }, 5000); // 5 second fallback + } + + ngOnDestroy(): void { + if (this.subscription) { + this.subscription.unsubscribe(); + } + if (this.initializationTimeout) { + clearTimeout(this.initializationTimeout); + } + } + + private checkDataAvailabilityAndInitialize(): void { + // Check if required data is available + if (this.isDataAvailable()) { + console.log('Data is available, initializing spatial units management'); + this.initializeOrRefreshOverviewTable(); + if (this.initializationTimeout) { + clearTimeout(this.initializationTimeout); + } + } else { + console.log('Data not yet available, waiting for events...'); + } + } + + private isDataAvailable(): boolean { + return this.kommonitorDataExchangeService && + this.kommonitorDataExchangeService.availableSpatialUnits && + this.kommonitorDataExchangeService.availableSpatialUnits.length >= 0; + } + + private setupBroadcastListeners(): void { + this.subscription = this.broadcastService.currentBroadcastMsg.subscribe(broadcastMsg => { + if (broadcastMsg.msg === 'initialMetadataLoadingCompleted') { + console.log("Initial metadata loading completed"); + if (this.initializationTimeout) { + clearTimeout(this.initializationTimeout); + } + setTimeout(() => { + this.initializeOrRefreshOverviewTable(); + }, 250); + } else if (broadcastMsg.msg === 'initialMetadataLoadingFailed') { + console.log("Metadata loading failed"); + this.loadingData = false; + if (this.initializationTimeout) { + clearTimeout(this.initializationTimeout); + } + } else if (broadcastMsg.msg === 'refreshSpatialUnitOverviewTable') { + console.log("Refreshing spatial unit overview table"); + this.loadingData = true; + const values = broadcastMsg.values as any[]; + this.refreshSpatialUnitOverviewTable(values[0], values[1]); + } + }); + } + + initializeOrRefreshOverviewTable(): void { + this.loadingData = true; + + this.kommonitorDataGridHelperService.buildDataGrid_spatialUnits(this.initSpatialUnits()); + + setTimeout(() => { + this.loadingData = false; + }); + } + + initSpatialUnits(): any[] { + if (this.tableViewSwitcher) { + return this.kommonitorDataExchangeService.availableSpatialUnits.filter( + (e: any) => !(e.userPermissions.length === 1 && e.userPermissions.includes('viewer')) + ); + } else { + return this.kommonitorDataExchangeService.availableSpatialUnits; + } + } + + onTableViewSwitch(): void { + this.initializeOrRefreshOverviewTable(); + } + + refreshSpatialUnitOverviewTable(crudType?: string, targetSpatialUnitId?: string | string[]): void { + if (!crudType || !targetSpatialUnitId) { + // refetch all metadata from spatial units to update table + this.kommonitorDataExchangeService.fetchSpatialUnitsMetadata( + this.kommonitorDataExchangeService.currentKeycloakLoginRoles + ).then((response: any) => { + this.initializeOrRefreshOverviewTable(); + setTimeout(() => { + this.loadingData = false; + }); + }, (error: any) => { + setTimeout(() => { + this.loadingData = false; + }); + }); + } else if (crudType && targetSpatialUnitId) { + if (crudType === 'add') { + this.kommonitorCacheHelperService.fetchSingleSpatialUnitMetadata( + targetSpatialUnitId as string, + this.kommonitorDataExchangeService.currentKeycloakLoginRoles + ).then((data: any) => { + this.kommonitorDataExchangeService.addSingleSpatialUnitMetadata(data); + this.initializeOrRefreshOverviewTable(); + setTimeout(() => { + this.loadingData = false; + }); + }, (error: any) => { + setTimeout(() => { + this.loadingData = false; + }); + }); + } else if (crudType === 'edit') { + this.kommonitorCacheHelperService.fetchSingleSpatialUnitMetadata( + targetSpatialUnitId as string, + this.kommonitorDataExchangeService.currentKeycloakLoginRoles + ).then((data: any) => { + this.kommonitorDataExchangeService.replaceSingleSpatialUnitMetadata(data); + this.initializeOrRefreshOverviewTable(); + setTimeout(() => { + this.loadingData = false; + }); + }, (error: any) => { + setTimeout(() => { + this.loadingData = false; + }); + }); + } else if (crudType === 'delete') { + // targetSpatialUnitId might be array in this case + if (targetSpatialUnitId && typeof targetSpatialUnitId === 'string') { + this.kommonitorDataExchangeService.deleteSingleSpatialUnitMetadata(targetSpatialUnitId); + this.initializeOrRefreshOverviewTable(); + setTimeout(() => { + this.loadingData = false; + }); + } else if (targetSpatialUnitId && Array.isArray(targetSpatialUnitId)) { + for (const id of targetSpatialUnitId) { + this.kommonitorDataExchangeService.deleteSingleSpatialUnitMetadata(id); + } + this.initializeOrRefreshOverviewTable(); + setTimeout(() => { + this.loadingData = false; + }); + } + } + } + } + + onChangeSelectDataset(spatialUnitDataset: any): void { + console.log(spatialUnitDataset.spatialUnitLevel); + } + + onClickDeleteDatasets(): void { + this.loadingData = true; + + const markedEntriesForDeletion = this.kommonitorDataGridHelperService.getSelectedSpatialUnitsMetadata(); + + // submit selected spatial units to modal controller + this.broadcastService.broadcast('onDeleteSpatialUnits', markedEntriesForDeletion); + + setTimeout(() => { + this.loadingData = false; + }); + } + + onClickEditMetadata(spatialUnitDataset: any): void { + // submit selected spatial unit to modal controller + this.broadcastService.broadcast('onEditSpatialUnitMetadata', spatialUnitDataset); + } + + onClickEditFeatures(spatialUnitDataset: any): void { + // submit selected spatial unit to modal controller + this.broadcastService.broadcast('onEditSpatialUnitFeatures', spatialUnitDataset); + } + + checkCreatePermission(): boolean { + return this.kommonitorDataExchangeService.checkCreatePermission(); + } +} \ No newline at end of file From e2f3c2e95e301ff6e8592e4694f4d8ba586c8962 Mon Sep 17 00:00:00 2001 From: Pranjal Goyal Date: Sun, 6 Jul 2025 20:31:25 +0530 Subject: [PATCH 002/120] migrate: spatial unit add modal component --- app/app-upgraded-providers.ts | 11 + app/app.module.ts | 6 +- ...in-spatial-units-management.component.html | 2 +- ...dmin-spatial-units-management.component.ts | 45 +- .../spatial-unit-add-modal.component.css | 497 ++++++++++ .../spatial-unit-add-modal.component.html | 878 +++++++++++++++++ .../spatial-unit-add-modal.component.ts | 925 ++++++++++++++++++ 7 files changed, 2361 insertions(+), 3 deletions(-) create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.css create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts diff --git a/app/app-upgraded-providers.ts b/app/app-upgraded-providers.ts index a5abb51e3..1ee876a80 100644 --- a/app/app-upgraded-providers.ts +++ b/app/app-upgraded-providers.ts @@ -91,6 +91,17 @@ export const ajskommonitorFilterHelperServiceProvider: any = { useFactory:kommonitorFilterHelperServiceFactory, }; +//importer helper +export function kommonitorImporterHelperServiceFactory (injector:any){ + return injector.get('kommonitorImporterHelperService') +} + +export const ajskommonitorImporterHelperServiceProvider: any = { + deps: ['$injector'], + provide: 'kommonitorImporterHelperService', + useFactory:kommonitorImporterHelperServiceFactory, + }; + //keycloack helper export function kommonitorKeycloackHelperServiceFactory (injector:any){ return injector.get('kommonitorKeycloackHelperService') diff --git a/app/app.module.ts b/app/app.module.ts index 2bcae228d..39c6d4338 100644 --- a/app/app.module.ts +++ b/app/app.module.ts @@ -20,6 +20,7 @@ import { ajskommonitorDataGridHelperServiceProvider, ajskommonitorDiagramHelperServiceProvider, ajskommonitorFilterHelperServiceProvider, + ajskommonitorImporterHelperServiceProvider, ajskommonitorKeycloackHelperServiceProvider, ajskommonitorMultiStepFormHelperServiceProvider, ajskommonitorSingleFeatureMapServiceProvider, @@ -74,6 +75,7 @@ import { AdminControlsConfigComponent } from './components/ngComponents/admin/ad import { AdminRoleExplanationComponent } from './components/ngComponents/admin/adminRoleExplanation/admin-role-explanation.component'; import { AdminDashboardManagementComponent } from './components/ngComponents/admin/adminDashboardManagement/admin-dashboard-management.component'; import { AdminSpatialUnitsManagementComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component'; +import { SpatialUnitAddModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component'; // currently the AngularJS routing is still used as part of kommonitorClient module @@ -108,6 +110,7 @@ declare var MathJax; ajskommonitorSingleFeatureMapServiceProvider, ajskommonitorDiagramHelperServiceProvider, ajskommonitorFilterHelperServiceProvider, + ajskommonitorImporterHelperServiceProvider, ajskommonitorElementVisibilityHelperServiceProvider, ajskommonitorShareHelperServiceProvider, ajskommonitorVisualStyleHelperServiceProvider, @@ -157,7 +160,8 @@ declare var MathJax; AdminControlsConfigComponent, AdminRoleExplanationComponent, AdminDashboardManagementComponent, - AdminSpatialUnitsManagementComponent + AdminSpatialUnitsManagementComponent, + SpatialUnitAddModalComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html index 6a20faf55..8d4c63137 100644 --- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html +++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html @@ -23,7 +23,7 @@

- diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts index f5ba3bd5c..2e612f5e2 100644 --- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts +++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts @@ -3,6 +3,8 @@ import { BroadcastService } from 'services/broadcast-service/broadcast.service'; import { DOCUMENT } from '@angular/common'; import { Subscription } from 'rxjs'; import { HttpClient } from '@angular/common/http'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { SpatialUnitAddModalComponent } from './spatialUnitAddModal/spatial-unit-add-modal.component'; declare const agGrid: any; declare const $: any; declare const __env: any; @@ -32,7 +34,8 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy { private broadcastService: BroadcastService, private ngZone: NgZone, @Inject(DOCUMENT) private document: Document, - private http: HttpClient + private http: HttpClient, + private modalService: NgbModal ) { console.log('AdminSpatialUnitsManagementComponent constructor initialized'); this.kommonitorDataExchangeServiceInstance = this.kommonitorDataExchangeService; @@ -231,4 +234,44 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy { checkCreatePermission(): boolean { return this.kommonitorDataExchangeService.checkCreatePermission(); } + + openAddSpatialUnitModal() { + console.log('Opening add spatial unit modal'); + + // Test if modal service is working + console.log('Modal service available:', this.modalService); + console.log('SpatialUnitAddModalComponent available:', SpatialUnitAddModalComponent); + + try { + // Open modal using NgbModal + const modalRef = this.modalService.open(SpatialUnitAddModalComponent, { + size: 'xl', + backdrop: 'static', + keyboard: false, + container: 'body', + animation: false, + windowClass: 'spatial-unit-add-modal' + }); + + console.log('Modal reference created:', modalRef); + + // Handle modal result + modalRef.result.then( + (result) => { + console.log('Modal closed with result:', result); + if (result.action === 'created') { + // Refresh the spatial units table + this.initializeOrRefreshOverviewTable(); + } + }, + (reason) => { + console.log('Modal dismissed with reason:', reason); + } + ); + } catch (error: any) { + console.error('Error opening modal:', error); + // Fallback: show alert + alert('Modal failed to open: ' + (error?.message || 'Unknown error')); + } + } } \ No newline at end of file diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.css b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.css new file mode 100644 index 000000000..1600758ed --- /dev/null +++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.css @@ -0,0 +1,497 @@ +/* Modal Header */ +.modal-header .close { + margin-left: auto; + padding: 1rem; + margin: -1rem -1rem -1rem auto; +} + +.modal-title { + margin: 0; + color: #495057; + flex: 1; +} + +/* Modal Body */ +:host ::ng-deep .modal-body { + position: relative; + flex: 1 1 auto; + padding: 1rem; +} + +/* Form Elements */ +.form-group { + margin-bottom: 1rem; +} + +.form-control { + display: block; + width: 100%; + height: calc(1.5em + 0.75rem + 2px); + padding: 0.375rem 0.75rem; + color: #495057; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: 0.25rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +.form-control:focus { + color: #495057; + background-color: #fff; + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +} + +textarea.form-control { + height: auto; +} + +.invalid-feedback { + display: block; + margin-top: 0.25rem; + font-size: 80%; + color: #dc3545; +} + +/* Modal Footer */ +.modal-footer, +:host ::ng-deep .modal-footer { + background-color: #f8f9fa; + border-top: 1px solid #dee2e6; + padding: 0.75rem; + border-bottom-right-radius: 0.3rem; + border-bottom-left-radius: 0.3rem; +} + +.modal-footer .btn { + margin-left: 0.25rem; +} + +.modal-footer .btn:first-child { + margin-left: 0; +} + +/* Spinner */ +.spinner-border-sm { + width: 1rem; + height: 1rem; + border-width: 0.2em; +} + +.icon-spin { + animation: spin 1s infinite linear; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +/* Alerts */ +.alert { + position: relative; + padding: 0.75rem 1.25rem; + margin-bottom: 1rem; + border: 1px solid transparent; + border-radius: 0.25rem; +} + +.alert-success { + color: #155724; + background-color: #d4edda; + border-color: #c3e6cb; +} + +.alert-danger { + color: #721c24; + background-color: #f8d7da; + border-color: #f5c6cb; +} + +.alert-dismissable { + padding-right: 4rem; +} + +/* Progress Bar Styles - Matching Original */ +#progressbar { + margin-bottom: 10px; + overflow: hidden; + /*CSS counters to number the steps*/ + counter-reset: step; +} + +#progressbar li { + list-style-type: none; + color: black; + text-transform: uppercase; + font-size: 9px; + float: left; + position: relative; + letter-spacing: 1px; + cursor: pointer; +} + +#progressbar li:before { + content: counter(step); + counter-increment: step; + width: 24px; + height: 24px; + line-height: 26px; + display: block; + font-size: 12px; + color: #333; + background: #cccc; + border-radius: 25px; + margin: 0 auto 10px auto; + transform: translateZ(-1px); +} + +/*progressbar connectors*/ +#progressbar li:after { + content: ''; + width: 100%; + height: 2px; + background: #cccc; + position: absolute; + left: -50%; + top: 9px; + /*put it behind the numbers */ + z-index: -1; +} + +#progressbar li:first-child:after { + /*connector not needed before the first step*/ + content: none; +} + +/*marking active/completed steps green*/ +/*The number of the step and the connector before it = green*/ +#progressbar li.active:before, #progressbar li.active:after { + background: var(--kommonitor-primary); + color: white; +} + +#progressbar li.clickable { + cursor: pointer; + transition: all 0.3s ease; +} + +#progressbar li.clickable:hover { + color: var(--kommonitor-primary); +} + +#progressbar li.clickable:hover:before { + background: var(--kommonitor-primary); + transform: scale(1.1); +} + +/* Switch styles */ +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 28px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.switchslider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.switchslider:before { + position: absolute; + content: ""; + height: 20px; + width: 20px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .switchslider { + background-color: var(--kommonitor-primary); +} + +input:focus + .switchslider { + box-shadow: 0 0 1px var(--kommonitor-primary); +} + +input:checked + .switchslider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +.switchslider.round { + border-radius: 20px; +} + +.switchslider.round:before { + border-radius: 50%; +} + +/* Loading overlay */ +.loading-overlay-admin-panel { + width: 100%; + height: 100%; + position: absolute; + background-color: rgb(128,128,128); + top: 0; + left: 0; + border-radius: 5px; + opacity: 0.8; + z-index: 100000; +} + +.loading-overlay-admin-panel .icon-spin { + font-size: 25px; + width: 25px; + height: 25px; + position: absolute; + top: 50%; + left: 50%; + margin: -12.5px 0 0 -12.5px; + -webkit-animation: spin 1s infinite linear; + -moz-animation: spin 1s infinite linear; + -o-animation: spin 1s infinite linear; + animation: spin 1s infinite linear; + -webkit-transform-origin: 50% 50%; + transform-origin:50% 50%; + -ms-transform-origin:50% 50%; +} + +/* Form validation */ +.help-block.with-errors { + color: #dc3545; + font-size: 80%; + margin-top: 0.25rem; +} + +/* Color picker */ +input[type="color"] { + -webkit-appearance: none; + border: none; + width: 50px; + height: 34px; + border-radius: 4px; + cursor: pointer; +} + +input[type="color"]::-webkit-color-swatch-wrapper { + padding: 0; +} + +input[type="color"]::-webkit-color-swatch { + border: none; + border-radius: 4px; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .modal-body { + padding: 0.5rem; + } + + .form-group { + margin-bottom: 0.5rem; + } + + .col-xs-12 { + margin-bottom: 1rem; + } +} + +/* Ensure modal is visible */ +:host { + display: block; + z-index: 99999999 !important; +} + +/* Override any conflicting styles */ +.spatial-unit-add-modal .modal-dialog { + max-width: 85% !important; + width: 85% !important; + margin: 1.75rem auto; +} + +/* Ensure modal content is properly sized */ +.spatial-unit-add-modal .modal-content { + background-color: white; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px; + box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + max-height: 90vh; + overflow-y: auto; +} + +.spatial-unit-add-modal .modal-content { + background-color: white; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px; + box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); +} + +/* Ensure modal backdrop is visible */ +.modal-backdrop { + opacity: 0.5; + background-color: #000; + z-index: 99999998 !important; +} + +/* Force modal to be visible */ +.modal { + display: block !important; + z-index: 99999999 !important; +} + +.modal-dialog { + z-index: 99999999 !important; +} + +.modal-content { + z-index: 99999999 !important; +} + +/* Debug styles - add a bright border to see if modal is rendered */ +.spatial-unit-add-modal { + border: 3px solid red !important; +} + +/* Global modal size overrides for NgbModal */ +:host ::ng-deep .modal-dialog { + max-width: 85% !important; + width: 85% !important; + margin: 1.75rem auto; +} + +:host ::ng-deep .modal-content { + max-height: 90vh; + overflow-y: auto; +} + +:host ::ng-deep .modal-body { + max-height: calc(90vh - 120px); + overflow-y: auto; + padding: 2rem; +} + +/* Multi-step form styles - Matching Original */ +.multiStepForm { + text-align: center; + position: relative; + margin-top: 30px; + z-index: 11000; + font-size: 12px; +} + +.multiStepForm fieldset { + background: white; + border: 0 none; + border-radius: 0px; + box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); + padding: 0px 30px; + box-sizing: border-box; + /*stacking fieldsets above each other*/ + position: relative; + width: 100%; +} + +/*inputs*/ +.multiStepForm input, .multiStepForm textarea, .multiStepForm select { + border: 1px solid #ccc; + border-radius: 0px; + margin-bottom: 10px; + width: 100%; + box-sizing: border-box; + color: #2C3E50; + font-size: 13px; +} + +.multiStepForm input:focus, .multiStepForm textarea:focus { + -moz-box-shadow: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + border: 1px solid var(--kommonitor-primary); + outline-width: 0; + transition: All 0.5s ease-in; + -webkit-transition: All 0.5s ease-in; + -moz-transition: All 0.5s ease-in; + -o-transition: All 0.5s ease-in; +} + +/*buttons*/ +.multiStepForm .action-button { + width: auto; + background: var(--kommonitor-primary); + font-weight: bold; + color: white; + border: 0 none; + border-radius: 25px; + cursor: pointer; + padding: 10px 5px; + margin: 10px 5px; +} + +.multiStepForm .action-button:hover, .multiStepForm .action-button:focus { + box-shadow: 0 0 0 2px white, 0 0 0 3px var(--kommonitor-primary); +} + +.multiStepForm .action-button-previous { + width: 100px; + background: rgb(236, 138, 138); + font-weight: bold; + color: white; + border: 0 none; + border-radius: 25px; + cursor: pointer; + padding: 10px 5px; + margin: 10px 5px; +} + +.multiStepForm .action-button-previous:hover, .multiStepForm .action-button-previous:focus { + box-shadow: 0 0 0 2px white, 0 0 0 3px #C5C5F1; +} + +/*headings*/ +.fs-title { + font-size: 18px; + text-transform: uppercase; + color: #2C3E50; + margin-bottom: 10px; + letter-spacing: 2px; + font-weight: bold; +} + +.fs-subtitle { + font-weight: normal; + font-size: 13px; + color: #666; + margin-bottom: 20px; +} + +/* Make sure form fields have proper spacing */ +.row.vertical-align { + margin-bottom: 1.5rem; +} + +/* Ensure proper spacing between form groups */ +.form-group { + margin-bottom: 1.5rem; +} \ No newline at end of file diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html new file mode 100644 index 000000000..39ad0c7b6 --- /dev/null +++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html @@ -0,0 +1,878 @@ +
+ +

Neue Raumebene registrieren

+
+ +
+
+
+ +
+
+ + +
+ +
    +
  • Metadaten der Raumebene
    • +
  • Allgemeine Metadaten
    • +
  • Räumlicher Datensatz
    • +
+
    +
  • Metadaten der Raumebene
    • +
  • Allgemeine Metadaten
    • +
  • Zugriffsschutz und Eigentümerschaft
    • +
  • Räumlicher Datensatz
    • +
+ + +
+

Metadaten der Raumebene

+

Angaben über die neue Raumebene

+

* = Pflichtfeld

+ +
+
+
+ + +
+
+

Eingabe ungültig. Es existiert bereits eine Raumebene mit gleichem Namen.

+
+
+
+
+
+ + +
+

Eintrag kann im Nachhinein mittels Metadaten-Editier-Funktion gesetzt werden

+
+
+
+

Eingabe ungültig. Definierte Hierarchie ist nicht erlaubt.

+
+
+
+
+
+ + +
+

Eintrag kann im Nachhinein mittels Metadaten-Editier-Funktion gesetzt werden

+
+
+
+

Eingabe ungültig. Definierte Hierarchie ist nicht erlaubt.

+
+
+
+
+ +
+
+
+ + +
+

wenn markiert, dann wird in der Kartenapplikation in der Layersteuerung ein entsprechender Eintrag zur Darstellung der Raumebenenumringe angeboten

+
+
+
+
+
+ +
+ +
+
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ + +
+
+
+
+
+ + +
+ + +
+

Allgemeine Metadaten

+

Angaben über allgemeine Metadaten in KomMonitor

+

* = Pflichtfeld

+ +
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+ +
+
+
+ + +
+
+
+
+
+ +
+
+ +
+ +
+
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+ + + +
+ + +
+

Zugriffsschutz und Eigentümerschaft

+

Vergabe der Zugriffsrechte auf Datensatz-Metadaten und -Features pro Organisationseinheit

+
+
+
+
+ Bitte wählen Sie zunächst die Organisationseinheit aus, unter welcher Sie den Datensatz anlegen möchten +
+ +
+ + +
+ + +

+
+
+
+ +
+
+
+ +
+ +
+
+ + +
+

+ Öffentlich freigegebene Datensätze können ohne Login abgerufen werden. +

+
+
+
+
+
+
+
+ Als Eigentümer-Organisation des Datensatzes können Sie Lese- und Editier-Rechte an die eigene und weitere Organisationseinheiten vergeben. +
+
+
+ Lese- und Editierrechte wurden für die von Ihnen selektierte Eigentümer-Organisationseinheit markiert. +
+
+
+
+ + + +
+ + +
+
+ + + +
+

Räumlicher Datensatz

+

Angaben über den räumlichen Datensatz, aus dem die Raumeinheiten importiert werden

+

* = Pflichtfeld

+ +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+

{{parameter.description}}

+
+
+

CRS aufmerksam setzen. Falsche Angaben führen zur fehlerhaften Koordinaten der Raumeinheiten

+
+
+
+
+
+
+
+
+

bitte zuerst das Quellformat wählen

+
+
+
+ + +
+
+ +
+ + +
+
+ + + +
+ + +
+

Raumebene aus welchem ein umschließendes Rechteck extrahiert wird

+
+
+
+ + +
+

Minimale x-Koordinate

+
+ +
+

Minimale y-Koordinate

+
+ +
+

Maximale x-Koordinate

+
+ +
+

Maximale y-Koordinate

+
+
+
+
+
+
+ + + +
+

{{parameter.description}}

+
+
+
+
+
+
+
+
+

Eingabe ungültig. Grund: {{spatialUnitDataSourceInputInvalidReason}}

+
+
+
+
+
+ + +
+

Name des Attributs, welches den eindeutigen Identifier des Raumeinheiten enthält.

+
+
+
+

Eingabe ungültig. Angegebenes Attribut nicht gefunden oder enthält NULL-Werte.

+
+
+
+ + +
+

Name des Attributs, welches den eindeutigen Namen des Raumeinheiten enthält.

+
+
+
+

Eingabe ungültig. Angegebenes Attribut nicht gefunden oder enthält NULL-Werte.

+
+
+
+
+
+ + +
+

Eintrag nur, falls die räumlichen Raumeinheiten über ein Attribut für den Lebenszeitraum (Beginn) verfügen.

+
+
+
+
+ + +
+

Eintrag nur, falls die räumlichen Raumeinheiten über ein Attribut für den Lebenszeitraum (Ende) verfügen.

+
+
+
+
+
+ +
+
+
+ +
+
+ +
+ +
+
+

Eintrag ist immer erforderlich, selbst wenn die räumlichen Raumeinheiten über ein Lebenszeitraum-Attribut verfügen.

+
+
+
+

Eingabe ungültig. Definiertes Zeitintervall ist nicht erlaubt.

+
+
+
+
+
+ +
+
+ +
+ +
+
+

Eintrag ist erforderlich, falls die räumlichen Raumeinheiten nicht selbst über ein Lebenszeitraum-Attribut verfügen. Enddatum darf leer sein, um anzuzeigen, dass es sich um aktuell gültige Raumeinheiten handelt.

+
+
+
+

Eingabe ungültig. Definiertes Zeitintervall ist nicht erlaubt.

+
+
+
+
+ +
+
+ +
+
+
+ +
+ +
+

Angabe, ob alle sonstigen Attribute des importierten Datensatzes mit gleichem Namen übernommen werden sollen. Falls nicht, so lassen sich einzelne Attribut-Importe definieren.

+
+
+
+
+
+ +
+ +
+

Angabe, ob fehlende Attribute oder leere Attributwerte (NULL-Werte) übernommen werden. Bei deaktivierter Option wird bei einem solchen Fall ein Fehler geworfen.

+
+
+
+
+ +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + +
EditierfunktionenQuell-Attributname im DatensatzZiel-Attributname nach ImportDatentyp
+
+ + +
+ 		{{attributeMappingEntry.sourceName}}{{attributeMappingEntry.destinationName}}{{attributeMappingEntry.dataType.displayName}}
+
+
+ + +
+
+ +
+ +
+ + + + + + +
+ + +
+ +

Raumebene registriert

+

Eine neue Raumebene mit Namen {{successMessagePart}} wurde in KomMonitor registriert und in die Übersichtstabelle eingetragen.

+
+ {{importedFeatures.length}} Raumeinheiten wurden dabei importiert. +
+
+ + +
+ +

Registrierung gescheitert

+ Bei der Registrierung der Raumebene ist ein Fehler aufgetreten. Fehlermeldung: +
+ 

+  

+  

+  

+    
Bei den {{importerErrors.length}} Raumeinheiten mit folgenden IDs scheitert der Import:

+    
+      
    
+        
  • {{error}}
    • 
+      

+    
	
+    
Bitte beheben Sie die angezeigten Fehler im Datensatz und wiederholen den Prozess.

+  

+

+
+
+

+  
+  
Metadata Import gescheitert

+  Beim Import der Metadaten aus einer Datei ist ein Fehler aufgetreten. Fehlermeldung:
+  

+  
{{spatialUnitMetadataImportError}}
								
+  
								
+  

+  
Bitte stellen Sie sicher, dass folgendes JSON-Format eingehalten wird:

+  

+

+
+
+

+  
+  
Mapping-Konfiguration Import gescheitert

+  Beim Import der Mapping-Konfiguration aus einer Datei ist ein Fehler aufgetreten. Fehlermeldung:
+  

+  
								
+  
								
+  

+  
Bitte stellen Sie sicher, dass folgendes JSON-Format eingehalten wird:

+  

+
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
new file mode 100644
index 000000000..37c39205d
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
@@ -0,0 +1,925 @@
+import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'spatial-unit-add-modal-new',
+  templateUrl: './spatial-unit-add-modal.component.html',
+  styleUrls: ['./spatial-unit-add-modal.component.css']
+})
+export class SpatialUnitAddModalComponent implements OnInit {
+  @ViewChild('metadataImportFile', { static: false }) metadataImportFile!: ElementRef;
+  @ViewChild('mappingConfigImportFile', { static: false }) mappingConfigImportFile!: ElementRef;
+  @ViewChild('spatialUnitDataSourceInput', { static: false }) spatialUnitDataSourceInput!: ElementRef;
+
+  // Multi-step form
+  currentStep = 1;
+  totalSteps = 3; // Will be adjusted based on security settings
+
+  // Form data
+  isSubmitting = false;
+  errorMessage = '';
+  successMessage = '';
+  loadingData = false;
+
+  // Basic form data
+  spatialUnitLevel = '';
+  spatialUnitLevelInvalid = false;
+  metadata: any = {
+    description: '',
+    databasis: '',
+    datasource: '',
+    contact: '',
+    updateInterval: null,
+    lastUpdate: '',
+    literature: '',
+    note: '',
+    sridEPSG: 4326
+  };
+
+  // Hierarchy
+  nextLowerHierarchySpatialUnit: any = null;
+  nextUpperHierarchySpatialUnit: any = null;
+  hierarchyInvalid = false;
+
+  // Outline layer settings
+  isOutlineLayer = false;
+  loiColor = '#bf3d2c';
+  outlineWidth = 2;
+  outlineDashArray: any = null;
+
+  // Period of validity
+  periodOfValidity: { startDate: string; endDate: string } = {
+    startDate: '',
+    endDate: ''
+  };
+  periodOfValidityInvalid = false;
+
+  // Available options
+  availableSpatialUnits: any[] = [];
+  updateIntervalOptions: any[] = [];
+  availableDatasourceTypes: any[] = [];
+  availableLoiDashArrayObjects: any[] = [];
+
+  // Importer functionality
+  converter: any = null;
+  schema: string = '';
+  mimeType: string = '';
+  datasourceType: any = null;
+  spatialUnitDataSourceIdProperty = '';
+  spatialUnitDataSourceIdPropertyInvalid = false;
+  spatialUnitDataSourceNameProperty = '';
+  spatialUnitDataSourceNamePropertyInvalid = false;
+
+  // Bbox parameters for OGCAPI_FEATURES
+  bboxType: string = '';
+  bboxRefSpatialUnit: any = null;
+
+  // Attribute mapping
+  attributeMapping_sourceAttributeName = '';
+  attributeMapping_destinationAttributeName = '';
+  attributeMapping_attributeType: any = null;
+  attributeMappings_adminView: any[] = [];
+  keepAttributes = true;
+  keepMissingValues = true;
+
+  // Validity dates per feature
+  validityStartDate_perFeature = '';
+  validityEndDate_perFeature = '';
+
+  // Role management
+  roleManagementTableOptions: any = null;
+  ownerOrganization = '';
+  ownerOrgFilter = '';
+  isPublic = false;
+  resourcesCreatorRights: any[] = [];
+
+  // Import/Export functionality
+  metadataImportSettings: any = null;
+  mappingConfigImportSettings: any = null;
+  spatialUnitMetadataImportError = '';
+  spatialUnitMappingConfigImportError = '';
+
+  // Success/Error data
+  successMessagePart = '';
+  errorMessagePart = '';
+  importerErrors: any[] = [];
+  importedFeatures: any[] = [];
+
+  // Importer objects
+  converterDefinition: any = null;
+  datasourceTypeDefinition: any = null;
+  propertyMappingDefinition: any = null;
+  postBody_spatialUnits: any = null;
+
+  // Validation flags
+  idPropertyNotFound = false;
+  namePropertyNotFound = false;
+  spatialUnitDataSourceInputInvalid = false;
+  spatialUnitDataSourceInputInvalidReason = '';
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
+    @Inject('kommonitorImporterHelperService') public kommonitorImporterHelperService: any,
+    @Inject('kommonitorDataGridHelperService') private kommonitorDataGridHelperService: any,
+    @Inject('kommonitorMultiStepFormHelperService') private kommonitorMultiStepFormHelperService: any,
+    private http: HttpClient,
+    private broadcastService: BroadcastService,
+    @Inject('kommonitorConfigStorageService') private kommonitorConfigStorageService: any
+  ) {
+    console.log('SpatialUnitAddModalComponent constructor initialized - Modal is being created');
+  }
+
+  ngOnInit() {
+    console.log('SpatialUnitAddModalComponent ngOnInit - Modal is being initialized');
+    this.loadInitialData();
+    this.initializeMultiStepForm();
+    console.log('SpatialUnitAddModalComponent ngOnInit - Modal initialization complete');
+    console.log('Current step:', this.currentStep);
+    console.log('Total steps:', this.totalSteps);
+  }
+
+  private loadInitialData() {
+    this.loadingData = true;
+    
+    // Load available spatial units
+    if (this.kommonitorDataExchangeService.availableSpatialUnits) {
+      this.availableSpatialUnits = this.kommonitorDataExchangeService.availableSpatialUnits;
+    }
+
+    // Load update interval options
+    if (this.kommonitorDataExchangeService.updateIntervalOptions) {
+      this.updateIntervalOptions = this.kommonitorDataExchangeService.updateIntervalOptions;
+    }
+
+    // Initialize attribute mapping types
+    if (this.kommonitorImporterHelperService.attributeMapping_attributeTypes) {
+      this.attributeMapping_attributeType = this.kommonitorImporterHelperService.attributeMapping_attributeTypes[0];
+    }
+
+    // Load converters and datasource types
+    this.loadConverters();
+    this.loadDatasourceTypes();
+
+    this.loadingData = false;
+  }
+
+  private initializeMultiStepForm() {
+    // Initialize multi-step form based on security settings
+    if (this.kommonitorDataExchangeService.accessControl && 
+        this.kommonitorDataExchangeService.accessControl.roleManagement) {
+      this.totalSteps = 5; // Include role management step
+    } else {
+      this.totalSteps = 4;
+    }
+
+    // Initialize role management if available
+    if (this.kommonitorDataExchangeService.accessControl) {
+      this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+        'spatialUnitAddRoleManagementTable', 
+        this.roleManagementTableOptions, 
+        this.kommonitorDataExchangeService.accessControl, 
+        []
+      );
+    }
+  }
+
+  private loadConverters(): void {
+    if (this.kommonitorImporterHelperService.availableConverters) {
+      // Filter converters for spatial units
+      this.availableDatasourceTypes = this.kommonitorImporterHelperService.availableConverters
+        .filter((converter: any) => converter.type === 'spatialUnit');
+    }
+  }
+
+  private loadDatasourceTypes(): void {
+    if (this.kommonitorImporterHelperService.availableDatasourceTypes) {
+      this.availableDatasourceTypes = this.kommonitorImporterHelperService.availableDatasourceTypes;
+    }
+  }
+
+  checkSpatialUnitName() {
+    this.spatialUnitLevelInvalid = false;
+    const level = this.spatialUnitLevel;
+    
+    if (level) {
+      this.availableSpatialUnits.forEach(spatialUnit => {
+        if (spatialUnit.spatialUnitLevel === level) {
+          this.spatialUnitLevelInvalid = true;
+          return;
+        }
+      });
+    }
+  }
+
+  checkSpatialUnitHierarchy() {
+    this.hierarchyInvalid = false;
+
+    // smaller indices represent higher spatial units
+    // i.e. city districts will have a smaller index than building blocks
+    if (this.nextLowerHierarchySpatialUnit && this.nextUpperHierarchySpatialUnit) {
+      let indexOfLowerHierarchyUnit: number;
+      let indexOfUpperHierarchyUnit: number;
+
+      for (let i = 0; i < this.kommonitorDataExchangeService.availableSpatialUnits.length; i++) {
+        const spatialUnit = this.kommonitorDataExchangeService.availableSpatialUnits[i];
+        if (spatialUnit.spatialUnitLevel === this.nextLowerHierarchySpatialUnit.spatialUnitLevel) {
+          indexOfLowerHierarchyUnit = i;
+        }
+        if (spatialUnit.spatialUnitLevel === this.nextUpperHierarchySpatialUnit.spatialUnitLevel) {
+          indexOfUpperHierarchyUnit = i;
+        }
+      }
+
+      if ((indexOfLowerHierarchyUnit! <= indexOfUpperHierarchyUnit!)) {
+        // failure
+        this.hierarchyInvalid = true;
+      }
+    }
+  }
+
+  checkPeriodOfValidity() {
+    this.periodOfValidityInvalid = false;
+    if (this.periodOfValidity.startDate && this.periodOfValidity.endDate) {
+      const startDate = new Date(this.periodOfValidity.startDate);
+      const endDate = new Date(this.periodOfValidity.endDate);
+
+      if ((startDate.getTime() === endDate.getTime()) || startDate > endDate) {
+        // failure
+        this.periodOfValidityInvalid = true;
+      }
+    }
+  }
+
+  // Attribute mapping methods
+  onAddOrUpdateAttributeMapping() {
+    const tmpAttributeMapping_adminView = {
+      "sourceName": this.attributeMapping_sourceAttributeName,
+      "destinationName": this.attributeMapping_destinationAttributeName,
+      "dataType": this.attributeMapping_attributeType
+    };
+
+    let processed = false;
+
+    for (let index = 0; index < this.attributeMappings_adminView.length; index++) {
+      const attributeMappingEntry_adminView = this.attributeMappings_adminView[index];
+      
+      if (attributeMappingEntry_adminView.sourceName === tmpAttributeMapping_adminView.sourceName) {
+        // replace object
+        this.attributeMappings_adminView[index] = tmpAttributeMapping_adminView;
+        processed = true;
+        break;
+      }
+    }			
+
+    if (!processed) {
+      // new entry
+      this.attributeMappings_adminView.push(tmpAttributeMapping_adminView);
+    }
+
+    this.attributeMapping_sourceAttributeName = '';
+    this.attributeMapping_destinationAttributeName = '';
+    this.attributeMapping_attributeType = this.kommonitorImporterHelperService.attributeMapping_attributeTypes[0];
+  }
+
+  onClickEditAttributeMapping(attributeMappingEntry: any) {
+    this.attributeMapping_sourceAttributeName = attributeMappingEntry.sourceName;
+    this.attributeMapping_destinationAttributeName = attributeMappingEntry.destinationName;
+    this.attributeMapping_attributeType = attributeMappingEntry.dataType;
+  }
+
+  onClickDeleteAttributeMapping(attributeMappingEntry: any) {
+    for (let index = 0; index < this.attributeMappings_adminView.length; index++) {
+      if (this.attributeMappings_adminView[index].sourceName === attributeMappingEntry.sourceName) {
+        // remove object
+        this.attributeMappings_adminView.splice(index, 1);
+        break;
+      }
+    }
+  }
+
+  onChangeConverter(schema?: any) {
+    this.schema = this.converter.schemas ? this.converter.schemas[0] : undefined;
+    this.mimeType = this.converter.mimeTypes ? this.converter.mimeTypes[0] : undefined;
+  }
+
+  onChangeMimeType(mimeType: any) {
+    this.mimeType = mimeType;
+  }
+
+  onChangeDatasourceType(datasourceType: any) {
+    // Handle datasource type change
+    this.datasourceType = datasourceType;
+    // Reset related fields when datasource type changes
+    this.spatialUnitDataSourceIdProperty = '';
+    this.spatialUnitDataSourceNameProperty = '';
+    this.bboxType = '';
+    this.bboxRefSpatialUnit = null;
+  }
+
+  onChangeOutlineDashArray(outlineDashArrayObject: any) {
+    // Handle outline dash array change
+    this.outlineDashArray = outlineDashArrayObject;
+  }
+
+  // Importer object building methods
+  async buildImporterObjects() {
+    this.converterDefinition = this.buildConverterDefinition();
+    this.datasourceTypeDefinition = await this.buildDatasourceTypeDefinition();
+    this.propertyMappingDefinition = this.buildPropertyMappingDefinition();
+    this.postBody_spatialUnits = this.buildPostBody_spatialUnits();
+
+    if (!this.converterDefinition || !this.datasourceTypeDefinition || !this.propertyMappingDefinition || !this.postBody_spatialUnits) {
+      return false;
+    }
+
+    return true;
+  }
+
+  buildConverterDefinition() {
+    return this.kommonitorImporterHelperService.buildConverterDefinition(
+      this.converter, 
+      "converterParameter_spatialUnitAdd_", 
+      this.schema, 
+      this.mimeType
+    );
+  }
+
+  async buildDatasourceTypeDefinition() {
+    try {
+      return await this.kommonitorImporterHelperService.buildDatasourceTypeDefinition(
+        this.datasourceType, 
+        'datasourceTypeParameter_spatialUnitAdd_', 
+        'spatialUnitDataSourceInput'
+      );
+    } catch (error: any) {
+      if (error.data) {
+        this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error.data);
+      } else {
+        this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+      }
+
+      this.loadingData = false;
+      return null;
+    }
+  }
+
+  buildPropertyMappingDefinition() {
+    // arsion from is undefined currently
+    return this.kommonitorImporterHelperService.buildPropertyMapping_spatialResource(
+      this.spatialUnitDataSourceNameProperty, 
+      this.spatialUnitDataSourceIdProperty, 
+      this.validityStartDate_perFeature, 
+      this.validityEndDate_perFeature, 
+      undefined, 
+      this.keepAttributes, 
+      this.keepMissingValues, 
+      this.attributeMappings_adminView
+    );
+  }
+
+  buildPostBody_spatialUnits() {
+    const postBody: any = {
+      "geoJsonString": "", // will be set by importer
+      "metadata": {
+        "note": this.metadata.note,
+        "literature": this.metadata.literature,
+        "updateInterval": this.metadata.updateInterval?.apiName,
+        "sridEPSG": this.metadata.sridEPSG,
+        "datasource": this.metadata.datasource,
+        "contact": this.metadata.contact,
+        "lastUpdate": this.metadata.lastUpdate,
+        "description": this.metadata.description,
+        "databasis": this.metadata.databasis
+      },
+      "jsonSchema": undefined,
+      "allowedRoles": [] as string[],
+      "nextLowerHierarchyLevel": this.nextLowerHierarchySpatialUnit ? this.nextLowerHierarchySpatialUnit.spatialUnitLevel : null,
+      "spatialUnitLevel": this.spatialUnitLevel,
+      "periodOfValidity": {
+        "endDate": this.periodOfValidity && this.periodOfValidity.endDate ? this.periodOfValidity.endDate : null,
+        "startDate": this.periodOfValidity && this.periodOfValidity.startDate ? this.periodOfValidity.startDate : null
+      },
+      "nextUpperHierarchyLevel": this.nextUpperHierarchySpatialUnit ? this.nextUpperHierarchySpatialUnit.spatialUnitLevel : null
+    };
+
+    if (this.roleManagementTableOptions) {
+      const roleIds = this.kommonitorDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
+      if (roleIds && Array.isArray(roleIds)) {
+        for (const roleId of roleIds) {
+          postBody.allowedRoles.push(roleId);
+        }
+      }
+    }
+
+    return postBody;
+  }
+
+  async addSpatialUnit() {
+    this.loadingData = true;
+    this.importerErrors = [];
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+
+    // now collect data and build request for importer
+    const allDataSpecified = await this.buildImporterObjects();
+
+    if (!allDataSpecified) {
+      // TODO: Add form validation here
+      this.loadingData = false;
+      return;
+    } else {
+      // TODO verify input
+      // TODO Create and perform POST Request with loading screen
+
+      let newSpatialUnitResponse_dryRun: any = undefined;
+      try {
+        newSpatialUnitResponse_dryRun = await this.kommonitorImporterHelperService.registerNewSpatialUnit(
+          this.converterDefinition, 
+          this.datasourceTypeDefinition, 
+          this.propertyMappingDefinition, 
+          this.postBody_spatialUnits, 
+          true
+        );
+
+        if (!this.kommonitorImporterHelperService.importerResponseContainsErrors(newSpatialUnitResponse_dryRun)) {
+          // all good, really execute the request to import data against data management API
+          const newSpatialUnitResponse = await this.kommonitorImporterHelperService.registerNewSpatialUnit(
+            this.converterDefinition, 
+            this.datasourceTypeDefinition, 
+            this.propertyMappingDefinition, 
+            this.postBody_spatialUnits, 
+            false
+          );
+
+          this.broadcastService.broadcast("refreshSpatialUnitOverviewTable", ["add", this.kommonitorImporterHelperService.getIdFromImporterResponse(newSpatialUnitResponse)]);
+
+          // refresh all admin dashboard diagrams due to modified metadata
+          setTimeout(() => {
+            this.broadcastService.broadcast("refreshAdminDashboardDiagrams");
+          }, 500);
+
+          this.successMessagePart = this.postBody_spatialUnits.spatialUnitLevel;
+          this.importedFeatures = this.kommonitorImporterHelperService.getImportedFeaturesFromImporterResponse(newSpatialUnitResponse);
+
+          this.loadingData = false;
+        } else {
+          // errors occurred
+          // show them 
+          this.errorMessagePart = "Einige der zu importierenden Features des Datensatzes weisen kritische Fehler auf";
+          this.importerErrors = this.kommonitorImporterHelperService.getErrorsFromImporterResponse(newSpatialUnitResponse_dryRun);
+
+          this.loadingData = false;
+        }
+      } catch (error: any) {
+        if (error.data) {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error.data);
+        } else {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+        }
+
+        if (newSpatialUnitResponse_dryRun) {
+          this.importerErrors = this.kommonitorImporterHelperService.getErrorsFromImporterResponse(newSpatialUnitResponse_dryRun);
+        }
+
+        this.loadingData = false;
+      }
+    }
+  }
+
+  onSubmit() {
+    if (!this.spatialUnitLevelInvalid && !this.hierarchyInvalid) {
+      this.addSpatialUnit();
+    }
+  }
+
+  // Multi-step navigation
+  nextStep() {
+    const maxSteps = this.kommonitorDataExchangeService.enableKeycloakSecurity ? 4 : 3;
+    if (this.currentStep < maxSteps) {
+      this.currentStep++;
+    }
+  }
+
+  previousStep() {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+    }
+  }
+
+  goToStep(step: number) {
+    const maxSteps = this.kommonitorDataExchangeService.enableKeycloakSecurity ? 4 : 3;
+    
+    // Validate step range
+    if (step < 1 || step > maxSteps) {
+      console.log(`Invalid step: ${step}. Valid range: 1-${maxSteps}`);
+      return;
+    }
+
+    // For now, allow navigation to any step for testing
+    // TODO: Add validation back once basic navigation works
+    console.log(`Navigating to step: ${step}`);
+    this.currentStep = step;
+  }
+
+  // Import/Export functionality
+  onImportSpatialUnitAddMetadata() {
+    this.spatialUnitMetadataImportError = '';
+    if (this.metadataImportFile) {
+      this.metadataImportFile.nativeElement.click();
+    }
+  }
+
+  onImportSpatialUnitAddMappingConfig() {
+    this.spatialUnitMappingConfigImportError = '';
+    if (this.mappingConfigImportFile) {
+      this.mappingConfigImportFile.nativeElement.click();
+    }
+  }
+
+  onMetadataFileSelected(event: any) {
+    const file = event.target.files[0];
+    if (file) {
+      this.parseMetadataFromFile(file);
+    }
+  }
+
+  onMappingConfigFileSelected(event: any) {
+    const file = event.target.files[0];
+    if (file) {
+      this.parseMappingConfigFromFile(file);
+    }
+  }
+
+  parseMetadataFromFile(file: File) {
+    const fileReader = new FileReader();
+
+    fileReader.onload = (event: any) => {
+      try {
+        this.parseFromMetadataFile(event);
+      } catch (error) {
+        console.error(error);
+        console.error("Uploaded Metadata File cannot be parsed.");
+        this.spatialUnitMetadataImportError = "Uploaded Metadata File cannot be parsed correctly";
+      }
+    };
+
+    fileReader.readAsText(file);
+  }
+
+  parseMappingConfigFromFile(file: File) {
+    const fileReader = new FileReader();
+
+    fileReader.onload = (event: any) => {
+      try {
+        this.parseFromMappingConfigFile(event);
+      } catch (error) {
+        console.error(error);
+        console.error("Uploaded MappingConfig File cannot be parsed.");
+        this.spatialUnitMappingConfigImportError = "Uploaded MappingConfig File cannot be parsed correctly";
+      }
+    };
+
+    fileReader.readAsText(file);
+  }
+
+  parseFromMetadataFile(event: any) {
+    this.metadataImportSettings = JSON.parse(event.target.result);
+
+    if (!this.metadataImportSettings.metadata) {
+      console.error("uploaded Metadata File cannot be parsed - wrong structure.");
+      this.spatialUnitMetadataImportError = "Struktur der Datei stimmt nicht mit erwartetem Muster überein.";
+      return;
+    }
+
+    this.metadata = {};
+    this.metadata.note = this.metadataImportSettings.metadata.note;
+    this.metadata.literature = this.metadataImportSettings.metadata.literature;
+    
+    this.kommonitorDataExchangeService.updateIntervalOptions.forEach((option: any) => {
+      if (option.apiName === this.metadataImportSettings.metadata.updateInterval) {
+        this.metadata.updateInterval = option;
+      }
+    });
+    
+    this.metadata.sridEPSG = this.metadataImportSettings.metadata.sridEPSG;
+    this.metadata.datasource = this.metadataImportSettings.metadata.datasource;
+    this.metadata.contact = this.metadataImportSettings.metadata.contact;
+    this.metadata.lastUpdate = this.metadataImportSettings.metadata.lastUpdate;
+    this.metadata.description = this.metadataImportSettings.metadata.description;
+    this.metadata.databasis = this.metadataImportSettings.metadata.databasis;
+
+    if (this.kommonitorDataExchangeService.accessControl) {
+      this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+        'spatialUnitAddRoleManagementTable', 
+        this.roleManagementTableOptions, 
+        this.kommonitorDataExchangeService.accessControl, 
+        this.metadataImportSettings.allowedRoles
+      );
+    }
+
+    for (let i = 0; i < this.kommonitorDataExchangeService.availableSpatialUnits.length; i++) {
+      const spatialUnit = this.kommonitorDataExchangeService.availableSpatialUnits[i];
+      if (spatialUnit.spatialUnitLevel === this.metadataImportSettings.nextLowerHierarchyLevel) {
+        this.nextLowerHierarchySpatialUnit = spatialUnit;
+      }
+      if (spatialUnit.spatialUnitLevel === this.metadataImportSettings.nextUpperHierarchyLevel) {
+        this.nextUpperHierarchySpatialUnit = spatialUnit;
+      }
+    }
+
+    this.spatialUnitLevel = this.metadataImportSettings.spatialUnitLevel;
+  }
+
+  parseFromMappingConfigFile(event: any) {
+    this.mappingConfigImportSettings = JSON.parse(event.target.result);
+
+    if (!this.mappingConfigImportSettings.converter || !this.mappingConfigImportSettings.dataSource || !this.mappingConfigImportSettings.propertyMapping) {
+      console.error("uploaded MappingConfig File cannot be parsed - wrong structure.");
+      this.spatialUnitMappingConfigImportError = "Struktur der Datei stimmt nicht mit erwartetem Muster überein.";
+      return;
+    }
+
+    this.converter = undefined;
+    for (const converter of this.kommonitorImporterHelperService.availableConverters) {
+      if (converter.name === this.mappingConfigImportSettings.converter.name) {
+        this.converter = converter;
+        break;
+      }
+    }
+
+    this.schema = '';
+    if (this.converter && this.converter.schemas && this.mappingConfigImportSettings.converter.schema) {
+      for (const schema of this.converter.schemas) {
+        if (schema === this.mappingConfigImportSettings.converter.schema) {
+          this.schema = schema;
+        }
+      }
+    }
+
+    this.mimeType = '';
+    if (this.converter && this.converter.mimeTypes && this.mappingConfigImportSettings.converter.mimeType) {
+      for (const mimeType of this.converter.mimeTypes) {
+        if (mimeType === this.mappingConfigImportSettings.converter.mimeType) {
+          this.mimeType = mimeType;
+        }
+      }
+    }
+
+    this.datasourceType = null;
+    for (const datasourceType of this.kommonitorImporterHelperService.availableDatasourceTypes) {
+      if (datasourceType.type === this.mappingConfigImportSettings.dataSource.type) {
+        this.datasourceType = datasourceType;
+        break;
+      }
+    }
+
+    // Property Mapping
+    this.spatialUnitDataSourceNameProperty = this.mappingConfigImportSettings.propertyMapping.nameProperty;
+    this.spatialUnitDataSourceIdProperty = this.mappingConfigImportSettings.propertyMapping.identifierProperty;
+    this.validityStartDate_perFeature = this.mappingConfigImportSettings.propertyMapping.validStartDateProperty;
+    this.validityEndDate_perFeature = this.mappingConfigImportSettings.propertyMapping.validEndDateProperty;
+    this.keepAttributes = this.mappingConfigImportSettings.propertyMapping.keepAttributes;
+    this.keepMissingValues = this.mappingConfigImportSettings.propertyMapping.keepMissingOrNullValueAttributes;
+    this.attributeMappings_adminView = [];
+
+    for (const attributeMapping of this.mappingConfigImportSettings.propertyMapping.attributes) {
+      const tmpEntry: any = {
+        "sourceName": attributeMapping.name,
+        "destinationName": attributeMapping.mappingName
+      };
+
+      for (const dataType of this.kommonitorImporterHelperService.attributeMapping_attributeTypes) {
+        if (dataType.apiName === attributeMapping.type) {
+          tmpEntry.dataType = dataType;
+        }
+      }
+
+      this.attributeMappings_adminView.push(tmpEntry);
+    }
+
+    if (this.mappingConfigImportSettings.periodOfValidity) {
+      this.periodOfValidity = {
+        startDate: this.mappingConfigImportSettings.periodOfValidity.startDate || '',
+        endDate: this.mappingConfigImportSettings.periodOfValidity.endDate || ''
+      };
+      this.periodOfValidityInvalid = false;
+    }
+  }
+
+  onExportSpatialUnitAddMetadataTemplate() {
+    const metadataJSON = JSON.stringify(this.spatialUnitMetadataStructure);
+    const fileName = "Raumeinheit_Metadaten_Vorlage_Export.json";
+    this.downloadFile(metadataJSON, fileName);
+  }
+
+  onExportSpatialUnitAddMetadata() {
+    const metadataExport: any = { ...this.spatialUnitMetadataStructure };
+
+    metadataExport.metadata.note = this.metadata.note || "";
+    metadataExport.metadata.literature = this.metadata.literature || "";
+    metadataExport.metadata.sridEPSG = this.metadata.sridEPSG || "";
+    metadataExport.metadata.datasource = this.metadata.datasource || "";
+    metadataExport.metadata.contact = this.metadata.contact || "";
+    metadataExport.metadata.lastUpdate = this.metadata.lastUpdate || "";
+    metadataExport.metadata.description = this.metadata.description || "";
+    metadataExport.metadata.databasis = this.metadata.databasis || "";
+    metadataExport.spatialUnitLevel = this.spatialUnitLevel || "";
+
+    metadataExport.allowedRoles = [];
+    if (this.roleManagementTableOptions) {
+      const roleIds = this.kommonitorDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
+      for (const roleId of roleIds) {
+        metadataExport.allowedRoles.push(roleId);
+      }
+    }
+
+    if (this.metadata.updateInterval) {
+      metadataExport.metadata.updateInterval = this.metadata.updateInterval.apiName;
+    }
+    if (this.nextLowerHierarchySpatialUnit) {
+      metadataExport.nextLowerHierarchyLevel = this.nextLowerHierarchySpatialUnit.spatialUnitLevel;
+    } else {
+      metadataExport.nextLowerHierarchyLevel = "";
+    }
+    if (this.nextUpperHierarchySpatialUnit) {
+      metadataExport.nextUpperHierarchyLevel = this.nextUpperHierarchySpatialUnit.spatialUnitLevel;
+    } else {
+      metadataExport.nextUpperHierarchyLevel = "";
+    }
+
+    const name = this.spatialUnitLevel;
+    const metadataJSON = JSON.stringify(metadataExport);
+    let fileName = "Raumeinheit_Metadaten_Export";
+
+    if (name) {
+      fileName += "-" + name;
+    }
+
+    fileName += ".json";
+    this.downloadFile(metadataJSON, fileName);
+  }
+
+  async onExportSpatialUnitAddMappingConfig() {
+    const converterDefinition = this.buildConverterDefinition();
+    const datasourceTypeDefinition = await this.buildDatasourceTypeDefinition();
+    const propertyMappingDefinition = this.buildPropertyMappingDefinition();
+
+    const mappingConfigExport = {
+      "converter": converterDefinition,
+      "dataSource": datasourceTypeDefinition,
+      "propertyMapping": propertyMappingDefinition,
+    };
+
+    (mappingConfigExport as any).periodOfValidity = this.periodOfValidity;
+
+    const name = this.spatialUnitLevel;
+    const metadataJSON = JSON.stringify(mappingConfigExport);
+    let fileName = "KomMonitor-Import-Mapping-Konfiguration_Export";
+
+    if (name) {
+      fileName += "-" + name;
+    }
+
+    fileName += ".json";
+    this.downloadFile(metadataJSON, fileName);
+  }
+
+  private downloadFile(content: string, fileName: string) {
+    const blob = new Blob([content], { type: "application/json" });
+    const data = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.download = fileName;
+    a.href = data;
+    a.textContent = "JSON";
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    a.click();
+
+    a.remove();
+  }
+
+  // Metadata structure for export
+  get spatialUnitMetadataStructure() {
+    return {
+      "metadata": {
+        "note": "",
+        "literature": "",
+        "updateInterval": "",
+        "sridEPSG": "",
+        "datasource": "",
+        "contact": "",
+        "lastUpdate": "",
+        "description": "",
+        "databasis": ""
+      },
+      "allowedRoles": [],
+      "nextLowerHierarchyLevel": "",
+      "spatialUnitLevel": "",
+      "nextUpperHierarchyLevel": ""
+    };
+  }
+
+  get spatialUnitMappingConfigStructure_pretty() {
+    return JSON.stringify(this.spatialUnitMetadataStructure, null, 2);
+  }
+
+  resetForm() {
+    this.currentStep = 1;
+    this.spatialUnitLevel = '';
+    this.spatialUnitLevelInvalid = false;
+    this.metadata = {
+      description: '',
+      databasis: '',
+      datasource: '',
+      contact: '',
+      updateInterval: null,
+      lastUpdate: '',
+      literature: '',
+      note: '',
+      sridEPSG: 4326
+    };
+    this.nextLowerHierarchySpatialUnit = null;
+    this.nextUpperHierarchySpatialUnit = null;
+    this.hierarchyInvalid = false;
+    this.periodOfValidity = { startDate: '', endDate: '' };
+    this.periodOfValidityInvalid = false;
+    this.isOutlineLayer = false;
+    this.loiColor = '#bf3d2c';
+    this.outlineWidth = 2;
+    this.outlineDashArray = null;
+    this.converter = null;
+    this.schema = '';
+    this.mimeType = '';
+    this.datasourceType = null;
+    this.spatialUnitDataSourceIdProperty = '';
+    this.spatialUnitDataSourceNameProperty = '';
+    this.validityStartDate_perFeature = '';
+    this.validityEndDate_perFeature = '';
+    this.attributeMapping_sourceAttributeName = '';
+    this.attributeMapping_destinationAttributeName = '';
+    this.attributeMappings_adminView = [];
+    this.keepAttributes = true;
+    this.keepMissingValues = true;
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+    this.importerErrors = [];
+    this.importedFeatures = [];
+    this.converterDefinition = null;
+    this.datasourceTypeDefinition = null;
+    this.propertyMappingDefinition = null;
+    this.postBody_spatialUnits = null;
+    this.idPropertyNotFound = false;
+    this.namePropertyNotFound = false;
+    this.spatialUnitDataSourceInputInvalid = false;
+    this.spatialUnitDataSourceInputInvalidReason = '';
+    this.ownerOrganization = '';
+    this.ownerOrgFilter = '';
+    this.isPublic = false;
+    this.roleManagementTableOptions = null;
+    this.metadataImportSettings = null;
+    this.mappingConfigImportSettings = null;
+    this.spatialUnitMetadataImportError = '';
+    this.spatialUnitMappingConfigImportError = '';
+    this.resourcesCreatorRights = [];
+    this.spatialUnitDataSourceIdPropertyInvalid = false;
+    this.spatialUnitDataSourceNamePropertyInvalid = false;
+    this.attributeMapping_attributeType = this.kommonitorImporterHelperService.attributeMapping_attributeTypes[0];
+    this.errorMessage = '';
+    this.successMessage = '';
+  }
+
+  hideSuccessAlert() {
+    this.successMessage = '';
+  }
+
+  hideErrorAlert() {
+    this.errorMessage = '';
+  }
+
+  hideMetadataErrorAlert() {
+    this.spatialUnitMetadataImportError = '';
+  }
+
+  hideMappingConfigErrorAlert() {
+    this.spatialUnitMappingConfigImportError = '';
+  }
+
+  onChangeOwner(ownerOrganization: any) {
+    // Handle owner organization change
+    this.ownerOrganization = ownerOrganization;
+  }
+
+  onChangeIsPublic(isPublic: boolean) {
+    // Handle public access change
+    this.isPublic = isPublic;
+  }
+
+  cancel() {
+    console.log('Modal cancelled');
+    this.activeModal.dismiss('cancel');
+  }
+} 
\ No newline at end of file

From 719f935db9825e73eb2c818ea810900134bdd5c9 Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Sun, 6 Jul 2025 20:56:08 +0530
Subject: [PATCH 003/120] migrate spatial edit metaData model

---
 app/app.module.ts                             |   9 +-
 ...dmin-spatial-units-management.component.ts |  44 +-
 ...ial-unit-edit-metadata-modal.component.css | 465 +++++++++++++++
 ...al-unit-edit-metadata-modal.component.html | 394 +++++++++++++
 ...tial-unit-edit-metadata-modal.component.ts | 537 ++++++++++++++++++
 5 files changed, 1446 insertions(+), 3 deletions(-)
 create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.css
 create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.html
 create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index 39c6d4338..cee5d9f12 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -76,6 +76,7 @@ import { AdminRoleExplanationComponent } from './components/ngComponents/admin/a
 import { AdminDashboardManagementComponent } from './components/ngComponents/admin/adminDashboardManagement/admin-dashboard-management.component';
 import { AdminSpatialUnitsManagementComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component';
 import { SpatialUnitAddModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component';
+import { SpatialUnitEditMetadataModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component';
 
 
 // currently the AngularJS routing is still used as part of kommonitorClient module
@@ -161,7 +162,8 @@ declare var MathJax;
     AdminRoleExplanationComponent,
     AdminDashboardManagementComponent,
     AdminSpatialUnitsManagementComponent,
-    SpatialUnitAddModalComponent
+    SpatialUnitAddModalComponent,
+    SpatialUnitEditMetadataModalComponent
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
@@ -262,6 +264,11 @@ export class AppModule implements DoBootstrap {
         component: AdminSpatialUnitsManagementComponent
       }) as angular.IDirectiveFactory);
 
+    angular.module('kommonitorAdmin')
+      .directive('spatialUnitEditMetadataModalNew', downgradeComponent({
+        component: SpatialUnitEditMetadataModalComponent
+      }) as angular.IDirectiveFactory);
+
     console.log("registered downgraded Angular components for AngularJS usage");
   }
 
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
index 2e612f5e2..583b99b8e 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
@@ -5,6 +5,7 @@ import { Subscription } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { SpatialUnitAddModalComponent } from './spatialUnitAddModal/spatial-unit-add-modal.component';
+import { SpatialUnitEditMetadataModalComponent } from './spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component';
 declare const agGrid: any;
 declare const $: any;
 declare const __env: any;
@@ -222,8 +223,47 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
   }
 
   onClickEditMetadata(spatialUnitDataset: any): void {
-    // submit selected spatial unit to modal controller
-    this.broadcastService.broadcast('onEditSpatialUnitMetadata', spatialUnitDataset);
+    this.openEditMetadataModal(spatialUnitDataset);
+  }
+
+  openEditMetadataModal(spatialUnitDataset: any) {
+    console.log('Opening edit spatial unit metadata modal for:', spatialUnitDataset);
+    
+    try {
+      // Open modal using NgbModal
+      const modalRef = this.modalService.open(SpatialUnitEditMetadataModalComponent, {
+        size: 'xl',
+        backdrop: 'static',
+        keyboard: false,
+        container: 'body',
+        animation: false,
+        windowClass: 'spatial-unit-edit-metadata-modal'
+      });
+      
+      console.log('Edit metadata modal reference created:', modalRef);
+      
+      // Pass the spatial unit dataset to the modal
+      modalRef.componentInstance.currentSpatialUnitDataset = spatialUnitDataset;
+      modalRef.componentInstance.resetForm();
+      
+      // Handle modal result
+      modalRef.result.then(
+        (result) => {
+          console.log('Edit metadata modal closed with result:', result);
+          if (result && result.action === 'updated') {
+            // Refresh the spatial units table
+            this.refreshSpatialUnitOverviewTable('edit', spatialUnitDataset.spatialUnitId);
+          }
+        },
+        (reason) => {
+          console.log('Edit metadata modal dismissed with reason:', reason);
+        }
+      );
+    } catch (error: any) {
+      console.error('Error opening edit metadata modal:', error);
+      // Fallback: broadcast event for old AngularJS modal
+      this.broadcastService.broadcast('onEditSpatialUnitMetadata', spatialUnitDataset);
+    }
   }
 
   onClickEditFeatures(spatialUnitDataset: any): void {
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.css b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.css
new file mode 100644
index 000000000..2875a1ad3
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.css
@@ -0,0 +1,465 @@
+/* Multi-step form styles */
+.multiStepForm {
+  margin: 0;
+  padding: 0;
+}
+
+#progressbar {
+  margin-bottom: 30px;
+  overflow: hidden;
+  color: lightgrey;
+  list-style: none;
+  padding: 0;
+}
+
+#progressbar li {
+  display: inline-block;
+  text-align: center;
+  line-height: 45px;
+  position: relative;
+  font-weight: bold;
+  font-size: 12px;
+  color: #999;
+}
+
+#progressbar li:before {
+  content: counter(step);
+  counter-increment: step;
+  width: 45px;
+  line-height: 45px;
+  display: block;
+  font-size: 12px;
+  color: #cccccc;
+  background: white;
+  border-radius: 50%;
+  margin: 0 auto 10px auto;
+  border: 2px solid #cccccc;
+}
+
+#progressbar li.active:before {
+  background: #27AE60;
+  color: white;
+  border-color: #27AE60;
+}
+
+#progressbar li.active {
+  color: #27AE60;
+}
+
+#progressbar li.clickable {
+  cursor: pointer;
+}
+
+#progressbar li.clickable:hover {
+  color: #27AE60;
+}
+
+#progressbar li.clickable:hover:before {
+  background: #27AE60;
+  color: white;
+  border-color: #27AE60;
+}
+
+/* Form step styles */
+.fs-title {
+  font-size: 24px;
+  text-transform: uppercase;
+  color: #2C3E50;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.fs-subtitle {
+  font-weight: normal;
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+/* Action buttons */
+.action-button {
+  width: 100px;
+  background: #27AE60;
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 1px;
+  cursor: pointer;
+  padding: 10px 5px;
+  margin: 10px 5px;
+  float: right;
+}
+
+.action-button:hover, .action-button:focus {
+  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
+  background: #27AE60;
+  color: white;
+}
+
+.action-button-previous {
+  width: 100px;
+  background: #C5C5F1;
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 1px;
+  cursor: pointer;
+  padding: 10px 5px;
+  margin: 10px 5px;
+  float: left;
+}
+
+.action-button-previous:hover, .action-button-previous:focus {
+  box-shadow: 0 0 0 2px white, 0 0 0 3px #C5C5F1;
+  background: #C5C5F1;
+  color: white;
+}
+
+/* Form field styles */
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-control {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.form-control:focus {
+  border-color: #27AE60;
+  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.2);
+  outline: none;
+}
+
+/* Switch styles */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switchslider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: .4s;
+}
+
+.switchslider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: .4s;
+}
+
+input:checked + .switchslider {
+  background-color: #27AE60;
+}
+
+input:focus + .switchslider {
+  box-shadow: 0 0 1px #27AE60;
+}
+
+input:checked + .switchslider:before {
+  transform: translateX(26px);
+}
+
+.switchslider.round {
+  border-radius: 34px;
+}
+
+.switchslider.round:before {
+  border-radius: 50%;
+}
+
+/* Loading overlay */
+.loading-overlay-admin-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.icon-spin {
+  animation: spin 2s infinite linear;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Alert styles */
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.alert-success {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+
+.alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+
+.alert-dismissable .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  color: inherit;
+}
+
+/* Dropdown styles */
+.dropdown-menu {
+  min-width: 200px;
+}
+
+.dropdown-menu-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Vertical alignment helper */
+.vertical-align {
+  display: flex;
+  align-items: flex-start;
+}
+
+.vertical-align .form-group {
+  flex: 1;
+  margin-right: 15px;
+}
+
+.vertical-align .form-group:last-child {
+  margin-right: 0;
+}
+
+/* Help block styles */
+.help-block {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  color: #737373;
+  font-size: 12px;
+}
+
+.help-block.with-errors {
+  color: #a94442;
+}
+
+/* Input group styles */
+.input-group {
+  position: relative;
+  display: table;
+  border-collapse: separate;
+}
+
+.input-group-addon {
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1;
+  color: #555;
+  text-align: center;
+  background-color: #eee;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle;
+  display: table-cell;
+}
+
+.input-group .form-control {
+  position: relative;
+  z-index: 2;
+  float: left;
+  width: 100%;
+  margin-bottom: 0;
+  display: table-cell;
+}
+
+.input-group .form-control:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.input-group-addon:first-child {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group .form-control:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* Modal specific styles */
+.modal-header .close {
+  margin-top: -2px;
+}
+
+.modal-title {
+  margin: 0;
+  line-height: 1.42857143;
+}
+
+.modal-footer {
+  padding: 15px;
+  text-align: right;
+  border-top: 1px solid #e5e5e5;
+}
+
+.modal-footer .btn + .btn {
+  margin-bottom: 0;
+  margin-left: 5px;
+}
+
+.pull-left {
+  float: left !important;
+}
+
+.pull-right {
+  float: right !important;
+}
+
+/* Button styles */
+.btn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.btn:focus,
+.btn:active:focus,
+.btn.active:focus {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+.btn:hover,
+.btn:focus {
+  color: #333;
+  text-decoration: none;
+}
+
+.btn-default {
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+.btn-default:hover,
+.btn-default:focus {
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+
+.btn-info {
+  color: #fff;
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+
+.btn-info:hover,
+.btn-info:focus {
+  color: #fff;
+  background-color: #31b0d5;
+  border-color: #269abc;
+}
+
+.btn-success {
+  color: #fff;
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+
+.btn-success:hover,
+.btn-success:focus {
+  color: #fff;
+  background-color: #449d44;
+  border-color: #398439;
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+
+.btn-danger:hover,
+.btn-danger:focus {
+  color: #fff;
+  background-color: #c9302c;
+  border-color: #ac2925;
+}
+
+.btn:disabled,
+.btn[disabled] {
+  cursor: not-allowed;
+  opacity: 0.65;
+  box-shadow: none;
+}
+
+/* Pre styles for JSON display */
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  color: #333;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.html
new file mode 100644
index 000000000..5178174ab
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.html
@@ -0,0 +1,394 @@
+

+  
+  
Metadaten der Raumebene {{currentSpatialUnitDataset?.spatialUnitLevel}} editieren

+

+
+

+  

+    

+      
+    

+  

+
+  
+  

+    
+    
Raumebene aktualisiert

+    {{successMessage}}
+  

+
+  
+  

+    
+    
Aktualisierung gescheitert

+    {{errorMessage}}
+    

+    

+  

+
+  
+  

+    
+    
Metadata Import gescheitert

+    Beim Import der Metadaten aus einer Datei ist ein Fehler aufgetreten. Fehlermeldung:
+    

+    
{{spatialUnitMetadataImportError}}

+    

+    

+    
Bitte stellen Sie sicher, dass folgendes JSON-Format eingehalten wird:

+    
{{spatialUnitMetadataStructure | json}}

+  

+
+  
+  

+    
+    
    
+      
  • Metadaten der Raumebene
    • 
+      
  • Allgemeine Metadaten
    • 
+    

+    
    
+      
  • Metadaten der Raumebene
    • 
+      
  • Allgemeine Metadaten
    • 
+      
  • Zugriffsschutz
    • 
+    

+
+    
+    

+      
Metadaten der Raumebene

+      
Angaben über die Raumebene

+      
* = Pflichtfeld

+
+      

+        

+          

+            
+            
+            

+            

+              
Eingabe ungültig. Es existiert bereits eine Raumebene mit gleichem Namen.

+            

+          

+        

+        

+          

+            
+            
+            

+              
Eintrag kann im Nachhinein mittels Metadaten-Editier-Funktion gesetzt werden

+            

+            

+            

+              
Eingabe ungültig. Definierte Hierarchie ist nicht erlaubt.

+            

+          

+        

+        

+          

+            
+            
+            

+              
Eintrag kann im Nachhinein mittels Metadaten-Editier-Funktion gesetzt werden

+            

+            

+            

+              
Eingabe ungültig. Definierte Hierarchie ist nicht erlaubt.

+            

+          

+        

+      

+
+      

+        

+          

+            
+            
+            

+              
wenn markiert, dann wird in der Kartenapplikation in der Layersteuerung ein entsprechender Eintrag zur Darstellung der Raumebenenumringe angeboten

+            

+          

+        

+        

+          

+            
+            

+              
+            

+            

+          

+        

+        

+          

+            
+            

+            
+            

+          

+        

+        

+          

+            
+            

+              
+              
+              

+            

+          

+        

+      

+
+      
+    

+
+    
+    

+      
Allgemeine Metadaten

+      
Angaben über allgemeine Metadaten in KomMonitor

+      
* = Pflichtfeld

+
+      

+        

+          

+            
+            
+            

+          

+        

+        

+          

+            
+            
+            

+          

+        

+        

+          

+            
+            
+            

+          

+        

+        

+          

+            
+            
+            

+          

+        

+      

+
+      

+        

+          

+            
+            
+            

+          

+        

+        

+          

+            
+            

+              

+                
+              

+              
+            

+            

+          

+        

+        

+          

+            
+            
+            

+          

+        

+        

+          

+            
+            
+            

+          

+        

+      

+
+      
+    

+
+    
+    

+      
Zugriffsschutz

+      
Rollen- und Rechteverwaltung

+
+      

+        

+          

+            
+            

+              
+            

+            

+              
Wählen Sie die Rollen aus, die Zugriff auf diese Raumebene haben sollen.

+            

+          

+        

+      

+
+      
+    

+  

+

+
+

+  
+  
+  
+  
+  
+  
+  
+
+  
+
+  
+  
+  
+
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.ts
new file mode 100644
index 000000000..3648a94f8
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.ts
@@ -0,0 +1,537 @@
+import { Component, OnInit, OnDestroy, Inject, ViewChild, ElementRef } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { HttpClient } from '@angular/common/http';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'spatial-unit-edit-metadata-modal-new',
+  templateUrl: './spatial-unit-edit-metadata-modal.component.html',
+  styleUrls: ['./spatial-unit-edit-metadata-modal.component.css']
+})
+export class SpatialUnitEditMetadataModalComponent implements OnInit, OnDestroy {
+  @ViewChild('metadataImportFile', { static: false }) metadataImportFile!: ElementRef;
+
+  // Multi-step form
+  currentStep = 1;
+  totalSteps = 2;
+
+  // Form data
+  isSubmitting = false;
+  errorMessage = '';
+  successMessage = '';
+  loadingData = false;
+
+  // Current dataset being edited
+  currentSpatialUnitDataset: any = null;
+
+  // Basic form data
+  spatialUnitLevel = '';
+  spatialUnitLevelInvalid = false;
+  metadata: any = {
+    description: '',
+    databasis: '',
+    datasource: '',
+    contact: '',
+    updateInterval: null,
+    lastUpdate: '',
+    literature: '',
+    note: '',
+    sridEPSG: 4326
+  };
+
+  // Hierarchy
+  nextLowerHierarchySpatialUnit: any = null;
+  nextUpperHierarchySpatialUnit: any = null;
+  hierarchyInvalid = false;
+
+  // Outline layer settings
+  isOutlineLayer = false;
+  outlineColor = '#bf3d2c';
+  outlineWidth = 2;
+  selectedOutlineDashArrayObject: any = null;
+
+  // Available options
+  availableSpatialUnits: any[] = [];
+  updateIntervalOptions: any[] = [];
+  availableLoiDashArrayObjects: any[] = [];
+
+  // Role management
+  roleManagementTableOptions: any = null;
+
+  // Import/Export functionality
+  metadataImportSettings: any = null;
+  spatialUnitMetadataImportError = '';
+
+  // Success/Error data
+  successMessagePart = '';
+  errorMessagePart = '';
+
+  // Subscriptions
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
+    @Inject('kommonitorDataGridHelperService') private kommonitorDataGridHelperService: any,
+    @Inject('kommonitorMultiStepFormHelperService') private kommonitorMultiStepFormHelperService: any,
+    private http: HttpClient,
+    private broadcastService: BroadcastService
+  ) {
+    console.log('SpatialUnitEditMetadataModalComponent constructor initialized');
+  }
+
+  ngOnInit() {
+    console.log('SpatialUnitEditMetadataModalComponent ngOnInit');
+    this.loadInitialData();
+    this.setupEventListeners();
+    
+    // If currentSpatialUnitDataset is already set (from parent component), initialize form
+    if (this.currentSpatialUnitDataset) {
+      this.resetForm();
+      // Register multi-step form click handler
+      this.kommonitorMultiStepFormHelperService.registerClickHandler();
+    }
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  private setupEventListeners() {
+    // Listen for broadcast messages
+    const broadcastSub = this.broadcastService.currentBroadcastMsg.subscribe(broadcastMsg => {
+      if (broadcastMsg) {
+        if (broadcastMsg.msg === 'availableRolesUpdate') {
+          this.refreshRoles();
+        }
+      }
+    });
+
+    this.subscriptions.push(broadcastSub);
+  }
+
+  private loadInitialData() {
+    this.loadingData = true;
+    
+    // Load available spatial units
+    if (this.kommonitorDataExchangeService.availableSpatialUnits) {
+      this.availableSpatialUnits = this.kommonitorDataExchangeService.availableSpatialUnits;
+    }
+
+    // Load update interval options
+    if (this.kommonitorDataExchangeService.updateIntervalOptions) {
+      this.updateIntervalOptions = this.kommonitorDataExchangeService.updateIntervalOptions;
+    }
+
+    // Load available dash array objects
+    if (this.kommonitorDataExchangeService.availableLoiDashArrayObjects) {
+      this.availableLoiDashArrayObjects = this.kommonitorDataExchangeService.availableLoiDashArrayObjects;
+    }
+
+    // Set total steps based on security settings
+    if (this.kommonitorDataExchangeService.enableKeycloakSecurity) {
+      this.totalSteps = 3; // Include role management step
+    } else {
+      this.totalSteps = 2;
+    }
+
+    this.loadingData = false;
+  }
+
+  private refreshRoles() {
+    if (this.currentSpatialUnitDataset) {
+      const allowedRoles = this.currentSpatialUnitDataset.allowedRoles || [];
+      this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+        'spatialUnitEditRoleManagementTable', 
+        this.roleManagementTableOptions, 
+        this.kommonitorDataExchangeService.accessControl, 
+        allowedRoles
+      );
+    }
+  }
+
+  resetForm() {
+    if (!this.currentSpatialUnitDataset) return;
+
+    this.spatialUnitLevel = this.currentSpatialUnitDataset.spatialUnitLevel;
+    this.spatialUnitLevelInvalid = false;
+
+    // Reset metadata
+    this.metadata = {
+      note: this.currentSpatialUnitDataset.metadata.note,
+      literature: this.currentSpatialUnitDataset.metadata.literature,
+      sridEPSG: 4326,
+      datasource: this.currentSpatialUnitDataset.metadata.datasource,
+      databasis: this.currentSpatialUnitDataset.metadata.databasis,
+      contact: this.currentSpatialUnitDataset.metadata.contact,
+      description: this.currentSpatialUnitDataset.metadata.description,
+      lastUpdate: this.currentSpatialUnitDataset.metadata.lastUpdate,
+      updateInterval: null
+    };
+
+    // Set update interval
+    this.updateIntervalOptions.forEach(option => {
+      if (option.apiName === this.currentSpatialUnitDataset.metadata.updateInterval) {
+        this.metadata.updateInterval = option;
+      }
+    });
+
+    // Set hierarchy
+    this.nextLowerHierarchySpatialUnit = null;
+    this.nextUpperHierarchySpatialUnit = null;
+    
+    this.availableSpatialUnits.forEach(spatialUnit => {
+      if (spatialUnit.spatialUnitLevel === this.currentSpatialUnitDataset.nextLowerHierarchyLevel) {
+        this.nextLowerHierarchySpatialUnit = spatialUnit;
+      }
+      if (spatialUnit.spatialUnitLevel === this.currentSpatialUnitDataset.nextUpperHierarchyLevel) {
+        this.nextUpperHierarchySpatialUnit = spatialUnit;
+      }
+    });
+
+    // Set outline layer settings
+    this.isOutlineLayer = this.currentSpatialUnitDataset.isOutlineLayer || false;
+    this.outlineColor = this.currentSpatialUnitDataset.outlineColor || '#bf3d2c';
+    this.outlineWidth = this.currentSpatialUnitDataset.outlineWidth || 2;
+
+    // Set dash array
+    this.selectedOutlineDashArrayObject = null;
+    if (this.availableLoiDashArrayObjects && this.availableLoiDashArrayObjects.length > 0) {
+      this.availableLoiDashArrayObjects.forEach(option => {
+        if (option.dashArrayValue === this.currentSpatialUnitDataset.outlineDashArrayString) {
+          this.selectedOutlineDashArrayObject = option;
+        }
+      });
+      if (!this.selectedOutlineDashArrayObject) {
+        this.selectedOutlineDashArrayObject = this.availableLoiDashArrayObjects[0];
+      }
+    }
+
+    this.hierarchyInvalid = false;
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+
+    // Refresh roles
+    this.refreshRoles();
+
+    // Reset to first step
+    this.currentStep = 1;
+  }
+
+  checkSpatialUnitName() {
+    this.spatialUnitLevelInvalid = false;
+    this.availableSpatialUnits.forEach(spatialUnit => {
+      if (spatialUnit.spatialUnitLevel === this.spatialUnitLevel && 
+          spatialUnit.spatialUnitId !== this.currentSpatialUnitDataset.spatialUnitId) {
+        this.spatialUnitLevelInvalid = true;
+        return;
+      }
+    });
+  }
+
+  checkSpatialUnitHierarchy() {
+    this.hierarchyInvalid = false;
+
+    if (this.nextLowerHierarchySpatialUnit && this.nextUpperHierarchySpatialUnit) {
+      let indexOfLowerHierarchyUnit = -1;
+      let indexOfUpperHierarchyUnit = -1;
+
+      for (let i = 0; i < this.availableSpatialUnits.length; i++) {
+        const spatialUnit = this.availableSpatialUnits[i];
+        if (spatialUnit.spatialUnitLevel === this.nextLowerHierarchySpatialUnit.spatialUnitLevel) {
+          indexOfLowerHierarchyUnit = i;
+        }
+        if (spatialUnit.spatialUnitLevel === this.nextUpperHierarchySpatialUnit.spatialUnitLevel) {
+          indexOfUpperHierarchyUnit = i;
+        }
+      }
+
+      if (indexOfLowerHierarchyUnit <= indexOfUpperHierarchyUnit) {
+        this.hierarchyInvalid = true;
+      }
+    }
+  }
+
+  onChangeOutlineDashArray(outlineDashArrayObject: any) {
+    this.selectedOutlineDashArrayObject = outlineDashArrayObject;
+  }
+
+  async editSpatialUnitMetadata() {
+    if (!this.currentSpatialUnitDataset) return;
+
+    const spatialUnitName_old = this.currentSpatialUnitDataset.spatialUnitLevel;
+    const spatialUnitName_new = this.spatialUnitLevel;
+
+    const patchBody = {
+      datasetName: this.spatialUnitLevel,
+      metadata: {
+        note: this.metadata.note,
+        literature: this.metadata.literature,
+        updateInterval: this.metadata.updateInterval.apiName,
+        sridEPSG: this.metadata.sridEPSG,
+        datasource: this.metadata.datasource,
+        contact: this.metadata.contact,
+        lastUpdate: this.metadata.lastUpdate,
+        description: this.metadata.description,
+        databasis: this.metadata.databasis
+      },
+      allowedRoles: [],
+      nextLowerHierarchyLevel: this.nextLowerHierarchySpatialUnit ? this.nextLowerHierarchySpatialUnit.spatialUnitLevel : null,
+      nextUpperHierarchyLevel: this.nextUpperHierarchySpatialUnit ? this.nextUpperHierarchySpatialUnit.spatialUnitLevel : null,
+      isOutlineLayer: this.isOutlineLayer,
+      outlineColor: this.outlineColor,
+      outlineWidth: this.outlineWidth,
+      outlineDashArrayString: this.selectedOutlineDashArrayObject ? this.selectedOutlineDashArrayObject.dashArrayValue : ''
+    };
+
+    // Add selected roles
+    if (this.roleManagementTableOptions) {
+      const roleIds = this.kommonitorDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
+      patchBody.allowedRoles = roleIds;
+    }
+
+    this.loadingData = true;
+    this.errorMessage = '';
+    this.successMessage = '';
+
+    try {
+      const response = await this.http.patch(
+        `${this.kommonitorDataExchangeService.baseUrlToKomMonitorDataAPI}/spatial-units/${this.currentSpatialUnitDataset.spatialUnitId}`,
+        patchBody
+      ).toPromise();
+
+      this.successMessagePart = this.currentSpatialUnitDataset.spatialUnitLevel;
+      this.successMessage = `Metadaten für Raumebene "${this.successMessagePart}" erfolgreich aktualisiert.`;
+
+      // Broadcast refresh events
+      this.broadcastService.broadcast('refreshSpatialUnitOverviewTable');
+      if (spatialUnitName_old !== spatialUnitName_new) {
+        this.broadcastService.broadcast('refreshIndicatorOverviewTable');
+      }
+
+      this.loadingData = false;
+      
+      // Close modal with success result
+      this.activeModal.close({ action: 'updated', spatialUnitId: this.currentSpatialUnitDataset.spatialUnitId });
+    } catch (error: any) {
+      this.errorMessagePart = error.error ? 
+        this.kommonitorDataExchangeService.syntaxHighlightJSON(error.error) : 
+        this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+      this.errorMessage = 'Fehler beim Aktualisieren der Metadaten.';
+      this.loadingData = false;
+    }
+  }
+
+  // Multi-step form navigation
+  nextStep() {
+    if (this.currentStep < this.totalSteps) {
+      this.currentStep++;
+    }
+  }
+
+  previousStep() {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+    }
+  }
+
+  goToStep(step: number) {
+    if (step >= 1 && step <= this.totalSteps) {
+      this.currentStep = step;
+    }
+  }
+
+  // Import/Export functionality
+  onImportSpatialUnitEditMetadata() {
+    this.spatialUnitMetadataImportError = '';
+    if (this.metadataImportFile) {
+      this.metadataImportFile.nativeElement.click();
+    }
+  }
+
+  onMetadataFileSelected(event: any) {
+    const file = event.target.files[0];
+    if (file) {
+      this.parseMetadataFromFile(file);
+    }
+  }
+
+  parseMetadataFromFile(file: File) {
+    const fileReader = new FileReader();
+    
+    fileReader.onload = (event: any) => {
+      try {
+        this.parseFromMetadataFile(event);
+      } catch (error) {
+        console.error('Uploaded Metadata File cannot be parsed.');
+        this.spatialUnitMetadataImportError = 'Uploaded Metadata File cannot be parsed correctly';
+      }
+    };
+
+    fileReader.readAsText(file);
+  }
+
+  parseFromMetadataFile(event: any) {
+    this.metadataImportSettings = JSON.parse(event.target.result);
+
+    if (!this.metadataImportSettings.metadata) {
+      console.error('uploaded Metadata File cannot be parsed - wrong structure.');
+      this.spatialUnitMetadataImportError = 'Struktur der Datei stimmt nicht mit erwartetem Muster überein.';
+      return;
+    }
+
+    // Apply imported metadata
+    this.metadata = {
+      note: this.metadataImportSettings.metadata.note,
+      literature: this.metadataImportSettings.metadata.literature,
+      sridEPSG: this.metadataImportSettings.metadata.sridEPSG,
+      datasource: this.metadataImportSettings.metadata.datasource,
+      contact: this.metadataImportSettings.metadata.contact,
+      lastUpdate: this.metadataImportSettings.metadata.lastUpdate,
+      description: this.metadataImportSettings.metadata.description,
+      databasis: this.metadataImportSettings.metadata.databasis,
+      updateInterval: null
+    };
+
+    // Set update interval
+    this.updateIntervalOptions.forEach(option => {
+      if (option.apiName === this.metadataImportSettings.metadata.updateInterval) {
+        this.metadata.updateInterval = option;
+      }
+    });
+
+    // Set hierarchy
+    this.availableSpatialUnits.forEach(spatialUnit => {
+      if (spatialUnit.spatialUnitLevel === this.metadataImportSettings.nextLowerHierarchyLevel) {
+        this.nextLowerHierarchySpatialUnit = spatialUnit;
+      }
+      if (spatialUnit.spatialUnitLevel === this.metadataImportSettings.nextUpperHierarchyLevel) {
+        this.nextUpperHierarchySpatialUnit = spatialUnit;
+      }
+    });
+
+    this.spatialUnitLevel = this.metadataImportSettings.spatialUnitLevel;
+
+    // Set outline layer settings from import
+    this.isOutlineLayer = this.metadataImportSettings.isOutlineLayer || false;
+    this.outlineColor = this.metadataImportSettings.outlineColor || '#bf3d2c';
+    this.outlineWidth = this.metadataImportSettings.outlineWidth || 2;
+
+    // Set dash array from import
+    if (this.metadataImportSettings.outlineDashArrayString && this.availableLoiDashArrayObjects) {
+      this.availableLoiDashArrayObjects.forEach(option => {
+        if (option.dashArrayValue === this.metadataImportSettings.outlineDashArrayString) {
+          this.selectedOutlineDashArrayObject = option;
+        }
+      });
+    }
+
+    // Refresh roles
+    if (this.metadataImportSettings.allowedRoles) {
+      this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+        'spatialUnitEditRoleManagementTable', 
+        this.roleManagementTableOptions, 
+        this.kommonitorDataExchangeService.accessControl, 
+        this.metadataImportSettings.allowedRoles
+      );
+    }
+  }
+
+  onExportSpatialUnitEditMetadata() {
+    const metadataExport = {
+      ...this.spatialUnitMetadataStructure,
+      metadata: {
+        note: this.metadata.note || "",
+        literature: this.metadata.literature || "",
+        sridEPSG: this.metadata.sridEPSG || "",
+        datasource: this.metadata.datasource || "",
+        contact: this.metadata.contact || "",
+        lastUpdate: this.metadata.lastUpdate || "",
+        description: this.metadata.description || "",
+        databasis: this.metadata.databasis || "",
+        updateInterval: this.metadata.updateInterval ? this.metadata.updateInterval.apiName : ""
+      },
+      spatialUnitLevel: this.spatialUnitLevel || "",
+      nextLowerHierarchyLevel: this.nextLowerHierarchySpatialUnit ? this.nextLowerHierarchySpatialUnit.spatialUnitLevel : "",
+      nextUpperHierarchyLevel: this.nextUpperHierarchySpatialUnit ? this.nextUpperHierarchySpatialUnit.spatialUnitLevel : "",
+      allowedRoles: [],
+      isOutlineLayer: this.isOutlineLayer,
+      outlineColor: this.outlineColor,
+      outlineWidth: this.outlineWidth,
+      outlineDashArrayString: this.selectedOutlineDashArrayObject ? this.selectedOutlineDashArrayObject.dashArrayValue : ""
+    };
+
+    // Add selected roles
+    if (this.roleManagementTableOptions) {
+      const roleIds = this.kommonitorDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
+      metadataExport.allowedRoles = roleIds;
+    }
+
+    const metadataJSON = JSON.stringify(metadataExport, null, 2);
+    const fileName = `Raumeinheit_Metadaten_Export${this.spatialUnitLevel ? '-' + this.spatialUnitLevel : ''}.json`;
+    this.downloadFile(metadataJSON, fileName);
+  }
+
+  private downloadFile(content: string, fileName: string) {
+    const blob = new Blob([content], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.download = fileName;
+    a.href = url;
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }
+
+  // Metadata structure for export
+  get spatialUnitMetadataStructure() {
+    return {
+      "metadata": {
+        "note": "an optional note",
+        "literature": "optional text about literature",
+        "updateInterval": "YEARLY|HALF_YEARLY|QUARTERLY|MONTHLY|ARBITRARY",
+        "sridEPSG": 4326,
+        "datasource": "text about data source",
+        "contact": "text about contact details",
+        "lastUpdate": "YYYY-MM-DD",
+        "description": "description about spatial unit dataset",
+        "databasis": "text about data basis"
+      },
+      "allowedRoles": ['roleId'],
+      "nextLowerHierarchyLevel": "Name of lower hierarchy level",
+      "spatialUnitLevel": "Name of spatial unit dataset",
+      "nextUpperHierarchyLevel": "Name of upper hierarchy level"
+    };
+  }
+
+  hideSuccessAlert() {
+    this.successMessage = '';
+  }
+
+  hideErrorAlert() {
+    this.errorMessage = '';
+  }
+
+  hideMetadataErrorAlert() {
+    this.spatialUnitMetadataImportError = '';
+  }
+
+  cancel() {
+    this.activeModal.dismiss();
+  }
+
+  onSubmit() {
+    this.editSpatialUnitMetadata();
+  }
+
+  // Missing function for metadata export template
+  onExportSpatialUnitEditMetadataTemplate() {
+    const metadataStructure = this.spatialUnitMetadataStructure;
+    const metadataJSON = JSON.stringify(metadataStructure, null, 2);
+    const fileName = "Raumeinheit_Metadaten_Vorlage_Export.json";
+    this.downloadFile(metadataJSON, fileName);
+  }
+} 
\ No newline at end of file

From de44b093351da7b4ad1b8a3fa1fea95ad4eaebd6 Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Sun, 6 Jul 2025 21:11:55 +0530
Subject: [PATCH 004/120] migrate spatial unit-edit modal

---
 app/app.module.ts                             |   9 +-
 ...dmin-spatial-units-management.component.ts |  44 +-
 ...ial-unit-edit-features-modal.component.css | 676 +++++++++++++++++
 ...al-unit-edit-features-modal.component.html | 494 +++++++++++++
 ...tial-unit-edit-features-modal.component.ts | 677 ++++++++++++++++++
 5 files changed, 1897 insertions(+), 3 deletions(-)
 create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.css
 create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.html
 create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index cee5d9f12..bd8c78d10 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -77,6 +77,7 @@ import { AdminDashboardManagementComponent } from './components/ngComponents/adm
 import { AdminSpatialUnitsManagementComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component';
 import { SpatialUnitAddModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component';
 import { SpatialUnitEditMetadataModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component';
+import { SpatialUnitEditFeaturesModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component';
 
 
 // currently the AngularJS routing is still used as part of kommonitorClient module
@@ -163,7 +164,8 @@ declare var MathJax;
     AdminDashboardManagementComponent,
     AdminSpatialUnitsManagementComponent,
     SpatialUnitAddModalComponent,
-    SpatialUnitEditMetadataModalComponent
+    SpatialUnitEditMetadataModalComponent,
+    SpatialUnitEditFeaturesModalComponent
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
@@ -269,6 +271,11 @@ export class AppModule implements DoBootstrap {
         component: SpatialUnitEditMetadataModalComponent
       }) as angular.IDirectiveFactory);
 
+    angular.module('kommonitorAdmin')
+      .directive('spatialUnitEditFeaturesModalNew', downgradeComponent({
+        component: SpatialUnitEditFeaturesModalComponent
+      }) as angular.IDirectiveFactory);
+
     console.log("registered downgraded Angular components for AngularJS usage");
   }
 
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
index 583b99b8e..9beb1d144 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
@@ -6,6 +6,7 @@ import { HttpClient } from '@angular/common/http';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { SpatialUnitAddModalComponent } from './spatialUnitAddModal/spatial-unit-add-modal.component';
 import { SpatialUnitEditMetadataModalComponent } from './spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component';
+import { SpatialUnitEditFeaturesModalComponent } from './spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component';
 declare const agGrid: any;
 declare const $: any;
 declare const __env: any;
@@ -267,8 +268,47 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
   }
 
   onClickEditFeatures(spatialUnitDataset: any): void {
-    // submit selected spatial unit to modal controller
-    this.broadcastService.broadcast('onEditSpatialUnitFeatures', spatialUnitDataset);
+    this.openEditFeaturesModal(spatialUnitDataset);
+  }
+
+  openEditFeaturesModal(spatialUnitDataset: any) {
+    console.log('Opening edit spatial unit features modal for:', spatialUnitDataset);
+    
+    try {
+      // Open modal using NgbModal
+      const modalRef = this.modalService.open(SpatialUnitEditFeaturesModalComponent, {
+        size: 'xl',
+        backdrop: 'static',
+        keyboard: false,
+        container: 'body',
+        animation: false,
+        windowClass: 'spatial-unit-edit-features-modal'
+      });
+      
+      console.log('Edit features modal reference created:', modalRef);
+      
+      // Pass the spatial unit dataset to the modal
+      modalRef.componentInstance.currentSpatialUnitDataset = spatialUnitDataset;
+      modalRef.componentInstance.resetForm();
+      
+      // Handle modal result
+      modalRef.result.then(
+        (result) => {
+          console.log('Edit features modal closed with result:', result);
+          if (result && result.action === 'updated') {
+            // Refresh the spatial units table
+            this.refreshSpatialUnitOverviewTable('edit', spatialUnitDataset.spatialUnitId);
+          }
+        },
+        (reason) => {
+          console.log('Edit features modal dismissed with reason:', reason);
+        }
+      );
+    } catch (error: any) {
+      console.error('Error opening edit features modal:', error);
+      // Fallback: broadcast event for old AngularJS modal
+      this.broadcastService.broadcast('onEditSpatialUnitFeatures', spatialUnitDataset);
+    }
   }
 
   checkCreatePermission(): boolean {
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.css b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.css
new file mode 100644
index 000000000..2581d63ac
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.css
@@ -0,0 +1,676 @@
+/* Loading overlay */
+.loading-overlay-admin-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1050;
+}
+
+.loading-overlay-admin-panel .spinner-border {
+  width: 3rem;
+  height: 3rem;
+}
+
+/* Modal header */
+.modal-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  padding: 1rem 1.5rem;
+}
+
+.modal-header .modal-title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: #343a40;
+}
+
+.modal-header .btn-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #6c757d;
+  cursor: pointer;
+}
+
+.modal-header .btn-close:hover {
+  color: #343a40;
+}
+
+/* Modal body */
+.modal-body {
+  padding: 1.5rem;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+/* Form styles */
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #343a40;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-control:focus {
+  color: #495057;
+  background-color: #fff;
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.form-control:invalid {
+  border-color: #dc3545;
+}
+
+.form-control:invalid:focus {
+  border-color: #dc3545;
+  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+}
+
+/* Progress bar */
+.progress-container {
+  margin-bottom: 2rem;
+}
+
+.progressbar {
+  counter-reset: step;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.progressbar::before {
+  content: '';
+  position: absolute;
+  top: 15px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #dee2e6;
+  z-index: 1;
+}
+
+.progressbar li {
+  counter-increment: step;
+  position: relative;
+  text-align: center;
+  color: #6c757d;
+  font-weight: 500;
+  z-index: 2;
+}
+
+.progressbar li::before {
+  content: counter(step);
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: #dee2e6;
+  color: #6c757d;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 0.5rem;
+  font-weight: bold;
+  font-size: 0.875rem;
+}
+
+.progressbar li.active {
+  color: #007bff;
+}
+
+.progressbar li.active::before {
+  background-color: #007bff;
+  color: #fff;
+}
+
+.progressbar li.active ~ li::before {
+  background-color: #dee2e6;
+  color: #6c757d;
+}
+
+/* Fieldset styles */
+fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+
+.fs-title {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #343a40;
+  margin-bottom: 0.5rem;
+}
+
+.fs-subtitle {
+  font-size: 1rem;
+  color: #6c757d;
+  margin-bottom: 1.5rem;
+}
+
+/* Multi-step form styles */
+.multiStepForm {
+  width: 100%;
+}
+
+.vertical-align {
+  display: flex;
+  align-items: flex-start;
+}
+
+.vertical-align .col-md-3,
+.vertical-align .col-md-6 {
+  margin-bottom: 1rem;
+}
+
+/* Button styles */
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.btn:hover {
+  text-decoration: none;
+}
+
+.btn:focus,
+.btn.focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #007bff;
+  border-color: #007bff;
+}
+
+.btn-primary:hover {
+  color: #fff;
+  background-color: #0056b3;
+  border-color: #0056b3;
+}
+
+.btn-primary:focus,
+.btn-primary.focus {
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+}
+
+.btn-secondary {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+
+.btn-secondary:hover {
+  color: #fff;
+  background-color: #545b62;
+  border-color: #545b62;
+}
+
+.btn-success {
+  color: #fff;
+  background-color: #28a745;
+  border-color: #28a745;
+}
+
+.btn-success:hover {
+  color: #fff;
+  background-color: #218838;
+  border-color: #218838;
+}
+
+.btn-info {
+  color: #fff;
+  background-color: #17a2b8;
+  border-color: #17a2b8;
+}
+
+.btn-info:hover {
+  color: #fff;
+  background-color: #138496;
+  border-color: #138496;
+}
+
+.btn-warning {
+  color: #212529;
+  background-color: #ffc107;
+  border-color: #ffc107;
+}
+
+.btn-warning:hover {
+  color: #212529;
+  background-color: #e0a800;
+  border-color: #e0a800;
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+
+.btn-danger:hover {
+  color: #fff;
+  background-color: #c82333;
+  border-color: #c82333;
+}
+
+.btn:disabled,
+.btn.disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+}
+
+.btn-group {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.btn-group > .btn {
+  position: relative;
+  flex: 1 1 auto;
+}
+
+.btn-group > .btn:not(:first-child) {
+  margin-left: -1px;
+}
+
+.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.btn-group > .btn:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* Form check styles */
+.form-check {
+  position: relative;
+  display: block;
+  padding-left: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.form-check-input {
+  position: absolute;
+  margin-top: 0.3rem;
+  margin-left: -1.25rem;
+}
+
+.form-check-label {
+  margin-bottom: 0;
+}
+
+.form-check-input[type="checkbox"] {
+  border-radius: 0.25rem;
+}
+
+.form-check-input:checked {
+  background-color: #007bff;
+  border-color: #007bff;
+}
+
+.form-check-input:focus {
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.form-switch {
+  padding-left: 2.5rem;
+}
+
+.form-switch .form-check-input {
+  width: 2rem;
+  margin-left: -2.5rem;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
+  background-position: left center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border-radius: 2rem;
+}
+
+.form-switch .form-check-input:checked {
+  background-position: right center;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1.0%29'/%3e%3c/svg%3e");
+}
+
+/* Input group styles */
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+}
+
+.input-group > .form-control {
+  position: relative;
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 0;
+}
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+}
+
+.input-group > .input-group-text:not(:last-child) {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group > .form-control:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group > .form-control:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* Help block styles */
+.help-block {
+  display: block;
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+  font-size: 0.875rem;
+  color: #6c757d;
+}
+
+.help-block p {
+  margin-bottom: 0;
+}
+
+.text-danger {
+  color: #dc3545;
+}
+
+/* Table styles */
+.table {
+  width: 100%;
+  margin-bottom: 1rem;
+  color: #212529;
+  vertical-align: top;
+  border-color: #dee2e6;
+}
+
+.table th,
+.table td {
+  padding: 0.5rem;
+  vertical-align: top;
+  border-top: 1px solid #dee2e6;
+}
+
+.table thead th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #dee2e6;
+  background-color: #f8f9fa;
+  font-weight: 500;
+}
+
+.table-condensed th,
+.table-condensed td {
+  padding: 0.25rem;
+}
+
+.table tbody tr:nth-of-type(odd) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Feature table wrapper */
+.admin-table-wrapper {
+  margin: 1rem 0;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.featureTableWrapper {
+  height: 50vh;
+  width: 100%;
+}
+
+.ag-theme-alpine {
+  --ag-background-color: #fff;
+  --ag-border-color: #dee2e6;
+  --ag-header-background-color: #f8f9fa;
+  --ag-header-foreground-color: #343a40;
+  --ag-row-hover-color: #f8f9fa;
+  --ag-selected-row-background-color: #007bff;
+  --ag-selected-row-foreground-color: #fff;
+}
+
+/* Alert styles */
+.alert {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+}
+
+.alert-success {
+  color: #155724;
+  background-color: #d4edda;
+  border-color: #c3e6cb;
+}
+
+.alert-danger {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+}
+
+.alert-dismissible {
+  padding-right: 4rem;
+}
+
+.alert-dismissible .btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.75rem 1.25rem;
+  color: inherit;
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.alert-dismissible .btn-close:hover {
+  opacity: 0.75;
+}
+
+/* Import/Export buttons */
+.import-export-buttons {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+}
+
+.import-export-buttons .btn {
+  margin-left: 0.5rem;
+}
+
+/* Form navigation */
+.form-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid #dee2e6;
+}
+
+.form-navigation .btn {
+  margin: 0 0.25rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .col-md-3,
+  .col-md-6 {
+    margin-bottom: 1rem;
+  }
+  
+  .vertical-align {
+    flex-direction: column;
+  }
+  
+  .form-navigation {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .form-navigation .btn {
+    width: 100%;
+    margin: 0.25rem 0;
+  }
+  
+  .import-export-buttons {
+    position: static;
+    margin-bottom: 1rem;
+  }
+  
+  .import-export-buttons .btn {
+    margin: 0.25rem;
+    width: 100%;
+  }
+}
+
+/* Utility classes */
+.d-none {
+  display: none;
+}
+
+.d-block {
+  display: block;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.justify-content-center {
+  justify-content: center;
+}
+
+.align-items-center {
+  align-items: center;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Fade animation */
+.fade {
+  transition: opacity 0.15s linear;
+}
+
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.show {
+  opacity: 1;
+}
+
+/* Custom scrollbar */
+.modal-body::-webkit-scrollbar {
+  width: 8px;
+}
+
+.modal-body::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.modal-body::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.modal-body::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.html
new file mode 100644
index 000000000..ad4d18af7
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.html
@@ -0,0 +1,494 @@
+

+  

+    Raumeinheiten der Raumebene {{ currentSpatialUnitDataset?.spatialUnitLevel }} fortführen
+  

+  
+

+
+

+  
+  

+    

+      
+    

+  

+
+  
+  
+
+  
+  
+
+  
+  
+
+  
+  

+    

+      

+        
+        

+          
    
+            
  • Raumeinheit Übersicht
    • 
+            
  • Räumlicher Datensatz
    • 
+          

+        

+
+        
+        

+          
Raumeinheit Übersicht

+          
Optionale Anzeige der Raumeinheits-Details

+
+          

+            

+              

+                
+                
+                

+                  
Das Anzeigen aller Raumeinheiten der Raumebene kann je nach Anzahl und Komplexität der Objekte einige Zeit in Anspruch nehmen

+                  
Editieren einzelner Zellwerte via Doppelklick. Bestätigen der Editierung durch Enter oder Klicken in eine andere Zelle

+                

+              

+            

+            

+              

+                
+                

+                  
+                  
+                

+                
+                

+                  
Das Löschen aller Raumeinheiten der Raumebene ist unwiderruflich. Der Datensatz als solches (Metadaten) bleibt dabei bestehen.

+                

+              

+            

+          

+
+          
+          

+            Letztes erfolgreiches Update eines Einzeleintrags:
+            {{ kommonitorDataGridHelperService.featureTable_spatialUnit_lastUpdate_timestamp_success }}
+          

+          

+            Letztes gescheitertes Update eines Einzeleintrags:
+            {{ kommonitorDataGridHelperService.featureTable_spatialUnit_lastUpdate_timestamp_failure }}
+          

+
+          
+          

+            

+          

+
+          

+            
+          

+        

+
+        
+        

+          

+            
+            
+            
+          

+
+          
Räumlicher Datensatz

+          
Angaben über den räumlichen Datensatz, aus dem die Raumeinheiten importiert werden

+
+          
* = Pflichtfeld

+
+          

+            
+            

+              

+                
+                
+              

+
+              

+                
+                
+              

+
+              

+                
+                
+              

+
+              

+                
+                
+                

+                  
{{ parameter.description }}

+                

+                

+                  
CRS aufmerksam setzen. Falsche Angaben führen zur fehlerhaften Koordinaten der Raumeinheiten

+                

+              

+            

+
+            
+            

+              

+                
bitte zuerst das Quellformat wählen

+              

+
+              

+                

+                  
+                  
+                

+
+                

+                  
+                  
+                

+
+                

+                  
+                  
+
+                  

+                    
+                    

+                      
Raumebene aus welchem ein umschließendes Rechteck extrahiert wird

+                    

+                  

+
+                  

+                    
+                    
+                    
Minimale x-Koordinate

+                    
+                    
Minimale y-Koordinate

+                    
+                    
Maximale x-Koordinate

+                    
+                    
Maximale y-Koordinate

+                  

+                

+
+                

+                  

+                    
+                    
+                    
+                    

+                      
{{ parameter.description }}

+                    

+                  

+                

+
+                

+                  
Eingabe ungültig. Grund: {{ spatialUnitEditFeaturesDataSourceInputInvalidReason }}

+                

+              

+            

+
+            
+            

+              

+                
+                
+                

+                  
Name des Attributs, welches den eindeutigen Identifier des Raumeinheiten enthält.

+                

+              

+
+              

+                
+                
+                

+                  
Name des Attributs, welches den eindeutigen Namen des Raumeinheiten enthält.

+                

+              

+            

+
+            
+            

+              

+                
+                
+                

+                  
Eintrag nur, falls die räumlichen Raumeinheiten über ein Attribut für den Lebenszeitraum (Beginn) verfügen.

+                

+              

+
+              

+                
+                
+                

+                  
Eintrag nur, falls die räumlichen Raumeinheiten über ein Attribut für den Lebenszeitraum (Ende) verfügen.

+                

+              

+            

+          

+
+          
+          

+            

+              

+                
+                

+                  
+                    
+                  
+                  
+                

+                

+                  
Eintrag ist immer erforderlich, selbst wenn die räumlichen Raumeinheiten über ein Lebenszeitraum-Attribut verfügen.

+                

+                

+                  
Eingabe ungültig. Definiertes Zeitintervall ist nicht erlaubt.

+                

+              

+            

+
+            

+              

+                
+                

+                  
+                    
+                  
+                  
+                

+                

+                  
Eintrag ist erforderlich, falls die räumlichen Raumeinheiten nicht selbst über ein Lebenszeitraum-Attribut verfügen.

+                

+                

+                  
Eingabe ungültig. Definiertes Zeitintervall ist nicht erlaubt.

+                

+              

+            

+          

+
+          

+
+          
+          

+            

+              

+                
+                

+                  
+                  
+                

+                

+                  
Angabe, ob das Update nur einen Teil der räumlichen Objekte enthält (bspw. 20/50 Stadtteilen).

+                

+              

+            

+          

+
+          

+
+          
+          

+            

+              

+                
+                

+                  
+                  
+                

+                

+                  
Angabe, ob alle sonstigen Attribute des importierten Datensatzes mit gleichem Namen übernommen werden sollen.

+                

+              

+            

+
+            

+              

+                
+                

+                  
+                  
+                

+                

+                  
Angabe, ob fehlende Attribute oder leere Attributwerte (NULL-Werte) übernommen werden.

+                

+              

+            

+          

+
+          
+          

+            

+              

+                
+                
+              

+
+              

+                
+                
+              

+
+              

+                
+                
+              

+
+              

+                
+              

+            

+
+            

+              
+              
+                
+                  
+                    
+                    
+                    
+                    
+                  
+                
+                
+                  
+                    
+                    
+                    
+                    
+                  
+                
+              
EditierfunktionenQuell-Attributname im DatensatzZiel-Attributname nach ImportDatentyp

+                      

+                        
+                        
+                      

+                    		{{ attributeMappingEntry.sourceName }}{{ attributeMappingEntry.destinationName }}{{ attributeMappingEntry.dataType?.displayName }}

+            

+          

+
+          

+            
+            
+          

+        

+      

+    

+  

+

+
+

+  
+  
+
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.ts
new file mode 100644
index 000000000..2f4ac0b93
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.ts
@@ -0,0 +1,677 @@
+import { Component, OnInit, OnDestroy, Inject, ViewChild, ElementRef } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { HttpClient } from '@angular/common/http';
+import { Subscription } from 'rxjs';
+
+declare const $: any;
+declare const __env: any;
+
+@Component({
+  selector: 'spatial-unit-edit-features-modal-new',
+  templateUrl: './spatial-unit-edit-features-modal.component.html',
+  styleUrls: ['./spatial-unit-edit-features-modal.component.css']
+})
+export class SpatialUnitEditFeaturesModalComponent implements OnInit, OnDestroy {
+  @ViewChild('mappingConfigImportFile', { static: false }) mappingConfigImportFile!: ElementRef;
+  @ViewChild('spatialUnitDataSourceInput', { static: false }) spatialUnitDataSourceInput!: ElementRef;
+
+  // Multi-step form
+  currentStep = 1;
+  totalSteps = 2;
+
+  // Form data
+  isSubmitting = false;
+  errorMessage = '';
+  successMessage = '';
+  loadingData = false;
+
+  // Current dataset being edited
+  currentSpatialUnitDataset: any = null;
+
+  // Basic form data
+  spatialUnitFeaturesGeoJSON: any = null;
+  remainingFeatureHeaders: string[] = [];
+  spatialUnitMappingConfigStructure_pretty = '';
+  spatialUnitMappingConfigImportError = '';
+
+  // Period of validity
+  periodOfValidity: { startDate: string; endDate: string } = {
+    startDate: '',
+    endDate: ''
+  };
+  periodOfValidityInvalid = false;
+
+  // Data source input
+  geoJsonString: string = '';
+  spatialUnit_asGeoJson: any = null;
+  spatialUnitEditFeaturesDataSourceInputInvalidReason = '';
+  spatialUnitEditFeaturesDataSourceInputInvalid = false;
+  spatialUnitDataSourceIdProperty = '';
+  spatialUnitDataSourceNameProperty = '';
+
+  // Converter settings
+  converter: any = null;
+  schema: string = '';
+  mimeType: string = '';
+  datasourceType: any = null;
+
+  // Importer objects
+  converterDefinition: any = null;
+  datasourceTypeDefinition: any = null;
+  propertyMappingDefinition: any = null;
+  putBody_spatialUnits: any = null;
+
+  // Validity dates per feature
+  validityEndDate_perFeature = '';
+  validityStartDate_perFeature = '';
+
+  // Attribute mapping
+  attributeMapping_sourceAttributeName = '';
+  attributeMapping_destinationAttributeName = '';
+  attributeMapping_data: any = null;
+  attributeMapping_attributeType: any = null;
+  attributeMappings_adminView: any[] = [];
+  keepAttributes = true;
+  keepMissingValues = true;
+
+  // Partial update
+  isPartialUpdate = false;
+
+  // Error handling
+  importerErrors: any[] = [];
+  successMessagePart = '';
+  errorMessagePart = '';
+
+  // Available options
+  availableDatasourceTypes: any[] = [];
+  availableSpatialUnits: any[] = [];
+
+  // Bbox parameters for OGCAPI_FEATURES
+  bboxType: string = '';
+  bboxRefSpatialUnit: any = null;
+
+  // Feature table settings
+  enableDeleteFeatures = false;
+
+  // Import/Export functionality
+  mappingConfigImportSettings: any = null;
+
+  // Subscriptions
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
+    @Inject('kommonitorImporterHelperService') public kommonitorImporterHelperService: any,
+    @Inject('kommonitorDataGridHelperService') public kommonitorDataGridHelperService: any,
+    @Inject('kommonitorMultiStepFormHelperService') private kommonitorMultiStepFormHelperService: any,
+    private http: HttpClient,
+    private broadcastService: BroadcastService
+  ) {
+    console.log('SpatialUnitEditFeaturesModalComponent constructor initialized');
+  }
+
+  ngOnInit(): void {
+    this.initializeDatePickers();
+    this.initializeForm();
+    this.setupEventListeners();
+    this.loadAvailableOptions();
+    this.buildFeatureTable();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  private initializeDatePickers(): void {
+    // Initialize date pickers
+    setTimeout(() => {
+      if (this.kommonitorDataExchangeService?.datePickerOptions) {
+        $('#spatialUnitEditFeaturesDatepickerStart').datepicker(this.kommonitorDataExchangeService.datePickerOptions);
+        $('#spatialUnitEditFeaturesDatepickerEnd').datepicker(this.kommonitorDataExchangeService.datePickerOptions);
+      }
+    }, 100);
+  }
+
+  private initializeForm(): void {
+    // Initialize form with defaults
+    this.spatialUnitMappingConfigStructure_pretty = this.kommonitorDataExchangeService?.syntaxHighlightJSON(
+      this.kommonitorImporterHelperService?.mappingConfigStructure
+    ) || '';
+    
+    if (this.kommonitorImporterHelperService?.attributeMapping_attributeTypes?.length > 0) {
+      this.attributeMapping_attributeType = this.kommonitorImporterHelperService.attributeMapping_attributeTypes[0];
+    }
+  }
+
+  private setupEventListeners(): void {
+    // Setup broadcast listeners
+    const broadcastSubscription = this.broadcastService.currentBroadcastMsg.subscribe(broadcastMsg => {
+      if (broadcastMsg) {
+        if (broadcastMsg.msg === 'onEditSpatialUnitFeatures') {
+          this.onEditSpatialUnitFeatures(broadcastMsg.values);
+        } else if (broadcastMsg.msg === 'showLoadingIcon_' + this.kommonitorDataGridHelperService?.resourceType_spatialUnit) {
+          this.loadingData = true;
+        } else if (broadcastMsg.msg === 'hideLoadingIcon_' + this.kommonitorDataGridHelperService?.resourceType_spatialUnit) {
+          this.loadingData = false;
+        } else if (broadcastMsg.msg === 'onDeleteFeatureEntry_' + this.kommonitorDataGridHelperService?.resourceType_spatialUnit) {
+          this.broadcastService.broadcast('refreshSpatialUnitOverviewTable', ['edit', this.currentSpatialUnitDataset?.spatialUnitId]);
+          this.refreshSpatialUnitEditFeaturesOverviewTable();
+        }
+      }
+    });
+
+    this.subscriptions.push(broadcastSubscription);
+  }
+
+  private loadAvailableOptions(): void {
+    if (this.kommonitorImporterHelperService?.availableConverters) {
+      this.availableDatasourceTypes = this.kommonitorImporterHelperService.availableConverters
+        .filter((converter: any) => converter.type === 'spatialUnit');
+    }
+  }
+
+  private buildFeatureTable(): void {
+    this.kommonitorDataGridHelperService?.buildDataGrid_featureTable_spatialResource(
+      "spatialUnitFeatureTable", 
+      [], 
+      []
+    );
+  }
+
+  onEditSpatialUnitFeatures(spatialUnitDataset: any): void {
+    this.kommonitorMultiStepFormHelperService?.registerClickHandler();
+
+    if (this.currentSpatialUnitDataset && 
+        this.currentSpatialUnitDataset.spatialUnitLevel === spatialUnitDataset.spatialUnitLevel) {
+      return;
+    }
+
+    this.currentSpatialUnitDataset = spatialUnitDataset;
+    this.resetForm();
+    this.buildFeatureTable();
+  }
+
+  resetForm(): void {
+    // Reset edit banners
+    if (this.kommonitorDataGridHelperService) {
+      this.kommonitorDataGridHelperService.featureTable_spatialUnit_lastUpdate_timestamp_success = undefined;
+      this.kommonitorDataGridHelperService.featureTable_spatialUnit_lastUpdate_timestamp_failure = undefined;
+    }
+
+    // Reset form data
+    this.spatialUnitFeaturesGeoJSON = null;
+    this.remainingFeatureHeaders = [];
+    this.periodOfValidity = { startDate: '', endDate: '' };
+    this.periodOfValidityInvalid = false;
+    this.geoJsonString = '';
+    this.spatialUnit_asGeoJson = null;
+    this.spatialUnitEditFeaturesDataSourceInputInvalidReason = '';
+    this.spatialUnitEditFeaturesDataSourceInputInvalid = false;
+    this.spatialUnitDataSourceIdProperty = '';
+    this.spatialUnitDataSourceNameProperty = '';
+    this.converter = null;
+    this.schema = '';
+    this.mimeType = '';
+    this.datasourceType = null;
+    this.converterDefinition = null;
+    this.datasourceTypeDefinition = null;
+    this.propertyMappingDefinition = null;
+    this.putBody_spatialUnits = null;
+    this.validityEndDate_perFeature = '';
+    this.validityStartDate_perFeature = '';
+    this.attributeMapping_sourceAttributeName = '';
+    this.attributeMapping_destinationAttributeName = '';
+    this.attributeMapping_data = null;
+    this.attributeMapping_attributeType = this.kommonitorImporterHelperService?.attributeMapping_attributeTypes?.[0];
+    this.attributeMappings_adminView = [];
+    this.keepAttributes = true;
+    this.keepMissingValues = true;
+    this.importerErrors = [];
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+
+    // Hide alerts
+    this.hideSuccessAlert();
+    this.hideErrorAlert();
+  }
+
+  onChangeConverter(schema?: any): void {
+    this.schema = this.converter?.schemas ? this.converter.schemas[0] : '';
+    this.mimeType = this.converter?.mimeTypes ? this.converter.mimeTypes[0] : '';
+  }
+
+  onChangeMimeType(mimeType: any): void {
+    this.mimeType = mimeType;
+  }
+
+  onChangeDatasourceType(datasourceType: any): void {
+    if (this.datasourceType && this.datasourceType.type === "OGCAPI_FEATURES") {
+      this.availableSpatialUnits = this.kommonitorDataExchangeService?.availableSpatialUnits_map ? 
+        [...this.kommonitorDataExchangeService.availableSpatialUnits_map.values()] : [];
+    }
+  }
+
+  refreshSpatialUnitEditFeaturesOverviewTable(): void {
+    if (!this.currentSpatialUnitDataset) return;
+
+    this.loadingData = true;
+    const url = `${this.kommonitorDataExchangeService.getBaseUrlToKomMonitorDataAPI_spatialResource()}/spatial-units/${this.currentSpatialUnitDataset.spatialUnitId}/allFeatures`;
+
+    this.http.get(url).subscribe({
+      next: (response: any) => {
+        this.spatialUnitFeaturesGeoJSON = response;
+        const tmpRemainingHeaders: string[] = [];
+
+        if (this.spatialUnitFeaturesGeoJSON?.features?.[0]?.properties) {
+          for (const property in this.spatialUnitFeaturesGeoJSON.features[0].properties) {
+            if (property !== __env.FEATURE_ID_PROPERTY_NAME && 
+                property !== __env.FEATURE_NAME_PROPERTY_NAME && 
+                property !== __env.VALID_START_DATE_PROPERTY_NAME && 
+                property !== __env.VALID_END_DATE_PROPERTY_NAME) {
+              tmpRemainingHeaders.push(property);
+            }
+          }
+        }
+
+        this.remainingFeatureHeaders = tmpRemainingHeaders;
+        this.kommonitorDataGridHelperService?.buildDataGrid_featureTable_spatialResource(
+          "spatialUnitFeatureTable", 
+          tmpRemainingHeaders, 
+          this.spatialUnitFeaturesGeoJSON.features, 
+          this.currentSpatialUnitDataset.spatialUnitId, 
+          this.kommonitorDataGridHelperService.resourceType_spatialUnit, 
+          this.enableDeleteFeatures
+        );
+
+        this.loadingData = false;
+      },
+      error: (error) => {
+        this.handleError(error);
+        this.loadingData = false;
+      }
+    });
+  }
+
+  clearAllSpatialUnitFeatures(): void {
+    if (!this.currentSpatialUnitDataset) return;
+
+    this.loadingData = true;
+    const url = `${this.kommonitorDataExchangeService.baseUrlToKomMonitorDataAPI}/spatial-units/${this.currentSpatialUnitDataset.spatialUnitId}/allFeatures`;
+
+    this.http.delete(url).subscribe({
+      next: (response: any) => {
+        this.spatialUnitFeaturesGeoJSON = null;
+        this.remainingFeatureHeaders = [];
+        this.broadcastService.broadcast('refreshSpatialUnitOverviewTable', ['edit', this.currentSpatialUnitDataset.spatialUnitId]);
+        this.kommonitorDataGridHelperService?.buildDataGrid_featureTable_spatialResource("spatialUnitFeatureTable", [], []);
+        this.successMessagePart = this.currentSpatialUnitDataset.spatialUnitLevel;
+        this.showSuccessAlert();
+        this.loadingData = false;
+      },
+      error: (error) => {
+        this.handleError(error);
+        this.loadingData = false;
+      }
+    });
+  }
+
+  checkPeriodOfValidity(): void {
+    this.periodOfValidityInvalid = false;
+    if (this.periodOfValidity.startDate && this.periodOfValidity.endDate) {
+      const startDate = new Date(this.periodOfValidity.startDate);
+      const endDate = new Date(this.periodOfValidity.endDate);
+
+      if (startDate === endDate || startDate > endDate) {
+        this.periodOfValidityInvalid = true;
+      }
+    }
+  }
+
+  onAddOrUpdateAttributeMapping(): void {
+    const tmpAttributeMapping = {
+      sourceName: this.attributeMapping_sourceAttributeName,
+      destinationName: this.attributeMapping_destinationAttributeName,
+      dataType: this.attributeMapping_attributeType
+    };
+
+    let processed = false;
+    for (let index = 0; index < this.attributeMappings_adminView.length; index++) {
+      const attributeMappingEntry = this.attributeMappings_adminView[index];
+      if (attributeMappingEntry.sourceName === tmpAttributeMapping.sourceName) {
+        this.attributeMappings_adminView[index] = tmpAttributeMapping;
+        processed = true;
+        break;
+      }
+    }
+
+    if (!processed) {
+      this.attributeMappings_adminView.push(tmpAttributeMapping);
+    }
+
+    this.attributeMapping_sourceAttributeName = '';
+    this.attributeMapping_destinationAttributeName = '';
+    this.attributeMapping_attributeType = this.kommonitorImporterHelperService?.attributeMapping_attributeTypes?.[0];
+  }
+
+  onClickEditAttributeMapping(attributeMappingEntry: any): void {
+    this.attributeMapping_sourceAttributeName = attributeMappingEntry.sourceName;
+    this.attributeMapping_destinationAttributeName = attributeMappingEntry.destinationName;
+    this.attributeMapping_attributeType = attributeMappingEntry.dataType;
+  }
+
+  onClickDeleteAttributeMapping(attributeMappingEntry: any): void {
+    for (let index = 0; index < this.attributeMappings_adminView.length; index++) {
+      if (this.attributeMappings_adminView[index].sourceName === attributeMappingEntry.sourceName) {
+        this.attributeMappings_adminView.splice(index, 1);
+        break;
+      }
+    }
+  }
+
+  async buildImporterObjects(): Promise {
+    this.converterDefinition = this.buildConverterDefinition();
+    this.datasourceTypeDefinition = await this.buildDatasourceTypeDefinition();
+    this.propertyMappingDefinition = this.buildPropertyMappingDefinition();
+    this.putBody_spatialUnits = this.buildPutBody_spatialUnits();
+
+    return !!(this.converterDefinition && this.datasourceTypeDefinition && this.propertyMappingDefinition && this.putBody_spatialUnits);
+  }
+
+  buildConverterDefinition(): any {
+    return this.kommonitorImporterHelperService?.buildConverterDefinition(
+      this.converter, 
+      "converterParameter_spatialUnitEditFeatures_", 
+      this.schema, 
+      this.mimeType
+    );
+  }
+
+  async buildDatasourceTypeDefinition(): Promise {
+    try {
+      return await this.kommonitorImporterHelperService?.buildDatasourceTypeDefinition(
+        this.datasourceType, 
+        'datasourceTypeParameter_spatialUnitEditFeatures_', 
+        'spatialUnitDataSourceInput_editFeatures'
+      );
+    } catch (error) {
+      this.handleError(error);
+      return null;
+    }
+  }
+
+  buildPropertyMappingDefinition(): any {
+    return this.kommonitorImporterHelperService?.buildPropertyMapping_spatialResource(
+      this.spatialUnitDataSourceNameProperty, 
+      this.spatialUnitDataSourceIdProperty, 
+      this.validityStartDate_perFeature, 
+      this.validityEndDate_perFeature, 
+      undefined, 
+      this.keepAttributes, 
+      this.keepMissingValues, 
+      this.attributeMappings_adminView
+    );
+  }
+
+  buildPutBody_spatialUnits(): any {
+    return {
+      geoJsonString: "", // will be set by importer
+      periodOfValidity: {
+        endDate: this.periodOfValidity.endDate,
+        startDate: this.periodOfValidity.startDate
+      },
+      isPartialUpdate: this.isPartialUpdate
+    };
+  }
+
+  async editSpatialUnitFeatures(): Promise {
+    this.loadingData = true;
+    this.importerErrors = [];
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+
+    const allDataSpecified = await this.buildImporterObjects();
+    if (!allDataSpecified) {
+      this.loadingData = false;
+      return;
+    }
+
+    try {
+      const updateSpatialUnitResponse_dryRun = await this.kommonitorImporterHelperService?.updateSpatialUnit(
+        this.converterDefinition, 
+        this.datasourceTypeDefinition, 
+        this.propertyMappingDefinition, 
+        this.currentSpatialUnitDataset.spatialUnitId, 
+        this.putBody_spatialUnits, 
+        true
+      );
+
+      if (!this.kommonitorImporterHelperService?.importerResponseContainsErrors(updateSpatialUnitResponse_dryRun)) {
+        const updateSpatialUnitResponse = await this.kommonitorImporterHelperService?.updateSpatialUnit(
+          this.converterDefinition, 
+          this.datasourceTypeDefinition, 
+          this.propertyMappingDefinition, 
+          this.currentSpatialUnitDataset.spatialUnitId, 
+          this.putBody_spatialUnits, 
+          false
+        );
+
+        this.successMessagePart = this.currentSpatialUnitDataset.spatialUnitLevel;
+        this.broadcastService.broadcast('refreshSpatialUnitOverviewTable', ['edit', this.currentSpatialUnitDataset.spatialUnitId]);
+        this.showSuccessAlert();
+        this.loadingData = false;
+      } else {
+        this.errorMessagePart = "Einige der zu importierenden Features des Datensatzes weisen kritische Fehler auf";
+        this.importerErrors = this.kommonitorImporterHelperService?.getErrorsFromImporterResponse(updateSpatialUnitResponse_dryRun) || [];
+        this.showErrorAlert();
+        this.loadingData = false;
+      }
+    } catch (error) {
+      this.handleError(error);
+      this.loadingData = false;
+    }
+  }
+
+  // Import/Export functionality
+  onImportSpatialUnitEditFeaturesMappingConfig(): void {
+    this.spatialUnitMappingConfigImportError = '';
+    if (this.mappingConfigImportFile) {
+      this.mappingConfigImportFile.nativeElement.click();
+    }
+  }
+
+  onMappingConfigFileSelected(event: any): void {
+    const file = event.target.files[0];
+    if (file) {
+      this.parseMappingConfigFromFile(file);
+    }
+  }
+
+  parseMappingConfigFromFile(file: File): void {
+    const fileReader = new FileReader();
+    fileReader.onload = (event: any) => {
+      try {
+        this.parseFromMappingConfigFile(event);
+      } catch (error) {
+        console.error('Uploaded MappingConfig File cannot be parsed.', error);
+        this.spatialUnitMappingConfigImportError = 'Uploaded MappingConfig File cannot be parsed correctly';
+        this.showMappingConfigErrorAlert();
+      }
+    };
+    fileReader.readAsText(file);
+  }
+
+  parseFromMappingConfigFile(event: any): void {
+    this.mappingConfigImportSettings = JSON.parse(event.target.result);
+
+    if (!this.mappingConfigImportSettings.converter || 
+        !this.mappingConfigImportSettings.dataSource || 
+        !this.mappingConfigImportSettings.propertyMapping) {
+      this.spatialUnitMappingConfigImportError = 'Struktur der Datei stimmt nicht mit erwartetem Muster überein.';
+      this.showMappingConfigErrorAlert();
+      return;
+    }
+
+    // Set converter
+    this.converter = this.kommonitorImporterHelperService?.availableConverters?.find(
+      (converter: any) => converter.name === this.mappingConfigImportSettings.converter.name
+    );
+
+    // Set schema and mimeType
+    if (this.converter?.schemas && this.mappingConfigImportSettings.converter.schema) {
+      this.schema = this.converter.schemas.find(
+        (schema: string) => schema === this.mappingConfigImportSettings.converter.schema
+      ) || '';
+    }
+
+    if (this.converter?.mimeTypes && this.mappingConfigImportSettings.converter.mimeType) {
+      this.mimeType = this.converter.mimeTypes.find(
+        (mimeType: string) => mimeType === this.mappingConfigImportSettings.converter.mimeType
+      ) || '';
+    }
+
+    // Set datasource type
+    this.datasourceType = this.kommonitorImporterHelperService?.availableDatasourceTypes?.find(
+      (datasourceType: any) => datasourceType.type === this.mappingConfigImportSettings.dataSource.type
+    );
+
+    // Set property mapping
+    this.spatialUnitDataSourceNameProperty = this.mappingConfigImportSettings.propertyMapping.nameProperty;
+    this.spatialUnitDataSourceIdProperty = this.mappingConfigImportSettings.propertyMapping.identifierProperty;
+    this.validityStartDate_perFeature = this.mappingConfigImportSettings.propertyMapping.validStartDateProperty;
+    this.validityEndDate_perFeature = this.mappingConfigImportSettings.propertyMapping.validEndDateProperty;
+    this.keepAttributes = this.mappingConfigImportSettings.propertyMapping.keepAttributes;
+    this.keepMissingValues = this.mappingConfigImportSettings.propertyMapping.keepMissingOrNullValueAttributes;
+
+    // Set attribute mappings
+    this.attributeMappings_adminView = this.mappingConfigImportSettings.propertyMapping.attributes?.map((attr: any) => ({
+      sourceName: attr.name,
+      destinationName: attr.mappingName,
+      dataType: this.kommonitorImporterHelperService?.attributeMapping_attributeTypes?.find(
+        (dataType: any) => dataType.apiName === attr.type
+      )
+    })) || [];
+
+    // Set period of validity
+    if (this.mappingConfigImportSettings.periodOfValidity) {
+      this.periodOfValidity = {
+        startDate: this.mappingConfigImportSettings.periodOfValidity.startDate,
+        endDate: this.mappingConfigImportSettings.periodOfValidity.endDate
+      };
+      this.checkPeriodOfValidity();
+    }
+  }
+
+  async onExportSpatialUnitEditFeaturesMappingConfig(): Promise {
+    const converterDefinition = this.buildConverterDefinition();
+    const datasourceTypeDefinition = await this.buildDatasourceTypeDefinition();
+    const propertyMappingDefinition = this.buildPropertyMappingDefinition();
+
+    const mappingConfigExport = {
+      converter: converterDefinition,
+      dataSource: datasourceTypeDefinition,
+      propertyMapping: propertyMappingDefinition,
+      periodOfValidity: this.periodOfValidity
+    };
+
+    const fileName = `KomMonitor-Import-Mapping-Konfiguration_Export-${this.currentSpatialUnitDataset?.spatialUnitLevel || 'SpatialUnit'}.json`;
+    const metadataJSON = JSON.stringify(mappingConfigExport);
+    const blob = new Blob([metadataJSON], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.download = fileName;
+    a.href = url;
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  }
+
+  onChangeEnableDeleteFeatures(): void {
+    const buttons = document.querySelectorAll('.spatialUnitDeleteFeatureRecordBtn');
+    buttons.forEach((button: any) => {
+      button.disabled = !this.enableDeleteFeatures;
+    });
+  }
+
+  filterByKomMonitorProperties(): (item: string) => boolean {
+    return (item: string) => {
+      try {
+        return item !== __env.FEATURE_ID_PROPERTY_NAME && 
+               item !== __env.FEATURE_NAME_PROPERTY_NAME && 
+               item !== 'validStartDate' && 
+               item !== 'validEndDate';
+      } catch (error) {
+        return false;
+      }
+    };
+  }
+
+  getFeatureId(geojsonFeature: any): string {
+    return geojsonFeature.properties?.[__env.FEATURE_ID_PROPERTY_NAME] || '';
+  }
+
+  getFeatureName(geojsonFeature: any): string {
+    return geojsonFeature.properties?.[__env.FEATURE_NAME_PROPERTY_NAME] || '';
+  }
+
+  // Navigation methods
+  nextStep(): void {
+    if (this.currentStep < this.totalSteps) {
+      this.currentStep++;
+    }
+  }
+
+  previousStep(): void {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+    }
+  }
+
+  // Alert methods
+  showSuccessAlert(): void {
+    this.successMessage = 'Operation completed successfully';
+    setTimeout(() => this.hideSuccessAlert(), 5000);
+  }
+
+  hideSuccessAlert(): void {
+    this.successMessage = '';
+  }
+
+  showErrorAlert(): void {
+    setTimeout(() => this.hideErrorAlert(), 10000);
+  }
+
+  hideErrorAlert(): void {
+    this.errorMessage = '';
+    this.errorMessagePart = '';
+  }
+
+  showMappingConfigErrorAlert(): void {
+    setTimeout(() => this.hideMappingConfigErrorAlert(), 10000);
+  }
+
+  hideMappingConfigErrorAlert(): void {
+    this.spatialUnitMappingConfigImportError = '';
+  }
+
+  private handleError(error: any): void {
+    console.error('Error occurred:', error);
+    if (error.data) {
+      this.errorMessagePart = this.kommonitorDataExchangeService?.syntaxHighlightJSON(error.data) || 'An error occurred';
+    } else {
+      this.errorMessagePart = this.kommonitorDataExchangeService?.syntaxHighlightJSON(error) || 'An error occurred';
+    }
+    this.showErrorAlert();
+  }
+
+  // Modal control methods
+  closeModal(): void {
+    this.activeModal.dismiss('cancel');
+  }
+
+  saveAndClose(): void {
+    this.activeModal.close({ action: 'updated' });
+  }
+} 
\ No newline at end of file

From fd57d4266b77f18384d0e34a0b148728a7cbb61e Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Sun, 6 Jul 2025 21:27:22 +0530
Subject: [PATCH 005/120] migrate spatial unit modal

---
 app/app.module.ts                             |   9 +-
 ...dmin-spatial-units-management.component.ts |  48 ++-
 .../spatial-unit-delete-modal.component.css   | 373 ++++++++++++++++++
 .../spatial-unit-delete-modal.component.html  | 141 +++++++
 .../spatial-unit-delete-modal.component.ts    | 177 +++++++++
 5 files changed, 739 insertions(+), 9 deletions(-)
 create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.css
 create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.html
 create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index bd8c78d10..77ab9c350 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -78,6 +78,7 @@ import { AdminSpatialUnitsManagementComponent } from './components/ngComponents/
 import { SpatialUnitAddModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component';
 import { SpatialUnitEditMetadataModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component';
 import { SpatialUnitEditFeaturesModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component';
+import { SpatialUnitDeleteModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component';
 
 
 // currently the AngularJS routing is still used as part of kommonitorClient module
@@ -165,7 +166,8 @@ declare var MathJax;
     AdminSpatialUnitsManagementComponent,
     SpatialUnitAddModalComponent,
     SpatialUnitEditMetadataModalComponent,
-    SpatialUnitEditFeaturesModalComponent
+    SpatialUnitEditFeaturesModalComponent,
+    SpatialUnitDeleteModalComponent
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
@@ -276,6 +278,11 @@ export class AppModule implements DoBootstrap {
         component: SpatialUnitEditFeaturesModalComponent
       }) as angular.IDirectiveFactory);
 
+    angular.module('kommonitorAdmin')
+      .directive('spatialUnitDeleteModalNew', downgradeComponent({
+        component: SpatialUnitDeleteModalComponent
+      }) as angular.IDirectiveFactory);
+
     console.log("registered downgraded Angular components for AngularJS usage");
   }
 
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
index 9beb1d144..ff11d5357 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
@@ -7,6 +7,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { SpatialUnitAddModalComponent } from './spatialUnitAddModal/spatial-unit-add-modal.component';
 import { SpatialUnitEditMetadataModalComponent } from './spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component';
 import { SpatialUnitEditFeaturesModalComponent } from './spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component';
+import { SpatialUnitDeleteModalComponent } from './spatialUnitDeleteModal/spatial-unit-delete-modal.component';
 declare const agGrid: any;
 declare const $: any;
 declare const __env: any;
@@ -211,16 +212,47 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
   }
 
   onClickDeleteDatasets(): void {
-    this.loadingData = true;
-
     const markedEntriesForDeletion = this.kommonitorDataGridHelperService.getSelectedSpatialUnitsMetadata();
+    this.openDeleteModal(markedEntriesForDeletion);
+  }
 
-    // submit selected spatial units to modal controller
-    this.broadcastService.broadcast('onDeleteSpatialUnits', markedEntriesForDeletion);
-
-    setTimeout(() => {
-      this.loadingData = false;
-    });
+  openDeleteModal(datasetsToDelete: any[]) {
+    console.log('Opening delete spatial units modal for:', datasetsToDelete);
+    
+    try {
+      // Open modal using NgbModal
+      const modalRef = this.modalService.open(SpatialUnitDeleteModalComponent, {
+        size: 'lg',
+        backdrop: 'static',
+        keyboard: false,
+        container: 'body',
+        animation: false,
+        windowClass: 'spatial-unit-delete-modal'
+      });
+      
+      console.log('Delete modal reference created:', modalRef);
+      
+      // Pass the datasets to the modal
+      modalRef.componentInstance.datasetsToDelete = datasetsToDelete;
+      
+      // Handle modal result
+      modalRef.result.then(
+        (result) => {
+          console.log('Delete modal closed with result:', result);
+          if (result && result.action === 'deleted') {
+            // Refresh the spatial units table
+            this.refreshSpatialUnitOverviewTable('delete', result.deletedDatasets?.map((d: any) => d.spatialUnitId));
+          }
+        },
+        (reason) => {
+          console.log('Delete modal dismissed with reason:', reason);
+        }
+      );
+    } catch (error: any) {
+      console.error('Error opening delete modal:', error);
+      // Fallback: broadcast event for old AngularJS modal
+      this.broadcastService.broadcast('onDeleteSpatialUnits', datasetsToDelete);
+    }
   }
 
   onClickEditMetadata(spatialUnitDataset: any): void {
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.css b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.css
new file mode 100644
index 000000000..944205ba9
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.css
@@ -0,0 +1,373 @@
+/* Loading overlay */
+.loading-overlay-admin-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1050;
+}
+
+.loading-overlay-admin-panel .spinner-border {
+  width: 3rem;
+  height: 3rem;
+}
+
+/* Modal header */
+.modal-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  padding: 1rem 1.5rem;
+}
+
+.modal-header .modal-title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: #343a40;
+}
+
+.modal-header .btn-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #6c757d;
+  cursor: pointer;
+}
+
+.modal-header .btn-close:hover {
+  color: #343a40;
+}
+
+/* Modal body */
+.modal-body {
+  padding: 1.5rem;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+/* Cards */
+.card {
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.card-header {
+  padding: 0.75rem 1rem;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.card-body {
+  padding: 1rem;
+}
+
+.card.border-success {
+  border-color: #198754 !important;
+}
+
+.card.border-danger {
+  border-color: #dc3545 !important;
+}
+
+.bg-success {
+  background-color: #198754 !important;
+}
+
+.bg-danger {
+  background-color: #dc3545 !important;
+}
+
+.bg-light {
+  background-color: #f8f9fa !important;
+}
+
+.text-white {
+  color: #fff !important;
+}
+
+.text-muted {
+  color: #6c757d !important;
+}
+
+.text-danger {
+  color: #dc3545 !important;
+}
+
+.text-success {
+  color: #198754 !important;
+}
+
+/* Lists */
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-unstyled li {
+  margin-bottom: 0.5rem;
+}
+
+/* Spacing utilities */
+.mb-0 { margin-bottom: 0 !important; }
+.mb-1 { margin-bottom: 0.25rem !important; }
+.mb-2 { margin-bottom: 0.5rem !important; }
+.mb-3 { margin-bottom: 1rem !important; }
+.mt-1 { margin-top: 0.25rem !important; }
+.mt-2 { margin-top: 0.5rem !important; }
+.mt-3 { margin-top: 1rem !important; }
+.me-2 { margin-right: 0.5rem !important; }
+
+/* Flexbox utilities */
+.d-flex {
+  display: flex !important;
+}
+
+.d-none {
+  display: none !important;
+}
+
+.align-items-start {
+  align-items: flex-start !important;
+}
+
+.flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+/* Text utilities */
+.text-center {
+  text-align: center !important;
+}
+
+.small {
+  font-size: 0.875rem;
+}
+
+/* Button styles */
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.btn:hover {
+  text-decoration: none;
+}
+
+.btn:focus,
+.btn.focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.btn-secondary {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+
+.btn-secondary:hover {
+  color: #fff;
+  background-color: #545b62;
+  border-color: #545b62;
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+
+.btn-danger:hover {
+  color: #fff;
+  background-color: #c82333;
+  border-color: #c82333;
+}
+
+.btn-success {
+  color: #fff;
+  background-color: #28a745;
+  border-color: #28a745;
+}
+
+.btn-success:hover {
+  color: #fff;
+  background-color: #218838;
+  border-color: #218838;
+}
+
+.btn:disabled,
+.btn.disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+/* Alert styles */
+.alert {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+}
+
+.alert-success {
+  color: #155724;
+  background-color: #d4edda;
+  border-color: #c3e6cb;
+}
+
+.alert-danger {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+}
+
+.alert-warning {
+  color: #856404;
+  background-color: #fff3cd;
+  border-color: #ffeaa7;
+}
+
+.alert-dismissible {
+  padding-right: 4rem;
+}
+
+.alert-dismissible .btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.75rem 1.25rem;
+  color: inherit;
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.alert-dismissible .btn-close:hover {
+  opacity: 0.75;
+}
+
+/* Spinner */
+.spinner-border {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: text-bottom;
+  border: 0.25em solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spinner-border 0.75s linear infinite;
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner-border.text-primary {
+  color: #007bff;
+}
+
+/* Visually hidden utility */
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+/* Fade animation */
+.fade {
+  transition: opacity 0.15s linear;
+}
+
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.show {
+  opacity: 1;
+}
+
+/* Delete confirmation styling */
+.modal-body h4 {
+  color: #dc3545;
+  font-weight: 600;
+}
+
+.modal-body p {
+  color: #6c757d;
+  font-size: 0.95rem;
+  margin-bottom: 1.5rem;
+}
+
+/* Custom styling for delete items */
+.delete-item {
+  background-color: #fff5f5;
+  border: 1px solid #fed7d7;
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.delete-item:hover {
+  background-color: #fef2f2;
+}
+
+/* Error details styling */
+.error-details {
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  font-family: 'Courier New', monospace;
+  font-size: 0.8rem;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .modal-body {
+    padding: 1rem;
+  }
+  
+  .card-header,
+  .card-body {
+    padding: 0.75rem;
+  }
+  
+  .btn {
+    font-size: 0.875rem;
+    padding: 0.25rem 0.5rem;
+  }
+  
+  .small {
+    font-size: 0.75rem;
+  }
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.html
new file mode 100644
index 000000000..20204da87
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.html
@@ -0,0 +1,141 @@
+

+  
Raumebenen löschen

+  
+

+
+

+  
+  

+    

+      
+    

+  

+
+  
+  
+
+  
+  
+
+  
+  

+    
Sollen die folgenden Raumebenen wirklich gelöscht werden?

+
+    
Dabei werden auch sämtliche Indikatoren-Datensätze der angezeigten Raumebenen dauerhaft aus dem System entfernt.

+
+    
+    

+      

+        

+          
Zu löschende Raumebenen ({{ datasetsToDelete.length }})

+        

+        

+          
    
+            
  • 
+              
+              {{ dataset.spatialUnitLevel }}
+              
    ID: {{ dataset.spatialUnitId }}
    
+            
    • 
+          

+        

+      

+    

+
+    
+    

+      
+      Kein Datensatz zum Löschen markiert. Mindestens ein Datensatz muss markiert werden.
+    

+
+    
+    

+      

+        

+          

+            
+            Erfolgreich gelöscht ({{ successfullyDeletedDatasets.length }})
+          

+        

+        

+          
    
+            
  • 
+              
+              {{ dataset.spatialUnitLevel }}
+            
    • 
+          

+        

+      

+    

+
+    
+    

+      

+        

+          

+            
+            Fehler beim Löschen ({{ failedDatasetsAndErrors.length }})
+          

+        

+        

+          

+            

+              
+              

+                {{ failedEntry[0].spatialUnitLevel }}
+                
ID: {{ failedEntry[0].spatialUnitId }}

+                

+              

+            

+          

+        

+      

+    

+  

+

+
+

+  
+  
+  
+
+  
+
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.ts
new file mode 100644
index 000000000..2590736b2
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.ts
@@ -0,0 +1,177 @@
+import { Component, OnInit, OnDestroy, Inject, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { HttpClient } from '@angular/common/http';
+import { Subscription, forkJoin } from 'rxjs';
+
+declare const $: any;
+declare const __env: any;
+
+@Component({
+  selector: 'spatial-unit-delete-modal-new',
+  templateUrl: './spatial-unit-delete-modal.component.html',
+  styleUrls: ['./spatial-unit-delete-modal.component.css']
+})
+export class SpatialUnitDeleteModalComponent implements OnInit, OnDestroy {
+  @Input() datasetsToDelete: any[] = [];
+
+  loadingData = false;
+  errorMessage = '';
+  successMessage = '';
+  
+  successfullyDeletedDatasets: any[] = [];
+  failedDatasetsAndErrors: any[] = [];
+
+  // Subscriptions
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
+    private http: HttpClient,
+    private broadcastService: BroadcastService
+  ) {
+    console.log('SpatialUnitDeleteModalComponent constructor initialized');
+  }
+
+  ngOnInit(): void {
+    this.setupEventListeners();
+    this.resetForm();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  private setupEventListeners(): void {
+    // Setup broadcast listeners
+    const broadcastSubscription = this.broadcastService.currentBroadcastMsg.subscribe(broadcastMsg => {
+      if (broadcastMsg && broadcastMsg.msg === 'onDeleteSpatialUnits') {
+        const datasets = Array.isArray(broadcastMsg.values) ? broadcastMsg.values : [broadcastMsg.values];
+        this.onDeleteSpatialUnits(datasets);
+      }
+    });
+
+    this.subscriptions.push(broadcastSubscription);
+  }
+
+  onDeleteSpatialUnits(datasets: any[]): void {
+    this.loadingData = true;
+    this.datasetsToDelete = datasets;
+    this.resetForm();
+    
+    setTimeout(() => {
+      this.loadingData = false;
+    }, 100);
+  }
+
+  resetForm(): void {
+    this.successfullyDeletedDatasets = [];
+    this.failedDatasetsAndErrors = [];
+    this.errorMessage = '';
+    this.successMessage = '';
+  }
+
+  async deleteSpatialUnits(): Promise {
+    this.loadingData = true;
+    this.resetForm();
+
+    const deleteRequests = this.datasetsToDelete.map(dataset => 
+      this.getDeleteDatasetRequest(dataset)
+    );
+
+    try {
+      await Promise.allSettled(deleteRequests);
+
+      if (this.failedDatasetsAndErrors.length > 0) {
+        this.errorMessage = 'Einige Raumebenen konnten nicht gelöscht werden.';
+      }
+
+      if (this.successfullyDeletedDatasets.length > 0) {
+        this.successMessage = `${this.successfullyDeletedDatasets.length} Raumebene(n) erfolgreich gelöscht.`;
+
+        // Fetch indicator metadata again as spatial units were deleted
+        await this.kommonitorDataExchangeService.fetchIndicatorsMetadata(
+          this.kommonitorDataExchangeService.currentKeycloakLoginRoles
+        );
+
+        // Refresh spatial unit overview table
+        const deletedIds = this.successfullyDeletedDatasets.map(dataset => dataset.spatialUnitId);
+        this.broadcastService.broadcast('refreshSpatialUnitOverviewTable', ['delete', deletedIds]);
+
+        // Refresh all admin dashboard diagrams due to modified metadata
+        setTimeout(() => {
+          this.broadcastService.broadcast('refreshAdminDashboardDiagrams');
+        }, 500);
+      }
+
+      this.loadingData = false;
+
+      // Auto-close modal after successful deletion
+      if (this.successfullyDeletedDatasets.length > 0 && this.failedDatasetsAndErrors.length === 0) {
+        setTimeout(() => {
+          this.activeModal.close({ 
+            action: 'deleted', 
+            deletedDatasets: this.successfullyDeletedDatasets 
+          });
+        }, 2000);
+      }
+
+    } catch (error) {
+      console.error('Error during bulk deletion:', error);
+      this.errorMessage = 'Ein unerwarteter Fehler ist aufgetreten.';
+      this.loadingData = false;
+    }
+  }
+
+  private async getDeleteDatasetRequest(dataset: any): Promise {
+    const url = `${this.kommonitorDataExchangeService.baseUrlToKomMonitorDataAPI}/spatial-units/${dataset.spatialUnitId}`;
+
+    try {
+      await this.http.delete(url).toPromise();
+      
+      // Add to successful deletions
+      this.successfullyDeletedDatasets.push(dataset);
+
+      // Remove from available spatial units
+      const index = this.kommonitorDataExchangeService.availableSpatialUnits.findIndex(
+        (spatialUnit: any) => spatialUnit.spatialUnitId === dataset.spatialUnitId
+      );
+
+      if (index > -1) {
+        this.kommonitorDataExchangeService.availableSpatialUnits.splice(index, 1);
+      }
+
+    } catch (error) {
+      console.error(`Failed to delete spatial unit ${dataset.spatialUnitLevel}:`, error);
+      
+      const errorMessage = error && (error as any).error ? 
+        this.kommonitorDataExchangeService.syntaxHighlightJSON((error as any).error) :
+        this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+
+      this.failedDatasetsAndErrors.push([dataset, errorMessage]);
+    }
+  }
+
+  hideSuccessAlert(): void {
+    this.successMessage = '';
+  }
+
+  hideErrorAlert(): void {
+    this.errorMessage = '';
+  }
+
+  // Modal control methods
+  closeModal(): void {
+    this.activeModal.dismiss('cancel');
+  }
+
+  // Helper methods
+  get hasValidDatasets(): boolean {
+    return this.datasetsToDelete && this.datasetsToDelete.length > 0;
+  }
+
+  get canDelete(): boolean {
+    return this.hasValidDatasets && !this.loadingData;
+  }
+} 
\ No newline at end of file

From e5934a1ecd86d84c0e7f9d021492ab45299471e3 Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Sun, 6 Jul 2025 21:46:57 +0530
Subject: [PATCH 006/120] migrate spatial edit user modal

---
 app/app.module.ts                             |   7 +
 ...dmin-spatial-units-management.component.ts |  45 +++
 ...l-unit-edit-user-roles-modal.component.css | 341 ++++++++++++++++++
 ...-unit-edit-user-roles-modal.component.html | 179 +++++++++
 ...al-unit-edit-user-roles-modal.component.ts | 330 +++++++++++++++++
 ...monitor-data-grid-helper-service.module.js |  22 +-
 6 files changed, 919 insertions(+), 5 deletions(-)
 create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component.css
 create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component.html
 create mode 100644 app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index 77ab9c350..b5aec750b 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -78,6 +78,7 @@ import { AdminSpatialUnitsManagementComponent } from './components/ngComponents/
 import { SpatialUnitAddModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component';
 import { SpatialUnitEditMetadataModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component';
 import { SpatialUnitEditFeaturesModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component';
+import { SpatialUnitEditUserRolesModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component';
 import { SpatialUnitDeleteModalComponent } from './components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component';
 
 
@@ -167,6 +168,7 @@ declare var MathJax;
     SpatialUnitAddModalComponent,
     SpatialUnitEditMetadataModalComponent,
     SpatialUnitEditFeaturesModalComponent,
+    SpatialUnitEditUserRolesModalComponent,
     SpatialUnitDeleteModalComponent
   ],
   schemas: [
@@ -278,6 +280,11 @@ export class AppModule implements DoBootstrap {
         component: SpatialUnitEditFeaturesModalComponent
       }) as angular.IDirectiveFactory);
 
+    angular.module('kommonitorAdmin')
+      .directive('spatialUnitEditUserRolesModalNew', downgradeComponent({
+        component: SpatialUnitEditUserRolesModalComponent
+      }) as angular.IDirectiveFactory);
+
     angular.module('kommonitorAdmin')
       .directive('spatialUnitDeleteModalNew', downgradeComponent({
         component: SpatialUnitDeleteModalComponent
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
index ff11d5357..35e550a5f 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
@@ -7,6 +7,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { SpatialUnitAddModalComponent } from './spatialUnitAddModal/spatial-unit-add-modal.component';
 import { SpatialUnitEditMetadataModalComponent } from './spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component';
 import { SpatialUnitEditFeaturesModalComponent } from './spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component';
+import { SpatialUnitEditUserRolesModalComponent } from './spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component';
 import { SpatialUnitDeleteModalComponent } from './spatialUnitDeleteModal/spatial-unit-delete-modal.component';
 declare const agGrid: any;
 declare const $: any;
@@ -343,6 +344,50 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
     }
   }
 
+  onClickEditUserRoles(spatialUnitDataset: any): void {
+    this.openEditUserRolesModal(spatialUnitDataset);
+  }
+
+  openEditUserRolesModal(spatialUnitDataset: any) {
+    console.log('Opening edit spatial unit user roles modal for:', spatialUnitDataset);
+    
+    try {
+      // Open modal using NgbModal
+      const modalRef = this.modalService.open(SpatialUnitEditUserRolesModalComponent, {
+        size: 'xl',
+        backdrop: 'static',
+        keyboard: false,
+        container: 'body',
+        animation: false,
+        windowClass: 'spatial-unit-edit-user-roles-modal'
+      });
+      
+      console.log('Edit user roles modal reference created:', modalRef);
+      
+      // Pass the spatial unit dataset to the modal
+      modalRef.componentInstance.currentSpatialUnitDataset = spatialUnitDataset;
+      modalRef.componentInstance.resetForm();
+      
+      // Handle modal result
+      modalRef.result.then(
+        (result) => {
+          console.log('Edit user roles modal closed with result:', result);
+          if (result && result.action === 'updated') {
+            // Refresh the spatial units table
+            this.refreshSpatialUnitOverviewTable('edit', spatialUnitDataset.spatialUnitId);
+          }
+        },
+        (reason) => {
+          console.log('Edit user roles modal dismissed with reason:', reason);
+        }
+      );
+    } catch (error: any) {
+      console.error('Error opening edit user roles modal:', error);
+      // Fallback: broadcast event for old AngularJS modal
+      this.broadcastService.broadcast('onEditSpatialUnitUserRoles', spatialUnitDataset);
+    }
+  }
+
   checkCreatePermission(): boolean {
     return this.kommonitorDataExchangeService.checkCreatePermission();
   }
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component.css b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component.css
new file mode 100644
index 000000000..50405cb54
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component.css
@@ -0,0 +1,341 @@
+/* Modal styling */
+.modal-header {
+  border-bottom: 1px solid #dee2e6;
+  padding: 1rem;
+  background-color: #f8f9fa;
+}
+
+.modal-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0;
+  color: #333;
+}
+
+.modal-body {
+  padding: 1.5rem;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.modal-footer {
+  border-top: 1px solid #dee2e6;
+  padding: 1rem;
+  background-color: #f8f9fa;
+}
+
+/* Loading overlay */
+.loading-overlay-admin-panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.spinner-border {
+  width: 3rem;
+  height: 3rem;
+  border-width: 0.3rem;
+}
+
+/* Progress bar styling */
+#progressbar {
+  margin-bottom: 30px;
+  overflow: hidden;
+  color: lightgrey;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  width: 100%;
+}
+
+#progressbar li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  position: relative;
+  padding: 20px;
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  color: #6c757d;
+  font-weight: 500;
+  text-align: center;
+  min-height: 60px;
+  flex: 1;
+}
+
+#progressbar li:first-child {
+  border-radius: 4px 0 0 4px;
+}
+
+#progressbar li:last-child {
+  border-radius: 0 4px 4px 0;
+}
+
+#progressbar li.active {
+  background-color: #007bff;
+  color: white;
+  border-color: #007bff;
+}
+
+#progressbar li.active:before {
+  opacity: 1;
+}
+
+#progressbar li:before {
+  content: counter(step);
+  counter-increment: step;
+  width: 20px;
+  line-height: 20px;
+  display: block;
+  font-size: 10px;
+  color: #333;
+  background: white;
+  border-radius: 3px;
+  margin: 0 auto 5px auto;
+}
+
+/* Form styling */
+.multiStepForm {
+  margin-bottom: 0;
+}
+
+fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+  min-height: 500px;
+}
+
+.fs-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: #333;
+  text-align: center;
+}
+
+.fs-subtitle {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 1.5rem;
+  color: #6c757d;
+  text-align: center;
+}
+
+/* Form controls */
+.form-control,
+.form-select {
+  border-radius: 0.375rem;
+  border: 1px solid #ced4da;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-control:focus,
+.form-select:focus {
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.form-check-input:checked {
+  background-color: #007bff;
+  border-color: #007bff;
+}
+
+.form-check-input:focus {
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+/* Switch styling */
+.form-switch .form-check-input {
+  width: 2em;
+  margin-left: -2.5em;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2855, 63, 71, 0.75%29'/%3e%3c/svg%3e");
+  background-position: left center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  border-radius: 1em;
+  transition: background-position 0.15s ease-in-out;
+}
+
+.form-switch .form-check-input:checked {
+  background-position: right center;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1.0%29'/%3e%3c/svg%3e");
+}
+
+/* Button styling */
+.action-button {
+  background-color: #007bff;
+  border: none;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease-in-out;
+  margin-top: 1rem;
+}
+
+.action-button:hover {
+  background-color: #0056b3;
+}
+
+.action-button-previous {
+  background-color: #6c757d;
+  border: none;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease-in-out;
+  margin-top: 1rem;
+}
+
+.action-button-previous:hover {
+  background-color: #545b62;
+}
+
+/* Alert styling */
+.alert {
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  position: relative;
+}
+
+.alert-info {
+  color: #0c5460;
+  background-color: #d1ecf1;
+  border-color: #bee5eb;
+}
+
+.alert-danger {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+}
+
+.alert-success {
+  color: #155724;
+  background-color: #d4edda;
+  border-color: #c3e6cb;
+}
+
+.alert-dismissible .btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  padding: 1.25rem 1rem;
+}
+
+/* Vertical alignment utility */
+.vertical-align {
+  display: flex;
+  align-items: center;
+}
+
+.margin-right {
+  margin-right: 0.5rem;
+}
+
+/* Data grid styling */
+#spatialUnitEditRoleManagementTable {
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  overflow: hidden;
+}
+
+/* Input group styling */
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+}
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #6c757d;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  border-radius: 0.375rem 0 0 0.375rem;
+}
+
+.input-group > .form-control {
+  position: relative;
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 0;
+  border-radius: 0 0.375rem 0.375rem 0;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .modal-body {
+    padding: 1rem;
+  }
+  
+  #progressbar li {
+    font-size: 11px;
+    padding: 15px;
+  }
+  
+  .fs-title {
+    font-size: 1.25rem;
+  }
+  
+  .fs-subtitle {
+    font-size: 0.9rem;
+  }
+}
+
+/* Pre tag styling for error messages */
+pre {
+  background-color: #f8f9fa;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  font-size: 0.875rem;
+  color: #495057;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* Form text helper */
+.form-text {
+  margin-top: 0.25rem;
+  font-size: 0.875em;
+  color: #6c757d;
+}
+
+.text-danger {
+  color: #dc3545 !important;
+}
+
+/* Loading state for buttons */
+.btn:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component.html
new file mode 100644
index 000000000..38faa6693
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component.html
@@ -0,0 +1,179 @@
+

+  

+    Zugriffsschutz und Eigentümerschaft für Raumeinheit 
+    {{currentSpatialUnitDataset?.spatialUnitLevel}} editieren
+  

+  
+

+
+

+  
+  

+    
+  

+
+  
+  

+    

+      

+        
+        
+        

+          
    
+            
  • Zugriffsschutz
    • 
+            
  • Eigentümerschaft
    • 
+          

+        

+
+        
+        

+          
Zugriffsschutz

+          
Vergabe der Zugriffsrechte auf Datensatz-Metadaten und -Features pro Organisationseinheit

+          
+          
Zugriffsrechte (lesen, editieren) müssen explizit vergeben werden

+          
+          

+            

+              

+                
+                

+                  
+                

+              

+            

+            
+            

+              
+              

+                
+              

+              

+                
Öffentlich freigegebene Datensätze können ohne Login abgerufen werden.

+              

+            

+            
+            

+              

+            

+            
+            

+              

+                Als Eigentümer-Organisation des Datensatzes können Sie Lese- und Editier-Rechte an die eigene und weitere Organisationseinheiten vergeben.
+              

+            

+          

+          
+          
+        

+
+        
+        

+          
Eigentümerschaft eines Datensatzes

+          
Übertragen der Eigentümerschaft von Datensätzen mit allen dazugehörigen Rechten

+          
+          

+            Bitte beachten Sie, dass Sie beim Übertragen einer Eigentümerschaft einer Resource unter Umständen jegliche Rechte eben dieser verlieren.

+            Die Rechte werden unwiderruflich und sofort an den neuen Eigentümer übertragen.
+          

+          
+          

+            

+            

+              
+              

+                
+                  
+                
+                
+              

+              
+              
+              
+              
+            

+            

+              
+              
{{getCurrentOwnerName()}}

+              

+                
ACHTUNG: Sie sind dabei, die Eigentümerschaft an diesem Datensatz zu ändern.

+              

+            

+          

+          
+          
+        

+
+      

+    

+  

+

+
+

+  
+  
+  
+

+
+
+

+  
+  
 Zugriffsschutz und Eigentümerschaft aktualisiert

+  Erfolgreiche Aktualisierung des Zugriffsschutzes und der Eigentümerschaft für die Raumeinheit '{{currentSpatialUnitDataset?.spatialUnitLevel}}'
+

+
+
+

+  
+  
 Aktualisierung gescheitert

+  Bei der Aktualisierung des Zugriffsschutzes und der Eigentümerschaft ist ein Fehler aufgetreten. Fehlermeldung:
+  

+  

+
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component.ts
new file mode 100644
index 000000000..baf1d293d
--- /dev/null
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component.ts
@@ -0,0 +1,330 @@
+import { Component, Inject, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { HttpClient } from '@angular/common/http';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'spatial-unit-edit-user-roles-modal',
+  templateUrl: './spatial-unit-edit-user-roles-modal.component.html',
+  styleUrls: ['./spatial-unit-edit-user-roles-modal.component.css']
+})
+export class SpatialUnitEditUserRolesModalComponent implements OnInit, OnDestroy, AfterViewInit {
+  @ViewChild('progressbar', { static: true }) progressBar!: ElementRef;
+
+  currentSpatialUnitDataset: any = null;
+  roleManagementTableOptions: any = undefined;
+  
+  successMessagePart: string = '';
+  errorMessagePart: string = '';
+  
+  ownerOrgFilter: string = '';
+  ownerOrganization: string = '';
+  activeRolesOnly: boolean = true;
+  permissions: any[] = [];
+  resourcesCreatorRights: any[] = [];
+  
+  loadingData: boolean = false;
+  currentStep: number = 1;
+  totalSteps: number = 2;
+  
+  private subscription: Subscription = new Subscription();
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
+    @Inject('kommonitorDataGridHelperService') public kommonitorDataGridHelperService: any,
+    @Inject('kommonitorMultiStepFormHelperService') public kommonitorMultiStepFormHelperService: any,
+    @Inject('BroadcastService') public broadcastService: any,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit(): void {
+    this.prepareCreatorList();
+    this.resetForm();
+    this.setupBroadcastSubscription();
+  }
+
+  ngAfterViewInit(): void {
+    this.updateProgressBar();
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+  private setupBroadcastSubscription(): void {
+    this.subscription.add(
+      this.broadcastService.currentBroadcastMsg.subscribe((message: any) => {
+        if (message.key === 'availableRolesUpdate') {
+          this.refreshRoleManagementTable();
+        }
+      })
+    );
+  }
+
+  prepareCreatorList(): void {
+    if (this.kommonitorDataExchangeService.currentKomMonitorLoginRoleNames.length > 0) {
+      const creatorRights: string[] = [];
+      const creatorRightsChildren: string[] = [];
+      
+      this.kommonitorDataExchangeService.currentKomMonitorLoginRoleNames.forEach((roles: string) => {
+        const key = roles.split('.')[0];
+        const role = roles.split('.')[1];
+
+        // case unit-resources-creator
+        if (role === 'unit-resources-creator' && !this.resourcesCreatorRights.includes(key)) {
+          creatorRights.push(key);
+        }
+
+        // case client-resources-creator, gather unit-ids first, then fetch all unit-data
+        if (role === 'client-resources-creator' && !creatorRightsChildren.includes(key)) {
+          creatorRightsChildren.push(key);
+        }
+      });
+
+      // gather all children
+      this.gatherCreatorRightsChildren(creatorRights, creatorRightsChildren);
+
+      this.resourcesCreatorRights = this.kommonitorDataExchangeService.accessControl.filter(
+        (elem: any) => creatorRights.includes(elem.name)
+      );
+    }
+  }
+
+  private gatherCreatorRightsChildren(creatorRights: string[], creatorRightsChildren: string[]): void {
+    if (creatorRightsChildren.length > 0) {
+      this.kommonitorDataExchangeService.accessControl
+        .filter((elem: any) => creatorRightsChildren.includes(elem.name))
+        .flatMap((res: any) => res.children)
+        .forEach((child: any) => {
+          this.kommonitorDataExchangeService.accessControl
+            .filter((elem: any) => elem.organizationalUnitId === child)
+            .forEach((childData: any) => {
+              creatorRights.push(childData.name);
+              this.gatherCreatorRightsChildren(creatorRights, [childData.name]);
+            });
+        });
+    }
+  }
+
+  refreshRoleManagementTable(): void {
+    this.permissions = this.currentSpatialUnitDataset ? this.currentSpatialUnitDataset.permissions : [];
+
+    // set datasetOwner to disable checkboxes for owned datasets in permissions-table
+    this.kommonitorDataExchangeService.accessControl.forEach((item: any) => {
+      if (this.currentSpatialUnitDataset) {
+        if (item.organizationalUnitId === this.currentSpatialUnitDataset.ownerId) {
+          item.datasetOwner = true;
+        } else {
+          item.datasetOwner = false;
+        }
+      }
+    });
+
+    if (this.permissions.length === 0) {
+      this.activeRolesOnly = false;
+    }
+
+    let access = this.kommonitorDataExchangeService.accessControl;
+    if (this.permissions.length > 0 && this.activeRolesOnly) {
+      access = this.kommonitorDataExchangeService.accessControl.filter((unit: any) => {
+        return unit.permissions.filter((unitPermission: any) => 
+          this.permissions.includes(unitPermission.permissionId)
+        ).length > 0;
+      });
+    }
+
+    this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+      'spatialUnitEditRoleManagementTable',
+      this.roleManagementTableOptions,
+      access,
+      this.permissions,
+      true
+    );
+  }
+
+  onActiveRolesOnlyChange(): void {
+    this.refreshRoleManagementTable();
+  }
+
+  onChangeOwner(ownerOrganization: string): void {
+    this.ownerOrganization = ownerOrganization;
+    console.log('Target creator role selected to be ', this.ownerOrganization);
+    this.refreshRoles(this.ownerOrganization);
+  }
+
+  private refreshRoles(orgUnitId: string): void {
+    const permissionIds_ownerUnit = orgUnitId ? 
+      this.kommonitorDataExchangeService.getAccessControlById(orgUnitId).permissions
+        .filter((permission: any) => permission.permissionLevel === 'viewer' || permission.permissionLevel === 'editor')
+        .map((permission: any) => permission.permissionId) : [];
+
+    // set datasetOwner to disable checkboxes for owned datasets in permissions-table
+    this.kommonitorDataExchangeService.accessControl.forEach((item: any) => {
+      if (item.organizationalUnitId === orgUnitId) {
+        item.datasetOwner = true;
+      } else {
+        item.datasetOwner = false;
+      }
+    });
+
+    this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+      'spatialUnitEditRoleManagementTable',
+      this.roleManagementTableOptions,
+      this.kommonitorDataExchangeService.accessControl,
+      permissionIds_ownerUnit,
+      true
+    );
+  }
+
+  resetForm(): void {
+    if (this.currentSpatialUnitDataset) {
+      this.ownerOrganization = this.currentSpatialUnitDataset.ownerId;
+      this.refreshRoleManagementTable();
+    }
+    
+    this.ownerOrgFilter = '';
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+    this.currentStep = 1;
+    this.updateProgressBar();
+  }
+
+  nextStep(): void {
+    if (this.currentStep < this.totalSteps) {
+      this.currentStep++;
+      this.updateProgressBar();
+    }
+  }
+
+  previousStep(): void {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+      this.updateProgressBar();
+    }
+  }
+
+  private updateProgressBar(): void {
+    if (this.progressBar && this.progressBar.nativeElement) {
+      const steps = this.progressBar.nativeElement.querySelectorAll('li');
+      steps.forEach((step: any, index: number) => {
+        if (index < this.currentStep) {
+          step.classList.add('active');
+        } else {
+          step.classList.remove('active');
+        }
+      });
+    }
+  }
+
+  async editSpatialUnitUserRoles(): Promise {
+    if (this.ownerOrganization && this.ownerOrganization !== this.currentSpatialUnitDataset.ownerId) {
+      const confirmMessage = 'Sind Sie sicher, dass Sie den Eigentümerschaft an dieser Resource endgültig und unwiderruflich übertragen und damit abgeben wollen?';
+      if (!window.confirm(confirmMessage)) {
+        return;
+      }
+    }
+
+    await this.putUserRoles();
+    await this.putOwnership();
+  }
+
+  private async putUserRoles(): Promise {
+    try {
+      this.loadingData = true;
+      this.errorMessagePart = '';
+
+      const putBody = {
+        permissions: this.kommonitorDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions),
+        isPublic: this.currentSpatialUnitDataset.isPublic
+      };
+
+      const response = await this.http.put(
+        `${this.kommonitorDataExchangeService.baseUrlToKomMonitorDataAPI}/spatial-units/${this.currentSpatialUnitDataset.spatialUnitId}/permissions`,
+        putBody,
+        { headers: { 'Content-Type': 'application/json' } }
+      ).toPromise();
+
+      this.successMessagePart = this.currentSpatialUnitDataset.spatialUnitLevel;
+      this.broadcastService.broadcast('refreshSpatialUnitOverviewTable', ['edit', this.currentSpatialUnitDataset.spatialUnitId]);
+      
+    } catch (error: any) {
+      this.errorMessagePart = 'Fehler beim Aktualisieren der Zugriffsrechte. Fehler lautet: \n\n';
+      if (error.error) {
+        this.errorMessagePart += this.kommonitorDataExchangeService.syntaxHighlightJSON(error.error);
+      } else {
+        this.errorMessagePart += this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+      }
+    } finally {
+      this.loadingData = false;
+    }
+  }
+
+  private async putOwnership(): Promise {
+    try {
+      this.loadingData = true;
+      this.errorMessagePart = '';
+
+      const putBody = {
+        ownerId: this.ownerOrganization || this.currentSpatialUnitDataset.ownerId
+      };
+
+      const response = await this.http.put(
+        `${this.kommonitorDataExchangeService.baseUrlToKomMonitorDataAPI}/spatial-units/${this.currentSpatialUnitDataset.spatialUnitId}/ownership`,
+        putBody,
+        { headers: { 'Content-Type': 'application/json' } }
+      ).toPromise();
+
+      this.successMessagePart = this.currentSpatialUnitDataset.spatialUnitLevel;
+      this.broadcastService.broadcast('refreshSpatialUnitOverviewTable', ['edit', this.currentSpatialUnitDataset.spatialUnitId]);
+      
+    } catch (error: any) {
+      this.errorMessagePart = 'Fehler beim Aktualisieren der Eigentümerschaft. Fehler lautet: \n\n';
+      if (error.error) {
+        this.errorMessagePart += this.kommonitorDataExchangeService.syntaxHighlightJSON(error.error);
+      } else {
+        this.errorMessagePart += this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+      }
+    } finally {
+      this.loadingData = false;
+    }
+  }
+
+  getCurrentOwnerName(): string {
+    if (this.currentSpatialUnitDataset && this.currentSpatialUnitDataset.ownerId) {
+      const owner = this.kommonitorDataExchangeService.getAccessControlById(this.currentSpatialUnitDataset.ownerId);
+      return owner ? owner.name : '';
+    }
+    return '';
+  }
+
+  isOwnershipChanging(): boolean {
+    return !!(this.ownerOrganization && this.ownerOrganization !== this.currentSpatialUnitDataset.ownerId);
+  }
+
+  getFilteredOrganizations(): any[] {
+    if (!this.ownerOrgFilter) {
+      return this.kommonitorDataExchangeService.checkAdminPermission() ? 
+        this.kommonitorDataExchangeService.accessControl : this.resourcesCreatorRights;
+    }
+    
+    const orgs = this.kommonitorDataExchangeService.checkAdminPermission() ? 
+      this.kommonitorDataExchangeService.accessControl : this.resourcesCreatorRights;
+    
+    return orgs.filter((org: any) => 
+      org.name.toLowerCase().includes(this.ownerOrgFilter.toLowerCase())
+    );
+  }
+
+  hideSuccessAlert(): void {
+    this.successMessagePart = '';
+  }
+
+  hideErrorAlert(): void {
+    this.errorMessagePart = '';
+  }
+
+  onCancel(): void {
+    this.activeModal.dismiss();
+  }
+} 
\ No newline at end of file
diff --git a/app/util/genericServices/kommonitorDataGridHelperService/kommonitor-data-grid-helper-service.module.js b/app/util/genericServices/kommonitorDataGridHelperService/kommonitor-data-grid-helper-service.module.js
index 56c2632e6..4e89dd718 100644
--- a/app/util/genericServices/kommonitorDataGridHelperService/kommonitor-data-grid-helper-service.module.js
+++ b/app/util/genericServices/kommonitorDataGridHelperService/kommonitor-data-grid-helper-service.module.js
@@ -1338,16 +1338,28 @@ angular
         $(".spatialUnitEditUserRolesBtn").off();
         $(".spatialUnitEditUserRolesBtn").on("click", function (event) {
           // ensure that only the target button gets clicked
-          // manually open modal
           event.stopPropagation();
-          let modalId = document.getElementById(this.id).getAttribute("data-target");
-          $(modalId).modal('show');
           
           let spatialUnitId = this.id.split("_")[3];
-
           let spatialUnitMetadata = kommonitorDataExchangeService.getSpatialUnitMetadataById(spatialUnitId);
 
-          $rootScope.$broadcast("onEditSpatialUnitUserRoles", spatialUnitMetadata);
+          // Try to use the new Angular component method first
+          try {
+            let angularComponent = angular.element(document.querySelector('admin-spatial-units-management-new')).controller('admin-spatial-units-management-new');
+            if (angularComponent && angularComponent.onClickEditUserRoles) {
+              angularComponent.onClickEditUserRoles(spatialUnitMetadata);
+            } else {
+              // Fallback to AngularJS broadcast
+              let modalId = document.getElementById(this.id).getAttribute("data-target");
+              $(modalId).modal('show');
+              $rootScope.$broadcast("onEditSpatialUnitUserRoles", spatialUnitMetadata);
+            }
+          } catch (error) {
+            // Fallback to AngularJS broadcast
+            let modalId = document.getElementById(this.id).getAttribute("data-target");
+            $(modalId).modal('show');
+            $rootScope.$broadcast("onEditSpatialUnitUserRoles", spatialUnitMetadata);
+          }
         });
 
         $(".spatialUnitDeleteBtn").off();

From bf6ca2ddf79ffa4f6775acd9c263641150349901 Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Tue, 8 Jul 2025 12:16:16 +0530
Subject: [PATCH 007/120] encapsulate services for admin spatial component

---
 ...in-spatial-units-management.component.html |  34 +-
 ...dmin-spatial-units-management.component.ts | 552 ++++++---------
 .../spatial-unit-delete-modal.component.css   | 436 +++++-------
 .../spatial-unit-delete-modal.component.html  | 167 ++---
 .../spatial-unit-delete-modal.component.ts    |   5 +-
 .../kommonitor-cache-helper.service.ts        | 117 ++++
 .../kommonitor-data-exchange.service.ts       | 133 ++++
 .../kommonitor-data-grid-helper.service.ts    | 640 ++++++++++++++++++
 8 files changed, 1336 insertions(+), 748 deletions(-)
 create mode 100644 app/services/adminSpatialUnit/kommonitor-cache-helper.service.ts
 create mode 100644 app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts
 create mode 100644 app/services/adminSpatialUnit/kommonitor-data-grid-helper.service.ts

diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html
index 8d4c63137..927a5e618 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html
@@ -6,6 +6,7 @@
     
   
 
+
   
   

     

@@ -23,7 +24,7 @@ 

           
         
       
-      
       
@@ -40,22 +41,31 @@ 

       | Your Page Content Here |
       -------------------------->
 
-    

-      

-        
Raumebenen

-      

-      
-      

+    

+      

+        
 
-        

-          
-          
	   
+        

+          

+            
Raumebenen

+          

+          
+          

 
+            

+              
+              
	   
+
+            

+          

+          
         

+        
+
       

-      
     

-    
 
   

   
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
index 35e550a5f..0918fa724 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
@@ -9,6 +9,9 @@ import { SpatialUnitEditMetadataModalComponent } from './spatialUnitEditMetadata
 import { SpatialUnitEditFeaturesModalComponent } from './spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component';
 import { SpatialUnitEditUserRolesModalComponent } from './spatialUnitEditUserRolesModal/spatial-unit-edit-user-roles-modal.component';
 import { SpatialUnitDeleteModalComponent } from './spatialUnitDeleteModal/spatial-unit-delete-modal.component';
+import { KommonitorDataExchangeService } from 'services/adminSpatialUnit/kommonitor-data-exchange.service';
+import { KommonitorCacheHelperService } from 'services/adminSpatialUnit/kommonitor-cache-helper.service';
+import { KommonitorDataGridHelperService } from 'services/adminSpatialUnit/kommonitor-data-grid-helper.service';
 declare const agGrid: any;
 declare const $: any;
 declare const __env: any;
@@ -21,414 +24,247 @@ declare const __env: any;
 export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
   @ViewChild('spatialUnitOverviewTable', { static: true }) spatialUnitOverviewTable!: ElementRef;
 
-  loadingData = true;
-  tableViewSwitcher = false;
-  gridApi: any;
-  gridColumnApi: any;
-  gridOptions: any;
-  kommonitorDataExchangeServiceInstance: any;
-
-  private subscription: Subscription | undefined;
-  private initializationTimeout: any;
+  public loadingData: boolean = true;
+  public initializationCompleted: boolean = false;
+  public tableViewSwitcher: boolean = false;
+  private subscriptions: Subscription[] = [];
 
   constructor(
-    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
-    @Inject('kommonitorCacheHelperService') public kommonitorCacheHelperService: any,
-    @Inject('kommonitorDataGridHelperService') public kommonitorDataGridHelperService: any,
-    private broadcastService: BroadcastService,
-    private ngZone: NgZone,
     @Inject(DOCUMENT) private document: Document,
+    private zone: NgZone,
+    private modalService: NgbModal,
+    private broadcastService: BroadcastService,
     private http: HttpClient,
-    private modalService: NgbModal
-  ) {
-    console.log('AdminSpatialUnitsManagementComponent constructor initialized');
-    this.kommonitorDataExchangeServiceInstance = this.kommonitorDataExchangeService;
-  }
+    public kommonitorDataExchangeService: KommonitorDataExchangeService,
+    private kommonitorCacheHelperService: KommonitorCacheHelperService,
+    private kommonitorDataGridHelperService: KommonitorDataGridHelperService
+  ) {}
 
   ngOnInit(): void {
-    console.log('AdminSpatialUnitsManagementComponent ngOnInit');
-    this.loadingData = true;
-    
-    // initialize any adminLTE box widgets
-    ($('.box') as any).boxWidget();
-    
-    this.setupBroadcastListeners();
+    this.initializeOrRefreshOverviewTable();
+    this.setupEventListeners();
     
-    // Check if data is already available and initialize immediately
-    this.checkDataAvailabilityAndInitialize();
+    // Add polling mechanism to check for data availability
+    this.startDataPolling();
     
-    // Fallback timeout in case no events are fired
-    this.initializationTimeout = setTimeout(() => {
-      console.log('Fallback: Initializing spatial units management after timeout');
-      this.checkDataAvailabilityAndInitialize();
-    }, 5000); // 5 second fallback
-  }
-
-  ngOnDestroy(): void {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
-    if (this.initializationTimeout) {
-      clearTimeout(this.initializationTimeout);
-    }
-  }
-
-  private checkDataAvailabilityAndInitialize(): void {
-    // Check if required data is available
-    if (this.isDataAvailable()) {
-      console.log('Data is available, initializing spatial units management');
-      this.initializeOrRefreshOverviewTable();
-      if (this.initializationTimeout) {
-        clearTimeout(this.initializationTimeout);
+    // Add a fallback timeout to prevent infinite loading
+    setTimeout(() => {
+      if (this.loadingData) {
+        this.initializeOrRefreshOverviewTable();
+        
+        // If still no data after fallback, stop loading anyway
+        if (!this.kommonitorDataExchangeService.availableSpatialUnits || this.kommonitorDataExchangeService.availableSpatialUnits.length === 0) {
+          this.loadingData = false;
+          this.initializationCompleted = true;
+        }
       }
-    } else {
-      console.log('Data not yet available, waiting for events...');
-    }
+    }, 3000); // 3 second timeout
   }
 
-  private isDataAvailable(): boolean {
-    return this.kommonitorDataExchangeService &&
-           this.kommonitorDataExchangeService.availableSpatialUnits &&
-           this.kommonitorDataExchangeService.availableSpatialUnits.length >= 0;
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
   }
 
-  private setupBroadcastListeners(): void {
-    this.subscription = this.broadcastService.currentBroadcastMsg.subscribe(broadcastMsg => {
-      if (broadcastMsg.msg === 'initialMetadataLoadingCompleted') {
-        console.log("Initial metadata loading completed");
-        if (this.initializationTimeout) {
-          clearTimeout(this.initializationTimeout);
-        }
-        setTimeout(() => {
+  private setupEventListeners(): void {
+    // Listen for the global metadata loading completion event
+    const sub = this.broadcastService.currentBroadcastMsg.subscribe(data => {
+      if (data.msg === 'initialMetadataLoadingCompleted') {
+        this.zone.run(() => {
           this.initializeOrRefreshOverviewTable();
-        }, 250);
-      } else if (broadcastMsg.msg === 'initialMetadataLoadingFailed') {
-        console.log("Metadata loading failed");
-        this.loadingData = false;
-        if (this.initializationTimeout) {
-          clearTimeout(this.initializationTimeout);
-        }
-      } else if (broadcastMsg.msg === 'refreshSpatialUnitOverviewTable') {
-        console.log("Refreshing spatial unit overview table");
-        this.loadingData = true;
-        const values = broadcastMsg.values as any[];
-        this.refreshSpatialUnitOverviewTable(values[0], values[1]);
+        });
+      }
+      // Handle grid button click events
+      else if (data.msg === 'onEditSpatialUnitMetadata') {
+        this.zone.run(() => {
+          this.onClickEditMetadata(data.values);
+        });
+      }
+      else if (data.msg === 'onEditSpatialUnitFeatures') {
+        this.zone.run(() => {
+          this.onClickEditFeatures(data.values);
+        });
+      }
+      else if (data.msg === 'onEditSpatialUnitUserRoles') {
+        this.zone.run(() => {
+          this.onClickEditUserRoles(data.values);
+        });
+      }
+      else if (data.msg === 'onDeleteSpatialUnits') {
+        this.zone.run(() => {
+          // Ensure data.values is an array for delete operation
+          const datasetsToDelete = Array.isArray(data.values) ? data.values : [data.values];
+          this.onClickDeleteSpatialUnits(datasetsToDelete);
+        });
       }
     });
+    this.subscriptions.push(sub);
   }
 
-  initializeOrRefreshOverviewTable(): void {
-    this.loadingData = true;
-    
-    this.kommonitorDataGridHelperService.buildDataGrid_spatialUnits(this.initSpatialUnits());
+  public initializeOrRefreshOverviewTable(): void {
+    const spatialUnits = this.kommonitorDataExchangeService.availableSpatialUnits;
     
-    setTimeout(() => {
+    if (spatialUnits && spatialUnits.length > 0) {
       this.loadingData = false;
-    });
-  }
-
-  initSpatialUnits(): any[] {
-    if (this.tableViewSwitcher) {
-      return this.kommonitorDataExchangeService.availableSpatialUnits.filter(
-        (e: any) => !(e.userPermissions.length === 1 && e.userPermissions.includes('viewer'))
-      );
+      this.initializationCompleted = true;
+      
+      // Use the new Angular service to build the data grid
+      this.kommonitorDataGridHelperService.buildDataGrid_spatialUnits(spatialUnits);
     } else {
-      return this.kommonitorDataExchangeService.availableSpatialUnits;
+      // Data not ready yet, keep loading
+      this.loadingData = true;
+      this.initializationCompleted = false;
     }
   }
 
-  onTableViewSwitch(): void {
-    this.initializeOrRefreshOverviewTable();
+  // Debug method to force stop loading
+  stopLoading(): void {
+    this.loadingData = false;
+    this.initializationCompleted = true;
   }
 
-  refreshSpatialUnitOverviewTable(crudType?: string, targetSpatialUnitId?: string | string[]): void {
-    if (!crudType || !targetSpatialUnitId) {
-      // refetch all metadata from spatial units to update table
-      this.kommonitorDataExchangeService.fetchSpatialUnitsMetadata(
-        this.kommonitorDataExchangeService.currentKeycloakLoginRoles
-      ).then((response: any) => {
-        this.initializeOrRefreshOverviewTable();
-        setTimeout(() => {
-          this.loadingData = false;
-        });
-      }, (error: any) => {
-        setTimeout(() => {
-          this.loadingData = false;
-        });
-      });
-    } else if (crudType && targetSpatialUnitId) {
-      if (crudType === 'add') {
-        this.kommonitorCacheHelperService.fetchSingleSpatialUnitMetadata(
-          targetSpatialUnitId as string, 
-          this.kommonitorDataExchangeService.currentKeycloakLoginRoles
-        ).then((data: any) => {
-          this.kommonitorDataExchangeService.addSingleSpatialUnitMetadata(data);
-          this.initializeOrRefreshOverviewTable();
-          setTimeout(() => {
-            this.loadingData = false;
-          });
-        }, (error: any) => {
-          setTimeout(() => {
-            this.loadingData = false;
-          });
-        });
-      } else if (crudType === 'edit') {
-        this.kommonitorCacheHelperService.fetchSingleSpatialUnitMetadata(
-          targetSpatialUnitId as string, 
-          this.kommonitorDataExchangeService.currentKeycloakLoginRoles
-        ).then((data: any) => {
-          this.kommonitorDataExchangeService.replaceSingleSpatialUnitMetadata(data);
-          this.initializeOrRefreshOverviewTable();
-          setTimeout(() => {
-            this.loadingData = false;
-          });
-        }, (error: any) => {
-          setTimeout(() => {
-            this.loadingData = false;
-          });
-        });
-      } else if (crudType === 'delete') {
-        // targetSpatialUnitId might be array in this case
-        if (targetSpatialUnitId && typeof targetSpatialUnitId === 'string') {
-          this.kommonitorDataExchangeService.deleteSingleSpatialUnitMetadata(targetSpatialUnitId);
-          this.initializeOrRefreshOverviewTable();
-          setTimeout(() => {
-            this.loadingData = false;
-          });
-        } else if (targetSpatialUnitId && Array.isArray(targetSpatialUnitId)) {
-          for (const id of targetSpatialUnitId) {
-            this.kommonitorDataExchangeService.deleteSingleSpatialUnitMetadata(id);
-          }
-          this.initializeOrRefreshOverviewTable();
-          setTimeout(() => {
-            this.loadingData = false;
-          });
-        }
-      }
-    }
-  }
-
-  onChangeSelectDataset(spatialUnitDataset: any): void {
-    console.log(spatialUnitDataset.spatialUnitLevel);
+  // Table view switcher method
+  onTableViewSwitch(): void {
+    // Filter the data based on the tableViewSwitcher state
+    // For now, just refresh the table
+    this.initializeOrRefreshOverviewTable();
   }
 
-  onClickDeleteDatasets(): void {
-    const markedEntriesForDeletion = this.kommonitorDataGridHelperService.getSelectedSpatialUnitsMetadata();
-    this.openDeleteModal(markedEntriesForDeletion);
+  // Alias for the add spatial unit modal (matching HTML template)
+  openAddSpatialUnitModal(): void {
+    this.onClickAddSpatialUnit();
   }
 
-  openDeleteModal(datasetsToDelete: any[]) {
-    console.log('Opening delete spatial units modal for:', datasetsToDelete);
+  // Modal event handlers
+  onClickAddSpatialUnit(): void {
+    const modalRef = this.modalService.open(SpatialUnitAddModalComponent, {
+      size: 'lg',
+      backdrop: 'static',
+      keyboard: false,
+      container: 'body',
+      animation: false
+    });
     
-    try {
-      // Open modal using NgbModal
-      const modalRef = this.modalService.open(SpatialUnitDeleteModalComponent, {
-        size: 'lg',
-        backdrop: 'static',
-        keyboard: false,
-        container: 'body',
-        animation: false,
-        windowClass: 'spatial-unit-delete-modal'
-      });
-      
-      console.log('Delete modal reference created:', modalRef);
-      
-      // Pass the datasets to the modal
-      modalRef.componentInstance.datasetsToDelete = datasetsToDelete;
-      
-      // Handle modal result
-      modalRef.result.then(
-        (result) => {
-          console.log('Delete modal closed with result:', result);
-          if (result && result.action === 'deleted') {
-            // Refresh the spatial units table
-            this.refreshSpatialUnitOverviewTable('delete', result.deletedDatasets?.map((d: any) => d.spatialUnitId));
-          }
-        },
-        (reason) => {
-          console.log('Delete modal dismissed with reason:', reason);
-        }
-      );
-    } catch (error: any) {
-      console.error('Error opening delete modal:', error);
-      // Fallback: broadcast event for old AngularJS modal
-      this.broadcastService.broadcast('onDeleteSpatialUnits', datasetsToDelete);
-    }
-  }
-
-  onClickEditMetadata(spatialUnitDataset: any): void {
-    this.openEditMetadataModal(spatialUnitDataset);
+    modalRef.result.then((result) => {
+      if (result) {
+        this.initializeOrRefreshOverviewTable();
+      }
+    }).catch(() => {
+      // Modal dismissed
+    });
   }
 
-  openEditMetadataModal(spatialUnitDataset: any) {
-    console.log('Opening edit spatial unit metadata modal for:', spatialUnitDataset);
+  onClickEditMetadata(spatialUnitMetadata: any): void {
+    const modalRef = this.modalService.open(SpatialUnitEditMetadataModalComponent, {
+      size: 'lg',
+      backdrop: 'static',
+      keyboard: false,
+      container: 'body',
+      animation: false
+    });
     
-    try {
-      // Open modal using NgbModal
-      const modalRef = this.modalService.open(SpatialUnitEditMetadataModalComponent, {
-        size: 'xl',
-        backdrop: 'static',
-        keyboard: false,
-        container: 'body',
-        animation: false,
-        windowClass: 'spatial-unit-edit-metadata-modal'
-      });
-      
-      console.log('Edit metadata modal reference created:', modalRef);
-      
-      // Pass the spatial unit dataset to the modal
-      modalRef.componentInstance.currentSpatialUnitDataset = spatialUnitDataset;
-      modalRef.componentInstance.resetForm();
-      
-      // Handle modal result
-      modalRef.result.then(
-        (result) => {
-          console.log('Edit metadata modal closed with result:', result);
-          if (result && result.action === 'updated') {
-            // Refresh the spatial units table
-            this.refreshSpatialUnitOverviewTable('edit', spatialUnitDataset.spatialUnitId);
-          }
-        },
-        (reason) => {
-          console.log('Edit metadata modal dismissed with reason:', reason);
-        }
-      );
-    } catch (error: any) {
-      console.error('Error opening edit metadata modal:', error);
-      // Fallback: broadcast event for old AngularJS modal
-      this.broadcastService.broadcast('onEditSpatialUnitMetadata', spatialUnitDataset);
-    }
-  }
-
-  onClickEditFeatures(spatialUnitDataset: any): void {
-    this.openEditFeaturesModal(spatialUnitDataset);
+    modalRef.componentInstance.currentSpatialUnitDataset = spatialUnitMetadata;
+    
+    modalRef.result.then((result) => {
+      if (result) {
+        this.initializeOrRefreshOverviewTable();
+      }
+    }).catch(() => {
+      // Modal dismissed
+    });
   }
 
-  openEditFeaturesModal(spatialUnitDataset: any) {
-    console.log('Opening edit spatial unit features modal for:', spatialUnitDataset);
+  onClickEditFeatures(spatialUnitMetadata: any): void {
+    const modalRef = this.modalService.open(SpatialUnitEditFeaturesModalComponent, {
+      size: 'xl',
+      backdrop: 'static',
+      keyboard: false,
+      container: 'body',
+      animation: false
+    });
     
-    try {
-      // Open modal using NgbModal
-      const modalRef = this.modalService.open(SpatialUnitEditFeaturesModalComponent, {
-        size: 'xl',
-        backdrop: 'static',
-        keyboard: false,
-        container: 'body',
-        animation: false,
-        windowClass: 'spatial-unit-edit-features-modal'
-      });
-      
-      console.log('Edit features modal reference created:', modalRef);
-      
-      // Pass the spatial unit dataset to the modal
-      modalRef.componentInstance.currentSpatialUnitDataset = spatialUnitDataset;
-      modalRef.componentInstance.resetForm();
-      
-      // Handle modal result
-      modalRef.result.then(
-        (result) => {
-          console.log('Edit features modal closed with result:', result);
-          if (result && result.action === 'updated') {
-            // Refresh the spatial units table
-            this.refreshSpatialUnitOverviewTable('edit', spatialUnitDataset.spatialUnitId);
-          }
-        },
-        (reason) => {
-          console.log('Edit features modal dismissed with reason:', reason);
-        }
-      );
-    } catch (error: any) {
-      console.error('Error opening edit features modal:', error);
-      // Fallback: broadcast event for old AngularJS modal
-      this.broadcastService.broadcast('onEditSpatialUnitFeatures', spatialUnitDataset);
-    }
+    modalRef.componentInstance.currentSpatialUnitDataset = spatialUnitMetadata;
+    
+    modalRef.result.then((result) => {
+      if (result) {
+        this.initializeOrRefreshOverviewTable();
+      }
+    }).catch(() => {
+      // Modal dismissed
+    });
   }
 
-  onClickEditUserRoles(spatialUnitDataset: any): void {
-    this.openEditUserRolesModal(spatialUnitDataset);
+  onClickEditUserRoles(spatialUnitMetadata: any): void {
+    const modalRef = this.modalService.open(SpatialUnitEditUserRolesModalComponent, {
+      size: 'lg',
+      backdrop: 'static',
+      keyboard: false,
+      container: 'body',
+      animation: false
+    });
+    
+    modalRef.componentInstance.currentSpatialUnitDataset = spatialUnitMetadata;
+    
+    modalRef.result.then((result) => {
+      if (result) {
+        this.initializeOrRefreshOverviewTable();
+      }
+    }).catch(() => {
+      // Modal dismissed
+    });
   }
 
-  openEditUserRolesModal(spatialUnitDataset: any) {
-    console.log('Opening edit spatial unit user roles modal for:', spatialUnitDataset);
+  onClickDeleteSpatialUnits(spatialUnitsMetadata: any[]): void {
+    const modalRef = this.modalService.open(SpatialUnitDeleteModalComponent, {
+      size: 'xl',
+      backdrop: 'static',
+      keyboard: false,
+      container: 'body',
+      animation: false
+    });
     
-    try {
-      // Open modal using NgbModal
-      const modalRef = this.modalService.open(SpatialUnitEditUserRolesModalComponent, {
-        size: 'xl',
-        backdrop: 'static',
-        keyboard: false,
-        container: 'body',
-        animation: false,
-        windowClass: 'spatial-unit-edit-user-roles-modal'
-      });
-      
-      console.log('Edit user roles modal reference created:', modalRef);
-      
-      // Pass the spatial unit dataset to the modal
-      modalRef.componentInstance.currentSpatialUnitDataset = spatialUnitDataset;
-      modalRef.componentInstance.resetForm();
-      
-      // Handle modal result
-      modalRef.result.then(
-        (result) => {
-          console.log('Edit user roles modal closed with result:', result);
-          if (result && result.action === 'updated') {
-            // Refresh the spatial units table
-            this.refreshSpatialUnitOverviewTable('edit', spatialUnitDataset.spatialUnitId);
-          }
-        },
-        (reason) => {
-          console.log('Edit user roles modal dismissed with reason:', reason);
-        }
-      );
-    } catch (error: any) {
-      console.error('Error opening edit user roles modal:', error);
-      // Fallback: broadcast event for old AngularJS modal
-      this.broadcastService.broadcast('onEditSpatialUnitUserRoles', spatialUnitDataset);
-    }
+    modalRef.componentInstance.datasetsToDelete = spatialUnitsMetadata;
+    
+    modalRef.result.then((result) => {
+      if (result) {
+        this.initializeOrRefreshOverviewTable();
+      }
+    }).catch(() => {
+      // Modal dismissed
+    });
   }
 
+  // Utility methods
   checkCreatePermission(): boolean {
     return this.kommonitorDataExchangeService.checkCreatePermission();
   }
 
-  openAddSpatialUnitModal() {
-    console.log('Opening add spatial unit modal');
-    
-    // Test if modal service is working
-    console.log('Modal service available:', this.modalService);
-    console.log('SpatialUnitAddModalComponent available:', SpatialUnitAddModalComponent);
-    
-    try {
-      // Open modal using NgbModal
-      const modalRef = this.modalService.open(SpatialUnitAddModalComponent, {
-        size: 'xl',
-        backdrop: 'static',
-        keyboard: false,
-        container: 'body',
-        animation: false,
-        windowClass: 'spatial-unit-add-modal'
-      });
-      
-      console.log('Modal reference created:', modalRef);
-      
-      // Handle modal result
-      modalRef.result.then(
-        (result) => {
-          console.log('Modal closed with result:', result);
-          if (result.action === 'created') {
-            // Refresh the spatial units table
+  getSelectedSpatialUnitsMetadata(): any[] {
+    return this.kommonitorDataGridHelperService.getSelectedSpatialUnitsMetadata();
+  }
+
+  refreshSpatialUnitOverviewTable(): void {
             this.initializeOrRefreshOverviewTable();
           }
-        },
-        (reason) => {
-          console.log('Modal dismissed with reason:', reason);
+
+  private startDataPolling(): void {
+    // Poll every 500ms for data availability
+    const pollInterval = setInterval(() => {
+      if (this.loadingData) {
+        this.initializeOrRefreshOverviewTable();
+        
+        // If data is found, stop polling
+        if (!this.loadingData) {
+          clearInterval(pollInterval);
         }
-      );
-    } catch (error: any) {
-      console.error('Error opening modal:', error);
-      // Fallback: show alert
-      alert('Modal failed to open: ' + (error?.message || 'Unknown error'));
-    }
+      } else {
+        // Data loaded, stop polling
+        clearInterval(pollInterval);
+      }
+    }, 500);
+    
+    // Stop polling after 10 seconds regardless
+    setTimeout(() => {
+      clearInterval(pollInterval);
+    }, 10000);
   }
 } 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.css b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.css
index 944205ba9..835052931 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.css
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.css
@@ -12,362 +12,292 @@
   z-index: 1050;
 }
 
-.loading-overlay-admin-panel .spinner-border {
-  width: 3rem;
-  height: 3rem;
+.loading-overlay-admin-panel .glyphicon {
+  font-size: 2rem;
 }
 
-/* Modal header */
-.modal-header {
-  background-color: #f8f9fa;
-  border-bottom: 1px solid #dee2e6;
-  padding: 1rem 1.5rem;
-}
-
-.modal-header .modal-title {
-  font-size: 1.25rem;
-  font-weight: 500;
-  color: #343a40;
-}
-
-.modal-header .btn-close {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  color: #6c757d;
-  cursor: pointer;
-}
-
-.modal-header .btn-close:hover {
-  color: #343a40;
-}
-
-/* Modal body */
-.modal-body {
-  padding: 1.5rem;
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
-/* Cards */
-.card {
-  border: 1px solid #dee2e6;
-  border-radius: 0.25rem;
-  overflow: hidden;
-}
-
-.card-header {
-  padding: 0.75rem 1rem;
-  background-color: #f8f9fa;
-  border-bottom: 1px solid #dee2e6;
-}
-
-.card-body {
-  padding: 1rem;
-}
-
-.card.border-success {
-  border-color: #198754 !important;
-}
-
-.card.border-danger {
-  border-color: #dc3545 !important;
+.ng-hide {
+  display: none !important;
 }
 
-.bg-success {
-  background-color: #198754 !important;
+/* Loading spinner animation */
+.icon-spin {
+  animation: spin 2s infinite linear;
 }
 
-.bg-danger {
-  background-color: #dc3545 !important;
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
-.bg-light {
-  background-color: #f8f9fa !important;
+/* Modal header */
+.modal-header {
+  padding: 15px;
+  border-bottom: 1px solid #e5e5e5;
 }
 
-.text-white {
-  color: #fff !important;
+.modal-header .close {
+  margin-top: -2px;
+  font-size: 21px;
+  font-weight: bold;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  opacity: 0.2;
+  border: none;
+  background: none;
+  cursor: pointer;
 }
 
-.text-muted {
-  color: #6c757d !important;
+.modal-header .close:hover,
+.modal-header .close:focus {
+  color: #000;
+  text-decoration: none;
+  opacity: 0.5;
 }
 
-.text-danger {
-  color: #dc3545 !important;
+.modal-title {
+  margin: 0;
+  line-height: 1.42857143;
 }
 
-.text-success {
-  color: #198754 !important;
+/* Modal body */
+.modal-body {
+  position: relative;
+  padding: 15px;
 }
 
-/* Lists */
-.list-unstyled {
-  padding-left: 0;
-  list-style: none;
+.modal-body h4 {
+  margin-top: 0;
+  margin-bottom: 10px;
 }
 
-.list-unstyled li {
-  margin-bottom: 0.5rem;
+.modal-body p {
+  margin: 0 0 10px;
 }
 
-/* Spacing utilities */
-.mb-0 { margin-bottom: 0 !important; }
-.mb-1 { margin-bottom: 0.25rem !important; }
-.mb-2 { margin-bottom: 0.5rem !important; }
-.mb-3 { margin-bottom: 1rem !important; }
-.mt-1 { margin-top: 0.25rem !important; }
-.mt-2 { margin-top: 0.5rem !important; }
-.mt-3 { margin-top: 1rem !important; }
-.me-2 { margin-right: 0.5rem !important; }
-
-/* Flexbox utilities */
-.d-flex {
-  display: flex !important;
+.modal-body ul {
+  margin-bottom: 10px;
+  padding-left: 20px;
 }
 
-.d-none {
-  display: none !important;
+.modal-body li {
+  margin-bottom: 5px;
 }
 
-.align-items-start {
-  align-items: flex-start !important;
+.modal-body pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  color: #333;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px;
 }
 
-.flex-grow-1 {
-  flex-grow: 1 !important;
+/* Modal footer */
+.modal-footer {
+  padding: 15px;
+  text-align: right;
+  border-top: 1px solid #e5e5e5;
 }
 
-/* Text utilities */
-.text-center {
-  text-align: center !important;
+.modal-footer .btn + .btn {
+  margin-bottom: 0;
+  margin-left: 5px;
 }
 
-.small {
-  font-size: 0.875rem;
+.pull-left {
+  float: left !important;
 }
 
 /* Button styles */
 .btn {
   display: inline-block;
-  font-weight: 400;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.42857143;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  user-select: none;
-  border: 1px solid transparent;
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   cursor: pointer;
-  text-decoration: none;
-}
-
-.btn:hover {
+  border: 1px solid transparent;
+  border-radius: 4px;
   text-decoration: none;
 }
 
 .btn:focus,
-.btn.focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+.btn:active:focus,
+.btn.active:focus {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
 }
 
-.btn-secondary {
-  color: #fff;
-  background-color: #6c757d;
-  border-color: #6c757d;
-}
-
-.btn-secondary:hover {
-  color: #fff;
-  background-color: #545b62;
-  border-color: #545b62;
+.btn:hover,
+.btn:focus {
+  color: #333;
+  text-decoration: none;
 }
 
-.btn-danger {
-  color: #fff;
-  background-color: #dc3545;
-  border-color: #dc3545;
+.btn-default {
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
 }
 
-.btn-danger:hover {
-  color: #fff;
-  background-color: #c82333;
-  border-color: #c82333;
+.btn-default:hover,
+.btn-default:focus {
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
 }
 
-.btn-success {
+.btn-danger {
   color: #fff;
-  background-color: #28a745;
-  border-color: #28a745;
+  background-color: #d9534f;
+  border-color: #d43f3a;
 }
 
-.btn-success:hover {
+.btn-danger:hover,
+.btn-danger:focus {
   color: #fff;
-  background-color: #218838;
-  border-color: #218838;
+  background-color: #c9302c;
+  border-color: #ac2925;
 }
 
 .btn:disabled,
-.btn.disabled {
-  opacity: 0.65;
+.btn[disabled] {
   cursor: not-allowed;
+  opacity: 0.65;
+  box-shadow: none;
 }
 
 /* Alert styles */
 .alert {
-  position: relative;
-  padding: 0.75rem 1.25rem;
-  margin-bottom: 1rem;
+  padding: 15px;
+  margin-bottom: 20px;
   border: 1px solid transparent;
-  border-radius: 0.25rem;
+  border-radius: 4px;
 }
 
 .alert-success {
-  color: #155724;
-  background-color: #d4edda;
-  border-color: #c3e6cb;
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
 }
 
 .alert-danger {
-  color: #721c24;
-  background-color: #f8d7da;
-  border-color: #f5c6cb;
-}
-
-.alert-warning {
-  color: #856404;
-  background-color: #fff3cd;
-  border-color: #ffeaa7;
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
 }
 
-.alert-dismissible {
-  padding-right: 4rem;
+.alert-dismissable .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  color: inherit;
 }
 
-.alert-dismissible .btn-close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 0.75rem 1.25rem;
+.alert h4 {
+  margin-top: 0;
   color: inherit;
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  line-height: 1;
-  cursor: pointer;
 }
 
-.alert-dismissible .btn-close:hover {
-  opacity: 0.75;
+.alert .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  color: inherit;
 }
 
-/* Spinner */
-.spinner-border {
-  display: inline-block;
-  width: 2rem;
-  height: 2rem;
-  vertical-align: text-bottom;
-  border: 0.25em solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: spinner-border 0.75s linear infinite;
+.alert ul {
+  margin-bottom: 0;
 }
 
-@keyframes spinner-border {
-  to {
-    transform: rotate(360deg);
-  }
+.alert li {
+  margin-bottom: 5px;
 }
 
-.spinner-border.text-primary {
-  color: #007bff;
+/* Table styles */
+.table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 20px;
+  background-color: transparent;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
-/* Visually hidden utility */
-.visually-hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+  padding: 8px;
+  line-height: 1.42857143;
+  vertical-align: top;
+  border-top: 1px solid #ddd;
 }
 
-/* Fade animation */
-.fade {
-  transition: opacity 0.15s linear;
+.table > thead > tr > th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #ddd;
 }
 
-.fade:not(.show) {
-  opacity: 0;
+.table-bordered {
+  border: 1px solid #ddd;
 }
 
-.show {
-  opacity: 1;
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+  border: 1px solid #ddd;
 }
 
-/* Delete confirmation styling */
-.modal-body h4 {
-  color: #dc3545;
-  font-weight: 600;
+.table-bordered > thead > tr > th,
+.table-bordered > thead > tr > td {
+  border-bottom-width: 2px;
 }
 
-.modal-body p {
-  color: #6c757d;
-  font-size: 0.95rem;
-  margin-bottom: 1.5rem;
+.table-condensed > thead > tr > th,
+.table-condensed > tbody > tr > th,
+.table-condensed > tfoot > tr > th,
+.table-condensed > thead > tr > td,
+.table-condensed > tbody > tr > td,
+.table-condensed > tfoot > tr > td {
+  padding: 5px;
 }
 
-/* Custom styling for delete items */
-.delete-item {
-  background-color: #fff5f5;
-  border: 1px solid #fed7d7;
-  border-radius: 0.375rem;
-  padding: 0.75rem;
-  margin-bottom: 0.5rem;
+/* Font Awesome icons */
+.icon {
+  margin-right: 5px;
 }
 
-.delete-item:hover {
-  background-color: #fef2f2;
+.fa-check:before {
+  content: "\f00c";
 }
 
-/* Error details styling */
-.error-details {
-  background-color: #f8f9fa;
-  border: 1px solid #e9ecef;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  font-family: 'Courier New', monospace;
-  font-size: 0.8rem;
-  max-height: 150px;
-  overflow-y: auto;
+.fa-ban:before {
+  content: "\f05e";
 }
 
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .modal-body {
-    padding: 1rem;
-  }
-  
-  .card-header,
-  .card-body {
-    padding: 0.75rem;
-  }
-  
-  .btn {
-    font-size: 0.875rem;
-    padding: 0.25rem 0.5rem;
-  }
-  
-  .small {
-    font-size: 0.75rem;
-  }
+/* Hidden attribute support */
+[hidden] {
+  display: none !important;
 } 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.html
index 20204da87..b5e3ead49 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.html
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitDeleteModal/spatial-unit-delete-modal.component.html
@@ -1,141 +1,62 @@
 

-  
Raumebenen löschen

-  
+  
Raumebenen löschen

 

 
 

-  
-  

-    

-      
-    

-  

-
-  
-  
-
-  
-  

                 
               
 
-              

+              

                 
                 
                 

@@ -159,8 +163,8 @@ 
Indikatoren-Reihenfolge in Themenkatalog

                     
                   

                   
-                  

+                  

                     
                     
                     

@@ -177,8 +181,8 @@ 
Indikatoren-Reihenfolge in Themenkatalog

                         
                       

                       
-                      

+                      

                         
                         
                         

@@ -196,8 +200,8 @@ 
Indikatoren-Reihenfolge in Themenkatalog

                           

                           
                           
-                          

                             
Indikatoren-Reihenfolge in Themenkatalog
                         
                         
                         

                           
Indikatoren-Reihenfolge in Themenkatalog
                     
                     
                     

                       
Indikatoren-Reihenfolge in Themenkatalog
                 
                 
                 

                   
 {
           setTimeout(() => {
             this.initializeOrRefreshOverviewTable();
+            // Also ensure topics are collapsed when metadata is loaded
+            this.initializeCollapsedTopics();
           }, 250);
         });
       }
@@ -140,9 +146,9 @@ export class AdminIndicatorsManagementComponent implements OnInit, OnDestroy {
           this.onClickEditFeatures(data.values);
         });
       }
-      else if (data.msg === 'onEditIndicatorUserRoles') {
+      else if (data.msg === 'onEditIndicatorSpatialUnitRoles') {
         this.zone.run(() => {
-          this.onClickEditUserRoles(data.values);
+          this.onClickEditIndicatorSpatialUnitRoles(data.values);
         });
       }
       else if (data.msg === 'onDeleteIndicators') {
@@ -170,7 +176,7 @@ export class AdminIndicatorsManagementComponent implements OnInit, OnDestroy {
 
     const handleEditUserRoles = (event: CustomEvent) => {
       this.zone.run(() => {
-        this.onClickEditUserRoles(event.detail.values);
+        this.onClickEditIndicatorSpatialUnitRoles(event.detail.values);
       });
     };
 
@@ -197,6 +203,9 @@ export class AdminIndicatorsManagementComponent implements OnInit, OnDestroy {
       this.loadingData = false;
       this.initializationCompleted = true;
       
+      // Initialize all topics as collapsed
+      this.initializeCollapsedTopics();
+      
       // Set up grid options first
       this.setupGridOptions(indicators);
       
@@ -369,23 +378,100 @@ export class AdminIndicatorsManagementComponent implements OnInit, OnDestroy {
   }
 
   onClickEditMetadata(indicatorMetadata: any): void {
-    // TODO: Implement indicator edit metadata modal
-    console.log('Edit metadata clicked for:', indicatorMetadata);
+    console.log('Opening indicator edit metadata modal...');
+    try {
+      const modalRef = this.modalService.open(IndicatorEditMetadataModalComponent, {
+        size: 'xl',
+        backdrop: 'static',
+        keyboard: false,
+        container: 'body',
+        animation: false
+      });
+
+      console.log('Edit metadata modal reference created:', modalRef);
+
+      // Set the current indicator dataset in the modal component
+      const modalComponent = modalRef.componentInstance as IndicatorEditMetadataModalComponent;
+      modalComponent.currentIndicatorDataset = indicatorMetadata;
+      modalComponent.resetIndicatorEditMetadataForm();
+
+      modalRef.result.then((result) => {
+        console.log('Edit metadata modal result:', result);
+        if (result) {
+          // Modal was closed successfully, refresh the table
+          this.initializeOrRefreshOverviewTable();
+        }
+      }).catch((error) => {
+        console.log('Edit metadata modal error:', error);
+        // Modal dismissed
+      });
+    } catch (error) {
+      console.error('Error opening edit metadata modal:', error);
+    }
   }
 
   onClickEditFeatures(indicatorMetadata: any): void {
-    // TODO: Implement indicator edit features modal
-    console.log('Edit features clicked for:', indicatorMetadata);
+    try {
+      const modalRef = this.modalService.open(IndicatorEditFeaturesModalComponent, {
+        size: 'xl',
+        backdrop: 'static',
+        keyboard: false
+      });
+
+      const modalComponent = modalRef.componentInstance as IndicatorEditFeaturesModalComponent;
+      modalComponent.openModal(indicatorMetadata);
+
+      modalRef.result.then((result) => {
+        console.log('Edit features modal result:', result);
+        if (result) {
+          // Modal was closed successfully, refresh the table
+          this.initializeOrRefreshOverviewTable();
+        }
+      }).catch((error) => {
+        console.log('Edit features modal error:', error);
+        // Modal dismissed
+      });
+    } catch (error) {
+      console.error('Error opening edit features modal:', error);
+    }
   }
 
-  onClickEditUserRoles(indicatorMetadata: any): void {
-    // TODO: Implement indicator edit user roles modal
-    console.log('Edit user roles clicked for:', indicatorMetadata);
+  onClickEditIndicatorSpatialUnitRoles(indicatorMetadata: any): void {
+    try {
+      // Broadcast the event to open the modal
+      this.broadcastService.broadcast('onEditIndicatorSpatialUnitRoles', indicatorMetadata);
+    } catch (error) {
+      console.error('Error opening edit indicator spatial unit roles modal:', error);
+    }
   }
 
   onClickDeleteIndicators(indicatorsMetadata: any[]): void {
-    // TODO: Implement indicator delete modal
-    console.log('Delete indicators clicked for:', indicatorsMetadata);
+    if (indicatorsMetadata.length === 1) {
+      // Open the Angular delete modal for single indicator
+      this.openDeleteIndicatorModal(indicatorsMetadata[0]);
+    } else {
+      // For multiple indicators, we might need to handle differently
+      // For now, just open the modal with the first indicator
+      console.log('Multiple indicators delete not yet supported');
+    }
+  }
+
+  openDeleteIndicatorModal(indicatorDataset: any): void {
+    const modalRef = this.modalService.open(IndicatorDeleteModalComponent, {
+      size: 'xl',
+      backdrop: 'static',
+      keyboard: false
+    });
+
+    // Set the selected indicator in the modal
+    modalRef.componentInstance.selectedIndicatorDataset = indicatorDataset;
+    modalRef.componentInstance.onChangeSelectedIndicator();
+
+    modalRef.result.then((result) => {
+      console.log('Delete modal closed with result:', result);
+    }).catch((error) => {
+      console.log('Delete modal dismissed:', error);
+    });
   }
 
   onClickBatchUpdate(): void {
@@ -506,7 +592,51 @@ export class AdminIndicatorsManagementComponent implements OnInit, OnDestroy {
     return this.selectedRows;
   }
 
+  // Getter to check if we have topic hierarchy data
+  get hasTopicData(): boolean {
+    return this.kommonitorDataExchangeService.topicIndicatorHierarchy_forOrderView && 
+           this.kommonitorDataExchangeService.topicIndicatorHierarchy_forOrderView.length > 0;
+  }
+
   // Drag & Drop methods
+  initializeCollapsedTopics(): void {
+    // Clear existing collapsed topics
+    this.collapsedTopics.clear();
+    
+    // Initialize all topics as collapsed by default
+    if (this.kommonitorDataExchangeService.topicIndicatorHierarchy_forOrderView && 
+        this.kommonitorDataExchangeService.topicIndicatorHierarchy_forOrderView.length > 0) {
+      
+      console.log('Initializing collapsed topics for', this.kommonitorDataExchangeService.topicIndicatorHierarchy_forOrderView.length, 'main topics');
+      
+      this.kommonitorDataExchangeService.topicIndicatorHierarchy_forOrderView.forEach((mainTopic: any) => {
+        this.collapsedTopics.add(mainTopic.topicId);
+        
+        if (mainTopic.subTopics && mainTopic.subTopics.length > 0) {
+          mainTopic.subTopics.forEach((subTopic: any) => {
+            this.collapsedTopics.add(subTopic.topicId);
+            
+            if (subTopic.subTopics && subTopic.subTopics.length > 0) {
+              subTopic.subTopics.forEach((subsubTopic: any) => {
+                this.collapsedTopics.add(subsubTopic.topicId);
+                
+                if (subsubTopic.subTopics && subsubTopic.subTopics.length > 0) {
+                  subsubTopic.subTopics.forEach((subsubsubTopic: any) => {
+                    this.collapsedTopics.add(subsubsubTopic.topicId);
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+      
+      console.log('Collapsed topics set:', this.collapsedTopics);
+    } else {
+      console.log('No topic hierarchy data available yet');
+    }
+  }
+
   toggleTopicCollapse(topicId: string): void {
     if (this.collapsedTopics.has(topicId)) {
       this.collapsedTopics.delete(topicId);
@@ -516,6 +646,18 @@ export class AdminIndicatorsManagementComponent implements OnInit, OnDestroy {
   }
 
   isTopicCollapsed(topicId: string): boolean {
+    // If topic hierarchy is not loaded yet, assume collapsed
+    if (!this.kommonitorDataExchangeService.topicIndicatorHierarchy_forOrderView || 
+        this.kommonitorDataExchangeService.topicIndicatorHierarchy_forOrderView.length === 0) {
+      return true;
+    }
+    
+    // If the collapsedTopics set is empty, initialize it and return true (collapsed by default)
+    if (this.collapsedTopics.size === 0) {
+      this.initializeCollapsedTopics();
+      return true;
+    }
+    
     return this.collapsedTopics.has(topicId);
   }
 
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorDeleteModal/indicator-delete-modal.component.css b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorDeleteModal/indicator-delete-modal.component.css
new file mode 100644
index 000000000..586f1e6d2
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorDeleteModal/indicator-delete-modal.component.css
@@ -0,0 +1,459 @@
+.modal-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  padding: 1rem 1.5rem;
+}
+
+.modal-title {
+  margin-bottom: 0;
+  line-height: 1.5;
+  color: #495057;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  color: #000;
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+.btn-close:hover {
+  opacity: 0.75;
+}
+
+.modal-body {
+  padding: 1.5rem;
+  position: relative;
+  min-height: 400px;
+}
+
+.loading-overlay-admin-panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fs-title {
+  font-size: 1.5rem;
+  color: #495057;
+  margin-bottom: 0.5rem;
+}
+
+.fs-subtitle {
+  font-size: 1rem;
+  color: #6c757d;
+  margin-bottom: 1.5rem;
+}
+
+.input-group-text {
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  color: #495057;
+}
+
+.form-control {
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.form-control:focus {
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.form-control[size] {
+  min-height: 200px;
+}
+
+.help-block {
+  font-size: 0.75rem;
+  color: #6c757d;
+  margin-top: 0.25rem;
+}
+
+.card {
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+.card-info {
+  border-color: #b3d4fc;
+}
+
+.card-header {
+  background-color: #ebf0fd;
+  border-bottom: 1px solid #dee2e6;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-title {
+  margin-bottom: 0;
+  font-size: 1rem;
+  color: #495057;
+}
+
+.card-tools .btn-tool {
+  background: none;
+  border: none;
+  color: #495057;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+}
+
+.card-tools .btn-tool:hover {
+  color: #007bff;
+}
+
+.card-body {
+  padding: 1rem;
+}
+
+.admin-table-wrapper {
+  overflow-x: auto;
+  max-height: 400px;
+}
+
+.table {
+  margin-bottom: 0;
+  font-size: 0.75rem;
+}
+
+.table th,
+.table td {
+  padding: 0.5rem;
+  vertical-align: top;
+  border-top: 1px solid #dee2e6;
+  word-wrap: break-word;
+  max-width: 200px;
+}
+
+.table thead th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #dee2e6;
+  background-color: #f8f9fa;
+  font-weight: 600;
+}
+
+.table-bordered {
+  border: 1px solid #dee2e6;
+}
+
+.table-bordered th,
+.table-bordered td {
+  border: 1px solid #dee2e6;
+}
+
+.table-condensed th,
+.table-condensed td {
+  padding: 0.25rem;
+  font-size: 0.75rem;
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.multiStepForm {
+  margin-top: 1.5rem;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  font-weight: 600;
+  color: #495057;
+  margin-bottom: 0.5rem;
+  display: block;
+}
+
+.form-check {
+  margin-bottom: 1rem;
+}
+
+.form-check-input {
+  margin-right: 0.5rem;
+}
+
+.form-check-label {
+  color: #495057;
+  cursor: pointer;
+}
+
+.alert {
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+}
+
+.alert-success {
+  color: #155724;
+  background-color: #d4edda;
+  border-color: #c3e6cb;
+}
+
+.alert-danger {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+}
+
+.alert-dismissible {
+  padding-right: 4rem;
+}
+
+.alert-dismissible .btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.75rem 1.25rem;
+  color: inherit;
+}
+
+.position-absolute {
+  position: absolute !important;
+}
+
+.bottom-0 {
+  bottom: 0 !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.modal-footer {
+  background-color: #f8f9fa;
+  border-top: 1px solid #dee2e6;
+  padding: 1rem 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.btn:hover {
+  text-decoration: none;
+}
+
+.btn:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.btn:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+
+.btn-secondary:hover {
+  background-color: #5a6268;
+  border-color: #545b62;
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+
+.btn-danger:hover {
+  background-color: #c82333;
+  border-color: #bd2130;
+}
+
+.btn-danger:disabled {
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+
+.vertical-align {
+  align-items: center;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+.col-md-6,
+.col-md-10,
+.col-md-12,
+.col-sm-6,
+.col-sm-12,
+.col-xs-12 {
+  position: relative;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+@media (min-width: 768px) {
+  .col-md-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  
+  .col-md-10 {
+    flex: 0 0 83.33333%;
+    max-width: 83.33333%;
+  }
+  
+  .col-md-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+@media (min-width: 576px) {
+  .col-sm-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  
+  .col-sm-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+.col-xs-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+/* Responsive table */
+@media (max-width: 768px) {
+  .admin-table-wrapper {
+    font-size: 0.625rem;
+  }
+  
+  .table th,
+  .table td {
+    padding: 0.25rem;
+    max-width: 150px;
+  }
+}
+
+/* Scrollbar styling */
+.admin-table-wrapper::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.admin-table-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.admin-table-wrapper::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.admin-table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Typography adjustments */
+h3 {
+  color: #dc3545;
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+h4 {
+  color: #495057;
+  font-size: 1.1rem;
+  margin-bottom: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+p {
+  margin-bottom: 1rem;
+  line-height: 1.5;
+}
+
+ul {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+li {
+  margin-bottom: 0.25rem;
+}
+
+/* Icon styling */
+.fas {
+  margin-right: 0.25rem;
+}
+
+.fa-spin {
+  animation: fa-spin 2s infinite linear;
+}
+
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+
+/* Text utilities */
+.text-center {
+  text-align: center;
+}
+
+/* Spacing utilities */
+.mb-3 {
+  margin-bottom: 1rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorDeleteModal/indicator-delete-modal.component.html b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorDeleteModal/indicator-delete-modal.component.html
new file mode 100644
index 000000000..98174086c
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorDeleteModal/indicator-delete-modal.component.html
@@ -0,0 +1,418 @@
+

+  
+  
+

+
+

+  
+  

+    
+  

+
+  

+    
Indikatoren-Daten löschen

+    
Hier können einzelne Zeitschnitte oder Raumebenen sowie ganze Indikatoren-Datensätze aus dem System entfernt werden.

+  

+
+  

+    

+      

+        
+        
+      

+      

+      

+        
+      

+    

+    

+      

+        
+        
+        

+          
Diese Auswahl bestimmt, welche Aspekte des Indikators gelöscht werden sollen.

+        

+      

+    

+  

+
+  


+
+  
+  

+    

+      

+        

+          
Metadaten des selektierten Indikators

+          

+            
+          

+        

+        

+          

+            

+              
+                
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                
+                
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                
+              
IdNameKürzel/KennzeichenLeitindikatorIndikator-TypMerkmalArt der FortführungEinheitBeschreibungInterpretationMethodikDatenquelleDatengrundlageTags/StichworteThemenhierarchieVerfügbare RaumebenenVerfügbare ZeitpunkteDatenhalter und Kontaktzuletzt aktualisiert amKoordinatensystem
{{selectedIndicatorDataset?.indicatorId}}{{selectedIndicatorDataset?.indicatorName}}{{selectedIndicatorDataset?.abbreviation}}{{selectedIndicatorDataset?.isHeadlineIndicator ? 'Ja' : 'Nein'}}{{selectedIndicatorDataset?.indicatorType}}{{selectedIndicatorDataset?.characteristicValue}}{{selectedIndicatorDataset?.creationType}}{{selectedIndicatorDataset?.unit}}{{selectedIndicatorDataset?.description}}{{selectedIndicatorDataset?.interpretation}}{{selectedIndicatorDataset?.processDescription}}{{selectedIndicatorDataset?.datasource}}{{selectedIndicatorDataset?.datasetName}}
+                      
+                        {{tag}}, 
+                      
+                    
+                      
+                        {{topic}}, 
+                      
+                    
+                      
+                        {{spatialUnit.spatialUnitName}}, 
+                      
+                    
+                      
+                        {{date}}, 
+                      
+                    {{selectedIndicatorDataset?.contact}}{{selectedIndicatorDataset?.lastUpdate}}{{selectedIndicatorDataset?.referenceDateNote}}

+            

+          

+        

+      

+    

+  

+
+  

+
+    

+      
+      

+        
Vollständigen Datensatz entfernen

+        
Durch betätigen des Löschen-Buttons wird der gesamte Indikatoren-Datensatz aus dem System unwiderruflich entfernt (Metadaten sowie alle Indikatoren-Werte aller Raumebenen und Zeitschnitte)

+
+        
ACHTUNG!

+        
Dabei werden auch sämtliche Indikatoren-Referenzen und Georessourcen-Referenzen auf den betroffene Indikator dauerhaft aus dem System entfernt. Etwaige Skripte, in denen der betroffene Indikator als Berechnungsgrundlage verwendet werden, werden ebenfalls ungültig und daher aus dem System gelöscht

+        
+        
Betroffene Georessourcen-Referenzen

+        

+          
keine

+        

+        

+          
+            
+              
+                
+                
+                
+              
+            
+            
+              
+                
+                
+                
+              
+            
+          
referenzierte Georessource - IDreferenzierte Georessource - Namereferenzierte Georessource - Beschreibung
{{entry.georesourceReference.referencedGeoresourceId}}{{entry.georesourceReference.referencedGeoresourceName}}{{entry.georesourceReference.referencedGeoresourceDescription}}

+        

+
+        
Betroffene Indikator-Referenzen

+        

+          
keine

+        

+        

+          
+            
+              
+                
+                
+                
+              
+            
+            
+              
+                
+                
+                
+              
+            
+          
referenzierter Indikator - IDreferenzierter Indikator - Namereferenzierter Indikator - Beschreibung
{{entry.indicatorReference.referencedIndicatorId}}{{entry.indicatorReference.referencedIndicatorName}}{{entry.indicatorReference.referencedIndicatorDescription}}

+        

+
+        
Betroffene Skripte

+        

+          
keine

+        

+        

+          
+            
+              
+                
+                
+                
+                
+              
+            
+            
+              
+                
+                
+                
+                
+              
+            
+          
Skript-IDSkript-NameSkript-BeschreibungID des berechneten Indikators
{{script.scriptId}}{{script.name}}{{script.description}}{{script.requiredIndicatorIds.join(', ')}}

+        

+      

+
+      
+      

+        
Zeitschnitte entfernen

+        
Hier können einzelne Zeitschnitte für alle verfügbaren Raumebenen entfernt werden

+
+        

+          
+          
+        

+
+        

+          

+            
+              
+                
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                
+              
+            
AuswählenZeitschnitt

+                    
+                  {{date.timestamp}}

+          

+        

+      

+
+      
+      

+        
Raumebenen entfernen

+        
Hier können einzelne Raumebenen für alle verfügbaren Zeitschnitte entfernt werden

+
+        

+          
+          
+        

+
+        

+          

+            
+              
+                
+                  
+                  
+                
+              
+              
+                
+                  
+                  
+                
+              
+            
AuswählenRaumebene

+                    
+                  {{spatialUnit.spatialUnitMetadata.spatialUnitLevel}}

+          

+        

+      

+    

+  

+
+  
+  

+    
+    
 Folgende Indikatoren-Daten sowie assoziierte Indikatoren- und Georessourcen-Referenzen und Skripte, bei denen Indikatoren als Berechnungsgrundlage verwendet werden, wurden erfolgreich gelöscht

+
+    

+      
Gesamter Indikatorendatensatz (Metadaten sowie alle Zeitreihen-Werte und Raumebenen)

+      
    
+        
  • {{dataset.indicatorName}}
    • 
+      

+
+      

+        
Skripte

+        
    
+          
  • {{script.name}}
    • 
+        

+      

+
+      

+        
Referenzen zu Georessourcen

+        
    
+          
  • {{reference.georesourceReference.referencedGeoresourceName}}
    • 
+        

+      

+
+      

+        
Referenzen zu anderen Indikatoren

+        
    
+          
  • {{reference.indicatorReference.referencedIndicatorName}}
    • 
+        

+      

+    

+
+    

+      
Zeitschnitte

+      
    
+        
  • {{timestamp.timestamp}}
    • 
+      

+    

+
+    

+      
Raumebenen

+      
    
+        
  • {{spatialUnit.spatialUnitMetadata.spatialUnitLevel}}
    • 
+      

+    

+  

+
+  
+  

+    
+    
 Löschen gescheitert

+    Folgende Datensätze konnten nicht gelöscht werden.
+    

+
+    

+      
+        
+          
+            
+            
+          
+        
+        
+          
+            
+            
+          
+        
+      
NameFehlermeldung
{{dataset[0].indicatorName}}

+    

+
+    

+      
+        
+          
+            
+            
+          
+        
+        
+          
+            
+            
+          
+        
+      
ZeitschnittFehlermeldung
{{dataset[0].timestamp}}

+    

+
+    

+      
+        
+          
+            
+            
+          
+        
+        
+          
+            
+            
+          
+        
+      
RaumebeneFehlermeldung
{{dataset[0].spatialUnitMetadata.spatialUnitLevel}}

+    

+  

+

+
+

+  
+  
+
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorDeleteModal/indicator-delete-modal.component.ts b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorDeleteModal/indicator-delete-modal.component.ts
new file mode 100644
index 000000000..2f8dcb211
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorDeleteModal/indicator-delete-modal.component.ts
@@ -0,0 +1,447 @@
+import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { HttpClient } from '@angular/common/http';
+import { Subscription } from 'rxjs';
+
+import { DataExchangeService } from '../../../../../services/data-exchange-service/data-exchange.service';
+import { BroadcastService } from '../../../../../services/broadcast-service/broadcast.service';
+
+declare var __env: any;
+
+interface IndicatorDeleteType {
+  displayName: string;
+  apiName: string;
+}
+
+interface ApplicableDate {
+  timestamp: string;
+  isSelected: boolean;
+}
+
+interface ApplicableSpatialUnit {
+  spatialUnitMetadata: any;
+  isSelected: boolean;
+}
+
+interface AffectedScript {
+  scriptId: string;
+  name: string;
+  description: string;
+  requiredIndicatorIds: string[];
+}
+
+interface AffectedIndicatorReference {
+  indicatorMetadata: any;
+  indicatorReference: any;
+}
+
+interface AffectedGeoresourceReference {
+  indicatorMetadata: any;
+  georesourceReference: any;
+}
+
+@Component({
+  selector: 'app-indicator-delete-modal',
+  templateUrl: './indicator-delete-modal.component.html',
+  styleUrls: ['./indicator-delete-modal.component.css']
+})
+export class IndicatorDeleteModalComponent implements OnInit, OnDestroy {
+
+  indicatorDeleteTypes: IndicatorDeleteType[] = [
+    {
+      displayName: "Gesamter Datensatz",
+      apiName: "indicatorDataset"
+    },
+    {
+      displayName: "Einzelne Zeitschnitte", 
+      apiName: "indicatorTimestamp"
+    },
+    {
+      displayName: "Einzelne Raumebenen",
+      apiName: "indicatorSpatialUnit"
+    }
+  ];
+
+  indicatorDeleteType: IndicatorDeleteType = this.indicatorDeleteTypes[0];
+  selectedIndicatorDataset: any = undefined;
+  currentIndicatorId: string = '';
+  currentApplicableDates: ApplicableDate[] = [];
+  selectIndicatorTimestampsInput: boolean = false;
+  currentApplicableSpatialUnits: ApplicableSpatialUnit[] = [];
+  selectIndicatorSpatialUnitsInput: boolean = false;
+  indicatorNameFilter: string = '';
+
+  loadingData: boolean = false;
+
+  successfullyDeletedDatasets: any[] = [];
+  successfullyDeletedTimestamps: ApplicableDate[] = [];
+  successfullyDeletedSpatialUnits: ApplicableSpatialUnit[] = [];
+  failedDatasetsAndErrors: [any, string][] = [];
+  failedTimestampsAndErrors: [ApplicableDate, string][] = [];
+  failedSpatialUnitsAndErrors: [ApplicableSpatialUnit, string][] = [];
+
+  affectedScripts: AffectedScript[] = [];
+  affectedIndicatorReferences: AffectedIndicatorReference[] = [];
+  affectedGeoresourceReferences: AffectedGeoresourceReference[] = [];
+
+  showSuccessAlert: boolean = false;
+  showErrorAlert: boolean = false;
+
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    private http: HttpClient,
+    private dataExchangeService: DataExchangeService,
+    private broadcastService: BroadcastService,
+    @Inject('kommonitorDataExchangeService') public angularJsDataExchangeService: any
+  ) { }
+
+  ngOnInit(): void {
+    this.resetIndicatorsDeleteForm();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  onChangeSelectIndicatorTimestampEntries(): void {
+    this.selectIndicatorTimestampsInput = !this.selectIndicatorTimestampsInput;
+
+    this.currentApplicableDates.forEach(applicableDate => {
+      applicableDate.isSelected = this.selectIndicatorTimestampsInput;
+    });
+  }
+
+  onChangeSelectIndicatorSpatialUnitsEntries(): void {
+    this.selectIndicatorSpatialUnitsInput = !this.selectIndicatorSpatialUnitsInput;
+
+    this.currentApplicableSpatialUnits.forEach(applicableSpatialUnit => {
+      applicableSpatialUnit.isSelected = this.selectIndicatorSpatialUnitsInput;
+    });
+  }
+
+  onChangeSelectedIndicator(): void {
+    if (this.selectedIndicatorDataset) {
+      this.currentIndicatorId = this.selectedIndicatorDataset.indicatorId;
+      
+      this.successfullyDeletedDatasets = [];
+      this.successfullyDeletedTimestamps = [];
+      this.successfullyDeletedSpatialUnits = [];
+      this.failedDatasetsAndErrors = [];
+      this.failedTimestampsAndErrors = [];
+      this.failedSpatialUnitsAndErrors = [];
+
+      this.currentApplicableDates = [];
+      for (const timestamp of this.selectedIndicatorDataset.applicableDates) {
+        this.currentApplicableDates.push({
+          timestamp: timestamp,
+          isSelected: false
+        });
+      }
+
+      this.currentApplicableSpatialUnits = [];
+      for (const spatialUnitMetadata of this.angularJsDataExchangeService.availableSpatialUnits) {
+        if (this.selectedIndicatorDataset.applicableSpatialUnits && 
+            this.selectedIndicatorDataset.applicableSpatialUnits.some((o: any) => o.spatialUnitName === spatialUnitMetadata.spatialUnitLevel)) {
+          
+          this.currentApplicableSpatialUnits.push({
+            spatialUnitMetadata: spatialUnitMetadata,
+            isSelected: false
+          });
+        }
+      }
+
+      this.affectedScripts = this.gatherAffectedScripts();
+      this.affectedIndicatorReferences = this.gatherAffectedIndicatorReferences();
+      this.affectedGeoresourceReferences = this.gatherAffectedGeoresourceReferences();
+    }
+  }
+
+  resetIndicatorsDeleteForm(): void {
+    this.selectedIndicatorDataset = undefined;
+    this.currentApplicableDates = [];
+    this.selectIndicatorTimestampsInput = false;
+    this.currentApplicableSpatialUnits = [];
+    this.selectIndicatorSpatialUnitsInput = false;
+    this.indicatorDeleteType = this.indicatorDeleteTypes[0];
+
+    this.successfullyDeletedDatasets = [];
+    this.successfullyDeletedTimestamps = [];
+    this.successfullyDeletedSpatialUnits = [];
+    this.failedDatasetsAndErrors = [];
+    this.failedTimestampsAndErrors = [];
+    this.failedSpatialUnitsAndErrors = [];
+    this.affectedScripts = [];
+    this.affectedIndicatorReferences = [];
+    this.affectedGeoresourceReferences = [];
+    
+    this.hideSuccessAlert();
+    this.hideErrorAlert();
+  }
+
+  gatherAffectedScripts(): AffectedScript[] {
+    const affectedScripts: AffectedScript[] = [];
+
+    this.angularJsDataExchangeService.availableProcessScripts.forEach(script => {
+      const requiredIndicatorIds = script.requiredIndicatorIds;
+
+      for (let i = 0; i < requiredIndicatorIds.length; i++) {
+        const indicatorId = requiredIndicatorIds[i];
+        if (indicatorId === this.selectedIndicatorDataset.indicatorId) {
+          affectedScripts.push(script);
+          break;
+        }
+      }
+    });
+
+    return affectedScripts;
+  }
+
+  gatherAffectedGeoresourceReferences(): AffectedGeoresourceReference[] {
+    const affectedGeoresourceReferences: AffectedGeoresourceReference[] = [];
+
+    const georesourceReferences = this.selectedIndicatorDataset.referencedGeoresources;
+
+    for (let i = 0; i < georesourceReferences.length; i++) {
+      const georesourceReference = georesourceReferences[i];
+
+      affectedGeoresourceReferences.push({
+        indicatorMetadata: this.selectedIndicatorDataset,
+        georesourceReference: georesourceReference
+      });
+    }
+
+    return affectedGeoresourceReferences;
+  }
+
+  gatherAffectedIndicatorReferences(): AffectedIndicatorReference[] {
+    const affectedIndicatorReferences: AffectedIndicatorReference[] = [];
+
+    // First add all direct references from selected indicator
+    const indicatorReferences_selectedIndicator = this.selectedIndicatorDataset.referencedIndicators;
+
+    for (let i = 0; i < indicatorReferences_selectedIndicator.length; i++) {
+      const indicatorReference_selectedIndicator = indicatorReferences_selectedIndicator[i];
+
+      affectedIndicatorReferences.push({
+        indicatorMetadata: this.selectedIndicatorDataset,
+        indicatorReference: indicatorReference_selectedIndicator
+      });
+    }
+
+    // Then add all references, where selected indicator is the referencedIndicator 
+    this.angularJsDataExchangeService.availableIndicators.forEach(indicator => {
+      const indicatorReferences = indicator.referencedIndicators;
+
+      for (let i = 0; i < indicatorReferences.length; i++) {
+        const indicatorReference = indicatorReferences[i];
+        if (indicatorReference.referencedIndicatorId === this.selectedIndicatorDataset.indicatorId) {
+          affectedIndicatorReferences.push({
+            indicatorMetadata: this.selectedIndicatorDataset,
+            indicatorReference: indicatorReference
+          });
+        }
+      }
+    });
+
+    return affectedIndicatorReferences;
+  }
+
+  deleteIndicatorData(): void {
+    this.loadingData = true;
+
+    this.successfullyDeletedDatasets = [];
+    this.successfullyDeletedTimestamps = [];
+    this.successfullyDeletedSpatialUnits = [];
+    this.failedDatasetsAndErrors = [];
+    this.failedTimestampsAndErrors = [];
+    this.failedSpatialUnitsAndErrors = [];
+
+    // Depending on deleteType we must execute different DELETE requests
+    if (this.indicatorDeleteType.apiName === "indicatorDataset") {
+      // Delete complete dataset
+      this.deleteWholeIndicatorDataset();
+    } else if (this.indicatorDeleteType.apiName === "indicatorTimestamp") {
+      // Delete all selected timestamps from indicator
+      this.deleteSelectedIndicatorTimestamps();
+    } else if (this.indicatorDeleteType.apiName === "indicatorSpatialUnit") {
+      // Delete all selected spatial units from indicator
+      this.deleteSelectedIndicatorSpatialUnits();
+    }
+  }
+
+  deleteWholeIndicatorDataset(): void {
+    this.loadingData = true;
+
+    const url = `${this.angularJsDataExchangeService.baseUrlToKomMonitorDataAPI}/indicators/${this.selectedIndicatorDataset.indicatorId}`;
+
+    this.http.delete(url).subscribe({
+      next: (response) => {
+        this.successfullyDeletedDatasets.push(this.selectedIndicatorDataset);
+
+        // Fetch indicator metadata again as an indicator was deleted
+        this.broadcastService.broadcast("refreshIndicatorOverviewTable", { action: "delete", indicatorId: this.currentIndicatorId });
+
+        setTimeout(() => {
+          this.broadcastService.broadcast("refreshAdminDashboardDiagrams");
+        }, 500);
+
+        this.showSuccessAlert = true;
+
+        setTimeout(() => {
+          this.loadingData = false;
+        });
+      },
+      error: (error) => {
+        if (error.error) {
+          this.failedDatasetsAndErrors.push([this.selectedIndicatorDataset, this.angularJsDataExchangeService.syntaxHighlightJSON(error.error)]);
+        } else {
+          this.failedDatasetsAndErrors.push([this.selectedIndicatorDataset, this.angularJsDataExchangeService.syntaxHighlightJSON(error)]);
+        }
+
+        this.showErrorAlert = true;
+        this.loadingData = false;
+      }
+    });
+  }
+
+  async deleteSelectedIndicatorTimestamps(): Promise {
+    // Iterate over all applicable spatial units and selected applicable dates
+    for (const applicableDate of this.currentApplicableDates) {
+      if (applicableDate.isSelected) {
+        for (const applicableSpatialUnit of this.currentApplicableSpatialUnits) {
+          await this.getDeleteTimestampPromise(applicableDate, applicableSpatialUnit.spatialUnitMetadata.spatialUnitId);
+        }
+      }
+    }
+
+    if (this.failedTimestampsAndErrors.length > 0) {
+      // Error handling
+      this.showErrorAlert = true;
+      this.loadingData = false;
+    }
+    
+    if (this.successfullyDeletedTimestamps.length > 0) {
+      this.showSuccessAlert = true;
+
+      // Refresh overview table
+      this.broadcastService.broadcast("refreshIndicatorOverviewTable", { action: "edit", indicatorId: this.currentIndicatorId });
+
+      // Refresh all admin dashboard diagrams due to modified metadata
+      setTimeout(() => {
+        this.broadcastService.broadcast("refreshAdminDashboardDiagrams");
+      }, 500);
+
+      this.loadingData = false;
+    }
+  }
+
+  async deleteSelectedIndicatorSpatialUnits(): Promise {
+    // Iterate over all applicable spatial units
+    for (const applicableSpatialUnit of this.currentApplicableSpatialUnits) {
+      if (applicableSpatialUnit.isSelected) {
+        await this.getDeleteSpatialUnitPromise(applicableSpatialUnit);
+      }
+    }
+
+    if (this.failedSpatialUnitsAndErrors.length > 0) {
+      // Error handling
+      this.showErrorAlert = true;
+      this.loadingData = false;
+    }
+    
+    if (this.successfullyDeletedSpatialUnits.length > 0) {
+      this.showSuccessAlert = true;
+
+      // Fetch indicator metadata again as an indicator was modified
+      await this.angularJsDataExchangeService.fetchIndicatorsMetadata(this.angularJsDataExchangeService.currentKeycloakLoginRoles);
+      
+      // Refresh overview table
+      this.broadcastService.broadcast("refreshIndicatorOverviewTable", { action: "edit", indicatorId: this.currentIndicatorId });
+
+      // Refresh all admin dashboard diagrams due to modified metadata
+      setTimeout(() => {
+        this.broadcastService.broadcast("refreshAdminDashboardDiagrams");
+      }, 500);
+
+      this.loadingData = false;
+    }
+  }
+
+  getDeleteTimestampPromise(applicableDate: ApplicableDate, spatialUnitId: string): Promise {
+    // Timestamp looks like 2020-12-31
+    const timestamp = applicableDate.timestamp;
+
+    // [yyyy, mm, dd]
+    const timestampComps = timestamp.split("-");
+
+    const url = `${this.angularJsDataExchangeService.baseUrlToKomMonitorDataAPI}/indicators/${this.selectedIndicatorDataset.indicatorId}/${spatialUnitId}/${timestampComps[0]}/${timestampComps[1]}/${timestampComps[2]}`;
+
+    return this.http.delete(url).toPromise().then(
+      (response) => {
+        if (!this.successfullyDeletedTimestamps.includes(applicableDate)) {
+          this.successfullyDeletedTimestamps.push(applicableDate);
+        }
+      },
+      (error) => {
+        if (error.error) {
+          this.failedTimestampsAndErrors.push([applicableDate, this.angularJsDataExchangeService.syntaxHighlightJSON(error.error)]);
+        } else {
+          this.failedTimestampsAndErrors.push([applicableDate, this.angularJsDataExchangeService.syntaxHighlightJSON(error)]);
+        }
+      }
+    );
+  }
+
+  getDeleteSpatialUnitPromise(applicableSpatialUnit: ApplicableSpatialUnit): Promise {
+    const url = `${this.angularJsDataExchangeService.baseUrlToKomMonitorDataAPI}/indicators/${this.selectedIndicatorDataset.indicatorId}/${applicableSpatialUnit.spatialUnitMetadata.spatialUnitId}`;
+
+    return this.http.delete(url).toPromise().then(
+      (response) => {
+        if (!this.successfullyDeletedSpatialUnits.includes(applicableSpatialUnit)) {
+          this.successfullyDeletedSpatialUnits.push(applicableSpatialUnit);
+        }
+      },
+      (error) => {
+        if (error.error) {
+          this.failedSpatialUnitsAndErrors.push([applicableSpatialUnit, this.angularJsDataExchangeService.syntaxHighlightJSON(error.error)]);
+        } else {
+          this.failedSpatialUnitsAndErrors.push([applicableSpatialUnit, this.angularJsDataExchangeService.syntaxHighlightJSON(error)]);
+        }
+      }
+    );
+  }
+
+  hideSuccessAlert(): void {
+    this.showSuccessAlert = false;
+  }
+
+  hideErrorAlert(): void {
+    this.showErrorAlert = false;
+  }
+
+  getIndicatorsWithPermission(): any[] {
+    return this.angularJsDataExchangeService.availableIndicators.filter(indicator => 
+      indicator.userPermissions.includes("creator")
+    );
+  }
+
+  getFilteredIndicators(): any[] {
+    const indicators = this.getIndicatorsWithPermission();
+    if (!this.indicatorNameFilter) {
+      return indicators;
+    }
+    return indicators.filter(indicator => 
+      indicator.indicatorName.toLowerCase().includes(this.indicatorNameFilter.toLowerCase())
+    );
+  }
+
+  trackByIndex(index: number, item: any): number {
+    return index;
+  }
+
+  close(): void {
+    this.activeModal.dismiss();
+  }
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditFeaturesModal/indicator-edit-features-modal.component.css b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditFeaturesModal/indicator-edit-features-modal.component.css
new file mode 100644
index 000000000..c0b4ae099
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditFeaturesModal/indicator-edit-features-modal.component.css
@@ -0,0 +1,391 @@
+/* Modal Styles */
+.modal-xl {
+  max-width: 90%;
+}
+
+.loading-overlay-admin-panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon-spin {
+  animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Multi-step Form Styles */
+.multiStepForm {
+  position: relative;
+  margin-top: 30px;
+}
+
+.multiStepForm fieldset {
+  background: white;
+  border: 0 none;
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding-bottom: 20px;
+  position: relative;
+}
+
+.multiStepForm fieldset:not(:first-of-type) {
+  display: none;
+}
+
+.multiStepForm .fs-title {
+  font-size: 15px;
+  text-transform: uppercase;
+  color: #2C3E50;
+  margin-bottom: 10px;
+  letter-spacing: 2px;
+  font-weight: bold;
+}
+
+.multiStepForm .fs-subtitle {
+  font-weight: normal;
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 20px;
+}
+
+/* Progress Bar */
+#progressbar {
+  margin-bottom: 30px;
+  overflow: hidden;
+  color: lightgrey;
+  padding-left: 0;
+}
+
+#progressbar li {
+  list-style-type: none;
+  font-size: 15px;
+  width: 50%;
+  float: left;
+  position: relative;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+#progressbar li:before {
+  width: 50px;
+  height: 50px;
+  line-height: 45px;
+  display: block;
+  font-size: 20px;
+  color: #ffffff;
+  background: lightgray;
+  border-radius: 50%;
+  margin: 0 auto 10px auto;
+  padding: 2px;
+}
+
+#progressbar li.active:before,
+#progressbar li.active:after {
+  background: #27AE60;
+}
+
+#progressbar li.active {
+  color: #27AE60;
+}
+
+/* Action Buttons */
+.action-button {
+  width: 100px;
+  background: #27AE60;
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 1px;
+  cursor: pointer;
+  padding: 10px 5px;
+  margin: 10px 5px;
+}
+
+.action-button-previous {
+  width: 100px;
+  background: #616161;
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 1px;
+  cursor: pointer;
+  padding: 10px 5px;
+  margin: 10px 5px;
+}
+
+.action-button:hover,
+.action-button:focus {
+  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
+}
+
+.action-button-previous:hover,
+.action-button-previous:focus {
+  box-shadow: 0 0 0 2px white, 0 0 0 3px #616161;
+}
+
+/* Switch Styles */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switchslider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: .4s;
+}
+
+.switchslider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: .4s;
+}
+
+input:checked + .switchslider {
+  background-color: #2196F3;
+}
+
+input:focus + .switchslider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .switchslider:before {
+  transform: translateX(26px);
+}
+
+.switchslider.round {
+  border-radius: 34px;
+}
+
+.switchslider.round:before {
+  border-radius: 50%;
+}
+
+/* Table Styles */
+.admin-table-wrapper {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.featureTableWrapper {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+/* Alert Styles */
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.alert-success {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+
+.alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+
+.alert-info {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+
+.alert-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+
+.alert-dismissable .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  color: inherit;
+}
+
+/* Form Styles */
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+.form-control:focus {
+  border-color: #66afe9;
+  outline: 0;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
+}
+
+.help-block {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  color: #737373;
+}
+
+.with-errors {
+  color: #a94442;
+}
+
+/* Button Styles */
+.btn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.btn-info {
+  color: #fff;
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+
+.btn-success {
+  color: #fff;
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+
+.btn-default {
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+.btn:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+/* Modal Footer */
+.modal-footer {
+  padding: 15px;
+  text-align: right;
+  border-top: 1px solid #e5e5e5;
+}
+
+.pull-left {
+  float: left !important;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .modal-xl {
+    max-width: 95%;
+  }
+  
+  .col-md-3,
+  .col-md-4,
+  .col-md-6 {
+    margin-bottom: 15px;
+  }
+  
+  #progressbar li {
+    font-size: 12px;
+  }
+  
+  .action-button,
+  .action-button-previous {
+    width: 80px;
+    font-size: 12px;
+  }
+}
+
+/* Vertical Align Helper */
+.vertical-align {
+  display: flex;
+  align-items: center;
+}
+
+/* Pre and Code Styles */
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  color: #333;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #c7254e;
+  background-color: #f9f2f4;
+  border-radius: 4px;
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditFeaturesModal/indicator-edit-features-modal.component.html b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditFeaturesModal/indicator-edit-features-modal.component.html
new file mode 100644
index 000000000..c93a1900a
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditFeaturesModal/indicator-edit-features-modal.component.html
@@ -0,0 +1,402 @@
+ 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditFeaturesModal/indicator-edit-features-modal.component.ts b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditFeaturesModal/indicator-edit-features-modal.component.ts
new file mode 100644
index 000000000..a2ce8b419
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditFeaturesModal/indicator-edit-features-modal.component.ts
@@ -0,0 +1,577 @@
+import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { DataExchangeService } from 'services/data-exchange-service/data-exchange.service';
+import { KommonitorIndicatorDataGridHelperService } from 'services/adminIndicatorUnit/kommonitor-data-grid-helper.service';
+import { MultiStepHelperServiceService } from 'services/multi-step-helper-service/multi-step-helper-service.service';
+
+declare const $: any;
+
+@Component({
+  selector: 'app-indicator-edit-features-modal',
+  templateUrl: './indicator-edit-features-modal.component.html',
+  styleUrls: ['./indicator-edit-features-modal.component.css']
+})
+export class IndicatorEditFeaturesModalComponent implements OnInit {
+  @ViewChild('modal') modal!: ElementRef;
+  
+  private modalRef?: NgbModalRef;
+  
+  // Form data
+  currentIndicatorDataset: any;
+  targetApplicableSpatialUnit: any;
+  overviewTableTargetSpatialUnitMetadata: any;
+  indicatorFeaturesJSON: any;
+  remainingFeatureHeaders: any[] = [];
+  
+  // Converter settings
+  converter: any;
+  schema: any;
+  mimeType: any;
+  datasourceType: any;
+  spatialUnitRefKeyProperty: string = '';
+  targetSpatialUnitMetadata: any;
+  
+  // Importer objects
+  converterDefinition: any;
+  datasourceTypeDefinition: any;
+  propertyMappingDefinition: any;
+  putBody_indicators: any;
+  
+  // Settings
+  keepMissingValues: boolean = true;
+  isPublic: boolean = false;
+  enableDeleteFeatures: boolean = false;
+  
+  // Timeseries mapping
+  timeseriesMappingReference: any[] = [];
+  
+  // Role management
+  roleManagementTableOptions: any;
+  
+  // Messages
+  successMessagePart: string = '';
+  errorMessagePart: string = '';
+  importerErrors: any[] = [];
+  indicatorMappingConfigImportError: string = '';
+  
+  // Loading states
+  loadingData: boolean = false;
+  
+  // Imported features
+  importedFeatures: any[] = [];
+  
+  // Multi-step form
+  currentStep: number = 1;
+  totalSteps: number = 2;
+  
+  constructor(
+    private modalService: NgbModal,
+    private broadcastService: BroadcastService,
+    @Inject('kommonitorDataExchangeService') public angularJsDataExchangeService: any,
+    @Inject('kommonitorDataGridHelperService') public angularJsDataGridHelperService: any,
+    @Inject('kommonitorImporterHelperService') public angularJsImporterHelperService: any,
+    @Inject('kommonitorMultiStepFormHelperService') private angularJsMultiStepFormHelperService: any,
+    private dataExchangeService: DataExchangeService,
+    private dataGridHelperService: KommonitorIndicatorDataGridHelperService,
+    private multiStepHelperService: MultiStepHelperServiceService
+  ) {}
+
+  ngOnInit(): void {
+    this.setupEventListeners();
+    this.initializeForm();
+  }
+
+  private setupEventListeners(): void {
+    // Listen for edit indicator features event
+    this.broadcastService.currentBroadcastMsg.subscribe((data: any) => {
+      if (data.msg === 'onEditIndicatorFeatures') {
+        this.openModal(data.values);
+      } else if (data.msg === 'timeseriesMappingChanged') {
+        this.timeseriesMappingReference = data.mapping;
+      } else if (data.msg === 'refreshIndicatorOverviewTableCompleted') {
+        if (this.currentIndicatorDataset) {
+          this.currentIndicatorDataset = this.angularJsDataExchangeService.getIndicatorMetadataById(this.currentIndicatorDataset.indicatorId);
+        }
+      } else if (data.msg === 'showLoadingIcon_indicator') {
+        this.loadingData = true;
+      } else if (data.msg === 'hideLoadingIcon_indicator') {
+        this.loadingData = false;
+      } else if (data.msg === 'onDeleteFeatureEntry_indicator') {
+        this.broadcastService.broadcast('refreshIndicatorOverviewTable', { action: 'edit', indicatorId: this.currentIndicatorDataset.indicatorId });
+        this.refreshIndicatorEditFeaturesOverviewTable();
+      }
+    });
+  }
+
+  private initializeForm(): void {
+    this.resetIndicatorEditFeaturesForm();
+  }
+
+  openModal(indicatorDataset: any): void {
+    if (this.currentIndicatorDataset && this.currentIndicatorDataset.indicatorId === indicatorDataset.indicatorId) {
+      return;
+    }
+
+    this.currentIndicatorDataset = indicatorDataset;
+    this.resetIndicatorEditFeaturesForm();
+    this.angularJsDataGridHelperService.buildDataGrid_featureTable_indicatorResource("indicatorFeatureTable", [], []);
+
+    // Register multi-step form handlers
+    this.angularJsMultiStepFormHelperService.registerClickHandler("indicatorEditFeaturesForm");
+  }
+
+  closeModal(): void {
+    if (this.modalRef) {
+      this.modalRef.close();
+    }
+  }
+
+  resetIndicatorEditFeaturesForm(): void {
+    this.isPublic = false;
+    this.enableDeleteFeatures = false;
+    
+    // Reset edit banners
+    this.angularJsDataGridHelperService.featureTable_indicator_lastUpdate_timestamp_success = undefined;
+    this.angularJsDataGridHelperService.featureTable_indicator_lastUpdate_timestamp_failure = undefined;
+
+    this.indicatorFeaturesJSON = undefined;
+    this.remainingFeatureHeaders = [];
+    this.overviewTableTargetSpatialUnitMetadata = undefined;
+    
+    // Set default spatial unit
+    for (const spatialUnitMetadataEntry of this.angularJsDataExchangeService.availableSpatialUnits) {
+      if (this.currentIndicatorDataset?.applicableSpatialUnits?.some((o: any) => o.spatialUnitName === spatialUnitMetadataEntry.spatialUnitLevel)) {
+        this.overviewTableTargetSpatialUnitMetadata = spatialUnitMetadataEntry;
+        break;
+      }
+    }
+
+    this.roleManagementTableOptions = this.angularJsDataGridHelperService.buildRoleManagementGrid(
+      'indicatorEditFeaturesRoleManagementTable', 
+      this.roleManagementTableOptions, 
+      this.angularJsDataExchangeService.accessControl, 
+      [], 
+      true
+    );
+
+    this.spatialUnitRefKeyProperty = '';
+    this.targetSpatialUnitMetadata = undefined;
+    this.targetApplicableSpatialUnit = undefined;
+
+    this.converter = undefined;
+    this.schema = undefined;
+    this.mimeType = undefined;
+    this.datasourceType = undefined;
+
+    this.converterDefinition = undefined;
+    this.datasourceTypeDefinition = undefined;
+    this.propertyMappingDefinition = undefined;
+    this.putBody_indicators = undefined;
+
+    this.keepMissingValues = true;
+
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+    this.importerErrors = [];
+    this.indicatorMappingConfigImportError = '';
+
+    this.broadcastService.broadcast('resetTimeseriesMapping');
+
+    this.hideSuccessAlert();
+    this.hideErrorAlert();
+    this.hideMappingConfigErrorAlert();
+  }
+
+  refreshIndicatorEditFeaturesOverviewTable(): void {
+    if (!this.overviewTableTargetSpatialUnitMetadata) {
+      return;
+    }
+
+    this.loadingData = true;
+    
+    const url = this.angularJsDataExchangeService.getBaseUrlToKomMonitorDataAPI_spatialResource() + 
+                "/indicators/" + this.currentIndicatorDataset.indicatorId + "/" + 
+                this.overviewTableTargetSpatialUnitMetadata.spatialUnitId + "/without-geometry";
+
+    this.angularJsDataExchangeService.$http({
+      url: url,
+      method: "GET"
+    }).then((response: any) => {
+      this.indicatorFeaturesJSON = response.data;
+      
+      const tmpRemainingHeaders: string[] = [];
+      
+      for (const property in this.indicatorFeaturesJSON[0]) {
+        // Only show indicator date columns as editable fields
+        if (property.includes(window.__env.indicatorDatePrefix)) {
+          tmpRemainingHeaders.push(property);
+        }
+      }
+
+      // Sort date headers
+      tmpRemainingHeaders.sort((a, b) => a.localeCompare(b));
+      
+      this.remainingFeatureHeaders = tmpRemainingHeaders;
+      
+      this.angularJsDataGridHelperService.buildDataGrid_featureTable_indicatorResource(
+        "indicatorFeatureTable", 
+        tmpRemainingHeaders, 
+        this.indicatorFeaturesJSON, 
+        this.currentIndicatorDataset.indicatorId, 
+        this.angularJsDataGridHelperService.resourceType_indicator, 
+        this.enableDeleteFeatures, 
+        this.overviewTableTargetSpatialUnitMetadata.spatialUnitId
+      );
+
+      this.loadingData = false;
+    }).catch((error: any) => {
+      if (error.data) {
+        this.errorMessagePart = this.angularJsDataExchangeService.syntaxHighlightJSON(error.data);
+      } else {
+        this.errorMessagePart = this.angularJsDataExchangeService.syntaxHighlightJSON(error);
+      }
+      this.showErrorAlert();
+      this.loadingData = false;
+    });
+  }
+
+  clearAllIndicatorFeatures(): void {
+    if (!this.overviewTableTargetSpatialUnitMetadata) {
+      return;
+    }
+
+    this.loadingData = true;
+    
+    const url = this.angularJsDataExchangeService.baseUrlToKomMonitorDataAPI + 
+                "/indicators/" + this.currentIndicatorDataset.indicatorId + "/" + 
+                this.overviewTableTargetSpatialUnitMetadata.spatialUnitId;
+
+    this.angularJsDataExchangeService.$http({
+      url: url,
+      method: "DELETE"
+    }).then((response: any) => {
+      this.indicatorFeaturesJSON = undefined;
+      this.remainingFeatureHeaders = [];
+
+      this.broadcastService.broadcast('refreshIndicatorOverviewTable', { action: 'edit', indicatorId: this.currentIndicatorDataset.indicatorId });
+      
+      // Force empty feature overview table on successful deletion of entries
+      this.angularJsDataGridHelperService.buildDataGrid_featureTable_indicatorResource("indicatorFeatureTable", [], []);
+
+      this.successMessagePart = this.currentIndicatorDataset.indicatorName;
+      this.showSuccessAlert();
+      this.loadingData = false;
+    }).catch((error: any) => {
+      if (error.data) {
+        this.errorMessagePart = this.angularJsDataExchangeService.syntaxHighlightJSON(error.data);
+      } else {
+        this.errorMessagePart = this.angularJsDataExchangeService.syntaxHighlightJSON(error);
+      }
+      this.showErrorAlert();
+      this.loadingData = false;
+    });
+  }
+
+  onChangeSelectedSpatialUnit(targetSpatialUnitMetadata: any): void {
+    const applicableSpatialUnits = this.currentIndicatorDataset.applicableSpatialUnits;
+
+    for (const applicableSpatialUnit of applicableSpatialUnits) {
+      if (applicableSpatialUnit.spatialUnitId === targetSpatialUnitMetadata.spatialUnitId) {
+        this.targetApplicableSpatialUnit = applicableSpatialUnit;
+        break;
+      }
+    }
+    
+    this.refreshRoles();
+  }
+
+  refreshRoles(): void {
+    let permissions = this.targetApplicableSpatialUnit ? this.targetApplicableSpatialUnit.permissions : [];
+    
+    if (this.currentIndicatorDataset) {
+      const permissionIds_ownerUnit = this.angularJsDataExchangeService.getAccessControlById(this.currentIndicatorDataset.ownerId)
+        .permissions
+        .filter((permission: any) => permission.permissionLevel == "viewer" || permission.permissionLevel == "editor")
+        .map((permission: any) => permission.permissionId);
+      
+      permissions = permissions.concat(permissionIds_ownerUnit);
+    }
+
+    // Set datasetOwner to disable checkboxes for owned datasets in permissions-table
+    this.angularJsDataExchangeService.accessControl.forEach((item: any) => {
+      if (this.currentIndicatorDataset) {
+        if (item.organizationalUnitId == this.currentIndicatorDataset.ownerId) {
+          item.datasetOwner = true;
+        } else {
+          item.datasetOwner = false;
+        }
+      }
+    });
+
+    this.roleManagementTableOptions = this.angularJsDataGridHelperService.buildRoleManagementGrid(
+      'indicatorEditFeaturesRoleManagementTable', 
+      this.roleManagementTableOptions, 
+      this.angularJsDataExchangeService.accessControl, 
+      permissions, 
+      true
+    );
+  }
+
+  onChangeConverter(): void {
+    this.schema = this.converter.schemas ? this.converter.schemas[0] : undefined;
+    this.mimeType = this.converter.mimeTypes[0];
+  }
+
+  onChangeMimeType(mimeType: string): void {
+    this.mimeType = mimeType;
+  }
+
+  onChangeIsPublic(isPublic: boolean): void {
+    this.isPublic = isPublic;
+  }
+
+  onChangeEnableDeleteFeatures(): void {
+    if (this.enableDeleteFeatures) {
+      $(".indicatorDeleteFeatureRecordBtn").attr("disabled", false);
+    } else {
+      $(".indicatorDeleteFeatureRecordBtn").attr("disabled", true);
+    }
+  }
+
+  filterOverviewTargetSpatialUnits(): any {
+    return (spatialUnitMetadata: any) => {
+      if (this.currentIndicatorDataset) {
+        const isIncluded = this.currentIndicatorDataset.applicableSpatialUnits.some((o: any) => o.spatialUnitName === spatialUnitMetadata.spatialUnitLevel);
+        return isIncluded;
+      }
+      return false;
+    };
+  }
+
+  filterByKomMonitorProperties(): any {
+    return (item: any) => {
+      try {
+        if (item === window.__env.FEATURE_ID_PROPERTY_NAME || 
+            item === window.__env.FEATURE_NAME_PROPERTY_NAME || 
+            item === "validStartDate" || 
+            item === "validEndDate") {
+          return false;
+        }
+        return true;
+      } catch (error) {
+        return false;
+      }
+    };
+  }
+
+  async buildImporterObjects(): Promise {
+    this.converterDefinition = this.buildConverterDefinition();
+    this.datasourceTypeDefinition = await this.buildDatasourceTypeDefinition();
+    this.propertyMappingDefinition = this.buildPropertyMappingDefinition();
+
+    const roleIds = this.angularJsDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
+
+    const scopeProperties = {
+      "targetSpatialUnitMetadata": {
+        "spatialUnitLevel": this.targetSpatialUnitMetadata.spatialUnitLevel,
+      },
+      "currentIndicatorDataset": {
+        "defaultClassificationMapping": this.currentIndicatorDataset.defaultClassificationMapping
+      },
+      "permissions": roleIds,
+      "ownerId": this.currentIndicatorDataset.ownerId,
+      "isPublic": this.isPublic
+    };
+    
+    this.putBody_indicators = this.angularJsImporterHelperService.buildPutBody_indicators(scopeProperties);
+
+    if (!this.converterDefinition || !this.datasourceTypeDefinition || !this.propertyMappingDefinition || !this.putBody_indicators) {
+      return false;
+    }
+
+    return true;
+  }
+
+  buildConverterDefinition(): any {
+    return this.angularJsImporterHelperService.buildConverterDefinition(
+      this.converter, 
+      "converterParameter_indicatorEditFeatures_", 
+      this.schema, 
+      this.mimeType
+    );
+  }
+
+  async buildDatasourceTypeDefinition(): Promise {
+    try {
+      return await this.angularJsImporterHelperService.buildDatasourceTypeDefinition(
+        this.datasourceType, 
+        'datasourceTypeParameter_indicatorEditFeatures_', 
+        'indicatorDataSourceInput_editFeatures'
+      );
+    } catch (error: any) {
+      if (error.data) {
+        this.errorMessagePart = this.angularJsDataExchangeService.syntaxHighlightJSON(error.data);
+      } else {
+        this.errorMessagePart = this.angularJsDataExchangeService.syntaxHighlightJSON(error);
+      }
+      this.showErrorAlert();
+      this.loadingData = false;
+      return null;
+    }
+  }
+
+  buildPropertyMappingDefinition(): any {
+    let timeseriesMappingForImporter = this.timeseriesMappingReference || [];
+    return this.angularJsImporterHelperService.buildPropertyMapping_indicatorResource(
+      this.spatialUnitRefKeyProperty, 
+      timeseriesMappingForImporter, 
+      this.keepMissingValues
+    );
+  }
+
+  async editIndicatorFeatures(): Promise {
+    this.loadingData = true;
+    this.importerErrors = [];
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+
+    // Collect data and build request for importer
+    const allDataSpecified = await this.buildImporterObjects();
+
+    if (!allDataSpecified) {
+      $("#indicatorEditFeaturesForm").validator("update");
+      $("#indicatorEditFeaturesForm").validator("validate");
+      this.loadingData = false;
+      return;
+    }
+
+    try {
+      // Dry run first
+      const updateIndicatorResponse_dryRun = await this.angularJsImporterHelperService.updateIndicator(
+        this.converterDefinition, 
+        this.datasourceTypeDefinition, 
+        this.propertyMappingDefinition, 
+        this.currentIndicatorDataset.indicatorId, 
+        this.putBody_indicators, 
+        true
+      );
+
+      if (!this.angularJsImporterHelperService.importerResponseContainsErrors(updateIndicatorResponse_dryRun)) {
+        // All good, really execute the request to import data against data management API
+        const updateIndicatorResponse = await this.angularJsImporterHelperService.updateIndicator(
+          this.converterDefinition, 
+          this.datasourceTypeDefinition, 
+          this.propertyMappingDefinition, 
+          this.currentIndicatorDataset.indicatorId, 
+          this.putBody_indicators, 
+          false
+        );
+
+        this.broadcastService.broadcast('refreshIndicatorOverviewTable', { action: 'edit', indicatorId: this.currentIndicatorDataset.indicatorId });
+
+        this.successMessagePart = this.currentIndicatorDataset.indicatorName;
+        this.importedFeatures = this.angularJsImporterHelperService.getImportedFeaturesFromImporterResponse(updateIndicatorResponse);
+
+        this.showSuccessAlert();
+        this.loadingData = false;
+      } else {
+        // Errors occurred
+        this.errorMessagePart = "Einige der zu importierenden Zeitreihen des Datensatzes weisen kritische Fehler auf";
+        this.importerErrors = this.angularJsImporterHelperService.getErrorsFromImporterResponse(updateIndicatorResponse_dryRun);
+
+        this.showErrorAlert();
+        this.loadingData = false;
+      }
+    } catch (error: any) {
+      if (error.data) {
+        this.errorMessagePart = this.angularJsDataExchangeService.syntaxHighlightJSON(error.data);
+      } else {
+        this.errorMessagePart = this.angularJsDataExchangeService.syntaxHighlightJSON(error);
+      }
+      
+      this.showErrorAlert();
+      this.loadingData = false;
+    }
+  }
+
+  onImportIndicatorEditFeaturesMappingConfig(): void {
+    this.indicatorMappingConfigImportError = "";
+    $("#indicatorMappingConfigEditFeaturesImportFile").files = [];
+    $("#indicatorMappingConfigEditFeaturesImportFile").click();
+  }
+
+  onExportIndicatorEditFeaturesMappingConfig(): void {
+    this.buildImporterObjects().then(() => {
+      const mappingConfigExport: any = {
+        "converter": this.converterDefinition,
+        "dataSource": this.datasourceTypeDefinition,
+        "propertyMapping": this.propertyMappingDefinition,
+        "targetSpatialUnitName": this.targetSpatialUnitMetadata.spatialUnitLevel,
+        "permissions": []
+      };
+
+      const roleIds = this.angularJsDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
+      mappingConfigExport.permissions = roleIds;
+
+      mappingConfigExport.isPublic = this.isPublic;
+      mappingConfigExport.ownerId = this.currentIndicatorDataset.ownerId;
+
+      const metadataJSON = JSON.stringify(mappingConfigExport);
+      const fileName = "KomMonitor-Import-Mapping-Konfiguration_Export.json";
+
+      const blob = new Blob([metadataJSON], { type: "application/json" });
+      const data = URL.createObjectURL(blob);
+
+      const a = document.createElement('a');
+      a.download = fileName;
+      a.href = data;
+      a.textContent = "JSON";
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      a.click();
+
+      a.remove();
+    });
+  }
+
+  // Multi-step form navigation
+  nextStep(): void {
+    if (this.currentStep < this.totalSteps) {
+      this.currentStep++;
+    }
+  }
+
+  previousStep(): void {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+    }
+  }
+
+  goToStep(step: number): void {
+    if (step >= 1 && step <= this.totalSteps) {
+      this.currentStep = step;
+    }
+  }
+
+  // Alert management
+  showSuccessAlert(): void {
+    $("#indicatorEditFeaturesSuccessAlert").show();
+  }
+
+  hideSuccessAlert(): void {
+    $("#indicatorEditFeaturesSuccessAlert").hide();
+  }
+
+  showErrorAlert(): void {
+    $("#indicatorEditFeaturesErrorAlert").show();
+  }
+
+  hideErrorAlert(): void {
+    $("#indicatorEditFeaturesErrorAlert").hide();
+  }
+
+  hideMappingConfigErrorAlert(): void {
+    $("#indicatorEditFeaturesMappingConfigImportErrorAlert").hide();
+  }
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditIndicatorSpatialUnitRolesModal/indicator-edit-indicator-spatial-unit-roles-modal.component.css b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditIndicatorSpatialUnitRolesModal/indicator-edit-indicator-spatial-unit-roles-modal.component.css
new file mode 100644
index 000000000..52d7aaa12
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditIndicatorSpatialUnitRolesModal/indicator-edit-indicator-spatial-unit-roles-modal.component.css
@@ -0,0 +1,425 @@
+/* Modal Styles */
+.modal-xl {
+  max-width: 90%;
+}
+
+.loading-overlay-admin-panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon-spin {
+  animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Multi-step Form Styles */
+.multiStepForm {
+  position: relative;
+  margin-top: 30px;
+}
+
+.multiStepForm fieldset {
+  background: white;
+  border: 0 none;
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding-bottom: 20px;
+  position: relative;
+}
+
+.multiStepForm fieldset:not(:first-of-type) {
+  display: none;
+}
+
+.multiStepForm .fs-title {
+  font-size: 15px;
+  text-transform: uppercase;
+  color: #2C3E50;
+  margin-bottom: 10px;
+  letter-spacing: 2px;
+  font-weight: bold;
+}
+
+.multiStepForm .fs-subtitle {
+  font-weight: normal;
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 20px;
+}
+
+/* Progress Bar */
+#progressbar {
+  margin-bottom: 30px;
+  overflow: hidden;
+  color: lightgrey;
+  padding-left: 0;
+}
+
+#progressbar li {
+  list-style-type: none;
+  font-size: 15px;
+  width: 33.33%;
+  float: left;
+  position: relative;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+#progressbar li:before {
+  width: 50px;
+  height: 50px;
+  line-height: 45px;
+  display: block;
+  font-size: 20px;
+  color: #ffffff;
+  background: lightgray;
+  border-radius: 50%;
+  margin: 0 auto 10px auto;
+  padding: 2px;
+}
+
+#progressbar li.active:before,
+#progressbar li.active:after {
+  background: #27AE60;
+}
+
+#progressbar li.active {
+  color: #27AE60;
+}
+
+/* Action Buttons */
+.action-button {
+  width: 100px;
+  background: #27AE60;
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 1px;
+  cursor: pointer;
+  padding: 10px 5px;
+  margin: 10px 5px;
+}
+
+.action-button-previous {
+  width: 100px;
+  background: #616161;
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 1px;
+  cursor: pointer;
+  padding: 10px 5px;
+  margin: 10px 5px;
+}
+
+.action-button:hover,
+.action-button:focus {
+  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
+}
+
+.action-button-previous:hover,
+.action-button-previous:focus {
+  box-shadow: 0 0 0 2px white, 0 0 0 3px #616161;
+}
+
+/* Switch Styles */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switchslider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: .4s;
+}
+
+.switchslider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: .4s;
+}
+
+input:checked + .switchslider {
+  background-color: #2196F3;
+}
+
+input:focus + .switchslider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .switchslider:before {
+  transform: translateX(26px);
+}
+
+.switchslider.round {
+  border-radius: 34px;
+}
+
+.switchslider.round:before {
+  border-radius: 50%;
+}
+
+/* Alert Styles */
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.alert-success {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+
+.alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+
+.alert-info {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+
+.alert-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+
+.alert-dismissable .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  color: inherit;
+}
+
+/* Form Styles */
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+.form-control:focus {
+  border-color: #66afe9;
+  outline: 0;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
+}
+
+.help-block {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  color: #737373;
+}
+
+.with-errors {
+  color: #a94442;
+}
+
+/* Button Styles */
+.btn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.btn-info {
+  color: #fff;
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+
+.btn-success {
+  color: #fff;
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+
+.btn-default {
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+.btn:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+/* Modal Footer */
+.modal-footer {
+  padding: 15px;
+  text-align: right;
+  border-top: 1px solid #e5e5e5;
+}
+
+.pull-left {
+  float: left !important;
+}
+
+/* Input Group Styles */
+.input-group {
+  position: relative;
+  display: table;
+  border-collapse: separate;
+}
+
+.input-group-addon {
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1;
+  color: #555;
+  text-align: center;
+  background-color: #eee;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  display: table-cell;
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.input-group .form-control {
+  position: relative;
+  z-index: 2;
+  float: left;
+  width: 100%;
+  margin-bottom: 0;
+  display: table-cell;
+}
+
+.input-group .form-control:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group .form-control:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* Vertical Align Helper */
+.vertical-align {
+  display: flex;
+  align-items: center;
+}
+
+.margin-right {
+  margin-right: 10px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .modal-xl {
+    max-width: 95%;
+  }
+  
+  .col-md-3,
+  .col-md-6,
+  .col-md-9 {
+    margin-bottom: 15px;
+  }
+  
+  #progressbar li {
+    font-size: 12px;
+  }
+  
+  .action-button,
+  .action-button-previous {
+    width: 80px;
+    font-size: 12px;
+  }
+}
+
+/* Pre and Code Styles */
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  color: #333;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #c7254e;
+  background-color: #f9f2f4;
+  border-radius: 4px;
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditIndicatorSpatialUnitRolesModal/indicator-edit-indicator-spatial-unit-roles-modal.component.html b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditIndicatorSpatialUnitRolesModal/indicator-edit-indicator-spatial-unit-roles-modal.component.html
new file mode 100644
index 000000000..b57afd8f8
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditIndicatorSpatialUnitRolesModal/indicator-edit-indicator-spatial-unit-roles-modal.component.html
@@ -0,0 +1,226 @@
+ 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditIndicatorSpatialUnitRolesModal/indicator-edit-indicator-spatial-unit-roles-modal.component.ts b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditIndicatorSpatialUnitRolesModal/indicator-edit-indicator-spatial-unit-roles-modal.component.ts
new file mode 100644
index 000000000..8431e1a53
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditIndicatorSpatialUnitRolesModal/indicator-edit-indicator-spatial-unit-roles-modal.component.ts
@@ -0,0 +1,444 @@
+import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { DataExchangeService } from 'services/data-exchange-service/data-exchange.service';
+import { KommonitorIndicatorDataGridHelperService } from 'services/adminIndicatorUnit/kommonitor-data-grid-helper.service';
+import { MultiStepHelperServiceService } from 'services/multi-step-helper-service/multi-step-helper-service.service';
+import { HttpClient } from '@angular/common/http';
+
+declare const $: any;
+
+@Component({
+  selector: 'app-indicator-edit-indicator-spatial-unit-roles-modal',
+  templateUrl: './indicator-edit-indicator-spatial-unit-roles-modal.component.html',
+  styleUrls: ['./indicator-edit-indicator-spatial-unit-roles-modal.component.css']
+})
+export class IndicatorEditIndicatorSpatialUnitRolesModalComponent implements OnInit {
+  @ViewChild('modal') modal!: ElementRef;
+  
+  private modalRef?: NgbModalRef;
+  
+  // Form data
+  currentIndicatorDataset: any;
+  targetApplicableSpatialUnit: any;
+  
+  // Role management tables
+  roleManagementTableOptions_indicatorMetadata: any;
+  roleManagementTableOptions_indicatorSpatialUnitTimeseries: any;
+  
+  // Messages
+  successMessagePart: string = '';
+  errorMessagePart: string = '';
+  
+  // Form controls
+  ownerOrgFilter: string = '';
+  ownerOrganization: any;
+  activeRolesOnly: boolean = true;
+  activeConnectedRolesOnly: boolean = true;
+  permissions: any[] = [];
+  resourcesCreatorRights: any[] = [];
+  
+  // Loading states
+  loadingData: boolean = false;
+  
+  // Multi-step form
+  currentStep: number = 1;
+  totalSteps: number = 3;
+  
+  constructor(
+    private modalService: NgbModal,
+    private broadcastService: BroadcastService,
+    private http: HttpClient,
+    @Inject('kommonitorDataExchangeService') public angularJsDataExchangeService: any,
+    @Inject('kommonitorDataGridHelperService') private angularJsDataGridHelperService: any,
+    @Inject('kommonitorMultiStepFormHelperService') private angularJsMultiStepFormHelperService: any,
+    private dataExchangeService: DataExchangeService,
+    private dataGridHelperService: KommonitorIndicatorDataGridHelperService,
+    private multiStepHelperService: MultiStepHelperServiceService
+  ) {}
+
+  ngOnInit(): void {
+    this.setupEventListeners();
+    this.initializeForm();
+  }
+
+  private setupEventListeners(): void {
+    // Listen for edit indicator spatial unit roles event
+    this.broadcastService.currentBroadcastMsg.subscribe((data: any) => {
+      if (data.msg === 'onEditIndicatorSpatialUnitRoles') {
+        this.openModal(data.values);
+      } else if (data.msg === 'availableRolesUpdate') {
+        this.refreshRoleManagementTable_indicatorMetadata();
+        this.refreshRoleManagementTable_indicatorSpatialUnitTimeseries();
+      }
+    });
+  }
+
+  private initializeForm(): void {
+    this.resetIndicatorEditIndicatorSpatialUnitRolesForm();
+  }
+
+  openModal(indicatorDataset: any): void {
+    this.currentIndicatorDataset = indicatorDataset;
+    this.prepareCreatorList();
+    this.resetIndicatorEditIndicatorSpatialUnitRolesForm();
+    
+    // Register the multi-step form handler
+    this.angularJsMultiStepFormHelperService.registerClickHandler("indicatorEditIndicatorSpatialUnitRolesForm");
+    
+    // Show the modal using jQuery (since this is a legacy modal)
+    $('#modal-edit-indicator-spatial-unit-roles').modal('show');
+  }
+
+  closeModal(): void {
+    // Hide the modal using jQuery (since this is a legacy modal)
+    $('#modal-edit-indicator-spatial-unit-roles').modal('hide');
+  }
+
+  prepareCreatorList(): void {
+    if (this.angularJsDataExchangeService.currentKomMonitorLoginRoleNames.length > 0) {
+      let creatorRights: string[] = [];
+      let creatorRightsChildren: string[] = [];
+      
+      this.angularJsDataExchangeService.currentKomMonitorLoginRoleNames.forEach((roles: string) => {
+        let key = roles.split('.')[0];
+        let role = roles.split('.')[1];
+
+        // case unit-resources-creator
+        if (role == 'unit-resources-creator' && !this.resourcesCreatorRights.includes(key)) {
+          creatorRights.push(key);
+        }
+
+        // case client-resources-creator, gather unit-ids first, then fetch all unit-data
+        if (role == 'client-resources-creator' && !creatorRightsChildren.includes(key)) {
+          creatorRightsChildren.push(key);
+        }
+      });
+
+      // gather all children
+      this.gatherCreatorRightsChildren(creatorRights, creatorRightsChildren);
+
+      this.resourcesCreatorRights = this.angularJsDataExchangeService.accessControl.filter((elem: any) => creatorRights.includes(elem.name));
+    }
+  }
+
+  gatherCreatorRightsChildren(creatorRights: string[], creatorRightsChildren: string[]): void {
+    if (creatorRightsChildren.length > 0) {
+      this.angularJsDataExchangeService.accessControl
+        .filter((elem: any) => creatorRightsChildren.includes(elem.name))
+        .flatMap((res: any) => res.children)
+        .forEach((child: any) => {
+          this.angularJsDataExchangeService.accessControl
+            .filter((elem: any) => elem.organizationalUnitId == child)
+            .forEach((childData: any) => {
+              creatorRights.push(childData.name);
+              this.gatherCreatorRightsChildren(creatorRights, [childData.name]);
+            });
+        });
+    }
+  }
+
+  resetIndicatorEditIndicatorSpatialUnitRolesForm(): void {
+    this.ownerOrganization = this.currentIndicatorDataset?.ownerId;
+    this.ownerOrgFilter = '';
+    this.targetApplicableSpatialUnit = this.currentIndicatorDataset?.applicableSpatialUnits?.[0];
+
+    this.refreshRoleManagementTable_indicatorMetadata();
+    this.refreshRoleManagementTable_indicatorSpatialUnitTimeseries();
+
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+    this.hideSuccessAlert();
+    this.hideErrorAlert();
+  }
+
+  refreshRoleManagementTable_indicatorMetadata(): void {
+    this.permissions = this.currentIndicatorDataset ? this.currentIndicatorDataset.permissions : [];
+
+    // set datasetOwner to disable checkboxes for owned datasets in permissions-table
+    this.angularJsDataExchangeService.accessControl.forEach((item: any) => {
+      if (this.currentIndicatorDataset) {
+        if (item.organizationalUnitId == this.currentIndicatorDataset.ownerId) {
+          item.datasetOwner = true;
+        } else {
+          item.datasetOwner = false;
+        }
+      }
+    });
+
+    if (this.permissions.length == 0) {
+      this.activeRolesOnly = false;
+    }
+
+    let access = this.angularJsDataExchangeService.accessControl;
+    if (this.permissions.length > 0 && this.activeRolesOnly) {
+      access = this.angularJsDataExchangeService.accessControl.filter((unit: any) => {
+        return (unit.permissions.filter((unitPermission: any) => this.permissions.includes(unitPermission.permissionId)).length > 0 ? true : false);
+      });
+    }
+
+    this.roleManagementTableOptions_indicatorMetadata = this.angularJsDataGridHelperService.buildRoleManagementGrid(
+      'indicatorEditRoleManagementTable', 
+      this.roleManagementTableOptions_indicatorMetadata, 
+      access, 
+      this.permissions, 
+      true
+    );
+  }
+
+  refreshRoleManagementTable_indicatorSpatialUnitTimeseries(): void {
+    if (this.targetApplicableSpatialUnit && this.targetApplicableSpatialUnit.permissions) {
+      if (this.targetApplicableSpatialUnit.permissions.length == 0) {
+        this.activeConnectedRolesOnly = false;
+      }
+
+      let connectedAccess = this.angularJsDataExchangeService.accessControl;
+      if (this.targetApplicableSpatialUnit.permissions.length > 0 && this.activeConnectedRolesOnly) {
+        connectedAccess = this.angularJsDataExchangeService.accessControl.filter((unit: any) => {
+          return (unit.permissions.filter((unitPermission: any) => this.targetApplicableSpatialUnit.permissions.includes(unitPermission.permissionId)).length > 0 ? true : false);
+        });
+      }
+
+      this.roleManagementTableOptions_indicatorSpatialUnitTimeseries = this.angularJsDataGridHelperService.buildRoleManagementGrid(
+        'indicatorEditIndicatorSpatialUnitsRoleManagementTable', 
+        this.roleManagementTableOptions_indicatorSpatialUnitTimeseries, 
+        connectedAccess, 
+        this.targetApplicableSpatialUnit.permissions, 
+        true
+      );
+    } else {
+      this.activeConnectedRolesOnly = false;
+      this.roleManagementTableOptions_indicatorSpatialUnitTimeseries = this.angularJsDataGridHelperService.buildRoleManagementGrid(
+        'indicatorEditIndicatorSpatialUnitsRoleManagementTable', 
+        this.roleManagementTableOptions_indicatorSpatialUnitTimeseries, 
+        this.angularJsDataExchangeService.accessControl, 
+        [], 
+        true
+      );
+    }
+  }
+
+  onActiveConnectedRolesOnlyChange(): void {
+    this.refreshRoleManagementTable_indicatorSpatialUnitTimeseries();
+  }
+
+  onActiveRolesOnlyChange(): void {
+    this.refreshRoleManagementTable_indicatorMetadata();
+  }
+
+  onChangeOwner(ownerOrganization: any): void {
+    this.ownerOrganization = ownerOrganization;
+    console.log("Target creator role selected to be:", this.ownerOrganization);
+    this.refreshRoles(this.ownerOrganization);
+  }
+
+  refreshRoles(orgUnitId: string): void {
+    let permissionIds_ownerUnit = orgUnitId ? 
+      this.angularJsDataExchangeService.getAccessControlById(orgUnitId).permissions
+        .filter((permission: any) => permission.permissionLevel == "viewer" || permission.permissionLevel == "editor")
+        .map((permission: any) => permission.permissionId) : [];
+
+    // set datasetOwner to disable checkboxes for owned datasets in permissions-table
+    this.angularJsDataExchangeService.accessControl.forEach((item: any) => {
+      if (item.organizationalUnitId == orgUnitId) {
+        item.datasetOwner = true;
+      } else {
+        item.datasetOwner = false;
+      }
+    });
+
+    this.roleManagementTableOptions_indicatorMetadata = this.angularJsDataGridHelperService.buildRoleManagementGrid(
+      'indicatorEditRoleManagementTable', 
+      this.roleManagementTableOptions_indicatorMetadata, 
+      this.angularJsDataExchangeService.accessControl, 
+      permissionIds_ownerUnit, 
+      true
+    );
+    
+    this.roleManagementTableOptions_indicatorSpatialUnitTimeseries = this.angularJsDataGridHelperService.buildRoleManagementGrid(
+      'indicatorEditIndicatorSpatialUnitsRoleManagementTable', 
+      this.roleManagementTableOptions_indicatorSpatialUnitTimeseries, 
+      this.angularJsDataExchangeService.accessControl, 
+      permissionIds_ownerUnit, 
+      true
+    );
+  }
+
+  editIndicatorSpatialUnitRoles(): void {
+    if (this.ownerOrganization !== undefined && this.ownerOrganization != this.currentIndicatorDataset.ownerId) {
+      if (!confirm('Sind Sie sicher, dass Sie den Eigentümerschaft an dieser Resource endgültig und unwiderruflich übertragen und damit abgeben wollen?')) {
+        return;
+      }
+    }
+
+    this.executeRequest_indicatorMetadataRoles();
+    this.executeRequest_indicatorOwnership();
+    this.executeRequest_indicatorSpatialUnitRoles();
+    this.executeRequest_indicatorSpatialUnitOwnership();
+  }
+
+  executeRequest_indicatorMetadataRoles(): void {
+    this.loadingData = true;
+
+    let putBody = {
+      "permissions": this.angularJsDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions_indicatorMetadata),
+      "isPublic": this.currentIndicatorDataset.isPublic
+    };
+
+    this.http.put(
+      this.angularJsDataExchangeService.baseUrlToKomMonitorDataAPI + "/indicators/" + this.currentIndicatorDataset.indicatorId + "/permissions",
+      putBody
+    ).subscribe({
+      next: (response: any) => {
+        this.successMessagePart = this.currentIndicatorDataset.indicatorName;
+        this.broadcastService.broadcast('refreshIndicatorOverviewTable', { crudType: 'edit', targetIndicatorId: this.currentIndicatorDataset.indicatorId });
+        this.showSuccessAlert();
+        this.loadingData = false;
+      },
+      error: (error: any) => {
+        this.errorMessagePart = "Fehler beim Aktualisieren der Metadaten-Zugriffsrechte. Fehler lautet: \n\n";
+        if (error.data) {
+          this.errorMessagePart += this.angularJsDataExchangeService.syntaxHighlightJSON(error.data);
+        } else {
+          this.errorMessagePart += this.angularJsDataExchangeService.syntaxHighlightJSON(error);
+        }
+        this.showErrorAlert();
+        this.loadingData = false;
+      }
+    });
+  }
+
+  executeRequest_indicatorOwnership(): void {
+    this.loadingData = true;
+
+    let putBody = {
+      "ownerId": this.ownerOrganization === undefined ? this.currentIndicatorDataset.ownerId : this.ownerOrganization
+    };
+
+    this.http.put(
+      this.angularJsDataExchangeService.baseUrlToKomMonitorDataAPI + "/indicators/" + this.currentIndicatorDataset.indicatorId + "/ownership",
+      putBody
+    ).subscribe({
+      next: (response: any) => {
+        this.successMessagePart = this.currentIndicatorDataset.indicatorName;
+        this.broadcastService.broadcast('refreshIndicatorOverviewTable', { crudType: 'edit', targetIndicatorId: this.currentIndicatorDataset.indicatorId });
+        this.showSuccessAlert();
+        this.loadingData = false;
+      },
+      error: (error: any) => {
+        this.errorMessagePart = "Fehler beim Aktualisieren der Metadaten-Eigentümerschaft. Fehler lautet: \n\n";
+        if (error.data) {
+          this.errorMessagePart += this.angularJsDataExchangeService.syntaxHighlightJSON(error.data);
+        } else {
+          this.errorMessagePart += this.angularJsDataExchangeService.syntaxHighlightJSON(error);
+        }
+        this.showErrorAlert();
+        this.loadingData = false;
+      }
+    });
+  }
+
+  executeRequest_indicatorSpatialUnitOwnership(): void {
+    this.loadingData = true;
+
+    if (this.currentIndicatorDataset.applicableSpatialUnits && this.currentIndicatorDataset.applicableSpatialUnits.length > 0) {
+      this.currentIndicatorDataset.applicableSpatialUnits.forEach((indicatorSpatialUnit: any) => {
+        let putBody = {
+          "ownerId": this.ownerOrganization === undefined ? this.currentIndicatorDataset.ownerId : this.ownerOrganization
+        };
+
+        this.http.put(
+          this.angularJsDataExchangeService.baseUrlToKomMonitorDataAPI + "/indicators/" + this.currentIndicatorDataset.indicatorId + "/" + indicatorSpatialUnit.spatialUnitId + "/ownership",
+          putBody
+        ).subscribe({
+          next: (response: any) => {
+            this.successMessagePart = this.currentIndicatorDataset.indicatorName;
+            this.broadcastService.broadcast('refreshIndicatorOverviewTable', { crudType: 'edit', targetIndicatorId: this.currentIndicatorDataset.indicatorId });
+            this.showSuccessAlert();
+            this.loadingData = false;
+          },
+          error: (error: any) => {
+            this.errorMessagePart = "Fehler beim Aktualisieren der Metadaten-Eigentümerschaft. Fehler lautet: \n\n";
+            if (error.data) {
+              this.errorMessagePart += this.angularJsDataExchangeService.syntaxHighlightJSON(error.data);
+            } else {
+              this.errorMessagePart += this.angularJsDataExchangeService.syntaxHighlightJSON(error);
+            }
+            this.showErrorAlert();
+            this.loadingData = false;
+          }
+        });
+      });
+    }
+  }
+
+  executeRequest_indicatorSpatialUnitRoles(): void {
+    let putBody = {
+      "permissions": this.angularJsDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions_indicatorSpatialUnitTimeseries),
+      "isPublic": this.targetApplicableSpatialUnit.isPublic
+    };
+
+    this.loadingData = true;
+
+    this.http.put(
+      this.angularJsDataExchangeService.baseUrlToKomMonitorDataAPI + "/indicators/" + this.currentIndicatorDataset.indicatorId + "/" + this.targetApplicableSpatialUnit.spatialUnitId + "/permissions",
+      putBody
+    ).subscribe({
+      next: (response: any) => {
+        this.broadcastService.broadcast('refreshIndicatorOverviewTable', { crudType: 'edit', targetIndicatorId: this.currentIndicatorDataset.indicatorId });
+        this.showSuccessAlert();
+        this.loadingData = false;
+      },
+      error: (error: any) => {
+        this.errorMessagePart = "Fehler beim Aktualisieren der Zugriffsrechte auf Zeitreihe der Raumeinheit " + this.targetApplicableSpatialUnit.spatialUnitName + ". Fehler lautet: \n\n";
+        if (error.data) {
+          this.errorMessagePart += this.angularJsDataExchangeService.syntaxHighlightJSON(error.data);
+        } else {
+          this.errorMessagePart += this.angularJsDataExchangeService.syntaxHighlightJSON(error);
+        }
+        this.showErrorAlert();
+        this.loadingData = false;
+      }
+    });
+  }
+
+  onChangeSelectedSpatialUnit(targetApplicableSpatialUnit: any): void {
+    this.refreshRoleManagementTable_indicatorSpatialUnitTimeseries();
+  }
+
+  // Multi-step form navigation
+  nextStep(): void {
+    if (this.currentStep < this.totalSteps) {
+      this.currentStep++;
+    }
+  }
+
+  previousStep(): void {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+    }
+  }
+
+  goToStep(step: number): void {
+    if (step >= 1 && step <= this.totalSteps) {
+      this.currentStep = step;
+    }
+  }
+
+  // Alert management
+  showSuccessAlert(): void {
+    $("#indicatorEditIndicatorSpatialUnitRolesSuccessAlert").show();
+  }
+
+  hideSuccessAlert(): void {
+    $("#indicatorEditIndicatorSpatialUnitRolesSuccessAlert").hide();
+  }
+
+  showErrorAlert(): void {
+    $("#indicatorEditIndicatorSpatialUnitRolesErrorAlert").show();
+  }
+
+  hideErrorAlert(): void {
+    $("#indicatorEditIndicatorSpatialUnitRolesErrorAlert").hide();
+  }
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditMetadataModal/indicator-edit-metadata-modal.component.css b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditMetadataModal/indicator-edit-metadata-modal.component.css
new file mode 100644
index 000000000..c75f274e7
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditMetadataModal/indicator-edit-metadata-modal.component.css
@@ -0,0 +1,371 @@
+/* Indicator Edit Metadata Modal Styles */
+
+.modal-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.modal-title {
+  color: #495057;
+  font-weight: 600;
+}
+
+.modal-body {
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+/* Loading overlay */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+/* Form styles */
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  font-weight: 500;
+  color: #495057;
+  margin-bottom: 0.5rem;
+}
+
+.form-control {
+  border-radius: 0.25rem;
+  border: 1px solid #ced4da;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-control:focus {
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.form-control.is-invalid {
+  border-color: #dc3545;
+}
+
+.invalid-feedback {
+  display: block;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: #dc3545;
+}
+
+/* Checkbox styles */
+.form-check {
+  padding-left: 1.25rem;
+}
+
+.form-check-input {
+  margin-left: -1.25rem;
+}
+
+.form-check-label {
+  margin-bottom: 0;
+  cursor: pointer;
+}
+
+/* Section headers */
+h5 {
+  color: #495057;
+  border-bottom: 2px solid #007bff;
+  padding-bottom: 0.5rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+h6 {
+  color: #6c757d;
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+/* Color palette grid */
+.color-palette-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.color-palette-item {
+  border: 2px solid #dee2e6;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+}
+
+.color-palette-item:hover {
+  border-color: #007bff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.color-palette-item.selected {
+  border-color: #007bff;
+  background-color: #f8f9fa;
+}
+
+.color-samples {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0.5rem;
+}
+
+.color-sample {
+  width: 20px;
+  height: 20px;
+  margin: 0 1px;
+  border-radius: 2px;
+}
+
+.palette-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #495057;
+}
+
+/* Tab styles */
+.nav-tabs {
+  border-bottom: 1px solid #dee2e6;
+}
+
+.nav-tabs .nav-link {
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  color: #495057;
+  cursor: pointer;
+}
+
+.nav-tabs .nav-link:hover {
+  border-color: #e9ecef #e9ecef #dee2e6;
+}
+
+.nav-tabs .nav-link.active {
+  color: #495057;
+  background-color: #fff;
+  border-color: #dee2e6 #dee2e6 #fff;
+}
+
+.nav-tabs .nav-link.tab-completed {
+  background-color: #d4edda;
+  border-color: #c3e6cb;
+  color: #155724;
+}
+
+.nav-tabs .nav-link.tab-error {
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+  color: #721c24;
+}
+
+.tab-content {
+  padding: 1rem;
+  border: 1px solid #dee2e6;
+  border-top: none;
+  background-color: #fff;
+}
+
+.tab-pane {
+  display: none;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+/* Table styles */
+.table {
+  margin-bottom: 0;
+}
+
+.table th {
+  border-top: none;
+  font-weight: 600;
+  color: #495057;
+}
+
+.table td {
+  vertical-align: middle;
+}
+
+/* Button styles */
+.btn {
+  border-radius: 0.25rem;
+  font-weight: 500;
+  transition: all 0.15s ease-in-out;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  border-color: #007bff;
+}
+
+.btn-primary:hover {
+  background-color: #0069d9;
+  border-color: #0062cc;
+}
+
+.btn-secondary {
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+
+.btn-secondary:hover {
+  background-color: #5a6268;
+  border-color: #545b62;
+}
+
+.btn-info {
+  background-color: #17a2b8;
+  border-color: #17a2b8;
+}
+
+.btn-info:hover {
+  background-color: #138496;
+  border-color: #117a8b;
+}
+
+.btn-danger {
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+
+.btn-danger:hover {
+  background-color: #c82333;
+  border-color: #bd2130;
+}
+
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+}
+
+/* Alert styles */
+.alert {
+  border-radius: 0.25rem;
+  margin-bottom: 1rem;
+}
+
+.alert-success {
+  color: #155724;
+  background-color: #d4edda;
+  border-color: #c3e6cb;
+}
+
+.alert-danger {
+  color: #721c24;
+  background-color: #f8d7da;
+  border-color: #f5c6cb;
+}
+
+.alert-dismissible {
+  padding-right: 4rem;
+}
+
+.alert .close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.75rem 1.25rem;
+  color: inherit;
+  background: none;
+  border: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+}
+
+/* AG Grid styles */
+.ag-theme-alpine {
+  --ag-header-height: 40px;
+  --ag-row-height: 35px;
+  --ag-header-background-color: #f8f9fa;
+  --ag-header-foreground-color: #495057;
+  --ag-border-color: #dee2e6;
+  --ag-row-hover-color: #f8f9fa;
+  --ag-selected-row-background-color: #e3f2fd;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .modal-body {
+    max-height: 60vh;
+  }
+  
+  .color-palette-grid {
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 0.5rem;
+  }
+  
+  .color-palette-item {
+    padding: 0.25rem;
+  }
+  
+  .color-sample {
+    width: 15px;
+    height: 15px;
+  }
+  
+  .palette-name {
+    font-size: 0.75rem;
+  }
+}
+
+/* Animation for loading spinner */
+.spinner-border {
+  animation: spinner-border 0.75s linear infinite;
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Form validation styles */
+.form-control.ng-invalid.ng-touched {
+  border-color: #dc3545;
+}
+
+.form-control.ng-valid.ng-touched {
+  border-color: #28a745;
+}
+
+/* Custom scrollbar for modal body */
+.modal-body::-webkit-scrollbar {
+  width: 8px;
+}
+
+.modal-body::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.modal-body::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.modal-body::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditMetadataModal/indicator-edit-metadata-modal.component.html b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditMetadataModal/indicator-edit-metadata-modal.component.html
new file mode 100644
index 000000000..d12b0c0a4
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditMetadataModal/indicator-edit-metadata-modal.component.html
@@ -0,0 +1,628 @@
+
+
+  

+    
 Indikator Metadaten bearbeiten

+    
+  

+
+  

+    
+    

+      
+      Erfolg! Die Metadaten für den Indikator "{{successMessagePart}}" wurden erfolgreich aktualisiert.
+    

+
+    
+    

+      
+      Fehler! Beim Aktualisieren der Metadaten ist ein Fehler aufgetreten.
+      
{{errorMessagePart}}

+    

+
+    
+    

+      
+      Fehler! {{indicatorMetadataImportError}}
+    

+
+    
+    

+      
+    

+
+    
+    

+      
+      
+      

+        
+        
+        

+          Ein Indikator mit diesem Namen existiert bereits.
+        

+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        

+          
+          
+        

+      

+
+      

+        
+        
+        

+          
+        

+      

+
+      

+        
+        

+          
+          
+        

+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      
+      
Metadaten

+      
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      
+      
Themenhierarchie

+      
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      
+      
Referenzen zu anderen Indikatoren

+      
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      
+
+      
+      

+        
Aktuelle Referenzen

+        
+          
+            
+              
+              
+              
+            
+          
+          
+            
+              
+              
+              
+            
+          
+        
IndikatorBeschreibungAktionen
{{reference.referencedIndicatorName}}{{reference.referencedIndicatorDescription}}
+                
+                
+              

+      

+
+      
+      
Referenzen zu Georessourcen

+      
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      
+
+      
+      

+        
Aktuelle Georessourcen-Referenzen

+        
+          
+            
+              
+              
+              
+            
+          
+          
+            
+              
+              
+              
+            
+          
+        
GeoressourceBeschreibungAktionen
{{reference.referencedGeoresourceName}}{{reference.referencedGeoresourceDescription}}
+                
+                
+              

+      

+
+      
+      
Klassifizierungsoptionen

+      
+      

+        
+        
+      

+
+      

+        
+        
+      

+
+      

+        
+        

+          

+            

+              

+            

+            
{{palette.paletteName}}

+          

+        

+      

+
+      
+      

+        
Klassengrenzen pro räumliche Einheit

+        
+        
+        

+          

+            

+              
+              

+                
+              

+            

+          

+        

+      

+
+      
+      
Regionale Vergleichswerte

+      
+      

+        
+        

+          
+        

+      

+
+    

+  

+
+  

+    
+    
+  

+ 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditMetadataModal/indicator-edit-metadata-modal.component.ts b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditMetadataModal/indicator-edit-metadata-modal.component.ts
new file mode 100644
index 000000000..e33107ce0
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorEditMetadataModal/indicator-edit-metadata-modal.component.ts
@@ -0,0 +1,748 @@
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { HttpClient } from '@angular/common/http';
+import { Subscription } from 'rxjs';
+import { KommonitorIndicatorDataExchangeService } from 'services/adminIndicatorUnit/kommonitor-data-exchange.service';
+import { KommonitorIndicatorCacheHelperService } from 'services/adminIndicatorUnit/kommonitor-cache-helper.service';
+import { KommonitorIndicatorDataGridHelperService } from 'services/adminIndicatorUnit/kommonitor-data-grid-helper.service';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+
+declare const $: any;
+declare const __env: any;
+declare const colorbrewer: any;
+
+@Component({
+  selector: 'indicator-edit-metadata-modal',
+  templateUrl: './indicator-edit-metadata-modal.component.html',
+  styleUrls: ['./indicator-edit-metadata-modal.component.css']
+})
+export class IndicatorEditMetadataModalComponent implements OnInit, OnDestroy {
+  @ViewChild('modal') modal!: ElementRef;
+
+  private subscriptions: Subscription[] = [];
+
+  // Current indicator dataset
+  currentIndicatorDataset: any = null;
+
+  // Form data
+  datasetName = '';
+  datasetNameInvalid = false;
+  indicatorAbbreviation = '';
+  indicatorType: any = null;
+  isHeadlineIndicator = false;
+  indicatorUnit = '';
+  enableFreeTextUnit = false;
+  indicatorProcessDescription = '';
+  indicatorTagsString_withCommas = '';
+  indicatorInterpretation = '';
+  indicatorCreationType: any = null;
+  indicatorLowestSpatialUnitMetadataObjectForComputation: any = null;
+  enableLowestSpatialUnitSelect = false;
+  indicatorPrecision: number | null = null;
+  showCustomCommaValue = false;
+  indicatorReferenceDateNote = '';
+  displayOrder = 0;
+
+  // Metadata
+  metadata: any = {
+    note: '',
+    literature: '',
+    updateInterval: null,
+    sridEPSG: 4326,
+    datasource: '',
+    contact: '',
+    lastUpdate: '',
+    description: '',
+    databasis: ''
+  };
+
+  // Topic hierarchy
+  indicatorTopic_mainTopic: any = null;
+  indicatorTopic_subTopic: any = null;
+  indicatorTopic_subsubTopic: any = null;
+  indicatorTopic_subsubsubTopic: any = null;
+
+  // References
+  indicatorNameFilter = '';
+  tmpIndicatorReference_selectedIndicatorMetadata: any = null;
+  tmpIndicatorReference_referenceDescription = '';
+  indicatorReferences_adminView: any[] = [];
+  indicatorReferences_apiRequest: any[] = [];
+
+  georesourceNameFilter = '';
+  tmpGeoresourceReference_selectedGeoresourceMetadata: any = null;
+  tmpGeoresourceReference_referenceDescription = '';
+  georesourceReferences_adminView: any[] = [];
+  georesourceReferences_apiRequest: any[] = [];
+
+  // Classification
+  numClassesArray = [3, 4, 5, 6, 7, 8];
+  selectedColorBrewerPaletteEntry: any = null;
+  numClassesPerSpatialUnit: number | null = null;
+  classificationMethod = __env?.defaultClassifyMethod || 'jenks';
+  spatialUnitClassification: any[] = [];
+  classBreaksInvalid = false;
+  tabClasses: string[] = [];
+
+  // Regional reference values
+  regionalReferenceValuesManagementTableOptions: any = null;
+  tmpIndicatorRegionalReferenceValuesObject: any = null;
+  noneColumnValue = '-- keine --';
+  file_regionalReferenceValuesImport: any = null;
+
+  // Messages
+  successMessagePart = '';
+  errorMessagePart = '';
+  indicatorMetadataImportError = '';
+  indicatorAddMetadataImportErrorAlert = false;
+
+  // Loading state
+  loadingData = false;
+
+  // Color brewer
+  colorbrewerSchemes = colorbrewer;
+  colorbreweSchemeName_dynamicIncrease = __env?.defaultColorBrewerPaletteForBalanceIncreasingValues;
+  colorbreweSchemeName_dynamicDecrease = __env?.defaultColorBrewerPaletteForBalanceDecreasingValues;
+  colorbrewerPalettes: any[] = [];
+
+  // Metadata structure
+  indicatorMetadataStructure: any = {
+    "metadata": {
+      "note": "an optional note",
+      "literature": "optional text about literature",
+      "updateInterval": "YEARLY|HALF_YEARLY|QUARTERLY|MONTHLY|ARBITRARY",
+      "sridEPSG": 4326,
+      "datasource": "text about data source",
+      "contact": "text about contact details",
+      "lastUpdate": "YYYY-MM-DD",
+      "description": "description about spatial unit dataset",
+      "databasis": "text about data basis",
+    },
+    "precision": "Custom decimal place",
+    "refrencesToOtherIndicators": [
+      {
+        "referenceDescription": "description about the reference",
+        "indicatorId": "ID of referenced indicator dataset"
+      }
+    ],
+    "refrencesToGeoresources": [
+      {
+        "referenceDescription": "description about the reference",
+        "georesourceId": "ID of referenced georesource dataset"
+      }
+    ],
+    "datasetName": "Name of indicator dataset",
+    "abbreviation": "optional abbreviation of the indicator dataset",
+    "characteristicValue": "if the same datasetName is used for different indicators, the optional characteristicValue parameter may serve to distinguish between them (i.e. Habitants - male, Habitants - female, Habitants - diverse)",
+    "tags": [
+      "optinal list of tags; each tag is a free text tag"
+    ],
+    "creationType": "INSERTION|COMPUTATION  <-- enum parameter controls whether each timestamp must be updated manually (INSERTION) or if KomMonitor shall compute the indicator values for respective timestamps based on script file (COMPUTATION)",
+    "unit": "unit of the indicator",
+    "topicReference": "ID of the respective main/sub topic instance",
+    "indicatorType": "STATUS_ABSOLUTE|STATUS_RELATIVE|DYNAMIC_ABSOLUTE|DYNAMIC_RELATIVE|STATUS_STANDARDIZED|DYNAMIC_STANDARDIZED",
+    "interpretation": "interpretation hints for the user to better understand the indicator values",
+    "isHeadlineIndicator": "boolean parameter to indicate if indicator is a headline indicator",
+    "processDescription": "detailed description about the computation/creation of the indicator",
+    "lowestSpatialUnitForComputation": "the name of the lowest possible spatial unit for which an indicator of creationType=COMPUTATION may be computed. All other superior spatial units will be aggregated automatically",
+    "referenceDateNote": "optional note for indicator reference date",
+    "displayOrder": 0,
+    "defaultClassificationMapping": {
+      "colorBrewerSchemeName": "schema name of colorBrewer colorPalette to use for classification",
+      "numClasses": "number of Classes",
+      "classificationMethod": "Classification Method ID",
+      "items": [
+        {
+          "spatialUnit": "spatial unit id for manual classification",
+          "breaks": ['break']
+        }
+      ]
+    },
+    "regionalReferenceValues": [
+      {
+        "referenceDate": "2024-04-23",
+        "regionalSum": 0,
+        "regionalAverage": 0,
+        "spatiallyUnassignable": 0
+      }
+    ],
+  };
+
+  indicatorMetadataStructure_pretty = '';
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    private http: HttpClient,
+    public kommonitorDataExchangeService: KommonitorIndicatorDataExchangeService,
+    private kommonitorCacheHelperService: KommonitorIndicatorCacheHelperService,
+    private kommonitorDataGridHelperService: KommonitorIndicatorDataGridHelperService,
+    private broadcastService: BroadcastService
+  ) {}
+
+  ngOnInit(): void {
+    this.setupEventListeners();
+    this.instantiateColorBrewerPalettes();
+    this.indicatorMetadataStructure_pretty = this.kommonitorDataExchangeService.syntaxHighlightJSON(this.indicatorMetadataStructure);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  private setupEventListeners(): void {
+    const sub = this.broadcastService.currentBroadcastMsg.subscribe(data => {
+      if (data.msg === 'onEditIndicatorMetadata') {
+        this.currentIndicatorDataset = data.values;
+        this.resetIndicatorEditMetadataForm();
+      }
+    });
+    this.subscriptions.push(sub);
+  }
+
+  openModal(): void {
+    // Modal is already opened by the parent component
+    // This method is called after the modal is already open
+    this.resetIndicatorEditMetadataForm();
+    this.instantiateColorBrewerPalettes();
+  }
+
+  closeModal(): void {
+    this.activeModal.dismiss();
+  }
+
+  instantiateColorBrewerPalettes(): void {
+    const customColorSchemes = __env?.customColorSchemes;
+    let colorbrewerExtended = colorbrewer;
+
+    // Add custom color themes from configuration properties
+    if (customColorSchemes) {
+      colorbrewerExtended = Object.assign(customColorSchemes, colorbrewer);
+    }
+
+    for (const key in colorbrewerExtended) {
+      if (colorbrewerExtended.hasOwnProperty(key)) {
+        const colorPalettes = colorbrewerExtended[key];
+        
+        const paletteEntry = {
+          "paletteName": key,
+          "paletteArrayObject": colorPalettes
+        };
+
+        this.colorbrewerPalettes.push(paletteEntry);
+      }
+    }
+
+    // instantiate with palette 'Blues'
+    this.selectedColorBrewerPaletteEntry = this.colorbrewerPalettes[13];
+  }
+
+  onClassificationMethodSelected(method: any): void {
+    this.classificationMethod = method.id;
+  }
+
+  onNumClassesChanged(numClasses: number): void {
+    this.numClassesPerSpatialUnit = numClasses;
+    for (let i = 0; i < this.kommonitorDataExchangeService.availableSpatialUnits.length; i++) {
+      const spatialUnit = this.kommonitorDataExchangeService.availableSpatialUnits[i];
+      this.spatialUnitClassification[i] = {
+        spatialUnitId: spatialUnit.spatialUnitId,
+        breaks: []
+      };
+      this.tabClasses[i] = '';
+      for (let classNr = 0; classNr < numClasses - 1; classNr++) {
+        this.spatialUnitClassification[i].breaks.push(null);
+      }
+    }
+  }
+
+  onBreaksChanged(tabIndex: number): void {
+    this.classBreaksInvalid = false;
+    let cssClass = 'tab-completed';
+    
+    for (const classBreak of this.spatialUnitClassification[tabIndex].breaks) {
+      if (classBreak === null) {
+        cssClass = '';
+      }
+    }
+    
+    if (cssClass === 'tab-completed') {
+      for (let i = 0; i < this.spatialUnitClassification[tabIndex].breaks.length - 1; i++) {
+        if (this.spatialUnitClassification[tabIndex].breaks[i] > this.spatialUnitClassification[tabIndex].breaks[i + 1]) {
+          cssClass = 'tab-error';
+          this.classBreaksInvalid = true;
+        }
+      }
+    } else {
+      for (const classBreak of this.spatialUnitClassification[tabIndex].breaks) {
+        if (classBreak !== null) {
+          cssClass = 'tab-error';
+          this.classBreaksInvalid = true;
+        }
+      }
+    }
+    this.tabClasses[tabIndex] = cssClass;
+    this.updateDecreaseAndIncreaseBreaks(tabIndex);
+  }
+
+  updateDecreaseAndIncreaseBreaks(tabIndex: number): void {
+    const increaseBreaksLength = this.spatialUnitClassification[tabIndex].breaks.filter((val: number) => val > 0).length;
+    const decreaseBreaksLength = this.spatialUnitClassification[tabIndex].breaks.filter((val: number) => val < 0).length;
+    
+    if (increaseBreaksLength < 3) {
+      // Handle minimum increase breaks
+    }
+    if (decreaseBreaksLength < 3) {
+      // Handle minimum decrease breaks
+    }
+  }
+
+  refreshReferenceValuesManagementTable(): void {
+    this.regionalReferenceValuesManagementTableOptions = this.kommonitorDataGridHelperService.buildReferenceValuesManagementGrid(
+      this.regionalReferenceValuesManagementTableOptions
+    );
+  }
+
+  resetIndicatorEditMetadataForm(): void {
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+
+    this.datasetName = this.currentIndicatorDataset.indicatorName;
+    this.datasetNameInvalid = false;
+
+    this.indicatorReferenceDateNote = this.currentIndicatorDataset.referenceDateNote;
+    this.displayOrder = this.currentIndicatorDataset.displayOrder;
+
+    // Reset metadata
+    this.metadata = {
+      note: this.currentIndicatorDataset.metadata.note,
+      literature: this.currentIndicatorDataset.metadata.literature,
+      sridEPSG: 4326,
+      datasource: this.currentIndicatorDataset.metadata.datasource,
+      databasis: this.currentIndicatorDataset.metadata.databasis,
+      contact: this.currentIndicatorDataset.metadata.contact,
+      description: this.currentIndicatorDataset.metadata.description,
+      lastUpdate: this.currentIndicatorDataset.metadata.lastUpdate
+    };
+
+    // Set update interval
+    this.kommonitorDataExchangeService.updateIntervalOptions.forEach((option: any) => {
+      if (option.apiName === this.currentIndicatorDataset.metadata.updateInterval) {
+        this.metadata.updateInterval = option;
+      }
+    });
+
+    this.refreshReferenceValuesManagementTable();
+
+    this.indicatorAbbreviation = this.currentIndicatorDataset.abbreviation;
+    this.indicatorPrecision = this.currentIndicatorDataset.precision;
+
+    if (this.currentIndicatorDataset.defaultPrecision === false) {
+      this.showCustomCommaValue = true;
+    } else {
+      this.showCustomCommaValue = false;
+    }
+
+    // Set indicator type
+    this.kommonitorDataExchangeService.indicatorTypeOptions.forEach((option: any) => {
+      if (option.apiName === this.currentIndicatorDataset.indicatorType) {
+        this.indicatorType = option;
+      }
+    });
+
+    this.isHeadlineIndicator = this.currentIndicatorDataset.isHeadlineIndicator;
+    this.indicatorUnit = this.currentIndicatorDataset.unit;
+
+    this.enableFreeTextUnit = true;
+    this.kommonitorDataExchangeService.indicatorUnitOptions.forEach((option: any) => {
+      if (option === this.currentIndicatorDataset.unit) {
+        this.enableFreeTextUnit = false;
+      }
+    });
+
+    this.indicatorProcessDescription = this.currentIndicatorDataset.processDescription;
+    this.indicatorTagsString_withCommas = '';
+
+    if (this.currentIndicatorDataset.tags && this.currentIndicatorDataset.tags.length > 0) {
+      for (let index = 0; index < this.currentIndicatorDataset.tags.length; index++) {
+        this.indicatorTagsString_withCommas += this.currentIndicatorDataset.tags[index];
+        if (index < this.currentIndicatorDataset.tags.length - 1) {
+          this.indicatorTagsString_withCommas += ',';
+        }
+      }
+    } else {
+      this.indicatorTagsString_withCommas = '';
+    }
+
+    this.indicatorInterpretation = this.currentIndicatorDataset.interpretation;
+
+    // Set creation type
+    this.kommonitorDataExchangeService.indicatorCreationTypeOptions.forEach((option: any) => {
+      if (option.apiName === this.currentIndicatorDataset.creationType) {
+        this.indicatorCreationType = option;
+      }
+    });
+
+    this.indicatorLowestSpatialUnitMetadataObjectForComputation = null;
+
+    for (let i = 0; i < this.kommonitorDataExchangeService.availableSpatialUnits.length; i++) {
+      const spatialUnitMetadata = this.kommonitorDataExchangeService.availableSpatialUnits[i];
+      if (spatialUnitMetadata.spatialUnitLevel === this.currentIndicatorDataset.lowestSpatialUnitForComputation) {
+        this.indicatorLowestSpatialUnitMetadataObjectForComputation = spatialUnitMetadata;
+        break;
+      }
+    }
+
+    if (this.indicatorCreationType?.apiName === 'COMPUTATION') {
+      this.enableLowestSpatialUnitSelect = true;
+    } else {
+      this.enableLowestSpatialUnitSelect = false;
+    }
+
+    // Set topic hierarchy
+    const topicHierarchy = this.kommonitorDataExchangeService.getTopicHierarchyForTopicId(this.currentIndicatorDataset.topicReference);
+
+    if (topicHierarchy && topicHierarchy[0]) {
+      this.indicatorTopic_mainTopic = topicHierarchy[0];
+    }
+    if (topicHierarchy && topicHierarchy[1]) {
+      this.indicatorTopic_subTopic = topicHierarchy[1];
+    }
+    if (topicHierarchy && topicHierarchy[2]) {
+      this.indicatorTopic_subsubTopic = topicHierarchy[2];
+    }
+    if (topicHierarchy && topicHierarchy[3]) {
+      this.indicatorTopic_subsubsubTopic = topicHierarchy[3];
+    }
+
+    // Reset references
+    this.indicatorNameFilter = '';
+    this.tmpIndicatorReference_selectedIndicatorMetadata = null;
+    this.tmpIndicatorReference_referenceDescription = '';
+    this.indicatorReferences_adminView = [];
+    this.indicatorReferences_apiRequest = [];
+
+    if (this.currentIndicatorDataset.referencedIndicators && this.currentIndicatorDataset.referencedIndicators.length > 0) {
+      for (const indicatorReference of this.currentIndicatorDataset.referencedIndicators.filter((item: any) => item != null && item != undefined)) {
+        const indicatorMetadata = this.kommonitorDataExchangeService.getIndicatorMetadataById(indicatorReference.referencedIndicatorId);
+        const referenceEntry = {
+          "referencedIndicatorName": indicatorMetadata.indicatorName,
+          "referencedIndicatorId": indicatorMetadata.indicatorId,
+          "referencedIndicatorAbbreviation": indicatorMetadata.abbreviation,
+          "referencedIndicatorDescription": indicatorReference.referencedIndicatorDescription
+        };
+        this.indicatorReferences_adminView.push(referenceEntry);
+      }
+    }
+
+    this.georesourceNameFilter = '';
+    this.tmpGeoresourceReference_selectedGeoresourceMetadata = null;
+    this.tmpGeoresourceReference_referenceDescription = '';
+    this.georesourceReferences_adminView = [];
+    this.georesourceReferences_apiRequest = [];
+
+    if (this.currentIndicatorDataset.referencedGeoresources && this.currentIndicatorDataset.referencedGeoresources.length > 0) {
+      for (const georesourceReference of this.currentIndicatorDataset.referencedGeoresources) {
+        const georesourceMetadata = this.kommonitorDataExchangeService.getGeoresourceMetadataById(georesourceReference.referencedGeoresourceId);
+        const geo_referenceEntry = {
+          "referencedGeoresourceName": georesourceMetadata.datasetName,
+          "referencedGeoresourceId": georesourceMetadata.georesourceId,
+          "referencedGeoresourceDescription": georesourceReference.referencedGeoresourceDescription
+        };
+        this.georesourceReferences_adminView.push(geo_referenceEntry);
+      }
+    }
+
+    // Reset classification
+    this.numClassesArray = [3, 4, 5, 6, 7, 8];
+    this.numClassesPerSpatialUnit = null;
+    this.classificationMethod = __env?.defaultClassifyMethod || 'jenks';
+    this.spatialUnitClassification = [];
+    this.classBreaksInvalid = false;
+
+    if (this.currentIndicatorDataset.defaultClassificationMapping.classificationMethod) {
+      this.classificationMethod = this.currentIndicatorDataset.defaultClassificationMapping.classificationMethod.toLowerCase();
+    }
+    if (this.currentIndicatorDataset.defaultClassificationMapping.numClasses) {
+      this.numClassesPerSpatialUnit = this.currentIndicatorDataset.defaultClassificationMapping.numClasses;
+      this.onNumClassesChanged(this.numClassesPerSpatialUnit || 5);
+      
+      // apply breaks for spatial units:
+      for (let i = 0; i < this.spatialUnitClassification.length; i++) {
+        for (let item of this.currentIndicatorDataset.defaultClassificationMapping.items) {
+          if (item.spatialUnitId == this.spatialUnitClassification[i].spatialUnitId) {
+            this.spatialUnitClassification[i] = item;
+            this.onBreaksChanged(i);
+          }
+        }
+      }
+    }
+    
+    // instantiate with palette 'Blues'
+    this.selectedColorBrewerPaletteEntry = this.colorbrewerPalettes[13];
+
+    for (const colorbrewerPalette of this.colorbrewerPalettes) {
+      if (colorbrewerPalette.paletteName === this.currentIndicatorDataset.defaultClassificationMapping.colorBrewerSchemeName) {
+        this.selectedColorBrewerPaletteEntry = colorbrewerPalette;
+        break;
+      }
+    }
+
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+  }
+
+  onClickColorBrewerEntry(colorPaletteEntry: any): void {
+    this.selectedColorBrewerPaletteEntry = colorPaletteEntry;
+  }
+
+  onAddOrUpdateIndicatorReference(): void {
+    const tmpIndicatorReference_adminView = {
+      "referencedIndicatorName": this.tmpIndicatorReference_selectedIndicatorMetadata.indicatorName,
+      "referencedIndicatorId": this.tmpIndicatorReference_selectedIndicatorMetadata.indicatorId,
+      "referencedIndicatorAbbreviation": this.tmpIndicatorReference_selectedIndicatorMetadata.abbreviation,
+      "referencedIndicatorDescription": this.tmpIndicatorReference_referenceDescription
+    };
+
+    let processed = false;
+
+    for (let index = 0; index < this.indicatorReferences_adminView.length; index++) {
+      const indicatorReference_adminView = this.indicatorReferences_adminView[index];
+      
+      if (indicatorReference_adminView.referencedIndicatorId === tmpIndicatorReference_adminView.referencedIndicatorId) {
+        // replace object
+        this.indicatorReferences_adminView[index] = tmpIndicatorReference_adminView;
+        processed = true;
+        break;
+      }
+    }
+
+    if (!processed) {
+      // new entry
+      this.indicatorReferences_adminView.push(tmpIndicatorReference_adminView);
+    }
+
+    this.tmpIndicatorReference_selectedIndicatorMetadata = null;
+    this.tmpIndicatorReference_referenceDescription = '';
+  }
+
+  onClickEditIndicatorReference(indicatorReference_adminView: any): void {
+    this.tmpIndicatorReference_selectedIndicatorMetadata = this.kommonitorDataExchangeService.getIndicatorMetadataById(indicatorReference_adminView.referencedIndicatorId);
+    this.tmpIndicatorReference_referenceDescription = indicatorReference_adminView.referencedIndicatorDescription;
+  }
+
+  onClickDeleteIndicatorReference(indicatorReference_adminView: any): void {
+    for (let index = 0; index < this.indicatorReferences_adminView.length; index++) {
+      if (this.indicatorReferences_adminView[index].referencedIndicatorId === indicatorReference_adminView.referencedIndicatorId) {
+        // remove object
+        this.indicatorReferences_adminView.splice(index, 1);
+        break;
+      }
+    }
+  }
+
+  onAddOrUpdateGeoresourceReference(): void {
+    const tmpGeoresourceReference_adminView = {
+      "referencedGeoresourceName": this.tmpGeoresourceReference_selectedGeoresourceMetadata.datasetName,
+      "referencedGeoresourceId": this.tmpGeoresourceReference_selectedGeoresourceMetadata.georesourceId,
+      "referencedGeoresourceDescription": this.tmpGeoresourceReference_referenceDescription
+    };
+
+    let processed = false;
+
+    for (let index = 0; index < this.georesourceReferences_adminView.length; index++) {
+      const georesourceReference_adminView = this.georesourceReferences_adminView[index];
+      
+      if (georesourceReference_adminView.referencedGeoresourceId === tmpGeoresourceReference_adminView.referencedGeoresourceId) {
+        // replace object
+        this.georesourceReferences_adminView[index] = tmpGeoresourceReference_adminView;
+        processed = true;
+        break;
+      }
+    }
+
+    if (!processed) {
+      // new entry
+      this.georesourceReferences_adminView.push(tmpGeoresourceReference_adminView);
+    }
+
+    this.tmpGeoresourceReference_selectedGeoresourceMetadata = null;
+    this.tmpGeoresourceReference_referenceDescription = '';
+  }
+
+  onClickEditGeoresourceReference(georesourceReference_adminView: any): void {
+    this.tmpGeoresourceReference_selectedGeoresourceMetadata = this.kommonitorDataExchangeService.getGeoresourceMetadataById(georesourceReference_adminView.referencedGeoresourceId);
+    this.tmpGeoresourceReference_referenceDescription = georesourceReference_adminView.referencedGeoresourceDescription;
+  }
+
+  onClickDeleteGeoresourceReference(georesourceReference_adminView: any): void {
+    for (let index = 0; index < this.georesourceReferences_adminView.length; index++) {
+      if (this.georesourceReferences_adminView[index].referencedGeoresourceId === georesourceReference_adminView.referencedGeoresourceId) {
+        // remove object
+        this.georesourceReferences_adminView.splice(index, 1);
+        break;
+      }
+    }
+  }
+
+  onChangeCreationType(): void {
+    if (this.indicatorCreationType?.apiName === 'COMPUTATION') {
+      this.enableLowestSpatialUnitSelect = true;
+    } else {
+      this.enableLowestSpatialUnitSelect = false;
+    }
+  }
+
+  onChangeIndicatorUnit(): void {
+    if (this.indicatorUnit.includes('Freitext')) {
+      this.enableFreeTextUnit = true;
+    } else {
+      this.enableFreeTextUnit = false;
+    }
+  }
+
+  checkDatasetName(): void {
+    this.datasetNameInvalid = false;
+    this.kommonitorDataExchangeService.availableIndicators.forEach((indicator: any) => {
+      // show error only if indicator is renamed to another already existing indicator
+      if (indicator.indicatorName === this.datasetName && 
+          indicator.indicatorType === this.indicatorType?.apiName && 
+          indicator.indicatorId != this.currentIndicatorDataset.indicatorId) {
+        this.datasetNameInvalid = true;
+        return;
+      }
+    });
+  }
+
+  buildPatchBody_indicators(): any {
+    const patchBody: any = {
+      "metadata": {
+        "note": this.metadata.note || null,
+        "literature": this.metadata.literature || null,
+        "updateInterval": this.metadata.updateInterval?.apiName,
+        "sridEPSG": this.metadata.sridEPSG || 4326,
+        "datasource": this.metadata.datasource,
+        "contact": this.metadata.contact,
+        "lastUpdate": this.metadata.lastUpdate,
+        "description": this.metadata.description || null,
+        "databasis": this.metadata.databasis || null
+      },
+      "refrencesToOtherIndicators": [] as any[],
+      "regionalReferenceValues": [] as any[],
+      "datasetName": this.datasetName,
+      "abbreviation": this.indicatorAbbreviation || null,
+      "precision": (this.showCustomCommaValue === true) ? this.indicatorPrecision : null,
+      "characteristicValue": null,
+      "tags": [] as string[],
+      "creationType": this.indicatorCreationType?.apiName,
+      "unit": this.indicatorUnit,
+      "topicReference": "",
+      "refrencesToGeoresources": [] as any[],
+      "indicatorType": this.indicatorType?.apiName,
+      "interpretation": this.indicatorInterpretation || "",
+      "isHeadlineIndicator": this.isHeadlineIndicator || false,
+      "processDescription": this.indicatorProcessDescription || "",
+      "referenceDateNote": this.indicatorReferenceDateNote || "",
+      "displayOrder": this.displayOrder,
+      "lowestSpatialUnitForComputation": this.indicatorLowestSpatialUnitMetadataObjectForComputation ? 
+        this.indicatorLowestSpatialUnitMetadataObjectForComputation.spatialUnitLevel : null,
+      "defaultClassificationMapping": {
+        "colorBrewerSchemeName": this.selectedColorBrewerPaletteEntry.paletteName,
+        "classificationMethod": this.classificationMethod.toUpperCase(),
+        "numClasses": this.numClassesPerSpatialUnit ? Number(this.numClassesPerSpatialUnit) : 5,
+        "items": this.spatialUnitClassification.filter((entry: any) => !entry.breaks.includes(null)),
+      }
+    };
+
+    // regionalReferenceValues
+    const regionalReferenceValuesList = this.kommonitorDataGridHelperService.getReferenceValues_regionalReferenceValuesManagementGrid(this.regionalReferenceValuesManagementTableOptions);
+    for (const referenceValueEntry of regionalReferenceValuesList) {
+      patchBody.regionalReferenceValues.push(referenceValueEntry);
+    }
+
+    // TAGS
+    if (this.indicatorTagsString_withCommas) {
+      const tags_splitted = this.indicatorTagsString_withCommas.split(",");
+      for (const tagString of tags_splitted) {
+        patchBody.tags.push(tagString.trim());
+      }
+    }
+
+    // TOPIC REFERENCE
+    if (this.indicatorTopic_subsubsubTopic) {
+      patchBody.topicReference = this.indicatorTopic_subsubsubTopic.topicId;
+    } else if (this.indicatorTopic_subsubTopic) {
+      patchBody.topicReference = this.indicatorTopic_subsubTopic.topicId;
+    } else if (this.indicatorTopic_subTopic) {
+      patchBody.topicReference = this.indicatorTopic_subTopic.topicId;
+    } else if (this.indicatorTopic_mainTopic) {
+      patchBody.topicReference = this.indicatorTopic_mainTopic.topicId;
+    } else {
+      patchBody.topicReference = "";
+    }
+
+    // REFERENCES
+    if (this.indicatorReferences_adminView && this.indicatorReferences_adminView.length > 0) {
+      patchBody.refrencesToOtherIndicators = [];
+
+      for (const indicRef of this.indicatorReferences_adminView) {
+        patchBody.refrencesToOtherIndicators.push({
+          "indicatorId": indicRef.referencedIndicatorId,
+          "referenceDescription": indicRef.referencedIndicatorDescription
+        });
+      }
+    }
+
+    if (this.georesourceReferences_adminView && this.georesourceReferences_adminView.length > 0) {
+      patchBody.refrencesToGeoresources = [];
+
+      for (const geoRef of this.georesourceReferences_adminView) {
+        patchBody.refrencesToGeoresources.push({
+          "georesourceId": geoRef.referencedGeoresourceId,
+          "referenceDescription": geoRef.referencedGeoresourceDescription
+        });
+      }
+    }
+
+    return patchBody;
+  }
+
+  editIndicatorMetadata(): void {
+    const patchBody = this.buildPatchBody_indicators();
+
+    this.loadingData = true;
+
+    this.http.patch(
+      this.kommonitorDataExchangeService.baseUrlToKomMonitorDataAPI + "/indicators/" + this.currentIndicatorDataset.indicatorId,
+      patchBody
+    ).subscribe({
+      next: (response: any) => {
+        this.successMessagePart = this.datasetName;
+        this.broadcastService.broadcast('refreshIndicatorOverviewTable', { crudType: 'edit', targetIndicatorId: this.currentIndicatorDataset.indicatorId });
+        this.loadingData = false;
+      },
+      error: (error: any) => {
+        console.error("Error while updating indicator metadata.");
+        if (error.data?.message) {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error.data.message);
+        } else if (error.data) {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error.data);
+        } else {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+        }
+        this.loadingData = false;
+      }
+    });
+  }
+
+  hideSuccessAlert(): void {
+    this.successMessagePart = '';
+  }
+
+  hideErrorAlert(): void {
+    this.errorMessagePart = '';
+  }
+
+  hideMetadataErrorAlert(): void {
+    this.indicatorAddMetadataImportErrorAlert = false;
+  }
+} 
\ No newline at end of file
diff --git a/app/pipes/filter.pipe.ts b/app/pipes/filter.pipe.ts
index 0b3c5f95b..dc7b8b6b2 100644
--- a/app/pipes/filter.pipe.ts
+++ b/app/pipes/filter.pipe.ts
@@ -4,19 +4,28 @@ import { Pipe, PipeTransform } from '@angular/core';
   name: 'filter'
 })
 export class FilterPipe implements PipeTransform {
-  transform(items: any[], searchText: string): any[] {
+  transform(items: any[], searchText: string, property?: string): any[] {
     if (!items) return [];
     if (!searchText) return items;
     
     searchText = searchText.toLowerCase();
     
     return items.filter(item => {
+      if (property && item[property]) {
+        return item[property].toLowerCase().includes(searchText);
+      }
       if (item.indicatorName) {
         return item.indicatorName.toLowerCase().includes(searchText);
       }
       if (item.georesourceName) {
         return item.georesourceName.toLowerCase().includes(searchText);
       }
+      if (item.datasetName) {
+        return item.datasetName.toLowerCase().includes(searchText);
+      }
+      if (item.topicName) {
+        return item.topicName.toLowerCase().includes(searchText);
+      }
       return false;
     });
   }
diff --git a/app/services/adminIndicatorUnit/kommonitor-data-exchange.service.ts b/app/services/adminIndicatorUnit/kommonitor-data-exchange.service.ts
index b38c2aca9..0b4bc69e0 100644
--- a/app/services/adminIndicatorUnit/kommonitor-data-exchange.service.ts
+++ b/app/services/adminIndicatorUnit/kommonitor-data-exchange.service.ts
@@ -145,6 +145,27 @@ export class KommonitorIndicatorDataExchangeService {
     return this.angularJsDataExchangeService.getIndicatorMetadataById(indicatorId);
   }
 
+  /**
+   * Gets georesource metadata by ID - delegates to AngularJS service
+   */
+  getGeoresourceMetadataById(georesourceId: string): any {
+    return this.angularJsDataExchangeService.getGeoresourceMetadataById(georesourceId);
+  }
+
+  /**
+   * Gets topic hierarchy for topic ID - delegates to AngularJS service
+   */
+  getTopicHierarchyForTopicId(topicId: string): any {
+    return this.angularJsDataExchangeService.getTopicHierarchyForTopicId(topicId);
+  }
+
+  /**
+   * Gets spatial unit metadata by ID - delegates to AngularJS service
+   */
+  getSpatialUnitMetadataById(spatialUnitId: string): any {
+    return this.angularJsDataExchangeService.getSpatialUnitMetadataById(spatialUnitId);
+  }
+
   /**
    * Checks if the current user has create permissions - delegates to AngularJS service
    */
diff --git a/app/services/adminIndicatorUnit/kommonitor-data-grid-helper.service.ts b/app/services/adminIndicatorUnit/kommonitor-data-grid-helper.service.ts
index b1daa5808..455ec82f2 100644
--- a/app/services/adminIndicatorUnit/kommonitor-data-grid-helper.service.ts
+++ b/app/services/adminIndicatorUnit/kommonitor-data-grid-helper.service.ts
@@ -382,4 +382,18 @@ export class KommonitorIndicatorDataGridHelperService {
     const now = new Date();
     return now.toISOString();
   }
+
+  /**
+   * Gets reference values from regional reference values management grid - delegates to AngularJS service
+   */
+  getReferenceValues_regionalReferenceValuesManagementGrid(gridOptions: any): any[] {
+    return this.angularJsDataExchangeService.getReferenceValues_regionalReferenceValuesManagementGrid(gridOptions);
+  }
+
+  /**
+   * Builds reference values management grid - delegates to AngularJS service
+   */
+  buildReferenceValuesManagementGrid(gridOptions: any): any {
+    return this.angularJsDataExchangeService.buildReferenceValuesManagementGrid(gridOptions);
+  }
 } 
\ No newline at end of file

From 540d1acbe538136511bc7771c53e2028be4b3420 Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Sat, 19 Jul 2025 14:12:41 +0530
Subject: [PATCH 022/120] migrate admin Indicator batch update modal

---
 app/app.module.ts                             |   4 +-
 .../admin-indicators-management.component.ts  |  46 +-
 ...indicator-batch-update-modal.component.css | 339 ++++++++++++
 ...ndicator-batch-update-modal.component.html | 419 ++++++++++++++
 .../indicator-batch-update-modal.component.ts | 509 ++++++++++++++++++
 5 files changed, 1309 insertions(+), 8 deletions(-)
 create mode 100644 app/components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component.css
 create mode 100644 app/components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component.html
 create mode 100644 app/components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index 9327b78c0..c05dc48f9 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -90,6 +90,7 @@ import { IndicatorEditMetadataModalComponent } from './components/ngComponents/a
 import { IndicatorEditFeaturesModalComponent } from './components/ngComponents/admin/adminIndicatorsManagement/indicatorEditFeaturesModal/indicator-edit-features-modal.component';
 import { IndicatorEditIndicatorSpatialUnitRolesModalComponent } from './components/ngComponents/admin/adminIndicatorsManagement/indicatorEditIndicatorSpatialUnitRolesModal/indicator-edit-indicator-spatial-unit-roles-modal.component';
 import { IndicatorDeleteModalComponent } from './components/ngComponents/admin/adminIndicatorsManagement/indicatorDeleteModal/indicator-delete-modal.component';
+import { IndicatorBatchUpdateModalComponent } from './components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component';
 
 
 // currently the AngularJS routing is still used as part of kommonitorClient module
@@ -189,7 +190,8 @@ declare var MathJax;
     IndicatorEditMetadataModalComponent,
     IndicatorEditFeaturesModalComponent,
     IndicatorEditIndicatorSpatialUnitRolesModalComponent,
-    IndicatorDeleteModalComponent
+    IndicatorDeleteModalComponent,
+    IndicatorBatchUpdateModalComponent
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/admin-indicators-management.component.ts b/app/components/ngComponents/admin/adminIndicatorsManagement/admin-indicators-management.component.ts
index 3946021db..56fc9f846 100644
--- a/app/components/ngComponents/admin/adminIndicatorsManagement/admin-indicators-management.component.ts
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/admin-indicators-management.component.ts
@@ -13,6 +13,7 @@ import { IndicatorAddModalComponent } from './indicatorAddModal/indicator-add-mo
 import { IndicatorEditMetadataModalComponent } from './indicatorEditMetadataModal/indicator-edit-metadata-modal.component';
 import { IndicatorEditFeaturesModalComponent } from './indicatorEditFeaturesModal/indicator-edit-features-modal.component';
 import { IndicatorDeleteModalComponent } from './indicatorDeleteModal/indicator-delete-modal.component';
+import { IndicatorBatchUpdateModalComponent } from './indicatorBatchUpdateModal/indicator-batch-update-modal.component';
 
 declare const $: any;
 declare const __env: any;
@@ -381,7 +382,7 @@ export class AdminIndicatorsManagementComponent implements OnInit, OnDestroy {
     console.log('Opening indicator edit metadata modal...');
     try {
       const modalRef = this.modalService.open(IndicatorEditMetadataModalComponent, {
-        size: 'xl',
+        size: 'lg',
         backdrop: 'static',
         keyboard: false,
         container: 'body',
@@ -413,9 +414,11 @@ export class AdminIndicatorsManagementComponent implements OnInit, OnDestroy {
   onClickEditFeatures(indicatorMetadata: any): void {
     try {
       const modalRef = this.modalService.open(IndicatorEditFeaturesModalComponent, {
-        size: 'xl',
+        size: 'lg',
         backdrop: 'static',
-        keyboard: false
+        keyboard: false,
+        container: 'body',
+        animation: false
       });
 
       const modalComponent = modalRef.componentInstance as IndicatorEditFeaturesModalComponent;
@@ -458,9 +461,11 @@ export class AdminIndicatorsManagementComponent implements OnInit, OnDestroy {
 
   openDeleteIndicatorModal(indicatorDataset: any): void {
     const modalRef = this.modalService.open(IndicatorDeleteModalComponent, {
-      size: 'xl',
+      size: 'lg',
       backdrop: 'static',
-      keyboard: false
+      keyboard: false,
+      container: 'body',
+      animation: false
     });
 
     // Set the selected indicator in the modal
@@ -475,8 +480,35 @@ export class AdminIndicatorsManagementComponent implements OnInit, OnDestroy {
   }
 
   onClickBatchUpdate(): void {
-    // TODO: Implement batch update modal
-    console.log('Batch update clicked');
+    console.log('Opening indicator batch update modal...');
+    try {
+      const modalRef = this.modalService.open(IndicatorBatchUpdateModalComponent, {
+        size: 'lg',
+        backdrop: 'static',
+        keyboard: false,
+        container: 'body',
+        animation: false
+      });
+
+      // Pass the modal reference to the component
+      const modalComponent = modalRef.componentInstance as IndicatorBatchUpdateModalComponent;
+      modalComponent.modalRef = modalRef;
+
+      console.log('Batch update modal reference created:', modalRef);
+
+      modalRef.result.then((result) => {
+        console.log('Batch update modal result:', result);
+        if (result) {
+          // Modal was closed successfully, refresh the table
+          this.initializeOrRefreshOverviewTable();
+        }
+      }).catch((error) => {
+        console.log('Batch update modal error:', error);
+        // Modal dismissed
+      });
+    } catch (error) {
+      console.error('Error opening batch update modal:', error);
+    }
   }
 
   onClickDeleteSelected(): void {
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component.css b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component.css
new file mode 100644
index 000000000..23b96c933
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component.css
@@ -0,0 +1,339 @@
+/* Batch update modal styles */
+.batch-list-table-wrapper {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.batch-list-table {
+  font-size: 11px;
+  width: 100%;
+  overflow: auto;
+}
+
+.batch-list-table th,
+.batch-list-table td {
+  padding: 8px;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.batch-list-table-sticky-column {
+  position: sticky;
+  background-color: #fff;
+  z-index: 10;
+}
+
+.batch-list-table-sticky-column-1 {
+  left: 0;
+  width: 50px;
+}
+
+.batch-list-table-sticky-column-2 {
+  left: 50px;
+  width: 200px;
+}
+
+.batch-list-table-sticky-column-header {
+  background-color: #f8f9fa;
+  border-bottom: 2px solid #dee2e6;
+}
+
+.batch-list-odd-rows {
+  background-color: #f8f9fa;
+}
+
+.batch-list-even-rows {
+  background-color: #ffffff;
+}
+
+.batch-list-table-name-field {
+  min-width: 180px;
+}
+
+.indicatorTimeseriesMappingBtn {
+  background-color: #5cb85c !important;
+  border-color: #4cae4c !important;
+}
+
+.indicatorTimeseriesMappingBtn:hover {
+  background-color: #449d44 !important;
+  border-color: #398439 !important;
+}
+
+.loading-overlay-admin-panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.icon-spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Form control styles */
+.form-control {
+  font-size: 11px;
+  padding: 4px 8px;
+  height: auto;
+}
+
+.form-control:focus {
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+/* Button styles */
+.btn {
+  font-size: 11px;
+  padding: 4px 8px;
+}
+
+.btn-sm {
+  font-size: 10px;
+  padding: 3px 6px;
+}
+
+/* Modal styles */
+.modal-xl {
+  max-width: 95%;
+}
+
+.modal-body {
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+/* Table responsive styles */
+.table-responsive {
+  border: 1px solid #dee2e6;
+}
+
+/* Checkbox styles */
+input[type="checkbox"] {
+  margin: 0;
+  vertical-align: middle;
+}
+
+/* Select styles */
+select.form-control {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 16px 12px;
+  padding-right: 2rem;
+}
+
+/* File input styles */
+input[type="file"] {
+  padding: 2px;
+}
+
+/* Form check styles */
+.form-check {
+  margin-bottom: 0;
+}
+
+.form-check-input {
+  margin-right: 8px;
+}
+
+/* Utility classes */
+.text-end {
+  text-align: right;
+}
+
+.mb-3 {
+  margin-bottom: 1rem;
+}
+
+.mt-3 {
+  margin-top: 1rem;
+}
+
+/* Switch styles */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switchslider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.switchslider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .switchslider {
+  background-color: #2196F3;
+}
+
+input:focus + .switchslider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .switchslider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+.switchslider.round {
+  border-radius: 34px;
+}
+
+.switchslider.round:before {
+  border-radius: 50%;
+}
+
+/* AdminLTE box styles */
+.box {
+  position: relative;
+  border-radius: 3px;
+  background: #ffffff;
+  border-top: 3px solid #d2d6de;
+  margin-bottom: 20px;
+  width: 100%;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+.box.box-primary {
+  border-top-color: #3c8dbc;
+}
+
+.box.collapsed-box .box-body,
+.box.collapsed-box .box-footer {
+  display: none;
+}
+
+.box-header {
+  color: #444;
+  display: block;
+  padding: 10px;
+  position: relative;
+}
+
+.box-header.with-border {
+  border-bottom: 1px solid #f4f4f4;
+}
+
+.box-title {
+  font-size: 18px;
+  margin: 0;
+  line-height: 1;
+}
+
+.box-tools {
+  position: absolute;
+  right: 10px;
+  top: 5px;
+}
+
+.btn-box-tool {
+  padding: 5px;
+  font-size: 12px;
+  background: transparent;
+  color: #97a0b3;
+  border: none;
+}
+
+.pull-right {
+  float: right !important;
+}
+
+.pull-left {
+  float: left !important;
+}
+
+.box-body {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  padding: 10px;
+}
+
+/* Vertical align */
+.vertical-align {
+  display: flex;
+  align-items: flex-start;
+}
+
+/* Help block */
+.help-block {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  color: #737373;
+}
+
+/* Alert styles */
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.alert-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .batch-list-table {
+    font-size: 10px;
+  }
+  
+  .batch-list-table th,
+  .batch-list-table td {
+    padding: 4px;
+  }
+  
+  .modal-xl {
+    max-width: 100%;
+    margin: 0;
+  }
+  
+  .vertical-align {
+    flex-direction: column;
+  }
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component.html b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component.html
new file mode 100644
index 000000000..c994a466b
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component.html
@@ -0,0 +1,419 @@
+
+

+  

+    
+  

+

+
+
+
+

+  
+  
Batch-Update

+

+
+

+  

+    

+      
Diese Funktion ermöglicht es, die Mapping-Parameter mehrerer Indikatoren gleichzeitig zu aktualisieren.

+      
* = Pflichtfeld

+    

+  

+  
+  

+    

+      

+
+        
+        

+          
+            
+              
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+              
+            
+            
+              
+
+                
+                
+
+                
+                
+                
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                             
+             
+
+             
+               
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+               
+             
+           

+                  
+                Name*MappingtabelleZeitreihen-Mapping*Datensatz-Quellformat*Quellformat*Encoding*Trennzeichen*Schema*NAMESPACESCHEMA_LOCATIONDatenquelltyp*Datei*URL*Payload*ID Attributname der Raumeinheiten*Ziel-Raumebene*Mappingtabelle speichern

+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                

+                   
+                 Name*MappingtabelleZeitreihen-Mapping*Datensatz-Quellformat*Quellformat*Encoding*Trennzeichen*Schema*NAMESPACESCHEMA_LOCATIONDatenquelltyp*Datei*URL*Payload*ID Attributname der Raumeinheiten*Ziel-Raumebene*Mappingtabelle speichern

+         

+
+         
+         
+       

+     

+   

+
+   

+   

+
+   

+     

+       

+         

+           
Standardwert-Funktion

+           

+             
+           

+         

+         
+         

+           

+             

+               

+                 Diese Funktion ermöglicht es, einen Standardwert für alle Zeilen einer variablen Tabellenspalte zu setzen.

+                 Sofern die Checkbox aktiviert ist, wird der Wert für alle Zeilen gesetzt. Ist sie deaktiviert, werden nur leere Tabellenfelder überschrieben, sodass bereits eingetragene Werte erhalten bleiben.

+                 Beim Zeitreihen-Mapping kann über die Checkbox festgelegt werden, ob bestehende Mappingeinträge für den angegebenen Attributnamen aktualisiert werden sollen. Neue Attributnamen werden unabhängig davon für alle Zeilen hinzugefügt.

+                 Gesperrte (ausgegraute) Felder werden ignoriert.
+               

+             

+             

+               

+                 
+                 
+                 
+                 
+                 
+                 
+                 
+                 
+
+                 
+                 
+               

+             

+             

+               

+                 
+                 
+               

+               

+                 
+               

+             

+           

+         

+       
	
+     

+
+     

+       

+         
+         
	
+         
+         

+           
Angabe, ob leere Attributwerte (NULL-Werte) übernommen werden. Diese werden wie NoData-Werte behandelt.
+             Bei deaktivierter Option wird bei einem solchen Fall ein Fehler geworfen.
+           

+         

+       

+     

+     
+     

+       

+         

+           
+             Falls für Indikatoren durch das Batch Update erstmalig neue Raumeinheiten verknüpft werden,
+             so werden die Zugriffsrechte aus den zugehörigen Metadaten übernommen
+           
+         

+       

+     

+   

+
+        
+        

+          

+            
+          

+        

+
+         

+ 
+

+  
+  
+
+  
+
+  
+
+  
+
+  
+  
+  
+
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component.ts b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component.ts
new file mode 100644
index 000000000..efd858e03
--- /dev/null
+++ b/app/components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component.ts
@@ -0,0 +1,509 @@
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Input } from '@angular/core';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { HttpClient } from '@angular/common/http';
+import { Subscription } from 'rxjs';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { KommonitorIndicatorDataExchangeService } from 'services/adminIndicatorUnit/kommonitor-data-exchange.service';
+import { KommonitorIndicatorCacheHelperService } from 'services/adminIndicatorUnit/kommonitor-cache-helper.service';
+
+declare const $: any;
+declare const __env: any;
+
+interface BatchListItem {
+  isSelected: boolean;
+  name: any;
+  mappingTableName: string;
+  mappingObj: {
+    converter: any;
+    dataSource: any;
+    propertyMapping: {
+      timeseriesMappings: any[];
+      spatialReferenceKeyProperty: string;
+      keepMissingOrNullValueIndicator: boolean;
+    };
+    targetSpatialUnitName: string;
+  };
+  selectedConverter: any;
+  selectedDatasourceType: any;
+  selectedTargetSpatialUnit: any;
+}
+
+@Component({
+  selector: 'indicator-batch-update-modal',
+  templateUrl: './indicator-batch-update-modal.component.html',
+  styleUrls: ['./indicator-batch-update-modal.component.css']
+})
+export class IndicatorBatchUpdateModalComponent implements OnInit, OnDestroy {
+
+  @ViewChild('batchListFileInput') batchListFileInput!: ElementRef;
+  @Input() modalRef?: NgbModalRef;
+
+  public isFirstStart: boolean = true;
+  public lastUpdateResponseObj: any;
+  public timeseriesMappingReference: any;
+  public selected: any = { value: null };
+  public keepMissingValues: boolean = true;
+  public batchList: BatchListItem[] = [];
+  public timeseriesMappingModalOpenForIndex: number | undefined;
+  public defaultTimeseriesMappingSave: any[] = [];
+  public allRowsSelected: boolean = false;
+  public loadingData: boolean = false;
+
+  private subscriptions: Subscription[] = [];
+  private keyDownHandler: (event: KeyboardEvent) => void;
+
+  constructor(
+    private modalService: NgbModal,
+    private http: HttpClient,
+    private broadcastService: BroadcastService,
+    public kommonitorDataExchangeService: KommonitorIndicatorDataExchangeService,
+    private kommonitorCacheHelperService: KommonitorIndicatorCacheHelperService
+  ) {
+    this.keyDownHandler = this.handleKeyDown.bind(this);
+  }
+
+  ngOnInit(): void {
+    this.setupEventListeners();
+    this.initialize();
+    
+    // Add keyboard event listener for Escape key
+    document.addEventListener('keydown', this.keyDownHandler);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+    
+    // Remove keyboard event listener
+    document.removeEventListener('keydown', this.keyDownHandler);
+  }
+
+  private setupEventListeners(): void {
+    // Listen for batch update completion
+    const sub1 = this.broadcastService.currentBroadcastMsg.subscribe(data => {
+      if (data.msg === 'batchUpdateCompleted' && (data as any).resourceType === 'indicator') {
+        this.lastUpdateResponseObj = data;
+      }
+      else if (data.msg === 'refreshIndicatorOverviewTableCompleted') {
+        this.refreshNameColumn();
+      }
+      else if (data.msg === 'timeseriesMappingChanged') {
+        this.timeseriesMappingReference = (data as any).mapping;
+      }
+    });
+    this.subscriptions.push(sub1);
+  }
+
+  public openModal(): void {
+    // This method will be called from the parent component
+    this.initialize();
+  }
+
+  private initialize(): void {
+    if (this.isFirstStart) {
+      this.addNewRowToBatchList();
+      this.isFirstStart = false;
+    }
+
+    // Set initial selected value if available
+    if (this.kommonitorDataExchangeService.availableIndicators && 
+        this.kommonitorDataExchangeService.availableIndicators.length > 0) {
+      this.selected.value = this.kommonitorDataExchangeService.availableIndicators[0];
+    }
+  }
+
+  public addNewRowToBatchList(): void {
+    const newRow: BatchListItem = {
+      isSelected: true,
+      name: null,
+      mappingTableName: '',
+      mappingObj: {
+        converter: {
+          encoding: '',
+          mimeType: '',
+          name: '',
+          parameters: [],
+          schema: '',
+          crs: 'EPSG:4326',
+          separator: ',',
+          schemaNamespace: '',
+          schemaLocation: ''
+        },
+        dataSource: {
+          parameters: [],
+          type: 'FILE',
+          url: '',
+          payload: ''
+        },
+        propertyMapping: {
+          timeseriesMappings: [],
+          spatialReferenceKeyProperty: '',
+          keepMissingOrNullValueIndicator: true
+        },
+        targetSpatialUnitName: ''
+      },
+      selectedConverter: null,
+      selectedDatasourceType: null,
+      selectedTargetSpatialUnit: null
+    };
+
+    this.batchList.push(newRow);
+  }
+
+  public deleteSelectedRowsFromBatchList(): void {
+    this.batchList = this.batchList.filter(row => !row.isSelected);
+  }
+
+  public onChangeSelectAllRows(): void {
+    this.batchList.forEach(row => {
+      row.isSelected = this.allRowsSelected;
+    });
+  }
+
+  public loadIndicatorsBatchList(): void {
+    if (this.batchListFileInput) {
+      this.batchListFileInput.nativeElement.click();
+    }
+  }
+
+  public onBatchListFileSelected(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const file = target.files?.[0];
+    if (file) {
+      this.parseBatchListFromFile(file);
+    }
+  }
+
+  private parseBatchListFromFile(file: File): void {
+    const reader = new FileReader();
+    reader.onload = (e: any) => {
+      try {
+        const newBatchList = JSON.parse(e.target.result);
+        this.processParsedBatchList(newBatchList);
+      } catch (error) {
+        console.error('Error parsing batch list file:', error);
+      }
+    };
+    reader.readAsText(file);
+  }
+
+  private processParsedBatchList(newBatchList: any[]): void {
+    // Remove all existing rows
+    this.batchList.forEach(row => row.isSelected = true);
+    this.deleteSelectedRowsFromBatchList();
+
+    // Add new rows from file
+    newBatchList.forEach((item: any) => {
+      this.addNewRowToBatchList();
+      const row = this.batchList[this.batchList.length - 1];
+
+      row.isSelected = item.isSelected;
+      
+      // Set indicator by ID
+      const indicatorId = item.name;
+      const indicatorObj = this.kommonitorDataExchangeService.getIndicatorMetadataById(indicatorId);
+      row.name = indicatorObj;
+
+      row.mappingTableName = item.mappingTableName;
+      row.mappingObj = item.mappingObj;
+
+      // Convert parameters to properties
+      if (row.mappingObj.converter) {
+        row.mappingObj.converter = this.converterParametersArrayToProperties(row.mappingObj.converter);
+      }
+      if (row.mappingObj.dataSource) {
+        row.mappingObj.dataSource = this.dataSourceParametersArrayToProperty(row.mappingObj.dataSource);
+      }
+
+      // Set selected objects
+      if (item.mappingObj.converter?.name) {
+        row.selectedConverter = this.getConverterObjectByName(item.mappingObj.converter.name);
+      }
+      if (item.mappingObj.dataSource?.type) {
+        row.selectedDatasourceType = this.getDatasourceTypeObjectByType(item.mappingObj.dataSource.type);
+      }
+      if (item.mappingObj.targetSpatialUnitName) {
+        row.selectedTargetSpatialUnit = this.getSpatialUnitObjectByName(item.mappingObj.targetSpatialUnitName);
+      }
+    });
+  }
+
+  public onMappingTableSelected(event: Event, index: number): void {
+    const target = event.target as HTMLInputElement;
+    const file = target.files?.[0];
+    if (file) {
+      // Implementation for mapping table selection
+      console.log('Mapping table selected for index:', index, file);
+      
+      const reader = new FileReader();
+      reader.onload = (e: any) => {
+        try {
+          // Handle mapping table file content
+          console.log('Mapping table file content loaded for index:', index);
+        } catch (error) {
+          console.error('Error reading mapping table file:', error);
+        }
+      };
+      reader.readAsText(file);
+    }
+  }
+
+  public onDataSourceFileSelected(event: Event, index: number): void {
+    const target = event.target as HTMLInputElement;
+    const file = target.files?.[0];
+    if (file) {
+      // Implementation for data source file selection
+      console.log('Data source file selected for index:', index, file);
+      
+      const reader = new FileReader();
+      reader.onload = () => {
+        try {
+          // Handle data source file content
+          console.log('Data source file content loaded for index:', index);
+        } catch (error) {
+          console.error('Error reading data source file:', error);
+        }
+      };
+      reader.readAsText(file);
+    }
+  }
+
+  public onTimeseriesMappingBtnClicked(event: any, index: number): void {
+    this.timeseriesMappingModalOpenForIndex = index;
+    // Open timeseries mapping modal
+    console.log('Opening timeseries mapping modal for index:', index);
+  }
+
+  public onDefaultTimeseriesMappingBtnClicked(event: any): void {
+    // Open default timeseries mapping modal
+    console.log('Opening default timeseries mapping modal');
+  }
+
+  public saveMappingObjectToFile(event: any, index: number): void {
+    const row = this.batchList[index];
+    const mappingData = {
+      name: row.name?.indicatorId || '',
+      mappingTableName: row.mappingTableName,
+      mappingObj: row.mappingObj,
+      isSelected: row.isSelected
+    };
+
+    const blob = new Blob([JSON.stringify(mappingData, null, 2)], { type: 'application/json' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `indicator-mapping-${row.name?.indicatorName || 'unknown'}.json`;
+    a.click();
+    window.URL.revokeObjectURL(url);
+  }
+
+  public startBatchUpdate(): void {
+    this.loadingData = true;
+    
+    // Implementation for batch update
+    console.log('Starting batch update for indicators:', this.batchList);
+    
+    // Simulate batch update process
+    setTimeout(() => {
+      this.loadingData = false;
+      this.broadcastService.broadcast('batchUpdateCompleted', {
+        resourceType: 'indicator',
+        status: 'success',
+        message: 'Batch update completed successfully'
+      });
+    }, 2000);
+  }
+
+  public reopenResultModal(): void {
+    if (this.lastUpdateResponseObj) {
+      this.broadcastService.broadcast('reopenBatchUpdateResultModal', this.lastUpdateResponseObj);
+    }
+  }
+
+  private refreshNameColumn(): void {
+    // Refresh name column dropdowns
+    console.log('Refreshing name column');
+  }
+
+  // Helper methods for parameter conversion
+  private converterParametersArrayToProperties(converter: any): any {
+    const properties: any = {};
+    if (converter.parameters) {
+      converter.parameters.forEach((param: any) => {
+        const propertyName = this.getConverterParameterPropertyName(param.name);
+        if (propertyName) {
+          properties[propertyName] = param.value;
+        }
+      });
+    }
+    return { ...converter, ...properties };
+  }
+
+  private dataSourceParametersArrayToProperty(dataSource: any): any {
+    const properties: any = {};
+    if (dataSource.parameters) {
+      dataSource.parameters.forEach((param: any) => {
+        const propertyName = this.getDataSourceParameterPropertyName(param.name);
+        if (propertyName) {
+          properties[propertyName] = param.value;
+        }
+      });
+    }
+    return { ...dataSource, ...properties };
+  }
+
+  private getConverterParameterPropertyName(paramName: string): string | null {
+    const mapping: { [key: string]: string } = {
+      'CRS': 'crs',
+      'Hausnummer_Spaltenname': 'hnrColumnName',
+      'Strasse_Spaltenname': 'streetColumnName',
+      'Adresse_Spaltenname': 'addressColumnName',
+      'Strasse_Hausnummer_Spaltenname': 'streetHnrColumnName',
+      'X_Koordinatenspalte_Rechtswert': 'xCoordColumnName',
+      'Y_Koordinatenspalte_Hochwert': 'yCoordColumnName',
+      'Postleitzahl_Spaltenname': 'plzColumnName',
+      'Stadt_Spaltenname': 'cityColumnName',
+      'NAMESPACE': 'schemaNamespace',
+      'SCHEMA_LOCATION': 'schemaLocation',
+      'Trennzeichen': 'separator'
+    };
+    return mapping[paramName] || null;
+  }
+
+  private getDataSourceParameterPropertyName(paramName: string): string | null {
+    const mapping: { [key: string]: string } = {
+      'NAME': 'name',
+      'URL': 'url',
+      'payload': 'payload'
+    };
+    return mapping[paramName] || null;
+  }
+
+  private getConverterObjectByName(name: string): any {
+    // Implementation to get converter object by name
+    // Access through AngularJS service for now
+    const angularJsService = (this.kommonitorDataExchangeService as any).angularJsDataExchangeService;
+    if (angularJsService && angularJsService.availableConverters) {
+      return angularJsService.availableConverters.find((c: any) => c.name === name);
+    }
+    return null;
+  }
+
+  private getDatasourceTypeObjectByType(type: string): any {
+    // Implementation to get datasource type object by type
+    // Access through AngularJS service for now
+    const angularJsService = (this.kommonitorDataExchangeService as any).angularJsDataExchangeService;
+    if (angularJsService && angularJsService.availableDatasourceTypes) {
+      return angularJsService.availableDatasourceTypes.find((d: any) => d.type === type);
+    }
+    return null;
+  }
+
+  private getSpatialUnitObjectByName(name: string): any {
+    // Implementation to get spatial unit object by name
+    if (this.kommonitorDataExchangeService.availableSpatialUnits) {
+      return this.kommonitorDataExchangeService.availableSpatialUnits.find(s => s.spatialUnitLevel === name);
+    }
+    return null;
+  }
+
+  // Column visibility methods
+  public checkColumnsToShowSelectedConverter(): string[] {
+    const converters = this.batchList
+      .map(row => row.selectedConverter?.name)
+      .filter(name => name);
+    
+    const columns: string[] = [];
+    if (converters.some(name => name && name.includes('Tabelle_Zeitreihe_zu_Indikator'))) {
+      columns.push('Tabelle_Zeitreihe_zu_Indikator');
+    }
+    if (converters.some(name => name && name.includes('WFS_v1'))) {
+      columns.push('WFS_v1');
+    }
+    return columns;
+  }
+
+  public checkIfSelectedDatasourceTypeIsFile(): boolean {
+    return this.batchList.some(row => row.selectedDatasourceType?.type === 'FILE');
+  }
+
+  public checkIfSelectedDatasourceTypeIsHttp(): boolean {
+    return this.batchList.some(row => row.selectedDatasourceType?.type === 'HTTP');
+  }
+
+  public checkIfSelectedDatasourceTypeIsInline(): boolean {
+    return this.batchList.some(row => row.selectedDatasourceType?.type === 'INLINE');
+  }
+
+  public checkIfSelectedConverterIsCsvOnlyIndicator(): boolean {
+    return this.batchList.some(row => row.selectedConverter?.name?.includes('csv_onlyIndicator'));
+  }
+
+  // Helper methods to get available options
+  public getAvailableConverters(): any[] {
+    const angularJsService = (this.kommonitorDataExchangeService as any).angularJsDataExchangeService;
+    return angularJsService?.availableConverters || [];
+  }
+
+  public getAvailableDatasourceTypes(): any[] {
+    const angularJsService = (this.kommonitorDataExchangeService as any).angularJsDataExchangeService;
+    return angularJsService?.availableDatasourceTypes || [];
+  }
+
+  // Default value function properties
+  public colDefaultFunctionSelectedColumn: string | null = null;
+  public colDefaultFunctionNewValue: any = undefined;
+  public colDefaultFunctionAllRowsChb: boolean = false;
+
+  public onClickSaveColDefaultValue(): void {
+    // Implementation for saving default column value
+    console.log('Saving default column value:', this.colDefaultFunctionSelectedColumn, this.colDefaultFunctionNewValue);
+  }
+
+  public saveBatchListToFile(): void {
+    const batchData = this.batchList.map(item => ({
+      name: item.name?.indicatorId || '',
+      mappingTableName: item.mappingTableName,
+      mappingObj: item.mappingObj,
+      isSelected: item.isSelected
+    }));
+
+    const blob = new Blob([JSON.stringify(batchData, null, 2)], { type: 'application/json' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'indicator-batch-list.json';
+    a.click();
+    window.URL.revokeObjectURL(url);
+  }
+
+  public checkIfNameAndFilesChosenInEachRow(): boolean {
+    // Check if each row has required fields filled
+    return this.batchList.length > 0 && this.batchList.every(row => 
+      row.name && 
+      row.selectedConverter && 
+      row.selectedDatasourceType &&
+      row.mappingObj.propertyMapping.spatialReferenceKeyProperty &&
+      row.selectedTargetSpatialUnit
+    );
+  }
+
+  public resetBatchUpdateForm(): void {
+    this.batchList = [];
+    this.addNewRowToBatchList();
+    this.colDefaultFunctionSelectedColumn = null;
+    this.colDefaultFunctionNewValue = undefined;
+    this.colDefaultFunctionAllRowsChb = false;
+  }
+
+  public closeModal(): void {
+    if (this.modalRef) {
+      this.modalRef.close();
+    }
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this.closeModal();
+    }
+  }
+} 
\ No newline at end of file

From 86cc3ef491bbb01f0f853721bfe0f4301e731568 Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Sat, 19 Jul 2025 15:42:35 +0530
Subject: [PATCH 023/120] migrate: admin georesourcin component

---
 app/app.module.ts                             |   9 +-
 .../kommonitor-admin.template.html            |   2 +-
 ...dmin-georesources-management.component.css | 238 ++++++++++++++++++
 ...min-georesources-management.component.html | 129 ++++++++++
 ...admin-georesources-management.component.ts | 184 ++++++++++++++
 .../kommonitor-cache-helper.service.ts        |  18 ++
 .../kommonitor-data-exchange.service.ts       |  92 +++++++
 .../kommonitor-data-grid-helper.service.ts    |  66 +++++
 8 files changed, 736 insertions(+), 2 deletions(-)
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.css
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
 create mode 100644 app/services/adminGeoresourceUnit/kommonitor-cache-helper.service.ts
 create mode 100644 app/services/adminGeoresourceUnit/kommonitor-data-exchange.service.ts
 create mode 100644 app/services/adminGeoresourceUnit/kommonitor-data-grid-helper.service.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index c05dc48f9..0c4aee971 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -91,6 +91,7 @@ import { IndicatorEditFeaturesModalComponent } from './components/ngComponents/a
 import { IndicatorEditIndicatorSpatialUnitRolesModalComponent } from './components/ngComponents/admin/adminIndicatorsManagement/indicatorEditIndicatorSpatialUnitRolesModal/indicator-edit-indicator-spatial-unit-roles-modal.component';
 import { IndicatorDeleteModalComponent } from './components/ngComponents/admin/adminIndicatorsManagement/indicatorDeleteModal/indicator-delete-modal.component';
 import { IndicatorBatchUpdateModalComponent } from './components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component';
+import { AdminGeoresourcesManagementComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component';
 
 
 // currently the AngularJS routing is still used as part of kommonitorClient module
@@ -191,7 +192,8 @@ declare var MathJax;
     IndicatorEditFeaturesModalComponent,
     IndicatorEditIndicatorSpatialUnitRolesModalComponent,
     IndicatorDeleteModalComponent,
-    IndicatorBatchUpdateModalComponent
+    IndicatorBatchUpdateModalComponent,
+    AdminGeoresourcesManagementComponent
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
@@ -317,6 +319,11 @@ export class AppModule implements DoBootstrap {
         component: AdminIndicatorsManagementComponent
       }) as angular.IDirectiveFactory);
 
+    angular.module('kommonitorAdmin')
+      .directive('adminGeoresourcesManagementNew', downgradeComponent({
+        component: AdminGeoresourcesManagementComponent
+      }) as angular.IDirectiveFactory);
+
     console.log("registered downgraded Angular components for AngularJS usage");
   }
 
diff --git a/app/components/kommonitorAdmin/kommonitor-admin.template.html b/app/components/kommonitorAdmin/kommonitor-admin.template.html
index ba1d67ff9..283d4e892 100644
--- a/app/components/kommonitorAdmin/kommonitor-admin.template.html
+++ b/app/components/kommonitorAdmin/kommonitor-admin.template.html
@@ -209,7 +209,7 @@ 
Gruppen (Hierarchie)

 
       

 
-        
+        
 
       

 
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.css b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.css
new file mode 100644
index 000000000..28b23a0af
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.css
@@ -0,0 +1,238 @@
+/* Admin Georesources Management Component Styles */
+
+/* Loading overlay */
+.loading-overlay-admin-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading-overlay-admin-panel.ng-hide {
+  display: none !important;
+}
+
+.icon-spin {
+  animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Content header */
+.content-header {
+  position: relative;
+  padding: 15px 15px 0 15px;
+}
+
+.content-header h1 {
+  margin: 0;
+  font-size: 24px;
+}
+
+.content-header h1 small {
+  font-size: 15px;
+  display: inline-block;
+  padding-left: 4px;
+  font-weight: 300;
+}
+
+/* Admin table button wrapper */
+.adminTableButtonWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  padding: 10px 0;
+}
+
+.verticalAlign {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+/* Switch toggle */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switchslider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: .4s;
+}
+
+.switchslider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: .4s;
+}
+
+input:checked + .switchslider {
+  background-color: #2196F3;
+}
+
+input:focus + .switchslider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .switchslider:before {
+  transform: translateX(26px);
+}
+
+.switchslider.round {
+  border-radius: 34px;
+}
+
+.switchslider.round:before {
+  border-radius: 50%;
+}
+
+/* Box styles */
+.box {
+  position: relative;
+  border-radius: 3px;
+  background: #ffffff;
+  border-top: 3px solid #d2d6de;
+  margin-bottom: 20px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.box.box-primary {
+  border-top-color: #3c8dbc;
+}
+
+.box-header {
+  color: #444;
+  display: block;
+  padding: 10px;
+  position: relative;
+}
+
+.box-header h3.box-title {
+  display: inline-block;
+  font-size: 18px;
+  margin: 0;
+  line-height: 1;
+}
+
+.box-tools {
+  position: absolute;
+  right: 10px;
+  top: 5px;
+}
+
+.box-tools .btn {
+  padding: 3px 8px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+
+.box-body {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  padding: 10px;
+}
+
+/* Admin table wrapper */
+.admin-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+/* AG Grid theme */
+.ag-theme-alpine {
+  --ag-header-height: 50px;
+  --ag-header-foreground-color: #444;
+  --ag-header-background-color: #f4f4f4;
+  --ag-row-hover-color: #f5f5f5;
+  --ag-selected-row-background-color: #e3f2fd;
+}
+
+/* Button styles */
+.btn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+.btn-success {
+  color: #fff;
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+
+.btn-success:hover {
+  color: #fff;
+  background-color: #449d44;
+  border-color: #398439;
+}
+
+.btn-success:disabled {
+  background-color: #cccccc;
+  border-color: #cccccc;
+  cursor: not-allowed;
+}
+
+.btn-sm {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .adminTableButtonWrapper {
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .verticalAlign {
+    justify-content: center;
+  }
+  
+  .box-header h3.box-title {
+    font-size: 16px;
+  }
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html
new file mode 100644
index 000000000..c2c30c0fd
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html
@@ -0,0 +1,129 @@
+

+
+  

+    

+      
+    

+  

+
+  
+  

+    

+      Verwalten der Geodaten
+      Info
+    

+
+    

+      

+        Nur editierbare Datensätze anzeigen
+        

+          
+        

+      

+      
+      
+      					  		
+      
+      
+
+      
+
+      
+    

+  

+
+  
+  

+    
+
+    
+
+    

+      

+        
Points of Interest

+
+        

+          
+        

+      

+
+      
+      

+
+        

+
+          
	              
+
+        

+      

+      
+    

+    
+
+    
+
+    

+      

+        
Lines of Interest

+
+        

+          
+        

+      

+      
+      

+
+        

+
+          
	 										
+
+        

+      

+      
+    

+    
+
+    
+
+    

+      

+        
Areas of Interest

+
+        

+          
+        

+      

+      
+      

+
+        

+
+          
	 
+
+        

+      

+      
+    

+    
+
+  

+  
+
+
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
new file mode 100644
index 000000000..7420b9118
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
@@ -0,0 +1,184 @@
+import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { BroadcastService } from '../../../../services/broadcast-service/broadcast.service';
+import { KommonitorGeoresourceDataExchangeService } from '../../../../services/adminGeoresourceUnit/kommonitor-data-exchange.service';
+import { KommonitorGeoresourceCacheHelperService } from '../../../../services/adminGeoresourceUnit/kommonitor-cache-helper.service';
+import { KommonitorGeoresourceDataGridHelperService } from '../../../../services/adminGeoresourceUnit/kommonitor-data-grid-helper.service';
+
+// Declare jQuery for AdminLTE
+declare const $: any;
+
+@Component({
+  selector: 'app-admin-georesources-management',
+  templateUrl: './admin-georesources-management.component.html',
+  styleUrls: ['./admin-georesources-management.component.css']
+})
+export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy {
+
+  public loadingData: boolean = true;
+  public tableViewSwitcher: boolean = false;
+
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    private broadcastService: BroadcastService,
+    public kommonitorDataExchangeService: KommonitorGeoresourceDataExchangeService,
+    private kommonitorCacheHelperService: KommonitorGeoresourceCacheHelperService,
+    private kommonitorDataGridHelperService: KommonitorGeoresourceDataGridHelperService
+  ) {}
+
+  ngOnInit(): void {
+    this.setupEventListeners();
+    this.initialize();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  private setupEventListeners(): void {
+    // Listen for broadcast messages
+    const broadcastSub = this.broadcastService.currentBroadcastMsg.subscribe((data: any) => {
+      if (data.msg === 'initialMetadataLoadingCompleted') {
+        setTimeout(() => {
+          this.initializeOrRefreshOverviewTable();
+        }, 250);
+      } else if (data.msg === 'initialMetadataLoadingFailed') {
+        this.loadingData = false;
+      } else if (data.msg === 'refreshGeoresourceOverviewTable') {
+        this.loadingData = true;
+        this.refreshGeoresourceOverviewTable(data.values.crudType, data.values.targetGeoresourceId);
+      }
+    });
+
+    this.subscriptions.push(broadcastSub);
+  }
+
+  private initialize(): void {
+    // Initialize any adminLTE box widgets
+    if (typeof $ !== 'undefined' && $ && $.fn && $.fn.boxWidget) {
+      $('.box').boxWidget();
+    }
+  }
+
+  public onTableViewSwitch(): void {
+    this.initializeOrRefreshOverviewTable();
+  }
+
+  public initializeOrRefreshOverviewTable(): void {
+    this.loadingData = true;
+    
+    this.kommonitorDataGridHelperService.buildDataGrid_georesources(this.initGeoresources());
+
+    setTimeout(() => {
+      this.loadingData = false;
+    }, 100);
+  }
+
+  private initGeoresources(): any[] {
+    if (this.tableViewSwitcher) {
+      return this.kommonitorDataExchangeService.availableGeoresources.filter(
+        (e: any) => !(e.userPermissions.length === 1 && e.userPermissions.includes('viewer'))
+      );
+    } else {
+      return this.kommonitorDataExchangeService.availableGeoresources;
+    }
+  }
+
+  public refreshGeoresourceOverviewTable(crudType?: string, targetGeoresourceId?: string): void {
+    if (!crudType || !targetGeoresourceId) {
+      // refetch all metadata from georesources to update table
+      this.kommonitorDataExchangeService.fetchGeoresourcesMetadata(
+        this.kommonitorDataExchangeService.currentKeycloakLoginRoles
+      ).then((response: any) => {
+        this.initializeOrRefreshOverviewTable();
+        this.broadcastService.broadcast('refreshGeoresourceOverviewTableCompleted');
+        this.loadingData = false;
+      }).catch((response: any) => {
+        this.loadingData = false;
+        this.broadcastService.broadcast('refreshGeoresourceOverviewTableCompleted');
+      });
+    } else if (crudType && targetGeoresourceId) {
+      if (crudType === 'add') {
+        this.kommonitorCacheHelperService.fetchSingleGeoresourceMetadata(
+          targetGeoresourceId, 
+          this.kommonitorDataExchangeService.currentKeycloakLoginRoles
+        ).then((data: any) => {
+          this.kommonitorDataExchangeService.addSingleGeoresourceMetadata(data);
+          this.initializeOrRefreshOverviewTable();
+          this.broadcastService.broadcast('refreshGeoresourceOverviewTableCompleted');
+          this.loadingData = false;
+        }).catch((response: any) => {
+          this.loadingData = false;
+          this.broadcastService.broadcast('refreshGeoresourceOverviewTableCompleted');
+        });
+      } else if (crudType === 'edit') {
+        this.kommonitorCacheHelperService.fetchSingleGeoresourceMetadata(
+          targetGeoresourceId, 
+          this.kommonitorDataExchangeService.currentKeycloakLoginRoles
+        ).then((data: any) => {
+          this.kommonitorDataExchangeService.replaceSingleGeoresourceMetadata(data);
+          this.initializeOrRefreshOverviewTable();
+          this.broadcastService.broadcast('refreshGeoresourceOverviewTableCompleted');
+          this.loadingData = false;
+        }).catch((response: any) => {
+          this.loadingData = false;
+          this.broadcastService.broadcast('refreshGeoresourceOverviewTableCompleted');
+        });
+      } else if (crudType === 'delete') {
+        // targetGeoresourceId might be array in this case
+        if (targetGeoresourceId && typeof targetGeoresourceId === 'string') {
+          this.kommonitorDataExchangeService.deleteSingleGeoresourceMetadata(targetGeoresourceId);
+          this.initializeOrRefreshOverviewTable();
+          this.broadcastService.broadcast('refreshGeoresourceOverviewTableCompleted');
+          this.loadingData = false;
+        } else if (targetGeoresourceId && Array.isArray(targetGeoresourceId)) {
+          for (const id of targetGeoresourceId) {
+            this.kommonitorDataExchangeService.deleteSingleGeoresourceMetadata(id);
+          }
+          this.initializeOrRefreshOverviewTable();
+          this.broadcastService.broadcast('refreshGeoresourceOverviewTableCompleted');
+          this.loadingData = false;
+        }
+      }
+    }
+  }
+
+  public onClickDeleteDatasets(): void {
+    this.loadingData = true;
+
+    const markedEntriesForDeletion = this.kommonitorDataGridHelperService.getSelectedGeoresourcesMetadata();
+
+    // submit selected georesources to modal controller
+    this.broadcastService.broadcast('onDeleteGeoresources', markedEntriesForDeletion);
+
+    setTimeout(() => {
+      this.loadingData = false;
+    }, 100);
+  }
+
+  public onClickEditMetadata(georesourceDataset: any): void {
+    // submit selected georesource to modal controller
+    this.broadcastService.broadcast('onEditGeoresourceMetadata', georesourceDataset);
+  }
+
+  public onClickEditFeatures(georesourceDataset: any): void {
+    // submit selected georesource to modal controller
+    this.broadcastService.broadcast('onEditGeoresourceFeatures', georesourceDataset);
+  }
+
+  // Utility methods
+  checkCreatePermission(): boolean {
+    return this.kommonitorDataExchangeService.checkCreatePermission();
+  }
+
+  checkEditorPermission(): boolean {
+    return this.kommonitorDataExchangeService.checkEditorPermission();
+  }
+
+  checkDeletePermission(): boolean {
+    return this.kommonitorDataExchangeService.checkDeletePermission();
+  }
+} 
\ No newline at end of file
diff --git a/app/services/adminGeoresourceUnit/kommonitor-cache-helper.service.ts b/app/services/adminGeoresourceUnit/kommonitor-cache-helper.service.ts
new file mode 100644
index 000000000..f7e9ec2da
--- /dev/null
+++ b/app/services/adminGeoresourceUnit/kommonitor-cache-helper.service.ts
@@ -0,0 +1,18 @@
+import { Injectable, Inject } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KommonitorGeoresourceCacheHelperService {
+
+  constructor(
+    @Inject('kommonitorCacheHelperService') private angularJsCacheHelperService: any
+  ) {}
+
+  /**
+   * Fetches single georesource metadata - delegates to AngularJS service
+   */
+  async fetchSingleGeoresourceMetadata(georesourceId: string, keycloakRolesArray: string[]): Promise {
+    return this.angularJsCacheHelperService.fetchSingleGeoresourceMetadata(georesourceId, keycloakRolesArray);
+  }
+} 
\ No newline at end of file
diff --git a/app/services/adminGeoresourceUnit/kommonitor-data-exchange.service.ts b/app/services/adminGeoresourceUnit/kommonitor-data-exchange.service.ts
new file mode 100644
index 000000000..3c04a1598
--- /dev/null
+++ b/app/services/adminGeoresourceUnit/kommonitor-data-exchange.service.ts
@@ -0,0 +1,92 @@
+import { Injectable, Inject } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KommonitorGeoresourceDataExchangeService {
+  // Private subjects for reactive updates if needed in the future
+  private georesourcesSubject = new BehaviorSubject([]);
+  public georesources$ = this.georesourcesSubject.asObservable();
+
+  constructor(
+    @Inject('kommonitorDataExchangeService') private angularJsDataExchangeService: any
+  ) {}
+
+  /**
+   * Get available georesources - delegates to AngularJS service
+   */
+  get availableGeoresources(): any[] {
+    return this.angularJsDataExchangeService.availableGeoresources || [];
+  }
+
+  /**
+   * Get current Keycloak login roles - delegates to AngularJS service
+   */
+  get currentKeycloakLoginRoles(): string[] {
+    return this.angularJsDataExchangeService.currentKeycloakLoginRoles || [];
+  }
+
+  /**
+   * Check create permission - delegates to AngularJS service
+   */
+  checkCreatePermission(): boolean {
+    return this.angularJsDataExchangeService.checkCreatePermission();
+  }
+
+  /**
+   * Check editor permission - delegates to AngularJS service
+   */
+  checkEditorPermission(): boolean {
+    return this.angularJsDataExchangeService.checkEditorPermission();
+  }
+
+  /**
+   * Check delete permission - delegates to AngularJS service
+   */
+  checkDeletePermission(): boolean {
+    return this.angularJsDataExchangeService.checkDeletePermission();
+  }
+
+  /**
+   * Fetch georesources metadata - delegates to AngularJS service
+   */
+  async fetchGeoresourcesMetadata(keycloakRolesArray: string[], filter?: any): Promise {
+    return this.angularJsDataExchangeService.fetchGeoresourcesMetadata(keycloakRolesArray, filter);
+  }
+
+  /**
+   * Add single georesource metadata - delegates to AngularJS service
+   */
+  addSingleGeoresourceMetadata(georesourceMetadata: any): void {
+    this.angularJsDataExchangeService.addSingleGeoresourceMetadata(georesourceMetadata);
+  }
+
+  /**
+   * Replace single georesource metadata - delegates to AngularJS service
+   */
+  replaceSingleGeoresourceMetadata(georesourceMetadata: any): void {
+    this.angularJsDataExchangeService.replaceSingleGeoresourceMetadata(georesourceMetadata);
+  }
+
+  /**
+   * Delete single georesource metadata - delegates to AngularJS service
+   */
+  deleteSingleGeoresourceMetadata(georesourceId: string): void {
+    this.angularJsDataExchangeService.deleteSingleGeoresourceMetadata(georesourceId);
+  }
+
+  /**
+   * Get georesource metadata by ID - delegates to AngularJS service
+   */
+  getGeoresourceMetadataById(georesourceId: string): any {
+    return this.angularJsDataExchangeService.getGeoresourceMetadataById(georesourceId);
+  }
+
+  /**
+   * Get base URL to KomMonitor Data API for spatial resources - delegates to AngularJS service
+   */
+  getBaseUrlToKomMonitorDataAPI_spatialResource(): string {
+    return this.angularJsDataExchangeService.getBaseUrlToKomMonitorDataAPI_spatialResource() || '';
+  }
+} 
\ No newline at end of file
diff --git a/app/services/adminGeoresourceUnit/kommonitor-data-grid-helper.service.ts b/app/services/adminGeoresourceUnit/kommonitor-data-grid-helper.service.ts
new file mode 100644
index 000000000..6690b95b4
--- /dev/null
+++ b/app/services/adminGeoresourceUnit/kommonitor-data-grid-helper.service.ts
@@ -0,0 +1,66 @@
+import { Injectable, Inject } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from '../broadcast-service/broadcast.service';
+import { KommonitorGeoresourceDataExchangeService } from './kommonitor-data-exchange.service';
+import { 
+  GridOptions, 
+  ColDef, 
+  GridApi, 
+  ColumnApi,
+  ICellRendererParams,
+  ICellRendererComp,
+  GridReadyEvent
+} from 'ag-grid-community';
+import { AgGridAngular } from 'ag-grid-angular';
+
+// Declare environment variables
+declare const __env: any;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class KommonitorGeoresourceDataGridHelperService {
+
+  // Store the data grid options
+  private dataGridOptions_georesources_poi: GridOptions | null = null;
+  private dataGridOptions_georesources_loi: GridOptions | null = null;
+  private dataGridOptions_georesources_aoi: GridOptions | null = null;
+  private gridApi_georesources_poi: GridApi | null = null;
+  private gridApi_georesources_loi: GridApi | null = null;
+  private gridApi_georesources_aoi: GridApi | null = null;
+
+  // Resource type constants
+  readonly resourceType_georesource = 'georesource';
+
+  // Timestamp properties for feature table updates
+  featureTable_georesource_lastUpdate_timestamp_success: Date | undefined = undefined;
+  featureTable_georesource_lastUpdate_timestamp_failure: Date | undefined = undefined;
+
+  constructor(
+    private modalService: NgbModal,
+    private broadcastService: BroadcastService,
+    private kommonitorDataExchangeService: KommonitorGeoresourceDataExchangeService,
+    @Inject('kommonitorDataGridHelperService') private angularJsDataGridHelperService: any
+  ) {}
+
+  /**
+   * Build data grid for georesources - delegates to AngularJS service
+   */
+  buildDataGrid_georesources(georesourcesArray: any[]): void {
+    this.angularJsDataGridHelperService.buildDataGrid_georesources(georesourcesArray);
+  }
+
+  /**
+   * Get selected georesources metadata - delegates to AngularJS service
+   */
+  getSelectedGeoresourcesMetadata(): any[] {
+    return this.angularJsDataGridHelperService.getSelectedGeoresourcesMetadata() || [];
+  }
+
+  /**
+   * Get current timestamp string - delegates to AngularJS service
+   */
+  getCurrentTimestampString(): string {
+    return this.angularJsDataGridHelperService.getCurrentTimestampString();
+  }
+} 
\ No newline at end of file

From 87747600a06eee8c9c2a7ee947f913c4986918ed Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Mon, 21 Jul 2025 16:21:36 +0530
Subject: [PATCH 024/120] fix: UI fixed to parent geoSourcin component

---
 ...dmin-georesources-management.component.css | 212 ++---
 ...min-georesources-management.component.html |  79 +-
 ...admin-georesources-management.component.ts | 145 +++-
 .../kommonitor-data-exchange.service.ts       |  28 +
 .../kommonitor-data-grid-helper.service.ts    | 790 +++++++++++++++++-
 5 files changed, 1099 insertions(+), 155 deletions(-)

diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.css b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.css
index 28b23a0af..440839189 100644
--- a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.css
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.css
@@ -1,5 +1,9 @@
 /* Admin Georesources Management Component Styles */
 
+/* AG Grid CSS imports */
+@import '~ag-grid-community/styles/ag-grid.css';
+@import '~ag-grid-community/styles/ag-theme-alpine.css';
+
 /* Loading overlay */
 .loading-overlay-admin-panel {
   position: fixed;
@@ -18,49 +22,35 @@
   display: none !important;
 }
 
-.icon-spin {
-  animation: spin 1s infinite linear;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-/* Content header */
+/* Header controls styling */
 .content-header {
-  position: relative;
   padding: 15px 15px 0 15px;
+  margin-bottom: 20px; /* Add margin to separate from content */
 }
 
-.content-header h1 {
-  margin: 0;
-  font-size: 24px;
-}
-
-.content-header h1 small {
-  font-size: 15px;
-  display: inline-block;
-  padding-left: 4px;
-  font-weight: 300;
-}
-
-/* Admin table button wrapper */
 .adminTableButtonWrapper {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-top: 10px;
-  padding: 10px 0;
+  gap: 10px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  flex-wrap: wrap;
 }
 
 .verticalAlign {
   display: flex;
   align-items: center;
   gap: 10px;
+  margin-right: 20px;
 }
 
-/* Switch toggle */
+.verticalAlign span {
+  font-weight: 500;
+  color: #333;
+  white-space: nowrap;
+}
+
+/* Switch styling */
 .switch {
   position: relative;
   display: inline-block;
@@ -116,123 +106,135 @@ input:checked + .switchslider:before {
   border-radius: 50%;
 }
 
-/* Box styles */
-.box {
-  position: relative;
-  border-radius: 3px;
-  background: #ffffff;
-  border-top: 3px solid #d2d6de;
-  margin-bottom: 20px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+/* Content section spacing */
+.content.container-fluid {
+  padding-top: 20px; /* Add top padding to ensure separation */
 }
 
-.box.box-primary {
-  border-top-color: #3c8dbc;
+/* Box styling improvements */
+.box {
+  margin-bottom: 30px;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .box-header {
-  color: #444;
-  display: block;
-  padding: 10px;
-  position: relative;
+  padding: 15px;
+  border-bottom: 1px solid #f0f0f0;
 }
 
-.box-header h3.box-title {
-  display: inline-block;
+.box-title {
   font-size: 18px;
+  font-weight: 600;
+  color: #333;
   margin: 0;
-  line-height: 1;
-}
-
-.box-tools {
-  position: absolute;
-  right: 10px;
-  top: 5px;
-}
-
-.box-tools .btn {
-  padding: 3px 8px;
-  font-size: 12px;
-  border-radius: 3px;
 }
 
 .box-body {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
-  padding: 10px;
+  padding: 20px;
 }
 
-/* Admin table wrapper */
+/* Table wrapper styling */
 .admin-table-wrapper {
   width: 100%;
-  overflow-x: auto;
-}
-
-/* AG Grid theme */
-.ag-theme-alpine {
-  --ag-header-height: 50px;
-  --ag-header-foreground-color: #444;
-  --ag-header-background-color: #f4f4f4;
-  --ag-row-hover-color: #f5f5f5;
-  --ag-selected-row-background-color: #e3f2fd;
+  min-height: 400px;
+  background: #fff;
+  border-radius: 4px;
+  overflow: hidden;
 }
 
-/* Button styles */
+/* Button styling */
 .btn {
-  display: inline-block;
-  padding: 6px 12px;
-  margin-bottom: 0;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.42857143;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  border: 1px solid transparent;
+  margin-right: 10px;
+  margin-bottom: 5px;
   border-radius: 4px;
-  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 }
 
 .btn-success {
-  color: #fff;
-  background-color: #5cb85c;
-  border-color: #4cae4c;
+  background-color: #28a745;
+  border-color: #28a745;
 }
 
 .btn-success:hover {
-  color: #fff;
-  background-color: #449d44;
-  border-color: #398439;
+  background-color: #218838;
+  border-color: #1e7e34;
 }
 
-.btn-success:disabled {
-  background-color: #cccccc;
-  border-color: #cccccc;
-  cursor: not-allowed;
+.btn-danger {
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+
+.btn-danger:hover {
+  background-color: #c82333;
+  border-color: #bd2130;
 }
 
-.btn-sm {
-  padding: 5px 10px;
-  font-size: 12px;
-  line-height: 1.5;
-  border-radius: 3px;
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
 }
 
 /* Responsive design */
 @media (max-width: 768px) {
   .adminTableButtonWrapper {
     flex-direction: column;
-    gap: 10px;
+    align-items: flex-start;
   }
   
   .verticalAlign {
-    justify-content: center;
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+  
+  .content-header {
+    padding: 10px;
   }
   
-  .box-header h3.box-title {
-    font-size: 16px;
+  .box-body {
+    padding: 15px;
   }
+}
+
+/* AG Grid theme customization */
+.ag-theme-alpine {
+  --ag-header-height: 50px;
+  --ag-header-foreground-color: #444;
+  --ag-header-background-color: #f8f9fa;
+  --ag-row-hover-color: #f5f5f5;
+  --ag-selected-row-background-color: #e3f2fd;
+  --ag-font-size: 13px;
+  --ag-font-family: 'Source Sans Pro', sans-serif;
+  font-family: var(--ag-font-family);
+}
+
+.ag-theme-alpine .ag-header-cell-label {
+  font-weight: 600;
+}
+
+.ag-theme-alpine .ag-row {
+  border-bottom: 1px solid #e9ecef;
+}
+
+.ag-theme-alpine .ag-cell {
+  padding: 8px 12px;
+  line-height: 1.4;
+}
+
+/* Ensure ag-grid containers have proper styling */
+ag-grid-angular {
+  width: 100%;
+  height: 70vh;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  overflow: hidden;
 } 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html
index c2c30c0fd..55491dc8d 100644
--- a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html
@@ -9,7 +9,7 @@
   
   

     

-      Verwalten der Geodaten
+      Pranjal Verwalten der Geodaten
       Info
     

 
@@ -37,7 +37,7 @@ 

 
       
 
-      
+      
     

   
 
@@ -65,7 +65,30 @@ 
Points of Interest

 
         

 
-          
	              
+          
+          	              
 
         

       

@@ -90,7 +113,30 @@ 
Lines of Interest

 
         

 
-          
	 										
+          
+          	 										
 
         

       

@@ -115,7 +161,30 @@ 
Areas of Interest

 
         

 
-          
	 
+          
+          	 
 
         

       

diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
index 7420b9118..07e3709dc 100644
--- a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
@@ -1,10 +1,11 @@
-import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
+import { Component, OnInit, OnDestroy, Inject, ViewChild, AfterViewInit } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { BroadcastService } from '../../../../services/broadcast-service/broadcast.service';
 import { KommonitorGeoresourceDataExchangeService } from '../../../../services/adminGeoresourceUnit/kommonitor-data-exchange.service';
 import { KommonitorGeoresourceCacheHelperService } from '../../../../services/adminGeoresourceUnit/kommonitor-cache-helper.service';
 import { KommonitorGeoresourceDataGridHelperService } from '../../../../services/adminGeoresourceUnit/kommonitor-data-grid-helper.service';
+import { AgGridAngular } from 'ag-grid-angular';
 
 // Declare jQuery for AdminLTE
 declare const $: any;
@@ -14,11 +15,20 @@ declare const $: any;
   templateUrl: './admin-georesources-management.component.html',
   styleUrls: ['./admin-georesources-management.component.css']
 })
-export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy {
+export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy, AfterViewInit {
+
+  @ViewChild('poiGrid', { static: false }) poiGrid!: AgGridAngular;
+  @ViewChild('loiGrid', { static: false }) loiGrid!: AgGridAngular;
+  @ViewChild('aoiGrid', { static: false }) aoiGrid!: AgGridAngular;
 
   public loadingData: boolean = true;
   public tableViewSwitcher: boolean = false;
 
+  // Grid options for each table
+  public poiGridOptions: any = {};
+  public loiGridOptions: any = {};
+  public aoiGridOptions: any = {};
+
   private subscriptions: Subscription[] = [];
 
   constructor(
@@ -32,6 +42,97 @@ export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.setupEventListeners();
     this.initialize();
+    
+    // Initialize grid options with the service
+    this.poiGridOptions = this.kommonitorDataGridHelperService.getPoiGridOptions();
+    this.loiGridOptions = this.kommonitorDataGridHelperService.getLoiGridOptions();
+    this.aoiGridOptions = this.kommonitorDataGridHelperService.getAoiGridOptions();
+  }
+
+  ngAfterViewInit(): void {
+    // Initialize grids after view is ready
+    this.kommonitorDataGridHelperService.initializeGrids(
+      this.poiGrid,
+      this.loiGrid,
+      this.aoiGrid
+    );
+
+    // Set component reference for callbacks
+    this.kommonitorDataGridHelperService.setComponentRef(this);
+
+    // Load data if not already loaded
+    if (this.kommonitorDataExchangeService.availableGeoresources.length === 0) {
+      this.loadDataFallback();
+    }
+  }
+
+  private loadDataFallback(): void {
+    // If we still don't have data after 1 second, try to manually trigger data loading
+    if (!this.kommonitorDataExchangeService.availableGeoresources || 
+        this.kommonitorDataExchangeService.availableGeoresources.length === 0) {
+      
+      // Try to fetch metadata manually
+      this.kommonitorDataExchangeService.fetchGeoresourcesMetadata(
+        this.kommonitorDataExchangeService.currentKeycloakLoginRoles
+      ).then((response: any) => {
+        this.initializeOrRefreshOverviewTable();
+      }).catch((error: any) => {
+        // As a last resort, try with test data to verify grids are working
+        this.testGridsWithSampleData();
+        
+        this.loadingData = false;
+      });
+    }
+  }
+
+  private testGridsWithSampleData(): void {
+    const testData = [
+      {
+        georesourceId: 'test-poi-1',
+        datasetName: 'Test POI 1',
+        isPOI: true,
+        isLOI: false,
+        isAOI: false,
+        poiSymbolColor: '#ff0000',
+        poiSymbolBootstrap3Name: 'home',
+        poiMarkerColor: '#0000ff',
+        metadata: {
+          description: 'Test POI description'
+        },
+        ownerId: 'test-owner',
+        userPermissions: ['creator']
+      },
+      {
+        georesourceId: 'test-loi-1',
+        datasetName: 'Test LOI 1',
+        isPOI: false,
+        isLOI: true,
+        isAOI: false,
+        loiColor: '#00ff00',
+        loiWidth: 2,
+        loiDashArrayString: '5 5',
+        metadata: {
+          description: 'Test LOI description'
+        },
+        ownerId: 'test-owner',
+        userPermissions: ['creator']
+      },
+      {
+        georesourceId: 'test-aoi-1',
+        datasetName: 'Test AOI 1',
+        isPOI: false,
+        isLOI: false,
+        isAOI: true,
+        aoiColor: '#ffff00',
+        metadata: {
+          description: 'Test AOI description'
+        },
+        ownerId: 'test-owner',
+        userPermissions: ['creator']
+      }
+    ];
+    
+    this.kommonitorDataGridHelperService.buildDataGrid_georesources(testData);
   }
 
   ngOnDestroy(): void {
@@ -70,7 +171,9 @@ export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy {
   public initializeOrRefreshOverviewTable(): void {
     this.loadingData = true;
     
-    this.kommonitorDataGridHelperService.buildDataGrid_georesources(this.initGeoresources());
+    const georesources = this.initGeoresources();
+    
+    this.kommonitorDataGridHelperService.buildDataGrid_georesources(georesources);
 
     setTimeout(() => {
       this.loadingData = false;
@@ -146,19 +249,6 @@ export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy {
     }
   }
 
-  public onClickDeleteDatasets(): void {
-    this.loadingData = true;
-
-    const markedEntriesForDeletion = this.kommonitorDataGridHelperService.getSelectedGeoresourcesMetadata();
-
-    // submit selected georesources to modal controller
-    this.broadcastService.broadcast('onDeleteGeoresources', markedEntriesForDeletion);
-
-    setTimeout(() => {
-      this.loadingData = false;
-    }, 100);
-  }
-
   public onClickEditMetadata(georesourceDataset: any): void {
     // submit selected georesource to modal controller
     this.broadcastService.broadcast('onEditGeoresourceMetadata', georesourceDataset);
@@ -169,6 +259,16 @@ export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy {
     this.broadcastService.broadcast('onEditGeoresourceFeatures', georesourceDataset);
   }
 
+  public onClickEditUserRoles(georesourceDataset: any): void {
+    // submit selected georesource to modal controller
+    this.broadcastService.broadcast('onEditGeoresourcesUserRoles', georesourceDataset);
+  }
+
+  public onClickDeleteGeoresource(georesourceDataset: any): void {
+    // submit selected georesource to modal controller (as array like original)
+    this.broadcastService.broadcast('onDeleteGeoresources', [georesourceDataset]);
+  }
+
   // Utility methods
   checkCreatePermission(): boolean {
     return this.kommonitorDataExchangeService.checkCreatePermission();
@@ -181,4 +281,17 @@ export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy {
   checkDeletePermission(): boolean {
     return this.kommonitorDataExchangeService.checkDeletePermission();
   }
+
+  // Callback methods for cell renderer
+  onEditMetadata(georesourceDataset: any): void {
+    this.broadcastService.broadcast('onEditGeoresourceMetadata', georesourceDataset);
+  }
+
+  onEditFeatures(georesourceDataset: any): void {
+    this.onClickEditFeatures(georesourceDataset);
+  }
+
+  onEditUserRoles(georesourceDataset: any): void {
+    this.onClickEditUserRoles(georesourceDataset);
+  }
 } 
\ No newline at end of file
diff --git a/app/services/adminGeoresourceUnit/kommonitor-data-exchange.service.ts b/app/services/adminGeoresourceUnit/kommonitor-data-exchange.service.ts
index 3c04a1598..e06a8f5a5 100644
--- a/app/services/adminGeoresourceUnit/kommonitor-data-exchange.service.ts
+++ b/app/services/adminGeoresourceUnit/kommonitor-data-exchange.service.ts
@@ -89,4 +89,32 @@ export class KommonitorGeoresourceDataExchangeService {
   getBaseUrlToKomMonitorDataAPI_spatialResource(): string {
     return this.angularJsDataExchangeService.getBaseUrlToKomMonitorDataAPI_spatialResource() || '';
   }
+
+  /**
+   * Get role title - delegates to AngularJS service
+   */
+  getRoleTitle(roleId: string): string {
+    return this.angularJsDataExchangeService.getRoleTitle(roleId);
+  }
+
+  /**
+   * Get topic hierarchy display string - delegates to AngularJS service
+   */
+  getTopicHierarchyDisplayString(topicReference: any): string {
+    return this.angularJsDataExchangeService.getTopicHierarchyDisplayString(topicReference);
+  }
+
+  /**
+   * Get all allowed roles string - delegates to AngularJS service
+   */
+  getAllowedRolesString(permissions: any): string {
+    return this.angularJsDataExchangeService.getAllowedRolesString(permissions);
+  }
+
+  /**
+   * Get LOI dash SVG from string value - delegates to AngularJS service
+   */
+  getLoiDashSvgFromStringValue(dashArrayString: string): string {
+    return this.angularJsDataExchangeService.getLoiDashSvgFromStringValue(dashArrayString);
+  }
 } 
\ No newline at end of file
diff --git a/app/services/adminGeoresourceUnit/kommonitor-data-grid-helper.service.ts b/app/services/adminGeoresourceUnit/kommonitor-data-grid-helper.service.ts
index 6690b95b4..e05bc1c83 100644
--- a/app/services/adminGeoresourceUnit/kommonitor-data-grid-helper.service.ts
+++ b/app/services/adminGeoresourceUnit/kommonitor-data-grid-helper.service.ts
@@ -1,7 +1,7 @@
-import { Injectable, Inject } from '@angular/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Injectable } from '@angular/core';
 import { BroadcastService } from '../broadcast-service/broadcast.service';
 import { KommonitorGeoresourceDataExchangeService } from './kommonitor-data-exchange.service';
+import { AgGridAngular } from 'ag-grid-angular';
 import { 
   GridOptions, 
   ColDef, 
@@ -9,58 +9,790 @@ import {
   ColumnApi,
   ICellRendererParams,
   ICellRendererComp,
-  GridReadyEvent
+  GridReadyEvent,
+  RowSelectedEvent,
+  CellClickedEvent
 } from 'ag-grid-community';
-import { AgGridAngular } from 'ag-grid-angular';
-
-// Declare environment variables
-declare const __env: any;
 
 @Injectable({
   providedIn: 'root'
 })
 export class KommonitorGeoresourceDataGridHelperService {
 
-  // Store the data grid options
-  private dataGridOptions_georesources_poi: GridOptions | null = null;
-  private dataGridOptions_georesources_loi: GridOptions | null = null;
-  private dataGridOptions_georesources_aoi: GridOptions | null = null;
-  private gridApi_georesources_poi: GridApi | null = null;
-  private gridApi_georesources_loi: GridApi | null = null;
-  private gridApi_georesources_aoi: GridApi | null = null;
-
-  // Resource type constants
-  readonly resourceType_georesource = 'georesource';
+  // Grid references
+  private poiGrid: AgGridAngular | null = null;
+  private loiGrid: AgGridAngular | null = null;
+  private aoiGrid: AgGridAngular | null = null;
 
-  // Timestamp properties for feature table updates
-  featureTable_georesource_lastUpdate_timestamp_success: Date | undefined = undefined;
-  featureTable_georesource_lastUpdate_timestamp_failure: Date | undefined = undefined;
+  // Component reference for callbacks
+  private componentRef: any = null;
 
   constructor(
-    private modalService: NgbModal,
     private broadcastService: BroadcastService,
-    private kommonitorDataExchangeService: KommonitorGeoresourceDataExchangeService,
-    @Inject('kommonitorDataGridHelperService') private angularJsDataGridHelperService: any
+    private kommonitorDataExchangeService: KommonitorGeoresourceDataExchangeService
   ) {}
 
   /**
-   * Build data grid for georesources - delegates to AngularJS service
+   * Simple function-based cell renderer for edit buttons (like original)
+   */
+  private displayEditButtons_georesources = (params: any) => {
+    if (!params.data || !params.data.georesourceId) {
+      return '
No data
';
+    }
+
+    const editMetadataButtonId = 'btn_georesource_editMetadata_' + params.data.georesourceId;
+    const editFeaturesButtonId = 'btn_georesource_editFeatures_' + params.data.georesourceId;
+    const editUserRolesButtonId = 'btn_georesource_editUserRoles_' + params.data.georesourceId;
+    const deleteButtonId = 'btn_georesource_deleteGeoresource_' + params.data.georesourceId;
+
+    // Check user permissions (handle both array and potential undefined)
+    const userPermissions = params.data.userPermissions || [];
+    const hasEditorPermission = Array.isArray(userPermissions) ? 
+      (userPermissions.includes("editor") || userPermissions.includes("creator")) : false;
+    const hasCreatorPermission = Array.isArray(userPermissions) ? 
+      userPermissions.includes("creator") : false;
+
+    let html = '
';
+    html += '';
+    html += '';
+    html += '';
+    html += '';
+    html += '
';
+
+    return html;
+  }
+
+  /**
+   * Initialize the grid references
+   */
+  initializeGrids(poiGrid: AgGridAngular, loiGrid: AgGridAngular, aoiGrid: AgGridAngular): void {
+    this.poiGrid = poiGrid;
+    this.loiGrid = loiGrid;
+    this.aoiGrid = aoiGrid;
+  }
+
+  /**
+   * Set component reference for callbacks
+   */
+  setComponentRef(componentRef: any): void {
+    this.componentRef = componentRef;
+    
+    // Update column definitions with the component reference for all grids
+    this.updateColumnDefinitions();
+  }
+
+  /**
+   * Update column definitions with the current component reference
+   */
+  private updateColumnDefinitions(): void {
+    if (this.poiGrid && this.poiGrid.api) {
+      const poiColumnDefs = this.getPoiColumnDefinitions();
+      this.poiGrid.api.setColumnDefs(poiColumnDefs);
+    }
+    
+    if (this.loiGrid && this.loiGrid.api) {
+      const loiColumnDefs = this.getLoiColumnDefinitions();
+      this.loiGrid.api.setColumnDefs(loiColumnDefs);
+    }
+    
+    if (this.aoiGrid && this.aoiGrid.api) {
+      const aoiColumnDefs = this.getAoiColumnDefinitions();
+      this.aoiGrid.api.setColumnDefs(aoiColumnDefs);
+    }
+  }
+
+  /**
+   * Build data grid for georesources
    */
   buildDataGrid_georesources(georesourcesArray: any[]): void {
-    this.angularJsDataGridHelperService.buildDataGrid_georesources(georesourcesArray);
+    if (!georesourcesArray || georesourcesArray.length === 0) {
+      console.warn('No georesources data provided to buildDataGrid_georesources');
+      return;
+    }
+
+    if (!this.poiGrid || !this.loiGrid || !this.aoiGrid) {
+      console.warn('Grid references not initialized');
+      return;
+    }
+
+    this.buildPoiGrid(georesourcesArray);
+    this.buildLoiGrid(georesourcesArray);
+    this.buildAoiGrid(georesourcesArray);
+  }
+
+  /**
+   * Build POI grid
+   */
+  private buildPoiGrid(georesourcesArray: any[]): void {
+    if (!this.poiGrid) {
+      return;
+    }
+    
+    const poiData = georesourcesArray.filter(item => item.isPOI);
+    const columnDefs = this.getPoiColumnDefinitions();
+    
+    try {
+      this.poiGrid.api?.setRowData(poiData);
+      this.poiGrid.api?.setColumnDefs(columnDefs);
+      
+      // Register click handlers after a short delay
+      setTimeout(() => {
+        this.registerClickHandler_georesources(georesourcesArray);
+      }, 200);
+    } catch (error) {
+      console.error('Error updating POI grid:', error);
+    }
+  }
+
+  /**
+   * Build LOI grid
+   */
+  private buildLoiGrid(georesourcesArray: any[]): void {
+    if (!this.loiGrid) {
+      return;
+    }
+    
+    const loiData = georesourcesArray.filter(item => item.isLOI);
+    const columnDefs = this.getLoiColumnDefinitions();
+    
+    try {
+      this.loiGrid.api?.setRowData(loiData);
+      this.loiGrid.api?.setColumnDefs(columnDefs);
+      
+      // Register click handlers after a short delay
+      setTimeout(() => {
+        this.registerClickHandler_georesources(georesourcesArray);
+      }, 200);
+    } catch (error) {
+      console.error('Error updating LOI grid:', error);
+    }
+  }
+
+  /**
+   * Build AOI grid
+   */
+  private buildAoiGrid(georesourcesArray: any[]): void {
+    if (!this.aoiGrid) {
+      return;
+    }
+    
+    const aoiData = georesourcesArray.filter(item => item.isAOI);
+    const columnDefs = this.getAoiColumnDefinitions();
+    
+    try {
+      this.aoiGrid.api?.setRowData(aoiData);
+      this.aoiGrid.api?.setColumnDefs(columnDefs);
+      
+      // Register click handlers after a short delay
+      setTimeout(() => {
+        this.registerClickHandler_georesources(georesourcesArray);
+      }, 200);
+    } catch (error) {
+      console.error('Error updating AOI grid:', error);
+    }
+  }
+
+  /**
+   * Register click handlers for georesource buttons
+   */
+  private registerClickHandler_georesources(georesourceMetadataArray: any[]): void {
+    // Edit Metadata Button
+    const editMetadataButtons = document.querySelectorAll('.georesourceEditMetadataBtn');
+    editMetadataButtons.forEach((button: any) => {
+      button.removeEventListener('click', this.handleEditMetadataClick);
+      button.addEventListener('click', this.handleEditMetadataClick);
+    });
+
+    // Edit Features Button
+    const editFeaturesButtons = document.querySelectorAll('.georesourceEditFeaturesBtn');
+    editFeaturesButtons.forEach((button: any) => {
+      button.removeEventListener('click', this.handleEditFeaturesClick);
+      button.addEventListener('click', this.handleEditFeaturesClick);
+    });
+
+    // Edit User Roles Button
+    const editUserRolesButtons = document.querySelectorAll('.georesourceEditUserRolesBtn');
+    editUserRolesButtons.forEach((button: any) => {
+      button.removeEventListener('click', this.handleEditUserRolesClick);
+      button.addEventListener('click', this.handleEditUserRolesClick);
+    });
+
+    // Delete Button
+    const deleteButtons = document.querySelectorAll('.georesourceDeleteBtn');
+    deleteButtons.forEach((button: any) => {
+      button.removeEventListener('click', this.handleDeleteClick);
+      button.addEventListener('click', this.handleDeleteClick);
+    });
+  }
+
+  /**
+   * Handle edit metadata button click
+   */
+  private handleEditMetadataClick = (event: any): void => {
+    event.stopPropagation();
+    
+    const georesourceId = event.target.id.split('_')[3] || event.target.closest('button').id.split('_')[3];
+    const georesourceMetadata = this.kommonitorDataExchangeService.getGeoresourceMetadataById(georesourceId);
+    
+    if (this.componentRef) {
+      this.componentRef.onClickEditMetadata(georesourceMetadata);
+    }
   }
 
   /**
-   * Get selected georesources metadata - delegates to AngularJS service
+   * Handle edit features button click
+   */
+  private handleEditFeaturesClick = (event: any): void => {
+    event.stopPropagation();
+    
+    const georesourceId = event.target.id.split('_')[3] || event.target.closest('button').id.split('_')[3];
+    const georesourceMetadata = this.kommonitorDataExchangeService.getGeoresourceMetadataById(georesourceId);
+    
+    if (this.componentRef) {
+      this.componentRef.onClickEditFeatures(georesourceMetadata);
+    }
+  }
+
+  /**
+   * Handle edit user roles button click
+   */
+  private handleEditUserRolesClick = (event: any): void => {
+    event.stopPropagation();
+    
+    const georesourceId = event.target.id.split('_')[3] || event.target.closest('button').id.split('_')[3];
+    const georesourceMetadata = this.kommonitorDataExchangeService.getGeoresourceMetadataById(georesourceId);
+    
+    if (this.componentRef) {
+      this.componentRef.onClickEditUserRoles(georesourceMetadata);
+    }
+  }
+
+  /**
+   * Handle delete button click
+   */
+  private handleDeleteClick = (event: any): void => {
+    event.stopPropagation();
+    
+    const georesourceId = event.target.id.split('_')[3] || event.target.closest('button').id.split('_')[3];
+    const georesourceMetadata = this.kommonitorDataExchangeService.getGeoresourceMetadataById(georesourceId);
+    
+    if (this.componentRef) {
+      this.componentRef.onClickDeleteGeoresource(georesourceMetadata);
+    }
+  }
+
+  /**
+   * Get POI column definitions
+   */
+  private getPoiColumnDefinitions(): ColDef[] {
+    return [
+      { 
+        headerName: 'Editierfunktionen', 
+        pinned: 'left', 
+        maxWidth: 200, 
+        minWidth: 180,
+        checkboxSelection: false, 
+        headerCheckboxSelection: false, 
+        headerCheckboxSelectionFilteredOnly: true, 
+        filter: false, 
+        sortable: false, 
+        cellRenderer: 'displayEditButtons_georesources' 
+      },
+      { headerName: 'Id', field: "georesourceId", pinned: 'left', maxWidth: 125 },
+      { headerName: 'Name', field: "datasetName", pinned: 'left', minWidth: 300 },
+      { 
+        headerName: 'Symbolfarbe', 
+        field: "poiSymbolColor", 
+        maxWidth: 125,
+        filter: false,
+        sortable: false,
+        cellRenderer: (params: any) => {
+          const color = params.data.poiSymbolColor || '#000000';
+          return `
${color}

`;
+        }
+      },
+      { 
+        headerName: 'Symbolname', 
+        field: "poiSymbolBootstrap3Name", 
+        maxWidth: 125,
+        cellRenderer: (params: any) => {
+          const symbolName = params.data.poiSymbolBootstrap3Name || 'home';
+          return `${symbolName}

`;
+        }
+      },
+      { 
+        headerName: 'Markerfarbe', 
+        field: "poiMarkerColor", 
+        maxWidth: 125,
+        filter: false,
+        sortable: false,
+        cellRenderer: (params: any) => {
+          const color = params.data.poiMarkerColor || '#000000';
+          return `
${color}

`;
+        }
+      },
+      { 
+        headerName: 'Beschreibung', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return params.data.metadata?.description || '';
+        }
+      },
+      {
+        headerName: 'Gültigkeitszeitraum', 
+        minWidth: 400,
+        cellRenderer: (params: any) => {
+          let html = '
    ';
+          for (const periodOfValidity of params.data.availablePeriodsOfValidity || []) {
+            html += '
  • ';
+            if(periodOfValidity.endDate){
+              html += "
    " + periodOfValidity.startDate + " ‐ " + periodOfValidity.endDate + "
    ";
+            } else {
+              html += "
    " + periodOfValidity.startDate + " ‐ heute
    ";
+            }                
+            html += '
    • ';
+          }
+          html += '
';
+          return html;
+        }
+      },
+      { 
+        headerName: 'Themenhierarchie', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return this.kommonitorDataExchangeService.getTopicHierarchyDisplayString(params.data.topicReference);
+        }
+      },
+      { 
+        headerName: 'Datenquelle', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return params.data.metadata?.datasource || '';
+        }
+      },
+      { 
+        headerName: 'Datenhalter und Kontakt', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return params.data.metadata?.contact || '';
+        }
+      },
+      { 
+        headerName: 'Rollen', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return this.kommonitorDataExchangeService.getAllowedRolesString(params.data.permissions);
+        }
+      },
+      { 
+        headerName: 'Öffentlich sichtbar', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return params.data.isPublic ? 'ja' : 'nein';
+        }
+      },
+      { 
+        headerName: 'Eigentümer', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return this.kommonitorDataExchangeService.getRoleTitle(params.data.ownerId);
+        }
+      }
+    ];
+  }
+
+  /**
+   * Get LOI column definitions
+   */
+  private getLoiColumnDefinitions(): ColDef[] {
+    return [
+      { 
+        headerName: 'Editierfunktionen', 
+        pinned: 'left', 
+        maxWidth: 200, 
+        minWidth: 180,
+        checkboxSelection: false, 
+        headerCheckboxSelection: false, 
+        headerCheckboxSelectionFilteredOnly: true, 
+        filter: false, 
+        sortable: false, 
+        cellRenderer: 'displayEditButtons_georesources' 
+      },
+      { headerName: 'Id', field: "georesourceId", pinned: 'left', maxWidth: 125 },
+      { headerName: 'Name', field: "datasetName", pinned: 'left', minWidth: 300 },
+      { 
+        headerName: 'Linienfarbe', 
+        field: "loiColor", 
+        maxWidth: 125,
+        filter: false,
+        sortable: false,
+        cellRenderer: (params: any) => {
+          const color = params.data.loiColor || '#000000';
+          return `
${color}

`;
+        }
+      },
+      { headerName: 'Linienbreite', field: "loiWidth", maxWidth: 125 },
+      { 
+        headerName: 'Linienmuster', 
+        field: "loiDashArrayString", 
+        maxWidth: 125,
+        filter: false,
+        sortable: false,
+        cellRenderer: (params: any) => {
+          return this.kommonitorDataExchangeService.getLoiDashSvgFromStringValue(params.data.loiDashArrayString);
+        }
+      },
+      { 
+        headerName: 'Beschreibung', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return params.data.metadata?.description || '';
+        }
+      },
+      {
+        headerName: 'Gültigkeitszeitraum', 
+        minWidth: 400,
+        cellRenderer: (params: any) => {
+          let html = '
    ';
+          for (const periodOfValidity of params.data.availablePeriodsOfValidity || []) {
+            html += '
  • ';
+            if(periodOfValidity.endDate){
+              html += "
    " + periodOfValidity.startDate + " ‐ " + periodOfValidity.endDate + "
    ";
+            } else {
+              html += "
    " + periodOfValidity.startDate + " ‐ heute
    ";
+            }                
+            html += '
    • ';
+          }
+          html += '
';
+          return html;
+        }
+      },
+      { 
+        headerName: 'Themenhierarchie', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return this.kommonitorDataExchangeService.getTopicHierarchyDisplayString(params.data.topicReference);
+        }
+      },
+      { 
+        headerName: 'Datenquelle', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return params.data.metadata?.datasource || '';
+        }
+      },
+      { 
+        headerName: 'Datenhalter und Kontakt', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return params.data.metadata?.contact || '';
+        }
+      },
+      { 
+        headerName: 'Rollen', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return this.kommonitorDataExchangeService.getAllowedRolesString(params.data.permissions);
+        }
+      },
+      { 
+        headerName: 'Öffentlich sichtbar', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return params.data.isPublic ? 'ja' : 'nein';
+        }
+      },
+      { 
+        headerName: 'Eigentümer', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return this.kommonitorDataExchangeService.getRoleTitle(params.data.ownerId);
+        }
+      }
+    ];
+  }
+
+  /**
+   * Get AOI column definitions
+   */
+  private getAoiColumnDefinitions(): ColDef[] {
+    return [
+      { 
+        headerName: 'Editierfunktionen', 
+        pinned: 'left', 
+        maxWidth: 200, 
+        minWidth: 180,
+        checkboxSelection: false, 
+        headerCheckboxSelection: false, 
+        headerCheckboxSelectionFilteredOnly: true, 
+        filter: false, 
+        sortable: false, 
+        cellRenderer: 'displayEditButtons_georesources' 
+      },
+      { headerName: 'Id', field: "georesourceId", pinned: 'left', maxWidth: 125 },
+      { headerName: 'Name', field: "datasetName", pinned: 'left', minWidth: 300 },
+      { 
+        headerName: 'Polygonfarbe', 
+        field: "aoiColor", 
+        maxWidth: 125,
+        filter: false,
+        sortable: false,
+        cellRenderer: (params: any) => {
+          const color = params.data.aoiColor || '#000000';
+          return `
${color}

`;
+        }
+      },
+      { 
+        headerName: 'Beschreibung', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return params.data.metadata?.description || '';
+        }
+      },
+      {
+        headerName: 'Gültigkeitszeitraum', 
+        minWidth: 400,
+        cellRenderer: (params: any) => {
+          let html = '
    ';
+          for (const periodOfValidity of params.data.availablePeriodsOfValidity || []) {
+            html += '
  • ';
+            if(periodOfValidity.endDate){
+              html += "
    " + periodOfValidity.startDate + " ‐ " + periodOfValidity.endDate + "
    ";
+            } else {
+              html += "
    " + periodOfValidity.startDate + " ‐ heute
    ";
+            }                
+            html += '
    • ';
+          }
+          html += '
';
+          return html;
+        }
+      },
+      { 
+        headerName: 'Themenhierarchie', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return this.kommonitorDataExchangeService.getTopicHierarchyDisplayString(params.data.topicReference);
+        }
+      },
+      { 
+        headerName: 'Datenquelle', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return params.data.metadata?.datasource || '';
+        }
+      },
+      { 
+        headerName: 'Datenhalter und Kontakt', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return params.data.metadata?.contact || '';
+        }
+      },
+      { 
+        headerName: 'Rollen', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return this.kommonitorDataExchangeService.getAllowedRolesString(params.data.permissions);
+        }
+      },
+      { 
+        headerName: 'Öffentlich sichtbar', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return params.data.isPublic ? 'ja' : 'nein';
+        }
+      },
+      { 
+        headerName: 'Eigentümer', 
+        minWidth: 400, 
+        cellRenderer: (params: any) => {
+          return this.kommonitorDataExchangeService.getRoleTitle(params.data.ownerId);
+        }
+      }
+    ];
+  }
+
+  /**
+   * Get selected georesources metadata from all grids
    */
   getSelectedGeoresourcesMetadata(): any[] {
-    return this.angularJsDataGridHelperService.getSelectedGeoresourcesMetadata() || [];
+    const selectedRows: any[] = [];
+    
+    if (this.poiGrid?.api) {
+      selectedRows.push(...this.poiGrid.api.getSelectedRows());
+    }
+    if (this.loiGrid?.api) {
+      selectedRows.push(...this.loiGrid.api.getSelectedRows());
+    }
+    if (this.aoiGrid?.api) {
+      selectedRows.push(...this.aoiGrid.api.getSelectedRows());
+    }
+    
+    return selectedRows;
   }
 
   /**
-   * Get current timestamp string - delegates to AngularJS service
+   * Get current timestamp string
    */
   getCurrentTimestampString(): string {
-    return this.angularJsDataGridHelperService.getCurrentTimestampString();
+    return new Date().toISOString();
+  }
+
+  /**
+   * Clear all grid selections
+   */
+  clearAllSelections(): void {
+    this.poiGrid?.api?.deselectAll();
+    this.loiGrid?.api?.deselectAll();
+    this.aoiGrid?.api?.deselectAll();
+  }
+
+  /**
+   * Refresh all grids
+   */
+  refreshAllGrids(): void {
+    this.poiGrid?.api?.refreshCells();
+    this.loiGrid?.api?.refreshCells();
+    this.aoiGrid?.api?.refreshCells();
+  }
+
+  /**
+   * Export grid data to CSV
+   */
+  exportToCsv(gridType: 'poi' | 'loi' | 'aoi'): void {
+    let gridApi: GridApi | undefined = undefined;
+    
+    switch (gridType) {
+      case 'poi':
+        gridApi = this.poiGrid?.api;
+        break;
+      case 'loi':
+        gridApi = this.loiGrid?.api;
+        break;
+      case 'aoi':
+        gridApi = this.aoiGrid?.api;
+        break;
+    }
+    
+    if (gridApi) {
+      gridApi.exportDataAsCsv({
+        fileName: `georesources_${gridType}_${this.getCurrentTimestampString()}.csv`
+      });
+    }
+  }
+
+  /**
+   * Get grid options for POI grid (for ag-grid-angular)
+   */
+  getPoiGridOptions(): any {
+    return {
+      components: {
+        displayEditButtons_georesources: this.displayEditButtons_georesources
+      },
+      defaultColDef: {
+        editable: false,
+        sortable: true,
+        filter: true,
+        floatingFilter: true,
+        resizable: true,
+        wrapText: true,
+        autoHeight: true
+      },
+      suppressRowClickSelection: true,
+      rowSelection: 'multiple',
+      enableCellTextSelection: true,
+      ensureDomOrder: true,
+      pagination: true,
+      paginationPageSize: 10,
+      suppressColumnVirtualisation: true,
+      onModelUpdated: () => {
+        setTimeout(() => {
+          this.registerClickHandler_georesources([]);
+        }, 100);
+      },
+      onRowDataChanged: () => {
+        setTimeout(() => {
+          this.registerClickHandler_georesources([]);
+        }, 100);
+      }
+    };
+  }
+
+  /**
+   * Get grid options for LOI grid (for ag-grid-angular)
+   */
+  getLoiGridOptions(): any {
+    return {
+      components: {
+        displayEditButtons_georesources: this.displayEditButtons_georesources
+      },
+      defaultColDef: {
+        editable: false,
+        sortable: true,
+        filter: true,
+        floatingFilter: true,
+        resizable: true,
+        wrapText: true,
+        autoHeight: true
+      },
+      suppressRowClickSelection: true,
+      rowSelection: 'multiple',
+      enableCellTextSelection: true,
+      ensureDomOrder: true,
+      pagination: true,
+      paginationPageSize: 10,
+      suppressColumnVirtualisation: true,
+      onModelUpdated: () => {
+        setTimeout(() => {
+          this.registerClickHandler_georesources([]);
+        }, 100);
+      },
+      onRowDataChanged: () => {
+        setTimeout(() => {
+          this.registerClickHandler_georesources([]);
+        }, 100);
+      }
+    };
+  }
+
+  /**
+   * Get grid options for AOI grid (for ag-grid-angular)
+   */
+  getAoiGridOptions(): any {
+    return {
+      components: {
+        displayEditButtons_georesources: this.displayEditButtons_georesources
+      },
+      defaultColDef: {
+        editable: false,
+        sortable: true,
+        filter: true,
+        floatingFilter: true,
+        resizable: true,
+        wrapText: true,
+        autoHeight: true
+      },
+      suppressRowClickSelection: true,
+      rowSelection: 'multiple',
+      enableCellTextSelection: true,
+      ensureDomOrder: true,
+      pagination: true,
+      paginationPageSize: 10,
+      suppressColumnVirtualisation: true,
+      onModelUpdated: () => {
+        setTimeout(() => {
+          this.registerClickHandler_georesources([]);
+        }, 100);
+      },
+      onRowDataChanged: () => {
+        setTimeout(() => {
+          this.registerClickHandler_georesources([]);
+        }, 100);
+      }
+    };
   }
 } 
\ No newline at end of file

From f53fefe97d69ed063048a67fc156f34686fd1f6a Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Mon, 21 Jul 2025 18:46:57 +0530
Subject: [PATCH 025/120] migrate: georesourceAdd modal

---
 app/app.module.ts                             |    9 +-
 ...min-georesources-management.component.html |    2 +-
 ...admin-georesources-management.component.ts |   24 +-
 .../georesource-add-modal.component.css       |  415 ++++++
 .../georesource-add-modal.component.html      |  871 +++++++++++++
 .../georesource-add-modal.component.ts        | 1129 +++++++++++++++++
 6 files changed, 2447 insertions(+), 3 deletions(-)
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component.css
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component.html
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index 0c4aee971..6d4c30084 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -92,6 +92,7 @@ import { IndicatorEditIndicatorSpatialUnitRolesModalComponent } from './componen
 import { IndicatorDeleteModalComponent } from './components/ngComponents/admin/adminIndicatorsManagement/indicatorDeleteModal/indicator-delete-modal.component';
 import { IndicatorBatchUpdateModalComponent } from './components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component';
 import { AdminGeoresourcesManagementComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component';
+import { GeoresourceAddModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component';
 
 
 // currently the AngularJS routing is still used as part of kommonitorClient module
@@ -193,7 +194,8 @@ declare var MathJax;
     IndicatorEditIndicatorSpatialUnitRolesModalComponent,
     IndicatorDeleteModalComponent,
     IndicatorBatchUpdateModalComponent,
-    AdminGeoresourcesManagementComponent
+    AdminGeoresourcesManagementComponent,
+    GeoresourceAddModalComponent
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
@@ -324,6 +326,11 @@ export class AppModule implements DoBootstrap {
         component: AdminGeoresourcesManagementComponent
       }) as angular.IDirectiveFactory);
 
+    angular.module('kommonitorAdmin')
+      .directive('georesourceAddModalNew', downgradeComponent({
+        component: GeoresourceAddModalComponent
+      }) as angular.IDirectiveFactory);
+
     console.log("registered downgraded Angular components for AngularJS usage");
   }
 
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html
index 55491dc8d..b0e582fd1 100644
--- a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html
@@ -30,7 +30,7 @@ 

       
       					  		
       
       
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
index 07e3709dc..4d7b1dd38 100644
--- a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
@@ -1,17 +1,19 @@
 import { Component, OnInit, OnDestroy, Inject, ViewChild, AfterViewInit } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Subscription } from 'rxjs';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { BroadcastService } from '../../../../services/broadcast-service/broadcast.service';
 import { KommonitorGeoresourceDataExchangeService } from '../../../../services/adminGeoresourceUnit/kommonitor-data-exchange.service';
 import { KommonitorGeoresourceCacheHelperService } from '../../../../services/adminGeoresourceUnit/kommonitor-cache-helper.service';
 import { KommonitorGeoresourceDataGridHelperService } from '../../../../services/adminGeoresourceUnit/kommonitor-data-grid-helper.service';
 import { AgGridAngular } from 'ag-grid-angular';
+import { GeoresourceAddModalComponent } from './georesourceAddModal/georesource-add-modal.component';
 
 // Declare jQuery for AdminLTE
 declare const $: any;
 
 @Component({
-  selector: 'app-admin-georesources-management',
+  selector: 'admin-georesources-management-new',
   templateUrl: './admin-georesources-management.component.html',
   styleUrls: ['./admin-georesources-management.component.css']
 })
@@ -33,6 +35,7 @@ export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy,
 
   constructor(
     @Inject(DOCUMENT) private document: Document,
+    private modalService: NgbModal,
     private broadcastService: BroadcastService,
     public kommonitorDataExchangeService: KommonitorGeoresourceDataExchangeService,
     private kommonitorCacheHelperService: KommonitorGeoresourceCacheHelperService,
@@ -249,6 +252,25 @@ export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy,
     }
   }
 
+  // Modal event handlers
+  onClickAddGeoresource(): void {
+    const modalRef = this.modalService.open(GeoresourceAddModalComponent, {
+      size: 'lg',
+      backdrop: 'static',
+      keyboard: false,
+      container: 'body',
+      animation: false
+    });
+    
+    modalRef.result.then((result) => {
+      if (result) {
+        this.initializeOrRefreshOverviewTable();
+      }
+    }).catch(() => {
+      // Modal dismissed
+    });
+  }
+
   public onClickEditMetadata(georesourceDataset: any): void {
     // submit selected georesource to modal controller
     this.broadcastService.broadcast('onEditGeoresourceMetadata', georesourceDataset);
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component.css b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component.css
new file mode 100644
index 000000000..d6087d203
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component.css
@@ -0,0 +1,415 @@
+/* Georesource Add Modal Component Styles */
+
+/* Loading overlay */
+.loading-overlay-admin-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading-overlay-admin-panel.ng-hide {
+  display: none !important;
+}
+
+/* Multi-step form styles */
+.multiStepForm {
+  margin-bottom: 0px;
+}
+
+#progressbar {
+  margin-bottom: 30px;
+  overflow: hidden;
+  color: lightgrey;
+  padding-left: 0;
+}
+
+#progressbar li {
+  list-style-type: none;
+  font-size: 15px;
+  width: 25%;
+  float: left;
+  position: relative;
+  font-weight: 400;
+}
+
+#progressbar li:before {
+  width: 50px;
+  height: 50px;
+  line-height: 45px;
+  display: block;
+  font-size: 20px;
+  color: #ffffff;
+  background: lightgray;
+  border-radius: 50%;
+  margin: 0 auto 10px auto;
+  padding: 2px;
+}
+
+#progressbar li.active:before,
+#progressbar li.active:after {
+  background: #27AE60;
+}
+
+#progressbar li.clickable {
+  cursor: pointer;
+}
+
+/* Form fieldset styles */
+.fs-title {
+  font-size: 15px;
+  text-transform: uppercase;
+  color: #2C3E50;
+  margin-bottom: 10px;
+}
+
+.fs-subtitle {
+  font-weight: normal;
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 20px;
+}
+
+/* Form group spacing */
+.form-group {
+  margin-bottom: 15px;
+}
+
+/* Vertical alignment helper */
+.vertical-align {
+  display: flex;
+  align-items: center;
+}
+
+/* Modal body padding */
+.modal-body {
+  padding: 20px;
+}
+
+/* Modal footer styling */
+.modal-footer {
+  padding: 15px 20px;
+  border-top: 1px solid #e5e5e5;
+}
+
+/* Switch toggle styles */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switchslider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.switchslider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .switchslider {
+  background-color: #2196F3;
+}
+
+input:focus + .switchslider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .switchslider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+.switchslider.round {
+  border-radius: 34px;
+}
+
+.switchslider.round:before {
+  border-radius: 50%;
+}
+
+/* Custom color picker dropdown styles */
+.customColorPicker .dropdown-menu {
+  min-width: 200px;
+}
+
+.customColorPicker .dropdown-menu li a {
+  padding: 5px 10px;
+}
+
+.customColorPicker .dropdown-menu li a i {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  border: 1px solid #ccc;
+  vertical-align: middle;
+}
+
+/* Table styles for attribute mappings */
+.table-condensed > thead > tr > th,
+.table-condensed > tbody > tr > th,
+.table-condensed > tfoot > tr > th,
+.table-condensed > thead > tr > td,
+.table-condensed > tbody > tr > td,
+.table-condensed > tfoot > tr > td {
+  padding: 5px;
+}
+
+.modal-footer .btn {
+  margin-left: 5px;
+}
+
+/* Form validation styles */
+.help-block {
+  color: #737373;
+  font-size: 12px;
+  margin-top: 5px;
+}
+
+.help-block.with-errors {
+  color: #a94442;
+}
+
+/* Error message styling */
+.error-message {
+  color: #a94442;
+  background-color: #f2dede;
+  border: 1px solid #ebccd1;
+  border-radius: 4px;
+  padding: 10px;
+  margin-bottom: 15px;
+}
+
+/* Success message styling */
+.success-message {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  padding: 10px;
+  margin-bottom: 15px;
+}
+
+/* Checkbox styling */
+.checkbox {
+  margin-top: 10px;
+}
+
+.checkbox label {
+  font-weight: normal;
+  cursor: pointer;
+}
+
+/* File input styling */
+input[type="file"] {
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+/* Color input styling */
+input[type="color"] {
+  width: 100%;
+  height: 34px;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+/* Select styling */
+select.form-control {
+  height: 34px;
+  padding: 6px 12px;
+}
+
+/* Textarea styling */
+textarea.form-control {
+  resize: vertical;
+  min-height: 60px;
+}
+
+/* Button styling */
+.btn {
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.btn-success {
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+
+.btn-success:hover {
+  background-color: #449d44;
+  border-color: #398439;
+}
+
+.btn-danger {
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+
+.btn-danger:hover {
+  background-color: #c9302c;
+  border-color: #ac2925;
+}
+
+.btn-info {
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+
+.btn-info:hover {
+  background-color: #31b0d5;
+  border-color: #269abc;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .vertical-align {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .col-xs-12 {
+    margin-bottom: 15px;
+  }
+  
+  #progressbar li {
+    font-size: 12px;
+  }
+  
+  #progressbar li:before {
+    width: 40px;
+    height: 40px;
+    line-height: 35px;
+    font-size: 16px;
+  }
+}
+
+/* Modal size adjustments */
+.modal-xl {
+  width: 90%;
+  max-width: 1200px;
+}
+
+/* Form validation states */
+.form-control.ng-invalid.ng-touched {
+  border-color: #a94442;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+}
+
+.form-control.ng-valid.ng-touched {
+  border-color: #3c763d;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
+}
+
+/* Navigation buttons */
+.navigation-buttons {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.navigation-buttons .btn {
+  margin: 0 5px;
+}
+
+/* Step content transitions */
+.step-content {
+  transition: opacity 0.3s ease-in-out;
+}
+
+/* Icon picker styling (if used) */
+.icon-picker {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px;
+  background-color: #f9f9f9;
+}
+
+/* Role management table styling */
+.role-management-table {
+  margin-top: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+/* Topic hierarchy styling */
+.topic-hierarchy {
+  background-color: #f5f5f5;
+  padding: 15px;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+.topic-hierarchy select {
+  margin-bottom: 10px;
+}
+
+/* Visual styling section */
+.visual-styling {
+  background-color: #f9f9f9;
+  padding: 15px;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+.visual-styling .form-group {
+  margin-bottom: 10px;
+}
+
+/* Period of validity styling */
+.period-of-validity {
+  background-color: #e8f4f8;
+  padding: 15px;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+.period-of-validity .form-group {
+  margin-bottom: 10px;
+}
+
+/* Importer section styling */
+.importer-section {
+  background-color: #f0f8ff;
+  padding: 15px;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+.importer-section .form-group {
+  margin-bottom: 10px;
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component.html b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component.html
new file mode 100644
index 000000000..c647fb413
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component.html
@@ -0,0 +1,871 @@
+

+  
+  
Neue Georessource registrieren

+

+
+

+  

+    

+      
+    

+  

+
+  
+  

+    

+      

+        
+        
+        

+          
    
+            
  • Metadaten der Georessource
    • 
+            
  • Allgemeine Metadaten
    • 
+            
  • Themenhierarchie
    • 
+            
  • Räumlicher Datensatz
    • 
+          

+        

+        

+          
    
+            
  • Metadaten der Georessource
    • 
+            
  • Allgemeine Metadaten
    • 
+            
  • Themenhierarchie
    • 
+            
  • Zugriffsschutz und Eigentümerschaft
    • 
+            
  • Räumlicher Datensatz
    • 
+          

+        

+
+        
+        

+          
Metadaten der Georessource

+          
Angaben über Metadaten der Georessource

+          
* = Pflichtfeld

+
+          

+            

+              

+                
+                
+                

+                

+                  
Eingabe ungültig. Es existiert bereits eine Georessource mit gleichem Namen und gleichem Typ.

+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+          

+
+          

+            

+              

+                
+                

+                  
+                  
+                  

+                

+              

+            

+            

+              

+                
+                

+                  
+                  
+                  

+                

+              

+            

+            

+              

+                
+                

+                
+                

+              

+            

+            

+              

+                
+                

+                
+                

+                  0-3 Zeichen
+                

+                

+                  
Text darf maximal 3 Zeichen lang sein.

+                

+              

+            

+            

+              

+                
+                
+                

+                  
+                  
+                  

+                

+              

+            

+          

+
+          

+            

+              

+                
+                

+                  
+                  
+                

+                

+              

+            

+            

+              

+                
+                

+                
+                

+              

+            

+            

+              

+                
+                

+                  
+                  
+                  

+                

+              

+            

+          

+
+          

+            

+              

+                
+                

+                  
+                  
+                

+                

+              

+            

+          

+
+          
+        

+
+        

+          
Allgemeine Metadaten

+          
Angaben über allgemeine Metadaten in KomMonitor

+          
* = Pflichtfeld

+
+          

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+          

+
+          

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                

+                  

+                    
+                  

+                  
+                

+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+          

+
+          
+          
+        

+
+        

+          
Themenhierarchie

+          
Angaben über die Themenhierarchie der Georessource

+          
* = Pflichtfeld

+          
Angabe der Themenhierarchie. Mindestens das Hauptthema muss gewählt werden. Vorhandene Unterthemen erscheinen nach Auswahl eines Hauptthemas. Bis zu vier Themen-Ebenen sind erlaubt.

+          
Das Aufklappen der unteren Box ermöglicht die Verwaltung des Themenkatalogs.

+
+          

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+          

+
+          

+          

+
+          

+            

+              

+                

+                  

+                    
Themenkatalog

+                    

+                      
+                    

+                  

+                  

+                    
+                    
+                  

+                

+              

+            

+          

+
+          
+          
+        

+
+        

+          
Zugriffsschutz und Eigentümerschaft

+          
Vergabe der Zugriffsrechte auf Datensatz-Metadaten und -Features pro Organisationseinheit

+          

+            

+            

+              

+                Bitte wählen Sie zunächst die Organisationseinheit aus, unter welcher Sie den Datensatz anlegen möchten
+              

+              
+              

+                
+                
+              

+              
+              
+              

+            

+            

+          

+
+          

+          

+          

+
+          

+            
+            
+            

+              

+                
+                
+                

+                  
Öffentlich freigegebene Datensätze können ohne Login abgerufen werden.

+                

+              

+              

+                

+              

+              

+                

+                  Als Eigentümer-Organisation des Datensatzes können Sie Lese- und Editier-Rechte an die eigene und weitere Organisationseinheiten vergeben.
+                

+                

+                

+                  Lese- und Editierrechte wurden für die von Ihnen selektierte Eigentümer-Organisationseinheit markiert.
+                

+              

+            

+          

+          
+          
+          
+        

+
+        

+          

+            
+            
+            
+          

+          
+          
Räumlicher Datensatz

+          
Angaben über den räumlichen Datensatz, aus dem die Features importiert werden

+          
* = Pflichtfeld

+
+          

+            

+              

+                
+                
+                

+              

+              
+              

+                

+                  
+                  
+                  

+                

+              

+
+              

+                

+                  
+                  
+                  

+                

+              

+
+              

+                

+                  
+                  
+                  

+                    
{{parameter.description}}

+                  

+                  

+                    
CRS aufmerksam setzen. Falsche Angaben führen zur fehlerhaften Koordinaten der Features

+                  

+                  

+                

+              

+            

+            
+            

+              

+                

+                  
bitte zuerst das Quellformat wählen

+                

+                

+                  

+                    
+                    
+                    

+                  

+
+                  

+                    
+                    
+                  

+                  
+                  

+                    
+                    
+
+                    

+                      
+                      

+                        
Raumebene aus welchem ein umschließendes Rechteck extrahiert wird

+                      

+                    

+                    
+                    

+                      
+                      
+                      

+                        
Minimale x-Koordinate (Longitude)

+                      

+                      
+                      

+                        
Minimale y-Koordinate (Latitude)

+                      

+                      
+                      

+                        
Maximale x-Koordinate (Longitude)

+                      

+                      
+                      

+                        
Maximale y-Koordinate (Latitude)

+                      

+                    

+                  

+                  
+                  

+                    

+                      

+                        
+                        
+                        
+                        

+                          
{{parameter.description}}

+                        

+                        

+                      

+                    

+                  

+                

+
+                

+                

+                  
Eingabe ungültig. Grund: {{georesourceDataSourceInputInvalidReason}}

+                

+              

+            

+            
+            

+              

+                
+                
+                

+                  
Name des Attributs, welches den eindeutigen Identifier des Features enthält.

+                

+                

+                

+                  
Eingabe ungültig. Angegebenes Attribut nicht gefunden oder enthält NULL-Werte.

+                

+              

+              

+                
+                
+                

+                  
Name des Attributs, welches den eindeutigen Namen des Features enthält.

+                

+                

+                

+                  
Eingabe ungültig. Angegebenes Attribut nicht gefunden oder enthält NULL-Werte.

+                

+              

+            

+            
+            

+              

+                
+                
+                

+                  
Eintrag nur, falls die räumlichen Features über ein Attribut für den Lebenszeitraum (Beginn) verfügen.

+                

+                

+              

+              

+                
+                
+                

+                  
Eintrag nur, falls die räumlichen Features über ein Attribut für den Lebenszeitraum (Ende) verfügen.

+                

+                

+              

+            

+          

+          
+          

+            

+              

+                
+                

+                  

+                    
+                  

+                  
+                

+                

+                  
Eintrag ist immer erforderlich, selbst wenn die räumlichen Features über ein Lebenszeitraum-Attribut verfügen.

+                

+                

+                

+                  
Eingabe ungültig. Definiertes Zeitintervall ist nicht erlaubt.

+                

+              

+            

+            

+              

+                
+                

+                  

+                    
+                  

+                  
+                

+                

+                  
Eintrag ist erforderlich, falls die räumlichen Features nicht selbst über ein Lebenszeitraum-Attribut verfügen. Enddatum darf leer sein, um anzuzeigen, dass es sich um aktuell gültige Features handelt.

+                

+                

+                

+                  
Eingabe ungültig. Definiertes Zeitintervall ist nicht erlaubt.

+                

+              

+            

+          

+          
+          

+          

+
+          

+            

+              

+                
+                

+                
+                

+                  
Angabe, ob alle sonstigen Attribute des importierten Datensatzes mit gleichem Namen übernommen werden sollen. Falls nicht, so lassen sich einzelne Attribut-Importe definieren.

+                

+              

+            

+            

+              

+                
+                

+                
+                

+                  
Angabe, ob fehlende Attribute oder leere Attributwerte (NULL-Werte) übernommen werden. Bei deaktivierter Option wird bei einem solchen Fall ein Fehler geworfen.

+                

+              

+            

+          

+          
+          

+            

+              

+                
+                
+                

+              

+
+              

+                
+                
+                

+              

+
+              

+                
+                
+                

+              

+
+              

+                
+                

+              

+            

+            
+            

+              
+              
+                
+                  
+                    
+                    
+                    
+                    
+                  
+                
+                
+                  
+                    
+                    
+                    
+                    
+                  
+                
+              
EditierfunktionenQuell-Attributname im DatensatzZiel-Attributname nach ImportDatentyp

+                      

+                        
+                        
+                      

+                    		{{attributeMappingEntry.sourceName}}{{attributeMappingEntry.destinationName}}{{attributeMappingEntry.dataType.displayName}}

+            

+          

+
+          
+        

+      

+    

+  

+

+
+

+  
+  
+  
+  
+
+  
+  
+

+
+
+

+  
+  
Georessource registriert

+  
Eine neue Georessource mit Namen {{successMessagePart}} wurde in KomMonitor registriert und in die Übersichtstabelle eingetragen.
+    
+      {{importedFeatures.length}} Features wurden dabei importiert.
+    
+  

+

+
+
+

+  
+  
Registrierung gescheitert

+  Bei der Registrierung der Georessource ist ein Fehler aufgetreten. Fehlermeldung:
+  

+  

+  

+  

+
+  

+    
Bei den {{importerErrors.length}} Features mit folgenden IDs scheitert der Import:

+    
+      
    
+        
  • {{error}}
    • 
+      

+    

+    
Bitte beheben Sie die angezeigten Fehler im Datensatz und wiederholen den Prozess.

+  

+

+
+
+

+  
+  
Metadata Import gescheitert

+  Beim Import der Metadaten aus einer Datei ist ein Fehler aufgetreten. Fehlermeldung:
+  

+  
{{georesourceMetadataImportError}}

+  

+  

+  
Bitte stellen Sie sicher, dass folgendes JSON-Format eingehalten wird:

+  

+

+
+
+

+  
+  
Mapping-Konfiguration Import gescheitert

+  Beim Import der Mapping-Konfiguration aus einer Datei ist ein Fehler aufgetreten. Fehlermeldung:
+  

+  

+  

+  

+  
Bitte stellen Sie sicher, dass folgendes JSON-Format eingehalten wird:

+  

+
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component.ts
new file mode 100644
index 000000000..443248372
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component.ts
@@ -0,0 +1,1129 @@
+import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'georesource-add-modal-new',
+  templateUrl: './georesource-add-modal.component.html',
+  styleUrls: ['./georesource-add-modal.component.css']
+})
+export class GeoresourceAddModalComponent implements OnInit {
+  @ViewChild('metadataImportFile', { static: false }) metadataImportFile!: ElementRef;
+  @ViewChild('mappingConfigImportFile', { static: false }) mappingConfigImportFile!: ElementRef;
+  @ViewChild('georesourceDataSourceInput', { static: false }) georesourceDataSourceInput!: ElementRef;
+
+  // Multi-step form
+  currentStep = 1;
+  totalSteps = 4; // Will be adjusted based on security settings
+
+  // Form data
+  isSubmitting = false;
+  errorMessage = '';
+  successMessage = '';
+  loadingData = false;
+
+  // Basic form data
+  datasetName = '';
+  datasetNameInvalid = false;
+  georesourceType = 'poi';
+  isPOI = true;
+  isLOI = false;
+  isAOI = false;
+
+  // Metadata
+  metadata: any = {
+    description: '',
+    databasis: '',
+    datasource: '',
+    contact: '',
+    updateInterval: null,
+    lastUpdate: '',
+    literature: '',
+    note: '',
+    sridEPSG: 4326
+  };
+
+  // Topic hierarchy
+  georesourceTopic_mainTopic: any = null;
+  georesourceTopic_subTopic: any = null;
+  georesourceTopic_subsubTopic: any = null;
+  georesourceTopic_subsubsubTopic: any = null;
+
+  // Visual styling
+  selectedPoiMarkerColor: any = null;
+  selectedPoiSymbolColor: any = null;
+  selectedLoiDashArrayObject: any = null;
+  loiColor = '#bf3d2c';
+  loiWidth = 3;
+  aoiColor = '#bf3d2c';
+  selectedPoiIconName = 'home';
+  selectedPoiMarkerStyle = 'symbol';
+  poiMarkerText = '';
+  poiMarkerTextInvalid = false;
+
+  // Period of validity
+  periodOfValidity: { startDate: string; endDate: string } = {
+    startDate: '',
+    endDate: ''
+  };
+  periodOfValidityInvalid = false;
+
+  // Available options
+  availableTopics: any[] = [];
+  updateIntervalOptions: any[] = [];
+  availablePoiMarkerColors: any[] = [];
+  availableLoiDashArrayObjects: any[] = [];
+  availableDatasourceTypes: any[] = [];
+
+  // Importer functionality
+  converter: any = null;
+  schema: string = '';
+  mimeType: string = '';
+  datasourceType: any = null;
+  georesourceDataSourceIdProperty = '';
+  georesourceDataSourceIdPropertyInvalid = false;
+  georesourceDataSourceNameProperty = '';
+  georesourceDataSourceNamePropertyInvalid = false;
+
+  // Bbox parameters for OGCAPI_FEATURES
+  bboxType: string = '';
+  bboxRefSpatialUnit: any = null;
+
+  // Attribute mapping
+  attributeMapping_sourceAttributeName = '';
+  attributeMapping_destinationAttributeName = '';
+  attributeMapping_data: any = null;
+  attributeMapping_attributeType: any = null;
+  attributeMappings_adminView: any[] = [];
+  keepAttributes = true;
+  keepMissingValues = true;
+
+  // Validity dates per feature
+  validityStartDate_perFeature = '';
+  validityEndDate_perFeature = '';
+
+  // Role management
+  roleManagementTableOptions: any = null;
+  ownerOrganization = '';
+  ownerOrgFilter = '';
+  isPublic = false;
+  resourcesCreatorRights: any[] = [];
+
+  // GeoJSON data
+  geoJsonString: any = null;
+  georesource_asGeoJson: any = null;
+
+  // Import/Export functionality
+  metadataImportSettings: any = null;
+  mappingConfigImportSettings: any = null;
+  georesourceMetadataImportError = '';
+  georesourceMappingConfigImportError = '';
+
+  // Success/Error data
+  successMessagePart = '';
+  errorMessagePart = '';
+  importerErrors: any[] = [];
+  importedFeatures: any[] = [];
+
+  // Metadata structure for import/export
+  georesourceMetadataStructure: any = {
+    "metadata": {
+      "note": "an optional note",
+      "literature": "optional text about literature",
+      "updateInterval": "YEARLY|HALF_YEARLY|QUARTERLY|MONTHLY|ARBITRARY",
+      "sridEPSG": 4326,
+      "datasource": "text about data source",
+      "contact": "text about contact details",
+      "lastUpdate": "YYYY-MM-DD",
+      "description": "description about spatial unit dataset",
+      "databasis": "text about data basis",
+    },
+    "allowedRoles": ['roleId'],
+    "datasetName": "Name of georesource dataset",
+    "isPOI": "boolean parameter for point of interest dataset - only one of isPOI, isLOI, isAOI can be true",
+    "isLOI": "boolean parameter for lines of interest dataset - only one of isPOI, isLOI, isAOI can be true",
+    "isAOI": "boolean parameter for area of interest dataset - only one of isPOI, isLOI, isAOI can be true",
+    "poiSymbolBootstrap3Name": "glyphicon name of bootstrap 3 symbol to use for a POI resource",
+    "poiSymbolColor": "'white'|'red'|'orange'|'beige'|'green'|'blue'|'purple'|'pink'|'gray'|'black'",
+    "loiDashArrayString": "dash array string value - e.g. 20 20",
+    "poiMarkerColor": "'white'|'red'|'orange'|'beige'|'green'|'blue'|'purple'|'pink'|'gray'|'black'",
+    "loiColor": "color for lines of interest dataset",
+    "loiWidth": "width for lines of interest dataset",
+    "aoiColor": "color for area of interest dataset"
+  };
+
+  georesourceMetadataStructure_pretty = '';
+  georesourceMappingConfigStructure_pretty = '';
+
+  // Importer objects
+  converterDefinition: any = null;
+  datasourceTypeDefinition: any = null;
+  propertyMappingDefinition: any = null;
+  postBody_georesources: any = null;
+
+  // Validation flags
+  idPropertyNotFound = false;
+  namePropertyNotFound = false;
+  georesourceDataSourceInputInvalid = false;
+  georesourceDataSourceInputInvalidReason = '';
+
+  // Icon picker options
+  iconPickerOptions: any = {
+    align: 'center',
+    arrowClass: 'btn-default',
+    arrowPrevIconClass: 'fas fa-angle-left',
+    arrowNextIconClass: 'fas fa-angle-right',
+    cols: 10,
+    footer: true,
+    header: true,
+    icon: 'glyphicon-home',
+    iconset: 'glyphicon',
+    labelHeader: '{0} von {1} Seiten',
+    labelFooter: '{0} - {1} von {2} Icons',
+    placement: 'bottom',
+    rows: 6,
+    search: true,
+    searchText: 'Stichwortsuche (Bootstrap Glyphicons)',
+    selectedClass: 'btn-success',
+    unselectedClass: ''
+  };
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
+    @Inject('kommonitorImporterHelperService') public kommonitorImporterHelperService: any,
+    @Inject('kommonitorMultiStepFormHelperService') public kommonitorMultiStepFormHelperService: any,
+    @Inject('kommonitorDataGridHelperService') public kommonitorDataGridHelperService: any,
+    private broadcastService: BroadcastService,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit(): void {
+    this.initializeForm();
+    this.setupEventListeners();
+  }
+
+  private initializeForm(): void {
+    // Initialize form with default values
+    this.resetGeoresourceAddForm();
+    
+    // Load available options
+    this.loadAvailableOptions();
+    
+    // Adjust total steps based on security settings
+    this.totalSteps = this.kommonitorDataExchangeService.enableKeycloakSecurity ? 5 : 4;
+  }
+
+  private setupEventListeners(): void {
+    // Listen for broadcast messages
+    const broadcastSub = this.broadcastService.currentBroadcastMsg.subscribe((data: any) => {
+      if (data.msg === 'availableRolesUpdate') {
+        this.refreshRoles();
+      } else if (data.msg === 'initialMetadataLoadingCompleted') {
+        this.refreshRoles();
+      }
+    });
+  }
+
+  private loadAvailableOptions(): void {
+    // Load available options from services
+    this.updateIntervalOptions = this.kommonitorDataExchangeService.updateIntervalOptions || [];
+    this.availablePoiMarkerColors = this.kommonitorDataExchangeService.availablePoiMarkerColors || [];
+    this.availableLoiDashArrayObjects = this.kommonitorDataExchangeService.availableLoiDashArrayObjects || [];
+    this.availableTopics = this.kommonitorDataExchangeService.availableTopics || [];
+    this.availableDatasourceTypes = this.kommonitorImporterHelperService.availableDatasourceTypes || [];
+    
+    // Initialize metadata structure pretty print
+    this.georesourceMetadataStructure_pretty = this.kommonitorDataExchangeService.syntaxHighlightJSON(this.georesourceMetadataStructure);
+    this.georesourceMappingConfigStructure_pretty = this.kommonitorDataExchangeService.syntaxHighlightJSON(this.kommonitorImporterHelperService.mappingConfigStructure);
+  }
+
+  private refreshRoles(): void {
+    this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+      'georesourceAddRoleManagementTable', 
+      this.roleManagementTableOptions, 
+      this.kommonitorDataExchangeService.accessControl, 
+      this.kommonitorDataExchangeService.getCurrentKomMonitorLoginRoleIds()
+    );
+  }
+
+  // Multi-step form navigation
+  goToStep(step: number): void {
+    if (step >= 1 && step <= this.totalSteps) {
+      this.currentStep = step;
+    }
+  }
+
+  nextStep(): void {
+    if (this.currentStep < this.totalSteps) {
+      this.currentStep++;
+    }
+  }
+
+  previousStep(): void {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+    }
+  }
+
+  // Form validation methods
+  checkDatasetName(): void {
+    this.datasetNameInvalid = false;
+    this.kommonitorDataExchangeService.availableGeoresources.forEach((georesource: any) => {
+      if (georesource.datasetName === this.datasetName) {
+        this.datasetNameInvalid = true;
+        return;
+      }
+    });
+  }
+
+  checkPeriodOfValidity(): void {
+    this.periodOfValidityInvalid = false;
+    if (this.periodOfValidity.startDate && this.periodOfValidity.endDate) {
+      const startDate = new Date(this.periodOfValidity.startDate);
+      const endDate = new Date(this.periodOfValidity.endDate);
+
+      if ((startDate === endDate) || startDate > endDate) {
+        this.periodOfValidityInvalid = true;
+      }
+    }
+  }
+
+  onChangeGeoresourceType(): void {
+    switch (this.georesourceType) {
+      case "poi":
+        this.isPOI = true;
+        this.isLOI = false;
+        this.isAOI = false;
+        break;
+      case "loi":
+        this.isPOI = false;
+        this.isLOI = true;
+        this.isAOI = false;
+        break;
+      case "aoi":
+        this.isPOI = false;
+        this.isLOI = false;
+        this.isAOI = true;
+        break;
+      default:
+        this.isPOI = true;
+        this.isLOI = false;
+        this.isAOI = false;
+        break;
+    }
+  }
+
+  onChangeOwner(orgUnitId: string): void {
+    this.ownerOrganization = orgUnitId;
+    this.refreshRoles();
+  }
+
+  onChangeIsPublic(isPublic: boolean): void {
+    this.isPublic = isPublic;
+  }
+
+  // Importer methods
+  onChangeConverter(): void {
+    this.schema = this.converter?.schemas ? this.converter.schemas[0] : undefined;
+    this.mimeType = this.converter?.mimeTypes ? this.converter.mimeTypes[0] : undefined;
+  }
+
+  onChangeMimeType(mimeType: string): void {
+    this.mimeType = mimeType;
+  }
+
+  onChangeDatasourceType(datasourceType: any): void {
+    this.datasourceType = datasourceType;
+  }
+
+  // Color and styling methods
+  onChangeMarkerColor(markerColor: any): void {
+    this.selectedPoiMarkerColor = markerColor;
+  }
+
+  onChangeSymbolColor(symbolColor: any): void {
+    this.selectedPoiSymbolColor = symbolColor;
+  }
+
+  onChangeLoiDashArray(loiDashArrayObject: any): void {
+    this.selectedLoiDashArrayObject = loiDashArrayObject;
+  }
+
+  onChangeMarkerStyle(markerStyle: string): void {
+    this.selectedPoiMarkerStyle = markerStyle;
+  }
+
+  checkPoiMarkerText(): void {
+    this.poiMarkerTextInvalid = false;
+    if (this.poiMarkerText && this.poiMarkerText.length > 3) {
+      this.poiMarkerTextInvalid = true;
+    }
+  }
+
+  // Attribute mapping methods
+  onAddOrUpdateAttributeMapping(): void {
+    const tmpAttributeMapping_adminView = {
+      "sourceName": this.attributeMapping_sourceAttributeName,
+      "destinationName": this.attributeMapping_destinationAttributeName,
+      "dataType": this.attributeMapping_attributeType
+    };
+
+    let processed = false;
+
+    for (let index = 0; index < this.attributeMappings_adminView.length; index++) {
+      const attributeMappingEntry_adminView = this.attributeMappings_adminView[index];
+      
+      if (attributeMappingEntry_adminView.sourceName === tmpAttributeMapping_adminView.sourceName) {
+        // replace object
+        this.attributeMappings_adminView[index] = tmpAttributeMapping_adminView;
+        processed = true;
+        break;
+      }
+    }			
+
+    if (!processed) {
+      // new entry
+      this.attributeMappings_adminView.push(tmpAttributeMapping_adminView);
+    }
+
+    this.attributeMapping_sourceAttributeName = '';
+    this.attributeMapping_destinationAttributeName = '';
+    this.attributeMapping_attributeType = this.kommonitorImporterHelperService.attributeMapping_attributeTypes[0];
+  }
+
+  onClickEditAttributeMapping(attributeMappingEntry: any): void {
+    this.attributeMapping_sourceAttributeName = attributeMappingEntry.sourceName;
+    this.attributeMapping_destinationAttributeName = attributeMappingEntry.destinationName;
+    this.attributeMapping_attributeType = attributeMappingEntry.dataType;
+  }
+
+  onClickDeleteAttributeMapping(attributeMappingEntry: any): void {
+    for (let index = 0; index < this.attributeMappings_adminView.length; index++) {
+      if (this.attributeMappings_adminView[index].sourceName === attributeMappingEntry.sourceName) {
+        // remove object
+        this.attributeMappings_adminView.splice(index, 1);
+        break;
+      }
+    }
+  }
+
+  // Import/Export methods
+  onImportGeoresourceAddMetadata(): void {
+    this.georesourceMetadataImportError = '';
+    this.metadataImportFile.nativeElement.click();
+  }
+
+  onExportGeoresourceAddMetadataTemplate(): void {
+    const metadataJSON = JSON.stringify(this.georesourceMetadataStructure);
+    const fileName = "Georessource_Metadaten_Vorlage_Export.json";
+    this.downloadFile(metadataJSON, fileName);
+  }
+
+  onExportGeoresourceAddMetadata(): void {
+    const metadataExport = JSON.parse(JSON.stringify(this.georesourceMetadataStructure));
+
+    metadataExport.metadata.note = this.metadata.note || "";
+    metadataExport.metadata.literature = this.metadata.literature || "";
+    metadataExport.metadata.sridEPSG = this.metadata.sridEPSG || "";
+    metadataExport.metadata.datasource = this.metadata.datasource || "";
+    metadataExport.metadata.contact = this.metadata.contact || "";
+    metadataExport.metadata.lastUpdate = this.metadata.lastUpdate || "";
+    metadataExport.metadata.description = this.metadata.description || "";
+    metadataExport.metadata.databasis = this.metadata.databasis || "";
+    metadataExport.datasetName = this.datasetName || "";
+
+    metadataExport.allowedRoles = [];
+
+    if (this.roleManagementTableOptions) {
+      const roleIds = this.kommonitorDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
+      if (roleIds && Array.isArray(roleIds)) {
+        for (const roleId of roleIds) {
+          metadataExport.allowedRoles.push(roleId);
+        }
+      }
+    }
+
+    if (this.metadata.updateInterval) {
+      metadataExport.metadata.updateInterval = this.metadata.updateInterval.apiName;
+    }
+
+    const name = this.datasetName;
+
+    // georesource specific properties
+    metadataExport.isPOI = this.isPOI;
+    metadataExport.isLOI = this.isLOI;
+    metadataExport.isAOI = this.isAOI;
+
+    if (this.isPOI) {
+      metadataExport["poiSymbolBootstrap3Name"] = this.selectedPoiIconName;
+      metadataExport["poiSymbolColor"] = (this.selectedPoiSymbolColor as any)?.colorName || '';
+      metadataExport["poiMarkerColor"] = (this.selectedPoiMarkerColor as any)?.colorName || '';
+
+      metadataExport["loiDashArrayString"] = "";
+      metadataExport["loiColor"] = "";
+      metadataExport["loiWidth"] = "";
+
+      metadataExport["aoiColor"] = "";
+    } else if (this.isLOI) {
+      metadataExport["poiSymbolBootstrap3Name"] = "";
+      metadataExport["poiSymbolColor"] = "";
+      metadataExport["poiMarkerColor"] = "";
+
+      metadataExport["loiDashArrayString"] = this.selectedLoiDashArrayObject.dashArrayValue;
+      metadataExport["loiColor"] = this.loiColor;
+      metadataExport["loiWidth"] = this.loiWidth;
+
+      metadataExport["aoiColor"] = "";
+    } else if (this.isAOI) {
+      metadataExport["poiSymbolBootstrap3Name"] = "";
+      metadataExport["poiSymbolColor"] = "";
+      metadataExport["poiMarkerColor"] = "";
+
+      metadataExport["loiDashArrayString"] = "";
+      metadataExport["loiColor"] = "";
+      metadataExport["loiWidth"] = "";
+
+      metadataExport["aoiColor"] = this.aoiColor;
+    }
+
+    // Topic reference
+    if (this.georesourceTopic_subsubsubTopic) {
+      metadataExport.topicReference = this.georesourceTopic_subsubsubTopic.topicId;
+    } else if (this.georesourceTopic_subsubTopic) {
+      metadataExport.topicReference = this.georesourceTopic_subsubTopic.topicId;
+    } else if (this.georesourceTopic_subTopic) {
+      metadataExport.topicReference = this.georesourceTopic_subTopic.topicId;
+    } else if (this.georesourceTopic_mainTopic) {
+      metadataExport.topicReference = this.georesourceTopic_mainTopic.topicId;
+    } else {
+      metadataExport.topicReference = "";
+    }
+
+    const metadataJSON = JSON.stringify(metadataExport);
+    let fileName = "Georessource_Metadaten_Export";
+
+    if (name) {
+      fileName += "-" + name;
+    }
+
+    fileName += ".json";
+    this.downloadFile(metadataJSON, fileName);
+  }
+
+  onImportGeoresourceAddMappingConfig(): void {
+    this.georesourceMappingConfigImportError = '';
+    this.mappingConfigImportFile.nativeElement.click();
+  }
+
+  onExportGeoresourceAddMappingConfig(): void {
+    this.buildImporterObjects().then(() => {
+      const mappingConfigExport: any = {
+        "converter": this.converterDefinition,
+        "dataSource": this.datasourceTypeDefinition,
+        "propertyMapping": this.propertyMappingDefinition,
+      };
+
+      mappingConfigExport.periodOfValidity = this.periodOfValidity;
+
+      const name = this.datasetName;
+      const metadataJSON = JSON.stringify(mappingConfigExport);
+      let fileName = "KomMonitor-Import-Mapping-Konfiguration_Export";
+
+      if (name) {
+        fileName += "-" + name;
+      }
+
+      fileName += ".json";
+      this.downloadFile(metadataJSON, fileName);
+    });
+  }
+
+  // File handling methods
+  onMetadataFileSelected(event: any): void {
+    const file = event.target.files[0];
+    if (file) {
+      this.parseMetadataFromFile(file);
+    }
+  }
+
+  onMappingConfigFileSelected(event: any): void {
+    const file = event.target.files[0];
+    if (file) {
+      this.parseMappingConfigFromFile(file);
+    }
+  }
+
+  private parseMetadataFromFile(file: File): void {
+    const fileReader = new FileReader();
+
+    fileReader.onload = (event: any) => {
+      try {
+        this.parseFromMetadataFile(event);
+      } catch (error) {
+        console.error(error);
+        console.error("Uploaded Metadata File cannot be parsed.");
+        this.georesourceMetadataImportError = "Uploaded Metadata File cannot be parsed correctly";
+        this.showMetadataErrorAlert();
+      }
+    };
+
+    fileReader.readAsText(file);
+  }
+
+  private parseMappingConfigFromFile(file: File): void {
+    const fileReader = new FileReader();
+
+    fileReader.onload = (event: any) => {
+      try {
+        this.parseFromMappingConfigFile(event);
+      } catch (error) {
+        console.error(error);
+        console.error("Uploaded MappingConfig File cannot be parsed.");
+        this.georesourceMappingConfigImportError = "Uploaded MappingConfig File cannot be parsed correctly";
+        this.showMappingConfigErrorAlert();
+      }
+    };
+
+    fileReader.readAsText(file);
+  }
+
+  private parseFromMetadataFile(event: any): void {
+    this.metadataImportSettings = JSON.parse(event.target.result);
+
+    if (!this.metadataImportSettings.metadata) {
+      console.error("uploaded Metadata File cannot be parsed - wrong structure.");
+      this.georesourceMetadataImportError = "Struktur der Datei stimmt nicht mit erwartetem Muster überein.";
+      this.showMetadataErrorAlert();
+      return;
+    }
+
+    this.metadata = {};
+    this.metadata.note = this.metadataImportSettings.metadata.note;
+    this.metadata.literature = this.metadataImportSettings.metadata.literature;
+    
+    this.updateIntervalOptions.forEach((option: any) => {
+      if (option.apiName === this.metadataImportSettings.metadata.updateInterval) {
+        this.metadata.updateInterval = option;
+      }
+    });
+    
+    this.metadata.sridEPSG = this.metadataImportSettings.metadata.sridEPSG;
+    this.metadata.datasource = this.metadataImportSettings.metadata.datasource;
+    this.metadata.contact = this.metadataImportSettings.metadata.contact;
+    this.metadata.lastUpdate = this.metadataImportSettings.metadata.lastUpdate;
+    this.metadata.description = this.metadataImportSettings.metadata.description;
+    this.metadata.databasis = this.metadataImportSettings.metadata.databasis;
+
+    this.datasetName = this.metadataImportSettings.datasetName;
+
+    this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+      'georesourceAddRoleManagementTable', 
+      this.roleManagementTableOptions, 
+      this.kommonitorDataExchangeService.accessControl, 
+      this.metadataImportSettings.allowedRoles
+    );
+
+    // georesource specific properties
+    this.isPOI = this.metadataImportSettings.isPOI;
+    this.isLOI = this.metadataImportSettings.isLOI;
+    this.isAOI = this.metadataImportSettings.isAOI;
+    
+    if (this.metadataImportSettings.isPOI) {
+      this.georesourceType = "poi";
+    } else if (this.metadataImportSettings.isLOI) {
+      this.georesourceType = "loi";
+    } else {
+      this.georesourceType = "aoi";
+    }
+    
+    this.availablePoiMarkerColors.forEach((option: any) => {
+      if (option.colorName === this.metadataImportSettings.poiMarkerColor) {
+        this.selectedPoiMarkerColor = option;
+      }
+      if (option.colorName === this.metadataImportSettings.poiSymbolColor) {
+        this.selectedPoiSymbolColor = option;
+      }
+    });
+    
+    this.availableLoiDashArrayObjects.forEach((option: any) => {
+      if (option.dashArrayValue === this.metadataImportSettings.loiDashArrayString) {
+        this.selectedLoiDashArrayObject = option;
+        this.onChangeLoiDashArray(this.selectedLoiDashArrayObject);
+      }
+    });
+    
+    this.loiColor = this.metadataImportSettings.loiColor;
+    this.loiWidth = this.metadataImportSettings.loiWidth;
+    this.aoiColor = this.metadataImportSettings.aoiColor;
+    this.selectedPoiIconName = this.metadataImportSettings.poiSymbolBootstrap3Name;
+
+    const topicHierarchy = this.kommonitorDataExchangeService.getTopicHierarchyForTopicId(this.metadataImportSettings.topicReference);
+
+    if (topicHierarchy && topicHierarchy[0]) {
+      this.georesourceTopic_mainTopic = topicHierarchy[0];
+    }
+    if (topicHierarchy && topicHierarchy[1]) {
+      this.georesourceTopic_subTopic = topicHierarchy[1];
+    }
+    if (topicHierarchy && topicHierarchy[2]) {
+      this.georesourceTopic_subsubTopic = topicHierarchy[2];
+    }
+    if (topicHierarchy && topicHierarchy[3]) {
+      this.georesourceTopic_subsubsubTopic = topicHierarchy[3];
+    }
+  }
+
+  private parseFromMappingConfigFile(event: any): void {
+    this.mappingConfigImportSettings = JSON.parse(event.target.result);
+
+    if (!this.mappingConfigImportSettings.converter || !this.mappingConfigImportSettings.dataSource || !this.mappingConfigImportSettings.propertyMapping) {
+      console.error("uploaded MappingConfig File cannot be parsed - wrong structure.");
+      this.georesourceMappingConfigImportError = "Struktur der Datei stimmt nicht mit erwartetem Muster überein.";
+      this.showMappingConfigErrorAlert();
+      return;
+    }
+
+    this.converter = undefined;
+    for (const converter of this.kommonitorImporterHelperService.availableConverters) {
+      if (converter.name === this.mappingConfigImportSettings.converter.name) {
+        this.converter = converter;
+        break;
+      }
+    }
+
+    this.schema = '';
+    if (this.converter && this.converter.schemas && this.mappingConfigImportSettings.converter.schema) {
+      for (const schema of this.converter.schemas) {
+        if (schema === this.mappingConfigImportSettings.converter.schema) {
+          this.schema = schema;
+        }
+      }
+    }
+
+    this.mimeType = '';
+    if (this.converter && this.converter.mimeTypes && this.mappingConfigImportSettings.converter.mimeType) {
+      for (const mimeType of this.converter.mimeTypes) {
+        if (mimeType === this.mappingConfigImportSettings.converter.mimeType) {
+          this.mimeType = mimeType;
+        }
+      }
+    }
+
+    this.datasourceType = undefined;
+    for (const datasourceType of this.kommonitorImporterHelperService.availableDatasourceTypes) {
+      if (datasourceType.type === this.mappingConfigImportSettings.dataSource.type) {
+        this.datasourceType = datasourceType;
+        break;
+      }
+    }
+
+    // converter parameters
+    if (this.converter) {
+      for (const convParameter of this.mappingConfigImportSettings.converter.parameters) {
+        const element = document.getElementById("converterParameter_georesourceAdd_" + convParameter.name) as HTMLInputElement;
+        if (element) {
+          element.value = convParameter.value;
+        }
+      }
+    }
+
+    // datasourceTypes parameters
+    if (this.datasourceType) {
+      for (const dsParameter of this.mappingConfigImportSettings.dataSource.parameters) {
+        const element = document.getElementById("datasourceTypeParameter_georesourceAdd_" + dsParameter.name) as HTMLInputElement;
+        if (element) {
+          element.value = dsParameter.value;
+        }
+      }
+    }
+
+    // property Mapping
+    this.georesourceDataSourceNameProperty = this.mappingConfigImportSettings.propertyMapping.nameProperty;
+    this.georesourceDataSourceIdProperty = this.mappingConfigImportSettings.propertyMapping.identifierProperty;
+    this.validityStartDate_perFeature = this.mappingConfigImportSettings.propertyMapping.validStartDateProperty;
+    this.validityEndDate_perFeature = this.mappingConfigImportSettings.propertyMapping.validEndDateProperty;
+    this.keepAttributes = this.mappingConfigImportSettings.propertyMapping.keepAttributes;
+    this.keepMissingValues = this.mappingConfigImportSettings.propertyMapping.keepMissingOrNullValueAttributes;
+    this.attributeMappings_adminView = [];
+
+    for (const attributeMapping of this.mappingConfigImportSettings.propertyMapping.attributes) {
+      const tmpEntry: any = {
+        "sourceName": attributeMapping.name,
+        "destinationName": attributeMapping.mappingName
+      };
+
+      for (const dataType of this.kommonitorImporterHelperService.attributeMapping_attributeTypes) {
+        if (dataType.apiName === attributeMapping.type) {
+          tmpEntry.dataType = dataType;
+        }
+      }
+
+      this.attributeMappings_adminView.push(tmpEntry);
+    }
+
+    if (this.mappingConfigImportSettings.periodOfValidity) {
+      this.periodOfValidity = {
+        startDate: this.mappingConfigImportSettings.periodOfValidity.startDate,
+        endDate: this.mappingConfigImportSettings.periodOfValidity.endDate
+      };
+      this.periodOfValidityInvalid = false;
+    }
+  }
+
+  private downloadFile(content: string, fileName: string): void {
+    const blob = new Blob([content], { type: "application/json" });
+    const data = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.download = fileName;
+    a.href = data;
+    a.textContent = "JSON";
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    a.click();
+
+    a.remove();
+  }
+
+  // Alert methods
+  hideSuccessAlert(): void {
+    this.successMessage = '';
+  }
+
+  hideErrorAlert(): void {
+    this.errorMessage = '';
+  }
+
+  hideMetadataErrorAlert(): void {
+    this.georesourceMetadataImportError = '';
+  }
+
+  hideMappingConfigErrorAlert(): void {
+    this.georesourceMappingConfigImportError = '';
+  }
+
+  private showMetadataErrorAlert(): void {
+    // Implementation for showing metadata error alert
+  }
+
+  private showMappingConfigErrorAlert(): void {
+    // Implementation for showing mapping config error alert
+  }
+
+  // Form reset
+  resetGeoresourceAddForm(): void {
+    this.importerErrors = [];
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+
+    this.datasetName = '';
+    this.datasetNameInvalid = false;
+
+    this.metadata = {
+      note: '',
+      literature: '',
+      updateInterval: null,
+      sridEPSG: 4326,
+      datasource: '',
+      databasis: '',
+      contact: '',
+      lastUpdate: '',
+      description: ''
+    };
+
+    this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+      'georesourceAddRoleManagementTable', 
+      null, 
+      this.kommonitorDataExchangeService.accessControl, 
+      null
+    );
+
+    this.georesourceTopic_mainTopic = null;
+    this.georesourceTopic_subTopic = null;
+    this.georesourceTopic_subsubTopic = null;
+    this.georesourceTopic_subsubsubTopic = null;
+
+    this.georesourceType = 'poi';
+    this.isPOI = true;
+    this.isLOI = false;
+    this.isAOI = false;
+    this.selectedPoiMarkerColor = this.availablePoiMarkerColors[0] || null;
+    this.selectedPoiSymbolColor = this.availablePoiMarkerColors[1] || null;
+    this.selectedLoiDashArrayObject = this.availableLoiDashArrayObjects[0] || null;
+    this.loiColor = '#bf3d2c';
+    this.loiWidth = 3;
+    this.aoiColor = '#bf3d2c';
+    this.selectedPoiIconName = 'home';
+    this.selectedPoiMarkerStyle = 'symbol';
+    this.poiMarkerText = '';
+    this.poiMarkerTextInvalid = false;
+
+    this.periodOfValidity = {
+      startDate: '',
+      endDate: ''
+    };
+    this.periodOfValidityInvalid = false;
+
+    this.geoJsonString = null;
+    this.georesource_asGeoJson = null;
+
+    this.georesourceDataSourceInputInvalidReason = '';
+    this.georesourceDataSourceInputInvalid = false;
+
+    this.georesourceDataSourceIdProperty = '';
+    this.georesourceDataSourceNameProperty = '';
+
+    this.converter = null;
+    this.schema = '';
+    this.mimeType = '';
+    this.datasourceType = null;
+
+    this.converterDefinition = null;
+    this.datasourceTypeDefinition = null;
+    this.propertyMappingDefinition = null;
+    this.postBody_georesources = null;
+
+    this.validityEndDate_perFeature = '';
+    this.validityStartDate_perFeature = '';
+
+    this.attributeMapping_sourceAttributeName = '';
+    this.attributeMapping_destinationAttributeName = '';
+    this.attributeMapping_data = null;
+    this.attributeMapping_attributeType = this.kommonitorImporterHelperService.attributeMapping_attributeTypes[0];
+    this.attributeMappings_adminView = [];
+    this.keepAttributes = true;
+    this.keepMissingValues = true;
+
+    this.ownerOrganization = '';
+    this.ownerOrgFilter = '';
+    this.isPublic = false;
+
+    this.metadataImportSettings = null;
+    this.mappingConfigImportSettings = null;
+    this.georesourceMetadataImportError = '';
+    this.georesourceMappingConfigImportError = '';
+  }
+
+  // Build post body for API request
+  buildPostBody_georesources(): any {
+    const postBody: any = {
+      "geoJsonString": "", // will be set by importer
+      "allowedRoles": [],
+      "metadata": {
+        "note": this.metadata.note,
+        "literature": this.metadata.literature,
+        "updateInterval": this.metadata.updateInterval?.apiName,
+        "sridEPSG": this.metadata.sridEPSG || 4326,
+        "datasource": this.metadata.datasource,
+        "contact": this.metadata.contact,
+        "lastUpdate": this.metadata.lastUpdate,
+        "description": this.metadata.description,
+        "databasis": this.metadata.databasis
+      },
+      "jsonSchema": null,
+      "datasetName": this.datasetName,
+      "periodOfValidity": {
+        "endDate": this.periodOfValidity.endDate,
+        "startDate": this.periodOfValidity.startDate
+      },
+      "isAOI": this.isAOI,
+      "isLOI": this.isLOI,
+      "isPOI": this.isPOI,
+      "topicReference": null,
+      "ownerId": this.ownerOrganization,
+      "isPublic": this.isPublic
+    };
+
+    if (this.roleManagementTableOptions) {
+      const roleIds = this.kommonitorDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
+      if (roleIds && Array.isArray(roleIds)) {
+        for (const roleId of roleIds) {
+          postBody.allowedRoles.push(roleId);
+        }
+      }
+    }
+
+    if (this.isPOI) {
+      postBody["poiSymbolBootstrap3Name"] = this.selectedPoiIconName;
+      postBody["poiSymbolColor"] = (this.selectedPoiSymbolColor as any)?.colorName || '';
+      postBody["poiMarkerColor"] = (this.selectedPoiMarkerColor as any)?.colorName || '';
+      postBody["poiMarkerStyle"] = this.selectedPoiMarkerStyle;
+      postBody["poiMarkerText"] = this.poiMarkerText;
+
+      postBody["loiDashArrayString"] = null;
+      postBody["loiColor"] = null;
+      postBody["loiWidth"] = 3;
+
+      postBody["aoiColor"] = null;
+    } else if (this.isLOI) {
+      postBody["poiSymbolBootstrap3Name"] = null;
+      postBody["poiSymbolColor"] = null;
+      postBody["poiMarkerColor"] = null;
+      postBody["poiMarkerStyle"] = null;
+      postBody["poiMarkerText"] = null;
+
+      postBody["loiDashArrayString"] = (this.selectedLoiDashArrayObject as any)?.dashArrayValue || '';
+      postBody["loiColor"] = this.loiColor;
+      postBody["loiWidth"] = this.loiWidth;
+
+      postBody["aoiColor"] = null;
+    } else if (this.isAOI) {
+      postBody["poiSymbolBootstrap3Name"] = null;
+      postBody["poiSymbolColor"] = null;
+      postBody["poiMarkerColor"] = null;
+      postBody["poiMarkerStyle"] = null;
+      postBody["poiMarkerText"] = null;
+
+      postBody["loiDashArrayString"] = null;
+      postBody["loiColor"] = null;
+      postBody["loiWidth"] = 3;
+
+      postBody["aoiColor"] = this.aoiColor;
+    }
+
+    // TOPIC REFERENCE
+    if (this.georesourceTopic_subsubsubTopic) {
+      postBody.topicReference = this.georesourceTopic_subsubsubTopic.topicId;
+    } else if (this.georesourceTopic_subsubTopic) {
+      postBody.topicReference = this.georesourceTopic_subsubTopic.topicId;
+    } else if (this.georesourceTopic_subTopic) {
+      postBody.topicReference = this.georesourceTopic_subTopic.topicId;
+    } else if (this.georesourceTopic_mainTopic) {
+      postBody.topicReference = this.georesourceTopic_mainTopic.topicId;
+    } else {
+      postBody.topicReference = "";
+    }
+
+    return postBody;
+  }
+
+  // Main add method
+  async addGeoresource(): Promise {
+    this.loadingData = true;
+    this.importerErrors = [];
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+
+    try {
+      // Build importer objects
+      const allDataSpecified = await this.buildImporterObjects();
+
+      if (!allDataSpecified) {
+        // Validation failed
+        this.loadingData = false;
+        return;
+      }
+
+      // Perform dry run
+      const newGeoresourceResponse_dryRun = await this.kommonitorImporterHelperService.registerNewGeoresource(
+        this.converterDefinition,
+        this.datasourceTypeDefinition,
+        this.propertyMappingDefinition,
+        this.postBody_georesources,
+        true
+      );
+
+      if (!this.kommonitorImporterHelperService.importerResponseContainsErrors(newGeoresourceResponse_dryRun)) {
+        // all good, really execute the request to import data against data management API
+        const newGeoresourceResponse = await this.kommonitorImporterHelperService.registerNewGeoresource(
+          this.converterDefinition,
+          this.datasourceTypeDefinition,
+          this.propertyMappingDefinition,
+          this.postBody_georesources,
+          false
+        );
+
+        // Broadcast refresh events
+        this.broadcastService.broadcast('refreshGeoresourceOverviewTable', { action: 'add', id: this.kommonitorImporterHelperService.getIdFromImporterResponse(newGeoresourceResponse) });
+        
+        // refresh all admin dashboard diagrams due to modified metadata
+        setTimeout(() => {
+          this.broadcastService.broadcast('refreshAdminDashboardDiagrams');
+        }, 500);
+
+        this.successMessagePart = this.postBody_georesources.datasetName;
+        this.importedFeatures = this.kommonitorImporterHelperService.getImportedFeaturesFromImporterResponse(newGeoresourceResponse);
+
+        this.successMessage = 'Georessource erfolgreich registriert';
+        this.activeModal.close(true);
+      } else {
+        // errors occurred
+        this.errorMessagePart = "Einige der zu importierenden Features des Datensatzes weisen kritische Fehler auf";
+        this.importerErrors = this.kommonitorImporterHelperService.getErrorsFromImporterResponse(newGeoresourceResponse_dryRun);
+        this.errorMessage = 'Validierung fehlgeschlagen';
+      }
+    } catch (error: any) {
+      if (error.data) {
+        this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error.data);
+      } else {
+        this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+      }
+
+      this.errorMessage = 'Fehler beim Registrieren der Georessource';
+      console.error('Error adding georesource:', error);
+    } finally {
+      this.loadingData = false;
+    }
+  }
+
+  private async buildImporterObjects(): Promise {
+    this.converterDefinition = this.buildConverterDefinition();
+    this.datasourceTypeDefinition = await this.buildDatasourceTypeDefinition();
+    this.propertyMappingDefinition = this.buildPropertyMappingDefinition();
+    this.postBody_georesources = this.buildPostBody_georesources();
+
+    if (!this.converterDefinition || !this.datasourceTypeDefinition || !this.propertyMappingDefinition || !this.postBody_georesources) {
+      return false;
+    }
+
+    return true;
+  }
+
+  private buildConverterDefinition(): any {
+    return this.kommonitorImporterHelperService.buildConverterDefinition(
+      this.converter, 
+      "converterParameter_georesourceAdd_", 
+      this.schema, 
+      this.mimeType
+    );
+  }
+
+  private async buildDatasourceTypeDefinition(): Promise {
+    try {
+      return await this.kommonitorImporterHelperService.buildDatasourceTypeDefinition(
+        this.datasourceType, 
+        'datasourceTypeParameter_georesourceAdd_', 
+        'georesourceDataSourceInput_add'
+      );
+    } catch (error: any) {
+      if (error.data) {
+        this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error.data);
+      } else {
+        this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+      }
+
+      this.loadingData = false;
+      return null;
+    }
+  }
+
+  private buildPropertyMappingDefinition(): any {
+    return this.kommonitorImporterHelperService.buildPropertyMapping_spatialResource(
+      this.georesourceDataSourceNameProperty, 
+      this.georesourceDataSourceIdProperty, 
+      this.validityStartDate_perFeature, 
+      this.validityEndDate_perFeature, 
+      undefined, 
+      this.keepAttributes, 
+      this.keepMissingValues, 
+      this.attributeMappings_adminView
+    );
+  }
+
+  // Modal control methods
+  cancel(): void {
+    this.activeModal.dismiss();
+  }
+} 
\ No newline at end of file

From 6ffdd12942c51f73c354ee8ec7df0119be3fe23d Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Mon, 21 Jul 2025 19:04:46 +0530
Subject: [PATCH 026/120] migrate geo resouce batch update modal

---
 app/app.module.ts                             |   9 +-
 ...min-georesources-management.component.html |   2 +-
 ...admin-georesources-management.component.ts |  12 +
 ...oresource-batch-update-modal.component.css | 155 +++++
 ...resource-batch-update-modal.component.html | 607 ++++++++++++++++++
 ...eoresource-batch-update-modal.component.ts | 288 +++++++++
 6 files changed, 1071 insertions(+), 2 deletions(-)
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component.css
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component.html
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index 6d4c30084..5baaad74d 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -93,6 +93,7 @@ import { IndicatorDeleteModalComponent } from './components/ngComponents/admin/a
 import { IndicatorBatchUpdateModalComponent } from './components/ngComponents/admin/adminIndicatorsManagement/indicatorBatchUpdateModal/indicator-batch-update-modal.component';
 import { AdminGeoresourcesManagementComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component';
 import { GeoresourceAddModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component';
+import { GeoresourceBatchUpdateModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component';
 
 
 // currently the AngularJS routing is still used as part of kommonitorClient module
@@ -195,7 +196,8 @@ declare var MathJax;
     IndicatorDeleteModalComponent,
     IndicatorBatchUpdateModalComponent,
     AdminGeoresourcesManagementComponent,
-    GeoresourceAddModalComponent
+    GeoresourceAddModalComponent,
+    GeoresourceBatchUpdateModalComponent
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
@@ -331,6 +333,11 @@ export class AppModule implements DoBootstrap {
         component: GeoresourceAddModalComponent
       }) as angular.IDirectiveFactory);
 
+    angular.module('kommonitorAdmin')
+      .directive('georesourceBatchUpdateModalNew', downgradeComponent({
+        component: GeoresourceBatchUpdateModalComponent
+      }) as angular.IDirectiveFactory);
+
     console.log("registered downgraded Angular components for AngularJS usage");
   }
 
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html
index b0e582fd1..41fc46e93 100644
--- a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.html
@@ -25,7 +25,7 @@ 

       

       
       
       					  		
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
index 4d7b1dd38..ea7ca24af 100644
--- a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
@@ -8,6 +8,7 @@ import { KommonitorGeoresourceCacheHelperService } from '../../../../services/ad
 import { KommonitorGeoresourceDataGridHelperService } from '../../../../services/adminGeoresourceUnit/kommonitor-data-grid-helper.service';
 import { AgGridAngular } from 'ag-grid-angular';
 import { GeoresourceAddModalComponent } from './georesourceAddModal/georesource-add-modal.component';
+import { GeoresourceBatchUpdateModalComponent } from './georesourceBatchUpdateModal/georesource-batch-update-modal.component';
 
 // Declare jQuery for AdminLTE
 declare const $: any;
@@ -262,6 +263,17 @@ export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy,
       animation: false
     });
     
+  }
+
+  onClickBatchUpdateGeoresource(): void {
+    const modalRef = this.modalService.open(GeoresourceBatchUpdateModalComponent, {
+      size: 'lg',
+      backdrop: 'static',
+      keyboard: false,
+      container: 'body',
+      animation: false
+    });
+    
     modalRef.result.then((result) => {
       if (result) {
         this.initializeOrRefreshOverviewTable();
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component.css b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component.css
new file mode 100644
index 000000000..d16e59c82
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component.css
@@ -0,0 +1,155 @@
+/* Batch Update Modal Styles */
+.batch-list-table-wrapper {
+  max-height: 60vh;
+  overflow: auto;
+}
+
+.batch-list-table {
+  font-size: 11px;
+  min-width: 100%;
+}
+
+.batch-list-table-sticky-column {
+  position: sticky;
+  background: white;
+  z-index: 10;
+}
+
+.batch-list-table-sticky-column-1 {
+  left: 0;
+  min-width: 40px;
+  width: 40px;
+}
+
+.batch-list-table-sticky-column-2 {
+  left: 40px;
+  min-width: 200px;
+  width: 200px;
+}
+
+.batch-list-table-sticky-column-header {
+  top: 0;
+  z-index: 11;
+}
+
+.batch-list-table-sticky-column-footer {
+  bottom: 0;
+  z-index: 11;
+}
+
+.batch-list-table-name-field {
+  min-width: 180px;
+}
+
+.batch-list-odd-rows {
+  background-color: #f9f9f9;
+}
+
+.batch-list-even-rows {
+  background-color: #ffffff;
+}
+
+/* Switch styles for toggle buttons */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switchslider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.switchslider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .switchslider {
+  background-color: #2196F3;
+}
+
+input:focus + .switchslider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .switchslider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+.switchslider.round {
+  border-radius: 34px;
+}
+
+.switchslider.round:before {
+  border-radius: 50%;
+}
+
+/* Loading overlay */
+.loading-overlay-admin-panel {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  font-size: 2em;
+  color: #337ab7;
+}
+
+.loading-overlay-admin-panel.ng-hide {
+  display: none;
+}
+
+.icon-spin {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Form adjustments */
+.form-control {
+  font-size: 11px;
+}
+
+.btn-sm {
+  font-size: 11px;
+}
+
+/* Table input fields */
+.georesourceMappingTableInputField,
+.georesourceDataSourceFileInputField {
+  font-size: 11px;
+}
+
+/* Input group date picker styling */
+.input-group-addon {
+  padding: 6px 8px;
+  font-size: 11px;
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component.html b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component.html
new file mode 100644
index 000000000..d155ff0b9
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component.html
@@ -0,0 +1,607 @@
+

+  
+  
Batch-Update

+

+
+

+  

+    

+      
+    

+  

+
+  

+    

+      
Diese Funktion ermöglicht es, die Mapping-Parameter mehrerer Georessoucen gleichzeitig zu aktualisieren.

+      
* = Pflichtfeld

+    

+  

+  
+  

+    

+      

+        

+          
+            
+              
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+              
+            
+            
+              
+
+                
+                
+
+                
+                
+                
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+                
+                
+
+              
+            
+
+            
+              
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+                
+              
+            
+          

+                  
+                Name*MappingtabelleGültigkeitszeitraum von*Gültigkeitszeitraum bisGeodaten-Quellformat*Quellformat*Encoding*CRS*Hausnummer_Spaltenname*Strasse_Spaltenname*Adresse_Spaltenname*Strasse_Hausnummer_Spaltenname*X_Koordinatenspalte_Rechtswert*Y_Koordinatenspalte_Hochwert*Postleitzahl_SpaltennameStadt_SpaltennameSchema*NAMESPACESCHEMA_LOCATIONTrennzeichenDatenquelltyp*Datei*URL*Payload*ID Attributname*NAME Attributname*Lebenszeit-Beginn AttributnameLebenszeit-Ende AttributnameMappingtabelle speichern

+                  
+                
+                  
+                
+                  
+                
+                  

+                    

+                      
+                    

+                    
+                  

+                		
+                  

+                    

+                      
+                    

+                    
+                  

+                		
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                
+                  
+                

+                  
+                Name*MappingtabelleGültigkeitszeitraum von*Gültigkeitszeitraum bisGeodaten-Quellformat*Quellformat*CRS*Hausnummer_Spaltenname*Strasse_Spaltenname*Adresse_Spaltenname*Strasse_Hausnummer_Spaltenname*X_Koordinatenspalte_Rechtswert*Y_Koordinatenspalte_Hochwert*Postleitzahl_SpaltennameStadt_SpaltennameSchema*NAMESPACESCHEMA_LOCATIONTrennzeichenDatenquelltyp*Datei*URL*Payload*ID Attributname*NAME Attributname*Lebenszeit-Beginn AttributnameLebenszeit-Ende AttributnameMappingtabelle speichern

+        

+
+        
+        
+      

+    

+  

+  
+  

+    

+      

+        
+        

+          

+            Diese Funktion ermöglicht es, einen Standardwert für alle Zeilen einer variablen Tabellenspalte zu setzen.

+            Sofern die Checkbox aktiviert ist, wird der Wert für alle Zeilen gesetzt.

+            Ist sie deaktiviert, werden nur leere Tabellenfelder überschrieben, sodass bereits eingetragene Werte erhalten bleiben.

+            Gesperrte (ausgegraute) Felder werden ignoriert.
+          

+        

+        

+          

+            
+            
+            
+
+            
+            
+
+            
+            

+              

+                
+              

+              
+            

+
+            
+            

+              

+                
+              

+              
+            

+
+            
+            
+
+            
+            
+
+            
+            
+
+            
+            
+
+            
+            
+
+            
+            
+
+            
+            
+
+            
+            
+
+            
+            
+
+            
+            
+
+            
+            
+
+            
+            
+
+            
+            
+            
+            
+            
+            
+            
+            
+
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            
+          

+        

+        

+          

+            
+            
+          

+          

+            
+          

+        

+      

+    

+  

+  
+  

+    

+      

+        
+        

+        
+        

+          
Angabe, ob fehlende Attribute oder leere Attributwerte (NULL-Werte) übernommen werden. Bei deaktivierter Option 
+            wird bei einem solchen Fall ein Fehler geworfen.

+        

+      

+    

+  

+

+
+

+  
+  
+
+  
+
+  
+
+  
+
+  
+  
+  
+
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component.ts
new file mode 100644
index 000000000..357572aea
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component.ts
@@ -0,0 +1,288 @@
+import { Component, OnInit, Inject, ViewChild, ElementRef, OnDestroy } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { HttpClient } from '@angular/common/http';
+import { Subscription } from 'rxjs';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'georesource-batch-update-modal-new',
+  templateUrl: './georesource-batch-update-modal.component.html',
+  styleUrls: ['./georesource-batch-update-modal.component.css']
+})
+export class GeoresourceBatchUpdateModalComponent implements OnInit, OnDestroy {
+  @ViewChild('batchListFile', { static: false }) batchListFile!: ElementRef;
+
+  // Component state
+  loadingData = false;
+  isFirstStart = true;
+  lastUpdateResponseObj: any = undefined;
+  keepMissingValues = true;
+
+  // Batch list
+  batchList: any[] = [];
+  allRowsSelected = false;
+
+  // Default value function
+  colDefaultFunctionSelectedColumn: string = '';
+  colDefaultFunctionNewValue: any = undefined;
+  colDefaultFunctionAllRowsChb = false;
+
+  // Subscriptions
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
+    @Inject('kommonitorImporterHelperService') public kommonitorImporterHelperService: any,
+    @Inject('kommonitorBatchUpdateHelperService') public kommonitorBatchUpdateHelperService: any,
+    private broadcastService: BroadcastService,
+    private http: HttpClient
+  ) {}
+
+  ngOnInit(): void {
+    this.initialize();
+    this.setupEventListeners();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  private initialize(): void {
+    if (this.isFirstStart) {
+      this.kommonitorBatchUpdateHelperService.addNewRowToBatchList('georesource', this.batchList);
+      this.isFirstStart = false;
+    }
+
+    // Initialize date pickers
+    setTimeout(() => {
+      this.initializeDatePickers();
+    });
+  }
+
+  private initializeDatePickers(): void {
+    try {
+      // Initialize default column date pickers
+      const startDatePicker = document.getElementById('georesourceDefaultColumnDatePickerStart');
+      const endDatePicker = document.getElementById('georesourceDefaultColumnDatePickerEnd');
+      
+      if (startDatePicker && (window as any).$) {
+        (window as any).$('#georesourceDefaultColumnDatePickerStart').datepicker(this.kommonitorDataExchangeService.datePickerOptions);
+      }
+      if (endDatePicker && (window as any).$) {
+        (window as any).$('#georesourceDefaultColumnDatePickerEnd').datepicker(this.kommonitorDataExchangeService.datePickerOptions);
+      }
+
+      // Initialize row date pickers
+      this.kommonitorBatchUpdateHelperService.initializeGeoresourceDatepickerFields(this.batchList);
+    } catch (error) {
+      console.warn('Date picker initialization failed:', error);
+    }
+  }
+
+  private setupEventListeners(): void {
+    // Listen for georesource overview table refresh
+    const refreshSub = this.broadcastService.currentBroadcastMsg.subscribe((data: any) => {
+      if (data.msg === 'refreshGeoresourceOverviewTableCompleted') {
+        this.kommonitorBatchUpdateHelperService.refreshNameColumn('georesource', this.batchList);
+      }
+    });
+    this.subscriptions.push(refreshSub);
+
+    // Listen for batch update completion
+    const batchUpdateSub = this.broadcastService.currentBroadcastMsg.subscribe((data: any) => {
+      if (data.msg === 'batchUpdateCompleted' && data.resourceType === 'georesource') {
+        this.lastUpdateResponseObj = data;
+      }
+    });
+    this.subscriptions.push(batchUpdateSub);
+
+    // Listen for batch list parsing
+    const batchListSub = this.broadcastService.currentBroadcastMsg.subscribe((data: any) => {
+      if (data.msg === 'georesourceBatchListParsed') {
+        this.onBatchListParsed(data.newValue);
+      }
+    });
+    this.subscriptions.push(batchListSub);
+  }
+
+  // File handling methods
+  onMappingTableFileSelected(event: any, index: number): void {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.addEventListener('load', (event: any) => {
+        this.kommonitorBatchUpdateHelperService.onMappingTableSelected('georesource', event, index, file, this.batchList);
+      });
+      reader.readAsText(file);
+    }
+  }
+
+  onDataSourceFileSelected(event: any, index: number): void {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.addEventListener('load', () => {
+        this.kommonitorBatchUpdateHelperService.onDataSourceFileSelected(file, index, this.batchList);
+      });
+      reader.readAsText(file);
+    }
+  }
+
+  onBatchListFileSelected(event: any): void {
+    const file = event.target.files[0];
+    if (file) {
+      this.kommonitorBatchUpdateHelperService.parseBatchListFromFile('georesource', file, this.batchList);
+    }
+  }
+
+  private onBatchListParsed(newBatchList: any[]): void {
+    setTimeout(() => {
+      // Remove all rows
+      for (let i = 0; i < this.batchList.length; i++) {
+        this.batchList[i].isSelected = true;
+      }
+      this.kommonitorBatchUpdateHelperService.deleteSelectedRowsFromBatchList(this.batchList, this.allRowsSelected);
+
+      // Add new rows
+      for (let i = 0; i < newBatchList.length; i++) {
+        this.kommonitorBatchUpdateHelperService.addNewRowToBatchList('georesource', this.batchList);
+        const row = this.batchList[i];
+
+        // isSelected
+        row.isSelected = newBatchList[i].isSelected;
+
+        // name - convert georesourceId to georesource object
+        const georesourceId = newBatchList[i].name;
+        const georesourceObj = this.kommonitorDataExchangeService.getGeoresourceMetadataById(georesourceId);
+        row.name = georesourceObj;
+
+        // mappingTableName
+        row.mappingTableName = newBatchList[i].mappingTableName;
+        // mappingObj
+        row.mappingObj = newBatchList[i].mappingObj;
+        
+        // converter parameters to properties
+        if (row.mappingObj.converter) {
+          row.mappingObj.converter = this.kommonitorBatchUpdateHelperService.converterParametersArrayToProperties(row.mappingObj.converter);
+        }
+        
+        // dataSource parameters to properties
+        if (row.mappingObj.dataSource) {
+          row.mappingObj.dataSource = this.kommonitorBatchUpdateHelperService.dataSourceParametersArrayToProperty(row.mappingObj.dataSource);
+        }
+        
+        // set selectedConverter
+        if (newBatchList[i].mappingObj.converter && newBatchList[i].mappingObj.converter.hasOwnProperty('name')) {
+          row.selectedConverter = this.kommonitorBatchUpdateHelperService.getConverterObjectByName(newBatchList[i].mappingObj.converter.name);
+        }
+        
+        // set selectedDatasourceType
+        if (newBatchList[i].mappingObj.dataSource && newBatchList[i].mappingObj.dataSource.hasOwnProperty('type')) {
+          row.selectedDatasourceType = this.kommonitorBatchUpdateHelperService.getDatasourceTypeObjectByType(newBatchList[i].mappingObj.dataSource.type);
+        }
+      }
+
+      this.kommonitorBatchUpdateHelperService.initializeGeoresourceDatepickerFields(this.batchList);
+      this.kommonitorBatchUpdateHelperService.resizeNameColumnDropdowns(null);
+    });
+  }
+
+  // Batch list operations
+  addNewRow(): void {
+    this.kommonitorBatchUpdateHelperService.addNewRowToBatchList('georesource', this.batchList);
+  }
+
+  deleteSelectedRows(): void {
+    this.kommonitorBatchUpdateHelperService.deleteSelectedRowsFromBatchList(this.batchList, this.allRowsSelected);
+  }
+
+  onSelectAllRows(): void {
+    this.kommonitorBatchUpdateHelperService.onChangeSelectAllRows(this.allRowsSelected, this.batchList);
+  }
+
+  onGeoresourceSelected(georesource: any, index: number): void {
+    this.kommonitorBatchUpdateHelperService.resizeNameColumnDropdowns(georesource);
+  }
+
+  // Default value function
+  onChangeDefaultColumn(): void {
+    this.colDefaultFunctionNewValue = undefined;
+  }
+
+  saveDefaultValue(): void {
+    this.kommonitorBatchUpdateHelperService.onClickSaveColDefaultValue(
+      'georesource',
+      this.colDefaultFunctionSelectedColumn,
+      this.colDefaultFunctionNewValue,
+      this.colDefaultFunctionAllRowsChb,
+      this.batchList
+    );
+  }
+
+  // Import/Export methods
+  loadBatchList(): void {
+    this.batchListFile.nativeElement.click();
+  }
+
+  exportBatchList(): void {
+    this.kommonitorBatchUpdateHelperService.saveBatchListToFile('georesource', this.batchList, true, this.keepMissingValues);
+  }
+
+  saveMappingObjectToFile(event: any): void {
+    this.kommonitorBatchUpdateHelperService.saveMappingObjectToFile('georesource', event, this.batchList);
+  }
+
+  // Batch update execution
+  executeBatchUpdate(): void {
+    this.kommonitorBatchUpdateHelperService.batchUpdate('georesource', this.batchList);
+  }
+
+  canExecuteBatchUpdate(): boolean {
+    return this.kommonitorBatchUpdateHelperService.checkIfNameAndFilesChosenInEachRow('georesource', this.batchList);
+  }
+
+  reopenResultModal(): void {
+    if (this.lastUpdateResponseObj !== undefined) {
+      this.broadcastService.broadcast('reopenBatchUpdateResultModal', this.lastUpdateResponseObj);
+    }
+  }
+
+  resetForm(): void {
+    this.kommonitorBatchUpdateHelperService.resetBatchUpdateForm('georesource', this.batchList);
+  }
+
+  // Helper methods for template
+  checkColumnsToShow_selectedConverter(): string[] {
+    return this.kommonitorBatchUpdateHelperService.checkColumnsToShow_selectedConverter(this.batchList);
+  }
+
+  checkIfSelectedDatasourceTypeIsFile(): boolean {
+    return this.kommonitorBatchUpdateHelperService.checkIfSelectedDatasourceTypeIsFile(this.batchList);
+  }
+
+  checkIfSelectedDatasourceTypeIsHttp(): boolean {
+    return this.kommonitorBatchUpdateHelperService.checkIfSelectedDatasourceTypeIsHttp(this.batchList);
+  }
+
+  checkIfSelectedDatasourceTypeIsInline(): boolean {
+    return this.kommonitorBatchUpdateHelperService.checkIfSelectedDatasourceTypeIsInline(this.batchList);
+  }
+
+  getConverterObjectByName(name: string): any {
+    return this.kommonitorBatchUpdateHelperService.getConverterObjectByName(name);
+  }
+
+  // Filter for georesources
+  filterGeoresources = (georesource: any, searchTerm: string): boolean => {
+    if (!searchTerm) return true;
+    return georesource.datasetName.toLowerCase().includes(searchTerm.toLowerCase());
+  };
+
+  // Modal control
+  cancel(): void {
+    this.activeModal.dismiss();
+  }
+} 
\ No newline at end of file

From a9b30a6d237f3a8f767341ff7200c84eed1ee5b0 Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Mon, 21 Jul 2025 19:25:09 +0530
Subject: [PATCH 027/120] migrate: edit metadata georesource modal

---
 app/app.module.ts                             |   9 +-
 ...admin-georesources-management.component.ts |  22 +-
 ...resource-edit-metadata-modal.component.css | 255 ++++++
 ...esource-edit-metadata-modal.component.html | 450 ++++++++++
 ...oresource-edit-metadata-modal.component.ts | 790 ++++++++++++++++++
 5 files changed, 1523 insertions(+), 3 deletions(-)
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component.css
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component.html
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index 5baaad74d..792e225b2 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -94,6 +94,7 @@ import { IndicatorBatchUpdateModalComponent } from './components/ngComponents/ad
 import { AdminGeoresourcesManagementComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component';
 import { GeoresourceAddModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component';
 import { GeoresourceBatchUpdateModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component';
+import { GeoresourceEditMetadataModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component';
 
 
 // currently the AngularJS routing is still used as part of kommonitorClient module
@@ -197,7 +198,8 @@ declare var MathJax;
     IndicatorBatchUpdateModalComponent,
     AdminGeoresourcesManagementComponent,
     GeoresourceAddModalComponent,
-    GeoresourceBatchUpdateModalComponent
+    GeoresourceBatchUpdateModalComponent,
+    GeoresourceEditMetadataModalComponent
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
@@ -338,6 +340,11 @@ export class AppModule implements DoBootstrap {
         component: GeoresourceBatchUpdateModalComponent
       }) as angular.IDirectiveFactory);
 
+    angular.module('kommonitorAdmin')
+      .directive('georesourceEditMetadataModalNew', downgradeComponent({
+        component: GeoresourceEditMetadataModalComponent
+      }) as angular.IDirectiveFactory);
+
     console.log("registered downgraded Angular components for AngularJS usage");
   }
 
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
index ea7ca24af..fc4d573e8 100644
--- a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
@@ -9,6 +9,7 @@ import { KommonitorGeoresourceDataGridHelperService } from '../../../../services
 import { AgGridAngular } from 'ag-grid-angular';
 import { GeoresourceAddModalComponent } from './georesourceAddModal/georesource-add-modal.component';
 import { GeoresourceBatchUpdateModalComponent } from './georesourceBatchUpdateModal/georesource-batch-update-modal.component';
+import { GeoresourceEditMetadataModalComponent } from './georesourceEditMetadataModal/georesource-edit-metadata-modal.component';
 
 // Declare jQuery for AdminLTE
 declare const $: any;
@@ -284,8 +285,25 @@ export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy,
   }
 
   public onClickEditMetadata(georesourceDataset: any): void {
-    // submit selected georesource to modal controller
-    this.broadcastService.broadcast('onEditGeoresourceMetadata', georesourceDataset);
+    const modalRef = this.modalService.open(GeoresourceEditMetadataModalComponent, {
+      size: 'lg',
+      backdrop: 'static',
+      keyboard: false,
+      container: 'body',
+      animation: false
+    });
+
+    // Pass the georesource dataset to the modal
+    modalRef.componentInstance.currentGeoresourceDataset = georesourceDataset;
+    
+    modalRef.result.then((result) => {
+      if (result) {
+        // Handle successful edit
+        this.refreshGeoresourceOverviewTable('edit', georesourceDataset.georesourceId);
+      }
+    }, (reason) => {
+      // Modal dismissed
+    });
   }
 
   public onClickEditFeatures(georesourceDataset: any): void {
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component.css b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component.css
new file mode 100644
index 000000000..fc9916935
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component.css
@@ -0,0 +1,255 @@
+/* Georesource Edit Metadata Modal Styles */
+
+/* Multi-step form styles */
+.multiStepForm {
+  position: relative;
+  margin: 0 auto;
+}
+
+.multiStepForm fieldset {
+  background: white;
+  border: 0 none;
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding-bottom: 20px;
+  position: relative;
+}
+
+.multiStepForm fieldset:not(:first-of-type) {
+  display: none;
+}
+
+.multiStepForm .fs-title {
+  font-size: 15px;
+  text-transform: uppercase;
+  color: #2C3E50;
+  margin-bottom: 10px;
+}
+
+.multiStepForm .fs-subtitle {
+  font-weight: normal;
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 20px;
+}
+
+/* Progress bar */
+#progressbar {
+  margin-bottom: 30px;
+  overflow: hidden;
+  color: lightgrey;
+  padding-left: 0;
+}
+
+#progressbar li {
+  list-style-type: none;
+  font-size: 12px;
+  width: 33.33%;
+  float: left;
+  position: relative;
+  font-weight: 400;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+#progressbar li:hover {
+  color: #27AE60;
+}
+
+#progressbar li:hover:before {
+  background: #27AE60;
+  transform: scale(1.1);
+}
+
+#progressbar li:before {
+  width: 30px;
+  height: 30px;
+  line-height: 25px;
+  display: block;
+  font-size: 12px;
+  color: #ffffff;
+  background: lightgray;
+  border-radius: 50%;
+  margin: 0 auto 5px auto;
+  padding: 2px;
+  transition: all 0.3s ease;
+}
+
+#progressbar li.active:before,
+#progressbar li.active:after {
+  background: #27AE60;
+}
+
+/* Action buttons */
+.action-button {
+  width: 100px;
+  background: #27AE60;
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 5px;
+  cursor: pointer;
+  padding: 10px 5px;
+  margin: 10px 5px;
+}
+
+.action-button-previous {
+  width: 100px;
+  background: #616161;
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 5px;
+  cursor: pointer;
+  padding: 10px 5px;
+  margin: 10px 5px;
+}
+
+.action-button:hover,
+.action-button:focus {
+  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
+}
+
+.action-button-previous:hover,
+.action-button-previous:focus {
+  box-shadow: 0 0 0 2px white, 0 0 0 3px #616161;
+}
+
+/* Color picker styles */
+.customColorPicker .dropdown-menu {
+  min-width: 200px;
+}
+
+.customColorPicker .dropdown-menu li {
+  padding: 5px 10px;
+  cursor: pointer;
+}
+
+.customColorPicker .dropdown-menu li:hover {
+  background-color: #f5f5f5;
+}
+
+.customColorPicker .dropdown-menu li i {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  margin-right: 10px;
+  border: 1px solid #ccc;
+}
+
+.customColorPicker .btn i {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  margin-right: 5px;
+  border: 1px solid #ccc;
+}
+
+/* Loading overlay */
+.loading-overlay-admin-panel {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  font-size: 2em;
+  color: #337ab7;
+}
+
+.loading-overlay-admin-panel.ng-hide {
+  display: none;
+}
+
+.icon-spin {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Form adjustments */
+.form-control {
+  font-size: 12px;
+}
+
+.help-block {
+  font-size: 11px;
+  color: #737373;
+}
+
+/* Alert styles */
+.alert {
+  margin-bottom: 0;
+  border-radius: 0;
+}
+
+.alert pre {
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  padding: 10px;
+  margin-top: 10px;
+}
+
+/* Box styles for topics management */
+.box.box-primary {
+  border-top-color: #3c8dbc;
+}
+
+.box.box-primary.collapsed-box .box-body,
+.box.box-primary.collapsed-box .box-footer {
+  display: none;
+}
+
+.box-header {
+  padding: 10px;
+  border-bottom: 1px solid #f4f4f4;
+  color: #444;
+  display: block;
+  font-size: 18px;
+  line-height: 1.42857143;
+  background-color: #ffffff;
+}
+
+.box-tools {
+  position: absolute;
+  right: 10px;
+  top: 5px;
+}
+
+.btn-box-tool {
+  padding: 5px;
+  font-size: 12px;
+  background: transparent;
+  color: #97a0b3;
+  border: none;
+}
+
+.btn-box-tool:hover {
+  color: #606c84;
+}
+
+/* Vertical alignment helper */
+.vertical-align {
+  display: flex;
+  align-items: center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .vertical-align {
+    display: block;
+  }
+  
+  .col-md-3,
+  .col-md-4,
+  .col-md-6 {
+    margin-bottom: 15px;
+  }
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component.html b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component.html
new file mode 100644
index 000000000..c178b9e0f
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component.html
@@ -0,0 +1,450 @@
+

+  
+  
Metadaten der Georessource
+    {{currentGeoresourceDataset?.datasetName}} editieren

+

+
+

+  

+    

+      
+    

+  

+
+  
+  

+    

+      

+        
+        

+          
    
+            
  • Metadaten der Georessource
    • 
+            
  • Allgemeine Metadaten
    • 
+            
  • Themenhierarchie
    • 
+          

+        

+
+        
+        
+        

+          
Metadaten der Georessource

+          
Angaben über Metadaten der Georessource

+          
* = Pflichtfeld

+
+          

+            

+              

+                
+                
+                

+                

+                  
Eingabe ungültig. Es existiert bereits eine Georessource mit
+                    gleichem Namen und gleichem Typ.

+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+          

+
+          

+            

+              

+                
+                

+                  
+                  
+                  

+                

+              

+            

+            

+              

+                
+                

+                  
+                  
+                  

+                

+              

+            

+            

+              

+                
+                

+                
+                

+              

+            

+            

+              

+                
+                

+                
+                

+                  max. 3 Zeichen
+                

+              

+            

+            

+              

+                
+                
+                

+                  
+                  
+                  

+                

+              

+            

+          

+
+          

+            

+              

+                
+                

+                  
+                  
+                

+                

+              

+            

+            

+              

+                
+                

+                
+                

+              

+            

+            

+              

+                
+                

+                  
+                  
+                  

+                

+              

+            

+          

+
+          

+            

+              

+                
+                

+                  
+                  
+                

+                

+              

+            

+          

+
+          
+        

+
+        

+          
Allgemeine Metadaten

+          
Angaben über allgemeine Metadaten in KomMonitor

+          
* = Pflichtfeld

+
+          

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+          

+
+          

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                

+                  

+                    
+                  

+                  
+                

+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+          

+
+          
+
+          
+        

+
+        

+          
Themenhierarchie

+          
Angaben über die Themenhierarchie der Georessource
                                
+
+          
* = Pflichtfeld

+          
Angabe der Themenhierarchie. Mindestens das Hauptthema muss gewählt werden. Vorhandene Unterthemen erscheinen nach Auswahl eines Hauptthemas. Bis zu vier Themen-Ebenen sind erlaubt.

+
+          
Das Aufklappen der unteren Box ermöglicht die Verwaltung des Themenkatalogs.

+
+          

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+            

+              

+                
+                
+                

+              

+            

+          

+
+          

+
+          

+
+          

+            

+              

+                

+                  

+                    
Themenkatalog

+
+                    

+                      
+                    

+                  

+                  
+                  

+                    
+
+                    
+                  

+                  
+                

+                
+              

+            

+          

+
+          
+        
                        
+      

+    

+  

+

+
+

+  
+  
+  
+  
+
+  
+  
+

+
+
+
+
+
+ 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component.ts
new file mode 100644
index 000000000..fdcc0b56d
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component.ts
@@ -0,0 +1,790 @@
+import { Component, OnInit, Inject, ViewChild, ElementRef, OnDestroy } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { HttpClient } from '@angular/common/http';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'georesource-edit-metadata-modal-new',
+  templateUrl: './georesource-edit-metadata-modal.component.html',
+  styleUrls: ['./georesource-edit-metadata-modal.component.css']
+})
+export class GeoresourceEditMetadataModalComponent implements OnInit, OnDestroy {
+  @ViewChild('metadataImportFile', { static: false }) metadataImportFile!: ElementRef;
+
+  // Component state
+  loadingData = false;
+  currentGeoresourceDataset: any;
+  currentStep = 1;
+
+  // Form data
+  datasetName: string = '';
+  datasetNameInvalid = false;
+  poiMarkerText: string = '';
+  poiMarkerTextInvalid = false;
+
+  // Metadata
+  metadata: any = {
+    note: '',
+    literature: '',
+    updateInterval: undefined,
+    sridEPSG: 4326,
+    datasource: '',
+    contact: '',
+    lastUpdate: '',
+    description: '',
+    databasis: ''
+  };
+
+  // Georesource type
+  georesourceType: string = 'poi';
+  isPOI = true;
+  isLOI = false;
+  isAOI = false;
+
+  // POI specific
+  selectedPoiMarkerColor: any;
+  selectedPoiSymbolColor: any;
+  selectedPoiMarkerStyle: string = 'symbol';
+  selectedPoiIconName: string = 'home';
+
+  // LOI specific
+  selectedLoiDashArrayObject: any;
+  loiColor: string = '#bf3d2c';
+  loiWidth: number = 3;
+
+  // AOI specific
+  aoiColor: string = '#bf3d2c';
+
+  // Topic hierarchy
+  georesourceTopic_mainTopic: any;
+  georesourceTopic_subTopic: any;
+  georesourceTopic_subsubTopic: any;
+  georesourceTopic_subsubsubTopic: any;
+
+  // Role management
+  roleManagementTableOptions: any;
+
+  // Import/Export
+  metadataImportSettings: any;
+  georesourceMetadataImportError: string = '';
+  georesourceMetadataStructure: any;
+  georesourceMetadataStructure_pretty: string = '';
+
+  // Success/Error messages
+  successMessagePart: string = '';
+  errorMessagePart: string = '';
+
+  // Subscriptions
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
+    @Inject('kommonitorMultiStepFormHelperService') public kommonitorMultiStepFormHelperService: any,
+    @Inject('kommonitorDataGridHelperService') public kommonitorDataGridHelperService: any,
+    private broadcastService: BroadcastService,
+    private http: HttpClient
+  ) {
+    this.initializeDefaultValues();
+  }
+
+  ngOnInit(): void {
+    this.setupEventListeners();
+    this.initializeMetadataStructure();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  private initializeDefaultValues(): void {
+    this.selectedPoiMarkerColor = this.kommonitorDataExchangeService.availablePoiMarkerColors[0];
+    this.selectedPoiSymbolColor = this.kommonitorDataExchangeService.availablePoiMarkerColors[1];
+    this.selectedLoiDashArrayObject = this.kommonitorDataExchangeService.availableLoiDashArrayObjects[0];
+  }
+
+  private initializeMetadataStructure(): void {
+    this.georesourceMetadataStructure = {
+      "metadata": {
+        "note": "an optional note",
+        "literature": "optional text about literature",
+        "updateInterval": "YEARLY|HALF_YEARLY|QUARTERLY|MONTHLY|ARBITRARY",
+        "sridEPSG": 4326,
+        "datasource": "text about data source",
+        "contact": "text about contact details",
+        "lastUpdate": "YYYY-MM-DD",
+        "description": "description about spatial unit dataset",
+        "databasis": "text about data basis",
+      },
+      "allowedRoles": ['roleId'],
+      "datasetName": "Name of georesource dataset",
+      "isPOI": "boolean parameter for point of interest dataset - only one of isPOI, isLOI, isAOI can be true",
+      "isLOI": "boolean parameter for lines of interest dataset - only one of isPOI, isLOI, isAOI can be true",
+      "isAOI": "boolean parameter for area of interest dataset - only one of isPOI, isLOI, isAOI can be true",
+      "poiSymbolBootstrap3Name": "glyphicon name of bootstrap 3 symbol to use for a POI resource",
+      "poiSymbolColor": "'white'|'red'|'orange'|'beige'|'green'|'blue'|'purple'|'pink'|'gray'|'black'",
+      "loiDashArrayString": "dash array string value - e.g. 20 20",
+      "poiMarkerColor": "'white'|'red'|'orange'|'beige'|'green'|'blue'|'purple'|'pink'|'gray'|'black'",
+      "loiColor": "color for lines of interest dataset",
+      "loiWidth": "width for lines of interest dataset",
+      "aoiColor": "color for area of interest dataset"
+    };
+
+    this.georesourceMetadataStructure_pretty = this.kommonitorDataExchangeService.syntaxHighlightJSON(this.georesourceMetadataStructure);
+  }
+
+  private setupEventListeners(): void {
+    // Listen for edit georesource metadata event
+    const editSub = this.broadcastService.currentBroadcastMsg.subscribe((data: any) => {
+      if (data.msg === 'onEditGeoresourceMetadata') {
+        this.currentGeoresourceDataset = data.georesourceDataset;
+        this.resetGeoresourceEditMetadataForm();
+        this.kommonitorMultiStepFormHelperService.registerClickHandler();
+      }
+    });
+    this.subscriptions.push(editSub);
+
+    // Listen for available roles update
+    const rolesSub = this.broadcastService.currentBroadcastMsg.subscribe((data: any) => {
+      if (data.msg === 'availableRolesUpdate') {
+        this.refreshRoles();
+      }
+    });
+    this.subscriptions.push(rolesSub);
+  }
+
+  private refreshRoles(): void {
+    const allowedRoles = this.currentGeoresourceDataset ? this.currentGeoresourceDataset.allowedRoles : [];
+    this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+      'georesourceEditRoleManagementTable', 
+      this.roleManagementTableOptions, 
+      this.kommonitorDataExchangeService.accessControl, 
+      allowedRoles
+    );
+  }
+
+  // Form methods
+  resetGeoresourceEditMetadataForm(): void {
+    if (!this.currentGeoresourceDataset) return;
+
+    this.currentStep = 1;
+    this.datasetName = this.currentGeoresourceDataset.datasetName;
+    this.datasetNameInvalid = false;
+
+    // Reset metadata
+    this.metadata = {
+      note: this.currentGeoresourceDataset.metadata.note,
+      literature: this.currentGeoresourceDataset.metadata.literature,
+      sridEPSG: 4326,
+      datasource: this.currentGeoresourceDataset.metadata.datasource,
+      databasis: this.currentGeoresourceDataset.metadata.databasis,
+      contact: this.currentGeoresourceDataset.metadata.contact,
+      description: this.currentGeoresourceDataset.metadata.description,
+      lastUpdate: this.currentGeoresourceDataset.metadata.lastUpdate
+    };
+
+    // Set update interval
+    this.kommonitorDataExchangeService.updateIntervalOptions.forEach((option: any) => {
+      if (option.apiName === this.currentGeoresourceDataset.metadata.updateInterval) {
+        this.metadata.updateInterval = option;
+      }
+    });
+
+    // Set role management
+    this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+      'georesourceEditRoleManagementTable', 
+      this.roleManagementTableOptions, 
+      this.kommonitorDataExchangeService.accessControl, 
+      this.currentGeoresourceDataset.allowedRoles
+    );
+
+    // Set georesource type
+    this.isPOI = this.currentGeoresourceDataset.isPOI;
+    this.isLOI = this.currentGeoresourceDataset.isLOI;
+    this.isAOI = this.currentGeoresourceDataset.isAOI;
+
+    if (this.isPOI) {
+      this.georesourceType = 'poi';
+    } else if (this.isLOI) {
+      this.georesourceType = 'loi';
+    } else {
+      this.georesourceType = 'aoi';
+    }
+
+    // Set POI colors
+    this.kommonitorDataExchangeService.availablePoiMarkerColors.forEach((option: any) => {
+      if (option.colorName === this.currentGeoresourceDataset.poiMarkerColor) {
+        this.selectedPoiMarkerColor = option;
+      }
+      if (option.colorName === this.currentGeoresourceDataset.poiSymbolColor) {
+        this.selectedPoiSymbolColor = option;
+      }
+    });
+
+    // Set LOI properties
+    this.kommonitorDataExchangeService.availableLoiDashArrayObjects.forEach((option: any) => {
+      if (option.dashArrayValue === this.currentGeoresourceDataset.loiDashArrayString) {
+        this.selectedLoiDashArrayObject = option;
+        this.onChangeLoiDashArray(this.selectedLoiDashArrayObject);
+      }
+    });
+
+    this.loiColor = this.currentGeoresourceDataset.loiColor;
+    this.loiWidth = this.currentGeoresourceDataset.loiWidth || 3;
+    this.aoiColor = this.currentGeoresourceDataset.aoiColor;
+    this.selectedPoiIconName = this.currentGeoresourceDataset.poiSymbolBootstrap3Name;
+
+    // Set topic hierarchy
+    const topicHierarchy = this.kommonitorDataExchangeService.getTopicHierarchyForTopicId(
+      this.currentGeoresourceDataset.topicReference
+    );
+
+    if (topicHierarchy && topicHierarchy[0]) {
+      this.georesourceTopic_mainTopic = topicHierarchy[0];
+    }
+    if (topicHierarchy && topicHierarchy[1]) {
+      this.georesourceTopic_subTopic = topicHierarchy[1];
+    }
+    if (topicHierarchy && topicHierarchy[2]) {
+      this.georesourceTopic_subsubTopic = topicHierarchy[2];
+    }
+    if (topicHierarchy && topicHierarchy[3]) {
+      this.georesourceTopic_subsubsubTopic = topicHierarchy[3];
+    }
+
+    // Reset messages
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+
+    // Initialize date picker
+    setTimeout(() => {
+      this.initializeDatePickers();
+    }, 250);
+  }
+
+  private initializeDatePickers(): void {
+    try {
+      const datePicker = document.getElementById('georesourceEditLastUpdateDatepicker');
+      if (datePicker && (window as any).$) {
+        (window as any).$('#georesourceEditLastUpdateDatepicker').datepicker(
+          this.kommonitorDataExchangeService.datePickerOptions
+        );
+        (window as any).$('#georesourceEditLastUpdateDatepicker').datepicker('setDate', this.metadata.lastUpdate);
+      }
+
+      // Initialize color pickers
+      const loiColorPicker = document.getElementById('loiColorEditPicker');
+      const aoiColorPicker = document.getElementById('aoiColorEditPicker');
+      
+      if (loiColorPicker && (window as any).$) {
+        (window as any).$('#loiColorEditPicker').colorpicker();
+        (window as any).$('#loiColorEditPicker').colorpicker('setValue', this.loiColor);
+      }
+      
+      if (aoiColorPicker && (window as any).$) {
+        (window as any).$('#aoiColorEditPicker').colorpicker();
+        (window as any).$('#aoiColorEditPicker').colorpicker('setValue', this.aoiColor);
+      }
+
+      // Initialize icon picker
+      const iconPicker = document.getElementById('poiSymbolEditPicker');
+      if (iconPicker && (window as any).$) {
+        const iconPickerOptions = {
+          align: 'center',
+          arrowClass: 'btn-default',
+          arrowPrevIconClass: 'fas fa-angle-left',
+          arrowNextIconClass: 'fas fa-angle-right',
+          cols: 10,
+          footer: true,
+          header: true,
+          icon: 'glyphicon-' + this.selectedPoiIconName,
+          iconset: 'glyphicon',
+          labelHeader: '{0} von {1} Seiten',
+          labelFooter: '{0} - {1} von {2} Icons',
+          placement: 'bottom',
+          rows: 6,
+          search: true,
+          searchText: 'Stichwortsuche (Bootstrap Glyphicons)',
+          selectedClass: 'btn-success',
+          unselectedClass: ''
+        };
+
+        (window as any).$('#poiSymbolEditPicker').iconpicker(iconPickerOptions);
+        (window as any).$('#poiSymbolEditPicker').on('change', (e: any) => {
+          this.selectedPoiIconName = e.icon.substring(e.icon.indexOf('-') + 1);
+        });
+        (window as any).$('#poiSymbolEditPicker').iconpicker('setIcon', 'glyphicon-' + this.selectedPoiIconName);
+      }
+
+      // Initialize LOI dash array dropdown
+      setTimeout(() => {
+        for (let i = 0; i < this.kommonitorDataExchangeService.availableLoiDashArrayObjects.length; i++) {
+          const element = document.getElementById('loiDashArrayEditDropdownItem-' + i);
+          if (element) {
+            element.innerHTML = this.kommonitorDataExchangeService.availableLoiDashArrayObjects[i].svgString;
+          }
+        }
+
+        const buttonElement = document.getElementById('loiDashArrayEditDropdownButton');
+        if (buttonElement) {
+          buttonElement.innerHTML = this.selectedLoiDashArrayObject.svgString;
+        }
+      }, 1000);
+
+    } catch (error) {
+      console.warn('Date picker/color picker initialization failed:', error);
+    }
+  }
+
+  // Validation methods
+  checkDatasetName(): void {
+    this.datasetNameInvalid = false;
+    this.kommonitorDataExchangeService.availableGeoresources.forEach((georesource: any) => {
+      if (georesource.datasetName === this.datasetName && 
+          georesource.georesourceId !== this.currentGeoresourceDataset?.georesourceId) {
+        this.datasetNameInvalid = true;
+        return;
+      }
+    });
+  }
+
+  checkPoiMarkerText(): void {
+    this.poiMarkerTextInvalid = this.poiMarkerText.length > 3;
+  }
+
+  // Georesource type change
+  onChangeGeoresourceType(): void {
+    this.isPOI = this.georesourceType === 'poi';
+    this.isLOI = this.georesourceType === 'loi';
+    this.isAOI = this.georesourceType === 'aoi';
+  }
+
+  // POI methods
+  onChangeMarkerColor(markerColor: any): void {
+    this.selectedPoiMarkerColor = markerColor;
+  }
+
+  onChangeSymbolColor(symbolColor: any): void {
+    this.selectedPoiSymbolColor = symbolColor;
+  }
+
+  onChangeMarkerStyle(style: string): void {
+    this.selectedPoiMarkerStyle = style;
+  }
+
+  // LOI methods
+  onChangeLoiDashArray(loiDashArrayObject: any): void {
+    this.selectedLoiDashArrayObject = loiDashArrayObject;
+    const buttonElement = document.getElementById('loiDashArrayEditDropdownButton');
+    if (buttonElement) {
+      buttonElement.innerHTML = loiDashArrayObject.svgString;
+    }
+  }
+
+  // Import/Export methods
+  onImportGeoresourceEditMetadata(): void {
+    this.georesourceMetadataImportError = '';
+    this.metadataImportFile.nativeElement.click();
+  }
+
+  onMetadataFileSelected(event: any): void {
+    const file = event.target.files[0];
+    if (file) {
+      this.parseMetadataFromFile(file);
+    }
+  }
+
+  private parseMetadataFromFile(file: File): void {
+    const fileReader = new FileReader();
+
+    fileReader.onload = (event: any) => {
+      try {
+        this.parseFromMetadataFile(event);
+      } catch (error) {
+        console.error('Uploaded Metadata File cannot be parsed.');
+        this.georesourceMetadataImportError = 'Uploaded Metadata File cannot be parsed correctly';
+        const preElement = document.getElementById('georesourcesEditMetadataPre');
+        if (preElement) {
+          preElement.innerHTML = this.georesourceMetadataStructure_pretty;
+        }
+        this.showMetadataImportErrorAlert();
+      }
+    };
+
+    fileReader.readAsText(file);
+  }
+
+  private parseFromMetadataFile(event: any): void {
+    this.metadataImportSettings = JSON.parse(event.target.result);
+
+    if (!this.metadataImportSettings.metadata) {
+      console.error('uploaded Metadata File cannot be parsed - wrong structure.');
+      this.georesourceMetadataImportError = 'Struktur der Datei stimmt nicht mit erwartetem Muster überein.';
+      const preElement = document.getElementById('georesourcesEditMetadataPre');
+      if (preElement) {
+        preElement.innerHTML = this.georesourceMetadataStructure_pretty;
+      }
+      this.showMetadataImportErrorAlert();
+      return;
+    }
+
+    // Parse metadata
+    this.metadata = {
+      note: this.metadataImportSettings.metadata.note,
+      literature: this.metadataImportSettings.metadata.literature,
+      sridEPSG: this.metadataImportSettings.metadata.sridEPSG,
+      datasource: this.metadataImportSettings.metadata.datasource,
+      contact: this.metadataImportSettings.metadata.contact,
+      lastUpdate: this.metadataImportSettings.metadata.lastUpdate,
+      description: this.metadataImportSettings.metadata.description,
+      databasis: this.metadataImportSettings.metadata.databasis
+    };
+
+    // Set update interval
+    this.kommonitorDataExchangeService.updateIntervalOptions.forEach((option: any) => {
+      if (option.apiName === this.metadataImportSettings.metadata.updateInterval) {
+        this.metadata.updateInterval = option;
+      }
+    });
+
+    this.datasetName = this.metadataImportSettings.datasetName;
+
+    // Set role management
+    this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+      'georesourceEditRoleManagementTable', 
+      this.roleManagementTableOptions, 
+      this.kommonitorDataExchangeService.accessControl, 
+      this.metadataImportSettings.allowedRoles
+    );
+
+    // Set georesource specific properties
+    this.isPOI = this.metadataImportSettings.isPOI;
+    this.isLOI = this.metadataImportSettings.isLOI;
+    this.isAOI = this.metadataImportSettings.isAOI;
+
+    if (this.metadataImportSettings.isPOI) {
+      this.georesourceType = 'poi';
+    } else if (this.metadataImportSettings.isLOI) {
+      this.georesourceType = 'loi';
+    } else {
+      this.georesourceType = 'aoi';
+    }
+
+    // Set POI colors
+    this.kommonitorDataExchangeService.availablePoiMarkerColors.forEach((option: any) => {
+      if (option.colorName === this.metadataImportSettings.poiMarkerColor) {
+        this.selectedPoiMarkerColor = option;
+      }
+      if (option.colorName === this.metadataImportSettings.poiSymbolColor) {
+        this.selectedPoiSymbolColor = option;
+      }
+    });
+
+    // Set LOI properties
+    this.kommonitorDataExchangeService.availableLoiDashArrayObjects.forEach((option: any) => {
+      if (option.dashArrayValue === this.metadataImportSettings.loiDashArrayString) {
+        this.selectedLoiDashArrayObject = option;
+        this.onChangeLoiDashArray(this.selectedLoiDashArrayObject);
+      }
+    });
+
+    this.loiColor = this.metadataImportSettings.loiColor;
+    this.loiWidth = this.metadataImportSettings.loiWidth;
+    this.aoiColor = this.metadataImportSettings.aoiColor;
+    this.selectedPoiIconName = this.metadataImportSettings.poiSymbolBootstrap3Name;
+
+    // Set color pickers
+    setTimeout(() => {
+      if ((window as any).$) {
+        (window as any).$('#loiColorEditPicker').colorpicker('setValue', this.loiColor);
+        (window as any).$('#aoiColorEditPicker').colorpicker('setValue', this.aoiColor);
+        (window as any).$('#poiSymbolEditPicker').iconpicker('setIcon', 'glyphicon-' + this.metadataImportSettings.poiSymbolBootstrap3Name);
+      }
+    }, 200);
+
+    // Set topic hierarchy
+    const topicHierarchy = this.kommonitorDataExchangeService.getTopicHierarchyForTopicId(
+      this.metadataImportSettings.topicReference
+    );
+
+    if (topicHierarchy && topicHierarchy[0]) {
+      this.georesourceTopic_mainTopic = topicHierarchy[0];
+    }
+    if (topicHierarchy && topicHierarchy[1]) {
+      this.georesourceTopic_subTopic = topicHierarchy[1];
+    }
+    if (topicHierarchy && topicHierarchy[2]) {
+      this.georesourceTopic_subsubTopic = topicHierarchy[2];
+    }
+    if (topicHierarchy && topicHierarchy[3]) {
+      this.georesourceTopic_subsubsubTopic = topicHierarchy[3];
+    }
+  }
+
+  onExportGeoresourceEditMetadata(): void {
+    const metadataExport = JSON.parse(JSON.stringify(this.georesourceMetadataStructure));
+
+    metadataExport.metadata.note = this.metadata.note || '';
+    metadataExport.metadata.literature = this.metadata.literature || '';
+    metadataExport.metadata.sridEPSG = this.metadata.sridEPSG || '';
+    metadataExport.metadata.datasource = this.metadata.datasource || '';
+    metadataExport.metadata.contact = this.metadata.contact || '';
+    metadataExport.metadata.lastUpdate = this.metadata.lastUpdate || '';
+    metadataExport.metadata.description = this.metadata.description || '';
+    metadataExport.metadata.databasis = this.metadata.databasis || '';
+    metadataExport.datasetName = this.datasetName || '';
+
+    metadataExport.allowedRoles = [];
+
+    const roleIds = this.kommonitorDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
+    for (const roleId of roleIds) {
+      metadataExport.allowedRoles.push(roleId);
+    }
+
+    if (this.metadata.updateInterval) {
+      metadataExport.metadata.updateInterval = this.metadata.updateInterval.apiName;
+    }
+
+    // Georesource specific properties
+    metadataExport.isPOI = this.isPOI;
+    metadataExport.isLOI = this.isLOI;
+    metadataExport.isAOI = this.isAOI;
+
+    if (this.isPOI) {
+      metadataExport.poiSymbolBootstrap3Name = this.selectedPoiIconName;
+      metadataExport.poiSymbolColor = this.selectedPoiSymbolColor.colorName;
+      metadataExport.poiMarkerColor = this.selectedPoiMarkerColor.colorName;
+      metadataExport.loiDashArrayString = '';
+      metadataExport.loiColor = '';
+      metadataExport.loiWidth = '';
+      metadataExport.aoiColor = '';
+    } else if (this.isLOI) {
+      metadataExport.poiSymbolBootstrap3Name = '';
+      metadataExport.poiSymbolColor = '';
+      metadataExport.poiMarkerColor = '';
+      metadataExport.loiDashArrayString = this.selectedLoiDashArrayObject.dashArrayValue;
+      metadataExport.loiColor = this.loiColor;
+      metadataExport.loiWidth = this.loiWidth;
+      metadataExport.aoiColor = '';
+    } else if (this.isAOI) {
+      metadataExport.poiSymbolBootstrap3Name = '';
+      metadataExport.poiSymbolColor = '';
+      metadataExport.poiMarkerColor = '';
+      metadataExport.loiDashArrayString = '';
+      metadataExport.loiColor = '';
+      metadataExport.loiWidth = '';
+      metadataExport.aoiColor = this.aoiColor;
+    }
+
+    // Set topic reference
+    if (this.georesourceTopic_subsubsubTopic) {
+      metadataExport.topicReference = this.georesourceTopic_subsubsubTopic.topicId;
+    } else if (this.georesourceTopic_subsubTopic) {
+      metadataExport.topicReference = this.georesourceTopic_subsubTopic.topicId;
+    } else if (this.georesourceTopic_subTopic) {
+      metadataExport.topicReference = this.georesourceTopic_subTopic.topicId;
+    } else if (this.georesourceTopic_mainTopic) {
+      metadataExport.topicReference = this.georesourceTopic_mainTopic.topicId;
+    } else {
+      metadataExport.topicReference = '';
+    }
+
+    const metadataJSON = JSON.stringify(metadataExport);
+    let fileName = 'Georessource_Metadaten_Export';
+
+    if (this.datasetName) {
+      fileName += '-' + this.datasetName;
+    }
+
+    fileName += '.json';
+
+    const blob = new Blob([metadataJSON], { type: 'application/json' });
+    const data = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.download = fileName;
+    a.href = data;
+    a.textContent = 'JSON';
+    a.target = '_blank';
+    a.rel = 'noopener noreferrer';
+    a.click();
+
+    a.remove();
+  }
+
+  // Main edit method
+  editGeoresourceMetadata(): void {
+    const patchBody: any = {
+      metadata: {
+        note: this.metadata.note,
+        literature: this.metadata.literature,
+        updateInterval: this.metadata.updateInterval.apiName,
+        sridEPSG: this.metadata.sridEPSG,
+        datasource: this.metadata.datasource,
+        contact: this.metadata.contact,
+        lastUpdate: this.metadata.lastUpdate,
+        description: this.metadata.description,
+        databasis: this.metadata.databasis
+      },
+      allowedRoles: [],
+      datasetName: this.datasetName,
+      isAOI: this.isAOI,
+      isLOI: this.isLOI,
+      isPOI: this.isPOI,
+      topicReference: null
+    };
+
+    const roleIds = this.kommonitorDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
+    for (const roleId of roleIds) {
+      patchBody.allowedRoles.push(roleId);
+    }
+
+    if (this.isPOI) {
+      patchBody.poiSymbolBootstrap3Name = this.selectedPoiIconName;
+      patchBody.poiSymbolColor = this.selectedPoiSymbolColor.colorName;
+      patchBody.poiMarkerColor = this.selectedPoiMarkerColor.colorName;
+      patchBody.loiDashArrayString = null;
+      patchBody.loiColor = null;
+      patchBody.loiWidth = null;
+      patchBody.aoiColor = null;
+    } else if (this.isLOI) {
+      patchBody.poiSymbolBootstrap3Name = null;
+      patchBody.poiSymbolColor = null;
+      patchBody.poiMarkerColor = null;
+      patchBody.loiDashArrayString = this.selectedLoiDashArrayObject.dashArrayValue;
+      patchBody.loiColor = this.loiColor;
+      patchBody.loiWidth = this.loiWidth;
+      patchBody.aoiColor = null;
+    } else if (this.isAOI) {
+      patchBody.poiSymbolBootstrap3Name = null;
+      patchBody.poiSymbolColor = null;
+      patchBody.poiMarkerColor = null;
+      patchBody.loiDashArrayString = null;
+      patchBody.loiColor = null;
+      patchBody.loiWidth = null;
+      patchBody.aoiColor = this.aoiColor;
+    }
+
+    // Set topic reference
+    if (this.georesourceTopic_subsubsubTopic) {
+      patchBody.topicReference = this.georesourceTopic_subsubsubTopic.topicId;
+    } else if (this.georesourceTopic_subsubTopic) {
+      patchBody.topicReference = this.georesourceTopic_subsubTopic.topicId;
+    } else if (this.georesourceTopic_subTopic) {
+      patchBody.topicReference = this.georesourceTopic_subTopic.topicId;
+    } else if (this.georesourceTopic_mainTopic) {
+      patchBody.topicReference = this.georesourceTopic_mainTopic.topicId;
+    } else {
+      patchBody.topicReference = '';
+    }
+
+    this.loadingData = true;
+
+    this.http.patch(
+      this.kommonitorDataExchangeService.baseUrlToKomMonitorDataAPI + '/georesources/' + this.currentGeoresourceDataset.georesourceId,
+      patchBody
+    ).subscribe({
+      next: (response: any) => {
+        this.successMessagePart = this.datasetName;
+        this.broadcastService.broadcast('refreshGeoresourceOverviewTable', { crudType: 'edit', targetGeoresourceId: this.currentGeoresourceDataset.georesourceId });
+        this.showSuccessAlert();
+        this.loadingData = false;
+      },
+      error: (error: any) => {
+        if (error.data) {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error.data);
+        } else {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+        }
+        this.showErrorAlert();
+        this.loadingData = false;
+      }
+    });
+  }
+
+  // Alert methods
+  showSuccessAlert(): void {
+    const alertElement = document.getElementById('georesourceEditMetadataSuccessAlert');
+    if (alertElement) {
+      alertElement.hidden = false;
+    }
+  }
+
+  showErrorAlert(): void {
+    const alertElement = document.getElementById('georesourceEditMetadataErrorAlert');
+    if (alertElement) {
+      alertElement.hidden = false;
+    }
+  }
+
+  showMetadataImportErrorAlert(): void {
+    const alertElement = document.getElementById('georesourceEditMetadataImportErrorAlert');
+    if (alertElement) {
+      alertElement.hidden = false;
+    }
+  }
+
+  hideSuccessAlert(): void {
+    const alertElement = document.getElementById('georesourceEditMetadataSuccessAlert');
+    if (alertElement) {
+      alertElement.hidden = true;
+    }
+  }
+
+  hideErrorAlert(): void {
+    const alertElement = document.getElementById('georesourceEditMetadataErrorAlert');
+    if (alertElement) {
+      alertElement.hidden = true;
+    }
+  }
+
+  hideMetadataErrorAlert(): void {
+    const alertElement = document.getElementById('georesourceEditMetadataImportErrorAlert');
+    if (alertElement) {
+      alertElement.hidden = true;
+    }
+  }
+
+  // Get filtered topics for georesource
+  getMainTopicsForGeoresource(): any[] {
+    return this.kommonitorDataExchangeService.availableTopics.filter((topic: any) => 
+      topic.topicType === 'main' && topic.topicResource === 'georesource'
+    );
+  }
+
+  // Validation for form submission
+  canSubmitForm(): boolean {
+    return !this.datasetNameInvalid && 
+           !!this.metadata.description && 
+           !!this.metadata.datasource && 
+           !!this.metadata.contact && 
+           !!this.metadata.updateInterval && 
+           !!this.metadata.lastUpdate && 
+           !this.poiMarkerTextInvalid;
+  }
+
+  // Step navigation
+  nextStep(): void {
+    if (this.currentStep < 3) {
+      this.currentStep++;
+    }
+  }
+
+  previousStep(): void {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+    }
+  }
+
+  goToStep(step: number): void {
+    if (step >= 1 && step <= 3) {
+      this.currentStep = step;
+    }
+  }
+
+  // Modal control
+  cancel(): void {
+    this.activeModal.dismiss();
+  }
+} 
\ No newline at end of file

From f7a8408b3c0d2331e1703e0d9a0ff0a382b55819 Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Mon, 21 Jul 2025 20:05:06 +0530
Subject: [PATCH 028/120] migrate georesource edit feature modal

---
 app/app.module.ts                             |   9 +-
 ...admin-georesources-management.component.ts |  22 +-
 ...resource-edit-features-modal.component.css | 289 +++++++
 ...esource-edit-features-modal.component.html | 522 +++++++++++
 ...oresource-edit-features-modal.component.ts | 818 ++++++++++++++++++
 5 files changed, 1657 insertions(+), 3 deletions(-)
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.css
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.html
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index 792e225b2..9813e40ff 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -95,6 +95,7 @@ import { AdminGeoresourcesManagementComponent } from './components/ngComponents/
 import { GeoresourceAddModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceAddModal/georesource-add-modal.component';
 import { GeoresourceBatchUpdateModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component';
 import { GeoresourceEditMetadataModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component';
+import { GeoresourceEditFeaturesModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component';
 
 
 // currently the AngularJS routing is still used as part of kommonitorClient module
@@ -199,7 +200,8 @@ declare var MathJax;
     AdminGeoresourcesManagementComponent,
     GeoresourceAddModalComponent,
     GeoresourceBatchUpdateModalComponent,
-    GeoresourceEditMetadataModalComponent
+    GeoresourceEditMetadataModalComponent,
+    GeoresourceEditFeaturesModalComponent
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
@@ -345,6 +347,11 @@ export class AppModule implements DoBootstrap {
         component: GeoresourceEditMetadataModalComponent
       }) as angular.IDirectiveFactory);
 
+    angular.module('kommonitorAdmin')
+      .directive('georesourceEditFeaturesModalNew', downgradeComponent({
+        component: GeoresourceEditFeaturesModalComponent
+      }) as angular.IDirectiveFactory);
+
     console.log("registered downgraded Angular components for AngularJS usage");
   }
 
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
index fc4d573e8..cb35b7127 100644
--- a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
@@ -10,6 +10,7 @@ import { AgGridAngular } from 'ag-grid-angular';
 import { GeoresourceAddModalComponent } from './georesourceAddModal/georesource-add-modal.component';
 import { GeoresourceBatchUpdateModalComponent } from './georesourceBatchUpdateModal/georesource-batch-update-modal.component';
 import { GeoresourceEditMetadataModalComponent } from './georesourceEditMetadataModal/georesource-edit-metadata-modal.component';
+import { GeoresourceEditFeaturesModalComponent } from './georesourceEditFeaturesModal/georesource-edit-features-modal.component';
 
 // Declare jQuery for AdminLTE
 declare const $: any;
@@ -307,8 +308,25 @@ export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy,
   }
 
   public onClickEditFeatures(georesourceDataset: any): void {
-    // submit selected georesource to modal controller
-    this.broadcastService.broadcast('onEditGeoresourceFeatures', georesourceDataset);
+    const modalRef = this.modalService.open(GeoresourceEditFeaturesModalComponent, {
+      size: 'xl',
+      backdrop: 'static',
+      keyboard: false,
+      container: 'body',
+      animation: false
+    });
+
+    // Pass the georesource dataset to the modal
+    modalRef.componentInstance.currentGeoresourceDataset = georesourceDataset;
+    
+    modalRef.result.then((result) => {
+      if (result) {
+        // Handle successful edit
+        this.refreshGeoresourceOverviewTable('edit', georesourceDataset.georesourceId);
+      }
+    }, (reason) => {
+      // Modal dismissed
+    });
   }
 
   public onClickEditUserRoles(georesourceDataset: any): void {
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.css b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.css
new file mode 100644
index 000000000..eabdf6f17
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.css
@@ -0,0 +1,289 @@
+/* Georesource Edit Features Modal Styles */
+
+/* Multi-step form styles */
+.multiStepForm {
+  position: relative;
+  margin: 0 auto;
+}
+
+.multiStepForm fieldset {
+  background: white;
+  border: 0 none;
+  border-radius: 0.5rem;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding-bottom: 20px;
+  position: relative;
+}
+
+.multiStepForm fieldset:not(:first-of-type) {
+  display: none;
+}
+
+.multiStepForm .fs-title {
+  font-size: 15px;
+  text-transform: uppercase;
+  color: #2C3E50;
+  margin-bottom: 10px;
+}
+
+.multiStepForm .fs-subtitle {
+  font-weight: normal;
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 20px;
+}
+
+/* Progress bar */
+#progressbar {
+  margin-bottom: 30px;
+  overflow: hidden;
+  color: lightgrey;
+  padding-left: 0;
+}
+
+#progressbar li {
+  list-style-type: none;
+  font-size: 11px;
+  width: 33.33%;
+  float: left;
+  position: relative;
+  font-weight: 400;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+#progressbar li:hover {
+  color: #27AE60;
+}
+
+#progressbar li:hover:before {
+  background: #27AE60;
+  transform: scale(1.1);
+}
+
+#progressbar li:before {
+  width: 24px;
+  height: 24px;
+  line-height: 20px;
+  display: block;
+  font-size: 10px;
+  color: #ffffff;
+  background: lightgray;
+  border-radius: 50%;
+  margin: 0 auto 3px auto;
+  padding: 2px;
+  transition: all 0.3s ease;
+}
+
+#progressbar li.active:before,
+#progressbar li.active:after {
+  background: #27AE60;
+}
+
+/* Action buttons */
+.action-button {
+  width: 100px;
+  background: #27AE60;
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 5px;
+  cursor: pointer;
+  padding: 10px 5px;
+  margin: 10px 5px;
+}
+
+.action-button-previous {
+  width: 100px;
+  background: #616161;
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 5px;
+  cursor: pointer;
+  padding: 10px 5px;
+  margin: 10px 5px;
+}
+
+.action-button:hover,
+.action-button:focus {
+  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
+}
+
+.action-button-previous:hover,
+.action-button-previous:focus {
+  box-shadow: 0 0 0 2px white, 0 0 0 3px #616161;
+}
+
+/* Switch toggle styles */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switchslider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.switchslider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .switchslider {
+  background-color: #2196F3;
+}
+
+input:focus + .switchslider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .switchslider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded switch */
+.switchslider.round {
+  border-radius: 34px;
+}
+
+.switchslider.round:before {
+  border-radius: 50%;
+}
+
+/* Feature table wrapper */
+.featureTableWrapper {
+  margin: 20px 0;
+}
+
+.admin-table-wrapper {
+  position: relative;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+/* Loading overlay */
+.loading-overlay-admin-panel {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  font-size: 2em;
+  color: #337ab7;
+}
+
+.loading-overlay-admin-panel.ng-hide {
+  display: none;
+}
+
+.icon-spin {
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Form adjustments */
+.form-control {
+  font-size: 12px;
+}
+
+.help-block {
+  font-size: 11px;
+  color: #737373;
+}
+
+/* Alert styles */
+.alert {
+  margin-bottom: 0;
+  border-radius: 0;
+}
+
+.alert pre {
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  padding: 10px;
+  margin-top: 10px;
+}
+
+/* Table styles */
+.table-condensed {
+  font-size: 12px;
+}
+
+.table-condensed th,
+.table-condensed td {
+  padding: 5px;
+  border-top: 1px solid #ddd;
+}
+
+.btn-group-sm > .btn,
+.btn-sm {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+/* Vertical alignment helper */
+.vertical-align {
+  display: flex;
+  align-items: flex-start;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .vertical-align {
+    display: block;
+  }
+  
+  .col-md-3,
+  .col-md-6 {
+    margin-bottom: 15px;
+  }
+
+  .switch {
+    width: 50px;
+    height: 28px;
+  }
+
+  .switchslider:before {
+    height: 20px;
+    width: 20px;
+  }
+
+  input:checked + .switchslider:before {
+    transform: translateX(22px);
+  }
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.html b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.html
new file mode 100644
index 000000000..b819d4ddd
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.html
@@ -0,0 +1,522 @@
+

+  
+  
Features der Georessource {{currentGeoresourceDataset?.datasetName}} fortführen

+

+
+

+  

+    

+      
+    

+  

+
+  
+  

+    

+      

+        
+        
 
+          
+          
    
+            
  • Feature Übersicht
    • 
+            
  • Import einzelner Features
    • 
+            
  • Import mehrerer Features
    • 
+          

+        

+        
+        
+        

+          
Feature Übersicht

+          
Optionale Anzeige der Feature-Details

+
+          

+            

+              

+                
+                
+
+                
Das Anzeigen aller Features der Georessource kann je nach Anzahl und Komplexität der Objekte einige Zeit in Anspruch nehmen

+                  
Editieren einzelner Zellwerte via Doppelklick. Bestätigen der Editierung durch Enter oder Klicken in eine andere Zelle

+                

+                

+              

+            

+            

+              

+                                                        
+                
+
+                  
+
+                
+
+                
Das Löschen aller Features der Georessource ist unwiderruflich. Der Datensatz als solches (Metadaten) bleibt dabei bestehen.

+                

+              

+            

+          

+
+          

+            

+              Letztes erfolgreiches Update eines Einzeleintrags
+              {{kommonitorDataGridHelperService.featureTable_georesource_lastUpdate_timestamp_success}}
+            

+            

+              Letztes gescheitertes Update eines Einzeleintrags
+              {{kommonitorDataGridHelperService.featureTable_georesource_lastUpdate_timestamp_failure}}
+            

+          

+
+          

+            
+            
+          

+
+          
+        

+        
+        

+          
Manuelles Bearbeiten der Datensatz-Objekte

+          
Eine interaktive Karte sowie Eingabefelder erlauben das
+            Editieren einzelner Features hinsichtlich
+            räumlicher Lage und/oder Sachdaten. Weiterhin können vorhandene Punkte
+            entfernt oder neue Punkte ergänzt werden.
+            Die Änderungen werden dauerhaft in der Datenbank gespeichert.
+            

+            Nur die mit * markierten Elemente müssen verpflichtend angegeben werden
+          

+
+          
+
+          

+
+          
+          
+        

+
+        

+          

+            
+            
+                                            
+          

+          
+          
Räumlicher Datensatz

+          
Angaben über den räumlichen Datensatz, aus dem die Features importiert werden

+          
* = Pflichtfeld

+
+          

+            

+              

+                
+                
+                

+              

+              
+              

+                

+                  
+                  
+                  

+                

+              

+
+              

+                

+                  
+                  
+                  

+                

+              

+
+              

+                

+                  
+                  
+                  

+                    
{{parameter.description}}

+                  

+                  

+                    
CRS aufmerksam setzen. Falsche Angaben führen zur fehlerhaften Koordinaten der Features

+                  

+                  

+                

+              

+            

+            
+            

+              

+                

+                  
bitte zuerst das Quellformat wählen

+                

+                

+                  

+                    
+                    
+                    

+                  

+
+                  

+                    
+                    
+                  

+                  
+                  

+                    
+                    
+
+                    

+                      
+                      
+                      

+                        
Raumebene aus welchem ein umschließendes Rechteck extrahiert wird

+                      

+                    

+                    
+                    

+                      
+                      
+                      

+                        
Minimale x-Koordinate

+                      

+                      
+                      

+                        
Minimale y-Koordinate

+                      

+                      
+                      

+                        
Maximale x-Koordinate

+                      

+                      
+                      

+                        
Maximale y-Koordinate

+                      

+                    

+                  

+                  
+                  

+                    

+                      

+                        
+                        
+                        
+                        

+                          
{{parameter.description}}

+                        

+                        

+                      

+                    

+                  

+                

+
+                

+                

+                  
Eingabe ungültig. Grund: {{georesourceDataSourceInputInvalidReason}}

+                

+              

+            

+            
+            

+              

+                
+                
+                

+                  
Name des Attributs, welches den eindeutigen Identifier des Features enthält.

+                

+                

+                

+                  
Eingabe ungültig. Angegebenes Attribut nicht gefunden oder enthält NULL-Werte.

+                

+              

+              

+                
+                
+                

+                  
Name des Attributs, welches den eindeutigen Namen des Features enthält.

+                

+                

+                

+                  
Eingabe ungültig. Angegebenes Attribut nicht gefunden oder enthält NULL-Werte.

+                

+              

+            

+            
+            

+              

+                
+                
+                

+                  
Eintrag nur, falls die räumlichen Features über ein Attribut
+                    für den Lebenszeitraum (Beginn) verfügen.

+                

+                

+              

+              

+                
+                
+                

+                  
Eintrag nur, falls die räumlichen Features über ein Attribut
+                    für den Lebenszeitraum (Ende) verfügen.

+                

+                

+              

+            

+          

+          
+          

+            

+              

+                
+                

+                  

+                    
+                  

+                  
+                

+                

+                  
Eintrag ist immer erforderlich, selbst wenn die räumlichen Features über ein
+                    Lebenszeitraum-Attribut
+                    verfügen.

+                

+                

+                

+                  
Eingabe ungültig. Definiertes Zeitintervall ist nicht erlaubt.

+                

+              

+            

+            

+              

+                
+                

+                  

+                    
+                  

+                  
+                

+                

+                  
Eintrag ist erforderlich, falls die räumlichen Features nicht selbst über ein
+                    Lebenszeitraum-Attribut
+                    verfügen. Enddatum darf leer sein, um anzuzeigen, dass es sich
+                    um aktuell gültige Features handelt.

+                

+                

+                

+                  
Eingabe ungültig. Definiertes Zeitintervall ist nicht erlaubt.

+                

+              

+            

+          
    
+          
+          

+          

+
+          

+            

+              

+                
+
+                
    
+                
+
+                

+                  
Angabe, ob das Update nur einen Teil der räumlichen Objekte enthält (bspw. 20/50 Stadtteilen). Wird der vollständige Datensatz hochgeladen (Schalter deaktiviert), so vergleicht KomMonitor die in der Datenbank befindlichen Objekte und löscht solche Objekte, die nicht mehr im hochgeladenen Datensatz enthalten sind, aber im gleichen Lebenzeitintervall liegen.

+                

+              

+            

+          

+
+          

+          

+
+          

+            

+              

+                
+
+                
    
+                
+
+                

+                  
Angabe, ob alle sonstigen Attribute des importierten Datensatzes mit gleichem Namen übernommen werden sollen. 
+                    Falls nicht, so lassen sich einzelne Attribut-Importe definieren.

+                

+              

+            

+            

+              

+                
+
+                
    
+                
+
+                

+                  
Angabe, ob fehlende Attribute oder leere Attributwerte (NULL-Werte) übernommen werden. Bei deaktivierter Option 
+                    wird bei einem solchen Fall ein Fehler geworfen.

+                

+              

+            

+          

+          
+          

+            

+              

+                
+                
+                

+              

+
+              

+                
+                
+                

+              

+
+              

+                
+                
+                

+              

+
+              

+                
+                

+              

+            

+            
+            

+              
+              
+                
+                  
+                    
+                    
+                    
+                    
+                  
+                
+                
+                  
+                    
+                    
+                    
+                    
+                  
+                
+              
EditierfunktionenQuell-Attributname im DatensatzZiel-Attributname nach ImportDatentyp

+                      

+                        
+                        
+                      

+                    		{{attributeMappingEntry.sourceName}}{{attributeMappingEntry.destinationName}}{{attributeMappingEntry.dataType.displayName}}

+            

+          

+          
+          
+        

+      

+    

+  

+

+
+

+  
+  
+  
+

+
+
+
+
+
+ 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.ts
new file mode 100644
index 000000000..84953ff47
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.ts
@@ -0,0 +1,818 @@
+import { Component, OnInit, Inject, ViewChild, ElementRef, OnDestroy } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { HttpClient } from '@angular/common/http';
+import { Subscription } from 'rxjs';
+import { AgGridAngular } from 'ag-grid-angular';
+import { ColDef, GridOptions, GridApi, ColumnApi, GridReadyEvent, FirstDataRenderedEvent, ColumnResizedEvent } from 'ag-grid-community';
+
+declare const $: any;
+declare const __env: any;
+
+@Component({
+  selector: 'georesource-edit-features-modal-new',
+  templateUrl: './georesource-edit-features-modal.component.html',
+  styleUrls: ['./georesource-edit-features-modal.component.css']
+})
+export class GeoresourceEditFeaturesModalComponent implements OnInit, OnDestroy {
+  @ViewChild('mappingConfigImportFile', { static: false }) mappingConfigImportFile!: ElementRef;
+  @ViewChild('dataSourceInput', { static: false }) dataSourceInput!: ElementRef;
+  @ViewChild('georesourceFeatureTable', { static: true }) georesourceFeatureTable!: AgGridAngular;
+
+  // Component state
+  loadingData = false;
+  private _currentGeoresourceDataset: any;
+  currentStep = 1;
+
+  get currentGeoresourceDataset(): any {
+    return this._currentGeoresourceDataset;
+  }
+
+  set currentGeoresourceDataset(value: any) {
+    this._currentGeoresourceDataset = value;
+  }
+
+  // Feature management
+  enableDeleteFeatures = false;
+  georesourceFeaturesGeoJSON: any;
+  remainingFeatureHeaders: any[] = [];
+  
+  // AG-Grid configuration
+  featureTableGridOptions: GridOptions = {};
+  private gridApi!: GridApi;
+  private columnApi!: ColumnApi;
+
+  // Single feature variables
+  featureIdValue = 0;
+  featureIdExampleString: string = '';
+  featureIdIsValid = false;
+  featureNameValue: string = '';
+  featureGeometryValue: any;
+  featureStartDateValue: string = '';
+  featureEndDateValue: string = '';
+  featureSchemaProperties: any[] = [];
+  schemaObject: any;
+
+  // Multiple feature import variables
+  periodOfValidity: any = {
+    startDate: '',
+    endDate: ''
+  };
+  periodOfValidityInvalid = false;
+
+  // Data source variables
+  georesourceDataSourceInputInvalid = false;
+  georesourceDataSourceInputInvalidReason: string = '';
+  georesourceDataSourceIdProperty: string = '';
+  georesourceDataSourceNameProperty: string = '';
+  idPropertyNotFound = false;
+  namePropertyNotFound = false;
+
+  // Import configuration
+  converter: any;
+  schema: string = '';
+  mimeType: string = '';
+  datasourceType: any;
+  
+  // Available options
+  availableDatasourceTypes: any[] = [];
+  availableSpatialUnits: any[] = [];
+
+  // Converter parameters
+  converterDefinition: any;
+  datasourceTypeDefinition: any;
+  propertyMappingDefinition: any;
+  putBody_georesources: any;
+
+  // Validity date attributes
+  validityEndDate_perFeature: string = '';
+  validityStartDate_perFeature: string = '';
+
+  // Attribute mapping
+  attributeMapping_sourceAttributeName: string = '';
+  attributeMapping_destinationAttributeName: string = '';
+  attributeMapping_data: any;
+  attributeMapping_attributeType: any;
+  attributeMappings_adminView: any[] = [];
+  keepAttributes = true;
+  keepMissingValues = true;
+
+  // BBOX configuration
+  bboxType: string = '';
+  bboxRefSpatialUnit: any;
+
+  // Partial update
+  isPartialUpdate = false;
+
+  // Success/Error messages
+  successMessagePart: string = '';
+  errorMessagePart: string = '';
+  importerErrors: any;
+  importedFeatures: any[] = [];
+
+  // Mapping config import/export
+  georesourceMappingConfigImportError: string = '';
+  georesourceMappingConfigStructure_pretty: string = '';
+
+  // Subscriptions
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
+    @Inject('kommonitorMultiStepFormHelperService') public kommonitorMultiStepFormHelperService: any,
+    @Inject('kommonitorDataGridHelperService') public kommonitorDataGridHelperService: any,
+    @Inject('kommonitorImporterHelperService') public kommonitorImporterHelperService: any,
+    @Inject('kommonitorSingleFeatureMapHelperService') public kommonitorSingleFeatureMapHelperService: any,
+    private broadcastService: BroadcastService,
+    private http: HttpClient
+  ) {
+    console.log('GeoresourceEditFeaturesModalComponent constructor initialized');
+    this.initializeDefaultValues();
+  }
+
+  ngOnInit(): void {
+    this.initializeDatePickers();
+    this.setupEventListeners();
+    this.initializeMappingConfigStructure();
+    this.buildFeatureTable();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  private initializeDefaultValues(): void {
+    this.attributeMapping_attributeType = this.kommonitorImporterHelperService.attributeMapping_attributeTypes[0];
+    this.availableDatasourceTypes = this.kommonitorImporterHelperService.availableDatasourceTypes;
+    this.availableSpatialUnits = this.kommonitorDataExchangeService.availableSpatialUnits;
+  }
+
+  private initializeMappingConfigStructure(): void {
+    this.georesourceMappingConfigStructure_pretty = this.kommonitorDataExchangeService.syntaxHighlightJSON(
+      this.kommonitorImporterHelperService.mappingConfigStructure
+    );
+  }
+
+  private initializeDatePickers(): void {
+    setTimeout(() => {
+      try {
+        if ((window as any).$) {
+          (window as any).$('#georesourceEditFeaturesDatepickerStart').datepicker(
+            this.kommonitorDataExchangeService.datePickerOptions
+          );
+          (window as any).$('#georesourceEditFeaturesDatepickerEnd').datepicker(
+            this.kommonitorDataExchangeService.datePickerOptions
+          );
+          (window as any).$('#georesourceSingleFeatureDatepickerStart').datepicker(
+            this.kommonitorDataExchangeService.datePickerOptions
+          );
+          (window as any).$('#georesourceSingleFeatureDatepickerEnd').datepicker(
+            this.kommonitorDataExchangeService.datePickerOptions
+          );
+        }
+      } catch (error) {
+        console.warn('Date picker initialization failed:', error);
+      }
+    }, 250);
+  }
+
+  private setupEventListeners(): void {
+    // Setup broadcast listeners
+    const broadcastSubscription = this.broadcastService.currentBroadcastMsg.subscribe(broadcastMsg => {
+      if (broadcastMsg) {
+        if (broadcastMsg.msg === 'onEditGeoresourceFeatures') {
+          this.onEditGeoresourceFeatures(broadcastMsg.values);
+        } else if (broadcastMsg.msg === 'showLoadingIcon_' + this.kommonitorDataGridHelperService?.resourceType_georesource) {
+          this.loadingData = true;
+        } else if (broadcastMsg.msg === 'hideLoadingIcon_' + this.kommonitorDataGridHelperService?.resourceType_georesource) {
+          this.loadingData = false;
+        } else if (broadcastMsg.msg === 'onDeleteFeatureEntry_' + this.kommonitorDataGridHelperService?.resourceType_georesource) {
+          this.broadcastService.broadcast('refreshGeoresourceOverviewTable', { 
+            crudType: 'edit', 
+            targetGeoresourceId: this.currentGeoresourceDataset?.georesourceId 
+          });
+          this.refreshGeoresourceEditFeaturesOverviewTable();
+        }
+      }
+    });
+
+    this.subscriptions.push(broadcastSubscription);
+  }
+
+  onEditGeoresourceFeatures(georesourceDataset: any): void {
+    this.kommonitorMultiStepFormHelperService?.registerClickHandler();
+
+    if (this.currentGeoresourceDataset && 
+        this.currentGeoresourceDataset.datasetName === georesourceDataset.datasetName) {
+      return;
+    }
+
+    this.currentGeoresourceDataset = georesourceDataset;
+    this.resetGeoresourceEditFeaturesForm();
+    this.buildFeatureTable();
+    
+    // Load the georesource features
+    setTimeout(() => {
+      this.refreshGeoresourceEditFeaturesOverviewTable();
+    }, 100);
+  }
+
+  // Step navigation
+  nextStep(): void {
+    if (this.currentStep < 3) {
+      this.currentStep++;
+    }
+  }
+
+  previousStep(): void {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+    }
+  }
+
+  goToStep(step: number): void {
+    if (step >= 1 && step <= 3) {
+      this.currentStep = step;
+    }
+  }
+
+  // Feature table management
+  private buildFeatureTable(): void {
+    this.featureTableGridOptions = this.kommonitorDataGridHelperService.buildDataGrid_featureTable_spatialResource(
+      "georesourceFeatureTable",
+      [],
+      [],
+      undefined,
+      this.kommonitorDataGridHelperService.resourceType_georesource,
+      this.enableDeleteFeatures
+    );
+  }
+
+  refreshGeoresourceEditFeaturesOverviewTable(): void {
+    if (!this.currentGeoresourceDataset) {
+      console.warn('No current georesource dataset selected');
+      return;
+    }
+
+    console.log('Starting refresh of georesource features table...');
+    this.loadingData = true;
+    
+    const url = `${this.kommonitorDataExchangeService.getBaseUrlToKomMonitorDataAPI_spatialResource()}/georesources/${this.currentGeoresourceDataset.georesourceId}/allFeatures`;
+    console.log('Fetching from URL:', url);
+
+    this.http.get(url).subscribe({
+      next: (response: any) => {
+        console.log('Successfully received georesource features data:', response);
+        this.georesourceFeaturesGeoJSON = response;
+        const tmpRemainingHeaders: string[] = [];
+
+        // Extract headers from the first feature's properties
+        if (this.georesourceFeaturesGeoJSON?.features?.[0]?.properties) {
+          console.log('First feature properties:', this.georesourceFeaturesGeoJSON.features[0].properties);
+          for (const property in this.georesourceFeaturesGeoJSON.features[0].properties) {
+            if (property !== __env.FEATURE_ID_PROPERTY_NAME && 
+                property !== __env.FEATURE_NAME_PROPERTY_NAME && 
+                property !== __env.VALID_START_DATE_PROPERTY_NAME && 
+                property !== __env.VALID_END_DATE_PROPERTY_NAME) {
+              tmpRemainingHeaders.push(property);
+            }
+          }
+        }
+
+        this.remainingFeatureHeaders = tmpRemainingHeaders;
+        console.log('Remaining headers:', tmpRemainingHeaders);
+        console.log('Features count:', this.georesourceFeaturesGeoJSON.features?.length || 0);
+        
+        // Rebuild the grid options with new data
+        this.featureTableGridOptions = this.kommonitorDataGridHelperService.buildDataGrid_featureTable_spatialResource(
+          "georesourceFeatureTable", 
+          tmpRemainingHeaders, 
+          this.georesourceFeaturesGeoJSON.features, 
+          this.currentGeoresourceDataset.georesourceId, 
+          this.kommonitorDataGridHelperService.resourceType_georesource, 
+          this.enableDeleteFeatures
+        );
+
+        // If grid API is available, update the data directly
+        if (this.gridApi) {
+          console.log('Updating grid data via API...');
+          // Transform the data to match the expected format
+          const transformedData = (this.georesourceFeaturesGeoJSON.features || []).map((feature: any) => {
+            if (feature.properties) {
+              // Add geometry and record ID to properties
+              feature.properties.kommonitorGeometry = feature.geometry;
+              feature.properties.kommonitorRecordId = feature.id;
+              return feature.properties;
+            }
+            return feature;
+          });
+          console.log('Transformed data for grid:', transformedData);
+          this.gridApi.setRowData(transformedData);
+          // Force refresh of the grid
+          this.gridApi.refreshCells();
+        }
+
+        // Use setTimeout to ensure proper change detection and DOM updates
+        setTimeout(() => {
+          this.loadingData = false;
+          console.log('Loading completed');
+        }, 500); // Increased timeout to show loading state longer
+      },
+      error: (error) => {
+        console.error('Error fetching georesource features:', error);
+        this.handleError(error);
+        setTimeout(() => {
+          this.loadingData = false;
+        }, 500); // Increased timeout to show loading state longer
+      }
+    });
+  }
+
+  onChangeEnableDeleteFeatures(): void {
+    // Rebuild the table with updated delete functionality
+    if (this.currentGeoresourceDataset && this.remainingFeatureHeaders && this.georesourceFeaturesGeoJSON) {
+      this.featureTableGridOptions = this.kommonitorDataGridHelperService.buildDataGrid_featureTable_spatialResource(
+        "georesourceFeatureTable",
+        this.remainingFeatureHeaders,
+        this.georesourceFeaturesGeoJSON.features || [],
+        this.currentGeoresourceDataset.georesourceId,
+        this.kommonitorDataGridHelperService.resourceType_georesource,
+        this.enableDeleteFeatures
+      );
+      
+             // Update grid if API is available
+       if (this.gridApi && this.featureTableGridOptions && this.featureTableGridOptions.columnDefs) {
+         // Update column definitions to include/exclude delete buttons
+         this.gridApi.setColumnDefs(this.featureTableGridOptions.columnDefs);
+       }
+    }
+  }
+
+  clearAllGeoresourceFeatures(): void {
+    if (!this.enableDeleteFeatures || !this.currentGeoresourceDataset) return;
+
+    if (confirm('Sind Sie sicher, dass Sie alle Features dieser Georessource löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.')) {
+      this.loadingData = true;
+
+      this.http.delete(
+        `${this.kommonitorDataExchangeService.baseUrlToKomMonitorDataAPI}/georesources/${this.currentGeoresourceDataset.georesourceId}/allFeatures`
+      ).subscribe({
+        next: (response: any) => {
+          this.loadingData = false;
+          this.refreshGeoresourceEditFeaturesOverviewTable();
+          alert('Alle Features wurden erfolgreich gelöscht.');
+        },
+        error: (error: any) => {
+          this.loadingData = false;
+          console.error('Error deleting features:', error);
+          alert('Fehler beim Löschen der Features.');
+        }
+      });
+    }
+  }
+
+  // Converter and data source methods
+  onChangeConverter(): void {
+    this.schema = '';
+    this.mimeType = '';
+    this.datasourceType = undefined;
+  }
+
+  onChangeMimeType(mimeType: string): void {
+    this.mimeType = mimeType;
+  }
+
+  onChangeDatasourceType(datasourceType: any): void {
+    this.datasourceType = datasourceType;
+  }
+
+  // Validation methods
+  checkPeriodOfValidity(): void {
+    this.periodOfValidityInvalid = false;
+    
+    if (this.periodOfValidity.startDate && this.periodOfValidity.endDate) {
+      const startDate = new Date(this.periodOfValidity.startDate);
+      const endDate = new Date(this.periodOfValidity.endDate);
+      
+      if (startDate >= endDate) {
+        this.periodOfValidityInvalid = true;
+      }
+    }
+  }
+
+  // Attribute mapping methods
+  onAddOrUpdateAttributeMapping(): void {
+    if (!this.attributeMapping_sourceAttributeName || 
+        !this.attributeMapping_destinationAttributeName || 
+        !this.attributeMapping_attributeType) {
+      return;
+    }
+
+    const existingIndex = this.attributeMappings_adminView.findIndex(
+      mapping => mapping.sourceName === this.attributeMapping_sourceAttributeName
+    );
+
+    const newMapping = {
+      sourceName: this.attributeMapping_sourceAttributeName,
+      destinationName: this.attributeMapping_destinationAttributeName,
+      dataType: this.attributeMapping_attributeType
+    };
+
+    if (existingIndex >= 0) {
+      // Update existing mapping
+      this.attributeMappings_adminView[existingIndex] = newMapping;
+    } else {
+      // Add new mapping
+      this.attributeMappings_adminView.push(newMapping);
+    }
+
+    // Clear form
+    this.attributeMapping_sourceAttributeName = '';
+    this.attributeMapping_destinationAttributeName = '';
+    this.attributeMapping_attributeType = this.kommonitorImporterHelperService.attributeMapping_attributeTypes[0];
+  }
+
+  onClickEditAttributeMapping(attributeMappingEntry: any): void {
+    this.attributeMapping_sourceAttributeName = attributeMappingEntry.sourceName;
+    this.attributeMapping_destinationAttributeName = attributeMappingEntry.destinationName;
+    this.attributeMapping_attributeType = attributeMappingEntry.dataType;
+  }
+
+  onClickDeleteAttributeMapping(attributeMappingEntry: any): void {
+    const index = this.attributeMappings_adminView.indexOf(attributeMappingEntry);
+    if (index >= 0) {
+      this.attributeMappings_adminView.splice(index, 1);
+    }
+  }
+
+  // Import/Export methods
+  onImportGeoresourceEditFeaturesMappingConfig(): void {
+    this.georesourceMappingConfigImportError = '';
+    this.mappingConfigImportFile.nativeElement.click();
+  }
+
+  onMappingConfigFileSelected(event: any): void {
+    const file = event.target.files[0];
+    if (file) {
+      this.parseMappingConfigFromFile(file);
+    }
+  }
+
+  private parseMappingConfigFromFile(file: File): void {
+    const fileReader = new FileReader();
+
+    fileReader.onload = (event: any) => {
+      try {
+        this.parseFromMappingConfigFile(event);
+      } catch (error) {
+        console.error('Uploaded Mapping Config File cannot be parsed.');
+        this.georesourceMappingConfigImportError = 'Uploaded Mapping Config File cannot be parsed correctly';
+        const preElement = document.getElementById('georesourcesEditFeaturesMappingConfigPre');
+        if (preElement) {
+          preElement.innerHTML = this.georesourceMappingConfigStructure_pretty;
+        }
+        this.showMappingConfigImportErrorAlert();
+      }
+    };
+
+    fileReader.readAsText(file);
+  }
+
+  private parseFromMappingConfigFile(event: any): void {
+    const mappingConfig = JSON.parse(event.target.result);
+
+    // Apply mapping configuration
+    if (mappingConfig.converter) {
+      this.converter = mappingConfig.converter;
+    }
+    if (mappingConfig.datasourceType) {
+      this.datasourceType = mappingConfig.datasourceType;
+    }
+    if (mappingConfig.propertyMapping) {
+      this.attributeMappings_adminView = mappingConfig.propertyMapping || [];
+    }
+    // Add more mapping config properties as needed
+  }
+
+  onExportGeoresourceEditFeaturesMappingConfig(): void {
+    const mappingConfig = {
+      converter: this.converter,
+      datasourceType: this.datasourceType,
+      propertyMapping: this.attributeMappings_adminView,
+      idProperty: this.georesourceDataSourceIdProperty,
+      nameProperty: this.georesourceDataSourceNameProperty,
+      validityStartDate: this.validityStartDate_perFeature,
+      validityEndDate: this.validityEndDate_perFeature,
+      keepAttributes: this.keepAttributes,
+      keepMissingValues: this.keepMissingValues,
+      isPartialUpdate: this.isPartialUpdate
+    };
+
+    const mappingJSON = JSON.stringify(mappingConfig, null, 2);
+    let fileName = 'Georessource_Features_Mapping_Export';
+
+    if (this.currentGeoresourceDataset?.datasetName) {
+      fileName += '-' + this.currentGeoresourceDataset.datasetName;
+    }
+
+    fileName += '.json';
+
+    const blob = new Blob([mappingJSON], { type: 'application/json' });
+    const data = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.download = fileName;
+    a.href = data;
+    a.textContent = 'JSON';
+    a.target = '_blank';
+    a.rel = 'noopener noreferrer';
+    a.click();
+
+    a.remove();
+  }
+
+  // Main edit method
+  editGeoresourceFeatures(): void {
+    if (!this.currentGeoresourceDataset || !this.converter || !this.datasourceType) {
+      return;
+    }
+
+    this.loadingData = true;
+
+    // Build the request body
+    const putBody = this.buildPutBody();
+
+    this.http.put(
+      `${this.kommonitorDataExchangeService.baseUrlToKomMonitorDataAPI}/georesources/${this.currentGeoresourceDataset.georesourceId}/features`,
+      putBody
+    ).subscribe({
+      next: (response: any) => {
+        this.successMessagePart = this.currentGeoresourceDataset.datasetName;
+        this.importedFeatures = response.importedFeatures || [];
+        this.broadcastService.broadcast('refreshGeoresourceOverviewTable', { 
+          crudType: 'edit', 
+          targetGeoresourceId: this.currentGeoresourceDataset.georesourceId 
+        });
+        this.showSuccessAlert();
+        this.loadingData = false;
+      },
+      error: (error: any) => {
+        if (error.error) {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error.error);
+        } else {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+        }
+        this.importerErrors = error.error?.importerErrors || [];
+        this.showErrorAlert();
+        this.loadingData = false;
+      }
+    });
+  }
+
+  private buildPutBody(): any {
+    const putBody: any = {
+      geoJsonString: '',
+      periodOfValidity: {
+        startDate: this.periodOfValidity.startDate,
+        endDate: this.periodOfValidity.endDate
+      }
+    };
+
+    // Add converter definition
+    putBody.converterDefinition = {
+      name: this.converter.name,
+      parameters: this.getConverterParameters()
+    };
+
+    // Add datasource definition
+    putBody.datasourceTypeDefinition = {
+      type: this.datasourceType.type,
+      parameters: this.getDatasourceParameters()
+    };
+
+    // Add property mapping
+    putBody.propertyMappingDefinition = {
+      idProperty: this.georesourceDataSourceIdProperty,
+      nameProperty: this.georesourceDataSourceNameProperty,
+      validityStartDateProperty: this.validityStartDate_perFeature,
+      validityEndDateProperty: this.validityEndDate_perFeature,
+      keepAttributes: this.keepAttributes,
+      keepMissingValues: this.keepMissingValues,
+      attributeMappings: this.attributeMappings_adminView
+    };
+
+    // Add partial update flag
+    putBody.isPartialUpdate = this.isPartialUpdate;
+
+    return putBody;
+  }
+
+  private getConverterParameters(): any {
+    const parameters: any = {};
+    
+    if (this.converter.parameters) {
+      this.converter.parameters.forEach((param: any) => {
+        const element = document.getElementById(`converterParameter_georesourceEditFeatures_${param.name}`);
+        if (element) {
+          parameters[param.name] = (element as HTMLInputElement).value;
+        }
+      });
+    }
+
+    if (this.schema) {
+      parameters.schema = this.schema;
+    }
+    if (this.mimeType) {
+      parameters.mimeType = this.mimeType;
+    }
+
+    return parameters;
+  }
+
+  private getDatasourceParameters(): any {
+    const parameters: any = {};
+
+    if (this.datasourceType.type === 'FILE') {
+      // Handle file upload
+      const fileInput = document.getElementById('georesourceDataSourceInput_editFeatures') as HTMLInputElement;
+      if (fileInput && fileInput.files && fileInput.files[0]) {
+        // File will be handled separately in actual implementation
+        parameters.file = fileInput.files[0];
+      }
+    } else if (this.datasourceType.type === 'OGCAPI_FEATURES') {
+      // Handle BBOX parameters
+      if (this.bboxType === 'ref' && this.bboxRefSpatialUnit) {
+        parameters.spatialUnitId = this.bboxRefSpatialUnit.spatialUnitId;
+      } else if (this.bboxType === 'literal') {
+        const minx = (document.getElementById('datasourceTypeParameter_georesourceEditFeatures_bbox_minx') as HTMLInputElement)?.value;
+        const miny = (document.getElementById('datasourceTypeParameter_georesourceEditFeatures_bbox_miny') as HTMLInputElement)?.value;
+        const maxx = (document.getElementById('datasourceTypeParameter_georesourceEditFeatures_bbox_maxx') as HTMLInputElement)?.value;
+        const maxy = (document.getElementById('datasourceTypeParameter_georesourceEditFeatures_bbox_maxy') as HTMLInputElement)?.value;
+        
+        parameters.bbox = `${minx},${miny},${maxx},${maxy}`;
+      }
+    }
+
+    // Add other datasource parameters
+    if (this.datasourceType.parameters) {
+      this.datasourceType.parameters.forEach((param: any) => {
+        if (param.name !== 'bbox') {
+          const element = document.getElementById(`datasourceTypeParameter_georesourceEditFeatures_${param.name}`);
+          if (element) {
+            parameters[param.name] = (element as HTMLTextAreaElement).value;
+          }
+        }
+      });
+    }
+
+    return parameters;
+  }
+
+  // Filter methods
+  getFilteredConverters(): any[] {
+    return this.kommonitorImporterHelperService.availableConverters.filter(
+      this.kommonitorImporterHelperService.filterConverters('georesource')
+    );
+  }
+
+  getFilteredDatasourceParameters(): any[] {
+    if (!this.datasourceType?.parameters) return [];
+    return this.datasourceType.parameters.filter((param: any) => param.name !== 'bbox');
+  }
+
+  // Form reset
+  resetGeoresourceEditFeaturesForm(): void {
+    this.currentStep = 1;
+    this.enableDeleteFeatures = false;
+    
+    // Reset all form fields
+    this.converter = undefined;
+    this.schema = '';
+    this.mimeType = '';
+    this.datasourceType = undefined;
+    this.georesourceDataSourceIdProperty = '';
+    this.georesourceDataSourceNameProperty = '';
+    this.validityStartDate_perFeature = '';
+    this.validityEndDate_perFeature = '';
+    
+    this.periodOfValidity = {
+      startDate: '',
+      endDate: ''
+    };
+    this.periodOfValidityInvalid = false;
+    
+    this.isPartialUpdate = false;
+    this.keepAttributes = true;
+    this.keepMissingValues = true;
+    
+    this.attributeMappings_adminView = [];
+    this.attributeMapping_sourceAttributeName = '';
+    this.attributeMapping_destinationAttributeName = '';
+    this.attributeMapping_attributeType = this.kommonitorImporterHelperService.attributeMapping_attributeTypes[0];
+    
+    this.bboxType = '';
+    this.bboxRefSpatialUnit = undefined;
+    
+    // Reset messages
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+    this.importerErrors = undefined;
+    this.importedFeatures = [];
+  }
+
+  // Alert methods
+  showSuccessAlert(): void {
+    const alertElement = document.getElementById('georesourceEditFeaturesSuccessAlert');
+    if (alertElement) {
+      alertElement.hidden = false;
+    }
+  }
+
+  showErrorAlert(): void {
+    const alertElement = document.getElementById('georesourceEditFeaturesErrorAlert');
+    if (alertElement) {
+      alertElement.hidden = false;
+    }
+  }
+
+  showMappingConfigImportErrorAlert(): void {
+    const alertElement = document.getElementById('georesourceEditFeaturesMappingConfigImportErrorAlert');
+    if (alertElement) {
+      alertElement.hidden = false;
+    }
+  }
+
+  hideSuccessAlert(): void {
+    const alertElement = document.getElementById('georesourceEditFeaturesSuccessAlert');
+    if (alertElement) {
+      alertElement.hidden = true;
+    }
+  }
+
+  hideErrorAlert(): void {
+    const alertElement = document.getElementById('georesourceEditFeaturesErrorAlert');
+    if (alertElement) {
+      alertElement.hidden = true;
+    }
+  }
+
+  hideMappingConfigErrorAlert(): void {
+    const alertElement = document.getElementById('georesourceEditFeaturesMappingConfigImportErrorAlert');
+    if (alertElement) {
+      alertElement.hidden = true;
+    }
+  }
+
+  // Validation for form submission
+  canSubmitForm(): boolean {
+    return !!this.currentGeoresourceDataset?.datasetName &&
+           !!this.georesourceDataSourceIdProperty &&
+           !!this.georesourceDataSourceNameProperty &&
+           !!this.periodOfValidity.startDate &&
+           !this.periodOfValidityInvalid &&
+           !!this.converter &&
+           !!this.datasourceType;
+  }
+
+  // AG-Grid event handlers
+  onGridReady(event: GridReadyEvent): void {
+    this.gridApi = event.api;
+    this.columnApi = event.columnApi;
+    console.log('Grid is ready, API initialized');
+    
+    // Auto-size columns to fit content
+    this.gridApi.sizeColumnsToFit();
+  }
+
+  onFirstDataRendered(event: FirstDataRenderedEvent): void {
+    // Handle first data rendered event
+  }
+
+  onColumnResized(event: ColumnResizedEvent): void {
+    // Handle column resize event
+  }
+
+  onCellValueChanged(params: any): void {
+    // Handle cell value changes here
+    console.log('Cell value changed:', params);
+    
+    // TODO: Implement API call to update the feature in the backend
+    // Similar to the AngularJS version's cell update functionality
+  }
+
+  private handleError(error: any): void {
+    console.error('Error occurred:', error);
+    if (error.data) {
+      this.errorMessagePart = this.kommonitorDataExchangeService?.syntaxHighlightJSON(error.data) || 'An error occurred';
+    } else {
+      this.errorMessagePart = this.kommonitorDataExchangeService?.syntaxHighlightJSON(error) || 'An error occurred';
+    }
+    this.showErrorAlert();
+  }
+
+  // Modal control
+  cancel(): void {
+    this.activeModal.dismiss();
+  }
+} 
\ No newline at end of file

From 018c838aed6e21407dc6e66b4a481a7ccfada90d Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Mon, 21 Jul 2025 20:26:07 +0530
Subject: [PATCH 029/120] migrate georesource edit user roles modal component

---
 app/app.module.ts                             |   9 +-
 ...admin-georesources-management.component.ts |  20 +-
 ...esource-edit-features-modal.component.html |   4 +-
 ...source-edit-user-roles-modal.component.css | 241 +++++++++
 ...ource-edit-user-roles-modal.component.html | 151 ++++++
 ...esource-edit-user-roles-modal.component.ts | 462 ++++++++++++++++++
 6 files changed, 882 insertions(+), 5 deletions(-)
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component.css
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component.html
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index 9813e40ff..b0498f482 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -96,6 +96,7 @@ import { GeoresourceAddModalComponent } from './components/ngComponents/admin/ad
 import { GeoresourceBatchUpdateModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceBatchUpdateModal/georesource-batch-update-modal.component';
 import { GeoresourceEditMetadataModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component';
 import { GeoresourceEditFeaturesModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component';
+import { GeoresourceEditUserRolesModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component';
 
 
 // currently the AngularJS routing is still used as part of kommonitorClient module
@@ -201,7 +202,8 @@ declare var MathJax;
     GeoresourceAddModalComponent,
     GeoresourceBatchUpdateModalComponent,
     GeoresourceEditMetadataModalComponent,
-    GeoresourceEditFeaturesModalComponent
+    GeoresourceEditFeaturesModalComponent,
+    GeoresourceEditUserRolesModalComponent
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
@@ -352,6 +354,11 @@ export class AppModule implements DoBootstrap {
         component: GeoresourceEditFeaturesModalComponent
       }) as angular.IDirectiveFactory);
 
+    angular.module('kommonitorAdmin')
+      .directive('georesourceEditUserRolesModalNew', downgradeComponent({
+        component: GeoresourceEditUserRolesModalComponent
+      }) as angular.IDirectiveFactory);
+
     console.log("registered downgraded Angular components for AngularJS usage");
   }
 
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
index cb35b7127..63fe13fda 100644
--- a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
@@ -11,6 +11,7 @@ import { GeoresourceAddModalComponent } from './georesourceAddModal/georesource-
 import { GeoresourceBatchUpdateModalComponent } from './georesourceBatchUpdateModal/georesource-batch-update-modal.component';
 import { GeoresourceEditMetadataModalComponent } from './georesourceEditMetadataModal/georesource-edit-metadata-modal.component';
 import { GeoresourceEditFeaturesModalComponent } from './georesourceEditFeaturesModal/georesource-edit-features-modal.component';
+import { GeoresourceEditUserRolesModalComponent } from './georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component';
 
 // Declare jQuery for AdminLTE
 declare const $: any;
@@ -330,8 +331,23 @@ export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy,
   }
 
   public onClickEditUserRoles(georesourceDataset: any): void {
-    // submit selected georesource to modal controller
-    this.broadcastService.broadcast('onEditGeoresourcesUserRoles', georesourceDataset);
+    const modalRef = this.modalService.open(GeoresourceEditUserRolesModalComponent, {
+      size: 'xl',
+      backdrop: 'static',
+      keyboard: false,
+      container: 'body',
+      animation: false
+    });
+    modalRef.componentInstance.currentGeoresourceDataset = georesourceDataset;
+    
+    modalRef.result.then((result) => {
+      if (result) {
+        // Handle successful edit
+        this.refreshGeoresourceOverviewTable('edit', georesourceDataset.georesourceId);
+      }
+    }, (reason) => {
+      // Modal dismissed
+    });
   }
 
   public onClickDeleteGeoresource(georesourceDataset: any): void {
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.html b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.html
index b819d4ddd..3d7c37908 100644
--- a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.html
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component.html
@@ -81,8 +81,8 @@ 
Optionale Anzeige der Feature-Details

               style="height: 50vh; width: 100%;"
               class="ag-theme-alpine"
               [gridOptions]="featureTableGridOptions"
-              [rowData]="featureTableGridOptions?.rowData || []"
-              [columnDefs]="featureTableGridOptions?.columnDefs || []"
+                             [rowData]="featureTableGridOptions.rowData || []"
+               [columnDefs]="featureTableGridOptions.columnDefs || []"
               (gridReady)="onGridReady($event)"
               (firstDataRendered)="onFirstDataRendered($event)"
               (columnResized)="onColumnResized($event)"
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component.css b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component.css
new file mode 100644
index 000000000..4ef9b936d
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component.css
@@ -0,0 +1,241 @@
+/* Progress bar styling */
+#progressbar {
+  margin-bottom: 30px;
+  overflow: hidden;
+  color: lightgrey;
+  padding-left: 0px;
+  margin-top: 20px;
+}
+
+#progressbar li {
+  list-style-type: none;
+  font-size: 14px;
+  width: 25%;
+  float: left;
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+}
+
+#progressbar li:hover {
+  color: #337ab7;
+}
+
+#progressbar li.active {
+  color: #337ab7;
+}
+
+#progressbar li:before {
+  width: 30px;
+  height: 30px;
+  line-height: 28px;
+  display: block;
+  font-size: 12px;
+  color: #ffffff;
+  background: lightgray;
+  border-radius: 50%;
+  margin: 0 auto 10px auto;
+  content: counter(step);
+  counter-increment: step;
+}
+
+#progressbar li.active:before {
+  background: #337ab7;
+}
+
+/* Form styling */
+.fs-title {
+  font-size: 24px;
+  text-transform: uppercase;
+  color: #2C3E50;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.fs-subtitle {
+  font-weight: normal;
+  font-size: 16px;
+  color: #666;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+/* Action buttons */
+.action-button-previous {
+  width: 100px;
+  background: #C5C5F1;
+  font-weight: bold;
+  color: white;
+  border: 0 none;
+  border-radius: 0px;
+  cursor: pointer;
+  padding: 10px 5px;
+  margin: 10px 5px;
+}
+
+.action-button-previous:hover,
+.action-button-previous:focus {
+  box-shadow: 0 0 0 2px white, 0 0 0 3px #C5C5F1;
+}
+
+/* Switch toggle styles */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+  margin: 0 10px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switchslider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.switchslider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .switchslider {
+  background-color: #2196F3;
+}
+
+input:focus + .switchslider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .switchslider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+.switchslider.round {
+  border-radius: 34px;
+}
+
+.switchslider.round:before {
+  border-radius: 50%;
+}
+
+/* Loading overlay */
+.loading-overlay-admin-panel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading-overlay-admin-panel.ng-hide {
+  display: none !important;
+}
+
+.icon-spin {
+  animation: spin 1s infinite linear;
+  font-size: 24px;
+  color: #337ab7;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Vertical alignment helper */
+.vertical-align {
+  display: flex;
+  align-items: center;
+}
+
+.margin-right {
+  margin-right: 10px;
+}
+
+/* Alert customization */
+.alert {
+  margin-bottom: 20px;
+}
+
+.alert-dismissable .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  color: inherit;
+}
+
+/* Form group spacing */
+.form-group {
+  margin-bottom: 15px;
+}
+
+/* Input group styling */
+.input-group-addon {
+  background-color: #eee;
+  border: 1px solid #ccc;
+  border-radius: 4px 0 0 4px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  text-align: center;
+  min-width: 40px;
+}
+
+/* Help block styling */
+.help-block {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  color: #737373;
+  font-size: 13px;
+}
+
+/* Select styling */
+select.form-control {
+  height: auto;
+  min-height: 34px;
+}
+
+/* Modal specific adjustments */
+.modal-header {
+  padding: 15px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.modal-footer {
+  padding: 15px;
+  text-align: right;
+  border-top: 1px solid #e5e5e5;
+}
+
+.modal-body {
+  position: relative;
+  padding: 15px;
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component.html b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component.html
new file mode 100644
index 000000000..b82ebe2fb
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component.html
@@ -0,0 +1,151 @@
+

+  
+  
Zugriffsschutz und Eigentuümerschaft der Georesource {{currentGeoresourceDataset?.datasetName}} editieren

+

+
+

+  

+    

+      
+    

+  

+
+  
+  

+    

+      

+        
+        

+          
    
+            
  • Zugriffsschutz
    • 
+            
  • Eigentuümerschaft
    • 
+          

+        

+        
+
+        

+          
Zugriffsschutz

+          
Vergabe der Zugriffsrechte auf Datensatz-Metadaten und -Features pro Organisationseinheit

+
+          
Zugriffsrechte (lesen, editieren) müssen explizit vergeben werden

+
+          

+            

+              

+                
+                
+              

+            

+            

+              
+              
+              

+                

+                  Öffentlich freigegebene Datensätze können ohne Login abgerufen werden.
+                

+              

+            

+            

+              
+              
+            

+            

+              

+                Als Eigentümer-Organisation des Datensatzes können Sie Lese- und Editier-Rechte an die eigene und weitere Organisationseinheiten vergeben.
+              

+            

+          

+
+          
+        

+
+        

+          
Eigentuümerschaft eines Datensatzes

+          
Übetragen der Eigentuümerschaft von Datensätzen mit allen dazugehörigen Rechten

+          

+            Bitte beachten Sie, dass Sie beim Übertragen einer Eigentuümerschaft einer Resource unter Umständen jegliche Rechte eben dieser verlieren.
Die Rechte werden unwiderruflich und sofort an den neuen Eigentümer übertragen.
+          

+          

+            

+            

+              
+              

+                
+                
+              

+              
+              
+            

+            

+              
+              
{{getCurrentOwnerName()}}

+              

+                

+                  ACHTUNG: Sie sind dabei, die Eigentuümerschaft an diesem Datensatz zu ändern.
+                

+              

+            

+          

+
+          
+        

+      

+    

+  

+

+
+

+  
+  
+  
+

+
+
+

+  
+  
Zugriffsschutz und Eigentuümerschaft aktualisiert

+  Erfolgreiche Aktualisierung des Zugriffsschutzes und der Eigentuümerschaft für die Georessource '{{successMessagePart}}'
+

+
+
+

+  
+  
Aktualisierung gescheitert

+  Bei der Aktualisierung des Zugriffsschutzes und der Eigentuümerschaft ist ein Fehler aufgetreten. Fehlermeldung:
+  

+  

+
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component.ts
new file mode 100644
index 000000000..2756d328c
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component.ts
@@ -0,0 +1,462 @@
+import { Component, OnInit, OnDestroy, Inject, ViewChild, ElementRef } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { HttpClient } from '@angular/common/http';
+import { Subscription } from 'rxjs';
+import { AgGridAngular } from 'ag-grid-angular';
+import { ColDef, GridOptions, GridApi, ColumnApi, GridReadyEvent, FirstDataRenderedEvent, ColumnResizedEvent } from 'ag-grid-community';
+import { KommonitorDataGridHelperService } from 'services/adminSpatialUnit/kommonitor-data-grid-helper.service';
+
+declare const $: any;
+declare const __env: any;
+
+@Component({
+  selector: 'georesource-edit-user-roles-modal-new',
+  templateUrl: './georesource-edit-user-roles-modal.component.html',
+  styleUrls: ['./georesource-edit-user-roles-modal.component.css']
+})
+export class GeoresourceEditUserRolesModalComponent implements OnInit, OnDestroy {
+  @ViewChild('roleManagementTable', { static: true }) roleManagementTable!: AgGridAngular;
+
+  // Multi-step form
+  currentStep = 1;
+  totalSteps = 2;
+
+  // Form data
+  loadingData = false;
+  errorMessage = '';
+  successMessage = '';
+
+  // Current dataset being edited
+  private _currentGeoresourceDataset: any;
+
+  get currentGeoresourceDataset(): any {
+    return this._currentGeoresourceDataset;
+  }
+
+  set currentGeoresourceDataset(value: any) {
+    console.log('Setting currentGeoresourceDataset:', value);
+    this._currentGeoresourceDataset = value;
+    if (value) {
+      setTimeout(() => {
+        this.resetGeoresourceEditUserRolesForm();
+        this.kommonitorMultiStepFormHelperService.registerClickHandler();
+      }, 100);
+    }
+  }
+
+  // Role management
+  roleManagementTableOptions: GridOptions = {};
+  private gridApi!: GridApi;
+  private columnApi!: ColumnApi;
+
+  // Form fields
+  activeRolesOnly = true;
+  permissions: any[] = [];
+  resourcesCreatorRights: any[] = [];
+  ownerOrgFilter = '';
+  ownerOrganization: any;
+
+  // Messages
+  successMessagePart = '';
+  errorMessagePart = '';
+
+  // Subscriptions
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
+    @Inject('kommonitorMultiStepFormHelperService') public kommonitorMultiStepFormHelperService: any,
+    private kommonitorDataGridHelperService: KommonitorDataGridHelperService,
+    private broadcastService: BroadcastService,
+    private http: HttpClient
+  ) {
+    console.log('GeoresourceEditUserRolesModalComponent constructor initialized');
+  }
+
+  ngOnInit(): void {
+    console.log('GeoresourceEditUserRolesModalComponent ngOnInit');
+    console.log('kommonitorDataExchangeService:', this.kommonitorDataExchangeService);
+    console.log('accessControl:', this.kommonitorDataExchangeService?.accessControl);
+    
+    this.setupEventListeners();
+    this.prepareCreatorList();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  private setupEventListeners(): void {
+    // Setup broadcast listeners
+    const broadcastSubscription = this.broadcastService.currentBroadcastMsg.subscribe(broadcastMsg => {
+      if (broadcastMsg) {
+        if (broadcastMsg.msg === 'onEditGeoresourcesUserRoles') {
+          this.onEditGeoresourcesUserRoles(broadcastMsg.values);
+        } else if (broadcastMsg.msg === 'availableRolesUpdate') {
+          this.refreshRoleManagementTable();
+        }
+      }
+    });
+
+    this.subscriptions.push(broadcastSubscription);
+  }
+
+  onEditGeoresourcesUserRoles(georesourceDataset: any): void {
+    this.currentGeoresourceDataset = georesourceDataset;
+    this.prepareCreatorList();
+    this.resetGeoresourceEditUserRolesForm();
+    this.kommonitorMultiStepFormHelperService?.registerClickHandler('georesourceEditUserRolesForm');
+  }
+
+  prepareCreatorList(): void {
+    if (this.kommonitorDataExchangeService.currentKomMonitorLoginRoleNames.length > 0) {
+      const creatorRights: string[] = [];
+      const creatorRightsChildren: string[] = [];
+      
+      this.kommonitorDataExchangeService.currentKomMonitorLoginRoleNames.forEach((roles: string) => {
+        const key = roles.split('.')[0];
+        const role = roles.split('.')[1];
+
+        // case unit-resources-creator
+        if (role === 'unit-resources-creator' && !this.resourcesCreatorRights.includes(key)) {
+          creatorRights.push(key);
+        }
+
+        // case client-resources-creator, gather unit-ids first, then fetch all unit-data
+        if (role === 'client-resources-creator' && !creatorRightsChildren.includes(key)) {
+          creatorRightsChildren.push(key);
+        }
+      });
+
+      // gather all children
+      this.gatherCreatorRightsChildren(creatorRights, creatorRightsChildren);
+
+      this.resourcesCreatorRights = this.kommonitorDataExchangeService.accessControl.filter(
+        (elem: any) => creatorRights.includes(elem.name)
+      );
+    }
+  }
+
+  private gatherCreatorRightsChildren(creatorRights: string[], creatorRightsChildren: string[]): void {
+    if (creatorRightsChildren.length > 0) {
+      this.kommonitorDataExchangeService.accessControl
+        .filter((elem: any) => creatorRightsChildren.includes(elem.name))
+        .flatMap((res: any) => res.children)
+        .forEach((child: any) => {
+          this.kommonitorDataExchangeService.accessControl
+            .filter((elem: any) => elem.organizationalUnitId === child)
+            .forEach((childData: any) => {
+              creatorRights.push(childData.name);
+              this.gatherCreatorRightsChildren(creatorRights, [childData.name]);
+            });
+        });
+    }
+  }
+
+  refreshRoleManagementTable(): void {
+    console.log('refreshRoleManagementTable called');
+    console.log('currentGeoresourceDataset:', this.currentGeoresourceDataset);
+    
+    this.permissions = this.currentGeoresourceDataset ? this.currentGeoresourceDataset.permissions : [];
+    console.log('permissions:', this.permissions);
+
+    // set datasetOwner to disable checkboxes for owned datasets in permissions-table
+    if (this.kommonitorDataExchangeService.accessControl) {
+      this.kommonitorDataExchangeService.accessControl.forEach((item: any) => {
+        if (this.currentGeoresourceDataset) {
+          if (item.organizationalUnitId === this.currentGeoresourceDataset.ownerId) {
+            item.datasetOwner = true;
+          } else {
+            item.datasetOwner = false;
+          }
+        }
+      });
+    }
+
+    if (this.permissions.length === 0) {
+      this.activeRolesOnly = false;
+    }
+
+    let access = this.kommonitorDataExchangeService.accessControl || [];
+    console.log('accessControl before filter:', access);
+    
+    if (this.permissions.length > 0 && this.activeRolesOnly) {
+      access = this.kommonitorDataExchangeService.accessControl.filter((unit: any) => {
+        return unit.permissions.filter((unitPermission: any) => 
+          this.permissions.includes(unitPermission.permissionId)
+        ).length > 0;
+      });
+    }
+    
+    console.log('accessControl after filter:', access);
+
+    this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+      'georesourceEditRoleManagementTable', 
+      this.roleManagementTableOptions, 
+      access, 
+      this.permissions, 
+      true
+    );
+    
+    console.log('roleManagementTableOptions created:', this.roleManagementTableOptions);
+  }
+
+  onActiveRolesOnlyChange(): void {
+    this.activeRolesOnly = !this.activeRolesOnly;
+    this.refreshRoleManagementTable();
+  }
+
+  onChangeOwner(ownerOrganization: any): void {
+    this.ownerOrganization = ownerOrganization;
+    console.log('Target creator role selected to be', this.ownerOrganization);
+    this.refreshRoles(ownerOrganization);
+  }
+
+  private refreshRoles(orgUnitId: any): void {
+    const permissionIds_ownerUnit = orgUnitId ? 
+      this.kommonitorDataExchangeService.getAccessControlById(orgUnitId).permissions
+        .filter((permission: any) => permission.permissionLevel === 'viewer' || permission.permissionLevel === 'editor')
+        .map((permission: any) => permission.permissionId) : [];
+
+    // set datasetOwner to disable checkboxes for owned datasets in permissions-table
+    this.kommonitorDataExchangeService.accessControl.forEach((item: any) => {
+      if (item.organizationalUnitId === orgUnitId) {
+        item.datasetOwner = true;
+      } else {
+        item.datasetOwner = false;
+      }
+    });
+
+    this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+      'georesourceEditRoleManagementTable', 
+      this.roleManagementTableOptions, 
+      this.kommonitorDataExchangeService.accessControl, 
+      permissionIds_ownerUnit, 
+      true
+    );
+  }
+
+  // Step navigation
+  nextStep(): void {
+    if (this.currentStep < this.totalSteps) {
+      this.currentStep++;
+    }
+  }
+
+  previousStep(): void {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+    }
+  }
+
+  goToStep(step: number): void {
+    if (step >= 1 && step <= this.totalSteps) {
+      this.currentStep = step;
+    }
+  }
+
+  // AG Grid event handlers
+  onGridReady(event: GridReadyEvent): void {
+    this.gridApi = event.api;
+    this.columnApi = event.columnApi;
+    console.log('Role management grid is ready, API initialized');
+  }
+
+  onFirstDataRendered(event: FirstDataRenderedEvent): void {
+    // Handle first data rendered event
+  }
+
+  onColumnResized(event: ColumnResizedEvent): void {
+    // Handle column resize event
+  }
+
+  // Form actions
+  editGeoresourceEditUserRolesForm(): void {
+    if (this.ownerOrganization !== undefined && this.ownerOrganization !== this.currentGeoresourceDataset.ownerId) {
+      if (!confirm('Sind Sie sicher, dass Sie den Eigentümerschaft an dieser Resource endgültig und unwiderruflich übertragen und damit abgeben wollen?')) {
+        return;
+      }
+    }
+
+    this.putUserRoles();
+    this.putOwnership();
+  }
+
+  putUserRoles(): void {
+    this.loadingData = true;
+
+    const putBody = {
+      permissions: this.getSelectedRoleIds(),
+      isPublic: this.currentGeoresourceDataset.isPublic
+    };
+
+    this.http.put(
+      `${this.kommonitorDataExchangeService.baseUrlToKomMonitorDataAPI}/georesources/${this.currentGeoresourceDataset.georesourceId}/permissions`,
+      putBody,
+      {
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    ).subscribe({
+      next: (response: any) => {
+        this.successMessagePart = this.currentGeoresourceDataset.datasetName;
+        this.broadcastService.broadcast('refreshGeoresourceOverviewTable', {
+          crudType: 'edit',
+          targetGeoresourceId: this.currentGeoresourceDataset.georesourceId
+        });
+        this.showSuccessAlert();
+        setTimeout(() => {
+          this.loadingData = false;
+        }, 250);
+      },
+      error: (error: any) => {
+        this.errorMessagePart = 'Fehler beim Aktualisieren der Zugriffsrechte. Fehler lautet: \n\n';
+        if (error.data) {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error.data);
+        } else {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+        }
+        this.showErrorAlert();
+        setTimeout(() => {
+          this.loadingData = false;
+        }, 250);
+      }
+    });
+  }
+
+  putOwnership(): void {
+    this.loadingData = true;
+
+    const putBody = {
+      ownerId: this.ownerOrganization === undefined ? this.currentGeoresourceDataset.ownerId : this.ownerOrganization
+    };
+
+    this.http.put(
+      `${this.kommonitorDataExchangeService.baseUrlToKomMonitorDataAPI}/georesources/${this.currentGeoresourceDataset.georesourceId}/ownership`,
+      putBody,
+      {
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    ).subscribe({
+      next: (response: any) => {
+        this.successMessagePart = this.currentGeoresourceDataset.datasetName;
+        this.broadcastService.broadcast('refreshGeoresourceOverviewTable', {
+          crudType: 'edit',
+          targetGeoresourceId: this.currentGeoresourceDataset.georesourceId
+        });
+        this.showSuccessAlert();
+        setTimeout(() => {
+          this.loadingData = false;
+        }, 250);
+      },
+      error: (error: any) => {
+        this.errorMessagePart = 'Fehler beim Aktualisieren der Eigentümerschaft. Fehler lautet: \n\n';
+        if (error.data) {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error.data);
+        } else {
+          this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+        }
+        this.showErrorAlert();
+        setTimeout(() => {
+          this.loadingData = false;
+        }, 250);
+      }
+    });
+  }
+
+  resetGeoresourceEditUserRolesForm(): void {
+    this.ownerOrganization = this.currentGeoresourceDataset?.ownerId;
+    this.refreshRoleManagementTable();
+    this.ownerOrgFilter = '';
+    this.successMessagePart = '';
+    this.errorMessagePart = '';
+    this.hideSuccessAlert();
+    this.hideErrorAlert();
+
+    setTimeout(() => {
+      // Trigger change detection if needed
+    }, 250);
+  }
+
+  // Helper methods
+  getFilteredOrganizations(): any[] {
+    if (!this.ownerOrgFilter) {
+      return this.kommonitorDataExchangeService.accessControl || [];
+    }
+    return this.kommonitorDataExchangeService.accessControl?.filter((org: any) =>
+      org.name.toLowerCase().includes(this.ownerOrgFilter.toLowerCase())
+    ) || [];
+  }
+
+  getFilteredCreatorRights(): any[] {
+    if (!this.ownerOrgFilter) {
+      return this.resourcesCreatorRights;
+    }
+    return this.resourcesCreatorRights.filter((org: any) =>
+      org.name.toLowerCase().includes(this.ownerOrgFilter.toLowerCase())
+    );
+  }
+
+  getCurrentOwnerName(): string {
+    if (this.currentGeoresourceDataset?.ownerId) {
+      const owner = this.kommonitorDataExchangeService.getAccessControlById(this.currentGeoresourceDataset.ownerId);
+      return owner ? owner.name : '';
+    }
+    return '';
+  }
+
+  // Helper method to get selected role IDs from the grid
+  private getSelectedRoleIds(): string[] {
+    const ids: string[] = [];
+    const deselectedIds: string[] = [];
+    
+    if (this.gridApi) {
+      this.gridApi.forEachNode((node: any, index: number) => {
+        if (node.data) {
+          for (const permission of node.data.permissions) {
+            if (permission) {
+              if (permission.isChecked) {
+                if (!deselectedIds.includes(permission.permissionId)) {
+                  ids.push(permission.permissionId);
+                }
+              } else {
+                deselectedIds.push(permission.permissionId);
+              }
+            }
+          }
+        }
+      });
+    }
+    
+    return ids;
+  }
+
+  // Alert methods
+  showSuccessAlert(): void {
+    this.successMessage = 'Zugriffsschutz und Eigentümerschaft erfolgreich aktualisiert';
+    setTimeout(() => this.hideSuccessAlert(), 5000);
+  }
+
+  hideSuccessAlert(): void {
+    this.successMessage = '';
+  }
+
+  showErrorAlert(): void {
+    setTimeout(() => this.hideErrorAlert(), 10000);
+  }
+
+  hideErrorAlert(): void {
+    this.errorMessage = '';
+    this.errorMessagePart = '';
+  }
+
+  // Modal control methods
+  cancel(): void {
+    this.activeModal.dismiss();
+  }
+} 
\ No newline at end of file

From 69cc78fba7ea5f58cc34fa64511ce70d8266ec3b Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Mon, 21 Jul 2025 20:37:34 +0530
Subject: [PATCH 030/120] migrate geo resource delete modal

---
 app/app.module.ts                             |   9 +-
 ...admin-georesources-management.component.ts |  20 +-
 .../georesource-delete-modal.component.css    | 183 ++++++++++++
 .../georesource-delete-modal.component.html   | 176 +++++++++++
 .../georesource-delete-modal.component.ts     | 278 ++++++++++++++++++
 ...monitor-data-grid-helper-service.module.js |  26 +-
 6 files changed, 683 insertions(+), 9 deletions(-)
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component.css
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component.html
 create mode 100644 app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component.ts

diff --git a/app/app.module.ts b/app/app.module.ts
index b0498f482..382d05b87 100644
--- a/app/app.module.ts
+++ b/app/app.module.ts
@@ -97,6 +97,7 @@ import { GeoresourceBatchUpdateModalComponent } from './components/ngComponents/
 import { GeoresourceEditMetadataModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditMetadataModal/georesource-edit-metadata-modal.component';
 import { GeoresourceEditFeaturesModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditFeaturesModal/georesource-edit-features-modal.component';
 import { GeoresourceEditUserRolesModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component';
+import { GeoresourceDeleteModalComponent } from './components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component';
 
 
 // currently the AngularJS routing is still used as part of kommonitorClient module
@@ -203,7 +204,8 @@ declare var MathJax;
     GeoresourceBatchUpdateModalComponent,
     GeoresourceEditMetadataModalComponent,
     GeoresourceEditFeaturesModalComponent,
-    GeoresourceEditUserRolesModalComponent
+    GeoresourceEditUserRolesModalComponent,
+    GeoresourceDeleteModalComponent
   ],
   schemas: [
     CUSTOM_ELEMENTS_SCHEMA
@@ -359,6 +361,11 @@ export class AppModule implements DoBootstrap {
         component: GeoresourceEditUserRolesModalComponent
       }) as angular.IDirectiveFactory);
 
+    angular.module('kommonitorAdmin')
+      .directive('georesourceDeleteModalNew', downgradeComponent({
+        component: GeoresourceDeleteModalComponent
+      }) as angular.IDirectiveFactory);
+
     console.log("registered downgraded Angular components for AngularJS usage");
   }
 
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
index 63fe13fda..934a51c78 100644
--- a/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/admin-georesources-management.component.ts
@@ -12,6 +12,7 @@ import { GeoresourceBatchUpdateModalComponent } from './georesourceBatchUpdateMo
 import { GeoresourceEditMetadataModalComponent } from './georesourceEditMetadataModal/georesource-edit-metadata-modal.component';
 import { GeoresourceEditFeaturesModalComponent } from './georesourceEditFeaturesModal/georesource-edit-features-modal.component';
 import { GeoresourceEditUserRolesModalComponent } from './georesourceEditUserRolesModal/georesource-edit-user-roles-modal.component';
+import { GeoresourceDeleteModalComponent } from './georesourceDeleteModal/georesource-delete-modal.component';
 
 // Declare jQuery for AdminLTE
 declare const $: any;
@@ -351,8 +352,25 @@ export class AdminGeoresourcesManagementComponent implements OnInit, OnDestroy,
   }
 
   public onClickDeleteGeoresource(georesourceDataset: any): void {
-    // submit selected georesource to modal controller (as array like original)
+    const modalRef = this.modalService.open(GeoresourceDeleteModalComponent, {
+      size: 'xl',
+      backdrop: 'static',
+      keyboard: false,
+      container: 'body',
+      animation: false
+    });
+
+    // Pass the georesource dataset to the modal (as array like original)
     this.broadcastService.broadcast('onDeleteGeoresources', [georesourceDataset]);
+
+    modalRef.result.then(
+      (result) => {
+        console.log('Georesource delete modal closed with result:', result);
+      },
+      (reason) => {
+        console.log('Georesource delete modal dismissed with reason:', reason);
+      }
+    );
   }
 
   // Utility methods
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component.css b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component.css
new file mode 100644
index 000000000..458b35608
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component.css
@@ -0,0 +1,183 @@
+/* Loading overlay */
+.loading-overlay-admin-panel {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  color: #007bff;
+  font-size: 2rem;
+}
+
+.icon-spin {
+  animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Modal styling */
+.modal-header {
+  padding: 15px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.modal-title {
+  margin: 0;
+  line-height: 1.42857143;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+
+.modal-body {
+  position: relative;
+  padding: 15px;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.modal-footer {
+  padding: 15px;
+  text-align: right;
+  border-top: 1px solid #e5e5e5;
+}
+
+/* Alert styling */
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.alert-success {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+
+.alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+
+.alert-dismissible .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  color: inherit;
+  background: none;
+  border: none;
+  font-size: 1.3rem;
+  cursor: pointer;
+}
+
+/* Table styling */
+.table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 20px;
+}
+
+.table-bordered {
+  border: 1px solid #ddd;
+}
+
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+  border: 1px solid #ddd;
+}
+
+.table-condensed > thead > tr > th,
+.table-condensed > tbody > tr > th,
+.table-condensed > tfoot > tr > th,
+.table-condensed > thead > tr > td,
+.table-condensed > tbody > tr > td,
+.table-condensed > tfoot > tr > td {
+  padding: 5px;
+}
+
+/* Button styling */
+.btn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.btn-default {
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+
+.btn-danger:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.pull-left {
+  float: left;
+}
+
+/* Typography */
+h3, h4 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  color: #333;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+ul {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+/* Responsive table */
+@media (max-width: 768px) {
+  .table-responsive {
+    width: 100%;
+    margin-bottom: 15px;
+    overflow-y: hidden;
+    overflow-x: auto;
+    border: 1px solid #ddd;
+  }
+} 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component.html b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component.html
new file mode 100644
index 000000000..1894980f7
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component.html
@@ -0,0 +1,176 @@
+

+  
Georessourcen löschen

+  
+

+
+

+  
+  

+    
+  

+
+  
Sollen die folgenden Georessourcen wirklich gelöscht werden?

+
+  

+    
kein Datensatz zum Löschen markiert. Mindestens ein Datensatz muss markiert werden.

+  

+
+  

+    
Points of Interest

+    
    
+      
  • {{dataset.datasetName}}
    • 
+    

+  

+
+  

+    
Lines of Interest

+    
    
+      
  • {{dataset.datasetName}}
    • 
+    

+  

+
+  

+    
Areas of Interest

+    
    
+      
  • {{dataset.datasetName}}
    • 
+    

+  

+
+  

+
+  

+    
ACHTUNG!

+    
Dabei werden auch sämtliche Indikatoren-Referenzen auf die betroffenen Georessourcen dauerhaft aus dem System entfernt. Etwaige Skripte, in denen die betroffenen Georessourcen als Berechnungsgrundlage verwendet werden, werden ebenfalls ungültig und daher aus dem System gelöscht

+    
+    
Betroffene Indikatorenreferenzen

+    

+      
keine

+    

+    

+      
+        
+          
+            
+            
+            
+            
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+            
+            
+            
+            
+            
+          
+        
+      
Indikatoren-IDIndikatoren-NameIndikatoren-MerkmalIndikatoren-TypIndikatoren-Beschreibungreferenzierte Georessource - IDreferenzierte Georessource - Namereferenzierte Georessource - Beschreibung
{{entry.indicatorMetadata.indicatorId}}{{entry.indicatorMetadata.indicatorName}}{{entry.indicatorMetadata.characteristicValue}}{{entry.indicatorMetadata.indicatorType}}{{entry.indicatorMetadata.description}}{{entry.georesourceReference.referencedGeoresourceId}}{{entry.georesourceReference.referencedGeoresourceName}}{{entry.georesourceReference.referencedGeoresourceDescription}}

+    

+
+    
Betroffene Skripte

+    

+      
keine

+    

+    

+      
+        
+          
+            
+            
+            
+            
+          
+        
+        
+          
+            
+            
+            
+            
+          
+        
+      
Skript-IDSkript-NameSkript-BeschreibungID des berechneten Indikators
{{script.scriptId}}{{script.name}}{{script.description}}{{script.indicatorId}}

+    

+  

+
+  
+  
+
+  
+  
+

+
+

+  
+  
+
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component.ts b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component.ts
new file mode 100644
index 000000000..bd21330a0
--- /dev/null
+++ b/app/components/ngComponents/admin/adminGeoresourcesManagement/georesourceDeleteModal/georesource-delete-modal.component.ts
@@ -0,0 +1,278 @@
+import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { BroadcastService } from 'services/broadcast-service/broadcast.service';
+import { HttpClient } from '@angular/common/http';
+import { Subscription, forkJoin } from 'rxjs';
+import { tap, catchError } from 'rxjs/operators';
+import { of } from 'rxjs';
+
+declare const $: any;
+
+interface AffectedScript {
+  scriptId: string;
+  name: string;
+  description: string;
+  indicatorId: string;
+}
+
+interface AffectedIndicatorReference {
+  indicatorMetadata: {
+    indicatorId: string;
+    indicatorName: string;
+    characteristicValue: string;
+    indicatorType: string;
+    description: string;
+  };
+  georesourceReference: {
+    referencedGeoresourceId: string;
+    referencedGeoresourceName: string;
+    referencedGeoresourceDescription: string;
+  };
+}
+
+@Component({
+  selector: 'georesource-delete-modal-new',
+  templateUrl: './georesource-delete-modal.component.html',
+  styleUrls: ['./georesource-delete-modal.component.css']
+})
+export class GeoresourceDeleteModalComponent implements OnInit, OnDestroy {
+
+  datasetsToDelete: any[] = [];
+  loadingData: boolean = false;
+
+  successfullyDeletedDatasets: any[] = [];
+  failedDatasetsAndErrors: [any, string][] = [];
+
+  affectedScripts: AffectedScript[] = [];
+  affectedIndicatorReferences: AffectedIndicatorReference[] = [];
+
+  // Alert states
+  showSuccessAlert: boolean = false;
+  showErrorAlert: boolean = false;
+  successMessage: string = '';
+  errorMessage: string = '';
+
+  // Subscriptions
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
+    private broadcastService: BroadcastService,
+    private http: HttpClient
+  ) {
+    console.log('GeoresourceDeleteModalComponent constructor initialized');
+  }
+
+  ngOnInit(): void {
+    this.setupEventListeners();
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(subscription => subscription.unsubscribe());
+  }
+
+  private setupEventListeners(): void {
+    // Listen for broadcast events
+    const deleteSubscription = this.broadcastService.currentBroadcastMsg.subscribe(broadcastMsg => {
+      if (broadcastMsg.msg === 'onDeleteGeoresources') {
+        this.onDeleteGeoresources(Array.isArray(broadcastMsg.values) ? broadcastMsg.values : [broadcastMsg.values]);
+      }
+    });
+    this.subscriptions.push(deleteSubscription);
+  }
+
+  onDeleteGeoresources(datasets: any[]): void {
+    console.log('onDeleteGeoresources called with datasets:', datasets);
+    this.loadingData = true;
+    this.datasetsToDelete = datasets;
+    this.resetGeoresourcesDeleteForm();
+    
+    setTimeout(() => {
+      this.loadingData = false;
+    }, 250);
+  }
+
+  resetGeoresourcesDeleteForm(): void {
+    console.log('Resetting delete form');
+    this.successfullyDeletedDatasets = [];
+    this.failedDatasetsAndErrors = [];
+    this.affectedScripts = this.gatherAffectedScripts();
+    this.affectedIndicatorReferences = this.gatherAffectedIndicatorReferences();
+    this.hideSuccessAlert();
+    this.hideErrorAlert();
+  }
+
+  gatherAffectedScripts(): AffectedScript[] {
+    const affectedScripts: AffectedScript[] = [];
+    
+    if (this.kommonitorDataExchangeService && this.kommonitorDataExchangeService.availableScripts) {
+      this.datasetsToDelete.forEach(dataset => {
+        this.kommonitorDataExchangeService.availableScripts.forEach((script: any) => {
+          if (script.requiredGeoresources) {
+            script.requiredGeoresources.forEach((requiredGeoresource: any) => {
+              if (requiredGeoresource.referencedGeoresourceId === dataset.georesourceId) {
+                affectedScripts.push({
+                  scriptId: script.scriptId,
+                  name: script.name,
+                  description: script.description,
+                  indicatorId: script.indicatorId
+                });
+              }
+            });
+          }
+        });
+      });
+    }
+
+    return affectedScripts;
+  }
+
+  gatherAffectedIndicatorReferences(): AffectedIndicatorReference[] {
+    const affectedIndicatorReferences: AffectedIndicatorReference[] = [];
+    
+    if (this.kommonitorDataExchangeService && this.kommonitorDataExchangeService.availableIndicators) {
+      this.datasetsToDelete.forEach(dataset => {
+        this.kommonitorDataExchangeService.availableIndicators.forEach((indicator: any) => {
+          if (indicator.referencedGeoresources) {
+            indicator.referencedGeoresources.forEach((georesourceReference: any) => {
+              if (georesourceReference.referencedGeoresourceId === dataset.georesourceId) {
+                affectedIndicatorReferences.push({
+                  indicatorMetadata: {
+                    indicatorId: indicator.indicatorId,
+                    indicatorName: indicator.indicatorName,
+                    characteristicValue: indicator.characteristicValue,
+                    indicatorType: indicator.indicatorType,
+                    description: indicator.description
+                  },
+                  georesourceReference: georesourceReference
+                });
+              }
+            });
+          }
+        });
+      });
+    }
+
+    return affectedIndicatorReferences;
+  }
+
+  deleteGeoresources(): void {
+    console.log('Starting deletion of georesources');
+    this.loadingData = true;
+
+    const deletePromises = this.datasetsToDelete.map(dataset => this.getDeleteDatasetPromise(dataset));
+
+    forkJoin(deletePromises).subscribe({
+      next: (results) => {
+        console.log('All delete operations completed');
+        this.handleDeleteResults();
+      },
+      error: (error) => {
+        console.error('Error in delete operations:', error);
+        this.handleDeleteResults();
+      }
+    });
+  }
+
+  private getDeleteDatasetPromise(dataset: any) {
+    const url = `${this.kommonitorDataExchangeService.baseUrlToKomMonitorDataAPI}/georesources/${dataset.georesourceId}`;
+    
+    return this.http.delete(url).pipe(
+      tap((response) => {
+        console.log(`Successfully deleted georesource ${dataset.georesourceId}`);
+        this.successfullyDeletedDatasets.push(dataset);
+        
+        // Remove entry from array
+        const index = this.kommonitorDataExchangeService.availableGeoresources.findIndex(
+          (geo: any) => geo.georesourceId === dataset.georesourceId
+        );
+        
+        if (index > -1) {
+          this.kommonitorDataExchangeService.availableGeoresources.splice(index, 1);
+        }
+      }),
+      catchError((error) => {
+        console.error(`Failed to delete georesource ${dataset.georesourceId}:`, error);
+        const errorMessage = error.error ? 
+          this.kommonitorDataExchangeService.syntaxHighlightJSON(error.error) : 
+          this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
+        this.failedDatasetsAndErrors.push([dataset, errorMessage]);
+        
+        // Return a resolved observable so forkJoin continues
+        return of(null);
+      })
+    );
+  }
+
+  private handleDeleteResults(): void {
+    if (this.failedDatasetsAndErrors.length > 0) {
+      this.showErrorAlert = true;
+      this.errorMessage = 'Löschen gescheitert';
+    }
+
+    if (this.successfullyDeletedDatasets.length > 0) {
+      this.showSuccessAlert = true;
+      this.successMessage = 'Folgende Georessourcen sowie assoziierte Indikatorenreferenzen und Skripte wurden erfolgreich gelöscht';
+      
+      // Refresh overview table
+      this.broadcastService.broadcast('refreshGeoresourceOverviewTable', {
+        crudType: 'delete',
+        targetIds: this.successfullyDeletedDatasets.map(dataset => dataset.georesourceId)
+      });
+      
+      // Refresh admin dashboard diagrams
+      setTimeout(() => {
+        this.broadcastService.broadcast('refreshAdminDashboardDiagrams', null);
+      }, 500);
+    }
+
+    setTimeout(() => {
+      this.loadingData = false;
+    }, 500);
+  }
+
+  // Filter methods for template
+  getPoiDatasets(): any[] {
+    return this.datasetsToDelete.filter(dataset => dataset.isPOI);
+  }
+
+  getLoiDatasets(): any[] {
+    return this.datasetsToDelete.filter(dataset => dataset.isLOI);
+  }
+
+  getAoiDatasets(): any[] {
+    return this.datasetsToDelete.filter(dataset => dataset.isAOI);
+  }
+
+  getSuccessfulPoiDatasets(): any[] {
+    return this.successfullyDeletedDatasets.filter(dataset => dataset.isPOI);
+  }
+
+  getSuccessfulLoiDatasets(): any[] {
+    return this.successfullyDeletedDatasets.filter(dataset => dataset.isLOI);
+  }
+
+  getSuccessfulAoiDatasets(): any[] {
+    return this.successfullyDeletedDatasets.filter(dataset => dataset.isAOI);
+  }
+
+  // Alert methods
+  hideSuccessAlert(): void {
+    this.showSuccessAlert = false;
+  }
+
+  hideErrorAlert(): void {
+    this.showErrorAlert = false;
+  }
+
+  // TrackBy function for *ngFor
+  trackByIndex(index: number, item: any): number {
+    return index;
+  }
+
+  // Modal control
+  cancel(): void {
+    this.activeModal.dismiss('cancel');
+  }
+} 
\ No newline at end of file
diff --git a/app/util/genericServices/kommonitorDataGridHelperService/kommonitor-data-grid-helper-service.module.js b/app/util/genericServices/kommonitorDataGridHelperService/kommonitor-data-grid-helper-service.module.js
index 4e89dd718..117673560 100644
--- a/app/util/genericServices/kommonitorDataGridHelperService/kommonitor-data-grid-helper-service.module.js
+++ b/app/util/genericServices/kommonitorDataGridHelperService/kommonitor-data-grid-helper-service.module.js
@@ -108,7 +108,7 @@ angular
         html += '';
         html += '';
         html += ''
-        html += ''
+        html += ''
         html += '
';
 
         return html;
@@ -1005,16 +1005,28 @@ angular
         $(".georesourceDeleteBtn").off();
         $(".georesourceDeleteBtn").on("click", function (event) {
           // ensure that only the target button gets clicked
-          // manually open modal
           event.stopPropagation();
-          let modalId = document.getElementById(this.id).getAttribute("data-target");
-          $(modalId).modal('show');
-                 
+          
           let georesourceId = this.id.split("_")[3]; 
-
           let georesourceMetadata = kommonitorDataExchangeService.getGeoresourceMetadataById(georesourceId);
 
-          $rootScope.$broadcast("onDeleteGeoresources", [georesourceMetadata]); //handler function takes an array
+          // Try to use the new Angular component method first
+          try {
+            let angularComponent = angular.element(document.querySelector('admin-georesources-management-new')).controller('admin-georesources-management-new');
+            if (angularComponent && angularComponent.onClickDeleteGeoresource) {
+              angularComponent.onClickDeleteGeoresource(georesourceMetadata);
+            } else {
+              // Fallback to AngularJS broadcast
+              let modalId = document.getElementById(this.id).getAttribute("data-target");
+              $(modalId).modal('show');
+              $rootScope.$broadcast("onDeleteGeoresources", [georesourceMetadata]);
+            }
+          } catch (error) {
+            // Fallback to AngularJS broadcast
+            let modalId = document.getElementById(this.id).getAttribute("data-target");
+            $(modalId).modal('show');
+            $rootScope.$broadcast("onDeleteGeoresources", [georesourceMetadata]);
+          }
         });
 
       };

From 7ee7416eab8f131c5e44d8f53650cbe4b5b5aaeb Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Wed, 23 Jul 2025 13:03:03 +0530
Subject: [PATCH 031/120] migrate: service migrate for spatial unit parent
 component

---
 ...min-spatial-units-management.component.css |  41 +
 ...in-spatial-units-management.component.html |   8 +
 ...dmin-spatial-units-management.component.ts | 142 +++-
 .../kommonitor-cache-helper.service.ts        | 420 ++++++++--
 .../kommonitor-data-exchange.service.ts       | 743 ++++++++++++++++--
 5 files changed, 1180 insertions(+), 174 deletions(-)

diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.css b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.css
index 785f43150..78a40e496 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.css
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.css
@@ -195,4 +195,45 @@ input:checked + .switchslider:before {
   .verticalAlign {
     justify-content: center;
   }
+} 
+
+/* AG Grid pagination styles */
+.ag-theme-alpine .ag-paging-panel {
+  background-color: #f8f9fa;
+  border-top: 1px solid #dee2e6;
+  padding: 8px 12px;
+  font-size: 12px;
+}
+
+.ag-theme-alpine .ag-paging-button {
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  color: #495057;
+  padding: 4px 8px;
+  margin: 0 2px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.ag-theme-alpine .ag-paging-button:hover {
+  background-color: #e9ecef;
+  border-color: #adb5bd;
+}
+
+.ag-theme-alpine .ag-paging-button:disabled {
+  background-color: #f8f9fa;
+  color: #6c757d;
+  cursor: not-allowed;
+}
+
+.ag-theme-alpine .ag-paging-page-summary-panel {
+  color: #6c757d;
+}
+
+.ag-theme-alpine .ag-paging-page-size-select {
+  background-color: #fff;
+  border: 1px solid #dee2e6;
+  border-radius: 3px;
+  padding: 2px 4px;
+  font-size: 12px;
 } 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html
index d9e8bf0f8..7af2dff31 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.html
@@ -65,6 +65,14 @@ 
Raumebenen

                 [rowData]="rowData"
                 [defaultColDef]="defaultColDef"
                 [gridOptions]="gridOptions"
+                [pagination]="true"
+                [paginationPageSize]="paginationPageSize"
+                [paginationPageSizeSelector]="paginationPageSizeSelector"
+                [rowSelection]="'multiple'"
+                [suppressRowClickSelection]="true"
+                [enableCellTextSelection]="true"
+                [ensureDomOrder]="true"
+                [suppressColumnVirtualisation]="true"
                 (firstDataRendered)="onFirstDataRendered($event)"
                 (columnResized)="onColumnResized($event)"
                 (rowDataChanged)="onRowDataChanged()"
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
index 4ed8071cd..ee7dbbf8c 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
@@ -38,6 +38,10 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
   private gridApi!: GridApi;
   private columnApi!: ColumnApi;
 
+  // Pagination properties
+  public paginationPageSize: number = 10;
+  public paginationPageSizeSelector: number[] = [10, 25, 50, 100];
+
   constructor(
     @Inject(DOCUMENT) private document: Document,
     private zone: NgZone,
@@ -50,19 +54,52 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    this.initializeOrRefreshOverviewTable();
+    console.log('AdminSpatialUnitsManagementComponent ngOnInit started');
+    
+    // Subscribe to spatial units data
+    const spatialUnitsSub = this.kommonitorDataExchangeService.spatialUnits$.subscribe(spatialUnits => {
+      console.log('Spatial units subscription received:', spatialUnits);
+      if (spatialUnits && spatialUnits.length > 0) {
+        console.log('Building data grid with', spatialUnits.length, 'spatial units');
+        this.loadingData = false;
+        this.initializationCompleted = true;
+        this.buildDataGrid_spatialUnits(spatialUnits);
+      } else {
+        console.log('No spatial units data received yet');
+      }
+    });
+    this.subscriptions.push(spatialUnitsSub);
+
+    // Subscribe to loading state
+    const loadingSub = this.kommonitorDataExchangeService.loading$.subscribe(loading => {
+      console.log('Loading state changed:', loading);
+      this.loadingData = loading;
+    });
+    this.subscriptions.push(loadingSub);
+
+    // Subscribe to error state
+    const errorSub = this.kommonitorDataExchangeService.error$.subscribe(error => {
+      if (error) {
+        console.error('Data exchange error:', error);
+        // You can add error handling UI here
+      }
+    });
+    this.subscriptions.push(errorSub);
+
     this.setupEventListeners();
     
-    // Add polling mechanism to check for data availability
-    this.startDataPolling();
+    // Fetch spatial units data
+    this.fetchSpatialUnitsData();
     
     // Add a fallback timeout to prevent infinite loading
     setTimeout(() => {
       if (this.loadingData) {
-        this.initializeOrRefreshOverviewTable();
+        console.log('Fallback timeout reached, checking data again...');
+        this.fetchSpatialUnitsData();
         
         // If still no data after fallback, stop loading anyway
         if (!this.kommonitorDataExchangeService.availableSpatialUnits || this.kommonitorDataExchangeService.availableSpatialUnits.length === 0) {
+          console.log('No data after fallback timeout, stopping loading');
           this.loadingData = false;
           this.initializationCompleted = true;
         }
@@ -79,7 +116,7 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
     const sub = this.broadcastService.currentBroadcastMsg.subscribe(data => {
       if (data.msg === 'initialMetadataLoadingCompleted') {
         this.zone.run(() => {
-          this.initializeOrRefreshOverviewTable();
+          this.fetchSpatialUnitsData();
         });
       }
       // Handle grid button click events
@@ -109,20 +146,32 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
     this.subscriptions.push(sub);
   }
 
-  public initializeOrRefreshOverviewTable(): void {
-    const spatialUnits = this.kommonitorDataExchangeService.availableSpatialUnits;
+  /**
+   * Fetch spatial units data from the service
+   */
+  private fetchSpatialUnitsData(): void {
+    console.log('Fetching spatial units data...');
     
-    if (spatialUnits && spatialUnits.length > 0) {
-      this.loadingData = false;
-      this.initializationCompleted = true;
-      
-      // Use the new Angular service to build the data grid
-      this.buildDataGrid_spatialUnits(spatialUnits);
-    } else {
-      // Data not ready yet, keep loading
-      this.loadingData = true;
-      this.initializationCompleted = false;
-    }
+    // Get current roles or use empty array as fallback
+    const currentRoles = this.kommonitorDataExchangeService.currentKeycloakLoginRoles || [];
+    console.log('Current roles:', currentRoles);
+    
+    this.kommonitorDataExchangeService.fetchSpatialUnitsMetadata(currentRoles).subscribe({
+      next: (spatialUnits) => {
+        console.log('Spatial units data received:', spatialUnits);
+        // The data will be handled by the subscription in ngOnInit
+      },
+      error: (error) => {
+        console.error('Error fetching spatial units:', error);
+        this.loadingData = false;
+        this.initializationCompleted = true;
+      }
+    });
+  }
+
+  public initializeOrRefreshOverviewTable(): void {
+    console.log('Initializing/refreshing overview table...');
+    this.fetchSpatialUnitsData();
   }
 
   // Debug method to force stop loading
@@ -251,28 +300,6 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
     this.initializeOrRefreshOverviewTable();
   }
 
-  private startDataPolling(): void {
-    // Poll every 500ms for data availability
-    const pollInterval = setInterval(() => {
-      if (this.loadingData) {
-        this.initializeOrRefreshOverviewTable();
-        
-        // If data is found, stop polling
-        if (!this.loadingData) {
-          clearInterval(pollInterval);
-        }
-      } else {
-        // Data loaded, stop polling
-        clearInterval(pollInterval);
-      }
-    }, 500);
-    
-    // Stop polling after 10 seconds regardless
-    setTimeout(() => {
-      clearInterval(pollInterval);
-    }, 10000);
-  }
-
   // AG Grid methods
   private buildDataGrid_spatialUnits(spatialUnitMetadataArray: any[]): void {
     this.columnDefs = this.buildDataGridColumnConfig_spatialUnits(spatialUnitMetadataArray);
@@ -310,15 +337,48 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
       enableCellTextSelection: true,
       ensureDomOrder: true,
       pagination: true,
-      paginationPageSize: 10,
+      paginationPageSize: this.paginationPageSize,
+      paginationPageSizeSelector: this.paginationPageSizeSelector,
       suppressColumnVirtualisation: true,
       onGridReady: (params) => {
         this.gridApi = params.api;
         this.columnApi = params.columnApi;
+      },
+      onFirstDataRendered: (event) => {
+        this.headerHeightSetter();
+        this.registerClickHandler_spatialUnits();
+      },
+      onColumnResized: (event) => {
+        this.headerHeightSetter();
       }
     };
   }
 
+  /**
+   * Handle pagination page size change
+   */
+  onPaginationPageSizeChanged(newPageSize: number): void {
+    this.paginationPageSize = newPageSize;
+    if (this.gridApi) {
+      this.gridApi.paginationSetPageSize(newPageSize);
+    }
+  }
+
+  /**
+   * Get current pagination info
+   */
+  getPaginationInfo(): any {
+    if (this.gridApi) {
+      return {
+        currentPage: this.gridApi.paginationGetCurrentPage(),
+        totalPages: this.gridApi.paginationGetTotalPages(),
+        totalRows: this.gridApi.paginationGetRowCount(),
+        pageSize: this.gridApi.paginationGetPageSize()
+      };
+    }
+    return null;
+  }
+
   private buildDataGridColumnConfig_spatialUnits(spatialUnitMetadataArray: any[]): ColDef[] {
     return [
       { 
diff --git a/app/services/adminSpatialUnit/kommonitor-cache-helper.service.ts b/app/services/adminSpatialUnit/kommonitor-cache-helper.service.ts
index 563c2e1d7..987694e09 100644
--- a/app/services/adminSpatialUnit/kommonitor-cache-helper.service.ts
+++ b/app/services/adminSpatialUnit/kommonitor-cache-helper.service.ts
@@ -1,43 +1,118 @@
-import { Injectable, Inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { 
+  Observable, 
+  BehaviorSubject, 
+  throwError, 
+  of, 
+  timer,
+  catchError,
+  retry,
+  shareReplay,
+  switchMap,
+  tap,
+  map
+} from 'rxjs';
+
+// TypeScript interfaces for better type safety
+export interface DatabaseModificationInfo {
+  'access-control': string;
+  'topics': string;
+  'spatial-units': string;
+  'georesources': string;
+  'indicators': string;
+  'process-scripts': string;
+}
+
+export interface CacheEntry {
+  data: T;
+  timestamp: string;
+  lastModified: string;
+}
+
+export interface SpatialUnitMetadata {
+  spatialUnitId: string;
+  spatialUnitLevel: string;
+  metadata: {
+    description: string;
+    datasource: string;
+    contact: string;
+    note?: string;
+    literature?: string;
+    updateInterval?: string;
+    lastUpdate?: string;
+    databasis?: string;
+    sridEPSG?: number;
+  };
+  nextLowerHierarchyLevel?: string;
+  nextUpperHierarchyLevel?: string;
+  availablePeriodsOfValidity: Array<{
+    startDate: string;
+    endDate?: string;
+  }>;
+  permissions: string[];
+  isPublic: boolean;
+  ownerId: string;
+  userPermissions?: string[];
+}
 
 @Injectable({
   providedIn: 'root'
 })
 export class KommonitorCacheHelperService {
-  private baseUrlToKomMonitorDataAPI: string;
-  private spatialUnitsEndpoint = '/spatial-units';
+  private baseUrlToKomMonitorDataAPI: string = '';
+  private lastDatabaseModificationInfo: DatabaseModificationInfo | null = null;
+  
+  // Endpoints
   private spatialUnitsPublicEndpoint = '/public/spatial-units';
   private spatialUnitsProtectedEndpoint = '/spatial-units';
+  private spatialUnitsEndpoint = this.spatialUnitsProtectedEndpoint;
+  
+  // Local storage keys
+  private localStorageKey_prefix: string = '';
+  private localStorageKey_spatialUnits: string = '';
+  
+  // Reactive subjects for state management
+  private spatialUnitsSubject = new BehaviorSubject([]);
+  private loadingSubject = new BehaviorSubject(false);
+  private errorSubject = new BehaviorSubject(null);
+  private lastModificationSubject = new BehaviorSubject(null);
 
-  constructor(
-    private http: HttpClient,
-    @Inject('kommonitorCacheHelperService') private angularJsCacheHelperService: any
-  ) {
-    // Initialize the base URL - this should come from environment configuration
-    this.baseUrlToKomMonitorDataAPI = this.getBaseApiUrl();
-    this.checkAuthentication();
+  // Public observables
+  public spatialUnits$ = this.spatialUnitsSubject.asObservable();
+  public loading$ = this.loadingSubject.asObservable();
+  public error$ = this.errorSubject.asObservable();
+  public lastModification$ = this.lastModificationSubject.asObservable();
+
+  constructor(private http: HttpClient) {
+    this.initializeService();
   }
 
   /**
-   * Gets the base API URL from environment configuration
-   * This is a placeholder - should be configured properly in environment
+   * Initialize the service with configuration
    */
-  private getBaseApiUrl(): string {
-    // This should come from environment configuration
-    // For now, using a placeholder that would be configured properly
-    return (window as any).__env?.apiUrl + (window as any).__env?.basePath || '';
+  private initializeService(): void {
+    // Get configuration from environment
+    const env = (window as any).__env;
+    this.baseUrlToKomMonitorDataAPI = env?.apiUrl + env?.basePath || '';
+    this.localStorageKey_prefix = env?.localStoragePrefix || 'kommonitor';
+    this.localStorageKey_spatialUnits = this.localStorageKey_prefix + '_lastModification_spatialUnits';
+    
+    console.log('KommonitorCacheHelperService initialized with base URL:', this.baseUrlToKomMonitorDataAPI);
+    
+    // Check authentication and set appropriate endpoints
+    this.checkAuthentication();
+    
+    // Fetch initial database modification info
+    this.fetchLastDatabaseModificationObject();
   }
 
   /**
-   * Checks authentication status and sets appropriate endpoints
-   * Mirrors the original AngularJS implementation
+   * Check authentication status and set appropriate endpoints
    */
   private checkAuthentication(): void {
-    // This would check with the authentication service
+    // This would integrate with your authentication service
     // For now, we'll assume authenticated and use protected endpoints
-    // In a real implementation, this would check with Keycloak or similar
     const isAuthenticated = this.isUserAuthenticated();
     
     if (isAuthenticated) {
@@ -45,73 +120,308 @@ export class KommonitorCacheHelperService {
     } else {
       this.spatialUnitsEndpoint = this.spatialUnitsPublicEndpoint;
     }
+    
+    console.log('Authentication check completed. Using endpoint:', this.spatialUnitsEndpoint);
   }
 
   /**
-   * Checks if user is authenticated
-   * This is a placeholder method
+   * Check if user is authenticated
+   * This is a placeholder method that should integrate with your auth service
    */
   private isUserAuthenticated(): boolean {
-    // This would integrate with your authentication service
+    // This would integrate with your authentication service (Keycloak, etc.)
     // For now, return true as a placeholder
     return true;
   }
 
   /**
-   * Fetches spatial units metadata - delegates to AngularJS service
+   * Fetch last database modification info from server
+   */
+  private fetchLastDatabaseModificationObject(): Observable {
+    const url = `${this.baseUrlToKomMonitorDataAPI}/public/database/last-modification`;
+    
+    return this.http.get(url).pipe(
+      tap(info => {
+        this.lastDatabaseModificationInfo = info;
+        this.lastModificationSubject.next(info);
+        console.log('Database modification info fetched:', info);
+      }),
+      catchError(this.handleError)
+    );
+  }
+
+  /**
+   * Fetch spatial units metadata with caching
    */
-  async fetchSpatialUnitsMetadata(keycloakRolesArray: string[]): Promise {
-    return this.angularJsCacheHelperService.fetchSpatialUnitsMetadata(keycloakRolesArray);
+  fetchSpatialUnitsMetadata(keycloakRolesArray: string[]): Observable {
+    console.log('Fetching spatial units metadata with roles:', keycloakRolesArray);
+    
+    // Check cache first
+    const cachedData = this.getCachedSpatialUnits(keycloakRolesArray);
+    if (cachedData) {
+      console.log('Returning cached spatial units data');
+      this.spatialUnitsSubject.next(cachedData);
+      return of(cachedData);
+    }
+
+    // Fetch from server
+    console.log('Cache miss, fetching from server...');
+    this.setLoading(true);
+    this.clearError();
+
+    return this.fetchResourceFromServer(
+      this.localStorageKey_spatialUnits,
+      this.spatialUnitsEndpoint,
+      'spatial-units',
+      keycloakRolesArray
+    ).pipe(
+      tap((data: SpatialUnitMetadata[]) => {
+        this.spatialUnitsSubject.next(data);
+        this.setLoading(false);
+        console.log('Spatial units data fetched from server:', data.length, 'items');
+      }),
+      catchError(error => {
+        this.setError(error);
+        this.setLoading(false);
+        return throwError(() => error);
+      })
+    );
   }
 
   /**
-   * Fetches single spatial unit metadata - delegates to AngularJS service
+   * Fetch single spatial unit metadata
    */
-  async fetchSingleSpatialUnitMetadata(spatialUnitId: string, keycloakRolesArray: string[]): Promise {
-    return this.angularJsCacheHelperService.fetchSingleSpatialUnitMetadata(spatialUnitId, keycloakRolesArray);
+  fetchSingleSpatialUnitMetadata(spatialUnitId: string, keycloakRolesArray: string[]): Observable {
+    const url = `${this.baseUrlToKomMonitorDataAPI}${this.spatialUnitsEndpoint}/${spatialUnitId}`;
+    
+    return this.http.get(url).pipe(
+      tap(() => {
+        // Refresh the full list in the background
+        this.fetchSpatialUnitsMetadata(keycloakRolesArray).subscribe();
+      }),
+      catchError(this.handleError)
+    );
   }
 
   /**
-   * Fetches resource from cache or server with caching logic
-   * This is a simplified version of the original caching mechanism
+   * Fetch resource from server with optional filtering
    */
-  private async fetchResource_fromCacheOrServer(
+  private fetchResourceFromServer(
     localStorageKey: string,
     resourceEndpoint: string,
     lastModificationResourceName: string,
     keycloakRolesArray: string[],
     filter?: any
-  ): Promise {
+  ): Observable {
+    const url = `${this.baseUrlToKomMonitorDataAPI}${resourceEndpoint}`;
+    
+    if (filter) {
+      // POST request with filter
+      return this.http.post(`${url}/filter`, filter).pipe(
+        tap((data: T[]) => this.updateCache(localStorageKey, data, lastModificationResourceName, keycloakRolesArray)),
+        catchError(this.handleError)
+      );
+    } else {
+      // Standard GET request
+      return this.http.get(url).pipe(
+        tap((data: T[]) => this.updateCache(localStorageKey, data, lastModificationResourceName, keycloakRolesArray)),
+        catchError(this.handleError)
+      );
+    }
+  }
+
+  /**
+   * Get cached spatial units data
+   */
+  private getCachedSpatialUnits(keycloakRolesArray: string[]): SpatialUnitMetadata[] | null {
+    if (!this.lastDatabaseModificationInfo) {
+      return null;
+    }
+
+    const { timestampKey, metadataKey } = this.getCacheKeys(keycloakRolesArray);
+    
+    const cachedTimestamp = localStorage.getItem(timestampKey);
+    if (!cachedTimestamp) {
+      return null;
+    }
+
+    const cachedLastModified = JSON.parse(cachedTimestamp);
+    const serverLastModified = this.lastDatabaseModificationInfo['spatial-units'];
+
+    if (cachedLastModified !== serverLastModified) {
+      console.log('Cache invalid - timestamps differ');
+      return null;
+    }
+
+    const cachedData = localStorage.getItem(metadataKey);
+    if (!cachedData) {
+      return null;
+    }
+
     try {
-      // Simplified implementation without full caching logic
-      // In a real implementation, you'd check localStorage and last modification timestamps
-      const url = `${this.baseUrlToKomMonitorDataAPI}${resourceEndpoint}`;
-      
-      if (filter) {
-        // If filter is provided, make a POST request with filter
-        const response = await this.http.post(`${url}/filter`, filter, {
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        }).toPromise();
-        return response || [];
+      const parsedData = JSON.parse(cachedData);
+      console.log('Valid cache found, returning cached data');
+      return parsedData;
+    } catch (error) {
+      console.error('Error parsing cached data:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Update cache with new data
+   */
+  private updateCache(
+    localStorageKey: string,
+    data: T[],
+    lastModificationResourceName: string,
+    keycloakRolesArray: string[]
+  ): void {
+    if (!this.lastDatabaseModificationInfo) {
+      return;
+    }
+
+    const { timestampKey, metadataKey } = this.getCacheKeys(keycloakRolesArray);
+    
+    // Store timestamp
+    const timestamp = this.lastDatabaseModificationInfo[lastModificationResourceName as keyof DatabaseModificationInfo];
+    localStorage.setItem(timestampKey, JSON.stringify(timestamp));
+    
+    // Store data
+    localStorage.setItem(metadataKey, JSON.stringify(data));
+    
+    console.log('Cache updated for', lastModificationResourceName);
+  }
+
+  /**
+   * Get cache keys based on roles
+   */
+  private getCacheKeys(keycloakRolesArray: string[]): { timestampKey: string; metadataKey: string } {
+    const env = (window as any).__env;
+    let suffix = '_public';
+    
+    if (keycloakRolesArray && keycloakRolesArray.length > 0) {
+      if (keycloakRolesArray.includes(env?.keycloakKomMonitorAdminRoleName)) {
+        suffix = '_' + env.keycloakKomMonitorAdminRoleName;
       } else {
-        // Standard GET request
-        const response = await this.http.get(url).toPromise();
-        return response || [];
+        suffix = '_' + JSON.stringify(keycloakRolesArray);
       }
-    } catch (error) {
-      console.error(`Error fetching resource from ${resourceEndpoint}:`, error);
-      return [];
     }
+
+    const timestampKey = this.localStorageKey_spatialUnits + '_timestamp' + suffix;
+    const metadataKey = this.localStorageKey_spatialUnits + '_metadata' + suffix;
+
+    return { timestampKey, metadataKey };
+  }
+
+  /**
+   * Clear cache for spatial units
+   */
+  clearSpatialUnitsCache(keycloakRolesArray: string[]): void {
+    const { timestampKey, metadataKey } = this.getCacheKeys(keycloakRolesArray);
+    localStorage.removeItem(timestampKey);
+    localStorage.removeItem(metadataKey);
+    console.log('Spatial units cache cleared');
+  }
+
+  /**
+   * Clear all cache
+   */
+  clearAllCache(): void {
+    const keys = Object.keys(localStorage);
+    const cacheKeys = keys.filter(key => key.startsWith(this.localStorageKey_prefix));
+    cacheKeys.forEach(key => localStorage.removeItem(key));
+    console.log('All cache cleared');
+  }
+
+  /**
+   * Get current spatial units data
+   */
+  get availableSpatialUnits(): SpatialUnitMetadata[] {
+    return this.spatialUnitsSubject.value;
+  }
+
+  /**
+   * Get current loading state
+   */
+  get isLoading(): boolean {
+    return this.loadingSubject.value;
+  }
+
+  /**
+   * Get current error state
+   */
+  get currentError(): string | null {
+    return this.errorSubject.value;
+  }
+
+  /**
+   * Get base URL
+   */
+  get baseUrl(): string {
+    return this.baseUrlToKomMonitorDataAPI;
+  }
+
+  /**
+   * Get spatial units endpoint
+   */
+  get spatialUnitsEndpointPath(): string {
+    return this.spatialUnitsEndpoint;
+  }
+
+  /**
+   * Set loading state
+   */
+  private setLoading(loading: boolean): void {
+    this.loadingSubject.next(loading);
+  }
+
+  /**
+   * Set error state
+   */
+  private setError(error: any): void {
+    const errorMessage = error?.error?.message || error?.message || 'An unknown error occurred';
+    this.errorSubject.next(errorMessage);
+  }
+
+  /**
+   * Clear error state
+   */
+  private clearError(): void {
+    this.errorSubject.next(null);
+  }
+
+  /**
+   * Handle HTTP errors
+   */
+  private handleError(error: HttpErrorResponse): Observable {
+    let errorMessage = 'An error occurred';
+    
+    if (error.error instanceof ErrorEvent) {
+      // Client-side error
+      errorMessage = `Error: ${error.error.message}`;
+    } else {
+      // Server-side error
+      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+    }
+    
+    console.error('HTTP Error:', errorMessage);
+    return throwError(() => new Error(errorMessage));
   }
 
   /**
    * Initialize the service
-   * Mirrors the original AngularJS init method
    */
   async init(): Promise {
     this.checkAuthentication();
-    // Additional initialization logic could go here
+    await this.fetchLastDatabaseModificationObject().toPromise();
+  }
+
+  /**
+   * Refresh spatial units data
+   */
+  refreshSpatialUnits(keycloakRolesArray: string[]): Observable {
+    this.clearSpatialUnitsCache(keycloakRolesArray);
+    return this.fetchSpatialUnitsMetadata(keycloakRolesArray);
   }
 } 
\ No newline at end of file
diff --git a/app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts b/app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts
index 321cc8575..1d4e7bc2f 100644
--- a/app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts
+++ b/app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts
@@ -1,182 +1,769 @@
-import { Injectable, Inject } from '@angular/core';
-import { Observable, BehaviorSubject } from 'rxjs';
+import { Injectable, Inject, OnDestroy } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { 
+  Observable, 
+  BehaviorSubject, 
+  throwError, 
+  of, 
+  timer,
+  combineLatest,
+  catchError,
+  retry,
+  shareReplay,
+  switchMap,
+  tap,
+  map,
+  filter,
+  takeUntil,
+  Subject
+} from 'rxjs';
+import { AuthService } from '../auth-service/auth.service';
+
+// TypeScript interfaces for better type safety
+export interface SpatialUnitMetadata {
+  spatialUnitId: string;
+  spatialUnitLevel: string;
+  metadata: {
+    description: string;
+    datasource: string;
+    contact: string;
+    note?: string;
+    literature?: string;
+    updateInterval?: string;
+    lastUpdate?: string;
+    databasis?: string;
+    sridEPSG?: number;
+  };
+  nextLowerHierarchyLevel?: string;
+  nextUpperHierarchyLevel?: string;
+  availablePeriodsOfValidity: Array<{
+    startDate: string;
+    endDate?: string;
+  }>;
+  permissions: any[];
+  isPublic: boolean;
+  ownerId: string;
+  userPermissions: string[];
+  isOutlineLayer?: boolean;
+  outlineColor?: string;
+  outlineWidth?: number;
+  outlineDashArrayString?: string;
+}
+
+export interface AccessControlMetadata {
+  organizationalUnitId: string;
+  name: string;
+  permissions: Array<{
+    permissionId: string;
+    permissionLevel: string;
+    isChecked: boolean;
+  }>;
+  datasetOwner?: boolean;
+}
 
 @Injectable({
   providedIn: 'root'
 })
-export class KommonitorDataExchangeService {
-  // Private subjects for reactive updates if needed in the future
-  private spatialUnitsSubject = new BehaviorSubject([]);
+export class KommonitorDataExchangeService implements OnDestroy {
+  // Reactive subjects for state management
+  private spatialUnitsSubject = new BehaviorSubject([]);
+  private accessControlSubject = new BehaviorSubject([]);
+  private currentRolesSubject = new BehaviorSubject([]);
+  private komMonitorRolesSubject = new BehaviorSubject([]);
+  private loadingSubject = new BehaviorSubject(false);
+  private errorSubject = new BehaviorSubject(null);
+  private authenticationStateSubject = new BehaviorSubject(false);
+
+  // Destroy subject for cleanup
+  private destroy$ = new Subject();
+
+  // Public observables
   public spatialUnits$ = this.spatialUnitsSubject.asObservable();
+  public accessControl$ = this.accessControlSubject.asObservable();
+  public currentRoles$ = this.currentRolesSubject.asObservable();
+  public komMonitorRoles$ = this.komMonitorRolesSubject.asObservable();
+  public loading$ = this.loadingSubject.asObservable();
+  public error$ = this.errorSubject.asObservable();
+  public authenticationState$ = this.authenticationStateSubject.asObservable();
+
+  // Cache for spatial units with expiration
+  private spatialUnitsCache: {
+    data: SpatialUnitMetadata[];
+    timestamp: number;
+    expiresAt: number;
+  } | null = null;
+
+  // Cache for access control with expiration
+  private accessControlCache: {
+    data: AccessControlMetadata[];
+    timestamp: number;
+    expiresAt: number;
+  } | null = null;
+
+  // Cache duration in milliseconds (5 minutes)
+  private readonly CACHE_DURATION = 5 * 60 * 1000;
+
+  // Base URL for API calls
+  private readonly baseUrl: string;
+
+  // API endpoints
+  private readonly endpoints = {
+    spatialUnits: '/spatial-units',
+    spatialUnitsPublic: '/public/spatial-units',
+    accessControl: '/organizationalUnits',
+    indicators: '/indicators',
+    indicatorsPublic: '/public/indicators'
+  };
+
+  // Environment configuration
+  private readonly env: any;
 
   constructor(
-    @Inject('kommonitorDataExchangeService') private angularJsDataExchangeService: any
-  ) {}
+    private http: HttpClient,
+    private authService: AuthService
+  ) {
+    // Get environment configuration
+    this.env = (window as any).__env;
+    this.baseUrl = this.getBaseApiUrl();
+    
+    // Initialize the service
+    this.initializeService();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 
   /**
-   * Get available spatial units - delegates to AngularJS service
+   * Initialize the service with proper race condition handling
    */
-  get availableSpatialUnits(): any[] {
-    return this.angularJsDataExchangeService.availableSpatialUnits || [];
+  private initializeService(): void {
+    console.log('Initializing KommonitorDataExchangeService...');
+    
+    // Set up authentication listeners
+    this.setupAuthenticationListeners();
+    
+    // Initial role extraction (with retry logic for race conditions)
+    this.extractAndSetRolesWithRetry();
+    
+    // Set up periodic role checking to handle token refreshes
+    this.setupPeriodicRoleCheck();
   }
 
   /**
-   * Get current Keycloak login roles - delegates to AngularJS service
+   * Set up authentication state listeners
    */
-  get currentKeycloakLoginRoles(): string[] {
-    return this.angularJsDataExchangeService.currentKeycloakLoginRoles || [];
+  private setupAuthenticationListeners(): void {
+    // Listen for authentication state changes
+    timer(0, 1000) // Check every second
+      .pipe(
+        takeUntil(this.destroy$),
+        map(() => this.isAuthenticated()),
+        filter((isAuth, index) => {
+          const currentState = this.authenticationStateSubject.value;
+          return isAuth !== currentState; // Only emit when state changes
+        })
+      )
+      .subscribe(isAuthenticated => {
+        console.log('Authentication state changed:', isAuthenticated);
+        this.authenticationStateSubject.next(isAuthenticated);
+        
+        if (isAuthenticated) {
+          // User just authenticated, extract roles
+          this.extractAndSetRoles();
+        } else {
+          // User logged out, clear roles
+          this.clearRoles();
+        }
+      });
   }
 
   /**
-   * Get spatial units map - delegates to AngularJS service
+   * Extract roles with retry logic to handle race conditions
    */
-  get availableSpatialUnits_map(): Map {
-    return this.angularJsDataExchangeService.availableSpatialUnits_map || new Map();
+  private extractAndSetRolesWithRetry(): void {
+    const maxRetries = 10;
+    let retryCount = 0;
+
+    const attemptRoleExtraction = () => {
+      const roles = this.extractRolesFromKeycloak();
+      
+      if (roles.length > 0 || retryCount >= maxRetries) {
+        this.setCurrentKeycloakLoginRoles(roles);
+        if (roles.length > 0) {
+          console.log('Roles extracted successfully:', roles);
+        } else {
+          console.warn('No roles found after', maxRetries, 'attempts');
+        }
+      } else {
+        retryCount++;
+        console.log(`Role extraction attempt ${retryCount}/${maxRetries} - retrying...`);
+        setTimeout(attemptRoleExtraction, 500); // Retry after 500ms
+      }
+    };
+
+    attemptRoleExtraction();
   }
 
   /**
-   * Fetches spatial units metadata - delegates to AngularJS service
+   * Set up periodic role checking for token refreshes
    */
-  async fetchSpatialUnitsMetadata(keycloakRolesArray: string[]): Promise {
-    return this.angularJsDataExchangeService.fetchSpatialUnitsMetadata(keycloakRolesArray);
+  private setupPeriodicRoleCheck(): void {
+    timer(30000, 30000) // Check every 30 seconds
+      .pipe(
+        takeUntil(this.destroy$),
+        filter(() => this.isAuthenticated())
+      )
+      .subscribe(() => {
+        const currentRoles = this.currentRolesSubject.value;
+        const newRoles = this.extractRolesFromKeycloak();
+        
+        // Only update if roles have changed
+        if (JSON.stringify(currentRoles) !== JSON.stringify(newRoles)) {
+          console.log('Roles changed, updating...');
+          this.setCurrentKeycloakLoginRoles(newRoles);
+        }
+      });
   }
 
   /**
-   * Adds a single spatial unit metadata - delegates to AngularJS service
+   * Extract roles directly from Keycloak JWT token
    */
-  addSingleSpatialUnitMetadata(spatialUnitMetadata: any): void {
-    this.angularJsDataExchangeService.addSingleSpatialUnitMetadata(spatialUnitMetadata);
-    // Emit the updated data for any reactive components
-    this.spatialUnitsSubject.next(this.availableSpatialUnits);
+  private extractRolesFromKeycloak(): string[] {
+    try {
+      const keycloak = this.authService.Auth?.keycloak;
+      
+      if (!keycloak) {
+        console.log('Keycloak not available');
+        return [];
+      }
+
+      if (!keycloak.authenticated) {
+        console.log('User not authenticated');
+        return [];
+      }
+
+      const tokenParsed = keycloak.tokenParsed;
+      if (!tokenParsed?.realm_access?.roles) {
+        console.log('No roles found in token');
+        return [];
+      }
+
+      const roles = tokenParsed.realm_access.roles;
+      console.log('Extracted roles from Keycloak:', roles);
+      return roles;
+    } catch (error) {
+      console.error('Error extracting roles from Keycloak:', error);
+      return [];
+    }
   }
 
   /**
-   * Replaces a single spatial unit metadata - delegates to AngularJS service
+   * Extract and set roles from Keycloak
    */
-  replaceSingleSpatialUnitMetadata(spatialUnitMetadata: any): void {
-    this.angularJsDataExchangeService.replaceSingleSpatialUnitMetadata(spatialUnitMetadata);
-    // Emit the updated data for any reactive components
-    this.spatialUnitsSubject.next(this.availableSpatialUnits);
+  private extractAndSetRoles(): void {
+    const roles = this.extractRolesFromKeycloak();
+    this.setCurrentKeycloakLoginRoles(roles);
   }
 
   /**
-   * Deletes a single spatial unit metadata - delegates to AngularJS service
+   * Filter roles to only include KomMonitor-specific roles
    */
-  deleteSingleSpatialUnitMetadata(spatialUnitId: string): void {
-    this.angularJsDataExchangeService.deleteSingleSpatialUnitMetadata(spatialUnitId);
-    // Emit the updated data for any reactive components
-    this.spatialUnitsSubject.next(this.availableSpatialUnits);
+  private filterKomMonitorRoles(allRoles: string[]): string[] {
+    if (!allRoles || allRoles.length === 0) {
+      return [];
+    }
+
+    // Get environment configuration for role suffixes
+    const roleSuffixes = [
+      ...(this.env?.keycloakKomMonitorGroupsEditRoleNames || []),
+      ...(this.env?.keycloakKomMonitorThemesEditRoleNames || []),
+      ...(this.env?.keycloakKomMonitorGeodataEditRoleNames || [])
+    ];
+
+    // Always include admin role
+    const possibleRoles = [this.env?.keycloakKomMonitorAdminRoleName || 'kommonitor-creator'];
+
+    // Add organizational unit roles based on access control data
+    const accessControl = this.accessControlSubject.value;
+    accessControl.forEach(organizationalUnit => {
+      for (const roleSuffix of roleSuffixes) {
+        possibleRoles.push(organizationalUnit.name + "." + roleSuffix);
+      }
+    });
+
+    // Filter roles to only include KomMonitor-specific ones
+    const komMonitorRoles = allRoles.filter(role => possibleRoles.includes(role));
+    
+    console.log('Filtered KomMonitor roles:', komMonitorRoles);
+    return komMonitorRoles;
   }
 
   /**
-   * Checks if the current user has create permissions - delegates to AngularJS service
+   * Check if user is authenticated
    */
-  checkCreatePermission(): boolean {
-    return this.angularJsDataExchangeService.checkCreatePermission();
+  private isAuthenticated(): boolean {
+    try {
+      const keycloak = this.authService.Auth?.keycloak;
+      return keycloak?.authenticated || false;
+    } catch (error) {
+      console.error('Error checking authentication:', error);
+      return false;
+    }
   }
 
   /**
-   * Gets spatial unit metadata by ID - delegates to AngularJS service
+   * Clear roles when user logs out
    */
-  getSpatialUnitMetadataById(spatialUnitId: string): any {
-    return this.angularJsDataExchangeService.getSpatialUnitMetadataById(spatialUnitId);
+  private clearRoles(): void {
+    this.currentRolesSubject.next([]);
+    this.komMonitorRolesSubject.next([]);
+    console.log('Roles cleared due to logout');
   }
 
   /**
-   * Sets the current Keycloak login roles - delegates to AngularJS service
+   * Gets the base API URL from environment configuration
    */
-  setCurrentKeycloakLoginRoles(roles: string[]): void {
-    this.angularJsDataExchangeService.currentKeycloakLoginRoles = roles;
+  private getBaseApiUrl(): string {
+    if (this.env?.apiUrl && this.env?.basePath) {
+      return `${this.env.apiUrl}${this.env.basePath}`;
+    }
+    // Fallback to default values
+    return 'http://localhost:8085/management';
   }
 
   /**
-   * Display map application error - delegates to AngularJS service
+   * Get available spatial units with caching
    */
-  displayMapApplicationError(error: any): void {
-    this.angularJsDataExchangeService.displayMapApplicationError(error);
+  get availableSpatialUnits(): SpatialUnitMetadata[] {
+    return this.spatialUnitsSubject.value;
   }
 
   /**
-   * Get all allowed roles string - delegates to AngularJS service
+   * Get current Keycloak login roles
    */
-  getAllowedRolesString(permissions: any): string {
-    return this.angularJsDataExchangeService.getAllowedRolesString(permissions);
+  get currentKeycloakLoginRoles(): string[] {
+    return this.currentRolesSubject.value;
   }
 
   /**
-   * Get role title - delegates to AngularJS service
+   * Get KomMonitor-specific roles
    */
-  getRoleTitle(roleId: string): string {
-    return this.angularJsDataExchangeService.getRoleTitle(roleId);
+  get currentKomMonitorLoginRoleNames(): string[] {
+    return this.komMonitorRolesSubject.value;
   }
 
   /**
-   * Fetch indicators metadata - delegates to AngularJS service
+   * Get spatial units map for quick lookup
    */
-  async fetchIndicatorsMetadata(keycloakRolesArray: string[]): Promise {
-    return this.angularJsDataExchangeService.fetchIndicatorsMetadata(keycloakRolesArray);
+  get availableSpatialUnits_map(): Map {
+    const spatialUnits = this.availableSpatialUnits;
+    const map = new Map();
+    spatialUnits.forEach(unit => {
+      map.set(unit.spatialUnitId, unit);
+    });
+    return map;
   }
 
   /**
-   * Get base URL to KomMonitor Data API - delegates to AngularJS service
+   * Get access control data
+   */
+  get accessControl(): AccessControlMetadata[] {
+    return this.accessControlSubject.value;
+  }
+
+  /**
+   * Get base URL to KomMonitor Data API
    */
   get baseUrlToKomMonitorDataAPI(): string {
-    return this.angularJsDataExchangeService.baseUrlToKomMonitorDataAPI || '';
+    return this.baseUrl;
   }
 
   /**
-   * Syntax highlight JSON - delegates to AngularJS service
+   * Check if Keycloak security is enabled
    */
-  syntaxHighlightJSON(json: any): string {
-    return this.angularJsDataExchangeService.syntaxHighlightJSON(json);
+  get enableKeycloakSecurity(): boolean {
+    return this.env?.enableKeycloakSecurity || false;
   }
 
   /**
-   * Get date picker options - delegates to AngularJS service
+   * Get date picker options
    */
   get datePickerOptions(): any {
-    return this.angularJsDataExchangeService.datePickerOptions;
+    return {
+      format: 'dd.mm.yyyy',
+      autoclose: true,
+      todayBtn: 'linked',
+      todayHighlight: true,
+      assumeNearbyYear: true,
+      startView: 2,
+      minView: 2
+    };
   }
 
   /**
-   * Get update interval options - delegates to AngularJS service
+   * Get update interval options
    */
   get updateIntervalOptions(): any[] {
-    return this.angularJsDataExchangeService.updateIntervalOptions || [];
+    return [
+      { value: 'daily', label: 'Täglich' },
+      { value: 'weekly', label: 'Wöchentlich' },
+      { value: 'monthly', label: 'Monatlich' },
+      { value: 'quarterly', label: 'Vierteljährlich' },
+      { value: 'yearly', label: 'Jährlich' },
+      { value: 'on-demand', label: 'Bei Bedarf' }
+    ];
   }
 
   /**
-   * Get available LOI dash array objects - delegates to AngularJS service
+   * Get available line of interest dash array objects
    */
   get availableLoiDashArrayObjects(): any[] {
-    return this.angularJsDataExchangeService.availableLoiDashArrayObjects || [];
+    return [
+      { value: 'solid', label: 'Durchgezogen', dashArray: null },
+      { value: 'dashed', label: 'Gestrichelt', dashArray: '10,5' },
+      { value: 'dotted', label: 'Gepunktet', dashArray: '2,2' },
+      { value: 'dash-dot', label: 'Strich-Punkt', dashArray: '10,2,2,2' }
+    ];
   }
 
   /**
-   * Check if Keycloak security is enabled - delegates to AngularJS service
+   * Fetches spatial units metadata with caching and error handling
    */
-  get enableKeycloakSecurity(): boolean {
-    return this.angularJsDataExchangeService.enableKeycloakSecurity || false;
+  fetchSpatialUnitsMetadata(keycloakRolesArray: string[]): Observable {
+    console.log('Fetching spatial units metadata with roles:', keycloakRolesArray);
+    
+    // Check cache first
+    if (this.isCacheValid(this.spatialUnitsCache)) {
+      console.log('Returning cached spatial units data');
+      this.spatialUnitsSubject.next(this.spatialUnitsCache!.data);
+      return of(this.spatialUnitsCache!.data);
+    }
+
+    console.log('Cache miss, fetching from API...');
+    this.setLoading(true);
+    this.clearError();
+
+    const endpoint = this.getSpatialUnitsEndpoint();
+    const url = `${this.baseUrl}${endpoint}`;
+    console.log('Making API call to:', url);
+
+    return this.http.get(url).pipe(
+      tap(data => {
+        console.log('Spatial units data received:', data.length, 'items');
+        this.spatialUnitsSubject.next(data);
+        this.updateSpatialUnitsCache(data);
+        this.setLoading(false);
+      }),
+      catchError(error => {
+        console.error('Error fetching spatial units:', error);
+        this.setError(this.handleHttpError(error));
+        this.setLoading(false);
+        return throwError(() => error);
+      }),
+      retry(2),
+      shareReplay(1)
+    );
+  }
+
+  /**
+   * Fetches access control metadata
+   */
+  fetchAccessControlMetadata(): Observable {
+    console.log('Fetching access control metadata...');
+    
+    // Check cache first
+    if (this.isCacheValid(this.accessControlCache)) {
+      console.log('Returning cached access control data');
+      this.accessControlSubject.next(this.accessControlCache!.data);
+      return of(this.accessControlCache!.data);
+    }
+
+    this.setLoading(true);
+    this.clearError();
+
+    const url = `${this.baseUrl}${this.endpoints.accessControl}`;
+    console.log('Making API call to:', url);
+
+    return this.http.get(url).pipe(
+      tap(data => {
+        console.log('Access control data received:', data.length, 'items');
+        this.accessControlSubject.next(data);
+        this.updateAccessControlCache(data);
+        this.setLoading(false);
+        
+        // Update KomMonitor roles after access control is loaded
+        this.updateKomMonitorRoles();
+      }),
+      catchError(error => {
+        console.error('Error fetching access control:', error);
+        this.setError(this.handleHttpError(error));
+        this.setLoading(false);
+        return throwError(() => error);
+      }),
+      retry(2),
+      shareReplay(1)
+    );
+  }
+
+  /**
+   * Fetches indicators metadata
+   */
+  fetchIndicatorsMetadata(keycloakRolesArray: string[]): Observable {
+    console.log('Fetching indicators metadata with roles:', keycloakRolesArray);
+    
+    this.setLoading(true);
+    this.clearError();
+
+    const endpoint = this.getIndicatorsEndpoint();
+    const url = `${this.baseUrl}${endpoint}`;
+    console.log('Making API call to:', url);
+
+    return this.http.get(url).pipe(
+      tap(data => {
+        console.log('Indicators data received:', data.length, 'items');
+        this.setLoading(false);
+      }),
+      catchError(error => {
+        console.error('Error fetching indicators:', error);
+        this.setError(this.handleHttpError(error));
+        this.setLoading(false);
+        return throwError(() => error);
+      }),
+      retry(2)
+    );
+  }
+
+  /**
+   * Get spatial unit metadata by ID
+   */
+  getSpatialUnitMetadataById(spatialUnitId: string): SpatialUnitMetadata | null {
+    const spatialUnits = this.availableSpatialUnits;
+    return spatialUnits.find(unit => unit.spatialUnitId === spatialUnitId) || null;
+  }
+
+  /**
+   * Sets the current Keycloak login roles
+   */
+  setCurrentKeycloakLoginRoles(roles: string[]): void {
+    console.log('Setting current Keycloak login roles:', roles);
+    this.currentRolesSubject.next([...roles]);
+    this.komMonitorRolesSubject.next(this.filterKomMonitorRoles(roles));
+  }
+
+  /**
+   * Check if user has permission to create spatial units
+   */
+  checkCreatePermission(): boolean {
+    const roles = this.currentKeycloakLoginRoles;
+    const komMonitorRoles = this.currentKomMonitorLoginRoleNames;
+    
+    console.log('Checking create permission with roles:', roles);
+    console.log('KomMonitor roles:', komMonitorRoles);
+    
+    // Check for admin role
+    if (roles.includes(this.env?.keycloakKomMonitorAdminRoleName || 'kommonitor-creator')) {
+      console.log('User has admin role, create permission granted');
+      return true;
+    }
+    
+    // Check for creator roles
+    const hasCreatorRole = komMonitorRoles.some(role => role.endsWith('-creator'));
+    console.log('User has creator role:', hasCreatorRole);
+    
+    return hasCreatorRole;
+  }
+
+  /**
+   * Get allowed roles string for display
+   */
+  getAllowedRolesString(permissions: any): string {
+    if (!permissions || !Array.isArray(permissions)) {
+      return '';
+    }
+    
+    const accessControl = this.accessControl;
+    const roleNames = permissions.map((permissionId: string) => {
+      for (const unit of accessControl) {
+        const permission = unit.permissions.find(p => p.permissionId === permissionId);
+        if (permission) {
+          return unit.name + '.' + permission.permissionLevel;
+        }
+      }
+      return permissionId;
+    });
+    
+    return roleNames.join(', ');
+  }
+
+  /**
+   * Get role title by role ID
+   */
+  getRoleTitle(roleId: string): string {
+    const accessControl = this.accessControl;
+    const unit = accessControl.find(u => u.organizationalUnitId === roleId);
+    return unit ? unit.name : roleId;
+  }
+
+  /**
+   * Syntax highlight JSON for error display
+   */
+  syntaxHighlightJSON(json: any): string {
+    if (typeof json !== 'string') {
+      json = JSON.stringify(json, null, 2);
+    }
+    json = json.replace(/&/g, '&').replace(//g, '>');
+    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+      let cls = 'number';
+      if (/^"/.test(match)) {
+        if (/:$/.test(match)) {
+          cls = 'key';
+        } else {
+          cls = 'string';
+        }
+      } else if (/true|false/.test(match)) {
+        cls = 'boolean';
+      } else if (/null/.test(match)) {
+        cls = 'null';
+      }
+      return '' + match + '';
+    });
+  }
+
+  /**
+   * Display map application error
+   */
+  displayMapApplicationError(error: any): void {
+    console.error('Map application error:', error);
+    this.setError(typeof error === 'string' ? error : JSON.stringify(error));
+  }
+
+  /**
+   * Refresh spatial units data
+   */
+  refreshSpatialUnits(): Observable {
+    this.invalidateSpatialUnitsCache();
+    return this.fetchSpatialUnitsMetadata(this.currentKeycloakLoginRoles);
+  }
+
+  /**
+   * Clear all caches
+   */
+  clearAllCaches(): void {
+    this.invalidateSpatialUnitsCache();
+    this.accessControlCache = null;
+    console.log('All caches cleared');
+  }
+
+  /**
+   * Get the appropriate spatial units endpoint based on authentication
+   */
+  private getSpatialUnitsEndpoint(): string {
+    const endpoint = this.enableKeycloakSecurity ? 
+      this.endpoints.spatialUnits : 
+      this.endpoints.spatialUnitsPublic;
+    console.log('Selected spatial units endpoint:', endpoint, '(Keycloak enabled:', this.enableKeycloakSecurity, ')');
+    return endpoint;
+  }
+
+  /**
+   * Get the appropriate indicators endpoint based on authentication
+   */
+  private getIndicatorsEndpoint(): string {
+    const endpoint = this.enableKeycloakSecurity ? 
+      this.endpoints.indicators : 
+      this.endpoints.indicatorsPublic;
+    console.log('Selected indicators endpoint:', endpoint, '(Keycloak enabled:', this.enableKeycloakSecurity, ')');
+    return endpoint;
+  }
+
+  /**
+   * Check if cache is valid
+   */
+  private isCacheValid(cache: any): boolean {
+    return cache && cache.data && cache.expiresAt > Date.now();
+  }
+
+  /**
+   * Update spatial units cache
+   */
+  private updateSpatialUnitsCache(data: SpatialUnitMetadata[]): void {
+    this.spatialUnitsCache = {
+      data: [...data],
+      timestamp: Date.now(),
+      expiresAt: Date.now() + this.CACHE_DURATION
+    };
+    console.log('Spatial units cache updated');
+  }
+
+  /**
+   * Update access control cache
+   */
+  private updateAccessControlCache(data: AccessControlMetadata[]): void {
+    this.accessControlCache = {
+      data: [...data],
+      timestamp: Date.now(),
+      expiresAt: Date.now() + this.CACHE_DURATION
+    };
+    console.log('Access control cache updated');
+  }
+
+  /**
+   * Invalidate spatial units cache
+   */
+  private invalidateSpatialUnitsCache(): void {
+    this.spatialUnitsCache = null;
+    console.log('Spatial units cache invalidated');
+  }
+
+  /**
+   * Update KomMonitor roles after access control is loaded
+   */
+  private updateKomMonitorRoles(): void {
+    const currentRoles = this.currentRolesSubject.value;
+    const komMonitorRoles = this.filterKomMonitorRoles(currentRoles);
+    this.komMonitorRolesSubject.next(komMonitorRoles);
+  }
+
+  /**
+   * Set loading state
+   */
+  private setLoading(loading: boolean): void {
+    this.loadingSubject.next(loading);
   }
 
   /**
-   * Get access control data - delegates to AngularJS service
+   * Set error state
    */
-  get accessControl(): any[] {
-    return this.angularJsDataExchangeService.accessControl || [];
+  private setError(error: string): void {
+    this.errorSubject.next(error);
   }
 
   /**
-   * Check admin permission - delegates to AngularJS service
+   * Clear error state
    */
-  checkAdminPermission(): boolean {
-    return this.angularJsDataExchangeService.checkAdminPermission();
+  private clearError(): void {
+    this.errorSubject.next(null);
   }
 
   /**
-   * Get base URL to KomMonitor Data API for spatial resources - delegates to AngularJS service
+   * Handle HTTP errors
    */
-  getBaseUrlToKomMonitorDataAPI_spatialResource(): string {
-    return this.angularJsDataExchangeService.getBaseUrlToKomMonitorDataAPI_spatialResource() || '';
+  private handleHttpError(error: HttpErrorResponse): string {
+    let errorMessage = 'An error occurred';
+    
+    if (error.error instanceof ErrorEvent) {
+      // Client-side error
+      errorMessage = `Error: ${error.error.message}`;
+    } else {
+      // Server-side error
+      errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
+      if (error.error && typeof error.error === 'object') {
+        errorMessage += `\nDetails: ${JSON.stringify(error.error)}`;
+      }
+    }
+    
+    return errorMessage;
   }
 } 
\ No newline at end of file

From 8014ed9e1aed0925272be72b4e040b02cbb96976 Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Wed, 23 Jul 2025 16:19:05 +0530
Subject: [PATCH 032/120] migrated services used inside spatial modals

---
 .../spatial-unit-add-modal.component.html     |   6 +-
 .../spatial-unit-add-modal.component.ts       | 225 ++++-
 ...al-unit-edit-features-modal.component.html |   2 +-
 ...tial-unit-edit-features-modal.component.ts |  22 +-
 ...al-unit-edit-user-roles-modal.component.ts |  16 +-
 .../kommonitor-data-exchange.service.ts       | 136 ++-
 .../kommonitor-importer-helper.service.ts     | 878 ++++++++++++++++++
 7 files changed, 1178 insertions(+), 107 deletions(-)
 create mode 100644 app/services/adminSpatialUnit/kommonitor-importer-helper.service.ts

diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html
index 39ad0c7b6..1db23a722 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html
@@ -2,7 +2,7 @@
   
-  
Neue Raumebene registrieren

+  
 Neue Raumebene registrieren

 

 
 

@@ -397,7 +397,7 @@ 
Angaben über den räumlichen Datensatz, aus dem die Rau
               required
             >
               
-              
             
@@ -740,7 +740,7 @@ 
Angaben über den räumlichen Datensatz, aus dem die Rau
               required
             >
               
-              
             
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
index 37c39205d..162ed5e9f 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
@@ -2,6 +2,9 @@ import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { BroadcastService } from 'services/broadcast-service/broadcast.service';
 import { HttpClient } from '@angular/common/http';
+import { KommonitorImporterHelperService } from '../../../../../services/adminSpatialUnit/kommonitor-importer-helper.service';
+import { KommonitorDataGridHelperService } from '../../../../../services/adminSpatialUnit/kommonitor-data-grid-helper.service';
+import { KommonitorDataExchangeService } from '../../../../../services/adminSpatialUnit/kommonitor-data-exchange.service';
 
 @Component({
   selector: 'spatial-unit-add-modal-new',
@@ -121,13 +124,11 @@ export class SpatialUnitAddModalComponent implements OnInit {
 
   constructor(
     public activeModal: NgbActiveModal,
-    @Inject('kommonitorDataExchangeService') public kommonitorDataExchangeService: any,
-    @Inject('kommonitorImporterHelperService') public kommonitorImporterHelperService: any,
-    @Inject('kommonitorDataGridHelperService') private kommonitorDataGridHelperService: any,
-    @Inject('kommonitorMultiStepFormHelperService') private kommonitorMultiStepFormHelperService: any,
+    public kommonitorDataExchangeService: KommonitorDataExchangeService,
+    public kommonitorImporterHelperService: KommonitorImporterHelperService,
+    private kommonitorDataGridHelperService: KommonitorDataGridHelperService,
     private http: HttpClient,
-    private broadcastService: BroadcastService,
-    @Inject('kommonitorConfigStorageService') private kommonitorConfigStorageService: any
+    private broadcastService: BroadcastService
   ) {
     console.log('SpatialUnitAddModalComponent constructor initialized - Modal is being created');
   }
@@ -155,8 +156,9 @@ export class SpatialUnitAddModalComponent implements OnInit {
     }
 
     // Initialize attribute mapping types
-    if (this.kommonitorImporterHelperService.attributeMapping_attributeTypes) {
-      this.attributeMapping_attributeType = this.kommonitorImporterHelperService.attributeMapping_attributeTypes[0];
+    const attributeMappingTypes = this.kommonitorImporterHelperService.getAttributeMappingTypes();
+    if (attributeMappingTypes && attributeMappingTypes.length > 0) {
+      this.attributeMapping_attributeType = attributeMappingTypes[0];
     }
 
     // Load converters and datasource types
@@ -169,14 +171,15 @@ export class SpatialUnitAddModalComponent implements OnInit {
   private initializeMultiStepForm() {
     // Initialize multi-step form based on security settings
     if (this.kommonitorDataExchangeService.accessControl && 
-        this.kommonitorDataExchangeService.accessControl.roleManagement) {
+        this.kommonitorDataExchangeService.accessControl.length > 0) {
       this.totalSteps = 5; // Include role management step
     } else {
       this.totalSteps = 4;
     }
 
     // Initialize role management if available
-    if (this.kommonitorDataExchangeService.accessControl) {
+    if (this.kommonitorDataExchangeService.accessControl && 
+        this.kommonitorDataExchangeService.accessControl.length > 0) {
       this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
         'spatialUnitAddRoleManagementTable', 
         this.roleManagementTableOptions, 
@@ -187,16 +190,18 @@ export class SpatialUnitAddModalComponent implements OnInit {
   }
 
   private loadConverters(): void {
-    if (this.kommonitorImporterHelperService.availableConverters) {
+    const converters = this.kommonitorImporterHelperService.getAvailableConverters();
+    if (converters) {
       // Filter converters for spatial units
-      this.availableDatasourceTypes = this.kommonitorImporterHelperService.availableConverters
+      this.availableDatasourceTypes = converters
         .filter((converter: any) => converter.type === 'spatialUnit');
     }
   }
 
   private loadDatasourceTypes(): void {
-    if (this.kommonitorImporterHelperService.availableDatasourceTypes) {
-      this.availableDatasourceTypes = this.kommonitorImporterHelperService.availableDatasourceTypes;
+    const datasourceTypes = this.kommonitorImporterHelperService.getAvailableDatasourceTypes();
+    if (datasourceTypes) {
+      this.availableDatasourceTypes = datasourceTypes;
     }
   }
 
@@ -281,7 +286,8 @@ export class SpatialUnitAddModalComponent implements OnInit {
 
     this.attributeMapping_sourceAttributeName = '';
     this.attributeMapping_destinationAttributeName = '';
-    this.attributeMapping_attributeType = this.kommonitorImporterHelperService.attributeMapping_attributeTypes[0];
+    const attributeMappingTypes = this.kommonitorImporterHelperService.getAttributeMappingTypes();
+    this.attributeMapping_attributeType = attributeMappingTypes[0];
   }
 
   onClickEditAttributeMapping(attributeMappingEntry: any) {
@@ -326,35 +332,79 @@ export class SpatialUnitAddModalComponent implements OnInit {
 
   // Importer object building methods
   async buildImporterObjects() {
+    console.log('=== BUILDING IMPORTER OBJECTS - START ===');
+    
+    console.log('Building converter definition...');
     this.converterDefinition = this.buildConverterDefinition();
+    console.log('- converterDefinition result:', this.converterDefinition);
+    
+    console.log('Building datasource type definition...');
     this.datasourceTypeDefinition = await this.buildDatasourceTypeDefinition();
+    console.log('- datasourceTypeDefinition result:', this.datasourceTypeDefinition);
+    
+    console.log('Building property mapping definition...');
     this.propertyMappingDefinition = this.buildPropertyMappingDefinition();
+    console.log('- propertyMappingDefinition result:', this.propertyMappingDefinition);
+    
+    console.log('Building post body for spatial units...');
     this.postBody_spatialUnits = this.buildPostBody_spatialUnits();
+    console.log('- postBody_spatialUnits result:', this.postBody_spatialUnits);
 
-    if (!this.converterDefinition || !this.datasourceTypeDefinition || !this.propertyMappingDefinition || !this.postBody_spatialUnits) {
-      return false;
+    const allValid = this.converterDefinition && 
+                    this.datasourceTypeDefinition && 
+                    this.propertyMappingDefinition && 
+                    this.postBody_spatialUnits;
+    
+    console.log('=== BUILDING IMPORTER OBJECTS - END ===');
+    console.log('- All objects valid:', allValid);
+    console.log('- converterDefinition valid:', !!this.converterDefinition);
+    console.log('- datasourceTypeDefinition valid:', !!this.datasourceTypeDefinition);
+    console.log('- propertyMappingDefinition valid:', !!this.propertyMappingDefinition);
+    console.log('- postBody_spatialUnits valid:', !!this.postBody_spatialUnits);
+
+    if (!allValid) {
+      console.error('=== BUILDING IMPORTER OBJECTS - FAILED ===');
+      console.error('One or more required objects could not be built');
     }
 
-    return true;
+    return allValid;
   }
 
   buildConverterDefinition() {
-    return this.kommonitorImporterHelperService.buildConverterDefinition(
+    console.log('=== BUILDING CONVERTER DEFINITION ===');
+    console.log('- converter:', this.converter);
+    console.log('- schema:', this.schema);
+    console.log('- mimeType:', this.mimeType);
+    
+    const result = this.kommonitorImporterHelperService.buildConverterDefinition(
       this.converter, 
       "converterParameter_spatialUnitAdd_", 
       this.schema, 
       this.mimeType
     );
+    
+    console.log('- buildConverterDefinition result:', result);
+    return result;
   }
 
   async buildDatasourceTypeDefinition() {
+    console.log('=== BUILDING DATASOURCE TYPE DEFINITION ===');
+    console.log('- datasourceType:', this.datasourceType);
+    
     try {
-      return await this.kommonitorImporterHelperService.buildDatasourceTypeDefinition(
+      const result = await this.kommonitorImporterHelperService.buildDatasourceTypeDefinition(
         this.datasourceType, 
         'datasourceTypeParameter_spatialUnitAdd_', 
         'spatialUnitDataSourceInput'
       );
+      
+      console.log('- buildDatasourceTypeDefinition result:', result);
+      return result;
     } catch (error: any) {
+      console.error('=== BUILDING DATASOURCE TYPE DEFINITION - ERROR ===');
+      console.error('- Error:', error);
+      console.error('- Error data:', error.data);
+      
       if (error.data) {
         this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error.data);
       } else {
@@ -367,20 +417,40 @@ export class SpatialUnitAddModalComponent implements OnInit {
   }
 
   buildPropertyMappingDefinition() {
+    console.log('=== BUILDING PROPERTY MAPPING DEFINITION ===');
+    console.log('- spatialUnitDataSourceNameProperty:', this.spatialUnitDataSourceNameProperty);
+    console.log('- spatialUnitDataSourceIdProperty:', this.spatialUnitDataSourceIdProperty);
+    console.log('- validityStartDate_perFeature:', this.validityStartDate_perFeature);
+    console.log('- validityEndDate_perFeature:', this.validityEndDate_perFeature);
+    console.log('- keepAttributes:', this.keepAttributes);
+    console.log('- keepMissingValues:', this.keepMissingValues);
+    console.log('- attributeMappings_adminView:', this.attributeMappings_adminView);
+    
     // arsion from is undefined currently
-    return this.kommonitorImporterHelperService.buildPropertyMapping_spatialResource(
+    const result = this.kommonitorImporterHelperService.buildPropertyMapping_spatialResource(
       this.spatialUnitDataSourceNameProperty, 
       this.spatialUnitDataSourceIdProperty, 
       this.validityStartDate_perFeature, 
       this.validityEndDate_perFeature, 
-      undefined, 
+      '', // empty string instead of undefined
       this.keepAttributes, 
       this.keepMissingValues, 
       this.attributeMappings_adminView
     );
+    
+    console.log('- buildPropertyMappingDefinition result:', result);
+    return result;
   }
 
   buildPostBody_spatialUnits() {
+    console.log('=== BUILDING POST BODY FOR SPATIAL UNITS ===');
+    console.log('- metadata:', this.metadata);
+    console.log('- nextLowerHierarchySpatialUnit:', this.nextLowerHierarchySpatialUnit);
+    console.log('- nextUpperHierarchySpatialUnit:', this.nextUpperHierarchySpatialUnit);
+    console.log('- spatialUnitLevel:', this.spatialUnitLevel);
+    console.log('- periodOfValidity:', this.periodOfValidity);
+    console.log('- roleManagementTableOptions:', this.roleManagementTableOptions);
+    
     const postBody: any = {
       "geoJsonString": "", // will be set by importer
       "metadata": {
@@ -407,6 +477,7 @@ export class SpatialUnitAddModalComponent implements OnInit {
 
     if (this.roleManagementTableOptions) {
       const roleIds = this.kommonitorDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
+      console.log('- roleIds from grid:', roleIds);
       if (roleIds && Array.isArray(roleIds)) {
         for (const roleId of roleIds) {
           postBody.allowedRoles.push(roleId);
@@ -414,46 +485,84 @@ export class SpatialUnitAddModalComponent implements OnInit {
       }
     }
 
+    console.log('- buildPostBody_spatialUnits result:', postBody);
     return postBody;
   }
 
   async addSpatialUnit() {
+    console.log('=== SPATIAL UNIT ADD - START ===');
+    console.log('Current form state:');
+    console.log('- spatialUnitLevel:', this.spatialUnitLevel);
+    console.log('- metadata:', this.metadata);
+    console.log('- converter:', this.converter);
+    console.log('- datasourceType:', this.datasourceType);
+    console.log('- currentStep:', this.currentStep);
+    console.log('- totalSteps:', this.totalSteps);
+    
     this.loadingData = true;
     this.importerErrors = [];
     this.successMessagePart = '';
     this.errorMessagePart = '';
 
+    console.log('=== BUILDING IMPORTER OBJECTS ===');
     // now collect data and build request for importer
     const allDataSpecified = await this.buildImporterObjects();
 
+    console.log('=== IMPORTER OBJECTS RESULT ===');
+    console.log('- allDataSpecified:', allDataSpecified);
+    console.log('- converterDefinition:', this.converterDefinition);
+    console.log('- datasourceTypeDefinition:', this.datasourceTypeDefinition);
+    console.log('- propertyMappingDefinition:', this.propertyMappingDefinition);
+    console.log('- postBody_spatialUnits:', this.postBody_spatialUnits);
+
     if (!allDataSpecified) {
+      console.error('=== VALIDATION FAILED ===');
+      console.error('- Not all data was specified correctly');
+      console.error('- converterDefinition exists:', !!this.converterDefinition);
+      console.error('- datasourceTypeDefinition exists:', !!this.datasourceTypeDefinition);
+      console.error('- propertyMappingDefinition exists:', !!this.propertyMappingDefinition);
+      console.error('- postBody_spatialUnits exists:', !!this.postBody_spatialUnits);
+      
       // TODO: Add form validation here
       this.loadingData = false;
       return;
     } else {
+      console.log('=== VALIDATION PASSED - PROCEEDING WITH DRY RUN ===');
       // TODO verify input
       // TODO Create and perform POST Request with loading screen
 
       let newSpatialUnitResponse_dryRun: any = undefined;
       try {
+        console.log('=== STARTING DRY RUN ===');
+        console.log('Calling kommonitorImporterHelperService.registerNewSpatialUnit with dryRun=true');
+        
         newSpatialUnitResponse_dryRun = await this.kommonitorImporterHelperService.registerNewSpatialUnit(
-          this.converterDefinition, 
-          this.datasourceTypeDefinition, 
-          this.propertyMappingDefinition, 
-          this.postBody_spatialUnits, 
-          true
+          this.converterDefinition,
+          this.datasourceTypeDefinition,
+          this.propertyMappingDefinition,
+          this.postBody_spatialUnits,
+          true // isDryRun
         );
 
+        console.log('=== DRY RUN RESPONSE ===');
+        console.log('- newSpatialUnitResponse_dryRun:', newSpatialUnitResponse_dryRun);
+        console.log('- Response contains errors:', this.kommonitorImporterHelperService.importerResponseContainsErrors(newSpatialUnitResponse_dryRun));
+
         if (!this.kommonitorImporterHelperService.importerResponseContainsErrors(newSpatialUnitResponse_dryRun)) {
+          console.log('=== DRY RUN SUCCESSFUL - PROCEEDING WITH ACTUAL IMPORT ===');
           // all good, really execute the request to import data against data management API
           const newSpatialUnitResponse = await this.kommonitorImporterHelperService.registerNewSpatialUnit(
-            this.converterDefinition, 
-            this.datasourceTypeDefinition, 
-            this.propertyMappingDefinition, 
-            this.postBody_spatialUnits, 
-            false
+            this.converterDefinition,
+            this.datasourceTypeDefinition,
+            this.propertyMappingDefinition,
+            this.postBody_spatialUnits,
+            false // isDryRun
           );
 
+          console.log('=== ACTUAL IMPORT RESPONSE ===');
+          console.log('- newSpatialUnitResponse:', newSpatialUnitResponse);
+          console.log('- Imported ID:', this.kommonitorImporterHelperService.getIdFromImporterResponse(newSpatialUnitResponse));
+
           this.broadcastService.broadcast("refreshSpatialUnitOverviewTable", ["add", this.kommonitorImporterHelperService.getIdFromImporterResponse(newSpatialUnitResponse)]);
 
           // refresh all admin dashboard diagrams due to modified metadata
@@ -462,18 +571,35 @@ export class SpatialUnitAddModalComponent implements OnInit {
           }, 500);
 
           this.successMessagePart = this.postBody_spatialUnits.spatialUnitLevel;
-          this.importedFeatures = this.kommonitorImporterHelperService.getImportedFeaturesFromImporterResponse(newSpatialUnitResponse);
+          const importedFeatures = this.kommonitorImporterHelperService.getImportedFeaturesFromImporterResponse(newSpatialUnitResponse);
+          this.importedFeatures = importedFeatures || [];
+
+          console.log('=== IMPORT SUCCESSFUL ===');
+          console.log('- successMessagePart:', this.successMessagePart);
+          console.log('- importedFeatures count:', this.importedFeatures.length);
 
           this.loadingData = false;
         } else {
+          console.error('=== DRY RUN FAILED WITH ERRORS ===');
           // errors occurred
           // show them 
           this.errorMessagePart = "Einige der zu importierenden Features des Datensatzes weisen kritische Fehler auf";
-          this.importerErrors = this.kommonitorImporterHelperService.getErrorsFromImporterResponse(newSpatialUnitResponse_dryRun);
+          const errors = this.kommonitorImporterHelperService.getErrorsFromImporterResponse(newSpatialUnitResponse_dryRun);
+          this.importerErrors = errors || [];
+
+          console.error('- errorMessagePart:', this.errorMessagePart);
+          console.error('- importerErrors:', this.importerErrors);
 
           this.loadingData = false;
         }
       } catch (error: any) {
+        console.error('=== EXCEPTION DURING IMPORT ===');
+        console.error('- Error type:', typeof error);
+        console.error('- Error:', error);
+        console.error('- Error message:', error?.message);
+        console.error('- Error data:', error?.data);
+        console.error('- Error status:', error?.status);
+        
         if (error.data) {
           this.errorMessagePart = this.kommonitorDataExchangeService.syntaxHighlightJSON(error.data);
         } else {
@@ -481,18 +607,35 @@ export class SpatialUnitAddModalComponent implements OnInit {
         }
 
         if (newSpatialUnitResponse_dryRun) {
-          this.importerErrors = this.kommonitorImporterHelperService.getErrorsFromImporterResponse(newSpatialUnitResponse_dryRun);
+          const errors = this.kommonitorImporterHelperService.getErrorsFromImporterResponse(newSpatialUnitResponse_dryRun);
+          this.importerErrors = errors || [];
+          console.error('- Errors from dry run:', this.importerErrors);
         }
 
         this.loadingData = false;
       }
     }
+    console.log('=== SPATIAL UNIT ADD - END ===');
   }
 
   onSubmit() {
+    console.log('=== ON SUBMIT - START ===');
+    console.log('Current form state:');
+    console.log('- spatialUnitLevel:', this.spatialUnitLevel);
+    console.log('- spatialUnitLevelInvalid:', this.spatialUnitLevelInvalid);
+    console.log('- hierarchyInvalid:', this.hierarchyInvalid);
+    console.log('- currentStep:', this.currentStep);
+    console.log('- totalSteps:', this.totalSteps);
+
     if (!this.spatialUnitLevelInvalid && !this.hierarchyInvalid) {
       this.addSpatialUnit();
+    } else {
+      console.log('=== ON SUBMIT - FAILED VALIDATION ===');
+      console.log('- spatialUnitLevelInvalid:', this.spatialUnitLevelInvalid);
+      console.log('- hierarchyInvalid:', this.hierarchyInvalid);
+      this.loadingData = false;
     }
+    console.log('=== ON SUBMIT - END ===');
   }
 
   // Multi-step navigation
@@ -643,7 +786,8 @@ export class SpatialUnitAddModalComponent implements OnInit {
     }
 
     this.converter = undefined;
-    for (const converter of this.kommonitorImporterHelperService.availableConverters) {
+    const converters = this.kommonitorImporterHelperService.getAvailableConverters();
+    for (const converter of converters) {
       if (converter.name === this.mappingConfigImportSettings.converter.name) {
         this.converter = converter;
         break;
@@ -669,7 +813,8 @@ export class SpatialUnitAddModalComponent implements OnInit {
     }
 
     this.datasourceType = null;
-    for (const datasourceType of this.kommonitorImporterHelperService.availableDatasourceTypes) {
+    const datasourceTypes = this.kommonitorImporterHelperService.getAvailableDatasourceTypes();
+    for (const datasourceType of datasourceTypes) {
       if (datasourceType.type === this.mappingConfigImportSettings.dataSource.type) {
         this.datasourceType = datasourceType;
         break;
@@ -691,7 +836,8 @@ export class SpatialUnitAddModalComponent implements OnInit {
         "destinationName": attributeMapping.mappingName
       };
 
-      for (const dataType of this.kommonitorImporterHelperService.attributeMapping_attributeTypes) {
+      const attributeMappingTypes = this.kommonitorImporterHelperService.getAttributeMappingTypes();
+    for (const dataType of attributeMappingTypes) {
         if (dataType.apiName === attributeMapping.type) {
           tmpEntry.dataType = dataType;
         }
@@ -887,7 +1033,8 @@ export class SpatialUnitAddModalComponent implements OnInit {
     this.resourcesCreatorRights = [];
     this.spatialUnitDataSourceIdPropertyInvalid = false;
     this.spatialUnitDataSourceNamePropertyInvalid = false;
-    this.attributeMapping_attributeType = this.kommonitorImporterHelperService.attributeMapping_attributeTypes[0];
+    const attributeMappingTypes = this.kommonitorImporterHelperService.getAttributeMappingTypes();
+    this.attributeMapping_attributeType = attributeMappingTypes[0];
     this.errorMessage = '';
     this.successMessage = '';
   }
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.html
index 951160338..64c0085fa 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.html
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.html
@@ -144,7 +144,7 @@ 
Angaben über den räumlichen Datensatz, aus dem die Rau
                 
                 
             

@@ -859,7 +859,7 @@ 
Metadata Import gescheitert

   
								
   

   
Bitte stellen Sie sicher, dass folgendes JSON-Format eingehalten wird:

-  

+  

 

 
 
@@ -874,5 +874,5 @@ 
Mapping-Konfiguration Import gescheitert

   
								
   

   
Bitte stellen Sie sicher, dass folgendes JSON-Format eingehalten wird:

-  

+  

 
 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
index 162ed5e9f..58d3155ce 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
@@ -49,7 +49,7 @@ export class SpatialUnitAddModalComponent implements OnInit {
   // Outline layer settings
   isOutlineLayer = false;
   loiColor = '#bf3d2c';
-  outlineWidth = 2;
+  outlineWidth = 3;
   outlineDashArray: any = null;
 
   // Period of validity
@@ -122,6 +122,11 @@ export class SpatialUnitAddModalComponent implements OnInit {
   spatialUnitDataSourceInputInvalid = false;
   spatialUnitDataSourceInputInvalidReason = '';
 
+  // Missing properties from original component
+  outlineColor = "#000000";
+  selectedOutlineDashArrayObject: any = null;
+  spatialUnitMetadataStructure_pretty: string = '';
+
   constructor(
     public activeModal: NgbActiveModal,
     public kommonitorDataExchangeService: KommonitorDataExchangeService,
@@ -137,6 +142,9 @@ export class SpatialUnitAddModalComponent implements OnInit {
     console.log('SpatialUnitAddModalComponent ngOnInit - Modal is being initialized');
     this.loadInitialData();
     this.initializeMultiStepForm();
+    this.initializeOutlineLayerSettings();
+    this.initializeMetadataStructures();
+    this.setupEventListeners();
     console.log('SpatialUnitAddModalComponent ngOnInit - Modal initialization complete');
     console.log('Current step:', this.currentStep);
     console.log('Total steps:', this.totalSteps);
@@ -205,6 +213,84 @@ export class SpatialUnitAddModalComponent implements OnInit {
     }
   }
 
+  private initializeOutlineLayerSettings() {
+    this.selectedOutlineDashArrayObject = this.kommonitorDataExchangeService.availableLoiDashArrayObjects?.[0] || null;
+    this.availableLoiDashArrayObjects = this.kommonitorDataExchangeService.availableLoiDashArrayObjects || [];
+  }
+
+  private initializeMetadataStructures() {
+    this.spatialUnitMetadataStructure_pretty = this.kommonitorDataExchangeService.syntaxHighlightJSON(this.spatialUnitMetadataStructure);
+  }
+
+  prepareCreatorList() {
+    if (this.kommonitorDataExchangeService.currentKomMonitorLoginRoleNames?.length > 0) {
+      let creatorRights: string[] = [];
+      let creatorRightsChildren: string[] = [];
+      
+      this.kommonitorDataExchangeService.currentKomMonitorLoginRoleNames.forEach((roles: string) => {
+        let key = roles.split('.')[0];
+        let role = roles.split('.')[1];
+
+        if (role === 'unit-resources-creator' && !this.resourcesCreatorRights.includes(key)) {
+          creatorRights.push(key);
+        }
+
+        if (role === 'client-resources-creator' && !creatorRightsChildren.includes(key)) {
+          creatorRightsChildren.push(key);
+        }
+      });
+
+      this.gatherCreatorRightsChildren(creatorRights, creatorRightsChildren);
+      this.resourcesCreatorRights = this.kommonitorDataExchangeService.accessControl?.filter(elem => creatorRights.includes(elem.name)) || [];
+    }
+  }
+
+  private gatherCreatorRightsChildren(creatorRights: string[], creatorRightsChildren: string[]) {
+    if (creatorRightsChildren.length > 0) {
+      this.kommonitorDataExchangeService.accessControl
+        ?.filter(elem => creatorRightsChildren.includes(elem.name))
+        .flatMap(res => res.children || [])
+        .forEach(child => {
+          this.kommonitorDataExchangeService.accessControl
+            ?.filter(elem => elem.organizationalUnitId === child)
+            .forEach(childData => {
+              creatorRights.push(childData.name);
+              this.gatherCreatorRightsChildren(creatorRights, [childData.name]);
+            });
+        });
+    }
+  }
+
+  private refreshRoles(orgUnitId?: string) {
+    let permissionIds_ownerUnit: string[] = [];
+    
+    if (orgUnitId) {
+      const accessControl = this.kommonitorDataExchangeService.getAccessControlById(orgUnitId);
+      permissionIds_ownerUnit = accessControl?.permissions
+        ?.filter(permission => permission.permissionLevel === "viewer" || permission.permissionLevel === "editor")
+        .map(permission => permission.permissionId) || [];
+    }
+
+    // Set datasetOwner flags
+    this.kommonitorDataExchangeService.accessControl?.forEach(item => {
+      item.datasetOwner = item.organizationalUnitId === orgUnitId;
+    });
+
+    this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+      'spatialUnitAddRoleManagementTable',
+      this.roleManagementTableOptions,
+      this.kommonitorDataExchangeService.accessControl || [],
+      permissionIds_ownerUnit,
+      true
+    );
+  }
+
+  private setupEventListeners() {
+    // Note: In Angular, we typically use subscription to broadcast events
+    // For now, we'll handle these events in the appropriate service calls
+    // The original AngularJS component used $scope.$on which is not available in Angular
+  }
+
   checkSpatialUnitName() {
     this.spatialUnitLevelInvalid = false;
     const level = this.spatialUnitLevel;
@@ -327,6 +413,7 @@ export class SpatialUnitAddModalComponent implements OnInit {
 
   onChangeOutlineDashArray(outlineDashArrayObject: any) {
     // Handle outline dash array change
+    this.selectedOutlineDashArrayObject = outlineDashArrayObject;
     this.outlineDashArray = outlineDashArrayObject;
   }
 
@@ -465,14 +552,21 @@ export class SpatialUnitAddModalComponent implements OnInit {
         "databasis": this.metadata.databasis
       },
       "jsonSchema": undefined,
-      "allowedRoles": [] as string[],
+      "permissions": [] as string[], // Changed from allowedRoles to match original
       "nextLowerHierarchyLevel": this.nextLowerHierarchySpatialUnit ? this.nextLowerHierarchySpatialUnit.spatialUnitLevel : null,
       "spatialUnitLevel": this.spatialUnitLevel,
       "periodOfValidity": {
         "endDate": this.periodOfValidity && this.periodOfValidity.endDate ? this.periodOfValidity.endDate : null,
         "startDate": this.periodOfValidity && this.periodOfValidity.startDate ? this.periodOfValidity.startDate : null
       },
-      "nextUpperHierarchyLevel": this.nextUpperHierarchySpatialUnit ? this.nextUpperHierarchySpatialUnit.spatialUnitLevel : null
+      "nextUpperHierarchyLevel": this.nextUpperHierarchySpatialUnit ? this.nextUpperHierarchySpatialUnit.spatialUnitLevel : null,
+      // Add missing outline layer properties
+      "isOutlineLayer": this.isOutlineLayer,
+      "outlineColor": this.outlineColor,
+      "outlineWidth": this.outlineWidth,
+      "outlineDashArrayString": this.selectedOutlineDashArrayObject?.dashArrayValue,
+      "ownerId": this.ownerOrganization,
+      "isPublic": this.isPublic
     };
 
     if (this.roleManagementTableOptions) {
@@ -480,7 +574,7 @@ export class SpatialUnitAddModalComponent implements OnInit {
       console.log('- roleIds from grid:', roleIds);
       if (roleIds && Array.isArray(roleIds)) {
         for (const roleId of roleIds) {
-          postBody.allowedRoles.push(roleId);
+          postBody.permissions.push(roleId);
         }
       }
     }
@@ -737,6 +831,7 @@ export class SpatialUnitAddModalComponent implements OnInit {
       return;
     }
 
+    // Parse metadata
     this.metadata = {};
     this.metadata.note = this.metadataImportSettings.metadata.note;
     this.metadata.literature = this.metadataImportSettings.metadata.literature;
@@ -754,26 +849,42 @@ export class SpatialUnitAddModalComponent implements OnInit {
     this.metadata.description = this.metadataImportSettings.metadata.description;
     this.metadata.databasis = this.metadataImportSettings.metadata.databasis;
 
+    // Parse role management (changed from allowedRoles to permissions)
     if (this.kommonitorDataExchangeService.accessControl) {
       this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
         'spatialUnitAddRoleManagementTable', 
         this.roleManagementTableOptions, 
         this.kommonitorDataExchangeService.accessControl, 
-        this.metadataImportSettings.allowedRoles
+        this.metadataImportSettings.permissions || [], // Changed from allowedRoles
+        true
       );
     }
 
-    for (let i = 0; i < this.kommonitorDataExchangeService.availableSpatialUnits.length; i++) {
-      const spatialUnit = this.kommonitorDataExchangeService.availableSpatialUnits[i];
+    // Parse hierarchy
+    this.kommonitorDataExchangeService.availableSpatialUnits.forEach((spatialUnit: any) => {
       if (spatialUnit.spatialUnitLevel === this.metadataImportSettings.nextLowerHierarchyLevel) {
         this.nextLowerHierarchySpatialUnit = spatialUnit;
       }
       if (spatialUnit.spatialUnitLevel === this.metadataImportSettings.nextUpperHierarchyLevel) {
         this.nextUpperHierarchySpatialUnit = spatialUnit;
       }
-    }
+    });
+
+    // Parse outline layer settings
+    this.isOutlineLayer = this.metadataImportSettings.isOutlineLayer || false;
+    this.outlineColor = this.metadataImportSettings.outlineColor || "#000000";
+    this.outlineWidth = this.metadataImportSettings.outlineWidth || 3;
+    
+    this.kommonitorDataExchangeService.availableLoiDashArrayObjects?.forEach((option: any) => {
+      if (option.dashArrayValue === this.metadataImportSettings.outlineDashArrayString) {
+        this.selectedOutlineDashArrayObject = option;
+        this.onChangeOutlineDashArray(this.selectedOutlineDashArrayObject);
+      }
+    });
 
     this.spatialUnitLevel = this.metadataImportSettings.spatialUnitLevel;
+    this.ownerOrganization = this.metadataImportSettings.ownerId;
+    this.isPublic = this.metadataImportSettings.isPublic || false;
   }
 
   parseFromMappingConfigFile(event: any) {
@@ -857,13 +968,14 @@ export class SpatialUnitAddModalComponent implements OnInit {
 
   onExportSpatialUnitAddMetadataTemplate() {
     const metadataJSON = JSON.stringify(this.spatialUnitMetadataStructure);
-    const fileName = "Raumeinheit_Metadaten_Vorlage_Export.json";
+    const fileName = "Raumebene_Metadaten_Vorlage_Export.json";
     this.downloadFile(metadataJSON, fileName);
   }
 
   onExportSpatialUnitAddMetadata() {
     const metadataExport: any = { ...this.spatialUnitMetadataStructure };
 
+    // Update metadata fields
     metadataExport.metadata.note = this.metadata.note || "";
     metadataExport.metadata.literature = this.metadata.literature || "";
     metadataExport.metadata.sridEPSG = this.metadata.sridEPSG || "";
@@ -874,38 +986,33 @@ export class SpatialUnitAddModalComponent implements OnInit {
     metadataExport.metadata.databasis = this.metadata.databasis || "";
     metadataExport.spatialUnitLevel = this.spatialUnitLevel || "";
 
-    metadataExport.allowedRoles = [];
+    // Update permissions (changed from allowedRoles)
+    metadataExport.permissions = [];
     if (this.roleManagementTableOptions) {
       const roleIds = this.kommonitorDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
-      for (const roleId of roleIds) {
-        metadataExport.allowedRoles.push(roleId);
-      }
+      metadataExport.permissions.push(...roleIds);
     }
 
+    // Update hierarchy levels
     if (this.metadata.updateInterval) {
       metadataExport.metadata.updateInterval = this.metadata.updateInterval.apiName;
     }
-    if (this.nextLowerHierarchySpatialUnit) {
-      metadataExport.nextLowerHierarchyLevel = this.nextLowerHierarchySpatialUnit.spatialUnitLevel;
-    } else {
-      metadataExport.nextLowerHierarchyLevel = "";
-    }
-    if (this.nextUpperHierarchySpatialUnit) {
-      metadataExport.nextUpperHierarchyLevel = this.nextUpperHierarchySpatialUnit.spatialUnitLevel;
-    } else {
-      metadataExport.nextUpperHierarchyLevel = "";
-    }
+    metadataExport.nextLowerHierarchyLevel = this.nextLowerHierarchySpatialUnit?.spatialUnitLevel || "";
+    metadataExport.nextUpperHierarchyLevel = this.nextUpperHierarchySpatialUnit?.spatialUnitLevel || "";
 
-    const name = this.spatialUnitLevel;
-    const metadataJSON = JSON.stringify(metadataExport);
-    let fileName = "Raumeinheit_Metadaten_Export";
+    // Add outline layer properties
+    metadataExport.isOutlineLayer = this.isOutlineLayer;
+    metadataExport.outlineDashArrayString = this.selectedOutlineDashArrayObject?.dashArrayValue;
+    metadataExport.outlineColor = this.outlineColor;
+    metadataExport.outlineWidth = this.outlineWidth;
 
-    if (name) {
-      fileName += "-" + name;
-    }
+    // Add owner properties
+    metadataExport.ownerId = this.ownerOrganization;
+    metadataExport.isPublic = this.isPublic;
 
-    fileName += ".json";
-    this.downloadFile(metadataJSON, fileName);
+    const name = this.spatialUnitLevel;
+    const fileName = `Raumebene_Metadaten_Export${name ? '-' + name : ''}.json`;
+    this.downloadFile(JSON.stringify(metadataExport), fileName);
   }
 
   async onExportSpatialUnitAddMappingConfig() {
@@ -952,25 +1059,25 @@ export class SpatialUnitAddModalComponent implements OnInit {
   get spatialUnitMetadataStructure() {
     return {
       "metadata": {
-        "note": "",
-        "literature": "",
-        "updateInterval": "",
-        "sridEPSG": "",
-        "datasource": "",
-        "contact": "",
-        "lastUpdate": "",
-        "description": "",
-        "databasis": ""
+        "note": "an optional note",
+        "literature": "optional text about literature",
+        "updateInterval": "YEARLY|HALF_YEARLY|QUARTERLY|MONTHLY|ARBITRARY",
+        "sridEPSG": 4326,
+        "datasource": "text about data source",
+        "contact": "text about contact details",
+        "lastUpdate": "YYYY-MM-DD",
+        "description": "description about spatial unit dataset",
+        "databasis": "text about data basis",
       },
-      "allowedRoles": [],
-      "nextLowerHierarchyLevel": "",
-      "spatialUnitLevel": "",
-      "nextUpperHierarchyLevel": ""
+      "permissions": ['roleId'],
+      "nextLowerHierarchyLevel": "Name of lower hierarchy level",
+      "spatialUnitLevel": "Name of spatial unit dataset",
+      "nextUpperHierarchyLevel": "Name of upper hierarchy level"
     };
   }
 
   get spatialUnitMappingConfigStructure_pretty() {
-    return JSON.stringify(this.spatialUnitMetadataStructure, null, 2);
+    return this.kommonitorDataExchangeService.syntaxHighlightJSON(this.kommonitorImporterHelperService.mappingConfigStructure);
   }
 
   resetForm() {
@@ -993,10 +1100,14 @@ export class SpatialUnitAddModalComponent implements OnInit {
     this.hierarchyInvalid = false;
     this.periodOfValidity = { startDate: '', endDate: '' };
     this.periodOfValidityInvalid = false;
+    
+    // Reset outline layer settings
     this.isOutlineLayer = false;
-    this.loiColor = '#bf3d2c';
-    this.outlineWidth = 2;
+    this.outlineColor = "#000000";
+    this.outlineWidth = 3;
     this.outlineDashArray = null;
+    this.selectedOutlineDashArrayObject = this.kommonitorDataExchangeService.availableLoiDashArrayObjects?.[0] || null;
+    
     this.converter = null;
     this.schema = '';
     this.mimeType = '';
@@ -1022,15 +1133,28 @@ export class SpatialUnitAddModalComponent implements OnInit {
     this.namePropertyNotFound = false;
     this.spatialUnitDataSourceInputInvalid = false;
     this.spatialUnitDataSourceInputInvalidReason = '';
+    
+    // Reset role management
     this.ownerOrganization = '';
     this.ownerOrgFilter = '';
     this.isPublic = false;
-    this.roleManagementTableOptions = null;
+    this.resourcesCreatorRights = [];
+    
+    // Reset role management table
+    if (this.kommonitorDataExchangeService.accessControl) {
+      this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
+        'spatialUnitAddRoleManagementTable',
+        this.roleManagementTableOptions,
+        this.kommonitorDataExchangeService.accessControl,
+        [],
+        true
+      );
+    }
+    
     this.metadataImportSettings = null;
     this.mappingConfigImportSettings = null;
     this.spatialUnitMetadataImportError = '';
     this.spatialUnitMappingConfigImportError = '';
-    this.resourcesCreatorRights = [];
     this.spatialUnitDataSourceIdPropertyInvalid = false;
     this.spatialUnitDataSourceNamePropertyInvalid = false;
     const attributeMappingTypes = this.kommonitorImporterHelperService.getAttributeMappingTypes();

From 0994c2a0c1d666618cf84c6697652d42c152be57 Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Thu, 24 Jul 2025 17:24:04 +0530
Subject: [PATCH 034/120] spatialAddModal: intifite error fixed

---
 .../spatial-unit-add-modal.component.html     |   9 +-
 .../spatial-unit-add-modal.component.ts       | 190 ++++++------------
 .../kommonitor-data-exchange.service.ts       |  37 +++-
 3 files changed, 102 insertions(+), 134 deletions(-)

diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html
index 73e077fab..d9ee2dfcf 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html
@@ -316,16 +316,19 @@ 
Vergabe der Zugriffsrechte auf Datensatz-Metadaten und -
           

             Bitte wählen Sie zunächst die Organisationseinheit aus, unter welcher Sie den Datensatz anlegen möchten
           

+          
           
           

             
             
           

           		
           		
           

         

@@ -336,7 +339,7 @@ 
Vergabe der Zugriffsrechte auf Datensatz-Metadaten und -
       

       

 
-      

+      

         
         

           

diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
index 58d3155ce..3a99349e7 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
@@ -126,6 +126,32 @@ export class SpatialUnitAddModalComponent implements OnInit {
   outlineColor = "#000000";
   selectedOutlineDashArrayObject: any = null;
   spatialUnitMetadataStructure_pretty: string = '';
+  
+  // Role form visibility
+  showRoleForm = false;
+
+  // Filter organizations based on ownerOrgFilter
+  get filteredAccessControl() {
+    const accessControl = this.kommonitorDataExchangeService.accessControl || [];
+    
+    if (!this.ownerOrgFilter) {
+      return accessControl;
+    }
+    const filtered = accessControl.filter(org => 
+      org.name.toLowerCase().includes(this.ownerOrgFilter.toLowerCase())
+    );
+    return filtered;
+  }
+
+  get filteredResourcesCreatorRights() {
+    if (!this.ownerOrgFilter) {
+      return this.resourcesCreatorRights;
+    }
+    const filtered = this.resourcesCreatorRights.filter(org => 
+      org.name.toLowerCase().includes(this.ownerOrgFilter.toLowerCase())
+    );
+    return filtered;
+  }
 
   constructor(
     public activeModal: NgbActiveModal,
@@ -135,19 +161,14 @@ export class SpatialUnitAddModalComponent implements OnInit {
     private http: HttpClient,
     private broadcastService: BroadcastService
   ) {
-    console.log('SpatialUnitAddModalComponent constructor initialized - Modal is being created');
   }
 
   ngOnInit() {
-    console.log('SpatialUnitAddModalComponent ngOnInit - Modal is being initialized');
     this.loadInitialData();
     this.initializeMultiStepForm();
     this.initializeOutlineLayerSettings();
     this.initializeMetadataStructures();
     this.setupEventListeners();
-    console.log('SpatialUnitAddModalComponent ngOnInit - Modal initialization complete');
-    console.log('Current step:', this.currentStep);
-    console.log('Total steps:', this.totalSteps);
   }
 
   private loadInitialData() {
@@ -161,6 +182,8 @@ export class SpatialUnitAddModalComponent implements OnInit {
     // Load update interval options
     if (this.kommonitorDataExchangeService.updateIntervalOptions) {
       this.updateIntervalOptions = this.kommonitorDataExchangeService.updateIntervalOptions;
+    } else {
+      console.warn('No update interval options available from service');
     }
 
     // Initialize attribute mapping types
@@ -173,7 +196,30 @@ export class SpatialUnitAddModalComponent implements OnInit {
     this.loadConverters();
     this.loadDatasourceTypes();
 
-    this.loadingData = false;
+    // Load access control data and prepare creator list
+    this.loadAccessControlData();
+  }
+
+  private loadAccessControlData() {
+    // Check if access control data is already available
+    if (this.kommonitorDataExchangeService.accessControl && this.kommonitorDataExchangeService.accessControl.length > 0) {
+      this.prepareCreatorList();
+      this.loadingData = false;
+    } else {
+      // Fetch access control data from server
+      this.kommonitorDataExchangeService.fetchAccessControlMetadata().subscribe({
+        next: (data) => {
+          this.prepareCreatorList();
+          this.loadingData = false;
+        },
+        error: (error) => {
+          console.error('Error fetching access control data:', error);
+          // Set empty arrays to avoid errors
+          this.resourcesCreatorRights = [];
+          this.loadingData = false;
+        }
+      });
+    }
   }
 
   private initializeMultiStepForm() {
@@ -225,39 +271,20 @@ export class SpatialUnitAddModalComponent implements OnInit {
   prepareCreatorList() {
     if (this.kommonitorDataExchangeService.currentKomMonitorLoginRoleNames?.length > 0) {
       let creatorRights: string[] = [];
-      let creatorRightsChildren: string[] = [];
       
       this.kommonitorDataExchangeService.currentKomMonitorLoginRoleNames.forEach((roles: string) => {
         let key = roles.split('.')[0];
         let role = roles.split('.')[1];
 
-        if (role === 'unit-resources-creator' && !this.resourcesCreatorRights.includes(key)) {
+        if (role === 'unit-resources-creator' && !creatorRights.includes(key)) {
           creatorRights.push(key);
         }
-
-        if (role === 'client-resources-creator' && !creatorRightsChildren.includes(key)) {
-          creatorRightsChildren.push(key);
-        }
       });
 
-      this.gatherCreatorRightsChildren(creatorRights, creatorRightsChildren);
+      // Simplified approach - just filter based on creator rights
       this.resourcesCreatorRights = this.kommonitorDataExchangeService.accessControl?.filter(elem => creatorRights.includes(elem.name)) || [];
-    }
-  }
-
-  private gatherCreatorRightsChildren(creatorRights: string[], creatorRightsChildren: string[]) {
-    if (creatorRightsChildren.length > 0) {
-      this.kommonitorDataExchangeService.accessControl
-        ?.filter(elem => creatorRightsChildren.includes(elem.name))
-        .flatMap(res => res.children || [])
-        .forEach(child => {
-          this.kommonitorDataExchangeService.accessControl
-            ?.filter(elem => elem.organizationalUnitId === child)
-            .forEach(childData => {
-              creatorRights.push(childData.name);
-              this.gatherCreatorRightsChildren(creatorRights, [childData.name]);
-            });
-        });
+    } else {
+      this.resourcesCreatorRights = [];
     }
   }
 
@@ -419,35 +446,19 @@ export class SpatialUnitAddModalComponent implements OnInit {
 
   // Importer object building methods
   async buildImporterObjects() {
-    console.log('=== BUILDING IMPORTER OBJECTS - START ===');
     
-    console.log('Building converter definition...');
     this.converterDefinition = this.buildConverterDefinition();
-    console.log('- converterDefinition result:', this.converterDefinition);
     
-    console.log('Building datasource type definition...');
     this.datasourceTypeDefinition = await this.buildDatasourceTypeDefinition();
-    console.log('- datasourceTypeDefinition result:', this.datasourceTypeDefinition);
     
-    console.log('Building property mapping definition...');
     this.propertyMappingDefinition = this.buildPropertyMappingDefinition();
-    console.log('- propertyMappingDefinition result:', this.propertyMappingDefinition);
     
-    console.log('Building post body for spatial units...');
     this.postBody_spatialUnits = this.buildPostBody_spatialUnits();
-    console.log('- postBody_spatialUnits result:', this.postBody_spatialUnits);
 
     const allValid = this.converterDefinition && 
                     this.datasourceTypeDefinition && 
                     this.propertyMappingDefinition && 
                     this.postBody_spatialUnits;
-    
-    console.log('=== BUILDING IMPORTER OBJECTS - END ===');
-    console.log('- All objects valid:', allValid);
-    console.log('- converterDefinition valid:', !!this.converterDefinition);
-    console.log('- datasourceTypeDefinition valid:', !!this.datasourceTypeDefinition);
-    console.log('- propertyMappingDefinition valid:', !!this.propertyMappingDefinition);
-    console.log('- postBody_spatialUnits valid:', !!this.postBody_spatialUnits);
 
     if (!allValid) {
       console.error('=== BUILDING IMPORTER OBJECTS - FAILED ===');
@@ -458,10 +469,6 @@ export class SpatialUnitAddModalComponent implements OnInit {
   }
 
   buildConverterDefinition() {
-    console.log('=== BUILDING CONVERTER DEFINITION ===');
-    console.log('- converter:', this.converter);
-    console.log('- schema:', this.schema);
-    console.log('- mimeType:', this.mimeType);
     
     const result = this.kommonitorImporterHelperService.buildConverterDefinition(
       this.converter, 
@@ -470,13 +477,10 @@ export class SpatialUnitAddModalComponent implements OnInit {
       this.mimeType
     );
     
-    console.log('- buildConverterDefinition result:', result);
     return result;
   }
 
   async buildDatasourceTypeDefinition() {
-    console.log('=== BUILDING DATASOURCE TYPE DEFINITION ===');
-    console.log('- datasourceType:', this.datasourceType);
     
     try {
       const result = await this.kommonitorImporterHelperService.buildDatasourceTypeDefinition(
@@ -485,7 +489,6 @@ export class SpatialUnitAddModalComponent implements OnInit {
         'spatialUnitDataSourceInput'
       );
       
-      console.log('- buildDatasourceTypeDefinition result:', result);
       return result;
     } catch (error: any) {
       console.error('=== BUILDING DATASOURCE TYPE DEFINITION - ERROR ===');
@@ -504,39 +507,22 @@ export class SpatialUnitAddModalComponent implements OnInit {
   }
 
   buildPropertyMappingDefinition() {
-    console.log('=== BUILDING PROPERTY MAPPING DEFINITION ===');
-    console.log('- spatialUnitDataSourceNameProperty:', this.spatialUnitDataSourceNameProperty);
-    console.log('- spatialUnitDataSourceIdProperty:', this.spatialUnitDataSourceIdProperty);
-    console.log('- validityStartDate_perFeature:', this.validityStartDate_perFeature);
-    console.log('- validityEndDate_perFeature:', this.validityEndDate_perFeature);
-    console.log('- keepAttributes:', this.keepAttributes);
-    console.log('- keepMissingValues:', this.keepMissingValues);
-    console.log('- attributeMappings_adminView:', this.attributeMappings_adminView);
     
-    // arsion from is undefined currently
     const result = this.kommonitorImporterHelperService.buildPropertyMapping_spatialResource(
       this.spatialUnitDataSourceNameProperty, 
       this.spatialUnitDataSourceIdProperty, 
       this.validityStartDate_perFeature, 
       this.validityEndDate_perFeature, 
-      '', // empty string instead of undefined
+      '',
       this.keepAttributes, 
       this.keepMissingValues, 
       this.attributeMappings_adminView
     );
     
-    console.log('- buildPropertyMappingDefinition result:', result);
     return result;
   }
 
   buildPostBody_spatialUnits() {
-    console.log('=== BUILDING POST BODY FOR SPATIAL UNITS ===');
-    console.log('- metadata:', this.metadata);
-    console.log('- nextLowerHierarchySpatialUnit:', this.nextLowerHierarchySpatialUnit);
-    console.log('- nextUpperHierarchySpatialUnit:', this.nextUpperHierarchySpatialUnit);
-    console.log('- spatialUnitLevel:', this.spatialUnitLevel);
-    console.log('- periodOfValidity:', this.periodOfValidity);
-    console.log('- roleManagementTableOptions:', this.roleManagementTableOptions);
     
     const postBody: any = {
       "geoJsonString": "", // will be set by importer
@@ -571,7 +557,6 @@ export class SpatialUnitAddModalComponent implements OnInit {
 
     if (this.roleManagementTableOptions) {
       const roleIds = this.kommonitorDataGridHelperService.getSelectedRoleIds_roleManagementGrid(this.roleManagementTableOptions);
-      console.log('- roleIds from grid:', roleIds);
       if (roleIds && Array.isArray(roleIds)) {
         for (const roleId of roleIds) {
           postBody.permissions.push(roleId);
@@ -579,36 +564,18 @@ export class SpatialUnitAddModalComponent implements OnInit {
       }
     }
 
-    console.log('- buildPostBody_spatialUnits result:', postBody);
     return postBody;
   }
 
   async addSpatialUnit() {
-    console.log('=== SPATIAL UNIT ADD - START ===');
-    console.log('Current form state:');
-    console.log('- spatialUnitLevel:', this.spatialUnitLevel);
-    console.log('- metadata:', this.metadata);
-    console.log('- converter:', this.converter);
-    console.log('- datasourceType:', this.datasourceType);
-    console.log('- currentStep:', this.currentStep);
-    console.log('- totalSteps:', this.totalSteps);
     
     this.loadingData = true;
     this.importerErrors = [];
     this.successMessagePart = '';
     this.errorMessagePart = '';
 
-    console.log('=== BUILDING IMPORTER OBJECTS ===');
-    // now collect data and build request for importer
     const allDataSpecified = await this.buildImporterObjects();
 
-    console.log('=== IMPORTER OBJECTS RESULT ===');
-    console.log('- allDataSpecified:', allDataSpecified);
-    console.log('- converterDefinition:', this.converterDefinition);
-    console.log('- datasourceTypeDefinition:', this.datasourceTypeDefinition);
-    console.log('- propertyMappingDefinition:', this.propertyMappingDefinition);
-    console.log('- postBody_spatialUnits:', this.postBody_spatialUnits);
-
     if (!allDataSpecified) {
       console.error('=== VALIDATION FAILED ===');
       console.error('- Not all data was specified correctly');
@@ -621,14 +588,11 @@ export class SpatialUnitAddModalComponent implements OnInit {
       this.loadingData = false;
       return;
     } else {
-      console.log('=== VALIDATION PASSED - PROCEEDING WITH DRY RUN ===');
       // TODO verify input
       // TODO Create and perform POST Request with loading screen
 
       let newSpatialUnitResponse_dryRun: any = undefined;
       try {
-        console.log('=== STARTING DRY RUN ===');
-        console.log('Calling kommonitorImporterHelperService.registerNewSpatialUnit with dryRun=true');
         
         newSpatialUnitResponse_dryRun = await this.kommonitorImporterHelperService.registerNewSpatialUnit(
           this.converterDefinition,
@@ -638,12 +602,7 @@ export class SpatialUnitAddModalComponent implements OnInit {
           true // isDryRun
         );
 
-        console.log('=== DRY RUN RESPONSE ===');
-        console.log('- newSpatialUnitResponse_dryRun:', newSpatialUnitResponse_dryRun);
-        console.log('- Response contains errors:', this.kommonitorImporterHelperService.importerResponseContainsErrors(newSpatialUnitResponse_dryRun));
-
         if (!this.kommonitorImporterHelperService.importerResponseContainsErrors(newSpatialUnitResponse_dryRun)) {
-          console.log('=== DRY RUN SUCCESSFUL - PROCEEDING WITH ACTUAL IMPORT ===');
           // all good, really execute the request to import data against data management API
           const newSpatialUnitResponse = await this.kommonitorImporterHelperService.registerNewSpatialUnit(
             this.converterDefinition,
@@ -653,10 +612,6 @@ export class SpatialUnitAddModalComponent implements OnInit {
             false // isDryRun
           );
 
-          console.log('=== ACTUAL IMPORT RESPONSE ===');
-          console.log('- newSpatialUnitResponse:', newSpatialUnitResponse);
-          console.log('- Imported ID:', this.kommonitorImporterHelperService.getIdFromImporterResponse(newSpatialUnitResponse));
-
           this.broadcastService.broadcast("refreshSpatialUnitOverviewTable", ["add", this.kommonitorImporterHelperService.getIdFromImporterResponse(newSpatialUnitResponse)]);
 
           // refresh all admin dashboard diagrams due to modified metadata
@@ -668,22 +623,14 @@ export class SpatialUnitAddModalComponent implements OnInit {
           const importedFeatures = this.kommonitorImporterHelperService.getImportedFeaturesFromImporterResponse(newSpatialUnitResponse);
           this.importedFeatures = importedFeatures || [];
 
-          console.log('=== IMPORT SUCCESSFUL ===');
-          console.log('- successMessagePart:', this.successMessagePart);
-          console.log('- importedFeatures count:', this.importedFeatures.length);
-
           this.loadingData = false;
         } else {
-          console.error('=== DRY RUN FAILED WITH ERRORS ===');
           // errors occurred
           // show them 
           this.errorMessagePart = "Einige der zu importierenden Features des Datensatzes weisen kritische Fehler auf";
           const errors = this.kommonitorImporterHelperService.getErrorsFromImporterResponse(newSpatialUnitResponse_dryRun);
           this.importerErrors = errors || [];
 
-          console.error('- errorMessagePart:', this.errorMessagePart);
-          console.error('- importerErrors:', this.importerErrors);
-
           this.loadingData = false;
         }
       } catch (error: any) {
@@ -703,33 +650,20 @@ export class SpatialUnitAddModalComponent implements OnInit {
         if (newSpatialUnitResponse_dryRun) {
           const errors = this.kommonitorImporterHelperService.getErrorsFromImporterResponse(newSpatialUnitResponse_dryRun);
           this.importerErrors = errors || [];
-          console.error('- Errors from dry run:', this.importerErrors);
         }
 
         this.loadingData = false;
       }
     }
-    console.log('=== SPATIAL UNIT ADD - END ===');
   }
 
   onSubmit() {
-    console.log('=== ON SUBMIT - START ===');
-    console.log('Current form state:');
-    console.log('- spatialUnitLevel:', this.spatialUnitLevel);
-    console.log('- spatialUnitLevelInvalid:', this.spatialUnitLevelInvalid);
-    console.log('- hierarchyInvalid:', this.hierarchyInvalid);
-    console.log('- currentStep:', this.currentStep);
-    console.log('- totalSteps:', this.totalSteps);
-
+    
     if (!this.spatialUnitLevelInvalid && !this.hierarchyInvalid) {
       this.addSpatialUnit();
     } else {
-      console.log('=== ON SUBMIT - FAILED VALIDATION ===');
-      console.log('- spatialUnitLevelInvalid:', this.spatialUnitLevelInvalid);
-      console.log('- hierarchyInvalid:', this.hierarchyInvalid);
       this.loadingData = false;
     }
-    console.log('=== ON SUBMIT - END ===');
   }
 
   // Multi-step navigation
@@ -757,7 +691,6 @@ export class SpatialUnitAddModalComponent implements OnInit {
 
     // For now, allow navigation to any step for testing
     // TODO: Add validation back once basic navigation works
-    console.log(`Navigating to step: ${step}`);
     this.currentStep = step;
   }
 
@@ -1139,6 +1072,7 @@ export class SpatialUnitAddModalComponent implements OnInit {
     this.ownerOrgFilter = '';
     this.isPublic = false;
     this.resourcesCreatorRights = [];
+    this.showRoleForm = false;
     
     // Reset role management table
     if (this.kommonitorDataExchangeService.accessControl) {
@@ -1182,6 +1116,12 @@ export class SpatialUnitAddModalComponent implements OnInit {
   onChangeOwner(ownerOrganization: any) {
     // Handle owner organization change
     this.ownerOrganization = ownerOrganization;
+    
+    // Refresh roles for the selected organization
+    this.refreshRoles(ownerOrganization);
+    
+    // Show/hide the role form based on whether an organization is selected
+    this.showRoleForm = !!ownerOrganization;
   }
 
   onChangeIsPublic(isPublic: boolean) {
diff --git a/app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts b/app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts
index f3cc09186..f16c6b37a 100644
--- a/app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts
+++ b/app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts
@@ -406,12 +406,34 @@ export class KommonitorDataExchangeService implements OnDestroy {
    */
   get updateIntervalOptions(): any[] {
     return [
-      { value: 'daily', label: 'Täglich' },
-      { value: 'weekly', label: 'Wöchentlich' },
-      { value: 'monthly', label: 'Monatlich' },
-      { value: 'quarterly', label: 'Vierteljährlich' },
-      { value: 'yearly', label: 'Jährlich' },
-      { value: 'on-demand', label: 'Bei Bedarf' }
+      {
+        displayName: "jährlich",
+        apiName: "YEARLY"
+      },
+      {
+        displayName: "halbjährlich",
+        apiName: "HALF_YEARLY"
+      },
+      {
+        displayName: "vierteljährlich",
+        apiName: "QUARTERLY"
+      },
+      {
+        displayName: "monatlich",
+        apiName: "MONTHLY"
+      },
+      {
+        displayName: "wöchentlich",
+        apiName: "WEEKLY"
+      },
+      {
+        displayName: "täglich",
+        apiName: "DAILY"
+      },
+      {
+        displayName: "beliebig",
+        apiName: "ARBITRARY"
+      }
     ];
   }
 
@@ -483,6 +505,9 @@ export class KommonitorDataExchangeService implements OnDestroy {
         
         // Update KomMonitor roles after access control is loaded
         this.updateKomMonitorRoles();
+        
+        // Reset loading state after successful fetch
+        this.setLoading(false);
       }),
       catchError(error => {
         this.setError(this.handleHttpError(error));

From 9394fe4b591a94a0e4c83d03a9953b9984feb421 Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Thu, 24 Jul 2025 21:24:08 +0530
Subject: [PATCH 035/120] fix:: add spatial unit grid error

---
 .../spatial-unit-add-modal.component.html     |  22 ++-
 .../spatial-unit-add-modal.component.ts       | 144 ++++++++++++++++++
 .../kommonitor-data-grid-helper.service.ts    |   7 +
 3 files changed, 172 insertions(+), 1 deletion(-)

diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html
index d9ee2dfcf..06c93b8bf 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.html
@@ -355,7 +355,27 @@ 
Vergabe der Zugriffsrechte auf Datensatz-Metadaten und -
             

           

           

-            
  
+            
+            
           

           

             

diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
index 3a99349e7..56a9e80da 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitAddModal/spatial-unit-add-modal.component.ts
@@ -5,6 +5,8 @@ import { HttpClient } from '@angular/common/http';
 import { KommonitorImporterHelperService } from '../../../../../services/adminSpatialUnit/kommonitor-importer-helper.service';
 import { KommonitorDataGridHelperService } from '../../../../../services/adminSpatialUnit/kommonitor-data-grid-helper.service';
 import { KommonitorDataExchangeService } from '../../../../../services/adminSpatialUnit/kommonitor-data-exchange.service';
+import { AgGridAngular } from 'ag-grid-angular';
+import { ColDef, GridOptions, GridApi, ColumnApi } from 'ag-grid-community';
 
 @Component({
   selector: 'spatial-unit-add-modal-new',
@@ -15,6 +17,7 @@ export class SpatialUnitAddModalComponent implements OnInit {
   @ViewChild('metadataImportFile', { static: false }) metadataImportFile!: ElementRef;
   @ViewChild('mappingConfigImportFile', { static: false }) mappingConfigImportFile!: ElementRef;
   @ViewChild('spatialUnitDataSourceInput', { static: false }) spatialUnitDataSourceInput!: ElementRef;
+  @ViewChild('roleManagementGrid', { static: false }) roleManagementGrid!: AgGridAngular;
 
   // Multi-step form
   currentStep = 1;
@@ -93,6 +96,12 @@ export class SpatialUnitAddModalComponent implements OnInit {
 
   // Role management
   roleManagementTableOptions: any = null;
+  roleManagementColumnDefs: ColDef[] = [];
+  roleManagementRowData: any[] = [];
+  roleManagementDefaultColDef: ColDef = {};
+  roleManagementGridOptions: GridOptions = {};
+  roleManagementGridApi: GridApi | null = null;
+  roleManagementColumnApi: ColumnApi | null = null;
   ownerOrganization = '';
   ownerOrgFilter = '';
   isPublic = false;
@@ -130,6 +139,55 @@ export class SpatialUnitAddModalComponent implements OnInit {
   // Role form visibility
   showRoleForm = false;
 
+  // Grid ready event handler
+  onRoleManagementGridReady(params: any) {
+    this.roleManagementGridApi = params.api;
+    this.roleManagementColumnApi = params.columnApi;
+    
+    // Update the service with the grid API so it can be used for getSelectedRoleIds
+    this.kommonitorDataGridHelperService.setGridApi(params.api);
+  }
+
+  // Additional grid event handlers to match parent component
+  onRoleManagementFirstDataRendered(event: any): void {
+    this.roleManagementHeaderHeightSetter();
+  }
+
+  onRoleManagementColumnResized(event: any): void {
+    this.roleManagementHeaderHeightSetter();
+  }
+
+  onRoleManagementModelUpdated(): void {
+    // Grid model updated
+  }
+
+  onRoleManagementViewportChanged(): void {
+    // Viewport changed
+  }
+
+  private roleManagementHeaderHeightSetter(): void {
+    if (this.roleManagementGridApi) {
+      const headerHeight = this.roleManagementHeaderHeightGetter();
+      this.roleManagementGridApi.setHeaderHeight(headerHeight);
+    }
+  }
+
+  private roleManagementHeaderHeightGetter(): number {
+    const headerElement = document.querySelector('#roleManagementGrid .ag-header');
+    if (headerElement) {
+      const headerTextElements = headerElement.querySelectorAll('.ag-header-cell-text');
+      let maxHeight = 0;
+      headerTextElements.forEach(element => {
+        const height = element.scrollHeight;
+        if (height > maxHeight) {
+          maxHeight = height;
+        }
+      });
+      return Math.max(maxHeight + 20, 40); // Add padding and minimum height
+    }
+    return 40;
+  }
+
   // Filter organizations based on ownerOrgFilter
   get filteredAccessControl() {
     const accessControl = this.kommonitorDataExchangeService.accessControl || [];
@@ -240,6 +298,15 @@ export class SpatialUnitAddModalComponent implements OnInit {
         this.kommonitorDataExchangeService.accessControl, 
         []
       );
+
+      // Extract initial column definitions and row data and build grid config
+      if (this.roleManagementTableOptions) {
+        this.roleManagementColumnDefs = this.roleManagementTableOptions.columnDefs || [];
+        this.roleManagementRowData = this.roleManagementTableOptions.rowData || [];
+        
+        // Build grid configuration
+        this.buildRoleManagementGridConfig();
+      }
     }
   }
 
@@ -303,6 +370,7 @@ export class SpatialUnitAddModalComponent implements OnInit {
       item.datasetOwner = item.organizationalUnitId === orgUnitId;
     });
 
+    // Build the role management grid options
     this.roleManagementTableOptions = this.kommonitorDataGridHelperService.buildRoleManagementGrid(
       'spatialUnitAddRoleManagementTable',
       this.roleManagementTableOptions,
@@ -310,6 +378,30 @@ export class SpatialUnitAddModalComponent implements OnInit {
       permissionIds_ownerUnit,
       true
     );
+
+    // Extract column definitions and row data for ag-grid-angular and rebuild grid config
+    if (this.roleManagementTableOptions) {
+      this.roleManagementColumnDefs = this.roleManagementTableOptions.columnDefs || [];
+      this.roleManagementRowData = this.roleManagementTableOptions.rowData || [];
+      
+      // Build grid configuration (this will use the components from roleManagementTableOptions)
+      this.buildRoleManagementGridConfig();
+      
+      // If grid is already initialized, update the data and grid options
+      if (this.roleManagementGridApi) {
+        // Update data
+        this.roleManagementGridApi.setRowData(this.roleManagementRowData);
+        this.roleManagementGridApi.setColumnDefs(this.roleManagementColumnDefs);
+        
+        // Refresh the grid to ensure it updates
+        setTimeout(() => {
+          if (this.roleManagementGridApi) {
+            this.roleManagementGridApi.refreshCells();
+            this.roleManagementGridApi.redrawRows();
+          }
+        }, 100);
+      }
+    }
   }
 
   private setupEventListeners() {
@@ -1133,4 +1225,56 @@ export class SpatialUnitAddModalComponent implements OnInit {
     console.log('Modal cancelled');
     this.activeModal.dismiss('cancel');
   }
+
+  private buildRoleManagementGridConfig() {
+    this.roleManagementDefaultColDef = this.buildRoleManagementDefaultColDef();
+    this.roleManagementGridOptions = this.buildRoleManagementGridOptions();
+  }
+
+  private buildRoleManagementDefaultColDef(): ColDef {
+    return {
+      editable: false,
+      sortable: true,
+      flex: 1,
+      minWidth: 100,
+      filter: false,
+      resizable: true,
+      wrapText: true,
+      autoHeight: false,
+      cellStyle: { 
+        'font-size': '12px', 
+        'white-space': 'normal !important', 
+        'line-height': '20px !important', 
+        'word-break': 'break-word !important', 
+        'padding-top': '8px', 
+        'padding-bottom': '8px' 
+      }
+    };
+  }
+
+  private buildRoleManagementGridOptions(): GridOptions {
+    // Use components from the table options if available
+    const components = this.roleManagementTableOptions?.components || {};
+
+    return {
+      components: components,
+      suppressRowClickSelection: true,
+      rowSelection: 'multiple',
+      enableCellTextSelection: true,
+      ensureDomOrder: true,
+      pagination: false,
+      suppressColumnVirtualisation: true,
+      headerHeight: 40,
+      rowHeight: 35,
+      onGridReady: (params) => {
+        this.onRoleManagementGridReady(params);
+      },
+      onFirstDataRendered: (event) => {
+        this.onRoleManagementFirstDataRendered(event);
+      },
+      onColumnResized: (event) => {
+        this.onRoleManagementColumnResized(event);
+      }
+    };
+  }
 } 
\ No newline at end of file
diff --git a/app/services/adminSpatialUnit/kommonitor-data-grid-helper.service.ts b/app/services/adminSpatialUnit/kommonitor-data-grid-helper.service.ts
index 655f20e82..b23e5139b 100644
--- a/app/services/adminSpatialUnit/kommonitor-data-grid-helper.service.ts
+++ b/app/services/adminSpatialUnit/kommonitor-data-grid-helper.service.ts
@@ -1162,4 +1162,11 @@ export class KommonitorDataGridHelperService {
   getFeatureTableGridOptions(): GridOptions | null {
     return this.dataGridOptions_featureTable;
   }
+
+  /**
+   * Set the grid API for role management operations
+   */
+  setGridApi(gridApi: GridApi): void {
+    this.gridApi_spatialUnits = gridApi;
+  }
 } 
\ No newline at end of file

From f79681ed14c8490d37392809f56ff5553a3ffec3 Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Thu, 24 Jul 2025 21:59:47 +0530
Subject: [PATCH 036/120] fix: state change for edit spatial unit modal

---
 ...dmin-spatial-units-management.component.ts |  75 ++++++++++-
 ...al-unit-edit-metadata-modal.component.html |  13 +-
 ...tial-unit-edit-metadata-modal.component.ts | 118 +++++++++++++-----
 .../kommonitor-data-exchange.service.ts       |  52 +++++++-
 4 files changed, 217 insertions(+), 41 deletions(-)

diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
index ee7dbbf8c..0f7d9eb73 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/admin-spatial-units-management.component.ts
@@ -119,6 +119,15 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
           this.fetchSpatialUnitsData();
         });
       }
+      else if (data.msg === 'refreshSpatialUnitOverviewTable') {
+        this.zone.run(() => {
+          this.loadingData = true;
+          // Extract crudType and targetSpatialUnitId from the broadcast data values
+          const crudType = (data.values as any)?.crudType;
+          const targetSpatialUnitId = (data.values as any)?.targetSpatialUnitId;
+          this.refreshSpatialUnitOverviewTable(crudType, targetSpatialUnitId);
+        });
+      }
       // Handle grid button click events
       else if (data.msg === 'onEditSpatialUnitMetadata') {
         this.zone.run(() => {
@@ -296,8 +305,70 @@ export class AdminSpatialUnitsManagementComponent implements OnInit, OnDestroy {
     return this.kommonitorDataExchangeService.checkCreatePermission();
   }
 
-  refreshSpatialUnitOverviewTable(): void {
-    this.initializeOrRefreshOverviewTable();
+  refreshSpatialUnitOverviewTable(crudType?: string, targetSpatialUnitId?: string | string[]): void {
+    if (!crudType || !targetSpatialUnitId) {
+      // Refetch all metadata from spatial units to update table
+      this.kommonitorDataExchangeService.fetchSpatialUnitsMetadata(
+        this.kommonitorDataExchangeService.currentKeycloakLoginRoles
+      ).subscribe({
+        next: (response) => {
+          this.initializeOrRefreshOverviewTable();
+          this.loadingData = false;
+        },
+        error: (response) => {
+          console.error('Error fetching spatial units metadata:', response);
+          this.loadingData = false;
+        }
+      });
+    }
+    else if (crudType && targetSpatialUnitId) {
+      if (crudType === 'edit') {
+        // Fetch single spatial unit metadata and update the table
+        this.kommonitorCacheHelperService.fetchSingleSpatialUnitMetadata(
+          targetSpatialUnitId as string, 
+          this.kommonitorDataExchangeService.currentKeycloakLoginRoles
+        ).subscribe({
+          next: (data) => {
+            this.kommonitorDataExchangeService.replaceSingleSpatialUnitMetadata(data);
+            this.initializeOrRefreshOverviewTable();
+            this.loadingData = false;
+          },
+          error: (response) => {
+            console.error('Error fetching single spatial unit metadata:', response);
+            this.loadingData = false;
+          }
+        });
+      }
+      else if (crudType === 'add') {
+        // Fetch single spatial unit metadata and add to table
+        this.kommonitorCacheHelperService.fetchSingleSpatialUnitMetadata(
+          targetSpatialUnitId as string, 
+          this.kommonitorDataExchangeService.currentKeycloakLoginRoles
+        ).subscribe({
+          next: (data) => {
+            this.kommonitorDataExchangeService.addSingleSpatialUnitMetadata(data);
+            this.initializeOrRefreshOverviewTable();
+            this.loadingData = false;
+          },
+          error: (response) => {
+            console.error('Error fetching single spatial unit metadata:', response);
+            this.loadingData = false;
+          }
+        });
+      }
+      else if (crudType === 'delete') {
+        // Handle delete operation
+        if (typeof targetSpatialUnitId === 'string') {
+          this.kommonitorDataExchangeService.deleteSingleSpatialUnitMetadata(targetSpatialUnitId);
+        } else if (Array.isArray(targetSpatialUnitId)) {
+          for (const id of targetSpatialUnitId) {
+            this.kommonitorDataExchangeService.deleteSingleSpatialUnitMetadata(id);
+          }
+        }
+        this.initializeOrRefreshOverviewTable();
+        this.loadingData = false;
+      }
+    }
   }
 
   // AG Grid methods
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.html
index 28e9e5b8f..317be06f6 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.html
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.html
@@ -15,7 +15,7 @@ 
Metadaten der Raumebene {{currentSpatialUnitDatase
   
   

     

-      

+      
         
         
         

@@ -354,10 +354,11 @@ 
Angaben über allgemeine Metadaten in KomMonitor

   
   
   
@@ -373,6 +374,10 @@ 
Angaben über allgemeine Metadaten in KomMonitor

   
   
Raumebene aktualisiert

   Die Metadaten der Raumebene mit Namen {{successMessagePart}} wurden in KomMonitor aktualisiert und in die Übersichtstabelle eingetragen.
+  

+  
 

 
 
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.ts b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.ts
index 986f5bdfb..8361d1b74 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.ts
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditMetadataModal/spatial-unit-edit-metadata-modal.component.ts
@@ -173,6 +173,11 @@ export class SpatialUnitEditMetadataModalComponent implements OnInit, OnDestroy
           this.metadata.updateInterval = option;
         }
       });
+    } else {
+      // If no update interval is set, try to find a default one
+      if (this.updateIntervalOptions && this.updateIntervalOptions.length > 0) {
+        this.metadata.updateInterval = this.updateIntervalOptions[0];
+      }
     }
 
     // Set hierarchy
@@ -290,37 +295,56 @@ export class SpatialUnitEditMetadataModalComponent implements OnInit, OnDestroy
 
   async editSpatialUnitMetadata() {
     if (!this.currentSpatialUnitDataset) return;
+    
+    // Prevent multiple submissions
+    if (this.loadingData) return;
 
     const spatialUnitName_old = this.currentSpatialUnitDataset.spatialUnitLevel;
     const spatialUnitName_new = this.spatialUnitLevel;
 
+    // Helper function to convert empty strings to null
+    const convertEmptyToNull = (value: any) => {
+      return value === '' || value === undefined || value === null ? null : value;
+    };
+
+    // Validate required fields
+    if (!this.spatialUnitLevel || this.spatialUnitLevel.trim() === '') {
+      this.errorMessage = 'Raumebene Name ist erforderlich.';
+      this.loadingData = false;
+      return;
+    }
+
     const patchBody = {
-      datasetName: this.spatialUnitLevel,
+      datasetName: this.spatialUnitLevel.trim(),
       metadata: {
-        note: this.metadata.note,
-        literature: this.metadata.literature,
-        updateInterval: this.metadata.updateInterval.apiName,
-        sridEPSG: this.metadata.sridEPSG,
-        datasource: this.metadata.datasource,
-        contact: this.metadata.contact,
-        lastUpdate: this.metadata.lastUpdate,
-        description: this.metadata.description,
-        databasis: this.metadata.databasis
+        note: convertEmptyToNull(this.metadata.note),
+        literature: convertEmptyToNull(this.metadata.literature),
+        updateInterval: this.metadata.updateInterval && this.metadata.updateInterval.apiName ? this.metadata.updateInterval.apiName : null,
+        sridEPSG: this.metadata.sridEPSG || 4326,
+        datasource: convertEmptyToNull(this.metadata.datasource),
+        contact: convertEmptyToNull(this.metadata.contact),
+        lastUpdate: convertEmptyToNull(this.metadata.lastUpdate),
+        description: convertEmptyToNull(this.metadata.description),
+        databasis: convertEmptyToNull(this.metadata.databasis)
       },
-      allowedRoles: [],
       nextLowerHierarchyLevel: this.nextLowerHierarchySpatialUnit ? this.nextLowerHierarchySpatialUnit.spatialUnitLevel : null,
       nextUpperHierarchyLevel: this.nextUpperHierarchySpatialUnit ? this.nextUpperHierarchySpatialUnit.spatialUnitLevel : null,
       isOutlineLayer: this.isOutlineLayer,
-      outlineColor: this.outlineColor,
-      outlineWidth: this.outlineWidth,
-      outlineDashArrayString: this.selectedOutlineDashArrayObject ? this.selectedOutlineDashArrayObject.dashArrayValue : ''
+      outlineColor: this.outlineColor || '#bf3d2c',
+      outlineWidth: this.outlineWidth || 2,
+      outlineDashArrayString: this.selectedOutlineDashArrayObject ? this.selectedOutlineDashArrayObject.dashArrayValue : null
     };
 
     // No role management in this version to match AngularJS
 
+    // Debug: Log the payload being sent
+    console.log('Sending patch body:', JSON.stringify(patchBody, null, 2));
+
     this.loadingData = true;
     this.errorMessage = '';
     this.successMessage = '';
+    this.errorMessagePart = '';
+    this.successMessagePart = '';
 
     try {
       const response = await this.http.patch(
@@ -331,17 +355,27 @@ export class SpatialUnitEditMetadataModalComponent implements OnInit, OnDestroy
       this.successMessagePart = this.currentSpatialUnitDataset.spatialUnitLevel;
       this.successMessage = `Metadaten für Raumebene "${this.successMessagePart}" erfolgreich aktualisiert.`;
 
-      // Broadcast refresh events
-      this.broadcastService.broadcast('refreshSpatialUnitOverviewTable');
+      // Broadcast refresh events with proper parameters
+      this.broadcastService.broadcast('refreshSpatialUnitOverviewTable', { 
+        crudType: 'edit', 
+        targetSpatialUnitId: this.currentSpatialUnitDataset.spatialUnitId 
+      });
       if (spatialUnitName_old !== spatialUnitName_new) {
         this.broadcastService.broadcast('refreshIndicatorOverviewTable');
       }
 
       this.loadingData = false;
       
-      // Close modal with success result
-      this.activeModal.close({ action: 'updated', spatialUnitId: this.currentSpatialUnitDataset.spatialUnitId });
+      // Don't close modal immediately - let user see success message
+      // User can close manually or we can auto-close after a delay
+      setTimeout(() => {
+        this.activeModal.close({ action: 'updated', spatialUnitId: this.currentSpatialUnitDataset.spatialUnitId });
+      }, 2000); // Close after 2 seconds
     } catch (error: any) {
+      console.error('Error updating spatial unit metadata:', error);
+      console.error('Error response:', error.error);
+      console.error('Error status:', error.status);
+      
       this.errorMessagePart = error.error ? 
         this.kommonitorDataExchangeService.syntaxHighlightJSON(error.error) : 
         this.kommonitorDataExchangeService.syntaxHighlightJSON(error);
@@ -458,27 +492,31 @@ export class SpatialUnitEditMetadataModalComponent implements OnInit, OnDestroy
   }
 
   onExportSpatialUnitEditMetadata() {
+    // Helper function to convert empty strings to null for export
+    const convertEmptyToNull = (value: any) => {
+      return value === '' || value === undefined ? null : value;
+    };
+
     const metadataExport = {
       ...this.spatialUnitMetadataStructure,
       metadata: {
-        note: this.metadata.note || "",
-        literature: this.metadata.literature || "",
-        sridEPSG: this.metadata.sridEPSG || "",
-        datasource: this.metadata.datasource || "",
-        contact: this.metadata.contact || "",
-        lastUpdate: this.metadata.lastUpdate || "",
-        description: this.metadata.description || "",
-        databasis: this.metadata.databasis || "",
-        updateInterval: this.metadata.updateInterval ? this.metadata.updateInterval.apiName : ""
+        note: convertEmptyToNull(this.metadata.note),
+        literature: convertEmptyToNull(this.metadata.literature),
+        sridEPSG: this.metadata.sridEPSG || null,
+        datasource: convertEmptyToNull(this.metadata.datasource),
+        contact: convertEmptyToNull(this.metadata.contact),
+        lastUpdate: convertEmptyToNull(this.metadata.lastUpdate),
+        description: convertEmptyToNull(this.metadata.description),
+        databasis: convertEmptyToNull(this.metadata.databasis),
+        updateInterval: this.metadata.updateInterval ? this.metadata.updateInterval.apiName : null
       },
-      spatialUnitLevel: this.spatialUnitLevel || "",
-      nextLowerHierarchyLevel: this.nextLowerHierarchySpatialUnit ? this.nextLowerHierarchySpatialUnit.spatialUnitLevel : "",
-      nextUpperHierarchyLevel: this.nextUpperHierarchySpatialUnit ? this.nextUpperHierarchySpatialUnit.spatialUnitLevel : "",
-      allowedRoles: [],
+      spatialUnitLevel: this.spatialUnitLevel || null,
+      nextLowerHierarchyLevel: this.nextLowerHierarchySpatialUnit ? this.nextLowerHierarchySpatialUnit.spatialUnitLevel : null,
+      nextUpperHierarchyLevel: this.nextUpperHierarchySpatialUnit ? this.nextUpperHierarchySpatialUnit.spatialUnitLevel : null,
       isOutlineLayer: this.isOutlineLayer,
       outlineColor: this.outlineColor,
       outlineWidth: this.outlineWidth,
-      outlineDashArrayString: this.selectedOutlineDashArrayObject ? this.selectedOutlineDashArrayObject.dashArrayValue : ""
+      outlineDashArrayString: this.selectedOutlineDashArrayObject ? this.selectedOutlineDashArrayObject.dashArrayValue : null
     };
 
     // No role management in this version to match AngularJS
@@ -534,12 +572,24 @@ export class SpatialUnitEditMetadataModalComponent implements OnInit, OnDestroy
     this.spatialUnitMetadataImportError = '';
   }
 
+  closeOnSuccess() {
+    this.activeModal.close({ action: 'updated', spatialUnitId: this.currentSpatialUnitDataset?.spatialUnitId });
+  }
+
   cancel() {
     this.activeModal.dismiss();
   }
 
-  onSubmit() {
-    this.editSpatialUnitMetadata();
+  onSubmit(event?: Event) {
+    // Prevent default form submission behavior
+    if (event) {
+      event.preventDefault();
+    }
+    
+    // Only proceed if not already loading
+    if (!this.loadingData) {
+      this.editSpatialUnitMetadata();
+    }
   }
 
   // Missing function for metadata export template
diff --git a/app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts b/app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts
index f16c6b37a..69ddc0a5a 100644
--- a/app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts
+++ b/app/services/adminSpatialUnit/kommonitor-data-exchange.service.ts
@@ -43,7 +43,7 @@ export interface SpatialUnitMetadata {
   permissions: any[];
   isPublic: boolean;
   ownerId: string;
-  userPermissions: string[];
+  userPermissions?: string[];
   isOutlineLayer?: boolean;
   outlineColor?: string;
   outlineWidth?: number;
@@ -551,6 +551,56 @@ export class KommonitorDataExchangeService implements OnDestroy {
     return spatialUnits.find(unit => unit.spatialUnitId === spatialUnitId) || null;
   }
 
+  /**
+   * Add single spatial unit metadata to the list
+   */
+  addSingleSpatialUnitMetadata(spatialUnitMetadata: SpatialUnitMetadata): void {
+    // Ensure userPermissions is always an array
+    const metadataWithDefaults = {
+      ...spatialUnitMetadata,
+      userPermissions: spatialUnitMetadata.userPermissions || []
+    };
+    
+    const currentSpatialUnits = [...this.availableSpatialUnits];
+    currentSpatialUnits.unshift(metadataWithDefaults);
+    this.spatialUnitsSubject.next(currentSpatialUnits);
+    this.updateSpatialUnitsCache(currentSpatialUnits);
+  }
+
+  /**
+   * Replace single spatial unit metadata in the list
+   */
+  replaceSingleSpatialUnitMetadata(spatialUnitMetadata: SpatialUnitMetadata): void {
+    // Ensure userPermissions is always an array
+    const metadataWithDefaults = {
+      ...spatialUnitMetadata,
+      userPermissions: spatialUnitMetadata.userPermissions || []
+    };
+    
+    const currentSpatialUnits = [...this.availableSpatialUnits];
+    const index = currentSpatialUnits.findIndex(unit => unit.spatialUnitId === spatialUnitMetadata.spatialUnitId);
+    
+    if (index !== -1) {
+      currentSpatialUnits[index] = metadataWithDefaults;
+      this.spatialUnitsSubject.next(currentSpatialUnits);
+      this.updateSpatialUnitsCache(currentSpatialUnits);
+    }
+  }
+
+  /**
+   * Delete single spatial unit metadata from the list
+   */
+  deleteSingleSpatialUnitMetadata(spatialUnitId: string): void {
+    const currentSpatialUnits = [...this.availableSpatialUnits];
+    const index = currentSpatialUnits.findIndex(unit => unit.spatialUnitId === spatialUnitId);
+    
+    if (index !== -1) {
+      currentSpatialUnits.splice(index, 1);
+      this.spatialUnitsSubject.next(currentSpatialUnits);
+      this.updateSpatialUnitsCache(currentSpatialUnits);
+    }
+  }
+
   /**
    * Sets the current Keycloak login roles
    */

From b7cf925c3c75fe9ea27366bc26251a6b55708bbe Mon Sep 17 00:00:00 2001
From: Pranjal Goyal 
Date: Fri, 25 Jul 2025 10:35:52 +0530
Subject: [PATCH 037/120] fix bugs for spatial edit feature modal

---
 ...ial-unit-edit-features-modal.component.css |  42 +++
 ...al-unit-edit-features-modal.component.html |  61 +--
 ...tial-unit-edit-features-modal.component.ts | 137 +++++--
 .../kommonitor-data-grid-helper.service.ts    | 352 +++++++++++-------
 4 files changed, 403 insertions(+), 189 deletions(-)

diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.css b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.css
index 2581d63ac..56b7a7c0a 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.css
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.css
@@ -673,4 +673,46 @@ fieldset {
 
 .modal-body::-webkit-scrollbar-thumb:hover {
   background: #a8a8a8;
+} 
+
+/* AG Grid cell editing visual feedback */
+.ag-theme-alpine .ag-cell[style*="background-color: #9DC89F"] {
+  background-color: #9DC89F !important;
+  transition: background-color 0.3s ease;
+}
+
+.ag-theme-alpine .ag-cell[style*="background-color: #E79595"] {
+  background-color: #E79595 !important;
+  transition: background-color 0.3s ease;
+}
+
+/* Cell editing success state */
+.cell-edit-success {
+  background-color: #9DC89F !important;
+  transition: background-color 0.3s ease;
+}
+
+/* Cell editing error state */
+.cell-edit-error {
+  background-color: #E79595 !important;
+  transition: background-color 0.3s ease;
+}
+
+/* Timestamp display styles */
+.timestamp-success {
+  background-color: #9DC89F;
+  color: #155724;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.timestamp-error {
+  background-color: #E79595;
+  color: #721c24;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
 } 
\ No newline at end of file
diff --git a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.html b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.html
index 64c0085fa..73bb5e51c 100644
--- a/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.html
+++ b/app/components/ngComponents/admin/adminSpatialUnitsManagement/spatialUnitEditFeaturesModal/spatial-unit-edit-features-modal.component.html
@@ -75,6 +75,7 @@ 
Optionale Anzeige der Raumeinheits-Details

                 
                 
@@ -90,13 +91,13 @@ 
Optionale Anzeige der Raumeinheits-Details

           

 
           

-            

+            

               Letztes erfolgreiches Update eines Einzeleintrags
-              {{ kommonitorDataGridHelperService.featureTable_spatialUnit_lastUpdate_timestamp_success }}
+              {{ kommonitorDataGridHelperService.featureTable_spatialUnit_lastUpdate_timestamp_success | date:'medium' }}
             

-            

+            

               Letztes gescheitertes Update eines Einzeleintrags
-              {{ kommonitorDataGridHelperService.featureTable_spatialUnit_lastUpdate_timestamp_failure }}
+              {{ kommonitorDataGridHelperService.featureTable_spatialUnit_lastUpdate_timestamp_failure | date:'medium' }}
             

           

 
@@ -110,7 +111,8 @@ 
Optionale Anzeige der Raumeinheits-Details

               [gridOptions]="featureTableGridOptions"
               (gridReady)="onGridReady($event)"
               (firstDataRendered)="onFirstDataRendered($event)"
-              (columnResized)="onColumnResized($event)">
+              (columnResized)="onColumnResized($event)"
+              (cellValueChanged)="onCellValueChanged($event)">
             
           

 
@@ -142,7 +144,7 @@ 
Angaben über den räumlichen Datensatz, aus dem die Rau
             

               

                 
-