@fleetbase/fleetops-engine 0.3.1 → 0.3.2

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

@@ -0,0 +1,211 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+
+export default class IssueFormPanelComponent extends Component {
+    /**
+     * @service store
+     */
+    @service store;
+
+    /**
+     * @service fetch
+     */
+    @service fetch;
+
+    /**
+     * @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;
+
+    /**
+     * All possible issue types
+     *
+     * @var {String}
+     */
+    @tracked issueTypes = ['vehicle', 'driver', 'route', 'payload-cargo', 'software-technical', 'operational', 'customer', 'security', 'environmental-sustainability'];
+
+    /**
+     *  The subcategories for issue types.
+     *
+     * @var {Object}
+     */
+    @tracked issueCategoriesByType = {
+        vehicle: ['Mechanical Problems', 'Cosmetic Damages', 'Tire Issues', 'Electronics and Instruments', 'Maintenance Alerts', 'Fuel Efficiency Issues'],
+        driver: ['Behavior Concerns', 'Documentation', 'Time Management', 'Communication', 'Training Needs', 'Health and Safety Violations'],
+        route: ['Inefficient Routes', 'Safety Concerns', 'Blocked Routes', 'Environmental Considerations', 'Unfavorable Weather Conditions'],
+        'payload-cargo': ['Damaged Goods', 'Misplaced Goods', 'Documentation Issues', 'Temperature-Sensitive Goods', 'Incorrect Cargo Loading'],
+        'software-technical': ['Bugs', 'UI/UX Concerns', 'Integration Failures', 'Performance', 'Feature Requests', 'Security Vulnerabilities'],
+        operational: ['Compliance', 'Resource Allocation', 'Cost Overruns', 'Communication', 'Vendor Management Issues'],
+        customer: ['Service Quality', 'Billing Discrepancies', 'Communication Breakdown', 'Feedback and Suggestions', 'Order Errors'],
+        security: ['Unauthorized Access', 'Data Concerns', 'Physical Security', 'Data Integrity Issues'],
+        'environmental-sustainability': ['Fuel Consumption', 'Carbon Footprint', 'Waste Management', 'Green Initiatives Opportunities'],
+    };
+
+    /**
+     * Selectable issue categories.
+     *
+     * @memberof IssueFormPanelComponent
+     */
+    @tracked issueCategories = [];
+
+    /**
+     * Issue status options.
+     *
+     * @memberof IssueFormPanelComponent
+     */
+    @tracked issueStatusOptions = ['pending', 'in-progress', 'backlogged', 'requires-update', 'in-review', 're-opened', 'duplicate', 'pending-review', 'escalated', 'completed', 'canceled'];
+
+    /**
+     * Issue priorty options.
+     *
+     * @memberof IssueFormPanelComponent
+     */
+    @tracked issuePriorityOptions = ['low', 'medium', 'high', 'critical', 'scheduled-maintenance', 'operational-suggestion'];
+
+    /**
+     * Constructs the component and applies initial state.
+     */
+    constructor() {
+        super(...arguments);
+        this.issue = this.args.issue;
+        this.issueCategories = getWithDefault(this.issueCategoriesByType, this.issue.type, []);
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Saves the issue changes.
+     *
+     * @action
+     * @returns {Promise<any>}
+     */
+    @action save() {
+        const { issue } = this;
+
+        this.loader.showLoader('.next-content-overlay-panel-container', { loadingMessage: 'Saving issue...', preserveTargetPosition: true });
+        this.isLoading = true;
+
+        contextComponentCallback(this, 'onBeforeSave', issue);
+
+        try {
+            return issue
+                .save()
+                .then((issue) => {
+                    this.notifications.success(`Issue (${issue.public_id}) saved successfully.`);
+                    contextComponentCallback(this, 'onAfterSave', issue);
+                })
+                .catch((error) => {
+                    this.notifications.serverError(error);
+                })
+                .finally(() => {
+                    this.loader.removeLoader('.next-content-overlay-panel-container ');
+                    this.isLoading = false;
+                });
+        } catch (error) {
+            this.loader.removeLoader('.next-content-overlay-panel-container ');
+            this.isLoading = false;
+        }
+    }
+
+    /**
+     * Trigger when the issue type is selected.
+     *
+     * @param {String} type
+     * @memberof IssueFormPanelComponent
+     */
+    @action onSelectIssueType(type) {
+        this.issue.type = type;
+        this.issue.category = null;
+        this.issueCategories = getWithDefault(this.issueCategoriesByType, type, []);
+    }
+
+    /**
+     * Add a tag to the issue
+     *
+     * @param {String} tag
+     * @memberof IssueFormPanelComponent
+     */
+    @action addTag(tag) {
+        if (!isArray(this.issue.tags)) {
+            this.issue.tags = [];
+        }
+
+        this.issue.tags.pushObject(tag);
+    }
+
+    /**
+     * Remove a tag from the issue tags.
+     *
+     * @param {Number} index
+     * @memberof IssueFormPanelComponent
+     */
+    @action removeTag(index) {
+        this.issue.tags.removeAt(index);
+    }
+
+    /**
+     * View the details of the issue.
+     *
+     * @action
+     */
+    @action onViewDetails() {
+        const isActionOverrided = contextComponentCallback(this, 'onViewDetails', this.issue);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.issue, 'viewing');
+        }
+    }
+
+    /**
+     * Handles cancel button press.
+     *
+     * @action
+     * @returns {any}
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.issue);
+    }
+}

package/addon/components/issue-panel/details.hbs

@@ -0,0 +1,48 @@
+<div class="p-4">
+    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">Reporter</div>
+                <div class="field-value">{{n-a @issue.reporter_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Assigned To</div>
+                <div class="field-value">{{n-a @issue.assignee_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Driver</div>
+                <div class="field-value">{{n-a @issue.driver_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Vehicle</div>
+                <div class="field-value">{{n-a @issue.vehicle_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Issue Type</div>
+                <div class="field-value">{{n-a @issue.type}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Issue Category</div>
+                <div class="field-value">{{n-a @issue.category}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Issue Priority</div>
+                <div class="field-value">
+                    <Badge @status={{@issue.priority}} />
+                </div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Date Created</div>
+                <div class="field-value">{{@issue.createdAtShort}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Coordinates</div>
+                <div class="field-value">{{point-coordinates @issue.location}}</div>
+            </div>
+            <div class="field-info-container col-span-2">
+                <div class="field-name">Report</div>
+                <div class="field-value">{{n-a @issue.report}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/issue-panel.hbs

@@ -0,0 +1,30 @@
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizable={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
+    <Overlay::Header @title="Issue Details" @status={{this.issue.public_id}} @hideStatusDot={{true}} @createdAt={{this.issue.createdAt}}>
+        <Button @type="default" @icon="pen" @helpText="Edit Issue" @onClick={{this.onEdit}} @wrapperClass="mr-2" />
+        <Button @type="default" @icon="times" @helpText={{if this.issue.id "Cancel edit Issue" "Cancel new Issue"}} @onClick={{this.onPressCancel}} />
+    </Overlay::Header>
+    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
+            <div class="ui-tabs mt-4">
+                <nav>
+                    {{#each this.tabs as |tab|}}
+                        <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>
+                    {{/each}}
+                </nav>
+            </div>
+        </div>
+        <div class="tab-content tab-{{this.tab.slug}}">
+            {{component this.tab.component issue=this.issue tabOptions=this.tab options=this.tab.componentParams}}
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/issue-panel.js

@@ -0,0 +1,160 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import IssuePanelDetailComponent from './issue-panel/details';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+export default class IssuePanelComponent 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;
+
+    /**
+     * Service for managing the context panel.
+     *
+     * @type {Service}
+     */
+    @service contextPanel;
+
+    /**
+     * The current active tab.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked tab;
+
+    /**
+     * The Issue being displayed or edited.
+     *
+     * @type {IssueModel}
+     * @tracked
+     */
+    @tracked issue;
+
+    /**
+     * Returns the array of tabs available for the panel.
+     *
+     * @type {Array}
+     */
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:issue-panel');
+        // this.universe._createMenuItem('Tracking', null, { icon: 'satellite-dish', component: IssuePanelTrackingComponent }),
+        const defaultTabs = [this.universe._createMenuItem('Details', null, { icon: 'circle-info', component: IssuePanelDetailComponent })];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+
+    /**
+     * Initializes the Issue panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.issue = this.args.issue;
+        this.tab = this.getTabUsingSlug(this.args.tab);
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * 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);
+    }
+
+    /**
+     * Handles edit action for the Issue.
+     *
+     * @method
+     * @action
+     */
+    @action onEdit() {
+        const isActionOverrided = contextComponentCallback(this, 'onEdit', this.issue);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.issue, 'editing', {
+                onAfterSave: () => {
+                    this.contextPanel.clear();
+                },
+            });
+        }
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.issue);
+    }
+
+    /**
+     * 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/layout/fleet-ops-sidebar.hbs

@@ -1,5 +1,5 @@
-<div class="mb-2">
-    <Button @text="Create new order" @type="primary" @size="xs" @icon="paper-plane" @iconPrefix="fas" @iconSize="sm" @wrapperClass="w-full" class="w-full" @onClick={{this.onClickCreateOrder}} />
+<div id="create-order-button-menu-wrapper" class="create-order-menu-button-wrapper mb-2">
+    <Button @text="Create new order" @type="primary" @size="xs" @icon="paper-plane" @iconPrefix="fas" @iconSize="sm" @wrapperClass="w-full create-order-button-wrapper" class="w-full create-order-button" @onClick={{this.onClickCreateOrder}} />
 </div>
 {{#each this.universeMenuItems as |menuItem|}}
     {{#if menuItem.renderComponentInPlace}}

package/addon/components/live-map.js

@@ -989,6 +989,7 @@ export default class LiveMapComponent extends Component {
      * @memberof LiveMapComponent
      */
     @action onDriverClicked(driver) {
+        this.contextPanel.clear();
         this.contextPanel.focus(driver);
     }
 
@@ -1019,6 +1020,7 @@ export default class LiveMapComponent extends Component {
      * @memberof LiveMapComponent
      */
     @action onVehicleClicked(vehicle) {
+        this.contextPanel.clear();
         this.contextPanel.focus(vehicle);
     }
 

package/addon/components/map-container/toolbar.hbs

@@ -1,30 +1,30 @@
 <MapContainer::ToolbarContainer ...attributes>
     <div class="next-map-container-toolbar next-map-container-toolbar-zoom-control">
-        <div>
-            <button type="button" class="toolbar-button" {{on "click" (fn this.onAction "onZoomIn")}}>
+        <div id="map-toolbar-zoom-in-button-wrapper">
+            <button type="button" id="map-toolbar-zoom-in-button" class="toolbar-button" {{on "click" (fn this.onAction "onZoomIn")}}>
                 <FaIcon @icon="plus" @prefix="fas" class="text-gray-100" />
             </button>
         </div>
-        <div>
+        <div id="map-toolbar-zoom-out-button-wrapper">
             <button type="button" class="toolbar-button" {{on "click" (fn this.onAction "onZoomOut")}}>
-                <FaIcon @icon="minus" @prefix="fas" class="text-gray-100" />
+                <FaIcon @icon="minus" id="map-toolbar-zoom-out-button" @prefix="fas" class="text-gray-100" />
             </button>
         </div>
     </div>
     <div class="next-map-container-toolbar-panel next-map-container-toolbar-actions">
-        <button type="button" class="toolbar-button is-action" {{on "click" (fn this.onAction "onPressCreateOrder")}}>
+        <button type="button" id="map-toolbar-create-order-button" class="toolbar-button is-action" {{on "click" (fn this.onAction "onPressCreateOrder")}}>
             <FaIcon @icon="paper-plane" />
             <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                 <InputInfo @text="Create Order" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
             </Attach::Tooltip>
         </button>
-        <button type="button" class="toolbar-button" {{on "click" (fn this.onAction "onPressSearch")}}>
+        <button type="button" id="map-toolbar-search-button" class="toolbar-button" {{on "click" (fn this.onAction "onPressSearch")}}>
             <FaIcon @icon="search" />
             <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
                 <InputInfo @text="Search" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
             </Attach::Tooltip>
         </button>
-        <button type="button" class="toolbar-button relative" {{on "click" (fn this.onAction "onPressViewOrders")}}>
+        <button type="button" id="map-toolbar-view-orders-button" class="toolbar-button relative" {{on "click" (fn this.onAction "onPressViewOrders")}}>
             <div class="active-orders-count absolute top-0 right-0 -mr-2.5 -mt-1">
                 <div class="relative flex w-5 h-5 rounded-full">
                     <div class="absolute inset-0 rounded-full w-5 h-5 text-xs bg-blue-500 opacity-75 {{if @activeOrdersCount 'animate-ping'}}"></div>
@@ -36,7 +36,7 @@
                 <InputInfo @text="View Orders" @iconClass="hidden" class="py-1 px-2 bg-gray-900 -mt-1" />
             </Attach::Tooltip>
         </button>
-        <BasicDropdown @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+        <BasicDropdown id="map-toolbar-service-areas-button" @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
             <dd.Trigger class="toolbar-button">
                 <FaIcon @icon="map-marked-alt" />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="right">
@@ -47,7 +47,7 @@
                 <MapContainer::Toolbar::ZonesPanel @dd={{dd}} @liveMap={{@liveMap}} @map={{@map}} @onPressCreateServiceArea={{@onPressCreateServiceArea}} />
             </dd.Content>
         </BasicDropdown>
-        <BasicDropdown @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
+        <BasicDropdown id="map-toolbar-visibility-controls-button" @horizontalPosition="right" @calculatePosition={{this.calculatePosition}} @renderInPlace={{true}} as |dd|>
             <dd.Trigger class="toolbar-button">
                 <FaIcon @icon="eye" />
                 <Attach::Tooltip @class="clean" @animation="scale" @placement="right">

package/addon/components/map-container/topbar.hbs

@@ -1 +1 @@
-<div class="next-map-container-topbar" ...attributes>{{yield}}</div>
+<div id="map-topbar-container" class="next-map-container-topbar" ...attributes>{{yield}}</div>

package/addon/components/modals/issue-details.hbs

@@ -0,0 +1,38 @@
+<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
+    <div class="modal-body-container">
+        <div class="grid grid-cols-2 flex-col md:flex-row gap-2 mb-6">
+            <div class="field-info-container">
+                <div class="field-name">Reporter</div>
+                <div class="field-value">{{n-a @issue.reporter}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Assigned To</div>
+                <div class="field-value">{{n-a @issue.assignee}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Driver</div>
+                <div class="field-value">{{n-a @issue.driver}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Vehicle</div>
+                <div class="field-value">{{n-a @issue.vehicle.displayName}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Issue Type</div>
+                <div class="field-value">{{n-a @issue.type}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Issue Category</div>
+                <div class="field-value">{{n-a @issue.category}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Date Created</div>
+                <div class="field-value">{{@issue.createdAtShort}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Coordinates</div>
+                <div class="field-value">{{point-coordinates @issue.location}}</div>
+            </div>
+        </div>
+    </div>
+</Modal::Default>