Skip to content

Commit

Permalink
binding fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Katherine Brown authored and Katherine Brown committed Oct 24, 2024
1 parent ddebb49 commit 5c61d60
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 48 deletions.
28 changes: 14 additions & 14 deletions plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,96 +88,96 @@ <h1>ArcGIS Configuration</h1>
<mat-card-subtitle>MAGE Field to ArcGIS Attribute mappings.</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<form [formGroup]="attributesForm">
<form [formGroup]="attributesForm" (ngSubmit)="onSubmit()">
<div class="edit-attributes-form">
<div class="observation-id-field">
<mat-form-field [style.width.%]="90" appearance="fill">
<mat-form-field appearance="fill">
<mat-label>Observation Id Field</mat-label>
<input type="text" matInput formControlName="observationIdField" />
<mat-hint>The ArcGIS layer text field attribute name to store the MAGE observation id</mat-hint>
</mat-form-field>
</div>
<div class="id-separator-field">
<mat-form-field [style.width.%]="90" appearance="fill">
<mat-form-field appearance="fill">
<mat-label>Id Separator</mat-label>
<input type="text" matInput formControlName="idSeparator" />
<mat-hint>When event id field is not configured, the separator combining observation ids and event ids in the observation id field</mat-hint>
</mat-form-field>
</div>
<div class="event-id-field">
<mat-form-field [style.width.%]="90" appearance="fill">
<mat-form-field appearance="fill">
<mat-label>Event Id Field</mat-label>
<input type="text" matInput formControlName="eventIdField" />
<mat-hint>The ArcGIS layer integer field attribute name to store the MAGE event id</mat-hint>
</mat-form-field>
</div>
<div class="last-edited-date-field">
<mat-form-field [style.width.%]="90" appearance="fill">
<mat-form-field appearance="fill">
<mat-label>Last Edited Date Field</mat-label>
<input type="text" matInput formControlName="lastEditedDateField" />
<mat-hint>The last edited date field attribute name on the ArcGIS layer</mat-hint>
</mat-form-field>
</div>
<div class="event-name-field">
<mat-form-field [style.width.%]="90" appearance="fill">
<mat-form-field appearance="fill">
<mat-label>Event Name Field</mat-label>
<input type="text" matInput formControlName="eventNameField" />
<mat-hint>The ArcGIS layer text field attribute name to store the MAGE event name</mat-hint>
</mat-form-field>
</div>
<div class="user-id-field">
<mat-form-field [style.width.%]="90" appearance="fill">
<mat-form-field appearance="fill">
<mat-label>User Id Field</mat-label>
<input type="text" matInput formControlName="userIdField" />
<mat-hint>The ArcGIS layer text field attribute name to store the MAGE user id</mat-hint>
</mat-form-field>
</div>
<div class="username-field">
<mat-form-field [style.width.%]="90" appearance="fill">
<mat-form-field appearance="fill">
<mat-label>Username Field</mat-label>
<input type="text" matInput formControlName="usernameField" />
<mat-hint>The ArcGIS layer text field attribute name to store the MAGE username</mat-hint>
</mat-form-field>
</div>
<div class="user-display-name-field">
<mat-form-field [style.width.%]="90" appearance="fill">
<mat-form-field appearance="fill">
<mat-label>User Display Name Field</mat-label>
<input type="text" matInput formControlName="userDisplayNameField" />
<mat-hint>The ArcGIS layer text field attribute name to store the MAGE user display name</mat-hint>
</mat-form-field>
</div>
<div class="device-id-field">
<mat-form-field [style.width.%]="90" appearance="fill">
<mat-form-field appearance="fill">
<mat-label>Device Id Field</mat-label>
<input type="text" matInput formControlName="deviceIdField" />
<mat-hint>The ArcGIS layer text field attribute name to store the MAGE device id</mat-hint>
</mat-form-field>
</div>
<div class="created-at-field">
<mat-form-field [style.width.%]="90" appearance="fill">
<mat-form-field appearance="fill">
<mat-label>Created At Field</mat-label>
<input type="text" matInput formControlName="createdAtField" />
<mat-hint>The ArcGIS layer date time field attribute name to store the MAGE created at date</mat-hint>
</mat-form-field>
</div>
<div class="last-modified-field">
<mat-form-field [style.width.%]="90" appearance="fill">
<mat-form-field appearance="fill">
<mat-label>Last Modified Field</mat-label>
<input type="text" matInput formControlName="lastModifiedField" />
<mat-hint>The ArcGIS layer date time field attribute name to store the MAGE last modified date (may be the
same as last edited date field if editable)</mat-hint>
</mat-form-field>
</div>
<div class="geometry-type-field">
<mat-form-field [style.width.%]="90" appearance="fill">
<mat-form-field appearance="fill">
<mat-label>Geometry Type Field</mat-label>
<input type="text" matInput formControlName="geometryType" />
<mat-hint>The ArcGIS layer text field attribute name to store the Esri geometry type</mat-hint>
</mat-form-field>
</div>
<div class="button-group">
<button mat-raised-button color="primary" type="submit" [disabled]="attributesForm.invalid">Save</button>
<button mat-button type="button" (click)="cancelEdit()">Cancel</button>
<button mat-button type="button" (click)="onCancel()">Cancel</button>
</div>
</div>
</form>
Expand Down
4 changes: 2 additions & 2 deletions plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,9 +181,9 @@ section {
}


mat-form-field {
.mat-form-field {
width: 100%;
margin-bottom: 16px;
margin-bottom: 32px;
}

mat-card {
Expand Down
79 changes: 47 additions & 32 deletions plugins/arcgis/web-app/projects/main/src/lib/arc-admin/arc-admin.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,59 +72,74 @@ export class ArcAdminComponent implements OnInit {
this.config = config;
this.configChangedNotifier.next();
}

//map attribute form to fields
// Visually blank but has underlying value in editConfig
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]
observationIdField: [''],
idSeparator: [''],
eventIdField: [''],
lastEditedDateField: [''],
eventNameField: [''],
userIdField: [''],
usernameField: [''],
userDisplayNameField: [''],
deviceIdField: [''],
createdAtField: [''],
lastModifiedField: [''],
geometryType: ['']
});
}

//save attributes form
//Save attributes form. If left blank, assign default value
onSubmit(): void {
console.log('submitting form...');

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
};
observationIdField: formValue.observationIdField || this.editConfig.observationIdField,
idSeparator: formValue.idSeparator || this.editConfig.idSeparator,
eventIdField: formValue.eventIdField || this.editConfig.eventIdField,
lastEditedDateField: formValue.lastEditedDateField || this.editConfig.lastEditedDateField,
eventNameField: formValue.eventNameField || this.editConfig.eventNameField,
userIdField: formValue.userIdField || this.editConfig.userIdField,
usernameField: formValue.usernameField || this.editConfig.usernameField,
userDisplayNameField: formValue.userDisplayNameField || this.editConfig.userDisplayNameField,
deviceIdField: formValue.deviceIdField || this.editConfig.deviceIdField,
createdAtField: formValue.createdAtField || this.editConfig.createdAtField,
lastModifiedField: formValue.lastModifiedField || this.editConfig.lastModifiedField,
geometryType: formValue.geometryType || this.editConfig.geometryType
};

console.log('Form Submitted:', this.editConfig);
console.log('formValue: ', formValue);

this.editConfig = this.copyConfig();
}
else{
console.log('Form is invalid, please correct the errors.')
}
}

//when edit attributes is canceled, preserve initial data
//when edit attributes is canceled, display and empty form but preserved data in editConfig
onCancel(): void {
this.attributesForm.reset({
...this.editConfig
observationIdField: '',
idSeparator: '',
eventIdField: '',
lastEditedDateField: '',
eventNameField: '',
userIdField: '',
usernameField: '',
userDisplayNameField: '',
deviceIdField: '',
createdAtField: '',
lastModifiedField: '',
geometryType: ''
});

console.log('Canceled edit');
console.log('Current data: ', this.editConfig)

}
handleEventResults(x: MageEvent[]) {
Expand Down

0 comments on commit 5c61d60

Please sign in to comment.