@fleetbase/fleetops-engine 0.2.8 → 0.3.0

package/addon/components/context-panel.hbs

@@ -0,0 +1,5 @@
+{{#if this.contextPanel.currentContextRegistry}}
+    {{#let this.contextPanel.currentContext this.contextPanel.currentContextRegistry  this.contextPanel.currentContextComponentArguments as |model registry dynamicArgs|}}
+        {{component registry.component context=model dynamicArgs=dynamicArgs onPressCancel=this.contextPanel.clear options=this.contextPanel.contextOptions}}
+    {{/let}}
+{{/if}}

package/addon/components/context-panel.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class ContextPanelComponent extends Component {
+    @service contextPanel;
+}

package/addon/components/driver-card-mini.js

@@ -1,25 +1,46 @@
 import Component from '@glimmer/component';
-import { inject as controller } from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 
+/**
+ * DriverCardMiniComponent
+ *
+ * A mini-component responsible for displaying a specific driver's card.
+ *
+ * @extends Component
+ *
+ * @property {Service} store - Ember's store service.
+ * @property {Service} fetch - Service for fetching data.
+ * @property {Service} contextPanel - Service for context panel operations.
+ */
 export default class DriverCardMiniComponent extends Component {
-    @controller('management.drivers.index') drivers;
+    /**
+     * Ember's store service.
+     * @type {Service}
+     */
     @service store;
 
-    toModel(record, modelName) {
-        // set id
-        if (!record.id && record.uuid) {
-            record.id = record.uuid;
-        }
+    /**
+     * Fetch service.
+     * @type {Service}
+     */
+    @service fetch;
 
-        const normalized = this.store.normalize(modelName, record);
-        return this.store.push(normalized);
-    }
+    /**
+     * ContextPanel service.
+     * @type {Service}
+     */
+    @service contextPanel;
 
+    /**
+     * View the details of a specific driver.
+     *
+     * @param {Object} record - The driver record to view.
+     * @action
+     * @returns {Promise} Resolves when the driver's details are focused in the context panel.
+     */
     @action viewDriver(record) {
-        const driver = this.toModel(record, 'driver');
-
-        return this.drivers.viewDriver(driver);
+        const driver = this.fetch.jsonToModel(record, 'driver');
+        return this.contextPanel.focus(driver);
     }
 }

package/addon/components/driver-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 @driver.id}}
-                    <Button @type="default" @icon="id-card" @helpText="View driver details" @onClick={{this.viewDetails}} />
+                {{#if this.driver.id}}
+                    <Button @type="default" @icon="id-card" @helpText="View driver details" @onClick={{this.onViewDetails}} />
                 {{/if}}
             </div>
             <div class="flex flex-1 justify-end">
                 <div class="mr-2">
-                    <Button @icon={{if @driver.id "save" "check"}} @type="primary" @text={{if @driver.id "Save Driver" "Create Driver"}} @onClick={{this.save}} />
+                    <Button @icon={{if this.driver.id "save" "check"}} @type="primary" @text={{if this.driver.id "Save Driver" "Create Driver"}} @onClick={{this.save}} />
                 </div>
-                <Button @type="default" @icon="times" @helpText={{if @driver.id "Cancel edit driver" "Cancel new driver"}} @onClick={{@onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText={{if this.driver.id "Cancel edit driver" "Cancel new driver"}} @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-start">
-                        <Image src={{@driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{@driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <Image src={{this.driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
                         <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{@driver.public_id}} />
+                            <InputInfo @text={{this.driver.public_id}} />
                         </Attach::Tooltip>
                     </div>
                     <div class="flex flex-col pt-2">
                         <h1 class="text-gray-900 dark:text-white text-2xl">
-                            {{#if @driver.id}}
-                                {{@driver.name}}
+                            {{#if this.driver.id}}
+                                {{this.driver.name}}
                             {{else}}
-                                {{#if @driver.name}}
-                                    {{@driver.name}}
+                                {{#if this.driver.name}}
+                                    {{this.driver.name}}
                                 {{else}}
                                     <span>New Driver</span>
                                 {{/if}}
                             {{/if}}
                         </h1>
                         <div class="-mt-1">
-                            {{#if @driver.vehicle}}
+                            {{#if this.driver.vehicle}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{@driver.vehicle.displayName}}</span>
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{this.driver.vehicle.displayName}}</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={{@driver.status}} />
+                <Badge @status={{this.driver.status}} />
             </div>
         </div>
     </Overlay::Header>
@@ -61,7 +61,7 @@
                     <label>
                         Name
                     </label>
-                    <Input @value={{@driver.name}} @type="text" class="w-full form-input" placeholder="Name" />
+                    <Input @value={{this.driver.name}} @type="text" class="w-full form-input" placeholder="Name" />
                 </div>
             </div>
 
@@ -70,35 +70,35 @@
                     <label>
                         Internal ID
                     </label>
-                    <Input @value={{@driver.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
+                    <Input @value={{this.driver.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
                 </div>
 
                 <div class="input-group">
                     <label>
                         Drivers License
                     </label>
-                    <Input @value={{@driver.drivers_license_number}} @type="text" class="w-full form-input" placeholder="Drivers License" />
+                    <Input @value={{this.driver.drivers_license_number}} @type="text" class="w-full form-input" placeholder="Drivers License" />
                 </div>
 
                 <div class="input-group">
                     <label>
                         Email
                     </label>
-                    <Input @value={{@driver.email}} @type="text" class="w-full form-input" placeholder="Email" />
+                    <Input @value={{this.driver.email}} @type="text" class="w-full form-input" placeholder="Email" />
                 </div>
 
                 <div class="input-group">
                     <label>
                         Phone
                     </label>
-                    <PhoneInput @value={{@driver.phone}} @onInput={{fn (mut @driver.phone)}} class="form-input w-full" />
+                    <PhoneInput @value={{this.driver.phone}} @onInput={{fn (mut this.driver.phone)}} class="form-input w-full" />
                 </div>
 
                 <div class="input-group">
                     <label>
                         Vendor
                     </label>
-                    <ModelSelect @modelName="vendor" @selectedModel={{@driver.vendor}} @placeholder="Select Vendor" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @driver.vendor)}} as |model|>
+                    <ModelSelect @modelName="vendor" @selectedModel={{this.driver.vendor}} @placeholder="Select Vendor" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.driver.vendor)}} as |model|>
                         {{model.name}}
                     </ModelSelect>
                 </div>
@@ -107,7 +107,7 @@
                     <label>
                         Vehicle
                     </label>
-                    <ModelSelect @modelName="vehicle" @selectedModel={{@driver.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @driver.vehicle)}} as |model|>
+                    <ModelSelect @modelName="vehicle" @selectedModel={{this.driver.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.driver.vehicle)}} as |model|>
                         {{model.display_name}}
                     </ModelSelect>
                 </div>
@@ -116,14 +116,14 @@
                     <label>
                         City
                     </label>
-                    <Input @value={{@driver.city}} @type="text" class="w-full form-input" placeholder="City" />
+                    <Input @value={{this.driver.city}} @type="text" class="w-full form-input" placeholder="City" />
                 </div>
 
                 <div class="input-group">
                     <label>
                         Country
                     </label>
-                    <CountrySelect class="w-full form-input form-select form-datalist" @value={{@driver.country}} @onChange={{fn (mut @driver.country)}} placeholder="Country" />
+                    <CountrySelect class="w-full form-input form-select form-datalist" @value={{this.driver.country}} @onChange={{fn (mut this.driver.country)}} placeholder="Country" />
                 </div>
             </div>
         </div>

package/addon/components/driver-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 DriverFormPanelComponent 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.driver = this.args.driver;
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Saves the driver changes.
+     *
+     * @action
+     * @returns {Promise<any>}
+     */
     @action save() {
-        const { driver, onAfterSave } = this.args;
+        const { driver } = this;
+
+        this.loader.showLoader('.next-content-overlay-panel-container', { loadingMessage: 'Saving driver...', preserveTargetPosition: true });
+        this.isLoading = true;
 
-        this.loader.showLoader('.overlay-inner-content', 'Saving driver...');
+        contextComponentCallback(this, 'onBeforeSave', driver);
 
         try {
             return driver
                 .save()
-                .then((vehicle) => {
+                .then((driver) => {
                     this.notifications.success(`Driver (${driver.name}) saved successfully.`);
-
-                    if (typeof onAfterSave === 'function') {
-                        onAfterSave(vehicle);
-                    }
+                    contextComponentCallback(this, 'onAfterSave', driver);
+                })
+                .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 driver.
+     *
+     * @action
+     */
+    @action onViewDetails() {
+        const isActionOverrided = contextComponentCallback(this, 'onViewDetails', this.driver);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.driver, 'viewing');
         }
     }
 
-    @action viewDetails() {
-        const { driver } = this.args;
-        return this.hostRouter.transitionTo('console.fleet-ops.management.drivers.index.details', driver.public_id);
+    /**
+     * Handles cancel button press.
+     *
+     * @action
+     * @returns {any}
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.driver);
     }
 }

package/addon/components/driver-panel.hbs

@@ -1,29 +1,29 @@
-<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">
                 {{!-- <Button @type="default" @icon="location-arrow" @helpText="Locate driver" @onClick={{@onPressCancel}} /> --}}
-                <Button @type="default" @icon="pen" @helpText="Edit driver" @onClick={{this.editDriver}} />
+                <Button @type="default" @icon="pen" @helpText="Edit driver" @onClick={{this.onEdit}} />
             </div>
             <div class="flex flex-1 justify-end">
-                <Button @type="default" @icon="times" @helpText="Close driver details" @onClick={{@onPressCancel}} />
+                <Button @type="default" @icon="times" @helpText="Close driver 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-start">
-                        <Image src={{@driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{@driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <Image src={{this.driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
                         <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{@driver.public_id}} />
+                            <InputInfo @text={{this.driver.public_id}} />
                         </Attach::Tooltip>
                     </div>
                     <div class="flex flex-col">
-                        <h1 class="text-gray-900 dark:text-white text-2xl">{{@driver.name}}</h1>
+                        <h1 class="text-gray-900 dark:text-white text-2xl">{{this.driver.name}}</h1>
                         <div class="-mt-1">
-                            {{#if @driver.vehicle}}
+                            {{#if this.driver.vehicle}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{@driver.vehicle.displayName}}</span>
+                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{this.driver.vehicle.displayName}}</span>
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
@@ -36,7 +36,7 @@
                 </div>
             </div>
             <div class="flex justify-end w-1/4">
-                <Badge @status={{@driver.status}} />
+                <Badge @status={{this.driver.status}} />
             </div>
         </div>
     </Overlay::Header>
@@ -45,7 +45,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 +53,8 @@
                 </nav>
             </div>
         </div>
-        <div class="tab-content tab-{{this.currentTab}}">
-            {{component this.tab.component driver=@driver tabOptions=this.tab params=this.tab.componentParams}}
+        <div class="tab-content tab-{{this.tab.slug}}">
+            {{component this.tab.component driver=this.driver tabOptions=this.tab params=this.tab.componentParams}}
         </div>
     </Overlay::Body>
 </Overlay>

package/addon/components/driver-panel.js

@@ -1,21 +1,76 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action, computed } from '@ember/object';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { isArray } from '@ember/array';
 import DriverPanelDetailComponent from './driver-panel/details';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
 
 export default class DriverPanelComponent extends Component {
+    /**
+     * Service for fetching data.
+     *
+     * @type {Service}
+     */
     @service fetch;
+
+    /**
+     * Service for managing modals.
+     *
+     * @type {Service}
+     */
     @service modalsManager;
+
+    /**
+     * Universe service for managing global data and settings.
+     *
+     * @type {Service}
+     */
     @service universe;
+
+    /**
+     * Ember data store service.
+     *
+     * @type {Service}
+     */
     @service store;
+
+    /**
+     * Service for managing routing within the host app.
+     *
+     * @type {Service}
+     */
     @service hostRouter;
-    @tracked currentTab;
-    @tracked devices = [];
-    @tracked deviceApi = {};
-    @tracked vehicle;
 
+    /**
+     * Service for managing the context panel.
+     *
+     * @type {Service}
+     */
+    @service contextPanel;
+
+    /**
+     * The current active tab.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked tab;
+
+    /**
+     * The driver being displayed or edited.
+     *
+     * @type {DriverModel}
+     * @tracked
+     */
+    @tracked driver;
+
+    /**
+     * Returns the array of tabs available for the panel.
+     *
+     * @type {Array}
+     */
     get tabs() {
         const registeredTabs = this.universe.getMenuItemsFromRegistry('component:driver-panel');
         // this.universe._createMenuItem('Tracking', null, { icon: 'satellite-dish', component: DriverPanelTrackingComponent }),
@@ -28,30 +83,79 @@ export default class DriverPanelComponent extends Component {
         return defaultTabs;
     }
 
-    @computed('currentTab', 'tabs') get tab() {
-        if (this.currentTab) {
-            return this.tabs.find(({ slug }) => slug === this.currentTab);
-        }
+    /**
+     * Initializes the driver panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.driver = this.args.driver;
+        this.tab = this.getTabUsingSlug(this.args.tab);
+        applyContextComponentArguments(this);
+    }
 
-        return null;
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
     }
 
-    constructor() {
-        super(...arguments);
-        this.vehicle = this.args.vehicle;
-        this.changeTab(this.args.tab || 'details');
+    /**
+     * Handles changing the active tab.
+     *
+     * @method
+     * @param {String} tab - The new tab to switch to.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.tab = this.getTabUsingSlug(tab);
+        contextComponentCallback(this, 'onTabChanged', tab);
     }
 
-    @action async changeTab(tab) {
-        this.currentTab = tab;
+    /**
+     * Handles edit action for the driver.
+     *
+     * @method
+     * @action
+     */
+    @action onEdit() {
+        const isActionOverrided = contextComponentCallback(this, 'onEdit', this.driver);
 
-        if (typeof this.args.onTabChanged === 'function') {
-            this.args.onTabChanged(tab);
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.driver, 'editing', {
+                onAfterSave: () => {
+                    this.contextPanel.clear();
+                },
+            });
         }
     }
 
-    @action editDriver() {
-        const { driver } = this.args;
-        return this.hostRouter.transitionTo('console.fleet-ops.management.drivers.index.edit', driver.public_id);
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.driver);
+    }
+
+    /**
+     * Finds and returns a tab based on its slug.
+     *
+     * @param {String} tabSlug - The slug of the tab.
+     * @returns {Object|null} The found tab or null.
+     */
+    getTabUsingSlug(tabSlug) {
+        if (tabSlug) {
+            return this.tabs.find(({ slug }) => slug === tabSlug);
+        }
+
+        return this.tabs[0];
     }
 }

package/addon/components/fleet-vehicle-listing.hbs

@@ -13,7 +13,7 @@
         </div>
         <div class="w-56">
             {{#if @onAddVehicle}}
-                <ModelSelect @modelName="vehicle" @selectedModel={{@options.selectedVehicle}} @placeholder="Add vehicle to fleet" @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAdd}} as |model|>
+                <ModelSelect @modelName="vehicle" @query={{hash assignedFleet=false}}  @selectedModel={{@options.selectedVehicle}} @placeholder="Add vehicle to fleet" @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAdd}} as |model|>
                     {{model.display_name}}
                 </ModelSelect>
             {{/if}}