@fleetbase/fleetops-engine 0.3.1 → 0.3.2

package/addon/components/vendor-form-panel/edit-form.js

@@ -0,0 +1,51 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class VendorFormPanelEditFormComponent extends Component {
+    @service store;
+    @service contextPanel;
+    @tracked isIntegratedVendor;
+    @tracked isEditingCredentials = false;
+    @tracked showAdvancedOptions = false;
+
+    constructor() {
+        super(...arguments);
+        this.vendor = this.args.vendor;
+        this.isIntegratedVendor = this.vendor && this.vendor.type === 'integrated-vendor';
+    }
+
+    @action toggleCredentialsReset() {
+        if (this.isEditingCredentials) {
+            this.isEditingCredentials = false;
+        } else {
+            this.isEditingCredentials = true;
+        }
+    }
+
+    @action toggleAdvancedOptions() {
+        if (this.showAdvancedOptions) {
+            this.showAdvancedOptions = false;
+        } else {
+            this.showAdvancedOptions = true;
+        }
+    }
+
+    @action selectVendorAddress(place) {
+        this.vendor.place = place;
+        this.vendor.place_uuid = place.id;
+    }
+
+    @action async editAddress() {
+        let place;
+
+        if (this.vendor.has_place) {
+            place = await this.vendor.place;
+        } else {
+            place = this.store.createRecord('place');
+        }
+
+        return this.contextPanel.focus(place);
+    }
+}

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

@@ -0,0 +1,48 @@
+<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">
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex flex-1 flex-row">
+                <div class="w-14">
+                    <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
+                        <img src={{this.vendor.logo_url}} alt={{this.vendor.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo @text="Upload new photo" />
+                        </Attach::Tooltip>
+                        <div class="upload-avatar-button-wrapper rounded-lg">
+                            <UploadButton @name="photos" @accept="image/*" @onFileAdded={{this.onUploadNewPhoto}} @icon="upload" @hideButtonText={{true}} @labelClass="upload-avatar-label-overlay" class="w-12 btn-reset" />
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col">
+                    <h1 class="text-gray-900 dark:text-white text-2xl">
+                        {{#if this.vendor.id}}
+                            {{this.vendor.name}}
+                        {{else}}
+                            <span>New Vendor</span>
+                        {{/if}}
+                    </h1>
+                    <div class="-mt-1">
+                        <div class="flex flex-row items-center">
+                            <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{n-a (smart-humanize this.vendor.type)}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <Button @icon={{if this.vendor.id "save" "check"}} @type="primary" @text={{if this.vendor.id "Save Vendor" "Create Vendor"}} @onClick={{this.save}} @wrapperClass="mr-2" />
+                {{#if this.vendor.id}}
+                    <Button @type="default" @icon="id-card" @helpText="View fleet details" @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
+                {{/if}}
+                <Button @type="default" @icon="times" @helpText={{if this.vendor.id "Cancel edit vendor" "Cancel new vendor"}} @onClick={{this.onPressCancel}} />
+            </div>
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+        {{#if this.isEditing}}
+            <VendorFormPanel::EditForm @vendor={{this.vendor}} @vendorTypes={{this.vendorTypeOptions}} @vendorStatusOptions={{this.vendorStatusOptions}} @onVendorChanged={{this.onVendorChanged}} />
+        {{else}}
+            <VendorFormPanel::CreateForm @vendor={{this.vendor}} @vendorTypes={{this.vendorTypeOptions}} @vendorStatusOptions={{this.vendorStatusOptions}} @onVendorChanged={{this.onVendorChanged}} />
+        {{/if}}
+    </Overlay::Body>
+</Overlay>

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

@@ -0,0 +1,226 @@
+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 VendorFormPanelComponent extends Component {
+    /**
+     * @service store
+     */
+    @service store;
+
+    /**
+     * @service fetch
+     */
+    @service fetch;
+
+    /**
+     * @service currentUser
+     */
+    @service currentUser;
+
+    /**
+     * @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;
+
+    /**
+     * The users vendor instance.
+     * @type {VendorModel|IntegratedVendorModel}
+     */
+    @tracked vendor;
+
+    /**
+     * Specific types of vendors which can be set as the type.
+     *
+     * @memberof VendorFormPanelComponent
+     */
+    @tracked vendorTypeOptions = [
+        'carrier-trucking-company',
+        'carrier-shipping-line',
+        'carrier-air-cargo',
+        'carrier-rail',
+        'freight-forwarder',
+        'warehouse-provider',
+        'broker',
+        'maintenance-repair-facility',
+        'fuel-station',
+        'tire-service-provider',
+        'equipment-rental',
+        'customs-broker',
+        'third-party-logistics-provider',
+        'technology-provider',
+        'consultant',
+        'insurance-provider',
+        'last-mile-delivery-service',
+        'packing-crating-service',
+        'intermodal-operator',
+        'drayage-service-provider',
+        'cold-chain-provider',
+        'hazardous-material-specialist',
+        'parcel-courier',
+        'bulk-material-handler',
+        'towing-service',
+        'cargo-inspector',
+        'pallet-provider',
+        'label-packaging-material-supplier',
+        'driver-leasing-service',
+        'vehicle-manufacturer',
+        'vehicle-dealership',
+        'parts-supplier',
+        'logistics-association',
+        'regulatory-body',
+        'training-certification-provider',
+        'general-vendor',
+        'ecommerce',
+    ];
+
+    /**
+     * Applicable status options for vendor.
+     *
+     * @memberof VendorFormPanelComponent
+     */
+    @tracked vendorStatusOptions = ['pending', 'active', 'do-not-contact', 'prospective', 'archived'];
+
+    /**
+     * Constructs the component and applies initial state.
+     */
+    constructor() {
+        super(...arguments);
+        this.vendor = this.args.vendor;
+        this.isEditing = typeof this.vendor.id === 'string';
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Saves the vendor changes.
+     *
+     * @action
+     * @returns {Promise<any>}
+     */
+    @action save() {
+        const { vendor } = this;
+
+        this.loader.showLoader('.next-content-overlay-panel-container', { loadingMessage: 'Saving vendor...', preserveTargetPosition: true });
+        this.isLoading = true;
+
+        contextComponentCallback(this, 'onBeforeSave', vendor);
+
+        try {
+            return vendor
+                .save()
+                .then((vendor) => {
+                    this.notifications.success(`Vendor (${vendor.displayName}) saved successfully.`);
+                    contextComponentCallback(this, 'onAfterSave', vendor);
+                })
+                .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;
+        }
+    }
+
+    /**
+     * Uploads a new logo for the vendor.
+     *
+     * @param {File} file
+     * @memberof DriverFormPanelComponent
+     */
+    @action onUploadNewPhoto(file) {
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/${this.currentUser.companyId}/vendors/${this.vendor.id}`,
+                subject_uuid: this.vendor.id,
+                subject_type: 'vendor',
+                type: 'vendor_logo',
+            },
+            (uploadedFile) => {
+                this.vendor.setProperties({
+                    logo_uuid: uploadedFile.id,
+                    logo_url: uploadedFile.url,
+                    logo: uploadedFile,
+                });
+            }
+        );
+    }
+
+    /**
+     * Handle when vendor changed.
+     *
+     * @param {VendorModel} vendor
+     * @memberof VendorFormPanelComponent
+     */
+    @action onVendorChanged(vendor) {
+        this.vendor = vendor;
+    }
+
+    /**
+     * View the details of the vendor.
+     *
+     * @action
+     */
+    @action onViewDetails() {
+        const isActionOverrided = contextComponentCallback(this, 'onViewDetails', this.vendor);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.vendor, 'viewing');
+        }
+    }
+
+    /**
+     * Handles cancel button press.
+     *
+     * @action
+     * @returns {any}
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.vendor);
+    }
+}

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

@@ -0,0 +1,77 @@
+<div class="p-4">
+    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+        {{#if this.isIntegratedVendor}}
+            <div class="integrated-vendor-button border-0 mb-4">
+                <div>
+                    <img src={{this.vendor.provider_settings.logo}} alt={{this.vendor.provider_settings.code}} class="w-20 h-20" width="80" height="80" />
+                </div>
+                <div>
+                    <h3 class="text-sm font-semibold dark:text-white">{{this.vendor.provider_settings.name}}</h3>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-xs dark:text-gray-100">
+                <div class="field-info-container">
+                    <div class="field-name">Sandbox</div>
+                    <div class="field-value">{{if this.vendor.sandbox "Yes" "No"}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Host</div>
+                    <div class="field-value">{{n-a this.vendor.host}}</div>
+                </div>
+                <div class="field-info-container">
+                    <div class="field-name">Namespace</div>
+                    <div class="field-value">{{n-a this.vendor.namespace}}</div>
+                </div>
+                {{#if (is-object this.vendor.options)}}
+                    {{#each-in this.vendor.options as |key value|}}
+                        <div class="field-info-container">
+                            <div class="field-name">{{smart-humanize key}}</div>
+                            <div class="field-value">{{n-a value}}</div>
+                        </div>
+                    {{/each-in}}
+                {{/if}}
+            </div>
+        {{else}}
+            <div class="grid grid-cols-3 md:grid-cols-2 gap-2 text-xs dark:text-gray-100">
+                <div class="field-info-container">
+                    <div class="field-name">Name</div>
+                    <div class="field-value">{{n-a this.vendor.name}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Email</div>
+                    <div class="field-value">{{n-a this.vendor.email}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Phone</div>
+                    <div class="field-value">{{n-a this.vendor.phone}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Website URL</div>
+                    <div class="field-value">{{n-a this.vendor.website_url}}</div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Country</div>
+                    <div class="field-value">
+                        <CountryName @country={{this.vendor.country}} @showFlag={{true}} />
+                    </div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Status</div>
+                    <div class="field-value">
+                        <Badge @status={{this.vendor.status}} />
+                    </div>
+                </div>
+
+                <div class="field-info-container">
+                    <div class="field-name">Address</div>
+                    <div class="field-value">{{n-a this.vendor.address}}</div>
+                </div>
+            </div>
+        {{/if}}
+    </ContentPanel>
+</div>

package/addon/components/vendor-panel/details.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class VendorPanelDetailsComponent extends Component {
+    @tracked isIntegratedVendor = false;
+    @tracked vendor;
+    constructor() {
+        super(...arguments);
+        this.vendor = this.args.vendor;
+        this.isIntegratedVendor = this.vendor && this.vendor.type === 'integrated-vendor';
+    }
+}

package/addon/components/vendor-panel.hbs

@@ -0,0 +1,58 @@
+<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">
+        <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="pen" @helpText="Edit vendor" @onClick={{this.onEdit}} />
+            </div>
+            <div class="flex flex-1 justify-end">
+                <Button @type="default" @icon="times" @helpText="Close vendor details" @onClick={{this.onPressCancel}} />
+            </div>
+        </div>
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex flex-1 flex-row">
+                <div class="w-14">
+                    <div class="w-12 h-12 flex items-center justify-start rounded-lg">
+                        <Image src={{this.vendor.logo_url}} @fallbackSrc={{config "defaultValues.vendorImage"}} alt={{this.vendor.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo @text={{this.vendor.name}} />
+                        </Attach::Tooltip>
+                    </div>
+                </div>
+                <div class="flex flex-col">
+                    <h1 class="text-gray-900 dark:text-white text-2xl">
+                        {{#if this.vendor.id}}
+                            {{this.vendor.name}}
+                        {{else}}
+                            <span>New Vendor</span>
+                        {{/if}}
+                    </h1>
+                    <div class="-mt-1">
+                        <div class="flex flex-row items-center">
+                            <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{n-a (smart-humanize this.vendor.type)}}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end">
+                <Badge @status={{this.vendor.status}} />
+            </div>
+        </div>
+    </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 vendor=this.vendor tabOptions=this.tab params=this.tab.componentParams}}
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/vendor-panel.js

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

@@ -0,0 +1,55 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ManagementContactsIndexDetailsController extends Controller {
+    /**
+     * The currently active view tab ('details' by default).
+     *
+     * @type {String}
+     * @tracked
+     */
+    @tracked view = 'details';
+
+    /**
+     * An array of query parameters to be serialized in the URL.
+     *
+     * @type {String[]}
+     * @tracked
+     */
+    @tracked queryParams = ['view'];
+
+    /**
+     * Transitions back to the "management.contacts.index" route.
+     *
+     * @method
+     * @action
+     * @returns {Transition} The transition object representing the route change.
+     */
+    @action transitionBack() {
+        return this.transitionToRoute('management.contacts.index');
+    }
+
+    /**
+     * Transitions to the edit view for a specific contact.
+     *
+     * @method
+     * @param {contactModel} contact - The contact to be edited.
+     * @action
+     * @returns {Transition} The transition object representing the route change.
+     */
+    @action onEdit(contact) {
+        return this.transitionToRoute('management.contacts.index.edit', contact);
+    }
+
+    /**
+     * Updates the active view tab.
+     *
+     * @method
+     * @param {String} tab - The name of the tab to activate.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.view = tab;
+    }
+}