Arc admin attribute form updates

plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.scss

@@ -9,7 +9,7 @@
 
 section {
   >* {
-    margin-inline-start: 1em;
+    margin-inline-start: 0;
   }
 
   header {
@@ -50,20 +50,6 @@ section {
   }
 }
 
-.attributes-table {
-  tr {
-    th {
-      font-weight: normal;
-    }
-
-    td {
-      padding-left: 20px;
-      opacity: 0.5;
-      font-size: 0.9em;
-    }
-  }
-}
-
 .fieldOverrides {
   margin-top: 20px;
 }
@@ -193,3 +179,17 @@ section {
   line-height: inherit;
   width: inherit;
 }
+
+mat-form-field {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+mat-card {
+  margin-bottom: 8px;  
+}
+
+.hint {
+  font-size: 75%;
+  padding: 0 1em;
+}

plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.ts

@@ -4,6 +4,7 @@ import { AttributeConfig, AttributeConcatenationConfig, AttributeDefaultConfig,
 import { ArcGISPluginConfig, defaultArcGISPluginConfig } from '../ArcGISPluginConfig'
 import { ArcService, Form, MageEvent } from '../arc.service'
 import { Subject } from 'rxjs';
+import { FormGroup, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'arc-admin',
@@ -52,31 +53,76 @@ export class ArcAdminComponent implements OnInit {
   @ViewChild('editAttributeConfigDialog', { static: true })
   private editAttributeConfigTemplate: TemplateRef<unknown>
 
-  constructor(private arcService: ArcService, private dialog: MatDialog) {
+  attributesForm: FormGroup;
+
+  constructor(private arcService: ArcService, private dialog: MatDialog, private fb: FormBuilder) {
     this.config = defaultArcGISPluginConfig;
     this.editConfig = defaultArcGISPluginConfig;
     this.editFieldMappings = false;
-    arcService.fetchArcConfig().subscribe(x => {
-      this.config = x;
-      if (!this.config.baseUrl) {
-        this.config.baseUrl = window.location.origin
-      }
-      arcService.fetchPopulatedEvents().subscribe(x => this.handleEventResults(x));
-    })
   }
 
   configChanged(config: ArcGISPluginConfig) {
     this.config = config;
     this.configChangedNotifier.next();
   }
 
+  //map attribute form to fields 
   ngOnInit(): void {
-  }
+    this.attributesForm = this.fb.group({
+      observationIdField: [this.editConfig.observationIdField],
+      idSeparator: [this.editConfig.idSeparator],
+      eventIdField: [this.editConfig.eventIdField],
+      lastEditedDateField: [this.editConfig.lastEditedDateField],
+      eventNameField: [this.editConfig.eventNameField],
+      userIdField: [this.editConfig.userIdField],
+      usernameField: [this.editConfig.usernameField],
+      userDisplayNameField: [this.editConfig.userDisplayNameField],
+      deviceIdField: [this.editConfig.deviceIdField],
+      createdAtField: [this.editConfig.createdAtField],
+      lastModifiedField: [this.editConfig.lastModifiedField],
+      geometryType: [this.editConfig.geometryType]
+    });
+  }
+
+  //save attributes form
+  onSubmit(): void {
+    if (this.attributesForm.valid) {
+      const formValue = this.attributesForm.value;
+
+      this.editConfig = {
+        ...this.editConfig,
+        observationIdField: formValue.observationIdField,
+        idSeparator: formValue.idSeparator,
+        eventIdField: formValue.eventIdField,
+        lastEditedDateField: formValue.lastEditedDateField,
+        eventNameField: formValue.eventNameField,
+        userIdField: formValue.userIdField,
+        usernameField: formValue.usernameField,
+        userDisplayNameField: formValue.userDisplayNameField,
+        deviceIdField: formValue.deviceIdField,
+        createdAtField: formValue.createdAtField,
+        lastModifiedField: formValue.lastModifiedField,
+        geometryType: formValue.geometryType
+      };
+
+      console.log('Form Submitted:', this.editConfig);
+
+      this.editConfig = this.copyConfig();
+      }
+    }
+
+  //when edit attributes is canceled, preserve initial data
+  onCancel(): void {
+    this.attributesForm.reset({
+      ...this.editConfig
+    });
 
+    console.log('Canceled edit');
+
+  }
   handleEventResults(x: MageEvent[]) {
     this.events = x
   }
-
   onDeleteLayer(layerUrl: string) {
     let index = 0;
     for (const featureServiceConfig of this.config.featureServices) {
@@ -96,11 +142,6 @@ export class ArcAdminComponent implements OnInit {
     this.dialog.open<unknown, unknown, string>(this.editProcessingTemplate)
   }
 
-  onEditAttributes() {
-    this.editConfig = this.copyConfig()
-    this.dialog.open<unknown, unknown, string>(this.editAttributesTemplate)
-  }
-
   setField(field: string, value: any) {
     if (value != undefined && value.length == 0) {
       value = undefined

plugins/arcgis/web-app/projects/main/src/lib/arc-event/arc-event.component.html

@@ -1,9 +1,13 @@
 <div class="arc-event">
+  <mat-card appearance="outlined">
+    <mat-card-header>
+      <mat-card-title>
+        Events 
+      </mat-card-title>
+      <mat-card-subtitle>Change the ArcGIS layers each MAGE event sends its observations to.</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
   <section class="arc-event-sync">
-    <header>
-      <h2>Events</h2>
-      <p class="subheading">Change the ArcGIS layers each MAGE event sends its observations to.</p>
-    </header>
     <div class="arcEvents" *ngIf="!model.events.length">
       <div class="arcEvent">
         There are no events synchronizing to ArcGIS layers.
@@ -32,7 +36,9 @@ <h2>Events</h2>
       </ng-container>
     </div>
   </section>
-</div>
+</mat-card-content>
+</mat-card>
+
 <ng-template #editEventDialog let-data>
   <h2 matDialogTitle>ArcGIS layers that MAGE event named {{currentEditingEvent.name}} is synchronizing</h2>
   <mat-dialog-content>
@@ -48,4 +54,5 @@ <h2 matDialogTitle>ArcGIS layers that MAGE event named {{currentEditingEvent.nam
     <button mat-flat-button color="primary" matDialogClose
       (click)="saveChanges()">SAVE</button>
   </mat-dialog-actions>
-</ng-template>
+</ng-template>
+</div>

plugins/arcgis/web-app/projects/main/src/lib/arc-layer/arc-layer.component.html

@@ -1,9 +1,13 @@
 <div class="arc-layer">
+  <mat-card appearance="outlined">
+    <mat-card-header>
+      <mat-card-title>
+        Feature Layers 
+      </mat-card-title>
+      <mat-card-subtitle>Add ArcGIS feature service urls and layers to synchronize MAGE data to.</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
   <section class="arc-service">
-    <header>
-      <h2>Feature Layers</h2>
-      <p class="subheading">Add ArcGIS feature service urls and layers to sychronize MAGE data to.</p>
-    </header>
     <div>
       <button mat-button mat-stroked-button color="primary" (click)="onAddService()">ADD FEATURE SERVICE</button>
     </div>
@@ -31,7 +35,56 @@ <h2>Feature Layers</h2>
         <div class="featureLayer__value">
           {{layer.layer}}
         </div>
-      </div>
+      </ng-container>
     </div>
   </section>
-</div>
+<ng-template #addLayerDialog let-data>
+  <ng-container *ngIf="currentUrl == undefined; else editLayer">
+    <h2 matDialogTitle>Add ArcGIS Feature Service</h2>
+  </ng-container>
+  <ng-template #editLayer>
+    <h2 matDialogTitle>Edit ArcGIS Feature Service</h2>
+  </ng-template>
+  <mat-dialog-content>
+    <div class="arc-layer-form">
+      <mat-form-field [style.width.%]="100">
+        <mat-label>URL</mat-label>
+        <input type="text" matInput [formControl]="arcLayerControl" (keyup)="inputChanged(layerUrl.value, layerToken.value)"
+          placeholder="http{s}://{domain}/arcgis/rest/services/{service}/FeatureServer" #layerUrl />
+        <mat-error *ngIf="arcLayerControl.hasError('required')">
+          URL is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+      <mat-form-field [style.width.%]="100">
+        <mat-label>Token</mat-label>
+        <input type="text" matInput [formControl]="arcTokenControl" (keyup)="inputChanged(layerUrl.value, layerToken.value)" #layerToken />
+      </mat-form-field>
+    </div>
+    <h3 matDialogTitle>Layers</h3>
+    <mat-spinner *ngIf="isLoading"></mat-spinner>
+    <div class="arc-layers" *ngFor="let arcLayer of layers">
+      <div class="featureLayer__value">
+        <input type="checkbox" [checked]="arcLayer.isSelected" (change)="selectedChanged(arcLayer)" />
+        {{arcLayer.name}}
+      </div>
+    </div>
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button mat-button matDialogClose>CANCEL</button>
+    <button [disabled]="isSaveDisabled()" mat-flat-button color="primary" matDialogClose
+      (click)="onAddLayerUrl({ layerUrl: layerUrl.value, selectableLayers: layers, layerToken: layerToken.value })">SAVE</button>
+  </mat-dialog-actions>
+</ng-template>
+<ng-template #deleteLayerDialog let-data>
+  <h3 matDialogTitle>Delete feature service?</h3>
+  <div class="deleteArcLayer__value">
+    {{currentUrl}}
+  </div>
+  <br>
+  <mat-dialog-actions align="end">
+    <button mat-button matDialogClose>CANCEL</button>
+    <button mat-flat-button color="primary" matDialogClose (click)="onDeleteLayer()">DELETE</button>
+  </mat-dialog-actions>
+</ng-template>
+</mat-card-content>
+</mat-card>

plugins/arcgis/web-app/projects/main/src/lib/arc-layer/arc-layer.component.scss

@@ -83,4 +83,8 @@ section {
     height: inherit;
     line-height: inherit;
     width: inherit;
-}
+}
+
+mat-card {
+    margin-bottom: 16px;  
+  }

service/src/routes/authenticationconfigurations.js

@@ -101,7 +101,7 @@ module.exports = function (app, security) {
 
       const securityData = {};
 
-      const settings = JSON.parse(req.body.settings);
+      const { settings } = req.body;
 
       Object.keys(settings).forEach(key => {
         if (blacklist && blacklist.indexOf(key.toLowerCase()) != -1) {
@@ -184,7 +184,7 @@ module.exports = function (app, security) {
 
       const securityData = {};
 
-      const settings = JSON.parse(req.body.settings);
+      const { settings } = req.body;
 
       Object.keys(settings).forEach(key => {
         if (blacklist && blacklist.indexOf(key.toLowerCase()) != -1) {

web-app/admin/src/app/admin/admin-authentication/admin-authentication-create/admin-authentication-create.component.ts

@@ -17,10 +17,10 @@ import { Strategy } from '../../admin-authentication/admin-settings.model';
 })
 export class AuthenticationCreateComponent implements OnInit {
    breadcrumbs: AdminBreadcrumb[] = [{
-      title: 'Settings',
-      icon: 'build',
+      title: 'Security',
+      icon: 'shield',
       state: {
-         name: 'admin.settings'
+         name: 'admin.security'
       }
    }];
    strategy: Strategy;
@@ -124,13 +124,13 @@ export class AuthenticationCreateComponent implements OnInit {
 
    save(): void {
       this.authenticationConfigurationService.createConfiguration(this.strategy).then(() => {
-         this.stateService.go('admin.settings');
+         this.stateService.go('admin.security');
       }).catch((err: any) => {
          console.error(err);
          this.snackBar.open('An error occured while creating ' + this.strategy.title, null, {
             duration: 2000,
          })
-         this.stateService.go('admin.settings');
+         this.stateService.go('admin.security');
       });
    }
 

web-app/admin/src/app/admin/admin-authentication/admin-authentication.component.html

@@ -1,3 +1,6 @@
+<section class="mat-typography">
+    <admin-breadcrumb [breadcrumbs]="breadcrumbs"></admin-breadcrumb>
+</section>
 <section class="mat-typography">
     <div class="auth__action--new">
         <button mat-stroked-button color="primary" (click)="$event.stopPropagation(); createAuthentication()"

web-app/admin/src/app/admin/admin-authentication/admin-authentication.component.ts

@@ -1,6 +1,7 @@
 import _ from 'underscore'
 import { Component, OnInit, Inject, EventEmitter, Output, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Team, Event, LocalStorageService, AuthenticationConfigurationService, UserService } from '../../upgrade/ajs-upgraded-providers';
+import { AdminBreadcrumb } from '../admin-breadcrumb/admin-breadcrumb.model'
 import { Strategy } from '../admin-authentication/admin-settings.model';
 import { MatDialog } from '@angular/material/dialog';
 import { StateService } from '@uirouter/angular';
@@ -17,6 +18,11 @@ export class AdminAuthenticationComponent implements OnInit, OnChanges {
   @Output() onDirty = new EventEmitter<boolean>();
   @Input() beginSave: any;
 
+  readonly breadcrumbs: AdminBreadcrumb[] = [{
+    title: 'Security',
+    icon: 'shield'
+  }];
+
   teams: any[] = [];
   events: any[] = [];
 

web-app/admin/src/app/admin/admin-settings/admin-settings.component.html

@@ -5,11 +5,6 @@
     <div class="page-container">
         <div class="content">
             <mat-tab-group color="primary" mat-stretch-tabs>
-                <mat-tab label="Authentication">
-                    <admin-authentication (saveComplete)="onAuthenticationSaved($event)"
-                        (onDirty)="onAuthenticationDirty($event)" (deleteComplete)="onAuthenticationDeleted($event)" [beginSave]="(onSave)">
-                    </admin-authentication>
-                </mat-tab>
                 <mat-tab label="Banner">
                     <security-banner (saveComplete)="onBannerSaved($event)" (onDirty)="onBannerDirty($event)"
                         [beginSave]="(onSave)"></security-banner>

web-app/admin/src/ng1/admin/admin.tab.html

@@ -58,6 +58,12 @@
       <div>Map</div>
     </div>
 
+    <div class="admin-action" ng-if="$ctrl.hasPermission('UPDATE_SETTINGS')" ng-class="{'admin-action-selected': $ctrl.stateName === 'admin.security'}" ng-click="$ctrl.tabChanged('admin.security')">
+      <div ng-class="{'admin-action-arrow-left': $ctrl.stateName === 'admin.security'}"></div>
+      <i class="fa fa-shield"></i>
+      <div>Security</div>
+    </div>
+
     <div class="admin-action" ng-if="$ctrl.hasPermission('UPDATE_SETTINGS')" ng-class="{'admin-action-selected': $ctrl.stateName === 'admin.settings'}" ng-click="$ctrl.tabChanged('admin.settings')">
       <div ng-class="{'admin-action-arrow-left': $ctrl.stateName === 'admin.settings'}"></div>
       <i class="fa fa-wrench"></i>