@fleetbase/fleetops-engine 0.6.65 → 0.6.66

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

@@ -0,0 +1,158 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { INSPECTION_SEVERITIES } from '../../utils/inspection-field-types';
+import { answerState, ROOMY_FIELD_TYPES } from '../../utils/inspection-answers';
+
+/**
+ * One stored answer, read-only — what the record's Overview shows.
+ *
+ * The submission resource hands the console a value already projected: a file
+ * value resolved to `{ id, url, filename, content_type }`, and a pass-fail
+ * answer as an object with its photos resolved the same way. This renders
+ * that, whichever shape the value arrived in; it never fetches and never
+ * writes.
+ */
+export default class InspectionFieldValueComponent extends Component {
+    @service intl;
+
+    get field() {
+        return this.args.field ?? {};
+    }
+
+    get meta() {
+        const meta = this.field.meta;
+        return meta && typeof meta === 'object' ? meta : {};
+    }
+
+    get label() {
+        return this.field.label || this.field.name || this.intl.t('inspection.builder.untitled-field');
+    }
+
+    get answerState() {
+        return answerState(this.field, this.args.value);
+    }
+
+    /** Pass, fail and N/A all read as the same card. */
+    get isResult() {
+        return this.isPassFail;
+    }
+
+    /** A fail shows what it was marked with; a pass has nothing to add. */
+    get hasResultMeta() {
+        return this.answerState === 'fail' && Boolean(this.severityLabel || this.answer.unsafe);
+    }
+
+    get hasResultDetail() {
+        return this.hasResultMeta || Boolean(this.answer.comments) || this.photos.length > 0;
+    }
+
+    get isDefect() {
+        return this.isPassFail && this.answerState === 'fail';
+    }
+
+    /** Whether anything was actually answered, so an empty one can say so. */
+    get isAnswered() {
+        const value = this.args.value;
+
+        return value !== null && value !== undefined && String(value).trim() !== '';
+    }
+
+    get isRoomy() {
+        return ROOMY_FIELD_TYPES.includes(this.field.type);
+    }
+
+    get isStackedBand() {
+        return this.field.type === 'textarea';
+    }
+
+    get isTargeted() {
+        return Boolean(this.field.uuid) && this.args.targetId === this.field.uuid;
+    }
+
+    /** A failure's comment and photos, shown only when there is something to show. */
+    get hasDefectDetail() {
+        return this.isPassFail && (Boolean(this.answer.comments) || this.photos.length > 0);
+    }
+
+    get isPassFail() {
+        return this.field.type === 'pass-fail';
+    }
+
+    get isFile() {
+        return this.field.type === 'file-upload' || this.field.type === 'signature';
+    }
+
+    get isBoolean() {
+        return this.field.type === 'boolean';
+    }
+
+    get answer() {
+        const value = this.args.value;
+        if (value && typeof value === 'object' && !Array.isArray(value)) {
+            return { ...value, photos: Array.isArray(value.photos) ? value.photos : [] };
+        }
+
+        if (typeof value === 'boolean') {
+            return { passed: value, not_applicable: false, photos: [] };
+        }
+
+        return { passed: null, not_applicable: false, photos: [] };
+    }
+
+    get resultLabel() {
+        const answer = this.answer;
+        if (answer.not_applicable === true) {
+            return 'inspection.answer.not-applicable';
+        }
+
+        if (answer.passed === false) {
+            return 'inspection.answer.fail';
+        }
+
+        if (answer.passed === true) {
+            return 'inspection.answer.pass';
+        }
+
+        return 'inspection.answer.unanswered';
+    }
+
+    get resultStatus() {
+        const answer = this.answer;
+        if (answer.not_applicable === true) {
+            return 'info';
+        }
+
+        return answer.passed === false ? 'failed' : 'passed';
+    }
+
+    /** The severity's own label, or the raw value when it is not one of ours. */
+    get severityLabel() {
+        const severity = this.answer.severity;
+        return INSPECTION_SEVERITIES.includes(severity) ? `inspection.severity.${severity}` : null;
+    }
+
+    get photos() {
+        return this.answer.photos.map((photo) => this.#describeFile(photo));
+    }
+
+    get file() {
+        return this.#describeFile(this.args.value);
+    }
+
+    get booleanValue() {
+        const value = this.args.value;
+        return value === true || value === 'true' || value === 1 || value === '1';
+    }
+
+    #describeFile(value) {
+        if (value && typeof value === 'object') {
+            return { reference: value.id, url: value.url, filename: value.filename };
+        }
+
+        if (typeof value !== 'string' || value === '') {
+            return { reference: null, url: null, filename: null };
+        }
+
+        return { reference: value, url: value.startsWith('http') ? value : null, filename: null };
+    }
+}

package/addon/components/inspection-flyout.hbs

@@ -0,0 +1,34 @@
+{{#if this.mount}}
+    {{#in-element this.mount insertBefore=null}}
+        {{#if this.isSheet}}
+            <div class="inspection-flyout-backdrop" aria-hidden="true"></div>
+        {{/if}}
+        <div
+            class="inspection-flyout inspection-flyout--{{this.presentation}}"
+            role="dialog"
+            aria-modal="false"
+            aria-label={{@title}}
+            tabindex="-1"
+            {{inspection-flyout this.anchor presentation=this.presentation focus=this.focusTarget onDismiss=this.dismiss}}
+        >
+            {{#unless this.isSheet}}
+                <span class="inspection-flyout__caret" aria-hidden="true"></span>
+            {{/unless}}
+            <div class="inspection-flyout__head">
+                <span class="inspection-flyout__title">{{@title}}</span>
+                <button type="button" class="inspection-flyout__close" aria-label={{t "inspection.flyout.close"}} {{on "click" (fn this.dismiss "close")}}>
+                    <FaIcon @icon="times" />
+                </button>
+            </div>
+            <div class="inspection-flyout__body">
+                {{yield}}
+            </div>
+            <div class="inspection-flyout__foot">
+                {{#if @note}}
+                    <span class="inspection-flyout__note">{{@note}}</span>
+                {{/if}}
+                <Button @type="primary" @size="sm" @text={{t "inspection.flyout.done"}} @onClick={{fn this.dismiss "done"}} />
+            </div>
+        </div>
+    {{/in-element}}
+{{/if}}

package/addon/components/inspection-flyout.js

@@ -0,0 +1,66 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+/**
+ * Below this sheet width a floating panel would crowd the page and fight the
+ * on-screen keyboard, so the same content slides up as a bottom sheet.
+ */
+const SHEET_BREAKPOINT = 520;
+
+/**
+ * The panel a failed check opens, anchored to its field.
+ *
+ * It renders outside the field so the layout never changes when a check
+ * fails. Floating, it lives in the sheet's own flyout layer, so it scrolls
+ * with its field and is never clipped by the sheet's rounded card. As a bottom
+ * sheet on a phone it lives in the application's root wormhole instead,
+ * because a fixed panel inside a container-query element would be pinned to
+ * that element rather than to the screen.
+ *
+ * It is non-modal and traps nothing. It closes on Done, on its close button,
+ * on Escape, and on a press anywhere outside it and its field — and closing is
+ * always safe, because every answer inside it is saved as it is typed.
+ */
+export default class InspectionFlyoutComponent extends Component {
+    /** Decided once, when it opens: a panel should not change shape under the user. */
+    presentation = this.measurePresentation();
+
+    get anchor() {
+        return document.getElementById(`inspection-field-${this.args.fieldId}`);
+    }
+
+    get isSheet() {
+        return this.presentation === 'sheet';
+    }
+
+    get mount() {
+        if (this.isSheet) {
+            return document.getElementById('application-root-wormhole') ?? document.body;
+        }
+
+        return this.anchor?.closest('.inspection-sheet')?.querySelector(':scope > .inspection-sheet__flyouts') ?? null;
+    }
+
+    /**
+     * Where focus lands on opening. Floating, it is the comment — usually the
+     * first thing a failure still owes. On a phone it is the panel itself:
+     * focusing the comment would throw the keyboard up over the sheet before
+     * the inspector has read it.
+     */
+    get focusTarget() {
+        return this.isSheet ? true : '[data-flyout-focus]';
+    }
+
+    measurePresentation() {
+        const anchor = document.getElementById(`inspection-field-${this.args.fieldId}`);
+        const width = anchor?.closest('.inspection-sheet')?.clientWidth ?? window.innerWidth;
+
+        return width < SHEET_BREAKPOINT ? 'sheet' : 'floating';
+    }
+
+    @action dismiss(reason) {
+        if (typeof this.args.onClose === 'function') {
+            this.args.onClose(reason);
+        }
+    }
+}

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

@@ -0,0 +1,88 @@
+<div class="inspection-form-builder" ...attributes>
+    <div class="flex flex-row items-center justify-between mb-4">
+        <div class="text-xs text-gray-500">{{t "inspection.builder.help"}}</div>
+        <Button @type="primary" @icon="square-plus" @size="sm" @text={{t "inspection.builder.new-group"}} @disabled={{@disabled}} @onClick={{this.addGroup}} />
+    </div>
+
+    {{#if this.load.isRunning}}
+        <div class="p-6 flex items-center justify-center">
+            <Spinner @loadingMessage={{t "inspection.builder.loading"}} class="text-sm dark:text-gray-100 flex items-center space-x-2" />
+        </div>
+    {{else}}
+        <div class="space-y-4">
+            {{#each this.groups key="uuid" as |group groupIndex|}}
+                <ContentPanel @title={{or group.name (t "inspection.builder.untitled-group")}} @open={{true}} @wrapperClass="bordered">
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 no-input-group-padding text-xs mb-3">
+                        <InputGroup @name={{t "inspection.builder.group-name"}}>
+                            <input type="text" class="w-full form-input" placeholder={{t "inspection.builder.group-name-placeholder"}} disabled={{@disabled}} {{did-insert (fn this.setInitialValue group.name)}} {{on "input" (fn this.setGroupName group.uuid)}} />
+                        </InputGroup>
+                        <InputGroup @name={{t "inspection.builder.group-description"}}>
+                            <input type="text" class="w-full form-input" placeholder={{t "inspection.builder.group-description-placeholder"}} disabled={{@disabled}} {{did-insert (fn this.setInitialValue group.description)}} {{on "input" (fn this.setGroupDescription group.uuid)}} />
+                        </InputGroup>
+                    </div>
+
+                    <div class="flex flex-row items-center justify-between mb-3">
+                        <div class="flex flex-row items-center space-x-2">
+                            <Button @type="primary" @icon="square-plus" @size="xs" @text={{t "inspection.builder.new-field"}} @disabled={{@disabled}} @onClick={{fn this.addField group}} />
+                            <span class="text-xs text-gray-500">{{t "inspection.builder.grid-size"}}</span>
+                            {{#each this.gridSizeOptions as |size|}}
+                                <Button
+                                    @type={{if (eq (or group.meta.grid_size 1) size) "primary" "default"}}
+                                    @size="xs"
+                                    @text={{size}}
+                                    @disabled={{@disabled}}
+                                    @onClick={{fn this.setGridSize group size}}
+                                />
+                            {{/each}}
+                        </div>
+                        <div class="flex flex-row items-center space-x-2">
+                            <Button @icon="arrow-up" @size="xs" @disabled={{@disabled}} @helpText={{t "inspection.builder.move-up"}} @onClick={{fn this.moveGroup groupIndex -1}} />
+                            <Button @icon="arrow-down" @size="xs" @disabled={{@disabled}} @helpText={{t "inspection.builder.move-down"}} @onClick={{fn this.moveGroup groupIndex 1}} />
+                            <Button @type="danger" @icon="trash" @size="xs" @disabled={{@disabled}} @onClick={{fn this.deleteGroup group}} />
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-1 lg:grid-cols-{{or group.meta.grid_size 1}} gap-2">
+                        {{#each group.fields key="uuid" as |field fieldIndex|}}
+                            {{!
+                                The name reads first, on its own line. Sharing a
+                                row with four buttons left every label truncated
+                                to a few characters, which is unusable for
+                                keeping track of what is what while building.
+                            }}
+                            <div class="rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2 flex flex-col space-y-2">
+                                <div class="flex items-center space-x-2 min-w-0">
+                                    <div class="font-semibold text-sm truncate">{{or field.label (t "inspection.builder.untitled-field")}}</div>
+                                    {{#if field.required}}
+                                        <span class="text-red-500 text-xs flex-shrink-0">*</span>
+                                    {{/if}}
+                                    <div class="custom-field-custom-field-type-pill rounded-lg bg-gray-300 dark:bg-gray-700 text-black dark:text-gray-300 px-1.5 py-0.5 text-xs font-mono flex-shrink-0">
+                                        {{field.type}}
+                                    </div>
+                                </div>
+                                <div class="flex flex-row items-center justify-end space-x-1">
+                                    <Button @icon="arrow-up" @size="xs" @disabled={{@disabled}} @helpText={{t "inspection.builder.move-up"}} @onClick={{fn this.moveField group fieldIndex -1}} />
+                                    <Button @icon="arrow-down" @size="xs" @disabled={{@disabled}} @helpText={{t "inspection.builder.move-down"}} @onClick={{fn this.moveField group fieldIndex 1}} />
+                                    <Button @icon="pencil" @size="xs" @disabled={{@disabled}} @onClick={{fn this.editField group field}} />
+                                    <Button @type="danger" @icon="trash" @size="xs" @disabled={{@disabled}} @onClick={{fn this.deleteField group field}} />
+                                </div>
+                            </div>
+                        {{else}}
+                            <div class="text-xs text-gray-500">{{t "inspection.builder.no-fields"}}</div>
+                        {{/each}}
+                    </div>
+                </ContentPanel>
+            {{else}}
+                <div class="min-h-24 p-4">
+                    <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
+                        <div class="text-center">
+                            <FaIcon @icon="layer-group" @size="2x" class="text-gray-400 mb-2" />
+                            <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">{{t "inspection.builder.empty-title"}}</div>
+                            <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">{{t "inspection.builder.empty-description"}}</div>
+                        </div>
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    {{/if}}
+</div>

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

@@ -0,0 +1,211 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { next } from '@ember/runloop';
+import { task } from 'ember-concurrency';
+import inlineTask from '@fleetbase/ember-core/utils/inline-task';
+import { createField, createFieldGroup } from '../../utils/inspection-form-structure';
+
+/**
+ * The form builder: field groups, each with a grid size and its own typed
+ * fields.
+ *
+ * A form is laid out before the form record exists, so the structure is a
+ * draft of plain objects rather than Ember Data records — the `inspection-form`
+ * model belongs to `@fleetbase/fleetops-data` and declares no attribute for it.
+ * The controller posts it with the save, and `InspectionFormSync` writes it in
+ * one go.
+ *
+ * **The draft lives on the controller, not here.** `ContentPanel` unrenders its
+ * body when it is collapsed, so this component is destroyed and rebuilt every
+ * time the author folds the builder away; state held here went with it and the
+ * form came back empty. So the component is controlled: it renders `@groups`
+ * and reports every change through `@onChange`, and owns nothing that a
+ * collapse can take.
+ *
+ * Nothing here mutates a group or a field in place. Every change builds new
+ * objects and assigns them from an action — never during render.
+ */
+export default class InspectionFormBuilderComponent extends Component {
+    @service inspectionFormActions;
+    @service modalsManager;
+    @service resourceContextPanel;
+    @service notifications;
+    @service intl;
+
+    gridSizeOptions = [1, 2, 3];
+
+    /** The draft, owned by the controller so it survives a panel collapse. */
+    get groups() {
+        return Array.isArray(this.args.groups) ? this.args.groups : [];
+    }
+
+    constructor() {
+        super(...arguments);
+        next(() => {
+            if (this.isDestroying || this.isDestroyed) {
+                return;
+            }
+
+            this.load.perform();
+        });
+    }
+
+    get isDraft() {
+        const resource = this.args.resource;
+        return !resource?.id || resource?.isNew === true;
+    }
+
+    @task *load() {
+        // A form that does not exist yet has nothing to read back.
+        if (this.isDraft) {
+            return;
+        }
+
+        // Already held by the controller — either loaded once before, or
+        // carrying edits the author has not saved. Re-reading here would
+        // throw those away every time the panel was reopened.
+        if (Array.isArray(this.args.groups)) {
+            return;
+        }
+
+        try {
+            this.write(yield this.inspectionFormActions.loadStructure(this.args.resource));
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+
+    /** The one place the draft is announced. The controller stores it. */
+    write(groups) {
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(groups);
+        }
+    }
+
+    replaceGroup(uuid, attributes) {
+        this.write(this.groups.map((group) => (group.uuid === uuid ? { ...group, ...attributes } : group)));
+    }
+
+    /**
+     * Paints an input's starting value without binding it.
+     *
+     * The iteration is keyed, so the node survives an edit — but a bound
+     * `value` is rewritten on every render, and assigning to `value` mid-word
+     * moves the caret to the end. Setting it once on insert leaves the DOM to
+     * own the text, and `input` reports each change back.
+     */
+    @action setInitialValue(value, element) {
+        element.value = value ?? '';
+    }
+
+    @action addGroup() {
+        this.write([...this.groups, createFieldGroup({ name: this.intl.t('inspection.builder.untitled-group'), order: this.groups.length + 1 })]);
+    }
+
+    @action setGroupName(uuid, event) {
+        this.replaceGroup(uuid, { name: event.target.value });
+    }
+
+    @action setGroupDescription(uuid, event) {
+        this.replaceGroup(uuid, { description: event.target.value });
+    }
+
+    @action setGridSize(group, size) {
+        this.replaceGroup(group.uuid, { meta: { ...(group.meta ?? {}), grid_size: size } });
+    }
+
+    @action moveGroup(index, offset) {
+        const target = index + offset;
+        if (target < 0 || target >= this.groups.length) {
+            return;
+        }
+
+        const groups = [...this.groups];
+        const [moved] = groups.splice(index, 1);
+        groups.splice(target, 0, moved);
+        this.write(groups);
+    }
+
+    @action deleteGroup(group) {
+        this.modalsManager.confirm({
+            title: this.intl.t('inspection.builder.delete-group-title'),
+            body: this.intl.t('inspection.builder.delete-group-body'),
+            acceptButtonText: this.intl.t('inspection.builder.delete'),
+            acceptButtonType: 'danger',
+            confirm: (modal) => {
+                this.write(this.groups.filter((candidate) => candidate.uuid !== group.uuid));
+                modal.done();
+            },
+        });
+    }
+
+    @action addField(group) {
+        this.editField(group, createField('pass-fail', { label: this.intl.t('inspection.builder.untitled-field'), order: (group.fields?.length ?? 0) + 1 }), true);
+    }
+
+    /**
+     * The field editor opens as a right-side overlay over the form's own
+     * panel rather than as a modal: a modal covers the form the author is
+     * building, and the two are read together. `xs` keeps it narrower than
+     * the form panel behind it, so the form stays visible alongside.
+     *
+     * The field is a plain object in the builder's draft, so there is nothing
+     * for the panel's default save to persist — `state` is the handle both
+     * sides hold, and the inline task applies whatever the editor last
+     * produced when the author saves.
+     */
+    @action editField(group, field, isNew = false) {
+        const state = { field };
+
+        this.resourceContextPanel.open({
+            content: 'inspection-field/form',
+            title: isNew ? this.intl.t('inspection.builder.new-field') : this.intl.t('inspection.builder.edit-field', { label: field.label }),
+            size: 'xs',
+            panelContentClass: 'py-2 px-4',
+            // The field is a plain object, not an Ember Data record. Without
+            // this the header's save falls through to `cannot-write` on a
+            // resource it cannot resolve, which denies by default and leaves
+            // the button disabled for good.
+            pojoResource: true,
+            state,
+            disabled: this.args.disabled,
+            saveTask: inlineTask((resource, { overlay } = {}) => {
+                this.applyField(group, state.field, isNew);
+                this.resourceContextPanel.close(overlay?.id);
+            }),
+        });
+    }
+
+    applyField(group, field, isNew) {
+        const fields = group.fields ?? [];
+        const nextFields = isNew ? [...fields, field] : fields.map((candidate) => (candidate.uuid === field.uuid ? field : candidate));
+
+        this.replaceGroup(group.uuid, { fields: nextFields });
+    }
+
+    @action moveField(group, index, offset) {
+        const fields = [...(group.fields ?? [])];
+        const target = index + offset;
+        if (target < 0 || target >= fields.length) {
+            return;
+        }
+
+        const [moved] = fields.splice(index, 1);
+        fields.splice(target, 0, moved);
+        this.replaceGroup(group.uuid, { fields });
+    }
+
+    @action deleteField(group, field) {
+        this.modalsManager.confirm({
+            title: this.intl.t('inspection.builder.delete-field-title'),
+            body: this.intl.t('inspection.builder.delete-field-body'),
+            acceptButtonText: this.intl.t('inspection.builder.delete'),
+            acceptButtonType: 'danger',
+            confirm: (modal) => {
+                this.replaceGroup(group.uuid, { fields: (group.fields ?? []).filter((candidate) => candidate.uuid !== field.uuid) });
+                modal.done();
+            },
+        });
+    }
+}

package/addon/components/inspection-form/details/submissions.hbs

@@ -0,0 +1,48 @@
+<div class="inspection-form-details-submissions p-4">
+    {{#if this.loadSubmissions.isRunning}}
+        <div class="flex items-center justify-center py-10">
+            <Spinner />
+        </div>
+    {{else if this.submissions.length}}
+        <div class="inspection-history">
+            {{#each this.submissions as |submission|}}
+                <button type="button" class="inspection-history__card" {{on "click" (fn this.inspectionSubmissionActions.transition.view submission)}}>
+                    <div class="inspection-history__head">
+                        <span class="inspection-history__form"><SelectOption::Vehicle @option={{submission.vehicle}} @title={{n-a (or submission.vehicle.displayName submission.vehicle_name) (t "inspection.form.no-vehicle")}} @compact={{true}} /></span>
+                        {{! A draft has no result yet; an empty badge is just a coloured dot. }}
+                        {{#if submission.result}}
+                            <Badge @status={{if (eq submission.result "failed") "failed" "passed"}}>{{smart-humanize submission.result}}</Badge>
+                        {{/if}}
+                        <Badge @status={{submission.status}}>{{smart-humanize submission.status}}</Badge>
+                    </div>
+
+                    <div class="inspection-history__meta">
+                        {{#if (or submission.driver.name submission.driver_name)}}
+                            <span class="inspection-history__driver">
+                                <SelectOption::Driver @option={{submission.driver}} @title={{or submission.driver.name submission.driver_name}} @compact={{true}} />
+                            </span>
+                        {{/if}}
+                        <span class="inspection-history__when">
+                            <FaIcon @icon="clock" @size="xs" class="inspection-history__meta-icon" />
+                            {{n-a submission.submittedAt}}
+                        </span>
+                        {{#if submission.failed_items}}
+                            <span class="inspection-history__failed">
+                                <FaIcon @icon="triangle-exclamation" @size="xs" class="inspection-history__meta-icon" />
+                                {{t "inspection.record.failed-count" count=submission.failed_items}}
+                            </span>
+                        {{/if}}
+                    </div>
+
+                    <div class="inspection-history__id">{{submission.public_id}}</div>
+                </button>
+            {{/each}}
+        </div>
+    {{else}}
+        <div class="flex flex-col items-center justify-center py-10 text-gray-400 dark:text-gray-600">
+            <FaIcon @icon="clipboard-check" @size="2x" class="mb-3" />
+            <p class="text-sm font-semibold text-gray-600 dark:text-gray-300">{{t "inspection.form.no-submissions"}}</p>
+            <p class="text-xs">{{t "inspection.form.no-submissions-description"}}</p>
+        </div>
+    {{/if}}
+</div>

package/addon/components/inspection-form/details/submissions.js

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+
+/**
+ * What has been filed against this form, newest first.
+ *
+ * The mirror of the vehicle's Inspections tab: there you ask what happened to
+ * one truck, here what a form has collected. Every row shares the form, so the
+ * vehicle leads instead and the form name is left out entirely.
+ */
+export default class InspectionFormDetailsSubmissionsComponent extends Component {
+    @service inspectionSubmissionActions;
+    @service notifications;
+    @service store;
+    @tracked submissions = [];
+
+    get form() {
+        return this.args.resource ?? this.args.form;
+    }
+
+    constructor() {
+        super(...arguments);
+        this.loadSubmissions.perform();
+    }
+
+    @task *loadSubmissions() {
+        try {
+            // `inspection_form_uuid` is fillable, which is what makes the index
+            // filter bind to it — the same route `vehicle_uuid` takes.
+            const submissions = yield this.store.query('inspection-submission', {
+                inspection_form_uuid: this.form.uuid ?? this.form.id,
+                sort: '-created_at',
+            });
+
+            this.submissions = Array.from(submissions ?? []);
+        } catch (error) {
+            this.notifications.serverError(error);
+        }
+    }
+}