fix create layer

Author: ryanslatten

web-app/admin/src/app/admin/admin-layers/admin-layers.module.ts

@@ -11,15 +11,13 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { CoreModule } from '../../core/core.module';
 import { LayerDashboardComponent } from './dashboard/layer-dashboard.component';
-import { LayerDeleteDialogComponent } from './dashboard/layer-delete-dialog/layer-delete-dialog.component';
 import { CreateLayerDialogComponent } from './create-layer/create-layer.component';
 import { LayersService } from './layers.service';
 import { AdminBreadcrumbModule } from '../admin-breadcrumb/admin-breadcrumb.module';
 
 @NgModule({
     declarations: [
         LayerDashboardComponent,
-        LayerDeleteDialogComponent,
         CreateLayerDialogComponent
     ],
     imports: [

web-app/admin/src/app/admin/admin-layers/create-layer/create-layer.component.html

@@ -14,12 +14,18 @@ <h2 class="dialog-title">Create a New Layer</h2>
                 <label class="field-label">Layer Name</label>
                 <input type="text" class="form-input" formControlName="name" placeholder="Enter layer name" />
                 <div class="field-error">
-                    <span class="error-text" [class.visible]="
-              layerForm.get('name').invalid &&
+                    <span class="error-text visible" *ngIf="
+              layerForm.get('name').hasError('required') &&
               (layerForm.get('name').touched || layerForm.get('name').dirty)
             ">
                         Name is required
                     </span>
+                    <span class="error-text visible" *ngIf="
+              layerForm.get('name').hasError('duplicateName') &&
+              (layerForm.get('name').touched || layerForm.get('name').dirty)
+            ">
+                        A layer with this name already exists
+                    </span>
                 </div>
             </div>
 

web-app/admin/src/app/admin/admin-layers/create-layer/create-layer.component.ts

@@ -1,7 +1,9 @@
 import { Component, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators, AbstractControl, ValidationErrors, AsyncValidatorFn } from '@angular/forms';
 import { LayersService, Layer } from '../layers.service';
+import { Observable, of } from 'rxjs';
+import { map, catchError, debounceTime, first } from 'rxjs/operators';
 
 /**
  * Dialog component for creating new layers.
@@ -25,16 +27,42 @@ export class CreateLayerDialogComponent {
         private layersService: LayersService
     ) {
         this.layerForm = this.fb.group({
-            name: [data.layer?.name ?? '', [Validators.required]],
+            name: [
+                data.layer?.name ?? '',
+                [Validators.required],
+                [this.duplicateLayerNameValidator()]
+            ],
             type: [data.layer?.type ?? '', [Validators.required]],
             description: [data.layer?.description ?? ''],
-            // Imagery fields
             url: [''],
             format: ['XYZ'],
             base: [false]
         });
     }
 
+    /**
+     * Async validator to check if a layer name already exists
+     */
+    private duplicateLayerNameValidator(): AsyncValidatorFn {
+        return (control: AbstractControl): Observable<ValidationErrors | null> => {
+            if (!control.value) {
+                return of(null);
+            }
+
+            return this.layersService.getLayers().pipe(
+                debounceTime(300),
+                map(layers => {
+                    const nameExists = layers.some(
+                        layer => layer.name?.toLowerCase() === control.value.toLowerCase()
+                    );
+                    return nameExists ? { duplicateName: true } : null;
+                }),
+                catchError(() => of(null)),
+                first()
+            );
+        };
+    }
+
     /**
      * Handles layer type change to add/remove validators and reset fields
      */
@@ -82,27 +110,38 @@ export class CreateLayerDialogComponent {
             return;
         }
 
-        // Validate GeoPackage file
         if (this.layerForm.get('type')?.value === 'GeoPackage' && !this.geopackageFile) {
             this.errorMessage = 'Please select a GeoPackage file.';
             return;
         }
 
         this.errorMessage = '';
         const formValue = this.layerForm.value;
-        const layerData: any = {
-            name: formValue.name,
-            type: formValue.type,
-            description: formValue.description
-        };
 
-        // Add type-specific fields
-        if (formValue.type === 'Imagery') {
-            layerData.url = formValue.url;
-            layerData.format = formValue.format;
-            layerData.base = formValue.base;
-        } else if (formValue.type === 'GeoPackage' && this.geopackageFile) {
-            layerData.geopackage = this.geopackageFile;
+        let layerData: any;
+
+        if (formValue.type === 'GeoPackage' && this.geopackageFile) {
+            const formData = new FormData();
+            formData.append('name', formValue.name);
+            formData.append('type', formValue.type);
+            if (formValue.description) {
+                formData.append('description', formValue.description);
+            }
+            formData.append('geopackage', this.geopackageFile);
+            layerData = formData;
+        } else {
+            // Use regular JSON for other layer types
+            layerData = {
+                name: formValue.name,
+                type: formValue.type,
+                description: formValue.description
+            };
+
+            if (formValue.type === 'Imagery') {
+                layerData.url = formValue.url;
+                layerData.format = formValue.format;
+                layerData.base = formValue.base;
+            }
         }
 
         this.layersService.createLayer(layerData).subscribe({

web-app/admin/src/app/admin/admin-layers/dashboard/layer-dashboard.component.spec.ts

@@ -316,30 +316,6 @@ describe('LayerDashboardComponent', () => {
     });
   });
 
-  describe('navigation', () => {
-    beforeEach(() => {
-      fixture.detectChanges();
-    });
-
-    it('should navigate to layer detail', () => {
-      const layer = mockLayers[0];
-      component.gotoLayer(layer);
-
-      expect(mockStateService.go).toHaveBeenCalledWith('admin.layer', { layerId: 1 });
-    });
-
-    it('should navigate to edit layer', () => {
-      const event = new Event('click');
-      spyOn(event, 'stopPropagation');
-      const layer = mockLayers[0];
-
-      component.editLayer(event, layer);
-
-      expect(event.stopPropagation).toHaveBeenCalled();
-      expect(mockStateService.go).toHaveBeenCalledWith('admin.layerEdit', { layerId: 1 });
-    });
-  });
-
   describe('layer creation', () => {
     beforeEach(() => {
       fixture.detectChanges();
@@ -384,59 +360,12 @@ describe('LayerDashboardComponent', () => {
     });
   });
 
-  describe('layer deletion', () => {
-    beforeEach(() => {
-      fixture.detectChanges();
-    });
-
-    it('should open delete confirmation dialog', () => {
-      const event = new Event('click');
-      spyOn(event, 'stopPropagation');
-      const mockDialogRef = {
-        afterClosed: () => of(null)
-      };
-      mockDialog.open.and.returnValue(mockDialogRef as any);
-
-      component.deleteLayer(event, mockLayers[0]);
-
-      expect(event.stopPropagation).toHaveBeenCalled();
-      expect(mockDialog.open).toHaveBeenCalled();
-    });
-
-    it('should remove layer from list after deletion', () => {
-      const event = new Event('click');
-      const layerToDelete = mockLayers[0];
-      const mockDialogRef = {
-        afterClosed: () => of(layerToDelete)
-      };
-      mockDialog.open.and.returnValue(mockDialogRef as any);
-
-      component.deleteLayer(event, layerToDelete);
-
-      expect(component.layers.length).toBe(2);
-      expect(component.layers.find(l => l.id === 1)).toBeUndefined();
-    });
-
-    it('should not remove layer if deletion is cancelled', () => {
-      const event = new Event('click');
-      const mockDialogRef = {
-        afterClosed: () => of(null)
-      };
-      mockDialog.open.and.returnValue(mockDialogRef as any);
-
-      component.deleteLayer(event, mockLayers[0]);
-
-      expect(component.layers.length).toBe(3);
-    });
-  });
-
   describe('responsive layout', () => {
     beforeEach(() => {
       fixture.detectChanges();
     });
 
     it('should update layout values on window resize', () => {
-      // Mock window.innerWidth
       Object.defineProperty(window, 'innerWidth', {
         writable: true,
         configurable: true,

web-app/admin/src/app/admin/admin-layers/dashboard/layer-dashboard.component.ts

@@ -5,7 +5,6 @@ import { StateService } from '@uirouter/angular';
 import { UserService } from 'admin/src/app/upgrade/ajs-upgraded-providers';
 import { LayersService, Layer } from '../layers.service';
 import { AdminBreadcrumb } from '../../admin-breadcrumb/admin-breadcrumb.model';
-import { LayerDeleteDialogComponent } from './layer-delete-dialog/layer-delete-dialog.component';
 import { CreateLayerDialogComponent } from '../create-layer/create-layer.component';
 import _ from 'underscore';
 
@@ -77,13 +76,11 @@ export class LayerDashboardComponent implements OnInit {
     const term = this.layerSearch.trim().toLowerCase();
 
     this.filteredLayers = this.layers.filter(layer => {
-      // Apply search filter
       const matchesSearch = !term ||
         layer.name?.toLowerCase().includes(term) ||
         layer.description?.toLowerCase().includes(term) ||
         layer.url?.toLowerCase().includes(term);
 
-      // Apply type filter
       const matchesType = this.filterByType(layer);
 
       return matchesSearch && matchesType;
@@ -182,29 +179,6 @@ export class LayerDashboardComponent implements OnInit {
     this.stateService.go('admin.layer', { layerId: layer.id });
   }
 
-  /** Navigate to edit layer */
-  editLayer(event: Event, layer: Layer): void {
-    event.stopPropagation();
-    this.stateService.go('admin.layerEdit', { layerId: layer.id });
-  }
-
-  /** Open delete confirmation dialog */
-  deleteLayer(event: Event, layer: Layer): void {
-    event.stopPropagation();
-
-    const dialogRef = this.modal.open(LayerDeleteDialogComponent, {
-      width: '500px',
-      data: { layer }
-    });
-
-    dialogRef.afterClosed().subscribe((deletedLayer) => {
-      if (deletedLayer) {
-        this.layers = _.without(this.layers, deletedLayer);
-        this.applyFilters();
-      }
-    });
-  }
-
   /** Update layout-related values on resize */
   @HostListener('window:resize')
   onResize(): void {

web-app/admin/src/app/admin/admin-layers/dashboard/layer-delete-dialog/layer-delete-dialog.component.html

@@ -61,7 +61,7 @@ export class LayersService {
         return this.http.put<Layer>(`/api/layers/${id}`, layer);
     }
 
-    createLayer(layer: Partial<Layer>): Observable<Layer> {
+    createLayer(layer: Partial<Layer> | FormData): Observable<Layer> {
         return this.http.post<Layer>('/api/layers', layer);
     }