Skip to content

fix(web-app): show default map icon for forms without select fields #461

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
restjohn merged 1 commit into from
Jul 27, 2026
Merged

fix(web-app): show default map icon for forms without select fields #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 29 additions & 35 deletions web-app/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,51 +162,45 @@
<div class="section-body">


<div class="symbology-item" *ngIf="getDropdownFields().length === 0">
<mat-icon fontSet="material-symbols-outlined" class="symbology-marker-icon"
[style.color]="form.color">place</mat-icon>
<div class="symbology-info">
<span class="symbology-label">Default</span>
<span class="symbology-detail">No symbology configured</span>
<mat-card appearance="outlined" class="symbology-variant-item default-symbology-card">
<div class="variant-card-header">
<div class="variant-card-titles">
<span class="variant-card-title">Default</span>
<span class="variant-card-subtitle">No primary or secondary value</span>
</div>
<button matIconButton type="button" (click)="editSymbology('')"
matTooltip="Edit default symbology">
<mat-icon fontSet="material-symbols-outlined">edit</mat-icon>
</button>
</div>
</div>
<div class="symbology-display-content">
<div class="symbology-visual">
<div class="icon-preview" *ngIf="getIconUrl('')">
<img [src]="getIconUrl('')" alt="icon" />
</div>
<div class="icon-preview" *ngIf="!getIconUrl('')">
<mat-icon fontSet="material-symbols-outlined" class="symbology-marker-icon"
matTooltip="Map Icon" matTooltipPosition="above">place</mat-icon>
</div>
<div class="color-swatches">
<div class="color-swatch line-color" [style.color]="getLineColor('')"
matTooltip="Line Color" matTooltipPosition="above"></div>
<div class="color-swatch fill-color" [style.background-color]="getFillColor('')"
matTooltip="Fill Color" matTooltipPosition="above"></div>
</div>
</div>
</div>
</mat-card>

<div class="no-fields-hint" *ngIf="getDropdownFields().length === 0">
<mat-icon fontSet="material-symbols-outlined">info</mat-icon>
<div>
<p class="hint-title">No Select fields available</p>
<p class="hint-body">Add a Select field to the form to configure map symbology options.</p>
<p class="hint-body">Add a Select field to the form to configure additional map symbology options.</p>
</div>
</div>

<ng-container *ngIf="getDropdownFields().length > 0">
<mat-card appearance="outlined" class="symbology-variant-item default-symbology-card" *ngIf="form.primaryField">
<div class="variant-card-header">
<div class="variant-card-titles">
<span class="variant-card-title">Default</span>
<span class="variant-card-subtitle">No primary or secondary value</span>
</div>
<button matIconButton type="button" (click)="editSymbology('')"
matTooltip="Edit default symbology">
<mat-icon fontSet="material-symbols-outlined">edit</mat-icon>
</button>
</div>
<div class="symbology-display-content">
<div class="symbology-visual">
<div class="icon-preview">
<mat-icon fontSet="material-symbols-outlined" class="symbology-marker-icon"
matTooltip="Map Icon" matTooltipPosition="above">place</mat-icon>
</div>
<div class="color-swatches">
<div class="color-swatch line-color" [style.color]="getLineColor('')"
matTooltip="Line Color" matTooltipPosition="above"></div>
<div class="color-swatch fill-color" [style.background-color]="getFillColor('')"
matTooltip="Fill Color" matTooltipPosition="above"></div>
</div>
</div>
</div>
</mat-card>

<mat-form-field appearance="fill" class="config-select-field">
<mat-label>Primary Field</mat-label>
<mat-select [(ngModel)]="form.primaryField" (ngModelChange)="onMapFieldChange()" name="primaryField">
Expand Down
5 changes: 4 additions & 1 deletion web-app/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,6 +414,7 @@

.default-symbology-card {
margin-bottom: 16px;
padding-bottom: 8px;
display: inline-flex;
flex-direction: column;
min-width: 220px;
Expand Down Expand Up @@ -441,11 +442,13 @@
.symbology-variant-item {
min-width: 220px;
flex-shrink: 0;
padding-bottom: 8px;
}

.variant-card-header {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 4px 0 12px;
}

Expand All @@ -472,7 +475,7 @@
}

.icon-preview {
height: 48px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
Expand Down
98 changes: 98 additions & 0 deletions ...pp/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -451,6 +451,104 @@ describe('FormDetailsComponent', () => {
});
});

describe('getDropdownFields', () => {
it('returns empty array when form has no fields', () => {
component.form = { name: 'Test Form', color: '#ff0000', fields: [] };

expect(component.getDropdownFields()).toEqual([]);
});

it('excludes non-dropdown fields', () => {
component.form = {
name: 'Test Form',
color: '#ff0000',
fields: [
{ name: 'notes', type: 'textfield' } as any,
{ name: 'count', type: 'numberfield' } as any
]
};

expect(component.getDropdownFields()).toEqual([]);
});

it('includes dropdown and userDropdown fields, excluding multiselect and archived', () => {
const dropdown = { name: 'status', type: 'dropdown' } as any;
const userDropdown = { name: 'assignee', type: 'userDropdown' } as any;
const multiselect = {
name: 'tags',
type: 'dropdown',
multiselect: true
} as any;
const archived = {
name: 'old',
type: 'dropdown',
archived: true
} as any;

component.form = {
name: 'Test Form',
color: '#ff0000',
fields: [dropdown, userDropdown, multiselect, archived]
};

expect(component.getDropdownFields()).toEqual([dropdown, userDropdown]);
});

it('excludes the field named by excludeField', () => {
const primary = { name: 'status', type: 'dropdown' } as any;
const secondary = { name: 'severity', type: 'dropdown' } as any;

component.form = {
name: 'Test Form',
color: '#ff0000',
fields: [primary, secondary]
};

expect(component.getDropdownFields('status')).toEqual([secondary]);
});
});

describe('getIconUrl', () => {
it('returns null when no icons have been cached', () => {
expect(component.getIconUrl('')).toBeNull();
});

it('returns the form-wide default icon for an empty primary', () => {
(component as any).iconCache = { icon: 'default-icon-url' };

expect(component.getIconUrl('')).toBe('default-icon-url');
});

it('returns the icon for a primary choice', () => {
(component as any).iconCache = {
Active: { icon: 'active-icon-url' },
icon: 'default-icon-url'
};

expect(component.getIconUrl('Active')).toBe('active-icon-url');
});

it('returns the icon for a primary/variant combination', () => {
(component as any).iconCache = {
Active: { High: 'active-high-icon-url', icon: 'active-icon-url' }
};

expect(component.getIconUrl('Active', 'High')).toBe(
'active-high-icon-url'
);
});

it('falls back to the primary icon when the variant has no icon', () => {
(component as any).iconCache = {
Active: { icon: 'active-icon-url' }
};

expect(component.getIconUrl('Active', 'High')).toBe(
'active-icon-url'
);
});
});

describe('exportForm', () => {
let mockAnchor: any;

Expand Down
Loading