@fleetbase/fleetops-engine 0.6.38 → 0.6.40

package/addon/components/work-order/form.hbs

@@ -1,10 +1,22 @@
-<div class="form-wrapper" ...attributes>
-    <ContentPanel @title="Work Order Details" @open={{true}} @wrapperClass="bordered-top">
+<div class="work-order-form" ...attributes>
+
+    {{! ===== IDENTIFICATION ===== }}
+    <ContentPanel @title="Identification" @open={{true}} @wrapperClass="bordered-top">
         <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Work Order Details
+            </div>
             <InputGroup @name="Code">
-                <Input @value={{@resource.code}} @type="text" class="w-full form-input" placeholder="Work Order Code" disabled={{cannot-write @resource}} />
+                <Input @value={{@resource.code}} @type="text" class="w-full form-input" placeholder="Auto-generated if left blank" disabled={{cannot-write @resource}} />
+            </InputGroup>
+            <InputGroup @name="Subject" @wrapperClass="col-span-2">
+                <Input @value={{@resource.subject}} @type="text" class="w-full form-input" placeholder="Brief description of the work order" disabled={{cannot-write @resource}} />
             </InputGroup>
 
+            {{! Status & Priority }}
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Status & Priority
+            </div>
             <InputGroup @name="Status">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
@@ -20,11 +32,6 @@
                     </PowerSelect>
                 </div>
             </InputGroup>
-
-            <InputGroup @name="Subject" @wrapperClass="col-span-2">
-                <Input @value={{@resource.subject}} @type="text" class="w-full form-input" placeholder="Subject" disabled={{cannot-write @resource}} />
-            </InputGroup>
-
             <InputGroup @name="Priority">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                     <PowerSelect
@@ -40,74 +47,200 @@
                     </PowerSelect>
                 </div>
             </InputGroup>
+        </div>
+    </ContentPanel>
 
-            <InputGroup @name="Assignee">
-                <ModelSelect
-                    @modelName="user"
-                    @selectedModel={{@resource.assignee}}
-                    @placeholder="Select Assignee"
-                    @triggerClass="form-select form-input"
-                    @infiniteScroll={{false}}
-                    @renderInPlace={{true}}
-                    @onChange={{fn (mut @resource.assignee)}}
-                    @onChangeId={{fn (mut @resource.assignee_uuid)}}
-                    @disabled={{cannot-write @resource}}
-                    as |model|
-                >
-                    {{model.name}}
-                </ModelSelect>
+    {{! ===== ASSIGNMENT ===== }}
+    <ContentPanel @title="Assignment" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Target Asset
+            </div>
+            <InputGroup @name="Target Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.targetTypeOptions}}
+                        @selected={{this.selectedTargetType}}
+                        @onChange={{this.onTargetTypeChange}}
+                        @placeholder="Select target type"
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        {{option.label}}
+                    </PowerSelect>
+                </div>
             </InputGroup>
+            {{#if this.targetModelName}}
+                <InputGroup @name="Target">
+                    <ModelSelect
+                        @modelName={{this.targetModelName}}
+                        @selectedModel={{@resource.target}}
+                        @placeholder="Select target asset"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{this.assignTarget}}
+                        @disabled={{cannot-write @resource}}
+                        as |model|
+                    >
+                        {{or model.name model.subject model.public_id}}
+                    </ModelSelect>
+                </InputGroup>
+            {{/if}}
 
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-3">
+                Assignee
+            </div>
+            <InputGroup @name="Assignee Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect
+                        @options={{this.assigneeTypeOptions}}
+                        @selected={{this.selectedAssigneeType}}
+                        @onChange={{this.onAssigneeTypeChange}}
+                        @placeholder="Select assignee type"
+                        @triggerClass="form-select form-input"
+                        @disabled={{cannot-write @resource}}
+                        as |option|
+                    >
+                        {{option.label}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+            {{#if this.assigneeModelName}}
+                <InputGroup @name="Assignee">
+                    <ModelSelect
+                        @modelName={{this.assigneeModelName}}
+                        @selectedModel={{@resource.assignee}}
+                        @placeholder="Select assignee"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{this.assignAssignee}}
+                        @disabled={{cannot-write @resource}}
+                        as |model|
+                    >
+                        {{or model.name model.public_id}}
+                    </ModelSelect>
+                </InputGroup>
+            {{/if}}
+        </div>
+    </ContentPanel>
+
+    {{! ===== SCHEDULING ===== }}
+    <ContentPanel @title="Scheduling" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+            <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                Dates
+            </div>
             <InputGroup @name="Opened At">
                 <DatePicker
-                    @value={{@resource.opened_at}}
+                    @value={{or (format-date-fns @resource.opened_at "dd-MM-yyyy") null}}
                     @onChange={{fn (mut @resource.opened_at)}}
-                    @placeholder="Select Opened Date"
-                    @disabled={{cannot-write @resource}}
-                    class="w-full form-input"
+                    @placeholder="DD-MM-YYYY"
+                    class="filter-date-input w-full flex-1"
                 />
             </InputGroup>
-
             <InputGroup @name="Due At">
                 <DatePicker
-                    @value={{@resource.due_at}}
+                    @value={{or (format-date-fns @resource.due_at "dd-MM-yyyy") null}}
                     @onChange={{fn (mut @resource.due_at)}}
-                    @placeholder="Select Due Date"
-                    @disabled={{cannot-write @resource}}
-                    class="w-full form-input"
+                    @placeholder="DD-MM-YYYY"
+                    class="filter-date-input w-full flex-1"
                 />
             </InputGroup>
-
             <InputGroup @name="Closed At">
                 <DatePicker
-                    @value={{@resource.closed_at}}
+                    @value={{or (format-date-fns @resource.closed_at "dd-MM-yyyy") null}}
                     @onChange={{fn (mut @resource.closed_at)}}
-                    @placeholder="Select Closed Date"
-                    @disabled={{cannot-write @resource}}
-                    class="w-full form-input"
+                    @placeholder="DD-MM-YYYY"
+                    class="filter-date-input w-full flex-1"
                 />
             </InputGroup>
+        </div>
+    </ContentPanel>
 
-            <InputGroup @name="Instructions" @wrapperClass="col-span-2">
+    {{! ===== INSTRUCTIONS ===== }}
+    <ContentPanel @title="Instructions" @open={{true}} @wrapperClass="bordered-top">
+        <div class="grid grid-cols-1 gap-2 no-input-group-padding text-xs">
+            <InputGroup @name="Instructions">
                 <Textarea
                     @value={{@resource.instructions}}
                     aria-label="Instructions"
                     class="w-full form-input"
                     disabled={{cannot-write @resource}}
-                    placeholder="Instructions"
+                    placeholder="Step-by-step instructions for the technician"
                     rows={{5}}
                 />
             </InputGroup>
-
-            <RegistryYield @registry="fleet-ops:component:work-order:form:details" as |RegistryComponent|>
-                <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
-            </RegistryYield>
         </div>
     </ContentPanel>
 
-    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
+    {{! ===== COMPLETION DATA (shown when status = closed) ===== }}
+    {{#if this.isCompleting}}
+        <ContentPanel @title="Completion Details" @open={{true}} @wrapperClass="bordered-top">
+            <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-2 no-input-group-padding text-xs">
+                <div class="col-span-1 lg:col-span-2 text-[11px] uppercase tracking-wide text-gray-500 font-semibold mt-1">
+                    Record what was actually done — this will auto-create a Maintenance History entry.
+                </div>
+
+                <InputGroup @name="Odometer at Completion (km)">
+                    <Input
+                        @value={{this.completionOdometer}}
+                        @type="number"
+                        class="w-full form-input"
+                        placeholder="e.g. 47250"
+                        {{on "input" (fn this.setCompletionOdometer this.completionOdometer)}}
+                        {{on "change" (fn this.setCompletionOdometer this.completionOdometer)}}
+                    />
+                </InputGroup>
+
+                <InputGroup @name="Engine Hours at Completion">
+                    <Input
+                        @value={{this.completionEngineHours}}
+                        @type="number"
+                        class="w-full form-input"
+                        placeholder="e.g. 1420"
+                        {{on "input" (fn this.setCompletionEngineHours this.completionEngineHours)}}
+                        {{on "change" (fn this.setCompletionEngineHours this.completionEngineHours)}}
+                    />
+                </InputGroup>
+
+                <InputGroup @name="Labour Cost">
+                    <MoneyInput @value={{this.completionLaborCost}} @currency={{or @resource.currency "USD"}} @disabled={{false}} @onChange={{this.setCompletionLaborCost}} />
+                </InputGroup>
+
+                <InputGroup @name="Parts Cost">
+                    <MoneyInput @value={{this.completionPartsCost}} @currency={{or @resource.currency "USD"}} @disabled={{false}} @onChange={{this.setCompletionPartsCost}} />
+                </InputGroup>
 
+                <InputGroup @name="Tax">
+                    <MoneyInput @value={{this.completionTax}} @currency={{or @resource.currency "USD"}} @disabled={{false}} @onChange={{this.setCompletionTax}} />
+                </InputGroup>
+
+                <InputGroup @name="Completion Notes" @wrapperClass="col-span-2">
+                    <Textarea
+                        @value={{this.completionNotes}}
+                        class="w-full form-input"
+                        rows="3"
+                        placeholder="Notes on what was done, parts replaced, observations..."
+                        {{on "input" (fn this.setCompletionNotes this.completionNotes)}}
+                        {{on "change" (fn this.setCompletionNotes this.completionNotes)}}
+                    />
+                </InputGroup>
+            </div>
+        </ContentPanel>
+    {{/if}}
+
+    {{! ===== REGISTRY & METADATA ===== }}
+    <RegistryYield @registry="fleet-ops:component:work-order:form:details" as |RegistryComponent|>
+        <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
+    </RegistryYield>
+    <CustomField::Yield @subject={{@resource}} @wrapperClass="bordered-top" />
     <RegistryYield @registry="fleet-ops:component:work-order:form" as |RegistryComponent|>
         <RegistryComponent @resource={{@resource}} @controller={{@controller}} @permission={{get-write-permission @resource}} />
     </RegistryYield>
-</div>
+    <ContentPanel @title="Metadata" @open={{false}} @wrapperClass="bordered-top">
+        <MetadataEditor @value={{@resource.meta}} @onChange={{fn (mut @resource.meta)}} />
+    </ContentPanel>
+</div>

package/addon/components/work-order/form.js

@@ -1,13 +1,206 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+/**
+ * Maps a user-facing polymorphic type string to the Ember Data model name
+ * used by ModelSelect.
+ */
+const TYPE_TO_MODEL = {
+    'fleet-ops:vehicle': 'vehicle',
+    'fleet-ops:equipment': 'equipment',
+    'fleet-ops:vendor': 'vendor',
+    'fleet-ops:contact': 'contact',
+    'Auth:User': 'user',
+};
+
+/**
+ * Maps a concrete Ember Data model name back to the backend polymorphic type string.
+ * Used to restore the type selector when editing an existing record that has a
+ * loaded @belongsTo('maintenance-subject', {polymorphic: true}) relationship.
+ */
+const TARGET_MODEL_TO_TYPE = {
+    'maintenance-subject-vehicle': 'fleet-ops:vehicle',
+    'maintenance-subject-equipment': 'fleet-ops:equipment',
+    // Fall-through for raw models passed from vehicle-actions.js
+    vehicle: 'fleet-ops:vehicle',
+    equipment: 'fleet-ops:equipment',
+};
+
+/**
+ * Maps a concrete Ember Data model name back to the backend polymorphic type string
+ * for the assignee relationship.
+ */
+const ASSIGNEE_MODEL_TO_TYPE = {
+    'facilitator-vendor': 'fleet-ops:vendor',
+    'facilitator-contact': 'fleet-ops:contact',
+    'facilitator-integrated-vendor': 'fleet-ops:vendor',
+    vendor: 'fleet-ops:vendor',
+    contact: 'fleet-ops:contact',
+    user: 'Auth:User',
+};
 
 export default class WorkOrderFormComponent extends Component {
+    /** Status options for work orders. */
+    statusOptions = ['open', 'in_progress', 'on_hold', 'completed', 'cancelled'];
+
+    /** Priority options for work orders. */
+    priorityOptions = ['low', 'medium', 'high', 'critical'];
+
     /**
-     * Status options for work orders
+     * Polymorphic target type options — the asset a work order is raised against.
      */
-    statusOptions = ['open', 'in_progress', 'on_hold', 'completed', 'cancelled'];
+    targetTypeOptions = [
+        { value: 'fleet-ops:vehicle', label: 'Vehicle' },
+        { value: 'fleet-ops:equipment', label: 'Equipment' },
+    ];
 
     /**
-     * Priority options
+     * Polymorphic assignee type options — who is responsible for completing
+     * the work order.
      */
-    priorityOptions = ['low', 'medium', 'high', 'critical'];
+    assigneeTypeOptions = [
+        { value: 'fleet-ops:vendor', label: 'Vendor' },
+        { value: 'fleet-ops:contact', label: 'Contact' },
+        { value: 'Auth:User', label: 'User' },
+    ];
+
+    /** Derived Ember Data model name for the currently selected target type. */
+    @tracked targetModelName = null;
+
+    /** Derived Ember Data model name for the currently selected assignee type. */
+    @tracked assigneeModelName = null;
+
+    /** The currently selected target type option object (drives the PowerSelect trigger label). */
+    @tracked selectedTargetType = null;
+
+    /** The currently selected assignee type option object. */
+    @tracked selectedAssigneeType = null;
+
+    /**
+     * Completion data fields — only used when status is being set to 'closed'.
+     * These are pure UI state; they are never persisted directly. Instead, the
+     * controller reads them via the @onCompletionChange callback and passes them
+     * to workOrderActions.prepareForSave() before calling workOrder.save().
+     */
+    @tracked completionOdometer = null;
+    @tracked completionEngineHours = null;
+    @tracked completionLaborCost = null;
+    @tracked completionPartsCost = null;
+    @tracked completionTax = null;
+    @tracked completionNotes = null;
+
+    /**
+     * Returns true when the work order status is set to 'closed', which
+     * reveals the Completion Details panel.
+     */
+    get isCompleting() {
+        return this.args.resource?.status === 'closed';
+    }
+
+    constructor(owner, args) {
+        super(owner, args);
+        const { resource } = args;
+
+        // Restore target type selection from the polymorphic relationship.
+        const target = resource?.target;
+        if (target) {
+            const modelName = target.constructor?.modelName ?? target.modelName;
+            const typeValue = TARGET_MODEL_TO_TYPE[modelName] ?? null;
+            if (typeValue) {
+                this.targetModelName = TYPE_TO_MODEL[typeValue] ?? null;
+                this.selectedTargetType = this.targetTypeOptions.find((o) => o.value === typeValue) ?? null;
+            }
+        }
+
+        // Restore assignee type selection from the polymorphic relationship.
+        const assignee = resource?.assignee;
+        if (assignee) {
+            const modelName = assignee.constructor?.modelName ?? assignee.modelName;
+            const typeValue = ASSIGNEE_MODEL_TO_TYPE[modelName] ?? null;
+            if (typeValue) {
+                this.assigneeModelName = TYPE_TO_MODEL[typeValue] ?? null;
+                this.selectedAssigneeType = this.assigneeTypeOptions.find((o) => o.value === typeValue) ?? null;
+            }
+        }
+    }
+
+    /**
+     * Handles a change to the target type selector. Resets the target
+     * relationship so a stale association is not persisted.
+     */
+    @action onTargetTypeChange(option) {
+        this.selectedTargetType = option;
+        this.args.resource.target = null;
+        this.targetModelName = TYPE_TO_MODEL[option.value] ?? null;
+    }
+
+    /** Assigns the selected target model to the resource. */
+    @action assignTarget(model) {
+        this.args.resource.target = model;
+    }
+
+    /**
+     * Handles a change to the assignee type selector. Resets the assignee
+     * relationship so a stale association is not persisted.
+     */
+    @action onAssigneeTypeChange(option) {
+        this.selectedAssigneeType = option;
+        this.args.resource.assignee = null;
+        this.assigneeModelName = TYPE_TO_MODEL[option.value] ?? null;
+    }
+
+    /** Assigns the selected assignee model to the resource. */
+    @action assignAssignee(model) {
+        this.args.resource.assignee = model;
+    }
+
+    /**
+     * Notifies the parent (controller) of the current completion field values
+     * whenever any completion input changes. The controller stores this plain
+     * object and passes it to workOrderActions.prepareForSave() before saving —
+     * no component reference is ever held by the controller.
+     */
+    _notifyCompletionChange() {
+        if (typeof this.args.onCompletionChange === 'function') {
+            this.args.onCompletionChange({
+                odometer: this.completionOdometer,
+                engineHours: this.completionEngineHours,
+                laborCost: this.completionLaborCost,
+                partsCost: this.completionPartsCost,
+                tax: this.completionTax,
+                notes: this.completionNotes,
+            });
+        }
+    }
+
+    @action setCompletionOdometer(value) {
+        this.completionOdometer = value;
+        this._notifyCompletionChange();
+    }
+
+    @action setCompletionEngineHours(value) {
+        this.completionEngineHours = value;
+        this._notifyCompletionChange();
+    }
+
+    @action setCompletionLaborCost(value) {
+        this.completionLaborCost = value;
+        this._notifyCompletionChange();
+    }
+
+    @action setCompletionPartsCost(value) {
+        this.completionPartsCost = value;
+        this._notifyCompletionChange();
+    }
+
+    @action setCompletionTax(value) {
+        this.completionTax = value;
+        this._notifyCompletionChange();
+    }
+
+    @action setCompletionNotes(value) {
+        this.completionNotes = value;
+        this._notifyCompletionChange();
+    }
 }

package/addon/components/work-order/panel-header.hbs

@@ -0,0 +1,31 @@
+<div class="px-4 py-2">
+    <div class="flex flex-1 flex-row items-start justify-between">
+        <div class="flex flex-col">
+            <div class="flex flex-row items-center space-x-2">
+                <h1 class="text-gray-900 dark:text-white font-semibold text-lg">{{or @resource.code @resource.subject}}</h1>
+                <Badge @status={{@resource.status}}>{{smart-humanize @resource.status}}</Badge>
+            </div>
+            <div class="flex flex-row space-x-3 mt-1">
+                <div class="text-xs text-gray-400 dark:text-gray-500">{{smart-humanize @resource.type}}</div>
+                {{#if @resource.priority}}
+                    <div class="text-xs text-gray-400 dark:text-gray-500">{{t "column.priority"}}: {{smart-humanize @resource.priority}}</div>
+                {{/if}}
+                {{#if @resource.assignee_name}}
+                    <div class="text-xs text-gray-400 dark:text-gray-500">{{t "column.assignee"}}: {{@resource.assignee_name}}</div>
+                {{/if}}
+            </div>
+        </div>
+        <div class="next-view-header-right">
+            <Layout::Resource::Panel::HeaderActions
+                @resource={{@resource}}
+                @saveTask={{@saveTask}}
+                @saveOptions={{@saveOptions}}
+                @saveDisabled={{@saveDisabled}}
+                @pojoResource={{@pojoResource}}
+                @authSchema={{@authSchema}}
+                @actionButtons={{@actionButtons}}
+                @onPressCancel={{@onPressCancel}}
+            />
+        </div>
+    </div>
+</div>

package/addon/components/work-order/panel-header.js

@@ -0,0 +1,2 @@
+import Component from '@glimmer/component';
+export default class WorkOrderPanelHeaderComponent extends Component {}

package/addon/controllers/connectivity/devices/index/details.js

@@ -7,7 +7,7 @@ export default class ConnectivityDevicesIndexDetailsController extends Controlle
     @service hostRouter;
 
     get tabs() {
-        const registeredTabs = this.menuService.getMenuItems('fleet-ops:component:place:details');
+        const registeredTabs = this.menuService.getMenuItems('fleet-ops:component:device:details');
         return [
             {
                 route: 'connectivity.devices.index.details.index',

package/addon/controllers/maintenance/equipment/index/details/index.js

@@ -1,3 +1,2 @@
 import Controller from '@ember/controller';
-
 export default class MaintenanceEquipmentIndexDetailsIndexController extends Controller {}

package/addon/controllers/maintenance/equipment/index/details.js

@@ -1,3 +1,38 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
 
-export default class MaintenanceEquipmentIndexDetailsController extends Controller {}
+export default class MaintenanceEquipmentIndexDetailsController extends Controller {
+    @service equipmentActions;
+    @service hostRouter;
+    @service intl;
+    @service('universe/menu-service') menuService;
+
+    @tracked overlay;
+
+    get tabs() {
+        const registeredTabs = this.menuService.getMenuItems('fleet-ops:component:equipment:details');
+        return [{ route: 'maintenance.equipment.index.details.index', label: this.intl.t('common.overview') }, ...(isArray(registeredTabs) ? registeredTabs : [])];
+    }
+
+    get actionButtons() {
+        return [
+            { icon: 'edit', fn: this.edit, permission: 'fleet-ops update equipment' },
+            { icon: 'trash', fn: this.delete, type: 'danger', permission: 'fleet-ops delete equipment' },
+        ];
+    }
+
+    @action edit() {
+        return this.hostRouter.transitionTo('console.fleet-ops.maintenance.equipment.index.edit', this.model);
+    }
+
+    @action delete() {
+        return this.equipmentActions.delete(this.model, {
+            onConfirm: () => {
+                this.hostRouter.transitionTo('console.fleet-ops.maintenance.equipment.index');
+            },
+        });
+    }
+}

package/addon/controllers/maintenance/equipment/index/edit.js

@@ -1,3 +1,58 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
 
-export default class MaintenanceEquipmentIndexEditController extends Controller {}
+export default class MaintenanceEquipmentIndexEditController extends Controller {
+    @service hostRouter;
+    @service intl;
+    @service notifications;
+    @service modalsManager;
+    @service events;
+
+    @tracked overlay;
+
+    get actionButtons() {
+        return [{ icon: 'eye', fn: this.view }];
+    }
+
+    @task *save(equipment) {
+        try {
+            yield equipment.save();
+            this.events.trackResourceUpdated(equipment);
+            this.overlay?.close();
+            yield this.hostRouter.transitionTo('console.fleet-ops.maintenance.equipment.index.details', equipment);
+            this.notifications.success(this.intl.t('common.resource-updated-success', { resource: this.intl.t('resource.equipment'), resourceName: equipment.name }));
+        } catch (err) {
+            this.notifications.serverError(err);
+        }
+    }
+
+    @action cancel() {
+        if (this.model.hasDirtyAttributes) {
+            return this.#confirmContinueWithUnsavedChanges(this.model);
+        }
+        return this.hostRouter.transitionTo('console.fleet-ops.maintenance.equipment.index');
+    }
+
+    @action view() {
+        if (this.model.hasDirtyAttributes) {
+            return this.#confirmContinueWithUnsavedChanges(this.model);
+        }
+        return this.hostRouter.transitionTo('console.fleet-ops.maintenance.equipment.index.details', this.model);
+    }
+
+    #confirmContinueWithUnsavedChanges(equipment, options = {}) {
+        return this.modalsManager.confirm({
+            title: this.intl.t('common.continue-without-saving'),
+            body: this.intl.t('common.continue-without-saving-prompt', { resource: this.intl.t('resource.equipment') }),
+            acceptButtonText: this.intl.t('common.continue'),
+            confirm: async () => {
+                equipment.rollbackAttributes();
+                await this.hostRouter.transitionTo('console.fleet-ops.maintenance.equipment.index.details', equipment);
+            },
+            ...options,
+        });
+    }
+}