@fleetbase/fleetops-engine 0.6.64 → 0.6.66

package/addon/components/inspection-sheet/group.js

@@ -0,0 +1,75 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { summarize, fieldMarker } from '../../utils/inspection-answers';
+
+const MAX_COLUMNS = 4;
+
+/**
+ * One group of an inspection form.
+ *
+ * The author's `grid_size` is honoured for fields that stay compact. A field
+ * that needs room keeps its place in the order and spans the full width of
+ * the grid instead, which is what keeps one answer from changing the shape of
+ * another: alone on its row, it has no neighbouring cell to stretch.
+ *
+ * It spans in place rather than moving to the end of the group. Moving it
+ * re-sorted the group the moment a check failed, and the fields after it
+ * jumped up past it.
+ *
+ * The header carries one dot per field, in the order they are answered, so an
+ * inspector can see what is still open in a group without reading a label.
+ */
+export default class InspectionSheetGroupComponent extends Component {
+    @service intl;
+
+    get group() {
+        return this.args.group ?? {};
+    }
+
+    get title() {
+        return this.group.name || this.intl.t('inspection.builder.untitled-group');
+    }
+
+    get fields() {
+        return Array.isArray(this.group.fields) ? this.group.fields : [];
+    }
+
+    get values() {
+        return this.args.values ?? {};
+    }
+
+    /** What the author asked for, within what a panel can actually show. */
+    get columns() {
+        const size = Number(this.group.meta?.grid_size);
+
+        if (!Number.isFinite(size) || size < 1) {
+            return 1;
+        }
+
+        return Math.min(Math.round(size), MAX_COLUMNS);
+    }
+
+    get markers() {
+        return this.fields.map((field) => ({
+            uuid: field.uuid,
+            marker: fieldMarker(field, this.values[field.uuid]),
+        }));
+    }
+
+    get summary() {
+        return summarize(this.fields, this.values);
+    }
+
+    /**
+     * The one thing the header says on the right, and only when there is
+     * something to say. How the group is laid out is not news to whoever is
+     * filling it in.
+     */
+    get outstanding() {
+        return this.intl.t('inspection.record.section-outstanding', { count: this.summary.outstanding });
+    }
+
+    get hasOutstanding() {
+        return this.summary.outstanding > 0;
+    }
+}

package/addon/components/inspection-sheet.hbs

@@ -0,0 +1,77 @@
+<div class="inspection-sheet" ...attributes>
+    {{! Floating flyouts render here: inside the sheet so they scroll with their field, outside its card so they are never clipped. }}
+    <div class="inspection-sheet__flyouts"></div>
+
+    <div class="inspection-sheet__body">
+        <div class="inspection-sheet__groups">
+            {{#each this.groups key="uuid" as |group|}}
+                <InspectionSheet::Group
+                    @group={{group}}
+                    @values={{@values}}
+                    @subject={{@subject}}
+                    @onChange={{@onChange}}
+                    @disabled={{@disabled}}
+                    @allowUploads={{@allowUploads}}
+                    @uploader={{@uploader}}
+                    @readonly={{@readonly}}
+                    @targetId={{this.targetId}}
+                    @openFieldId={{this.openFieldId}}
+                    @onOpenFlyout={{this.openFlyout}}
+                    @onCloseFlyout={{this.closeFlyout}}
+                />
+            {{/each}}
+        </div>
+
+        {{#if this.hasFields}}
+            <div class="inspection-foot">
+                <div class="inspection-tallies">
+                    <div class="inspection-tally" data-kind="passed">
+                        <span class="inspection-tally__value">{{this.summary.passed}}</span>
+                        <span class="inspection-tally__label">{{t "inspection.answer.pass"}}</span>
+                    </div>
+                    <div class="inspection-tally" data-kind="failed">
+                        <span class="inspection-tally__value">{{this.summary.failed}}</span>
+                        <span class="inspection-tally__label">{{t "inspection.answer.fail"}}</span>
+                    </div>
+                    <div class="inspection-tally" data-kind="na">
+                        <span class="inspection-tally__value">{{this.summary.notApplicable}}</span>
+                        <span class="inspection-tally__label">{{t "inspection.answer.not-applicable"}}</span>
+                    </div>
+                    <div class="inspection-tally" data-kind="outstanding" data-any={{if this.summary.outstanding "true" "false"}}>
+                        <span class="inspection-tally__value">{{this.summary.outstanding}}</span>
+                        <span class="inspection-tally__label">{{t "inspection.record.outstanding"}}</span>
+                    </div>
+                </div>
+
+                {{#if this.defects}}
+                    <div class="inspection-tray">
+                        <div class="inspection-tray__head">
+                            {{t "inspection.tray.title"}}
+                            <span class="inspection-tray__count">{{this.defects.length}}</span>
+                        </div>
+                        {{#each this.defects key="field.uuid" as |defect|}}
+                            <button type="button" class="inspection-tray__row" {{on "click" (fn this.reviewDefect defect.field)}}>
+                                <span class="inspection-tray__severity" data-severity={{defect.severity}}>{{defect.severityLabel}}</span>
+                                <span class="inspection-tray__label">{{defect.label}}</span>
+                                {{#if defect.unsafe}}
+                                    <span class="inspection-banner__chip">{{t "inspection.answer.unsafe"}}</span>
+                                {{/if}}
+                                <span class="inspection-tray__evidence" data-incomplete={{if defect.incomplete "true" "false"}}>{{defect.evidence}}</span>
+                                <span class="inspection-tray__action">{{t "inspection.tray.review"}}</span>
+                            </button>
+                        {{/each}}
+                    </div>
+                {{/if}}
+
+                {{#if this.summary.firstOutstanding}}
+                    <div class="inspection-banner">
+                        <span>{{this.outstandingDescription}}</span>
+                        <button type="button" class="inspection-banner__jump" {{on "click" (fn this.jumpTo this.summary.firstOutstanding)}}>
+                            {{t "inspection.record.jump-to"}}
+                        </button>
+                    </div>
+                {{/if}}
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/inspection-sheet.js

@@ -0,0 +1,152 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { flattenFields } from '../utils/inspection-form-structure';
+import { summarize, listDefects } from '../utils/inspection-answers';
+import { INSPECTION_SEVERITIES } from '../utils/inspection-field-types';
+
+/**
+ * An inspection form, being filled in.
+ *
+ * One component renders the sheet wherever it is answered — the console's
+ * submission screen, the read-only record, and the public link a driver opens
+ * on a phone — so the three cannot drift apart. `@values` in, `@onChange`
+ * out; the screen that owns the answers holds them, and nothing is written
+ * here during render.
+ *
+ * The foot is a tally and, when something is wrong, a banner that names the
+ * field rather than counting it: an inspector is told what to go and fix, and
+ * can jump straight to it.
+ */
+export default class InspectionSheetComponent extends Component {
+    @service intl;
+
+    /** The field a banner last jumped to, held for a moment so the eye finds it. */
+    @tracked targetId = null;
+
+    /** The one field whose defect flyout is open. Opening another closes it. */
+    @tracked openFieldId = null;
+
+    get groups() {
+        return Array.isArray(this.args.groups) ? this.args.groups : [];
+    }
+
+    get fields() {
+        return flattenFields(this.groups);
+    }
+
+    get summary() {
+        return summarize(this.fields, this.args.values ?? {});
+    }
+
+    get hasFields() {
+        return this.fields.length > 0;
+    }
+
+    /**
+     * Every failure on the sheet, for the tray at its foot: the severity, the
+     * field, and what evidence it has or still owes. It is the record of a
+     * defect once its flyout is closed, and the review step before submitting.
+     */
+    get defects() {
+        return listDefects(this.fields, this.args.values ?? {}).map((defect) => ({
+            ...defect,
+            label: defect.field.label || this.intl.t('inspection.builder.untitled-field'),
+            severityLabel: this.severityLabel(defect.severity),
+            evidence: this.evidenceOf(defect),
+        }));
+    }
+
+    severityLabel(severity) {
+        if (!severity) {
+            return this.intl.t('inspection.answer.fail');
+        }
+
+        return INSPECTION_SEVERITIES.includes(severity) ? this.intl.t(`inspection.severity.${severity}`) : severity;
+    }
+
+    /** "2 photos · comment", or what is still owed, in the order it is owed. */
+    evidenceOf(defect) {
+        if (defect.needsComment && defect.needsPhoto) {
+            return this.intl.t('inspection.defect.needs-both');
+        }
+
+        if (defect.needsComment) {
+            return this.intl.t('inspection.defect.needs-comment');
+        }
+
+        if (defect.needsPhoto) {
+            return this.intl.t('inspection.defect.needs-photo');
+        }
+
+        const parts = [];
+
+        if (defect.photoCount) {
+            parts.push(this.intl.t('inspection.defect.photos', { count: defect.photoCount }));
+        }
+
+        if (defect.hasComment) {
+            parts.push(this.intl.t('inspection.defect.comment'));
+        }
+
+        return parts.length ? parts.join(' · ') : this.intl.t('inspection.defect.no-evidence');
+    }
+
+    get outstandingDescription() {
+        const field = this.summary.firstOutstanding;
+
+        if (!field) {
+            return null;
+        }
+
+        return this.intl.t('inspection.record.outstanding-field', {
+            label: field.label || this.intl.t('inspection.builder.untitled-field'),
+        });
+    }
+
+    /**
+     * Scroll a named field into view and mark it.
+     *
+     * By id rather than by a held element reference: a promoted field moves
+     * between the grid and its band as the answer changes, so the element the
+     * banner points at is not the one that existed when the banner rendered.
+     */
+    @action openFlyout(field) {
+        this.openFieldId = field?.uuid ?? null;
+    }
+
+    /**
+     * Close a field's flyout — only if it is still the open one, so a close
+     * that arrives after another field has opened cannot shut the new one.
+     */
+    @action closeFlyout(field) {
+        if (!field || this.openFieldId === field.uuid) {
+            this.openFieldId = null;
+        }
+    }
+
+    /** From the tray: bring the defect into view and open it to be edited. */
+    @action reviewDefect(field) {
+        this.jumpTo(field);
+
+        if (!this.args.readonly && !this.args.disabled) {
+            this.openFieldId = field?.uuid ?? null;
+        }
+    }
+
+    @action jumpTo(field) {
+        if (!field?.uuid) {
+            return;
+        }
+
+        this.targetId = field.uuid;
+
+        const element = document.getElementById(`inspection-field-${field.uuid}`);
+
+        if (element) {
+            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            element.querySelector('input, textarea, button')?.focus({ preventScroll: true });
+        }
+    }
+}

package/addon/components/inspection-submission/details.hbs

@@ -0,0 +1,149 @@
+<div class="next-content-panel-wrapper" ...attributes>
+    <ContentPanel @title={{t "inspection.record.overview"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.record.inspection"}}</div>
+                <ClickToCopy @value={{@resource.public_id}} class="field-value font-mono">{{n-a @resource.public_id}}</ClickToCopy>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.record.result"}}</div>
+                <div class="field-value"><Badge @status={{if (eq @resource.result "failed") "failed" "passed"}}>{{smart-humanize @resource.result}}</Badge></div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.record.form"}}</div>
+                <div class="field-value">
+                    <InspectionForm::Pill @inspectionForm={{resource-relation @resource "form"}} @titleFallback={{n-a @resource.form_name}} @onClick={{if @resource.form.public_id this.openForm}} />
+                </div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.record.status"}}</div>
+                <div class="field-value"><Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge></div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.record.vehicle"}}</div>
+                <div class="field-value"><Vehicle::Pill @vehicle={{@resource.vehicle}} @titleFallback={{n-a @resource.vehicle_name "No vehicle"}} @onClick={{this.viewVehicle}} /></div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.record.driver"}}</div>
+                <div class="field-value"><Driver::Pill @driver={{@resource.driver}} @titleFallback={{n-a @resource.driver_name "No driver"}} @onClick={{this.viewDriver}} /></div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.record.submitted-by"}}</div>
+                <div class="field-value">
+                    <User::Pill @user={{resource-relation @resource "submitted_by"}} @titleFallback={{n-a this.submitter}} />
+                    {{#if this.submitterNote}}
+                        <div class="mt-0.5 text-gray-500 dark:text-gray-400">{{this.submitterNote}}</div>
+                    {{/if}}
+                </div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.record.odometer"}}</div>
+                <div class="field-value">{{n-a @resource.odometer}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.record.engine-hours"}}</div>
+                <div class="field-value">{{n-a @resource.engine_hours}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.record.submitted"}}</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.submitted_at "dd MMM yyyy, HH:mm")}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.record.resolved"}}</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.resolved_at "dd MMM yyyy, HH:mm")}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    {{#if this.load.isRunning}}
+        <ContentPanel @title={{t "inspection.record.answers"}} @open={{true}} @wrapperClass="bordered-top">
+            <div class="p-6 flex items-center justify-center">
+                <Spinner @loadingMessage={{t "inspection.record.loading-answers"}} class="text-sm dark:text-gray-100 flex items-center space-x-2" />
+            </div>
+        </ContentPanel>
+    {{else if this.hasAnswers}}
+        <div class="inspection-sheet-inset">
+            <InspectionSheet @groups={{this.groups}} @values={{this.values}} @readonly={{true}} />
+        </div>
+    {{/if}}
+
+    {{! Derived from the pass/fail answers above, so it is shown only for a
+        submission filed before typed fields, which has nothing else to read. }}
+    {{#unless this.hasAnswers}}
+    <ContentPanel @title={{t "inspection.record.item-results"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="space-y-2 text-xs">
+            {{#each @resource.item_results as |item|}}
+                <div class="rounded border border-gray-200 dark:border-gray-700 p-3">
+                    <div class="flex items-start justify-between gap-3">
+                        <div>
+                            <div class="font-semibold">{{n-a item.label}}</div>
+                            <div class="text-gray-500">{{n-a item.category}}</div>
+                            {{#if item.comments}}
+                                <div class="mt-2 whitespace-pre-wrap">{{item.comments}}</div>
+                            {{/if}}
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <Badge @status={{if item.passed "passed" "failed"}}>{{if item.passed (t "inspection.answer.pass") (t "inspection.answer.fail")}}</Badge>
+                            {{#if item.severity}}
+                                <Badge @status={{if (eq item.severity "critical") "critical" "info"}}>{{smart-humanize item.severity}}</Badge>
+                            {{/if}}
+                        </div>
+                    </div>
+                </div>
+            {{else}}
+                <div class="text-gray-500">{{t "inspection.record.no-item-results"}}</div>
+            {{/each}}
+        </div>
+    </ContentPanel>
+    {{/unless}}
+
+    <ContentPanel @title={{t "inspection.record.follow-up"}} @open={{true}} @wrapperClass="bordered-top">
+        {{! A bare id was a dead end: each follow-up says what it is and opens it. }}
+        <div class="space-y-2">
+            {{#if @resource.issue}}
+                <button type="button" class="inspection-followup" {{on "click" this.openIssue}}>
+                    <div class="inspection-followup__head">
+                        <span class="inspection-followup__kind">{{t "inspection.record.linked-issue"}}</span>
+                        <span class="inspection-followup__id">{{@resource.issue.public_id}}</span>
+                        <FaIcon @icon="arrow-up-right-from-square" class="inspection-followup__open" />
+                    </div>
+                    <div class="inspection-followup__title">{{n-a @resource.issue.title}}</div>
+                    <div class="inspection-followup__meta">
+                        {{#if @resource.issue.status}}<Badge @status={{@resource.issue.status}}>{{smart-humanize @resource.issue.status}}</Badge>{{/if}}
+                        {{#if @resource.issue.priority}}<Badge @status={{if (eq @resource.issue.priority "critical") "critical" "info"}}>{{smart-humanize @resource.issue.priority}}</Badge>{{/if}}
+                        {{#if @resource.issue.type}}<span class="inspection-followup__type">{{smart-humanize @resource.issue.type}}</span>{{/if}}
+                    </div>
+                </button>
+            {{else}}
+                <div class="field-info-container">
+                    <div class="field-name">{{t "inspection.record.linked-issue"}}</div>
+                    <div class="field-value">{{n-a null}}</div>
+                </div>
+            {{/if}}
+
+            {{#if @resource.work_order}}
+                <button type="button" class="inspection-followup" {{on "click" this.openWorkOrder}}>
+                    <div class="inspection-followup__head">
+                        <span class="inspection-followup__kind">{{t "inspection.record.linked-work-order"}}</span>
+                        <span class="inspection-followup__id">{{or @resource.work_order.code @resource.work_order.public_id}}</span>
+                        <FaIcon @icon="arrow-up-right-from-square" class="inspection-followup__open" />
+                    </div>
+                    <div class="inspection-followup__title">{{n-a @resource.work_order.subject}}</div>
+                    <div class="inspection-followup__meta">
+                        {{#if @resource.work_order.status}}<Badge @status={{@resource.work_order.status}}>{{smart-humanize @resource.work_order.status}}</Badge>{{/if}}
+                        {{#if @resource.work_order.priority}}<Badge @status={{if (eq @resource.work_order.priority "critical") "critical" "info"}}>{{smart-humanize @resource.work_order.priority}}</Badge>{{/if}}
+                        {{#if @resource.work_order.due_at}}<span class="inspection-followup__type">{{t "inspection.record.due"}} {{format-date-fns @resource.work_order.due_at "dd MMM yyyy"}}</span>{{/if}}
+                    </div>
+                </button>
+            {{else}}
+                <div class="field-info-container">
+                    <div class="field-name">{{t "inspection.record.linked-work-order"}}</div>
+                    <div class="field-value">{{n-a @resource.work_order_uuid}}</div>
+                </div>
+            {{/if}}
+        </div>
+    </ContentPanel>
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+    <Spacer @height="200px" />
+</div>

package/addon/components/inspection-submission/details.js

@@ -0,0 +1,130 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { debug } from '@ember/debug';
+import { next } from '@ember/runloop';
+import { task } from 'ember-concurrency';
+
+/**
+ * The Overview tab of an inspection record.
+ *
+ * The answers are read from the submission's own payload — the resource
+ * projects them with each field's identity and every file reference resolved —
+ * and laid out against the form's groups, so the record reads the way the form
+ * was built. Nothing is written here.
+ */
+export default class InspectionSubmissionDetailsComponent extends Component {
+    @service inspectionFormActions;
+    @service inspectionSubmissionActions;
+    @service intl;
+    @service hostRouter;
+    @service vehicleActions;
+    @service driverActions;
+
+    @tracked groups = [];
+    @tracked values = {};
+
+    constructor() {
+        super(...arguments);
+        next(() => {
+            if (this.isDestroying || this.isDestroyed) {
+                return;
+            }
+
+            this.load.perform();
+        });
+    }
+
+    /**
+     * Who filed it: the account it is credited to — whoever signed in to the
+     * console, or whoever a public link was for — or else the name typed on
+     * the link, when the link was for nobody in particular.
+     */
+    get submitter() {
+        const submission = this.args.resource;
+        return submission?.submitted_by?.name ?? submission?.meta?.completed_by_name ?? null;
+    }
+
+    /**
+     * How that was established, for a submission that came through a public
+     * link: whether a PIN stood in the way, and what name was typed when it
+     * differs from the account or there is no account to check it against.
+     */
+    get submitterNote() {
+        const submission = this.args.resource;
+        if (submission?.source !== 'public_link') {
+            return null;
+        }
+
+        const typed = (submission.meta?.completed_by_name ?? '').trim();
+        const account = (submission.submitted_by?.name ?? '').trim();
+        const notes = [this.intl.t(submission.meta?.pin_verified ? 'inspection.record.via-link-pin' : 'inspection.record.via-link')];
+
+        if (typed && account && typed.toLowerCase() !== account.toLowerCase()) {
+            notes.push(this.intl.t('inspection.record.signed-as', { name: typed }));
+        } else if (typed && !account) {
+            notes.push(this.intl.t('inspection.record.name-unverified'));
+        }
+
+        return notes.join(' · ');
+    }
+
+    /** Follow-ups open where they live, the way the rest of the console navigates. */
+    @action openForm() {
+        return this.hostRouter.transitionTo('console.fleet-ops.maintenance.inspection-forms.index.details', this.args.resource.form);
+    }
+
+    /**
+     * A linked record opens beside what you were reading, which is what the
+     * console does everywhere else; the route transition is the fallback for
+     * a resource whose panel is not registered.
+     */
+    @action viewVehicle() {
+        const vehicle = this.args.resource?.vehicle;
+        if (!vehicle) {
+            return;
+        }
+
+        return this.vehicleActions.panel?.view ? this.vehicleActions.panel.view(vehicle) : this.vehicleActions.transition.view(vehicle);
+    }
+
+    @action viewDriver() {
+        const driver = this.args.resource?.driver;
+        if (!driver) {
+            return;
+        }
+
+        return this.driverActions.panel?.view ? this.driverActions.panel.view(driver) : this.driverActions.transition.view(driver);
+    }
+
+    @action openIssue() {
+        return this.hostRouter.transitionTo('console.fleet-ops.management.issues.index.details', this.args.resource.issue);
+    }
+
+    @action openWorkOrder() {
+        return this.hostRouter.transitionTo('console.fleet-ops.maintenance.work-orders.index.details', this.args.resource.work_order);
+    }
+
+    get hasAnswers() {
+        return this.groups.some((group) => (group.fields ?? []).length > 0);
+    }
+
+    @task *load() {
+        const submission = this.args.resource;
+        if (!submission?.id) {
+            return;
+        }
+
+        try {
+            this.values = yield this.inspectionSubmissionActions.loadAnswers(submission);
+
+            const form = submission.form;
+            if (form?.id) {
+                this.groups = yield this.inspectionFormActions.loadStructure(form);
+            }
+        } catch (error) {
+            debug('Unable to load inspection answers: ' + error.message);
+        }
+    }
+}