@fleetbase/fleetops-engine 0.0.1

package/addon/components/order-config/activity-flow-editor.hbs

@@ -0,0 +1,108 @@
+<div class="order-config-activity-flow-editor" {{did-insert this.setupComponent}} ...attributes>
+    <div class="content-panel mb-20">
+        <div class="content-panel-header items-center">
+            <h3 class="text-lg font-semibold dark:text-gray-100">
+                Activity Flow
+            </h3>
+
+            <Button @icon="plus" @iconPrefix="fas" @text="New Status" @size="sm" @onClick={{this.newStatus}} />
+        </div>
+        <div class="content-panel-body no-padding">
+            <div class="my-6 px-5">
+                <p>Activity flow configuration will allow you to define the different types of tracking status activities that apply for this order type. Logic of the activity flow can also be configured.</p>
+            </div>
+
+            <div class="ui-tabs mb-4">
+                <nav>
+                    <a href="javascript:;" class="ui-tab {{if (eq this.activeTab 'order') 'active'}}" {{on "click" (fn (mut this.activeTab) "order" )}}>
+                        Order Flow
+                    </a>
+                    <a href="javascript:;" class="ui-tab  {{if (eq this.activeTab 'waypoint') 'active'}}" {{on "click" (fn (mut this.activeTab) "waypoint" )}}>
+                        Waypoint Flow
+                    </a>
+                </nav>
+            </div>
+
+            {{#if @orderConfig.meta.flow}}
+                <div class="px-5">
+                    {{#if this.flow}}
+                        <Dragula @onDrop={{this.moveStatus}} @onReady={{this.setDragulaInstance}} as |Container|>
+                            <Container class="activity-flow-connector">
+                                {{#each-in this.activeFlow as |status activity|}}
+                                    <div data-status={{status}} class="activity-flow-sub-connector {{dasherize (flow-raw-status status)}}-flow pb-6">
+                                        <div class="activity-status relative cursor-move flex items-center justify-center mb-6">
+                                            <div class="relative px-3 py-2 status-element {{dasherize (flow-raw-status status)}}-status-element rounded-md flex flex-col items-center justify-center">
+                                                <Badge @status={{flow-raw-status status}} class="status-badge-lg shadow-none" />
+                                                <Button @text="New Activity" @icon="plus" @iconPrefix="fas" @wrapperClass="my-2" @onClick={{fn this.addNewActivity status}} />
+                                                {{#if (not (includes status (w "created dispatched completed")))}}
+                                                    <div class="absolute top-0 right-0">
+                                                        <button type="button" class="flex items-center justify-center rounded-full w-6 h-6 bg-gray-900 font-semibold text-white -mt-3 -mr-3 shadow-sm" {{on "click" (fn this.removeStatus status)}}>
+                                                            <FaIcon @prefix="fas" @icon="times" class="text-white" />
+                                                        </button>
+                                                    </div>
+                                                {{/if}}
+                                            </div>
+                                        </div>
+                                        <div class="activity-events-list">
+                                            {{#each activity.events as |event|}}
+                                                <div class="shadow-sm border-2 status-element-border {{dasherize (flow-raw-status status)}}-status-element dark:bg-gray-800 bg-gray-100">
+                                                    <div class="p-3 border-b border-gray-300 dark:border-gray-900">
+                                                        <div class="mb-4 flex items-center justify-between">
+                                                            <div>
+                                                                <FaIcon @icon="sitemap" class="mr-2 dark:text-sky-300" />
+                                                                <span class="dark:text-gray-100 text-sm">Activity Details</span>
+                                                            </div>
+                                                            <a href="javascript:;" class="btn btn-danger btn-sm" {{on "click" (fn this.removeActivity status event)}}>
+                                                                <FaIcon @icon="trash" />
+                                                            </a>
+                                                        </div>
+                                                        <div class="grid grid-cols-3 gap-2">
+                                                            <InputGroup @name="Status" @value={{event.status}} />
+                                                            <InputGroup @name="Code" @value={{event.code}} />
+                                                            <InputGroup @name="Details" @value={{event.details}} />
+                                                        </div>
+                                                    </div>
+                                                    <div class="p-3">
+                                                        <div class="mb-4 flex items-center justify-between">
+                                                            <div>
+                                                                <FaIcon @icon="project-diagram" class="mr-2 dark:text-sky-300" />
+                                                                <span class="dark:text-gray-100 text-sm">Logic Stack</span>
+                                                            </div>
+                                                            <Button @text="Add logic condition" @icon="plus" @iconPrefix="fas" @onClick={{fn this.addLogicCondition status event}} />
+                                                        </div>
+                                                        <div class="space-y-3 mb-3">
+                                                            {{#each event.if as |logic conditionIndex|}}
+                                                                <div class="grid grid-cols-5 gap-2">
+                                                                    <div class="flex items-center col-span-2">
+                                                                        <div class="py-2 px-3 rounded flex items-center justify-center text-center text-sm font-bold text-mono mr-3 dark:text-gray-50 border border-gray-50 dark:border-gray-900">
+                                                                            if
+                                                                        </div>
+                                                                        <Select @options={{this.configFields}} @value={{get logic 0}} @placeholder="Select field" class="flex-1 w-full" @onSelect={{fn this.updateActivityLogic status event conditionIndex 0}} />
+                                                                    </div>
+                                                                    <Select @options={{this.logicOperators}} @value={{get logic 1}} @optionLabel="label" @optionValue="value" @onSelect={{fn this.updateActivityLogic status event conditionIndex 1}} @placeholder="Select operator" />
+                                                                    <div class="flex items-center col-span-2">
+                                                                        <Input @type="text" @value={{get logic 2}} @onKeyUp={{fn this.updateActivityLogic status event conditionIndex 2}} placeholder="Enter value to compare" class="form-input w-full flex-1 mr-3" />
+                                                                        <Button @size="sm" @icon="trash" @onClick={{fn this.removeLogicCondition event logic}} />
+                                                                    </div>
+                                                                </div>
+                                                            {{else}}
+                                                                <div class="flex items-center justify-center">
+                                                                    <div class="rounded bg-gray-300 dark:bg-gray-700 shadow-sm text-sm text-center px-6 py-3 dark:text-gray-100 border border-dashed border-gray-500 dark:border-gray-900">No logic conditions applied</div>
+                                                                </div>
+                                                            {{/each}}
+                                                        </div>
+                                                    </div>
+
+                                                </div>
+                                            {{/each}}
+                                        </div>
+                                    </div>
+                                {{/each-in}}
+                            </Container>
+                        </Dragula>
+                    {{/if}}
+                </div>
+            {{/if}}
+        </div>
+    </div>
+</div>

package/addon/components/order-config/activity-flow-editor.js

@@ -0,0 +1,374 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, computed, set, setProperties } from '@ember/object';
+import { isArray } from '@ember/array';
+import { equal } from '@ember/object/computed';
+import { underscore } from '@ember/string';
+import generateUuid from '@fleetbase/ember-core/utils/generate-uuid';
+
+export default class OrderConfigActivityFlowEditorComponent extends Component {
+    constructor() {
+        super(...arguments);
+        const { orderConfig } = this.args;
+
+        this.orderConfig = orderConfig;
+
+        if (orderConfig.meta.flow) {
+            this.flow = this.fixOrderFlow(orderConfig.meta.flow);
+        }
+    }
+
+    @service modalsManager;
+    @service notifications;
+    @service fetch;
+
+    @tracked drake;
+    @tracked orderConfig = {};
+    @tracked flow = {};
+    @tracked dynamicMetaFields = [];
+    @tracked notify = 0;
+    @tracked activeTab = 'order';
+
+    @tracked logicOperators = [
+        { label: 'equals', value: '=' },
+        { label: 'not equals', value: '!=' },
+        { label: 'contains', value: '$' },
+        { label: 'greater than', value: '>' },
+        { label: 'less than', value: '<' },
+    ];
+
+    @equal('activeTab', 'order') isOrderTab;
+    @equal('activeTab', 'waypoint') isWaypointTab;
+    @equal('activeTab', 'entity') isEntityTab;
+
+    @computed('activeTab', 'flow', 'orderConfig.id') get activeFlow() {
+        const activeTab = this.activeTab;
+
+        return this[`${activeTab}Flow`];
+    }
+
+    @computed('flow', 'orderConfig.id') get waypointFlow() {
+        const { flow } = this;
+        const keys = Object.keys(flow);
+        const waypointFlow = {};
+
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys.objectAt(i);
+
+            if (key.startsWith('waypoint|')) {
+                waypointFlow[key] = flow[key];
+            }
+        }
+
+        return waypointFlow;
+    }
+
+    @computed('flow', 'orderConfig.id') get entityFlow() {
+        const { flow } = this;
+        const keys = Object.keys(flow);
+        const entityFlow = {};
+
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys.objectAt(i);
+
+            if (key.startsWith('waypoint|')) {
+                entityFlow[key] = flow[key];
+            }
+        }
+
+        return entityFlow;
+    }
+
+    @computed('flow', 'orderConfig.id') get orderFlow() {
+        const { flow } = this;
+        const keys = Object.keys(flow);
+        const orderFlow = {};
+
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys.objectAt(i);
+
+            if (!key.startsWith('waypoint|') && !key.startsWith('entity|')) {
+                orderFlow[key] = flow[key];
+            }
+        }
+
+        return orderFlow;
+    }
+
+    @computed('orderConfig', 'flow', 'orderConfig.meta.fields.[]', 'dynamicMetaFields.[]')
+    get configFields() {
+        const { flow, dynamicMetaFields } = this;
+        const defaultLogicFields = ['status', 'type', 'internal_id', 'id', 'adhoc', 'pod_method', 'pod_required', 'scheduled_at'];
+        const metaFields = Array.from(this.orderConfig.meta.fields ?? []).map((metaField) => `meta.${metaField.key}`);
+        const inheritedFields = [];
+
+        // loop through and add preset meta fields
+        for (let key in flow) {
+            const activity = flow[key];
+
+            if (isArray(activity.events)) {
+                for (let i = 0; i < activity.events.length; i++) {
+                    const event = activity.events.objectAt(i);
+
+                    if (isArray(event.if)) {
+                        for (let j = 0; j < event.if.length; j++) {
+                            const logic = event.if.objectAt(j);
+
+                            if (typeof logic[0] === 'string') {
+                                inheritedFields.pushObject(logic[0]);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        return [...defaultLogicFields, ...metaFields, ...inheritedFields, ...dynamicMetaFields];
+    }
+
+    @action setupComponent() {
+        this.fetchDynamicMetaFields();
+    }
+
+    @action fetchDynamicMetaFields() {
+        this.fetch
+            .get('fleet-ops/order-configs/dynamic-meta-fields', {
+                type: this.orderConfig.key,
+            })
+            .then((dynamicMetaFields) => {
+                this.dynamicMetaFields = dynamicMetaFields ?? [];
+            });
+    }
+
+    @action setDragulaInstance(drake) {
+        this.drake = drake;
+    }
+
+    @action newStatus() {
+        const { flow } = this;
+
+        this.modalsManager.show('modals/order-config-new-status', {
+            title: 'Add new status to flow',
+            statusName: null,
+            confirm: async (modal) => {
+                const statusName = modal.getOption('statusName');
+
+                if (!statusName) {
+                    return this.notifications.warning('No status entered.');
+                }
+
+                const format = (status) => underscore(status.toLowerCase());
+                const status = this.activeTab === 'order' ? format(statusName) : `${this.activeTab}|${format(statusName)}`;
+
+                if (flow[status]) {
+                    await modal.done();
+                    // prompt to confirm overwrite
+                    return this.modalsManager.confirm({
+                        title: 'This will overwrite an existing status!',
+                        body: `There is another '${statusName}' status already existing in this flow, if you continue this status will be overwritten. Would you like to overwrite the previous '${statusName}' status?`,
+                        acceptButtonText: 'Yes, overwrite!',
+                        confirm: (modal) => {
+                            this.insertNewStatus(status);
+                            modal.done();
+                        },
+                    });
+                }
+
+                this.insertNewStatus(status);
+                modal.done();
+            },
+        });
+    }
+
+    insertNewStatus(statusName) {
+        const { flow } = this;
+        const status = underscore(statusName.toLowerCase());
+
+        // insert status
+        set(flow, status, {
+            id: generateUuid(),
+            sequence: Object.keys(flow).length + 1,
+            events: [],
+        });
+        this.flow = flow;
+
+        // add initial activity
+        this.addNewActivity(status);
+
+        if (typeof this.args.onFlowChanged === 'function') {
+            this.args.onFlowChanged(this.flow);
+        }
+    }
+
+    @action removeStatus(status) {
+        const { flow } = this;
+        this.modalsManager.confirm({
+            title: 'Remove status',
+            body: `Are you sure you wish to delete this status? All related activites and logic will be deleted along with the status.`,
+            acceptButtonText: 'Yes, delete',
+            confirm: (modal) => {
+                delete flow[status];
+                set(this, 'flow', flow);
+
+                if (typeof this.args.onFlowChanged === 'function') {
+                    this.args.onFlowChanged(this.flow);
+                }
+                modal.done();
+            },
+        });
+    }
+
+    @action moveStatus(el, container) {
+        const { flow } = this;
+        const { status } = el.dataset;
+
+        if (!status) {
+            return;
+        }
+
+        const format = (s) => s.replace(`${this.activeTab}|`, '');
+
+        // if status is created or dispatched prevent from dragging
+        if (['created', 'dispatched', 'completed'].includes(format(status))) {
+            this.notifications.warning(`The '${format(status)}' must be in this order of sequence, unable to shift.`);
+            this.drake.cancel(true);
+            return;
+        }
+
+        const sequence = Array.prototype.indexOf.call(container.children, el);
+        const activity = flow[status];
+
+        // if is not created but attempt to move to sequence 0
+        if (format(status) !== 'created' && sequence === 0) {
+            this.notifications.warning(`The created status must always be the first sequence of an order flow.`);
+            this.drake.cancel(true);
+            return;
+        }
+
+        if (!activity) {
+            return;
+        }
+
+        setProperties(activity, { sequence });
+
+        this.flow[status] = activity;
+
+        if (typeof this.args.onFlowChanged === 'function') {
+            this.args.onFlowChanged(this.flow);
+        }
+    }
+
+    @action addNewActivity(status) {
+        if (!this.flow[status]) {
+            return;
+        }
+
+        const event = {
+            id: generateUuid(),
+            stauts: null,
+            code: null,
+            details: null,
+            if: [],
+        };
+
+        this.flow[status]['events'].pushObject(event);
+
+        if (typeof this.args.onFlowChanged === 'function') {
+            this.args.onFlowChanged(this.flow);
+        }
+    }
+
+    @action removeActivity(status, event) {
+        if (!this.flow[status]) {
+            return;
+        }
+
+        if (this.flow[status]['events'].length === 1) {
+            return;
+        }
+
+        this.flow[status]['events'].removeObject(event);
+
+        if (typeof this.args.onFlowChanged === 'function') {
+            this.args.onFlowChanged(this.flow);
+        }
+    }
+
+    @action updateActivityLogic(status, event, conditionIndex, index, value) {
+        if (!this.flow[status]) {
+            return;
+        }
+
+        const eventIndex = this.flow[status]['events'].findIndex((e) => e.code === event.code);
+
+        if (eventIndex === -1) {
+            return;
+        }
+
+        set(this.flow, `${status}.events.${eventIndex}.if.${conditionIndex}.${index}`, value);
+
+        if (typeof this.args.onFlowChanged === 'function') {
+            this.args.onFlowChanged(this.flow);
+        }
+    }
+
+    @action addLogicCondition(status, event) {
+        if (!this.flow[status]) {
+            return;
+        }
+
+        const condition = ['if', '=', ''];
+        const index = this.flow[status]['events'].findIndex((e) => e.code === event.code);
+
+        if (index === -1) {
+            return;
+        }
+
+        if (!isArray(event.if)) {
+            event.if = [];
+        }
+
+        event.if.pushObject(condition);
+
+        this.flow[status]['events'][index] = event;
+
+        if (typeof this.args.onFlowChanged === 'function') {
+            this.args.onFlowChanged(this.flow);
+        }
+    }
+
+    @action removeLogicCondition(event, condition) {
+        event.if.removeObject(condition);
+
+        if (typeof this.args.onFlowChanged === 'function') {
+            this.args.onFlowChanged(this.flow);
+        }
+    }
+
+    fixOrderFlow(flow) {
+        const patched = {};
+
+        for (const status in flow) {
+            const activity = flow[status];
+
+            patched[status] = activity;
+
+            for (let i = 0; i < activity.events.length; i++) {
+                const event = activity.events.objectAt(i);
+
+                if (!event.if) {
+                    event.if = [];
+                }
+
+                if (!event.post_actions) {
+                    event.post_actions = [];
+                }
+
+                patched[status]['events'][i] = event;
+            }
+        }
+
+        return patched;
+    }
+}

package/addon/components/order-config/details-editor.hbs

@@ -0,0 +1,32 @@
+<div class="order-config-details-editor" ...attributes>
+    <div class="content-panel mb-6">
+        <div class="content-panel-header items-center">
+            <h3 class="text-lg font-semibold dark:text-gray-100">
+                {{@orderConfig.name}}
+            </h3>
+            <div>
+                {{#if @orderConfig.installed}}
+                    <Badge @hideStatusDot={{false}} @disableHumanize={{true}} @status="success">Installed</Badge>
+                {{/if}}
+            </div>
+        </div>
+        <div class="content-panel-body">
+
+            <InputGroup @name="Name" @value={{@orderConfig.name}} />
+            <InputGroup @name="Description" @value={{@orderConfig.description}} />
+            <InputGroup @name="Key" @value={{@orderConfig.key}} @disabled={{true}} readonly={{true}} @helpText="Pass this key into your order type to configure the order using this config." />
+            <InputGroup @name="Namespace" @value={{@orderConfig.namespace}} @disabled={{true}} readonly={{true}} @helpText="Unique namespace for this extension." />
+            <InputGroup @name="Extension ID" @value={{@orderConfig.extension_id}} @disabled={{true}} readonly={{true}} @helpText="Unique ID for this extension." />
+            <InputGroup @name="Extension Version" @value={{@orderConfig.version}} @disabled={{true}} readonly={{true}} @helpText="Version of this extension." />
+        </div>
+    </div>
+    <div class="flex items-center justify-end">
+        <Button @type="default" @icon="clone" @text="Clone Configuration" @size="sm" @wrapperClass="mr-2" @onClick={{fn this.sendAction "clone" @orderConfig}} />
+        {{#if @orderConfig.installed}}
+            <Button @type="danger" @icon="trash" @text="Uninstall Configuration" @size="sm" @onClick={{fn this.sendAction "uninstall" @orderConfig}} />
+        {{else}}
+            <Button @type="danger" @icon="trash" @text="Delete Configuration" @size="sm" @onClick={{fn this.sendAction "delete" @orderConfig}} />
+        {{/if}}
+    </div>
+    {{yield}}
+</div>

package/addon/components/order-config/details-editor.js

@@ -0,0 +1,16 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { classify } from '@ember/string';
+
+export default class OrderConfigDetailsEditorComponent extends Component {
+    @action sendAction(action) {
+        const actionName = `on${classify(action)}`;
+        const params = [...arguments];
+
+        params.shift();
+
+        if (typeof this.args[actionName] === 'function') {
+            this.args[actionName](...params);
+        }
+    }
+}

package/addon/components/order-config/entities-editor.hbs

@@ -0,0 +1,84 @@
+<div class="order-config-entities-editor" ...attributes>
+    <div class="content-panel mb-20">
+        <div class="content-panel-header items-center">
+            <h3 class="text-lg font-semibold dark:text-gray-100">
+                Entities
+            </h3>
+
+            <Button @text="New Entity Type" @icon="plus" @iconPrefix="fas" @onClick={{this.newEntity}} />
+        </div>
+        <div class="content-panel-body">
+            <div class="mb-6">
+                <p>
+                    Entities configuration will allow you to define the different type of entities that should be selectable for this order type. These should be used like templates to make manual order creation faster.
+                </p>
+            </div>
+
+            <div class="space-y-3">
+                {{#if this.orderConfig.meta.entities}}
+                    {{#each this.orderConfig.meta.entities as |entity index|}}
+                        <div class="rounded shadow-sm border border-gray-300 dark:border-gray-700">
+                            <div class="border-b border-gray-300 dark:border-gray-700 dark:bg-gray-900 p-3 ">
+                                <div class="flex items-center justify-between">
+                                    <div>
+                                        <FaIcon @icon="box-alt" class="mr-2 dark:text-sky-300" />
+                                        <span class="dark:text-gray-100 text-sm mr-1">Entity Type</span>
+                                        <span class="dark:text-gray-100 text-sm">({{entity.name}})</span>
+                                    </div>
+                                    <div class="flex items-center">
+                                        <a href="javascript:;" class="mr-2 btn btn-danger btn-sm" {{on "click" (fn this.removeEntity index)}}>
+                                            <FaIcon @icon="trash" />
+                                        </a>
+                                        <Button @text="Add meta field" @icon="plus" @iconPrefix="fas" @onClick={{fn this.addMetaField index}} />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="p-3">
+                                <div class="grid grid-cols-3 gap-2">
+                                    <InputGroup @name="Name" @value={{entity.name}} />
+                                    <InputGroup @name="Type" @value={{entity.type}}>
+                                        <KeyInput @value={{entity.type}} @onChange={{fn (mut entity.type)}} />
+                                    </InputGroup>
+                                    <InputGroup @name="Description" @value={{entity.description}} class="col-span-2" />
+                                </div>
+
+                                <div class="grid grid-cols-5 gap-2">
+                                    <InputGroup @name="Weight" @value={{entity.weight}} class="col-span-3" />
+                                    <InputGroup @name="Unit">
+                                        <Select @value={{entity.weight_unit}} @options={{this.weightUnits}} @optionLabel="name" @optionValue="value" class="w-full" />
+                                    </InputGroup>
+                                </div>
+
+                                <div class="grid grid-cols-5 gap-2">
+                                    <InputGroup @name="Length" @value={{entity.length}} />
+                                    <InputGroup @name="Width" @value={{entity.width}} />
+                                    <InputGroup @name="Height" @value={{entity.width}} />
+                                    <InputGroup @name="Unit">
+                                        <Select @value={{entity.dimentions_unit}} @options={{this.lengthUnits}} @optionLabel="name" @optionValue="value" class="w-full" />
+                                    </InputGroup>
+                                </div>
+
+                                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
+                                    {{#each-in entity.meta as |key value|}}
+                                        <div class="input-group">
+                                            <div class="flex items-center justify-between mb-1.5">
+                                                <InputLabel @labelText={{humanize key}} class="truncate" />
+                                                <div>
+                                                    <button type="button" class="btn btn-danger btn-outline btn-sm" {{on "click" (fn this.removeMetaKey index key)}}>
+                                                        <FaIcon @icon="trash" />
+                                                    </button>
+                                                </div>
+                                            </div>
+                                            <Input class="form-input w-full" name={{humanize key}} @value={{value}} placeholder={{humanize key}} />
+                                        </div>
+                                    {{/each-in}}
+                                </div>
+                            </div>
+                        </div>
+                    {{/each}}
+                {{/if}}
+            </div>
+
+        </div>
+    </div>
+</div>