@fleetbase/fleetops-engine 0.3.1 → 0.3.3

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/layout/fleet-ops-sidebar.js

@@ -34,10 +34,11 @@ export default class LayoutFleetOpsSidebarComponent extends Component {
         const operationsItems = [
             { title: 'Dashboard', icon: 'home', route: 'operations.orders' },
             { title: 'Service Rates', icon: 'file-invoice-dollar', route: 'operations.service-rates' },
+            { title: 'Scheduler', icon: 'calendar-day', route: 'operations.scheduler' },
         ];
 
         const resourcesItems = [
-            { title: 'Drivers', icon: 'route', route: 'management.drivers' },
+            { title: 'Drivers', icon: 'id-card', route: 'management.drivers' },
             { title: 'Vehicles', icon: 'truck', route: 'management.vehicles' },
             { title: 'Fleets', icon: 'user-group', route: 'management.fleets' },
             { title: 'Vendors', icon: 'warehouse', route: 'management.vendors' },

package/addon/components/live-map-drawer/driver-listing.hbs

@@ -0,0 +1,6 @@
+<div class="flex flex-row items-center px-5 py-2 border-b border-gray-200 dark:border-gray-700">
+    <div>
+        <Input @value={{this.query}} {{on "input" this.performSearch}} @type="text" class="form-input form-input-sm w-60" placeholder="Filter drivers by keyword..." />
+    </div>
+</div>
+<Table @rows={{this.drivers}} @columns={{this.columns}} @onSetup={{fn (mut this.table)}} />