@fleetbase/fleetops-engine 0.2.8 → 0.3.0

package/addon/components/modals/vehicle-form.hbs

@@ -12,42 +12,42 @@
                             <label>
                                 Internal ID
                             </label>
-                            <Input @value={{@options.vehicle.internal_id}}  @type="text" class="w-full form-input" placeholder="Internal ID" />
+                            <Input @value={{@options.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Plate Number
                             </label>
-                            <Input @value={{@options.vehicle.plate_number}}  @type="text" class="w-full form-input" placeholder="Plate Number" />
+                            <Input @value={{@options.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder="Plate Number" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 VIN Number
                             </label>
-                            <Input @value={{@options.vehicle.vin}}  @type="text" class="w-full form-input" placeholder="VIN Number" />
+                            <Input @value={{@options.vehicle.vin}} @type="text" class="w-full form-input" placeholder="VIN Number" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Make
                             </label>
-                            <Input @value={{@options.vehicle.make}}  @type="text" class="w-full form-input" placeholder="Vehicle Make" />
+                            <Input @value={{@options.vehicle.make}} @type="text" class="w-full form-input" placeholder="Vehicle Make" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Model
                             </label>
-                            <Input @value={{@options.vehicle.model}}  @type="text" class="w-full form-input" placeholder="Vehicle Model" />
+                            <Input @value={{@options.vehicle.model}} @type="text" class="w-full form-input" placeholder="Vehicle Model" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Year
                             </label>
-                            <Input @value={{@options.vehicle.year}}  @type="text" class="w-full form-input" placeholder="Vehicle Year" />
+                            <Input @value={{@options.vehicle.year}} @type="text" class="w-full form-input" placeholder="Vehicle Year" />
                         </div>
 
                         <div class="input-group mb-2">
@@ -65,8 +65,8 @@
                     <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                         <div class="input-group mb-2">
                             <InputLabel @labelText="Select map avatar" @helpText="Select an avatar to be used for rendering on maps when using geolocation tracking features." />
-                            <FetchSelect class="w-60" @placeholder="Select avatar" @path="vehicles/avatars" @value={{@options.vehicle.avatar_url}} @onSelect={{fn (mut @options.vehicle.avatar_url)}} as |option key|>
-                                {{titleize (humanize key)}}
+                            <FetchSelect @wrapperClass="w-60" @placeholder="Select avatar" @endpoint="vehicles/avatars" @selected={{this.vehicle.avatar_url}} @optionValue="value" @onChange={{fn (mut this.vehicle.avatar_url)}} as |option|>
+                                {{titleize (humanize option.key)}}
                             </FetchSelect>
                         </div>
                         <div>
@@ -81,77 +81,77 @@
                             <label>
                                 0 To 100 kph
                             </label>
-                            <Input @value={{@options.vehicle.model_0_to_100_kph}}  @type="text" class="w-full form-input" placeholder="0 To 100 kph" />
+                            <Input @value={{@options.vehicle.model_0_to_100_kph}} @type="text" class="w-full form-input" placeholder="0 To 100 kph" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Body
                             </label>
-                            <Input @value={{@options.vehicle.model_body}}  @type="text" class="w-full form-input" placeholder="Vehicle Body Type" />
+                            <Input @value={{@options.vehicle.model_body}} @type="text" class="w-full form-input" placeholder="Vehicle Body Type" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Doors
                             </label>
-                            <Input @value={{@options.vehicle.model_doors}}  @type="text" class="w-full form-input" placeholder="Number of Doors" />
+                            <Input @value={{@options.vehicle.model_doors}} @type="text" class="w-full form-input" placeholder="Number of Doors" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Drive
                             </label>
-                            <Input @value={{@options.vehicle.model_drive}}  @type="text" class="w-full form-input" placeholder="Vehicle Drive Type" />
+                            <Input @value={{@options.vehicle.model_drive}} @type="text" class="w-full form-input" placeholder="Vehicle Drive Type" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Length (mm)
                             </label>
-                            <Input @value={{@options.vehicle.model_length_mm}}  @type="text" class="w-full form-input" placeholder="Vehicle Length (mm)" />
+                            <Input @value={{@options.vehicle.model_length_mm}} @type="text" class="w-full form-input" placeholder="Vehicle Length (mm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Seats
                             </label>
-                            <Input @value={{@options.vehicle.model_seats}}  @type="text" class="w-full form-input" placeholder="Number of Seats" />
+                            <Input @value={{@options.vehicle.model_seats}} @type="text" class="w-full form-input" placeholder="Number of Seats" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Top Speed (kph)
                             </label>
-                            <Input @value={{@options.vehicle.model_top_speed_kph}}  @type="text" class="w-full form-input" placeholder="Vehicle Top Speed (kph)" />
+                            <Input @value={{@options.vehicle.model_top_speed_kph}} @type="text" class="w-full form-input" placeholder="Vehicle Top Speed (kph)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Transmission Type
                             </label>
-                            <Input @value={{@options.vehicle.model_transmission_type}}  @type="text" class="w-full form-input" placeholder=" Vehicle Transmission Type" />
+                            <Input @value={{@options.vehicle.model_transmission_type}} @type="text" class="w-full form-input" placeholder=" Vehicle Transmission Type" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Weight (kg)
                             </label>
-                            <Input @value={{@options.vehicle.model_weight_kg}}  @type="text" class="w-full form-input" placeholder="Vehicle Weight (kg)" />
+                            <Input @value={{@options.vehicle.model_weight_kg}} @type="text" class="w-full form-input" placeholder="Vehicle Weight (kg)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Wheelbase (mm)
                             </label>
-                            <Input @value={{@options.vehicle.model_wheelbase_mm}}  @type="text" class="w-full form-input" placeholder="Vehicle Wheelbase Length (mm)" />
+                            <Input @value={{@options.vehicle.model_wheelbase_mm}} @type="text" class="w-full form-input" placeholder="Vehicle Wheelbase Length (mm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Width (mm)
                             </label>
-                            <Input @value={{@options.vehicle.model_width_mm}}  @type="text" class="w-full form-input" placeholder="Vehicle Width (mm)" />
+                            <Input @value={{@options.vehicle.model_width_mm}} @type="text" class="w-full form-input" placeholder="Vehicle Width (mm)" />
                         </div>
                     </div>
                 </ContentPanel>
@@ -162,77 +162,77 @@
                             <label>
                                 Engine Bore (mm)
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_bore_mm}}  @type="text" class="w-full form-input" placeholder="Engine Bore (mm)" />
+                            <Input @value={{@options.vehicle.model_engine_bore_mm}} @type="text" class="w-full form-input" placeholder="Engine Bore (mm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 CC
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_cc}}  @type="text" class="w-full form-input" placeholder="Engine CC" />
+                            <Input @value={{@options.vehicle.model_engine_cc}} @type="text" class="w-full form-input" placeholder="Engine CC" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Compression
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_compression}}  @type="text" class="w-full form-input" placeholder=" Engine Compression" />
+                            <Input @value={{@options.vehicle.model_engine_compression}} @type="text" class="w-full form-input" placeholder=" Engine Compression" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Cylinders
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_cyl}}  @type="text" class="w-full form-input" placeholder="Number of Cylinders" />
+                            <Input @value={{@options.vehicle.model_engine_cyl}} @type="text" class="w-full form-input" placeholder="Number of Cylinders" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Position
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_position}}  @type="text" class="w-full form-input" placeholder="Engine Position" />
+                            <Input @value={{@options.vehicle.model_engine_position}} @type="text" class="w-full form-input" placeholder="Engine Position" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Power (ps)
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_power_ps}}  @type="text" class="w-full form-input" placeholder="Engine Power (ps)" />
+                            <Input @value={{@options.vehicle.model_engine_power_ps}} @type="text" class="w-full form-input" placeholder="Engine Power (ps)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Power (rpm)
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_power_rpm}}  @type="text" class="w-full form-input" placeholder="Engine Power (rpm)" />
+                            <Input @value={{@options.vehicle.model_engine_power_rpm}} @type="text" class="w-full form-input" placeholder="Engine Power (rpm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Stroke (mm)
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_stroke_mm}}  @type="text" class="w-full form-input" placeholder="Stroke Length (mm)" />
+                            <Input @value={{@options.vehicle.model_engine_stroke_mm}} @type="text" class="w-full form-input" placeholder="Stroke Length (mm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Torque (nm)
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_torque_nm}}  @type="text" class="w-full form-input" placeholder="Engine Torque (nm)" />
+                            <Input @value={{@options.vehicle.model_engine_torque_nm}} @type="text" class="w-full form-input" placeholder="Engine Torque (nm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Torque (rpm)
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_torque_rpm}}  @type="text" class="w-full form-input" placeholder="Engine Torque (rpm)" />
+                            <Input @value={{@options.vehicle.model_engine_torque_rpm}} @type="text" class="w-full form-input" placeholder="Engine Torque (rpm)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Valves per Cylinder
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_valves_per_cyl}}  @type="text" class="w-full form-input" placeholder="Valves per Cylinder" />
+                            <Input @value={{@options.vehicle.model_engine_valves_per_cyl}} @type="text" class="w-full form-input" placeholder="Valves per Cylinder" />
                         </div>
                     </div>
                 </ContentPanel>
@@ -243,35 +243,35 @@
                             <label>
                                 Fuel
                             </label>
-                            <Input @value={{@options.vehicle.model_engine_fuel}}  @type="text" class="w-full form-input" placeholder="Fuel Type" />
+                            <Input @value={{@options.vehicle.model_engine_fuel}} @type="text" class="w-full form-input" placeholder="Fuel Type" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Fuel Cap (L)
                             </label>
-                            <Input @value={{@options.vehicle.model_fuel_cap_l}}  @type="text" class="w-full form-input" placeholder="Fuel Cap Volume (L)" />
+                            <Input @value={{@options.vehicle.model_fuel_cap_l}} @type="text" class="w-full form-input" placeholder="Fuel Cap Volume (L)" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Liters Per km City
                             </label>
-                            <Input @value={{@options.vehicle.model_lkm_city}}  @type="text" class="w-full form-input" placeholder="Liters Per km City" />
+                            <Input @value={{@options.vehicle.model_lkm_city}} @type="text" class="w-full form-input" placeholder="Liters Per km City" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Liters Per km Highway
                             </label>
-                            <Input @value={{@options.vehicle.model_lkm_hwy}}  @type="text" class="w-full form-input" placeholder="Liters Per km Highway" />
+                            <Input @value={{@options.vehicle.model_lkm_hwy}} @type="text" class="w-full form-input" placeholder="Liters Per km Highway" />
                         </div>
 
                         <div class="input-group mb-2">
                             <label>
                                 Liters Per km Mixed
                             </label>
-                            <Input @value={{@options.vehicle.model_lkm_mixed}}  @type="text" class="w-full form-input" placeholder="Liters Per km Mixed" />
+                            <Input @value={{@options.vehicle.model_lkm_mixed}} @type="text" class="w-full form-input" placeholder="Liters Per km Mixed" />
                         </div>
                     </div>
                 </ContentPanel>

package/addon/components/settings-window.hbs

@@ -1,4 +1,4 @@
-<Overlay @onLoad={{this.onLoad}} @isOpen={{@isOpen}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} as |overlay|>
+<Overlay @onLoad={{this.onLoad}} @isOpen={{@isOpen}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{true}} @isMaximizable={{true}} @isMinimizable={{true}} @width="600px" as |overlay|>
     <Overlay::Header @overlay={{overlay}} @title="FleetOps Settings" @onPressCancel={{@onPressCancel}}>
         <Button @icon="save" @type="primary" @text={{if (media 'isMobile') "" "Save Changes"}} @onClick={{this.saveSettings}} @isLoading={{this.isSaving}} @disabled={{or this.isLoading this.isSaving}} />
     </Overlay::Header>

package/addon/components/vehicle-form-panel.hbs

@@ -1,43 +1,43 @@
-<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
+<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
-                {{#if @vehicle.id}}
-                    <Button @type="default" @icon="car" @helpText="View vehicle details" @onClick={{this.viewDetails}} />
+                {{#if this.vehicle.id}}
+                    <Button @type="default" @icon="car" @helpText="View vehicle details" @onClick={{this.onViewDetails}} @disabled={{this.isLoading}} />
                 {{/if}}
             </div>
             <div class="flex flex-1 justify-end">
                 <div class="mr-2">
-                    <Button @icon={{if @vehicle.id "save" "check"}} @type="primary" @text={{if @vehicle.id "Save Vehicle" "Create Vehicle"}} @onClick={{this.save}} />
+                    <Button @icon={{if this.vehicle.id "save" "check"}} @type="primary" @text={{if this.vehicle.id "Save Vehicle" "Create Vehicle"}} @onClick={{this.save}} @isLoading={{this.isLoading}} />
                 </div>
-                <Button @type="default" @icon="times" @helpText={{if @vehicle.id "Cancel edit vehicle" "Cancel new vehicle"}} @onClick={{@onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{if this.vehicle.id "Cancel edit vehicle" "Cancel new vehicle"}} @onClick={{this.onPressCancel}} @disabled={{this.isLoading}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
                     <div class="w-14 flex items-center justify-center">
-                        <Image src={{@vehicle.photo_url}} @fallbackSrc={{config "defaultValues.vehicleImage"}} alt={{@vehicle.name}} height="48" width="48" class="h-12 w-12" />
+                        <Image src={{this.vehicle.photo_url}} @fallbackSrc={{config "defaultValues.vehicleImage"}} alt={{this.vehicle.name}} height="48" width="48" class="h-12 w-12" />
                         <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{@vehicle.public_id}} />
+                            <InputInfo @text={{this.vehicle.public_id}} />
                         </Attach::Tooltip>
                     </div>
                     <div class="flex flex-col">
                         <h1 class="text-gray-900 dark:text-white text-2xl">
-                            {{#if @vehicle.id}}
-                                {{@vehicle.displayName}}
+                            {{#if this.vehicle.id}}
+                                {{this.vehicle.displayName}}
                             {{else}}
-                                {{#if @vehicle.displayName}}
-                                    {{@vehicle.displayName}}
+                                {{#if this.vehicle.displayName}}
+                                    {{this.vehicle.displayName}}
                                 {{else}}
                                     <span>New Vehicle</span>
                                 {{/if}}
                             {{/if}}
                         </h1>
                         <div class="-mt-1">
-                            {{#if @vehicle.driver}}
+                            {{#if this.vehicle.driver}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{@vehicle.driver.name}}</span>
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{this.vehicle.driver.name}}</span>
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
@@ -49,7 +49,7 @@
                 </div>
             </div>
             <div class="flex justify-end w-1/4">
-                <Badge @status={{@vehicle.status}} />
+                <Badge @status={{this.vehicle.status}} />
             </div>
         </div>
     </Overlay::Header>
@@ -62,50 +62,50 @@
                         <label>
                             Internal ID
                         </label>
-                        <Input @value={{@vehicle.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
+                        <Input @value={{this.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
                     </div>
 
                     <div class="input-group mb-2">
                         <label>
                             Plate Number
                         </label>
-                        <Input @value={{@vehicle.plate_number}} @type="text" class="w-full form-input" placeholder="Plate Number" />
+                        <Input @value={{this.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder="Plate Number" />
                     </div>
 
                     <div class="input-group mb-2">
                         <label>
                             VIN Number
                         </label>
-                        <Input @value={{@vehicle.vin}} @type="text" class="w-full form-input" placeholder="VIN Number" />
+                        <Input @value={{this.vehicle.vin}} @type="text" class="w-full form-input" placeholder="VIN Number" />
                     </div>
 
                     <div class="input-group mb-2">
                         <label>
                             Make
                         </label>
-                        <Input @value={{@vehicle.make}} @type="text" class="w-full form-input" placeholder="Vehicle Make" />
+                        <Input @value={{this.vehicle.make}} @type="text" class="w-full form-input" placeholder="Vehicle Make" />
                     </div>
 
                     <div class="input-group mb-2">
                         <label>
                             Model
                         </label>
-                        <Input @value={{@vehicle.model}} @type="text" class="w-full form-input" placeholder="Vehicle Model" />
+                        <Input @value={{this.vehicle.model}} @type="text" class="w-full form-input" placeholder="Vehicle Model" />
                     </div>
 
                     <div class="input-group mb-2">
                         <label>
                             Year
                         </label>
-                        <Input @value={{@vehicle.year}} @type="text" class="w-full form-input" placeholder="Vehicle Year" />
+                        <Input @value={{this.vehicle.year}} @type="text" class="w-full form-input" placeholder="Vehicle Year" />
                     </div>
 
                     <div class="input-group mb-2">
                         <label>
                             Driver Assigned
                         </label>
-                        <ModelSelect @modelName="driver" @selectedModel={{@vehicle.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut
-                                @vehicle.driver)}} as |model|>
+                        <ModelSelect @modelName="driver" @selectedModel={{this.vehicle.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut
+                                this.vehicle.driver)}} as |model|>
                             {{model.name}}
                         </ModelSelect>
                     </div>
@@ -116,13 +116,12 @@
                 <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                     <div class="input-group mb-2">
                         <InputLabel @labelText="Select map avatar" @helpText="Select an avatar to be used for rendering on maps when using geolocation tracking features." />
-                        <FetchSelect class="w-60" @placeholder="Select avatar" @path="vehicles/avatars" @value={{@vehicle.avatar_url}} @onSelect={{fn (mut
-                                @vehicle.avatar_url)}} as |option key|>
-                            {{titleize (humanize key)}}
+                        <FetchSelect @wrapperClass="w-60" @placeholder="Select avatar" @endpoint="vehicles/avatars" @selected={{this.vehicle.avatar_url}} @optionValue="value" @onChange={{fn (mut this.vehicle.avatar_url)}} as |option|>
+                            {{titleize (humanize option.key)}}
                         </FetchSelect>
                     </div>
                     <div>
-                        <img alt={{@vehicle.public_id}} src={{@vehicle.avatar_url}} class="w-24 h-24" />
+                        <img alt={{this.vehicle.public_id}} src={{this.vehicle.avatar_url}} class="w-24 h-24" />
                     </div>
                 </div>
             </ContentPanel>

package/addon/components/vehicle-form-panel.js

@@ -1,39 +1,122 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
 
 export default class VehicleFormPanelComponent extends Component {
+    /**
+     * @service store
+     */
     @service store;
+
+    /**
+     * @service notifications
+     */
     @service notifications;
+
+    /**
+     * @service hostRouter
+     */
     @service hostRouter;
+
+    /**
+     * @service loader
+     */
     @service loader;
 
+    /**
+     * @service contextPanel
+     */
+    @service contextPanel;
+
+    /**
+     * Overlay context.
+     * @type {any}
+     */
+    @tracked context;
+
+    /**
+     * Indicates whether the component is in a loading state.
+     * @type {boolean}
+     */
+    @tracked isLoading = false;
+
+    /**
+     * Constructs the component and applies initial state.
+     */
+    constructor() {
+        super(...arguments);
+        this.vehicle = this.args.vehicle;
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Saves the vehicle changes.
+     *
+     * @action
+     * @returns {Promise<any>}
+     */
     @action save() {
-        const { vehicle, onAfterSave } = this.args;
+        const { vehicle } = this;
+
+        this.loader.showLoader('.next-content-overlay-panel-container', { loadingMessage: 'Saving vehicle...', preserveTargetPosition: true });
+        this.isLoading = true;
 
-        this.loader.showLoader('.overlay-inner-content', 'Saving vehicle...');
+        contextComponentCallback(this, 'onBeforeSave', vehicle);
 
         try {
             return vehicle
                 .save()
                 .then((vehicle) => {
                     this.notifications.success(`Vehicle (${vehicle.displayName}) saved successfully.`);
-
-                    if (typeof onAfterSave === 'function') {
-                        onAfterSave(vehicle);
-                    }
+                    contextComponentCallback(this, 'onAfterSave', vehicle);
+                })
+                .catch((error) => {
+                    this.notifications.serverError(error);
                 })
-                .catch(this.notifications.serverError)
                 .finally(() => {
-                    this.loader.removeLoader();
+                    this.loader.removeLoader('.next-content-overlay-panel-container ');
+                    this.isLoading = false;
                 });
         } catch (error) {
-            this.loader.removeLoader();
+            this.loader.removeLoader('.next-content-overlay-panel-container ');
+            this.isLoading = false;
+        }
+    }
+
+    /**
+     * View the details of the vehicle.
+     *
+     * @action
+     */
+    @action onViewDetails() {
+        const isActionOverrided = contextComponentCallback(this, 'onViewDetails', this.vehicle);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.vehicle, 'viewing');
         }
     }
 
-    @action viewDetails() {
-        const { vehicle } = this.args;
-        return this.hostRouter.transitionTo('console.fleet-ops.management.vehicles.index.details', vehicle.public_id);
+    /**
+     * Handles cancel button press.
+     *
+     * @action
+     * @returns {any}
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.vehicle);
     }
 }

package/addon/components/vehicle-panel.hbs

@@ -1,29 +1,28 @@
-<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
+<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
-                {{!-- <Button @type="default" @icon="location-arrow" @helpText="Locate vehicle" @onClick={{@onPressCancel}} /> --}}
-                <Button @type="default" @icon="pen" @helpText="Edit vehicle" @onClick={{this.editVehicle}} />
+                <Button @type="default" @icon="pen" @helpText="Edit vehicle" @onClick={{this.onEdit}} />
             </div>
             <div class="flex flex-1 justify-end">
-                <Button @type="default" @icon="times" @helpText="Close vehicle details" @onClick={{@onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText="Close vehicle details" @onClick={{this.onPressCancel}} />
             </div>
         </div>
         <div class="flex flex-row justify-between w-full">
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
                     <div class="w-14 flex items-center justify-center">
-                        <Image src={{@vehicle.photo_url}} @fallbackSrc={{@vehicle.avatar_url}} alt={{@vehicle.name}} height="48" width="48" class="h-12 w-12" />
+                        <Image src={{this.vehicle.photo_url}} @fallbackSrc={{this.vehicle.avatar_url}} alt={{this.vehicle.name}} height="48" width="48" class="h-12 w-12" />
                         <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{@vehicle.public_id}} />
+                            <InputInfo @text={{this.vehicle.public_id}} />
                         </Attach::Tooltip>
                     </div>
                     <div class="flex flex-col">
-                        <h1 class="text-gray-900 dark:text-white text-2xl">{{@vehicle.display_name}}</h1>
+                        <h1 class="text-gray-900 dark:text-white text-2xl">{{this.vehicle.display_name}}</h1>
                         <div class="-mt-1">
-                            {{#if @vehicle.driver}}
+                            {{#if this.vehicle.driver}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{@vehicle.driver.name}}</span>
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{this.vehicle.driver.name}}</span>
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
@@ -36,7 +35,7 @@
                 </div>
             </div>
             <div class="flex justify-end w-1/4">
-                <Badge @status={{@vehicle.status}} />
+                <Badge @status={{this.vehicle.status}} />
             </div>
         </div>
     </Overlay::Header>
@@ -45,7 +44,7 @@
             <div class="ui-tabs mt-4">
                 <nav>
                     {{#each this.tabs as |tab|}}
-                        <a href="javascript:;" class="ui-tab {{if (eq this.currentTab tab.slug) 'active' }}" {{on "click" (fn this.changeTab tab.slug)}}>
+                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active' }}" {{on "click" (fn this.onTabChanged tab.slug)}}>
                             <FaIcon @icon={{tab.icon}} class="mr-1" />
                             <span>{{tab.title}}</span>
                         </a>
@@ -53,8 +52,8 @@
                 </nav>
             </div>
         </div>
-        <div class="tab-content tab-{{this.currentTab}}">
-            {{component this.tab.component vehicle=@vehicle tabOptions=this.tab params=this.tab.componentParams}}
+        <div class="tab-content tab-{{this.tab.slug}}">
+            {{component this.tab.component vehicle=this.vehicle tabOptions=this.tab params=this.tab.componentParams}}
         </div>
     </Overlay::Body>
 </Overlay>