@fleetbase/fleetops-engine 0.4.15 → 0.4.17

package/addon/components/order-config-manager/entities.js

@@ -0,0 +1,227 @@
+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 { later } from '@ember/runloop';
+import { task } from 'ember-concurrency-decorators';
+import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
+import ObjectProxy from '@ember/object/proxy';
+import createCustomEntity from '../../utils/create-custom-entity';
+import contextComponentCallback from '../../utils/context-component-callback';
+
+/**
+ * Component class for managing order configuration entities.
+ * This component allows for creating, editing, deleting, and managing custom entities
+ * associated with an order configuration.
+ *
+ * @extends Component
+ */
+export default class OrderConfigManagerEntitiesComponent extends Component {
+    /**
+     * Context panel service for managing UI contexts.
+     * @service
+     */
+    @service contextPanel;
+
+    /**
+     * Modals manager service for handling modal dialogs.
+     * @service
+     */
+    @service modalsManager;
+
+    /**
+     * Internationalization service for handling translations.
+     * @service
+     */
+    @service intl;
+
+    /**
+     * Tracked property for the current configuration.
+     * @tracked
+     */
+    @tracked config;
+
+    /**
+     * Tracked array of custom entities associated with the configuration.
+     * @tracked
+     */
+    @tracked customEntities = [];
+
+    /**
+     * Constructor for OrderConfigManagerEntitiesComponent.
+     * Initializes the component with the provided configuration and loads the associated entities.
+     * @param {Object} owner - The owner of the component.
+     * @param {Object} args - The arguments passed to the component.
+     */
+    constructor(owner, { config, configManagerContext }) {
+        super(...arguments);
+        this.config = config;
+        this.customEntities = this.getEntitiesFromConfig(config);
+        this.initializeContext();
+
+        configManagerContext.on('onConfigChanged', (newConfig) => {
+            this.changeConfig(newConfig);
+        });
+    }
+
+    /**
+     * Action method to create a new custom entity and open it for editing.
+     * @action
+     */
+    @action createNewCustomEntity() {
+        const customEntity = createCustomEntity();
+        return this.editCustomEntity(customEntity);
+    }
+
+    /**
+     * Action method to edit a given custom entity.
+     * @param {Object} customEntity - The custom entity to edit.
+     * @param {number} index - The index of the entity in the entities array.
+     * @action
+     */
+    @action editCustomEntity(customEntity, index) {
+        contextComponentCallback(this, 'onContextChanged', customEntity);
+        this.contextPanel.focus(customEntity, 'editing', {
+            args: {
+                config: this.config,
+                onPressCancel: () => {
+                    this.contextPanel.clear();
+                    contextComponentCallback(this, 'onContextChanged', null);
+                },
+                onSave: (customEntity) => {
+                    if (index > -1) {
+                        this.customEntities = this.customEntities.map((_, i) => {
+                            if (i === index) {
+                                return customEntity;
+                            }
+
+                            return _;
+                        });
+                    } else {
+                        this.customEntities = [customEntity, ...this.customEntities];
+                    }
+                    this.contextPanel.clear();
+                    this.save.perform();
+                    contextComponentCallback(this, 'onContextChanged', null);
+                },
+            },
+        });
+    }
+
+    /**
+     * Action method to delete a given custom entity.
+     * @param {Object} customEntity - The custom entity to delete.
+     * @param {number} index - The index of the entity in the entities array.
+     * @action
+     */
+    @action deleteCustomEntity(customEntity, index) {
+        this.modalsManager.confirm({
+            title: this.intl.t('fleet-ops.component.order-config-manager.entities.delete-custom-entity-title'),
+            body: this.intl.t('fleet-ops.component.order-config-manager.entities.delete-custom-entity-body'),
+            acceptButtonText: this.intl.t('fleet-ops.component.order-config-manager.entities.confirm-delete'),
+            confirm: (modal) => {
+                this.customEntities = this.customEntities.filter((_, i) => i !== index);
+                this.save.perform();
+                modal.done();
+            },
+        });
+    }
+
+    /**
+     * A task method to save the current state of entities to the configuration.
+     * It serializes the entities and updates the configuration.
+     * @task
+     */
+    @task *save() {
+        this.config.set('entities', this.serializeEntities());
+        yield this.config.save().then((config) => {
+            this.config = config;
+            this.customEntities = this.getEntitiesFromConfig(config);
+        });
+    }
+
+    /**
+     * If any context is provided then initialize the state.
+     *
+     * @memberof OrderConfigManagerCustomFieldsComponent
+     */
+    initializeContext() {
+        later(
+            this,
+            () => {
+                const { context, contextModel } = this.args;
+                if (typeof context === 'string' && contextModel === 'custom-entity') {
+                    const contextCustomEntity = this.customEntities.find((entity) => entity.get('id') === context);
+                    if (contextCustomEntity) {
+                        this.editCustomEntity(contextCustomEntity);
+                    }
+                }
+            },
+            300
+        );
+    }
+
+    /**
+     * Handle change of config.
+     *
+     * @param {OrderConfigModel} newConfig
+     * @memberof OrderConfigManagerEntitiesComponent
+     */
+    changeConfig(newConfig) {
+        this.config = newConfig;
+        this.customEntities = this.getEntitiesFromConfig(newConfig);
+    }
+
+    /**
+     * Deserializes an array of custom entities, preparing them for use in the component.
+     * @param {Array} customEntities - The array of serialized custom entities.
+     * @returns {Array} The array of deserialized custom entities.
+     */
+    deserializeEntities(customEntities) {
+        return customEntities.map(this.fixInternalModel).map((customEntity) => {
+            if (customEntity instanceof ObjectProxy) {
+                return customEntity;
+            }
+
+            return createCustomEntity(customEntity.name, customEntity.type, customEntity.description, { ...customEntity });
+        });
+    }
+
+    /**
+     * Fixes the internal model of a custom entity for consistency.
+     * @param {Object} customEntity - The custom entity to fix.
+     * @returns {Object} The custom entity with a fixed internal model.
+     */
+    fixInternalModel(customEntity) {
+        const _internalModel = {
+            modelName: 'custom-entity',
+        };
+        if (customEntity instanceof ObjectProxy) {
+            customEntity.set('_internalModel', _internalModel);
+            return customEntity;
+        }
+
+        customEntity._internalModel = _internalModel;
+        return customEntity;
+    }
+
+    /**
+     * Serializes the current custom entities for saving to the configuration.
+     * @returns {Array} The serialized custom entities.
+     */
+    serializeEntities() {
+        const customEntities = [...this.customEntities];
+        return customEntities.map((customEntity) => customEntity.content);
+    }
+
+    /**
+     * Retrieves and deserializes entities from the given configuration.
+     * @param {Object} config - The configuration object containing the entities.
+     * @returns {Array} The deserialized entities.
+     */
+    getEntitiesFromConfig(config) {
+        const entities = getWithDefault(config, 'entities', []);
+        return this.deserializeEntities(isArray(entities) ? entities : []);
+    }
+}

package/addon/components/order-config-manager-overlay.hbs

@@ -0,0 +1,26 @@
+<OrderConfigManager as |Action Context|>
+    <Overlay @onLoad={{this.setOverlayContext}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} @onToggle={{this.onToggle}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{true}} @width="645px">
+        <Overlay::Header @title={{t "fleet-ops.component.order-config-manager.title"}} @onPressCancel={{this.onPressCancel}}>
+            <Action.NewOrderConfigButton />
+        </Overlay::Header>
+
+        <Overlay::Body class="p-0i" @wrapperClass="py-5">
+            <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
+                <div class="ui-tabs mt-4">
+                    <nav>
+                        {{#each Context.tabs as |tab|}}
+                            <a href="javascript:;" class="ui-tab {{if (eq tab.slug Context.currentTab.slug) 'active'}}" {{on "click" (fn Context.onTabChanged tab.slug)}}>
+                                <FaIcon @icon={{tab.icon}} class="mr-1" />
+                                <span>{{tab.title}}</span>
+                            </a>
+                        {{/each}}
+                    </nav>
+                </div>
+            </div>
+            <div class="tab-content tab-{{Context.currentTab.slug}}">
+                <Context.Content />
+            </div>
+            <Spacer @height="300px" />
+        </Overlay::Body>
+    </Overlay>
+</OrderConfigManager>

package/addon/components/order-config-manager-overlay.js

@@ -0,0 +1,60 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import contextComponentCallback from '../utils/context-component-callback';
+
+export default class OrderConfigManagerOverlayComponent extends Component {
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel');
+    }
+
+    /**
+     * Handles the open action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onOpen() {
+        return contextComponentCallback(this, 'onOpen');
+    }
+
+    /**
+     * Handles the close action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onClose() {
+        return contextComponentCallback(this, 'onClose');
+    }
+
+    /**
+     * Handles the toggle action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onToggle() {
+        return contextComponentCallback(this, 'onToggle');
+    }
+}

package/addon/components/order-config-manager.hbs

@@ -0,0 +1,15 @@
+{{yield
+    (hash 
+        NewOrderConfigButton=(component "button" type="primary" icon="plus" text=(t "fleet-ops.component.order-config-manager.new-order-config") onClick=this.createNewOrderConfig)
+    ) 
+    (hash
+        configs=this.configs
+        currentConfig=this.currentConfig
+        selectConfig=this.selectConfig
+        tabs=this.tabs 
+        currentTab=this.tab
+        content=(component this.tab.component configManagerContext=this.configManagerContext config=this.currentConfig context=this.context contextModel=this.contextModel tabOptions=this.tab options=this.tab.componentParams onConfigDeleting=this.onConfigDeleting onConfigDeleted=this.onConfigDeleted onConfigUpdated=this.onConfigUpdated onContextChanged=this.onContextChanged)
+        onTabChanged=this.onTabChanged
+        onClickCreateOrderConfig=this.createNewOrderConfig
+    )
+}}

package/addon/components/order-config-manager.js

@@ -0,0 +1,285 @@
+import Component from '@glimmer/component';
+import EmberObject from '@ember/object';
+import Evented from '@ember/object/evented';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import { task } from 'ember-concurrency-decorators';
+import isModel from '@fleetbase/ember-core/utils/is-model';
+import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+import OrderConfigManagerDetailsComponent from './order-config-manager/details';
+import OrderConfigManagerCustomFieldsComponent from './order-config-manager/custom-fields';
+import OrderConfigManagerActivityFlowComponent from './order-config-manager/activity-flow';
+import OrderConfigManagerEntitiesComponent from './order-config-manager/entities';
+
+const configManagerContext = EmberObject.extend(Evented);
+export default class OrderConfigManagerComponent extends Component {
+    @service universe;
+    @service notifications;
+    @service modalsManager;
+    @service store;
+    @service intl;
+    @tracked configs = [];
+    @tracked currentConfig;
+    @tracked tab;
+    @tracked configManagerContext;
+    @tracked context;
+    @tracked contextModel;
+
+    /**
+     * Returns the array of tabs available for the panel.
+     *
+     * @type {Array}
+     */
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:order-config-manager');
+        const defaultTabs = [
+            this.universe._createMenuItem('Details', null, { icon: 'circle-info', component: OrderConfigManagerDetailsComponent }),
+            this.universe._createMenuItem('Custom Fields', null, { icon: 'rectangle-list', component: OrderConfigManagerCustomFieldsComponent }),
+            this.universe._createMenuItem('Activity Flow', null, { icon: 'diagram-project', component: OrderConfigManagerActivityFlowComponent }),
+            this.universe._createMenuItem('Entities', null, { icon: 'boxes-packing', component: OrderConfigManagerEntitiesComponent }),
+        ];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+
+    /**
+     * Constructs the component and applies initial state.
+     */
+    constructor(owner, { tab, context, contextModel }) {
+        super(...arguments);
+        applyContextComponentArguments(this);
+
+        this.context = context;
+        this.contextModel = contextModel;
+        this.configManagerContext = configManagerContext.create();
+        this.tab = this.getTabUsingSlug(tab);
+        this.loadOrderConfigs.perform();
+    }
+
+    /**
+     * Loads all available order configs asynchronously.
+     *
+     * @returns {void}
+     * @memberof OrderConfigManagerComponent
+     * @method loadOrderConfigs
+     * @instance
+     * @task
+     * @generator
+     */
+    @task *loadOrderConfigs(options = {}) {
+        this.configs = yield this.store.findAll('order-config');
+
+        let currentConfig;
+        let initialOrderConfig = this.args.orderConfig;
+        if (isArray(this.configs) && this.configs.length > 0) {
+            if (initialOrderConfig) {
+                currentConfig = this.configs.find((config) => {
+                    if (isModel(initialOrderConfig)) {
+                        return config.id === initialOrderConfig.id;
+                    }
+
+                    if (typeof initialOrderConfig === 'string') {
+                        return config.id === initialOrderConfig;
+                    }
+                });
+            }
+
+            if (!currentConfig) {
+                currentConfig = this.configs[0];
+            }
+
+            this.selectConfig(currentConfig);
+        }
+
+        if (typeof options.onAfter === 'function') {
+            options.onAfter(this.configs, currentConfig);
+        }
+    }
+
+    /**
+     * Handle anonymous context change.
+     *
+     * @memberof OrderConfigManagerComponent
+     */
+    @action onContextChanged(context) {
+        const isValidContext = context && isModel(context);
+        if (context === null || !isValidContext) {
+            this.context = undefined;
+            this.contextModel = undefined;
+            contextComponentCallback(this, 'onContextChanged', this.context, this.contextModel);
+            return;
+        }
+
+        this.context = context.get('id');
+        this.contextModel = getModelName(context);
+        contextComponentCallback(this, 'onContextChanged', this.context, this.contextModel);
+    }
+
+    /**
+     * Creates a new order configuration and displays a modal for further interaction.
+     *
+     * This action initializes a new 'order-config' record with default values and
+     * displays a modal to the user for creating a new order configuration. The modal
+     * is configured with various properties including titles, button icons, and a callback
+     * for the confirm action. The confirm action includes validation and saving of the
+     * new order configuration, along with success and warning notifications.
+     */
+    @action createNewOrderConfig() {
+        const orderConfig = this.store.createRecord('order-config', {
+            tags: [],
+        });
+
+        this.modalsManager.show('modals/new-order-config', {
+            title: this.intl.t('fleet-ops.component.order-config-manager.create-new-title'),
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            orderConfig,
+            addTag: (tag) => {
+                orderConfig.addTag(tag);
+            },
+            removeTag: (index) => {
+                orderConfig.removeTag(index);
+            },
+            confirm: (modal) => {
+                if (!orderConfig.name) {
+                    return this.notifications.warning(this.intl.t('fleet-ops.component.order-config-manager.create-warning-message'));
+                }
+
+                modal.startLoading();
+                return orderConfig.save().then((newOrderConfig) => {
+                    this.notifications.success(this.intl.t('fleet-ops.component.order-config-manager.create-success-message'));
+                    this.loadOrderConfigs.perform({
+                        onAfter: () => {
+                            this.selectConfig(newOrderConfig);
+                        },
+                    });
+                });
+            },
+        });
+    }
+
+    /**
+     * Selects a specific order configuration.
+     *
+     * This action sets the 'currentConfig' property of the component to the
+     * specified configuration object.
+     *
+     * @param {Object} config - The order configuration object to be selected.
+     */
+    @action selectConfig(config) {
+        this.currentConfig = config;
+        this.configManagerContext.set('currentConfig', config);
+        this.configManagerContext.trigger('onConfigChanged', config);
+        contextComponentCallback(this, 'onConfigChanged', ...arguments);
+    }
+
+    /**
+     * Handles the deletion process of an order configuration.
+     *
+     * This action is called when an order configuration is in the process of being deleted.
+     * It deselects the current configuration and performs additional operations defined
+     * in 'contextComponentCallback'.
+     */
+    @action onConfigDeleting() {
+        this.selectConfig(null);
+        this.configManagerContext.trigger('onConfigDeleting');
+        contextComponentCallback(this, 'onConfigDeleting', ...arguments);
+    }
+
+    /**
+     * Executes actions after an order configuration has been deleted.
+     *
+     * Once a configuration is deleted, this action reloads the order configurations and
+     * executes additional operations defined in 'contextComponentCallback'.
+     */
+    @action onConfigDeleted() {
+        this.loadOrderConfigs.perform();
+        this.configManagerContext.trigger('onConfigDeleted');
+        contextComponentCallback(this, 'onConfigDeleted', ...arguments);
+    }
+
+    /**
+     * Performs operations after an order configuration has been updated.
+     *
+     * This action is triggered when an order configuration update occurs.
+     * It primarily executes additional operations defined in 'contextComponentCallback'.
+     */
+    @action onConfigUpdated() {
+        this.configManagerContext.trigger('onConfigUpdated');
+        contextComponentCallback(this, 'onConfigUpdated', ...arguments);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        this.configManagerContext.trigger('onLoad');
+        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);
+        this.configManagerContext.trigger('onTabChanged');
+        contextComponentCallback(this, 'onTabChanged', tab);
+    }
+
+    /**
+     * Handles edit action for the place.
+     *
+     * @method
+     * @action
+     */
+    @action onEdit() {
+        const isActionOverrided = contextComponentCallback(this, 'onEdit');
+
+        if (!isActionOverrided) {
+            this.contextPanel.clear();
+        }
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel');
+    }
+
+    /**
+     * 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/order-flow.hbs

@@ -0,0 +1 @@
+{{yield}}

package/addon/components/order-flow.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class OrderFlowComponent extends Component {}

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

@@ -6,7 +6,7 @@
         </div>
     </Overlay::Header>
 
-    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4">
         <div class="flex-1 space-y-4">
             <div class="grid grid-cols-3 gap-1 text-xs dark:text-gray-100">
                 <InputGroup @name={{t "fleet-ops.common.name"}} @wrapperClass="col-span-2">

package/addon/components/place-panel.hbs

@@ -3,7 +3,7 @@
         <Button @type="default" @icon="pen" @helpText={{t "fleet-ops.component.place-panel.edit-place"}} @onClick={{this.onEdit}} @wrapperClass="mr-2" />
         <Button @type="default" @icon="times" @helpText={{if this.place.id (t "fleet-ops.component.place-panel.cancel-edit-place")(t "fleet-ops.component.place-panel.cancel-new-place") }} @onClick={{this.onPressCancel}} />
     </Overlay::Header>
-    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body class="no-padding">
         <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
             <div class="ui-tabs mt-4">
                 <nav>

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

@@ -59,7 +59,7 @@
         </div>
     </Overlay::Header>
 
-    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4">
         <div class="flex-1 space-y-4">
             <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                 <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">

package/addon/components/vehicle-panel.hbs

@@ -58,7 +58,7 @@
             </div>
         </div>
     </Overlay::Header>
-    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body class="no-padding">
         <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
             <div class="ui-tabs mt-4">
                 <nav>

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

@@ -71,7 +71,7 @@
         </div>
     </Overlay::Header>
 
-    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4">
         {{#if this.isEditing}}
             <VendorFormPanel::EditForm
                 @vendor={{this.vendor}}

package/addon/components/vendor-panel.hbs

@@ -55,7 +55,7 @@
             </div>
         </div>
     </Overlay::Header>
-    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+    <Overlay::Body class="no-padding">
         <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
             <div class="ui-tabs mt-4">
                 <nav>