@fleetbase/fleetops-engine 0.6.64 → 0.6.66

package/addon/components/fuel-integration/hub.js

@@ -3,6 +3,8 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
+import { fuelDate, fuelNumber, fuelMoney } from '../../utils/fuel-integration-format';
+
 const WARNING_STATUSES = ['error', 'disabled'];
 
 export default class FuelIntegrationHubComponent extends Component {
@@ -62,13 +64,12 @@ export default class FuelIntegrationHubComponent extends Component {
     }
 
     get lastSyncLabel() {
-        const syncedAt = this.connections
+        const dates = this.connections
             .map((connection) => connection.last_synced_at)
             .filter(Boolean)
-            .sort()
-            .pop();
-
-        return syncedAt ? new Date(syncedAt).toLocaleString() : 'Not synced';
+            .map((value) => new Date(value).getTime())
+            .filter(Number.isFinite);
+        return dates.length ? fuelDate(Math.max(...dates)) : 'Not synced';
     }
 
     get kpiWidgets() {
@@ -93,7 +94,7 @@ export default class FuelIntegrationHubComponent extends Component {
             },
             {
                 icon: 'triangle-exclamation',
-                label: 'Unmatched transactions',
+                label: 'Unmatched in latest runs',
                 value: this.unmatchedTransactionsCount,
                 help: this.unmatchedTransactionsCount > 0 ? 'Need vehicle or trip matching' : 'No unmatched count',
                 action: 'Review matches',
@@ -102,7 +103,7 @@ export default class FuelIntegrationHubComponent extends Component {
             },
             {
                 icon: 'receipt',
-                label: 'Imported spend',
+                label: 'Latest import spend',
                 value: this.formatSpend,
                 help: `${this.formatLiters} imported`,
                 action: 'Open ledger',
@@ -113,21 +114,16 @@ export default class FuelIntegrationHubComponent extends Component {
     }
 
     get formatSpend() {
-        const currency = this.currentUser?.company?.currency || this.currentUser?.currency || 'USD';
-
-        if (!this.totalSpend) {
-            return `${currency} 0`;
+        const currencies = new Map();
+        for (const connection of this.connections) {
+            const currency = connection.last_sync_state?.summary?.currency || (connection.provider === 'petroapp' ? 'SAR' : null);
+            if (currency) currencies.set(currency, (currencies.get(currency) || 0) + Number(connection.last_sync_state?.summary?.amount || 0));
         }
-
-        return `${currency} ${(this.totalSpend / 100).toLocaleString(undefined, { maximumFractionDigits: 2 })}`;
+        return [...currencies].map(([currency, amount]) => fuelMoney(amount, currency)).join(' · ') || 'No spend recorded';
     }
 
     get formatLiters() {
-        if (!this.totalLiters) {
-            return '0 L';
-        }
-
-        return `${Number(this.totalLiters).toLocaleString(undefined, { maximumFractionDigits: 1 })} L`;
+        return `${fuelNumber(this.totalLiters)} L`;
     }
 
     @action openProvider(provider) {
@@ -153,7 +149,7 @@ export default class FuelIntegrationHubComponent extends Component {
 
         const connection = this.connections[0];
         if (connection) {
-            return this.fuelIntegrationActions.transition.view(connection);
+            return this.fuelIntegrationActions.transitionTo('connectivity.fuel-providers.details.sync', connection);
         }
 
         return this.fuelIntegrationActions.transition.create();

package/addon/components/fuel-provider-connection/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @fuelProviderConnection @resource)}}
+    @resourceType="fuel-provider-connection"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/fuel-provider-connection/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @fuelProviderConnection @resource)}} @resourceType="fuel-provider-connection" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/fuel-provider-transaction/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @fuelProviderTransaction @resource)}}
+    @resourceType="fuel-provider-transaction"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/fuel-provider-transaction/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @fuelProviderTransaction @resource)}} @resourceType="fuel-provider-transaction" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/fuel-report/details.hbs

@@ -23,15 +23,21 @@
             {{/if}}
             <div class="field-info-container">
                 <div class="field-name">{{t "fuel-report.fields.reporter"}}</div>
-                <div class="field-value">{{n-a @resource.reporter_name}}</div>
+                <div class="field-value">
+                    <User::Pill @user={{resource-relation @resource "reporter"}} @titleFallback={{n-a @resource.reporter_name}} />
+                </div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "resource.driver"}}</div>
-                <div class="field-value">{{n-a @resource.driver_name}}</div>
+                <div class="field-value">
+                    <Driver::Pill @driver={{resource-relation @resource "driver"}} @titleFallback={{n-a @resource.driver_name}} />
+                </div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "resource.vehicle"}}</div>
-                <div class="field-value">{{n-a @resource.vehicle_name}}</div>
+                <div class="field-value">
+                    <Vehicle::Pill @vehicle={{resource-relation @resource "vehicle"}} @titleFallback={{n-a @resource.vehicle_name}} />
+                </div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">{{t "fuel-report.fields.odometer"}}</div>

package/addon/components/fuel-report/form.hbs

@@ -4,6 +4,7 @@
             <InputGroup @name={{t "fuel-report.fields.reporter"}}>
                 <ModelSelect
                     @modelName="user"
+                    @selectedItemComponent={{component "select-option/user" compact=true}}
                     @selectedModel={{@resource.reporter}}
                     @placeholder={{t "fuel-report.fields.select-reporter"}}
                     @triggerClass="form-select form-input"
@@ -13,12 +14,13 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::User @option={{model}} />
                 </ModelSelect>
             </InputGroup>
             <InputGroup @name={{t "resource.driver"}}>
                 <ModelSelect
                     @modelName="driver"
+                    @selectedItemComponent={{component "select-option/driver" compact=true}}
                     @selectedModel={{@resource.driver}}
                     @placeholder={{t "common.select-field" field=(t "resource.driver")}}
                     @triggerClass="form-select form-input"
@@ -29,12 +31,13 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.name}}
+                    <SelectOption::Driver @option={{model}} />
                 </ModelSelect>
             </InputGroup>
             <InputGroup @name={{t "resource.vehicle"}}>
                 <ModelSelect
                     @modelName="vehicle"
+                    @selectedItemComponent={{component "select-option/vehicle" compact=true}}
                     @selectedModel={{@resource.vehicle}}
                     @placeholder={{t "common.select-field" field=(t "resource.vehicle")}}
                     @triggerClass="form-select form-input"
@@ -45,7 +48,7 @@
                     @disabled={{cannot-write @resource}}
                     as |model|
                 >
-                    {{model.display_name}}
+                    <SelectOption::Vehicle @option={{model}} />
                 </ModelSelect>
             </InputGroup>
             <InputGroup @name={{t "common.status"}}>

package/addon/components/fuel-report/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @fuelReport @resource)}}
+    @resourceType="fuel-report"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/fuel-report/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @fuelReport @resource)}} @resourceType="fuel-report" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/fuel-transaction-status.hbs

@@ -0,0 +1 @@
+<Badge @status={{this.status.tone}} @text={{this.status.label}} @disableHumanize={{true}} />

package/addon/components/fuel-transaction-status.js

@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+import { transactionStatuses } from '../utils/fuel-transaction';
+
+export default class FuelTransactionStatusComponent extends Component {
+    get status() {
+        return transactionStatuses[this.args.status ?? this.args.value] ?? { label: 'Unknown', tone: 'default' };
+    }
+}

package/addon/components/geofence-map.hbs

@@ -0,0 +1,19 @@
+<LeafletMap
+    class="h-80 w-full rounded-md border border-gray-200 shadow-md dark:border-gray-700"
+    @lat={{get this.center "0"}}
+    @lng={{get this.center "1"}}
+    @zoom={{12}}
+    @zoomControl={{true}}
+    @onLoad={{this.didLoadMap}}
+    ...attributes
+    as |layers|
+>
+    <layers.tile @url={{(leaflet-tile-url)}} />
+    {{#each this.polygons as |locations index|}}
+        <layers.polygon @id={{concat @resource.id "-" index}} @record={{@resource}} @locations={{locations}} @fillColor={{@resource.color}} @color={{@resource.stroke_color}} as |polygon|>
+            {{#if (eq index 0)}}
+                <polygon.tooltip @permanent={{true}} @sticky={{true}}>{{@label}}</polygon.tooltip>
+            {{/if}}
+        </layers.polygon>
+    {{/each}}
+</LeafletMap>

package/addon/components/geofence-map.js

@@ -0,0 +1,83 @@
+import Component from '@glimmer/component';
+import { action, get } from '@ember/object';
+import { later, cancel } from '@ember/runloop';
+
+/**
+ * A service area's or zone's boundary on a map, fitted to the whole shape.
+ *
+ * The details panels open inside a sliding overlay, so Leaflet first measures
+ * a container with no size: the tiles stay grey and the view is centred on
+ * the wrong point. The map is re-measured and re-fitted once the overlay has
+ * settled, and again whenever its container changes size.
+ */
+export default class GeofenceMapComponent extends Component {
+    map = null;
+    resizeObserver = null;
+    timer = null;
+
+    /** Each polygon's outer ring as Leaflet `[lat, lng]` pairs. */
+    get polygons() {
+        const border = this.args.resource ? get(this.args.resource, 'border') : null;
+        const type = border?.type;
+        const coordinates = border?.coordinates ?? [];
+        const rings = type === 'MultiPolygon' ? coordinates.map((polygon) => polygon?.[0] ?? []) : [coordinates[0] ?? []];
+
+        return rings.map((ring) => ring.filter((pair) => Array.isArray(pair) && pair.length >= 2).map(([lng, lat]) => [lat, lng])).filter((ring) => ring.length > 0);
+    }
+
+    /** `[[south, west], [north, east]]` around every polygon, or null. */
+    get bounds() {
+        const points = this.polygons.flat();
+        if (!points.length) {
+            return null;
+        }
+
+        const lats = points.map(([lat]) => lat);
+        const lngs = points.map(([, lng]) => lng);
+
+        return [
+            [Math.min(...lats), Math.min(...lngs)],
+            [Math.max(...lats), Math.max(...lngs)],
+        ];
+    }
+
+    get center() {
+        const bounds = this.bounds;
+        if (!bounds) {
+            return [0, 0];
+        }
+
+        return [(bounds[0][0] + bounds[1][0]) / 2, (bounds[0][1] + bounds[1][1]) / 2];
+    }
+
+    @action didLoadMap({ target: map }) {
+        this.map = map;
+        this.fit();
+        requestAnimationFrame(() => this.fit());
+        this.timer = later(this, this.fit, 350);
+
+        if (typeof ResizeObserver !== 'undefined' && typeof map.getContainer === 'function') {
+            this.resizeObserver = new ResizeObserver(() => this.fit());
+            this.resizeObserver.observe(map.getContainer());
+        }
+    }
+
+    fit() {
+        if (this.isDestroying || this.isDestroyed || !this.map) {
+            return;
+        }
+
+        this.map.invalidateSize();
+
+        if (this.bounds) {
+            this.map.fitBounds(this.bounds, { padding: [24, 24] });
+        }
+    }
+
+    willDestroy() {
+        super.willDestroy(...arguments);
+        cancel(this.timer);
+        this.resizeObserver?.disconnect();
+        this.map = null;
+    }
+}

package/addon/components/inspection-field/form.hbs

@@ -0,0 +1,103 @@
+<div class="inspection-field-form space-y-3" ...attributes>
+    <InputGroup @name={{t "inspection.field.label"}}>
+        <input type="text" value={{this.field.label}} class="w-full form-input" placeholder={{t "inspection.field.label-placeholder"}} disabled={{this.isDisabled}} {{on "input" this.setLabel}} />
+    </InputGroup>
+
+    <InputGroup @name={{t "inspection.field.name"}} @helpText={{t "inspection.field.name-help"}}>
+        <input type="text" value={{this.field.name}} class="w-full form-input font-mono" placeholder={{t "inspection.field.name-placeholder"}} disabled={{this.isDisabled}} {{on "input" this.setName}} />
+    </InputGroup>
+
+    <InputGroup @name={{t "inspection.field.type"}}>
+        <select class="form-select w-full" disabled={{this.isDisabled}} {{on "change" this.setType}}>
+            {{#each this.fieldTypes as |fieldType|}}
+                <option value={{fieldType}} selected={{eq this.field.type fieldType}}>
+                    {{t (concat "inspection.field-type." fieldType)}}
+                </option>
+            {{/each}}
+        </select>
+    </InputGroup>
+
+    <InputGroup @name={{t "inspection.field.description"}}>
+        <textarea class="w-full form-input" rows="2" placeholder={{t "inspection.field.description-placeholder"}} disabled={{this.isDisabled}} {{on "input" this.setDescription}}>{{this.field.description}}</textarea>
+    </InputGroup>
+
+    <InputGroup @name={{t "inspection.field.help-text"}}>
+        <input type="text" value={{this.field.help_text}} class="w-full form-input" placeholder={{t "inspection.field.help-text-placeholder"}} disabled={{this.isDisabled}} {{on "input" this.setHelpText}} />
+    </InputGroup>
+
+    <div class="flex flex-col space-y-3">
+        <Toggle @isToggled={{this.field.required}} @onToggle={{this.setRequired}} @label={{t "inspection.field.required"}} @disabled={{this.isDisabled}} />
+        <Toggle @isToggled={{this.field.editable}} @onToggle={{this.setEditable}} @label={{t "inspection.field.editable"}} @disabled={{this.isDisabled}} />
+    </div>
+
+    {{#if this.hasOptions}}
+        <InputGroup @name={{t "inspection.field.options"}}>
+            <div class="space-y-2">
+                {{#each this.options as |option index|}}
+                    <div class="flex flex-row items-center space-x-2">
+                        <input type="text" value={{option}} class="w-full form-input" disabled={{this.isDisabled}} {{on "input" (fn this.updateOption index)}} />
+                        <Button @type="danger" @icon="trash" @size="xs" @disabled={{this.isDisabled}} @onClick={{fn this.removeOption index}} />
+                    </div>
+                {{else}}
+                    <div class="text-xs text-gray-500">{{t "inspection.field.no-options"}}</div>
+                {{/each}}
+                <div class="flex flex-row items-center space-x-2">
+                    <input type="text" value={{this.newOption}} class="w-full form-input" placeholder={{t "inspection.field.option-placeholder"}} disabled={{this.isDisabled}} {{on "input" this.setNewOption}} />
+                    <Button @icon="plus" @size="xs" @text={{t "inspection.field.add-option"}} @disabled={{this.isDisabled}} @onClick={{this.addOption}} />
+                </div>
+            </div>
+        </InputGroup>
+    {{/if}}
+
+    {{#if this.isNumber}}
+        <InputGroup @name={{t "inspection.field.unit"}} @helpText={{t "inspection.field.unit-help"}}>
+            <input type="text" value={{this.meta.unit}} class="w-full form-input" placeholder={{t "inspection.field.unit-placeholder"}} disabled={{this.isDisabled}} {{on "input" this.setUnit}} />
+        </InputGroup>
+        <Toggle @isToggled={{this.isOdometer}} @onToggle={{this.toggleOdometerRole}} @label={{t "inspection.field.odometer-role"}} @helpText={{t "inspection.field.odometer-role-help"}} @disabled={{this.isDisabled}} />
+    {{/if}}
+
+    {{#if this.isPassFail}}
+        <div class="rounded-lg border border-gray-200 dark:border-gray-700 p-3 space-y-3">
+            <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">{{t "inspection.field.on-fail"}}</div>
+            <div class="text-xs text-gray-500">{{t "inspection.field.on-fail-help"}}</div>
+
+            <InputGroup @name={{t "inspection.field.default-severity"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.severityOptions}}
+                        @selected={{this.meta.severity}}
+                        @onChange={{this.setSeverity}}
+                        @triggerClass="form-select form-input"
+                        @renderInPlace={{true}}
+                        @disabled={{this.isDisabled}}
+                        as |severity|
+                    >
+                        {{t (concat "inspection.severity." severity)}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <Toggle @isToggled={{this.meta.require_photo_on_fail}} @onToggle={{this.setRequirePhotoOnFail}} @label={{t "inspection.field.require-photo-on-fail"}} @disabled={{this.isDisabled}} />
+            <Toggle @isToggled={{this.meta.require_comment_on_fail}} @onToggle={{this.setRequireCommentOnFail}} @label={{t "inspection.field.require-comment-on-fail"}} @disabled={{this.isDisabled}} />
+            <Toggle @isToggled={{this.meta.unsafe_on_fail}} @onToggle={{this.setUnsafeOnFail}} @label={{t "inspection.field.unsafe-on-fail"}} @helpText={{t "inspection.field.unsafe-on-fail-help"}} @disabled={{this.isDisabled}} />
+
+            <InputGroup @name={{t "inspection.field.instructions"}}>
+                <textarea class="w-full form-input" rows="3" placeholder={{t "inspection.field.instructions-placeholder"}} disabled={{this.isDisabled}} {{on "input" this.setInstructions}}>{{this.meta.instructions}}</textarea>
+            </InputGroup>
+        </div>
+    {{/if}}
+
+    <InputGroup @name={{t "inspection.field.column-span"}}>
+        <div class="flex flex-row items-center space-x-2">
+            {{#each this.colSpanOptions as |size|}}
+                <Button
+                    @type={{if (eq this.meta.colSpan size) "primary" "default"}}
+                    @size="xs"
+                    @text={{size}}
+                    @disabled={{this.isDisabled}}
+                    @onClick={{fn this.setColSpan size}}
+                />
+            {{/each}}
+        </div>
+    </InputGroup>
+</div>

package/addon/components/inspection-field/form.js

@@ -0,0 +1,211 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { INSPECTION_FIELD_TYPES, INSPECTION_SEVERITIES, componentForFieldType, isOptionFieldType } from '../../utils/inspection-field-types';
+
+/**
+ * The editor for one inspection field.
+ *
+ * It is the platform's custom-field editor plus what an inspection needs: the
+ * eleven types an inspection form may be built from, and — only for
+ * `pass-fail` — the *On fail* rules the driver app enforces and the server
+ * re-checks (`InspectionSubmitter::normalizeValue()`).
+ *
+ * The field is a plain object owned by the builder's draft, not an Ember Data
+ * record: a form is laid out before the form record exists and the whole
+ * structure is written on the first save. Nothing here mutates `@field` — each
+ * change builds a new object and hands it to `@onChange`, so no write ever
+ * happens during render.
+ */
+export default class InspectionFieldFormComponent extends Component {
+    @tracked newOption = '';
+
+    fieldTypes = INSPECTION_FIELD_TYPES;
+    severityOptions = INSPECTION_SEVERITIES;
+    colSpanOptions = [1, 2, 3];
+
+    /**
+     * The field being edited, held locally so an edit re-renders.
+     *
+     * Invoked directly by the builder the field arrives as `@field`; rendered
+     * inside the resource context panel it arrives on the overlay
+     * definition's shared `state`, which is a plain object — mutating it
+     * would never re-render, so the component owns a tracked copy and writes
+     * through on every change. That shared handle is what the builder reads
+     * back when the author saves.
+     */
+    @tracked localField = this.args.field ?? this.args.overlay?.state?.field ?? {};
+
+    get field() {
+        return this.localField;
+    }
+
+    get isDisabled() {
+        return this.args.disabled ?? this.args.overlay?.disabled ?? false;
+    }
+
+    get meta() {
+        const meta = this.field.meta;
+        return meta && typeof meta === 'object' ? meta : {};
+    }
+
+    get isPassFail() {
+        return this.field.type === 'pass-fail';
+    }
+
+    get isNumber() {
+        return this.field.type === 'number';
+    }
+
+    get hasOptions() {
+        return isOptionFieldType(this.field.type);
+    }
+
+    get options() {
+        return Array.isArray(this.field.options) ? this.field.options : [];
+    }
+
+    get isOdometer() {
+        return this.meta.role === 'odometer';
+    }
+
+    /** Every change to the field goes through here, and only from an action. */
+    change(attributes) {
+        const next = { ...this.field, ...attributes };
+        this.localField = next;
+
+        if (this.args.overlay?.state) {
+            this.args.overlay.state.field = next;
+        }
+
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(next);
+        }
+    }
+
+    changeMeta(attributes) {
+        this.change({ meta: { ...this.meta, ...attributes } });
+    }
+
+    /**
+     * The name a label derives to. The label names the field; this machine
+     * name follows it until the author types one of their own.
+     *
+     * Not `dasherize`: it only rewrites spaces and underscores, so a label
+     * like "Sidewall condition, offside rear" kept its comma and produced
+     * `sidewall-condition,-offside-rear`. The name is an identifier — it
+     * travels as an item result's `item_key` and is what a report groups on —
+     * so anything that is not a letter or a digit becomes a separator, and
+     * runs of separators collapse.
+     */
+    slugify(value) {
+        return String(value ?? '')
+            .trim()
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+    }
+
+    @action setLabel(event) {
+        const label = event.target.value;
+        const derived = this.slugify(this.field.label);
+        const current = (this.field.name ?? '').trim();
+
+        // The name follows the label until an author types their own.
+        const follows = current === '' || current === derived;
+
+        this.change({
+            label,
+            name: follows ? this.slugify(label) : current,
+        });
+    }
+
+    @action setName(event) {
+        this.change({ name: this.slugify(event.target.value) });
+    }
+
+    @action setDescription(event) {
+        this.change({ description: event.target.value });
+    }
+
+    @action setHelpText(event) {
+        this.change({ help_text: event.target.value });
+    }
+
+    @action setType(event) {
+        const type = event.target.value;
+        const attributes = { type, component: componentForFieldType(type) };
+
+        // A field that has just become pass-fail needs the defaults its rules
+        // are read from; one that has stopped being pass-fail keeps its meta,
+        // because the author may be switching back.
+        if (type === 'pass-fail' && this.meta.severity === undefined) {
+            attributes.meta = { ...this.meta, severity: 'medium', require_photo_on_fail: false, require_comment_on_fail: false, unsafe_on_fail: false };
+        }
+
+        this.change(attributes);
+    }
+
+    @action setRequired(required) {
+        this.change({ required: Boolean(required) });
+    }
+
+    @action setEditable(editable) {
+        this.change({ editable: Boolean(editable) });
+    }
+
+    @action setColSpan(colSpan) {
+        this.changeMeta({ colSpan });
+    }
+
+    @action setUnit(event) {
+        this.changeMeta({ unit: event.target.value });
+    }
+
+    @action toggleOdometerRole(isOdometer) {
+        this.changeMeta({ role: isOdometer ? 'odometer' : null });
+    }
+
+    @action setSeverity(severity) {
+        this.changeMeta({ severity });
+    }
+
+    @action setRequirePhotoOnFail(value) {
+        this.changeMeta({ require_photo_on_fail: Boolean(value) });
+    }
+
+    @action setRequireCommentOnFail(value) {
+        this.changeMeta({ require_comment_on_fail: Boolean(value) });
+    }
+
+    @action setUnsafeOnFail(value) {
+        this.changeMeta({ unsafe_on_fail: Boolean(value) });
+    }
+
+    @action setInstructions(event) {
+        this.changeMeta({ instructions: event.target.value });
+    }
+
+    @action setNewOption(event) {
+        this.newOption = event.target.value;
+    }
+
+    @action addOption() {
+        const option = this.newOption.trim();
+        if (option === '') {
+            return;
+        }
+
+        this.newOption = '';
+        this.change({ options: [...this.options, option] });
+    }
+
+    @action updateOption(index, event) {
+        const value = event.target.value;
+        this.change({ options: this.options.map((option, optionIndex) => (optionIndex === index ? value : option)) });
+    }
+
+    @action removeOption(index) {
+        this.change({ options: this.options.filter((_, optionIndex) => optionIndex !== index) });
+    }
+}