Skip to content

Commit 1bb6c7f

Browse files
ryanslattenryanslatten
committed
fix state service
1 parent b67c6ee commit 1bb6c7f

File tree

3 files changed

+80
-76
lines changed

3 files changed

+80
-76
lines changed

‎web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.html‎

Lines changed: 66 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -250,82 +250,87 @@ <h3 class="section-title">Map Symbology</h3>
250250
map by selecting primary
251251
and variant fields for symbology.</p>
252252

253-
<!-- Map Symbology Preview -->
254-
<div class="symbology-preview" *ngIf="form.primaryField">
255-
<h4 class="subsection-title">Configured Symbology</h4>
256-
<div class="symbology-list">
257-
<div class="symbology-item">
258-
<div class="symbology-icon">
259-
<i class="fa fa-map-marker" [style.color]="form.color"></i>
260-
</div>
261-
<div class="symbology-info">
262-
<span class="symbology-label">Default</span>
263-
<span class="symbology-detail">Primary: {{
264-
getFieldTitle(form.primaryField) }}</span>
265-
<span class="symbology-detail" *ngIf="form.variantField">Variant: {{
266-
getFieldTitle(form.variantField) }}</span>
253+
<!-- Map Configuration Row: Symbology Preview + Field Dropdowns -->
254+
<div
255+
style="display: flex; gap: 2rem; align-items: flex-start; margin-bottom: 1.5rem;">
256+
<!-- Map Symbology Preview -->
257+
<div class="symbology-preview" *ngIf="form.primaryField"
258+
style="flex: 0 0 auto; min-width: 250px;">
259+
<h4 class="subsection-title">Configured Symbology</h4>
260+
<div class="symbology-list">
261+
<div class="symbology-item">
262+
<div class="symbology-icon">
263+
<i class="fa fa-map-marker" [style.color]="form.color"></i>
264+
</div>
265+
<div class="symbology-info">
266+
<span class="symbology-label">Default</span>
267+
<span class="symbology-detail">Primary: {{
268+
getFieldTitle(form.primaryField) }}</span>
269+
<span class="symbology-detail"
270+
*ngIf="form.variantField">Variant: {{
271+
getFieldTitle(form.variantField) }}</span>
272+
</div>
267273
</div>
268274
</div>
269275
</div>
270-
</div>
271276

272-
<!-- Primary Field Selection -->
273-
<div class="config-section">
274-
<h4 class="subsection-title">Primary Field</h4>
277+
<!-- Field Selection Controls -->
278+
<div style="flex: 1; display: flex; flex-direction: column; gap: 1.5rem;">
279+
<!-- Primary Field Selection -->
280+
<div class="config-section">
281+
<h4 class="subsection-title">Primary Field</h4>
275282

276-
<div class="config-inline-item">
277-
<div class="config-inline-label">
278-
<strong>Primary Field</strong>
279-
<p class="field-hint">Select a dropdown field to use for primary map
280-
symbology.</p>
281-
</div>
282-
<div class="config-inline-control">
283-
<select class="form-input" [(ngModel)]="form.primaryField"
284-
(ngModelChange)="onMapFieldChange()" name="primaryField">
285-
<option [value]="null">No Primary Field</option>
286-
<option *ngFor="let field of getDropdownFields()"
287-
[value]="field.name">
288-
{{ field.title }}
289-
</option>
290-
</select>
283+
<div class="config-inline-item">
284+
<div class="config-inline-label">
285+
<strong>Primary Field</strong>
286+
<p class="field-hint">Select a dropdown field to use for primary
287+
map
288+
symbology.</p>
289+
</div>
290+
<div class="config-inline-control">
291+
<select class="form-input" [(ngModel)]="form.primaryField"
292+
(ngModelChange)="onMapFieldChange()" name="primaryField">
293+
<option [value]="null">No Primary Field</option>
294+
<option *ngFor="let field of getDropdownFields()"
295+
[value]="field.name">
296+
{{ field.title }}
297+
</option>
298+
</select>
299+
</div>
300+
</div>
291301
</div>
292-
</div>
293-
</div>
294302

295-
<!-- Variant Field Selection -->
296-
<div class="config-section" *ngIf="form.primaryField">
297-
<h4 class="subsection-title">Variant Field</h4>
303+
<!-- Variant Field Selection -->
304+
<div class="config-section" *ngIf="form.primaryField">
305+
<h4 class="subsection-title">Variant Field</h4>
298306

299-
<div class="config-inline-item">
300-
<div class="config-inline-label">
301-
<strong>Variant Field</strong>
302-
<p class="field-hint">Select a second dropdown field for additional
303-
symbology variation.</p>
304-
</div>
305-
<div class="config-inline-control">
306-
<select class="form-input" [(ngModel)]="form.variantField"
307-
(ngModelChange)="onMapFieldChange()" name="variantField">
308-
<option [value]="null">No Variant Field</option>
309-
<option *ngFor="let field of getDropdownFields(form.primaryField)"
310-
[value]="field.name">
311-
{{ field.title }}
312-
</option>
313-
</select>
307+
<div class="config-inline-item">
308+
<div class="config-inline-label">
309+
<strong>Variant Field</strong>
310+
<p class="field-hint">Select a second dropdown field for
311+
additional
312+
symbology variation.</p>
313+
</div>
314+
<div class="config-inline-control">
315+
<select class="form-input" [(ngModel)]="form.variantField"
316+
(ngModelChange)="onMapFieldChange()" name="variantField">
317+
<option [value]="null">No Variant Field</option>
318+
<option
319+
*ngFor="let field of getDropdownFields(form.primaryField)"
320+
[value]="field.name">
321+
{{ field.title }}
322+
</option>
323+
</select>
324+
</div>
325+
</div>
314326
</div>
315327
</div>
316328
</div>
317329

318330
<!-- Primary Field Choices Symbology -->
319331
<div class="primary-choices-section"
320332
*ngIf="form.primaryField && getPrimaryFieldChoices().length > 0">
321-
<div class="subsection-header-collapsible" (click)="toggleSymbologyDetails()">
322-
<h4 class="subsection-title">Symbology by Primary Field Value</h4>
323-
<button class="icon-button-subtle" type="button">
324-
<i class="fa"
325-
[ngClass]="showSymbologyDetails ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
326-
</button>
327-
</div>
328-
<div class="choices-list" *ngIf="showSymbologyDetails">
333+
<div class="choices-list">
329334
<div class="choice-symbology"
330335
*ngFor="let choice of getPrimaryFieldChoices()">
331336
<div class="choice-header">

‎web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -784,8 +784,7 @@ textarea.form-control {
784784
padding: 1.5rem;
785785
background-color: #fafbfc;
786786
border: 1px solid #e5e7eb;
787-
border-top: none;
788-
border-radius: 0 0 8px 8px;
787+
border-radius: 8px 8px 8px 8px;
789788
margin-top: 0;
790789
}
791790

‎web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { Component, OnInit, Inject } from '@angular/core';
22
import { MatDialog } from '@angular/material/dialog';
33
import { MatSnackBar } from '@angular/material/snack-bar';
4-
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
4+
import { CdkDragDrop } from '@angular/cdk/drag-drop';
5+
import { StateService } from '@uirouter/angular';
56
import { EventsService } from '../../events.service';
67
import { LocalStorageService, UserService } from '../../../../upgrade/ajs-upgraded-providers';
78
import { Event as MageEvent } from 'src/app/filter/filter.types';
@@ -53,10 +54,10 @@ export class FormDetailsComponent implements OnInit {
5354
breadcrumbs: AdminBreadcrumb[] = [];
5455

5556
// Collapsible section state
56-
showFieldsSection = true;
57-
showMapSection = true;
58-
showFeedSection = true;
59-
showSymbologyDetails = false;
57+
showFieldsSection = false;
58+
showMapSection = false;
59+
showFeedSection = false;
60+
showSymbologyDetails = true;
6061

6162
// Section-specific dirty tracking and saving state
6263
fieldsChanged = false;
@@ -100,15 +101,14 @@ export class FormDetailsComponent implements OnInit {
100101
private snackBar: MatSnackBar,
101102
@Inject(LocalStorageService) private localStorageService: any,
102103
@Inject(UserService) private userService: any,
103-
@Inject('$stateParams') private $stateParams: any,
104-
@Inject('$state') private $state: any
104+
private stateService: StateService
105105
) { }
106106

107107
ngOnInit(): void {
108108
this.token = this.localStorageService.getToken();
109109

110-
const eventId = this.$stateParams.eventId;
111-
const formId = this.$stateParams.formId;
110+
const eventId = this.stateService.params.eventId;
111+
const formId = this.stateService.params.formId;
112112

113113
// Initialize new field with default values
114114
this.newField = {
@@ -402,19 +402,19 @@ export class FormDetailsComponent implements OnInit {
402402

403403
navigateToFields(): void {
404404
if (this.event?.id && this.form.id) {
405-
this.$state.go('admin.formFieldsEdit', { eventId: this.event.id, formId: this.form.id });
405+
this.stateService.go('admin.formFieldsEdit', { eventId: this.event.id, formId: this.form.id });
406406
}
407407
}
408408

409409
navigateToMap(): void {
410410
if (this.event?.id && this.form.id) {
411-
this.$state.go('admin.formMapEdit', { eventId: this.event.id, formId: this.form.id });
411+
this.stateService.go('admin.formMapEdit', { eventId: this.event.id, formId: this.form.id });
412412
}
413413
}
414414

415415
navigateToFeed(): void {
416416
if (this.event?.id && this.form.id) {
417-
this.$state.go('admin.formFeedEdit', { eventId: this.event.id, formId: this.form.id });
417+
this.stateService.go('admin.formFeedEdit', { eventId: this.event.id, formId: this.form.id });
418418
}
419419
}
420420

@@ -706,7 +706,7 @@ export class FormDetailsComponent implements OnInit {
706706
this.form,
707707
Number(this.form.id),
708708
myself,
709-
this.$stateParams.eventId,
709+
this.stateService.params.eventId,
710710
this.localStorageService.getToken()
711711
);
712712
});

0 commit comments

Comments
 (0)