@fleetbase/fleetops-engine 0.6.64 → 0.6.66

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

@@ -0,0 +1,97 @@
+<div class="next-content-panel-wrapper" ...attributes>
+    <ContentPanel @title={{t "inspection.form.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.form.name"}}</div>
+                <div class="field-value">{{n-a @resource.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.form.status"}}</div>
+                <div class="field-value"><Badge @status={{@resource.status}}>{{or (get-fleet-ops-option-label "inspectionFormStatuses" @resource.status) (smart-humanize @resource.status)}}</Badge></div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.form.type"}}</div>
+                <div class="field-value">{{or (get-fleet-ops-option-label "inspectionFormTypes" @resource.type) (n-a (smart-humanize @resource.type))}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.form.fields"}}</div>
+                <div class="field-value">{{this.fieldCount}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">{{t "inspection.form.published"}}</div>
+                <div class="field-value">{{n-a (format-date-fns @resource.published_at "dd MMM yyyy, HH:mm")}}</div>
+            </div>
+            <div class="field-info-container lg:col-span-2">
+                <div class="field-name">{{t "inspection.form.description"}}</div>
+                <div class="field-value whitespace-pre-wrap">{{n-a @resource.description}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title={{t "inspection.link.public-links"}} @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="px-0i">
+        <InspectionLink::List @form={{@resource}} />
+    </ContentPanel>
+
+    <ContentPanel @title={{t "inspection.form.structure"}} @open={{true}} @wrapperClass="bordered-top">
+        {{#if this.load.isRunning}}
+            <div class="p-6 flex items-center justify-center">
+                <Spinner @loadingMessage={{t "inspection.form.loading-structure"}} class="text-sm dark:text-gray-100 flex items-center space-x-2" />
+            </div>
+        {{else}}
+            <div class="space-y-3 text-xs">
+                {{#each this.groups as |group|}}
+                    <div class="rounded border border-gray-200 dark:border-gray-700 p-3">
+                        <div class="font-semibold text-sm mb-1">{{or group.name (t "inspection.builder.untitled-group")}}</div>
+                        {{#if group.description}}
+                            <div class="text-gray-500 mb-2">{{group.description}}</div>
+                        {{/if}}
+                        <div class="space-y-1">
+                            {{#each group.fields as |field|}}
+                                <div class="flex items-center justify-between gap-2">
+                                    <div class="flex items-center space-x-2 min-w-0">
+                                        <span class="truncate">{{or field.label (t "inspection.builder.untitled-field")}}</span>
+                                        {{#if field.required}}<span class="text-red-500">*</span>{{/if}}
+                                    </div>
+                                    <div class="flex items-center space-x-2 flex-shrink-0">
+                                        {{#if (and (eq field.type "pass-fail") field.meta.severity)}}
+                                            <Badge @status={{if (eq field.meta.severity "critical") "critical" "info"}}>
+                                                {{#let (get this.severityLabels field.meta.severity) as |severityLabel|}}
+                                                    {{#if severityLabel}}{{t severityLabel}}{{else}}{{smart-humanize field.meta.severity}}{{/if}}
+                                                {{/let}}
+                                            </Badge>
+                                        {{/if}}
+                                        <span 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 font-mono">{{field.type}}</span>
+                                    </div>
+                                </div>
+                            {{else}}
+                                <div class="text-gray-500">{{t "inspection.builder.no-fields"}}</div>
+                            {{/each}}
+                        </div>
+                    </div>
+                {{else}}
+                    <div class="text-gray-500">{{t "inspection.form.no-structure"}}</div>
+                {{/each}}
+            </div>
+        {{/if}}
+    </ContentPanel>
+
+    {{#if this.legacyItems.length}}
+        <ContentPanel @title={{t "inspection.form.legacy-checklist"}} @open={{false}} @wrapperClass="bordered-top">
+            <div class="text-xs text-gray-500 mb-2">{{t "inspection.form.legacy-checklist-help"}}</div>
+            <div class="space-y-2 text-xs">
+                {{#each this.legacyItems as |item|}}
+                    <div class="flex items-center justify-between rounded border border-gray-200 dark:border-gray-700 p-2">
+                        <div>
+                            <div class="font-semibold">{{n-a item.label}}</div>
+                            <div class="text-gray-500">{{n-a item.category}}</div>
+                        </div>
+                        <Badge @status={{if (eq item.severity "critical") "critical" "info"}}>{{smart-humanize item.severity}}</Badge>
+                    </div>
+                {{/each}}
+            </div>
+        </ContentPanel>
+    {{/if}}
+
+    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
+    <Spacer @height="200px" />
+</div>

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

@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { INSPECTION_SEVERITIES } from '../../utils/inspection-field-types';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { debug } from '@ember/debug';
+import { next } from '@ember/runloop';
+import { task } from 'ember-concurrency';
+
+/**
+ * An inspection form, read-only: what it is, and the groups of fields it is
+ * built from, in the order a driver answers them.
+ */
+export default class InspectionFormDetailsComponent extends Component {
+    @service inspectionFormActions;
+
+    @tracked groups = [];
+
+    constructor() {
+        super(...arguments);
+        next(() => {
+            if (this.isDestroying || this.isDestroyed) {
+                return;
+            }
+
+            this.load.perform();
+        });
+    }
+
+    /**
+     * The four severities that have a label of their own, as a lookup. A field
+     * converted from a hand-written first-cut item can carry anything, and
+     * asking for a translation of that would put "Missing translation" on the
+     * screen.
+     */
+    severityLabels = INSPECTION_SEVERITIES.reduce((carry, severity) => ({ ...carry, [severity]: `inspection.severity.${severity}` }), {});
+
+    get fieldCount() {
+        return this.groups.reduce((count, group) => count + (group.fields?.length ?? 0), 0);
+    }
+
+    get legacyItems() {
+        const items = this.args.resource?.items;
+        return Array.isArray(items) ? items : [];
+    }
+
+    @task *load() {
+        if (!this.args.resource?.id) {
+            return;
+        }
+
+        try {
+            this.groups = yield this.inspectionFormActions.loadStructure(this.args.resource);
+        } catch (error) {
+            debug('Unable to load inspection form structure: ' + error.message);
+        }
+    }
+}

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

@@ -0,0 +1,93 @@
+<div class="inspection-form-form" ...attributes>
+    <ContentPanel @title={{t "inspection.form.details"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 no-input-group-padding text-xs">
+            <InputGroup @name={{t "inspection.form.name"}} @wrapperClass="lg:col-span-2">
+                <input type="text" value={{@resource.name}} class="w-full form-input" placeholder={{t "inspection.form.name-placeholder"}} disabled={{cannot-write @resource}} {{on "input" this.setName}} />
+            </InputGroup>
+            <InputGroup @name={{t "inspection.form.type"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "inspectionFormTypes"}}
+                        @selected={{find-by "value" @resource.type (get-fleet-ops-options "inspectionFormTypes")}}
+                        @onChange={{this.setType}}
+                        @placeholder={{t "inspection.form.type-placeholder"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{option.label}}</div>
+                            <div class="hide-from-trigger">{{option.description}}</div>
+                        </div>
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+            <InputGroup @name={{t "inspection.form.status"}}>
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{get-fleet-ops-options "inspectionFormStatuses"}}
+                        @selected={{find-by "value" @resource.status (get-fleet-ops-options "inspectionFormStatuses")}}
+                        @onChange={{this.setStatus}}
+                        @placeholder={{t "inspection.form.status-placeholder"}}
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        <div class="text-sm">
+                            <div class="font-semibold normalize-in-trigger">{{option.label}}</div>
+                            <div class="hide-from-trigger">{{option.description}}</div>
+                        </div>
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+            <InputGroup @name={{t "inspection.form.description"}} @wrapperClass="lg:col-span-2">
+                <textarea class="w-full form-input" rows="3" placeholder={{t "inspection.form.description-placeholder"}} disabled={{cannot-write @resource}} {{on "input" this.setDescription}}>{{@resource.description}}</textarea>
+            </InputGroup>
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title={{t "inspection.form.settings"}} @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-1 no-input-group-padding text-xs">
+            {{#each this.settingOptions as |setting|}}
+                <InputGroup>
+                    <label class="flex flex-row items-start space-x-2 cursor-pointer">
+                        <input
+                            type="checkbox"
+                            class="form-checkbox mt-0.5"
+                            checked={{get this.settings setting.key}}
+                            disabled={{cannot-write @resource}}
+                            {{on "change" (fn this.setSetting setting.key)}}
+                        />
+                        <span>
+                            <span class="dark:text-gray-100 text-sm">{{setting.label}}</span>
+                            <span class="block mt-1 text-xs text-gray-500 dark:text-gray-400">{{setting.description}}</span>
+                        </span>
+                    </label>
+                </InputGroup>
+            {{/each}}
+        </div>
+    </ContentPanel>
+
+    <ContentPanel @title={{t "inspection.form.builder"}} @open={{true}} @wrapperClass="bordered-top">
+        <InspectionForm::Builder @resource={{@resource}} @groups={{@structure}} @onChange={{this.setStructure}} @disabled={{cannot-write @resource}} />
+    </ContentPanel>
+
+    {{#if this.legacyItems.length}}
+        <ContentPanel @title={{t "inspection.form.legacy-checklist"}} @open={{false}} @wrapperClass="bordered-top">
+            <div class="text-xs text-gray-500 mb-2">{{t "inspection.form.legacy-checklist-help"}}</div>
+            <div class="space-y-2 text-xs">
+                {{#each this.legacyItems as |item|}}
+                    <div class="flex items-center justify-between rounded border border-gray-200 dark:border-gray-700 p-2">
+                        <div>
+                            <div class="font-semibold">{{n-a item.label}}</div>
+                            <div class="text-gray-500">{{n-a item.category}}</div>
+                        </div>
+                        <Badge @status={{if (eq item.severity "critical") "critical" "info"}}>{{get-fleet-ops-option-label "inspectionSeverities" item.severity}}</Badge>
+                    </div>
+                {{/each}}
+            </div>
+        </ContentPanel>
+    {{/if}}
+
+    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
+</div>

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

@@ -0,0 +1,79 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+/**
+ * The inspection form screen: what the form is, and what it is built from.
+ *
+ * The structure itself belongs to `inspection-form/builder`, which holds it as
+ * a draft so a form can be laid out before the record exists; this component
+ * only passes that draft up to the controller, which posts it with the save.
+ *
+ * Nothing writes to `@resource` during render — text inputs update from the
+ * DOM event, and every other change arrives from an action.
+ */
+export default class InspectionFormFormComponent extends Component {
+    @service intl;
+
+    /**
+     * The three switches a form actually has. Two are read by the server when
+     * a submission has failures (`InspectionSubmitter`); the third is read by
+     * the driver app before it will let a driver submit.
+     */
+    get settingOptions() {
+        return [
+            {
+                key: 'create_issue_on_failure',
+                label: this.intl.t('inspection.form.setting-create-issue'),
+                description: this.intl.t('inspection.form.setting-create-issue-help'),
+            },
+            {
+                key: 'create_work_order_on_failure',
+                label: this.intl.t('inspection.form.setting-create-work-order'),
+                description: this.intl.t('inspection.form.setting-create-work-order-help'),
+            },
+            {
+                key: 'require_signature',
+                label: this.intl.t('inspection.form.setting-require-signature'),
+                description: this.intl.t('inspection.form.setting-require-signature-help'),
+            },
+        ];
+    }
+
+    get settings() {
+        const settings = this.args.resource?.settings;
+        return settings && typeof settings === 'object' ? settings : {};
+    }
+
+    /** The first cut's checklist, kept read-only until it has been migrated. */
+    get legacyItems() {
+        const items = this.args.resource?.items;
+        return Array.isArray(items) ? items : [];
+    }
+
+    @action setName(event) {
+        this.args.resource.name = event.target.value;
+    }
+
+    @action setDescription(event) {
+        this.args.resource.description = event.target.value;
+    }
+
+    @action setType(option) {
+        this.args.resource.type = option?.value ?? null;
+    }
+
+    @action setStatus(option) {
+        this.args.resource.status = option?.value ?? null;
+    }
+
+    @action setSetting(key, event) {
+        this.args.resource.settings = { ...this.settings, [key]: event.target.checked };
+    }
+
+    @action setStructure(groups) {
+        if (typeof this.args.onStructureChange === 'function') {
+            this.args.onStructureChange(groups);
+        }
+    }
+}

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

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @inspectionForm @resource)}}
+    @resourceType="inspection-form"
+    @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/inspection-form/summary.hbs

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

package/addon/components/inspection-item-result/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @inspectionItemResult @resource)}}
+    @resourceType="inspection-item-result"
+    @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/inspection-item-result/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @inspectionItemResult @resource)}} @resourceType="inspection-item-result" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/inspection-link/list.hbs

@@ -0,0 +1,94 @@
+<div class="inspection-link-list" {{when-changed this.inspectionFormActions.linksChangedAt this.reload}} ...attributes>
+    {{#if this.load.isRunning}}
+        <div class="p-6 flex items-center justify-center">
+            <Spinner @loadingMessage={{t "inspection.link.loading"}} class="text-sm dark:text-gray-100 flex items-center space-x-2" />
+        </div>
+    {{else if this.error}}
+        <div class="inspection-link-list__empty">{{this.error}}</div>
+    {{else if this.hasLinks}}
+        <div>
+            {{#each this.links key="id" as |link|}}
+                <div class="inspection-link" data-state={{link.state}}>
+                    <div class="inspection-link__head">
+                        <span class="inspection-link__state" data-state={{link.state}}>{{t (concat "inspection.link.state-" link.state)}}</span>
+                        <span class="inspection-link__for">{{if link.label link.label (t "inspection.link.unassigned")}}</span>
+                        <span class="inspection-link__when">{{t "inspection.link.generated"}} {{format-date-fns link.created_at "dd MMM yyyy, HH:mm"}}</span>
+                    </div>
+
+                    {{#if link.url}}
+                        <div class="inspection-link__url">
+                            <code class="inspection-link__code">{{link.url}}</code>
+                            <Button @type="default" @size="xs" @icon="copy" @text={{t "inspection.link.copy"}} @onClick={{fn this.copy link}} />
+                        </div>
+                    {{else}}
+                        <div class="inspection-link__url">
+                            <span class="inspection-link__note">{{t "inspection.link.url-not-kept"}}</span>
+                        </div>
+                    {{/if}}
+
+                    {{#if (eq link.state "active")}}
+                        {{#if link.has_pin}}
+                            <div class="inspection-link__pin">
+                                <span class="inspection-link__pin-label">{{t "inspection.link.pin"}}</span>
+                                <code class="inspection-link__pin-code">{{link.pin}}</code>
+                                <Button @type="default" @size="xs" @icon="copy" @text={{t "inspection.link.copy"}} @onClick={{fn this.copyPin link}} />
+                                {{#if link.can_send_pin.email}}
+                                    <Button
+                                        @type="default"
+                                        @size="xs"
+                                        @icon="envelope"
+                                        @text={{t "inspection.link.email-pin"}}
+                                        @isLoading={{eq this.sendingKey (concat link.id ":email")}}
+                                        @onClick={{fn (perform this.sendPin) link "email"}}
+                                    />
+                                {{/if}}
+                                {{#if link.can_send_pin.sms}}
+                                    <Button
+                                        @type="default"
+                                        @size="xs"
+                                        @icon="comment"
+                                        @text={{t "inspection.link.text-pin"}}
+                                        @isLoading={{eq this.sendingKey (concat link.id ":sms")}}
+                                        @onClick={{fn (perform this.sendPin) link "sms"}}
+                                    />
+                                {{/if}}
+                            </div>
+                        {{else}}
+                            <div class="inspection-link__pin">
+                                <span class="inspection-link__note">{{t "inspection.link.no-pin"}}</span>
+                            </div>
+                        {{/if}}
+                    {{/if}}
+
+                    <div class="inspection-link__foot">
+                        <span>
+                            {{#if link.expires_at}}
+                                {{t "inspection.link.expires"}} {{format-date-fns link.expires_at "dd MMM yyyy, HH:mm"}}
+                            {{else}}
+                                {{t "inspection.link.no-expiry"}}
+                            {{/if}}
+                        </span>
+                        {{#if link.used_at}}
+                            <span><span class="inspection-link__sep">·</span> {{t "inspection.link.used"}} {{format-date-fns link.used_at "dd MMM yyyy, HH:mm"}}</span>
+                        {{else if link.last_viewed_at}}
+                            <span><span class="inspection-link__sep">·</span> {{t "inspection.link.viewed"}} {{format-date-fns link.last_viewed_at "dd MMM yyyy, HH:mm"}}</span>
+                        {{else}}
+                            <span><span class="inspection-link__sep">·</span> {{t "inspection.link.never-opened"}}</span>
+                        {{/if}}
+                        {{#if link.pin_sent_at}}
+                            <span><span class="inspection-link__sep">·</span> {{t "inspection.link.pin-sent-by" via=link.pin_sent_via}} {{format-date-fns link.pin_sent_at "dd MMM yyyy, HH:mm"}}</span>
+                        {{/if}}
+                        {{#if link.pin_attempts}}
+                            <span class="inspection-link__warn"><span class="inspection-link__sep">·</span> {{t "inspection.link.wrong-pins" count=link.pin_attempts}}</span>
+                        {{/if}}
+                        {{#if (eq link.state "active")}}
+                            <Button @type="danger" @size="xs" @icon="ban" @text={{t "inspection.link.revoke"}} @isLoading={{eq this.revokingId link.id}} @wrapperClass="ml-auto" @onClick={{fn (perform this.revoke) link}} />
+                        {{/if}}
+                    </div>
+                </div>
+            {{/each}}
+        </div>
+    {{else}}
+        <div class="inspection-link-list__empty">{{t "inspection.link.none"}}</div>
+    {{/if}}
+</div>

package/addon/components/inspection-link/list.js

@@ -0,0 +1,129 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import copyToClipboard from '@fleetbase/ember-core/utils/copy-to-clipboard';
+
+/**
+ * The public links minted for one inspection form.
+ *
+ * Generating a link used to leave nothing behind but a toast: the URL went to
+ * the clipboard and, once that clipboard was overwritten, there was no way to
+ * find out what had been handed out, to whom, or whether it still worked. So
+ * every link is listed — who and what it was for, when it was made, whether it
+ * has been opened, and whether it is still live — with the link itself there
+ * to copy again and a way to take it out of use.
+ *
+ * It reloads whenever a link is generated anywhere in the console, by
+ * watching the form actions service, so a list on the details panel stays
+ * current while the generate modal is used on top of it.
+ */
+export default class InspectionLinkListComponent extends Component {
+    @service fetch;
+    @service notifications;
+    @service intl;
+    @service inspectionFormActions;
+
+    @tracked links = [];
+    @tracked error = null;
+
+    /** Which link is being revoked, so only its own button spins. */
+    @tracked revokingId = null;
+
+    /** Which link's PIN is being sent, and how: `<id>:email` or `<id>:sms`. */
+    @tracked sendingKey = null;
+
+    constructor() {
+        super(...arguments);
+        this.load.perform();
+    }
+
+    get formId() {
+        const form = this.args.form;
+        return form?.id ?? form?.public_id ?? form ?? null;
+    }
+
+    get hasLinks() {
+        return this.links.length > 0;
+    }
+
+    /** Who and what a link is for, in one line: its assignee, vehicle and driver. */
+    labelFor(link) {
+        const names = [link?.assignee?.name, link?.vehicle?.name, link?.driver?.name].filter(Boolean);
+        return [...new Set(names)].join(' · ');
+    }
+
+    /** The absolute URL for a link, which the server returns only as a path. */
+    urlFor(link) {
+        return link?.path ? `${window.location.origin}${link.path}` : null;
+    }
+
+    @task({ restartable: true }) *load() {
+        this.error = null;
+
+        if (!this.formId) {
+            this.links = [];
+            return;
+        }
+
+        try {
+            const response = yield this.fetch.get(`inspection-forms/${this.formId}/links`);
+            this.links = (response?.links ?? []).map((link) => ({ ...link, url: this.urlFor(link), label: this.labelFor(link) }));
+        } catch (error) {
+            this.error = error?.payload?.error ?? error?.message ?? this.intl.t('inspection.link.load-failed');
+        }
+    }
+
+    /** Reload whenever the caller says it has minted one. */
+    @action reload() {
+        return this.load.perform();
+    }
+
+    @action copy(link) {
+        if (!link.url) {
+            return;
+        }
+
+        copyToClipboard(link.url);
+        this.notifications.success(this.intl.t('inspection.link.copied'));
+    }
+
+    @action copyPin(link) {
+        if (!link.pin) {
+            return;
+        }
+
+        copyToClipboard(link.pin);
+        this.notifications.success(this.intl.t('inspection.link.copied-pin'));
+    }
+
+    /** Send the PIN again, to whoever the link is for. */
+    @task({ drop: true }) *sendPin(link, via) {
+        this.sendingKey = `${link.id}:${via}`;
+
+        try {
+            const response = yield this.fetch.post(`inspection-forms/${this.formId}/links/${link.id}/send-pin`, { via });
+            this.inspectionFormActions.notifyPinDelivery(response?.pin_delivery);
+            yield this.load.perform();
+        } catch (error) {
+            this.notifications.serverError(error);
+        } finally {
+            this.sendingKey = null;
+        }
+    }
+
+    @task({ drop: true }) *revoke(link) {
+        this.revokingId = link.id;
+
+        try {
+            yield this.fetch.delete(`inspection-forms/${this.formId}/links/${link.id}`);
+            this.notifications.success(this.intl.t('inspection.link.revoked'));
+            yield this.load.perform();
+        } catch (error) {
+            this.notifications.serverError(error);
+        } finally {
+            this.revokingId = null;
+        }
+    }
+}

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

@@ -0,0 +1,45 @@
+<section class="inspection-group" ...attributes>
+    <div class="inspection-group__header">
+        <span class="inspection-group__name">{{this.title}}</span>
+        {{#if this.markers}}
+            <span class="inspection-group__dots" aria-hidden="true">
+                {{#each this.markers key="uuid" as |marker|}}
+                    <span class="inspection-dot" data-marker={{marker.marker}}></span>
+                {{/each}}
+            </span>
+        {{/if}}
+        {{#if this.hasOutstanding}}
+            <span class="inspection-group__meta">{{this.outstanding}}</span>
+        {{/if}}
+    </div>
+
+    {{#if @group.description}}
+        <p class="inspection-group__description">{{@group.description}}</p>
+    {{/if}}
+
+    {{#if this.fields}}
+        <div class="inspection-group__grid" data-columns={{this.columns}}>
+            {{#each this.fields key="uuid" as |field|}}
+                {{#if @readonly}}
+                    <InspectionField::Value @field={{field}} @value={{get @values field.uuid}} @targetId={{@targetId}} />
+                {{else}}
+                    <InspectionField::Input
+                        @field={{field}}
+                        @value={{get @values field.uuid}}
+                        @subject={{@subject}}
+                        @onChange={{@onChange}}
+                        @disabled={{@disabled}}
+                        @allowUploads={{@allowUploads}}
+                        @uploader={{@uploader}}
+                        @targetId={{@targetId}}
+                        @openFieldId={{@openFieldId}}
+                        @onOpenFlyout={{@onOpenFlyout}}
+                        @onCloseFlyout={{@onCloseFlyout}}
+                    />
+                {{/if}}
+            {{/each}}
+        </div>
+    {{else}}
+        <div class="inspection-group__empty">{{t "inspection.record.group-has-no-fields"}}</div>
+    {{/if}}
+</section>