@fleetbase/fleetops-engine 0.3.1 → 0.3.2

package/addon/components/fuel-report-form-panel.hbs

@@ -0,0 +1,41 @@
+<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+    <Overlay::Header @title={{if this.fuelReport.public_id this.fuelReport.name "New Fuel Report"}} @status={{this.fuelReport.public_id}} @hideStatusDot={{true}} @createdAt={{this.fuelReport.createdAt}} @titleWrapperClass="leading-5">
+        <div class="flex flex-1 justify-end">
+            <Button @icon={{if this.fuelReport.id "save" "check"}} @type="primary" @text={{if this.fuelReport.id "Save Fuel Report" "Create Fuel Report"}} @onClick={{this.save}} @wrapperClass="mr-2" />
+            {{#if this.fuelReport.id}}
+                <Button @type="default" @icon="gas-pump" @helpText="View fuel report details" @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
+            {{/if}}
+            <Button @type="default" @icon="times" @helpText={{if this.fuelReport.id "Cancel edit fuel report" "Cancel new fuel report"}} @onClick={{this.onPressCancel}} />
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="grid grid-cols-1 text-xs dark:text-gray-100">
+            <InputGroup @name="Reporter">
+                <ModelSelect @modelName="user" @selectedModel={{this.fuelReport.reporter}} @placeholder="Select Reporter" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.fuelReport.reporter)}} @onChangeId={{fn (mut this.fuelReport.reported_by_uuid)}} as |model|>
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+            <InputGroup @name="Driver">
+                <ModelSelect @modelName="driver" @selectedModel={{this.fuelReport.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.fuelReport.driver)}} @onChangeId={{fn (mut this.fuelReport.driver_uuid)}} as |model|>
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+            <InputGroup @name="Vehicle">
+                <ModelSelect @modelName="vehicle" @selectedModel={{this.fuelReport.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.fuelReport.vehicle)}} @onChangeId={{fn (mut this.fuelReport.vehicle_uuid)}} as |model|>
+                    {{model.display_name}}
+                </ModelSelect>
+            </InputGroup>
+            <InputGroup @name="Odometer" @type="number" @value={{this.fuelReport.odometer}} />
+            <InputGroup @name="Cost">
+                <MoneyInput class="w-full" @value={{this.fuelReport.amount}} @currency={{this.fuelReport.currency}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut this.fuelReport.currency)}} />
+            </InputGroup>
+            <InputGroup @name="Volume" @helpText="Select the metric unit and volume of fuel to report." @wrapperClass="w-full">
+                <UnitInput class="w-full" @measurement="volume" @value={{this.fuelReport.volume}} @unit={{this.fuelReport.metric_unit}} @canSelectUnit={{true}} @onUnitChange={{fn (mut this.fuelReport.metric_unit)}} />
+            </InputGroup>
+            <InputGroup @name="Coordinates">
+                <CoordinatesInput @value={{this.fuelReport.location}} @onChange={{fn (mut this.fuelReport.location)}} />
+            </InputGroup>
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/fuel-report-form-panel.js

@@ -0,0 +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 FuelReportFormPanelComponent 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.fuelReport = this.args.fuelReport;
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Saves the fuel report changes.
+     *
+     * @action
+     * @returns {Promise<any>}
+     */
+    @action save() {
+        const { fuelReport } = this;
+
+        this.loader.showLoader('.next-content-overlay-panel-container', { loadingMessage: 'Saving fuel report...', preserveTargetPosition: true });
+        this.isLoading = true;
+
+        contextComponentCallback(this, 'onBeforeSave', fuelReport);
+
+        try {
+            return fuelReport
+                .save()
+                .then((fuelReport) => {
+                    this.notifications.success(`Fuel report saved successfully.`);
+                    contextComponentCallback(this, 'onAfterSave', fuelReport);
+                })
+                .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;
+        }
+    }
+
+    /**
+     * View the details of the fuel-report.
+     *
+     * @action
+     */
+    @action onViewDetails() {
+        const isActionOverrided = contextComponentCallback(this, 'onViewDetails', this.fuelReport);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.fuelReport, 'viewing');
+        }
+    }
+
+    /**
+     * Handles cancel button press.
+     *
+     * @action
+     * @returns {any}
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.fuelReport);
+    }
+}

package/addon/components/fuel-report-panel/details.hbs

@@ -0,0 +1,38 @@
+<div class="p-4">
+    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+        <div class="grid grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
+            <div class="field-info-container col-span-2">
+                <div class="field-name">Reporter</div>
+                <div class="field-value">{{n-a @fuelReport.reporter_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Driver</div>
+                <div class="field-value">{{n-a @fuelReport.driver_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Vehicle</div>
+                <div class="field-value">{{n-a @fuelReport.vehicle_name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Odometer</div>
+                <div class="field-value">{{n-a @fuelReport.odometer}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Cost</div>
+                <div class="field-value">{{format-currency @fuelReport.amount @fuelReport.currency}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Fuel/ Volume</div>
+                <div class="field-value">{{pluralize @fuelReport.volume @fuelReport.metric_unit}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Date Created</div>
+                <div class="field-value">{{@fuelReport.createdAtShort}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Coordinates</div>
+                <div class="field-value">{{point-coordinates @fuelReport.location}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/fuel-report-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="Fuel Report Details" @status={{this.fuelReport.public_id}} @hideStatusDot={{true}} @createdAt={{this.fuelReport.createdAt}}>
+        <Button @type="default" @icon="pen" @helpText="Edit fuel report" @onClick={{this.onEdit}} @wrapperClass="mr-2" />
+        <Button @type="default" @icon="times" @helpText={{if this.fuelReport.id "Cancel edit fuel report" "Cancel new fuel report"}} @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 fuelReport=this.fuelReport tabOptions=this.tab options=this.tab.componentParams}}
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/fuel-report-panel.js

@@ -0,0 +1,161 @@
+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 FuelReportPanelDetailsComponent from './fuel-report-panel/details';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+
+export default class FuelReportPanelComponent 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 fuel-report being displayed or edited.
+     *
+     * @type {fuelReport}
+     * @tracked
+     */
+    @tracked fuelReport;
+
+    /**
+     * Returns the array of tabs available for the panel.
+     *
+     * @type {Array}
+     */
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:fuel-report-panel');
+        // this.universe._createMenuItem('Tracking', null, { icon: 'satellite-dish', component: VehiclePanelTrackingComponent }),
+        const defaultTabs = [this.universe._createMenuItem('Details', null, { icon: 'circle-info', component: FuelReportPanelDetailsComponent })];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+
+    /**
+     * Initializes the fuel-report panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.fuelReport = this.args.fuelReport;
+        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 fuel-report.
+     *
+     * @method
+     * @action
+     */
+    @action onEdit() {
+        const isActionOverrided = contextComponentCallback(this, 'onEdit', this.fuelReport);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.fuelReport, '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.fuelReport);
+    }
+
+    /**
+     * 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/issue-form-panel.hbs

@@ -0,0 +1,85 @@
+<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+    <Overlay::Header @title={{if this.issue.public_id this.issue.name "New Issue"}} @status={{this.issue.public_id}} @hideStatusDot={{true}} @createdAt={{this.issue.createdAt}} @titleWrapperClass="leading-5">
+        <div class="flex flex-1 justify-end">
+            <Button @icon={{if this.issue.id "save" "check"}} @type="primary" @text={{if this.issue.id "Save Issue" "Create Issue"}} @onClick={{this.save}} @wrapperClass="mr-2" />
+            {{#if this.issue.id}}
+                <Button @type="default" @icon="circle-exclamation" @helpText="View issue details" @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
+            {{/if}}
+            <Button @type="default" @icon="times" @helpText={{if this.issue.id "Cancel edit issue" "Cancel new issue"}} @onClick={{this.onPressCancel}} />
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="grid grid-cols-1 text-xs dark:text-gray-100">
+            <InputGroup @name="Reported By">
+                <ModelSelect @modelName="user" @selectedModel={{this.issue.reporter}} @placeholder="Select Reporter" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.issue.reporter)}} @onChangeId={{fn (mut this.issue.reported_by_uuid)}} as |model|>
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name="Assigned To">
+                <ModelSelect @modelName="user" @selectedModel={{this.issue.assignee}} @placeholder="Select Assignee" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.issue.assignee)}} @onChangeId={{fn (mut this.issue.assigned_to_uuid)}} as |model|>
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name="Driver">
+                <ModelSelect @modelName="driver" @selectedModel={{this.issue.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.issue.driver)}} as |model|>
+                    {{model.name}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name="Vehicle">
+                <ModelSelect @modelName="vehicle" @selectedModel={{this.issue.vehicle}} @placeholder="Select Vehicle" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.issue.vehicle)}} as |model|>
+                    {{model.displayName}}
+                </ModelSelect>
+            </InputGroup>
+
+            <InputGroup @name="Issue Type">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect @options={{this.issueTypes}} @selected={{this.issue.type}} @onChange={{this.onSelectIssueType}} @placeholder="Select issue type" @triggerClass="form-select form-input" as |type|>
+                        {{smart-humanize type}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name="Issue Category">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect @options={{this.issueCategories}} @selected={{this.issue.category}} @onChange={{fn (mut this.issue.category)}} @placeholder="Select issue category" @triggerClass="form-select form-input" @disabled={{not this.issueCategories}} as |category|>
+                        {{smart-humanize category}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name="Issue Report">
+                <Textarea @value={{this.issue.report}} aria-label="Issue Report" class="w-full form-input" placeholder="Issue Report" rows={{5}} />
+            </InputGroup>
+
+            <InputGroup @name="Issue Tags">
+                <TagInput class="form-input" @placeholder="Add tags" @allowSpacesInTags={{true}} @tags={{this.issue.tags}} @addTag={{this.addTag}} @removeTagAtIndex={{this.removeTag}} as |tag|>
+                    {{tag}}
+                </TagInput>
+            </InputGroup>
+
+            <InputGroup @name="Issue Priority">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect @options={{this.issuePriorityOptions}} @selected={{this.issue.priority}} @onChange={{fn (mut this.issue.priority)}} @placeholder="Select issue priority" @triggerClass="form-select form-input" as |priority|>
+                        {{smart-humanize priority}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name="Status">
+                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                    <PowerSelect @options={{this.issueStatusOptions}} @selected={{this.issue.status}} @onChange={{fn (mut this.issue.status)}} @placeholder="Select issue status" @triggerClass="form-select form-input" as |status|>
+                        {{smart-humanize status}}
+                    </PowerSelect>
+                </div>
+            </InputGroup>
+
+            <InputGroup @name="Coordinates">
+                <CoordinatesInput @value={{this.issue.location}} @onChange={{fn (mut this.issue.location)}} />
+            </InputGroup>
+        </div>
+    </Overlay::Body>
+</Overlay>