@fleetbase/fleetops-engine 0.0.1

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

@@ -0,0 +1,123 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, computed, set, get } from '@ember/object';
+import { isArray } from '@ember/array';
+import { underscore } from '@ember/string';
+import generateUuid from '@fleetbase/ember-core/utils/generate-uuid';
+import getWeightUnits from '@fleetbase/ember-core/utils/get-weight-units';
+import getLengthUnits from '@fleetbase/ember-core/utils/get-length-units';
+
+export default class OrderConfigEntitiesEditorComponent extends Component {
+    @service modalsManager;
+    @service notifications;
+
+    @tracked weightUnits = getWeightUnits();
+    @tracked lengthUnits = getLengthUnits();
+    @tracked _orderConfig = null;
+
+    @computed('_orderConfig', 'args.orderConfig') get orderConfig() {
+        if (this._orderConfig) {
+            return this._orderConfig;
+        }
+
+        return this.args.orderConfig;
+    }
+
+    set orderConfig(orderConfig) {
+        this._orderConfig = orderConfig;
+    }
+
+    @action newEntity() {
+        const { orderConfig } = this;
+        const entity = {
+            id: generateUuid(),
+            name: null,
+            type: null,
+            description: null,
+            weight: null,
+            weight_unit: null,
+            length: null,
+            width: null,
+            height: null,
+            dimentions_unit: null,
+            meta: {},
+        };
+
+        if (!isArray(orderConfig.meta.entities)) {
+            set(orderConfig, 'meta.entities', []);
+        }
+
+        orderConfig.meta.entities.pushObject(entity);
+
+        if (typeof this.args.onEntitiesChanged === 'function') {
+            this.args.onEntitiesChanged(orderConfig.meta.entities);
+        }
+    }
+
+    @action removeEntity(index) {
+        const { orderConfig } = this;
+
+        orderConfig.meta.entities.removeAt(index);
+
+        if (typeof this.args.onEntitiesChanged === 'function') {
+            this.args.onEntitiesChanged(orderConfig.meta.entities);
+        }
+    }
+
+    @action addMetaField(index) {
+        const { orderConfig } = this;
+
+        this.modalsManager.show('modals/entity-meta-field-prompt', {
+            title: 'Add a new group of meta fields',
+            keyName: null,
+            confirm: (modal) => {
+                const keyName = modal.getOption('keyName');
+
+                if (!keyName) {
+                    return this.notifications.warning('No meta field key name entered.');
+                }
+
+                modal.startLoading();
+
+                const meta = { ...orderConfig.meta.entities[index].meta };
+                const key = underscore(keyName.toLowerCase());
+
+                meta[key] = '';
+                set(orderConfig, `meta.entities.${index}.meta`, meta);
+
+                if (typeof this.args.onEntitiesChanged === 'function') {
+                    this.args.onEntitiesChanged(orderConfig.meta.entities);
+                }
+
+                modal.done();
+            },
+        });
+    }
+
+    @action setMetaKeyValue(index, key, { target }) {
+        console.log('setMetaKeyValue()', ...arguments);
+        const { orderConfig } = this;
+        const { value } = target;
+
+        console.log(value, get(orderConfig, `meta.entities.${index}.meta.${key}`));
+
+        // set(orderConfig, `meta.entities.${index}.meta.${key}`, value);
+
+        if (typeof this.args.onEntitiesChanged === 'function') {
+            this.args.onEntitiesChanged(orderConfig.meta.entities);
+        }
+    }
+
+    @action removeMetaKey(index, key) {
+        const { orderConfig } = this;
+        const meta = { ...orderConfig.meta.entities[index].meta };
+
+        delete meta[key];
+        set(orderConfig, `meta.entities.${index}.meta`, meta);
+
+        if (typeof this.args.onEntitiesChanged === 'function') {
+            this.args.onEntitiesChanged(orderConfig.meta.entities);
+        }
+    }
+}

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

@@ -0,0 +1,122 @@
+<div class="order-config-meta-fields-editor" ...attributes>
+    <div class="content-panel">
+        <div class="content-panel-header items-center">
+            <h3 class="text-lg font-semibold dark:text-gray-100">
+                Meta Fields
+            </h3>
+            <div>
+                <Button @icon="plus" @iconPrefix="fas" @text="New Custom Field" @size="sm" @onClick={{this.addField}} />
+                <Button @icon="plus" @iconPrefix="fas" @text="New Custom Fields Group" @size="sm" @onClick={{this.addMetaFieldGroup}} />
+            </div>
+        </div>
+        <div class="content-panel-body">
+            <div class="mb-6">
+                <p>Meta fields configuration will allow you to define custom input fields that will be applied to orders.</p>
+            </div>
+
+            <Dragula @onDrop={{this.moveMetaField}} as |Container|>
+                {{#each this.groupedMetaFields as |group|}}
+                    <div class="content-panel">
+                        <div class="content-panel-header items-center">
+                            <div class="font-semibold dark:text-gray-100">
+                                <span class="mr-1">Custom Fields Group:</span>
+                                {{#if group.value}}
+                                    <span>{{smart-humanize group.value}}</span>
+                                {{else}}
+                                    <span>Default Fields</span>
+                                {{/if}}
+                            </div>
+
+                            <div>
+                                <Button @icon="plus" @iconPrefix="fas" @text="New Custom Field" @size="sm" @onClick={{fn this.addField group.value}} />
+                                {{#if group.value}}
+                                    <Button @type="danger" @icon="times" @iconPrefix="fas" @size="sm" @onClick={{fn this.removeGroup group.value}} />
+                                {{/if}}
+                            </div>
+                        </div>
+
+                        <div class="content-panel-body">
+                            <Container data-meta-group-key={{or group.value "default"}} class="space-y-2">
+                                {{#each group.items as |metaField|}}
+                                    <div class="content-panel cursor-move">
+                                        <div class="content-panel-header items-center">
+                                            <div class="font-semibold dark:text-gray-100">
+                                                <span class="mr-1">Custom Field:</span>
+                                                <span>{{metaField.label}}</span>
+                                            </div>
+                                            <a href="javascript:;" {{on "click" (fn this.removeField metaField)}} class="btn btn-danger btn-sm">
+                                                <FaIcon @icon="trash" />
+                                            </a>
+                                        </div>
+                                        <div class="content-panel-body">
+                                            <div class="grid grid-cols-1 lg:grid-cols-3 gap-2" data-meta-field-key={{metaField.key}}>
+                                                <InputGroup @name="Label" @value={{metaField.label}} {{on "keyup" (fn this.setFieldLabel metaField)}} />
+                                                <div class="input-group {{if (eq metaField.type "select") 'col-span-2'}}">
+                                                    <div class="flex items-center justify-between">
+                                                        <label class="font-medium flex-1">Field Type</label>
+                                                    </div>
+                                                    <div class="flex items-center justify-between">
+                                                        <Select class="w-full" @value={{metaField.type}} @options={{this.metaFieldTypes}} @optionLabel="label" @optionValue="key" @placeholder="Select field type" @onSelect={{fn (mut metaField.type)}} />
+                                                        {{#if (eq metaField.type "select")}}
+                                                            <div class="pl-2">
+                                                                <BasicDropdown @renderInPlace={{false}} as |dd|>
+                                                                    <dd.Trigger class="btn btn-default py-2.5 cursor-pointer">
+                                                                        <FaIcon @icon="cog" class="mr-1" /> Options
+                                                                    </dd.Trigger>
+                                                                    <dd.Content class="bg-transparent">
+                                                                        <div class="w-80 mt-2 rounded shadow-md be-white dark:bg-gray-800">
+                                                                            <div class="border border-gray-300 shdaow-sm rounded dark:border-gray-900">
+                                                                                <div class="flex items-start justify-between mb-1 p-3">
+                                                                                    <Button @type="primary" @size="xs" @text="Add Option" @onClick={{fn this.addMetaFieldOption metaField}} />
+                                                                                    <div class="flex flex-col space-y-3">
+                                                                                        <Toggle @label="Key-Value" @isToggled={{metaField.useKvOptions}} @onToggle={{fn this.toggleMetaFieldKv metaField}} />
+                                                                                        {{#unless metaField.useKvOptions}}
+                                                                                            <Toggle @label="Humanize" @isToggled={{metaField.humanizeOptions}} @onToggle={{fn this.toggleMetaFieldHumanizeOptions metaField}} />
+                                                                                        {{/unless}}
+                                                                                    </div>
+                                                                                </div>
+                                                                                <Dragula @onDrop={{fn this.sortMetaFieldOptions metaField}} as |SubContainer|>
+                                                                                    <SubContainer>
+                                                                                        {{#each metaField.options as |option index|}}
+                                                                                            <div id={{option.id}} class="meta-field-option z-50 py-2 px-3 cursor-move border-b border-gray-300 dark:border-gray-900 last:border-b-0" data-index={{index}}>
+                                                                                                <div class="flex items-start justify-between">
+                                                                                                    <FaIcon @icon="grip-lines" class="mr-2" />
+                                                                                                    <div class="flex items-start flex-1">
+                                                                                                        <div class="space-y-3 flex flex-col pr-2 flex-1">
+                                                                                                            {{#if metaField.useKvOptions}}
+                                                                                                                <Input @type="text" @value={{option.key}} class="form-input form-input-sm" placeholder="Key" />
+                                                                                                            {{/if}}
+                                                                                                            <Input @type="text" @value={{option.value}} class="form-input form-input-sm" placeholder="Value" />
+                                                                                                        </div>
+                                                                                                        <Button @size="xs" @type="danger" @icon="trash" @onClick={{fn this.removeMetaFieldOption metaField option}} />
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            </div>
+                                                                                        {{/each}}
+                                                                                    </SubContainer>
+                                                                                </Dragula>
+                                                                            </div>
+                                                                        </div>
+                                                                    </dd.Content>
+                                                                </BasicDropdown>
+                                                            </div>
+                                                        {{/if}}
+                                                    </div>
+                                                </div>
+                                                <InputGroup @name="Description" @value={{metaField.description}} />
+                                                <div class="input-group">
+                                                    <Checkbox @label="Required" @onToggle={{fn (mut metaField.required)}} @value={{metaField.required}} />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                {{/each}}
+                            </Container>
+                        </div>
+                    </div>
+                {{/each}}
+            </Dragula>
+        </div>
+    </div>
+    {{yield}}
+</div>

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

@@ -0,0 +1,233 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, setProperties } from '@ember/object';
+import { isArray } from '@ember/array';
+import { classify, underscore } from '@ember/string';
+import groupBy from '@fleetbase/ember-core/utils/macros/group-by';
+import generateUuid from '@fleetbase/ember-core/utils/generate-uuid';
+
+export default class OrderConfigFieldsEditorComponent extends Component {
+    constructor() {
+        super(...arguments);
+        const { orderConfig } = this.args;
+
+        if (isArray(orderConfig.meta.fields)) {
+            this.fields = orderConfig.meta.fields;
+        }
+    }
+
+    @service modalsManager;
+    @service notifications;
+
+    @groupBy('fields', 'group') groupedMetaFields;
+
+    @tracked fields = [];
+    @tracked metaFieldTypes = [
+        {
+            label: 'Text Field',
+            key: 'text',
+        },
+        {
+            label: 'Boolean',
+            description: 'Allows user to toggle a true or false property by checkbox',
+            key: 'boolean',
+        },
+        {
+            label: 'Dropdown Select',
+            description: 'Allows user to select an option from a dropdown of options',
+            key: 'select',
+            hasOptions: true,
+        },
+        {
+            label: 'Datetime Selector',
+            description: 'Allows user to select a date & time',
+            key: 'datetime',
+        },
+        {
+            label: 'Port Selector',
+            description: 'Allows user to select a port',
+            serialize: 'model:port',
+            key: 'port',
+        },
+        {
+            label: 'Vessel Selector',
+            description: 'Allows user to select a vessel',
+            serialize: 'model:vessel',
+            key: 'vessel',
+        },
+    ];
+
+    @action sendAction(action) {
+        const actionName = `on${classify(action)}`;
+        const params = [...arguments];
+
+        params.shift();
+
+        if (typeof this.args[actionName] === 'function') {
+            this.args[actionName](...params);
+        }
+    }
+
+    @action moveMetaField(el, target) {
+        const { fields } = this;
+        const { metaFieldKey } = el.dataset;
+        const { metaGroupKey } = target.dataset;
+
+        // get the index of the moved metafield
+        const metaFieldIndex = fields.findIndex((field) => field.key === metaFieldKey);
+
+        // get the meta field and update the group
+        const metaField = fields[metaFieldIndex];
+
+        if (!metaField) {
+            return;
+        }
+
+        metaField.group = metaGroupKey;
+
+        if (typeof this.args.onFieldsChanged === 'function') {
+            this.args.onFieldsChanged(fields);
+        }
+    }
+
+    @action addMetaFieldGroup() {
+        this.modalsManager.show('modals/meta-field-group-form', {
+            title: 'Add a new group of meta fields',
+            groupName: null,
+            confirm: (modal) => {
+                const groupName = modal.getOption('groupName');
+
+                if (typeof groupName !== 'string') {
+                    return this.notifications.warning('No group name entered.');
+                }
+
+                const group = underscore(groupName.toLowerCase());
+
+                modal.startLoading();
+                this.addField(group);
+                modal.done();
+            },
+        });
+    }
+
+    @action addField(group = '_untitled') {
+        this.fields.pushObject({
+            id: generateUuid(),
+            label: null,
+            key: null,
+            type: 'text',
+            kvOptions: false,
+            group,
+        });
+
+        if (typeof this.args.onFieldsChanged === 'function') {
+            this.args.onFieldsChanged(this.fields);
+        }
+    }
+
+    @action removeField(metaField) {
+        const { fields } = this;
+
+        fields.removeObject(metaField);
+
+        if (typeof this.args.onFieldsChanged === 'function') {
+            this.args.onFieldsChanged(fields);
+        }
+    }
+
+    @action setFieldLabel(metaField, { target }) {
+        const { value } = target;
+        const label = value || '';
+        const key = underscore(label.toLowerCase());
+
+        setProperties(metaField, { label, key });
+
+        if (typeof this.args.onFieldsChanged === 'function') {
+            this.args.onFieldsChanged(this.fields);
+        }
+    }
+
+    @action addMetaFieldOption(metaField) {
+        const options = metaField.options || [];
+        const option = { id: generateUuid(), value: '' };
+
+        if (metaField.kvOptions) {
+            option['key'] = '';
+        }
+
+        options.pushObject(option);
+        setProperties(metaField, { options });
+
+        if (typeof this.args.onFieldsChanged === 'function') {
+            this.args.onFieldsChanged(this.fields);
+        }
+    }
+
+    @action removeMetaFieldOption(metaField, option) {
+        if (metaField.options.length === 1) {
+            return;
+        }
+
+        metaField.options.removeObject(option);
+
+        if (typeof this.args.onFieldsChanged === 'function') {
+            this.args.onFieldsChanged(this.fields);
+        }
+    }
+
+    @action toggleMetaFieldKv(metaField, useKvOptions) {
+        setProperties(metaField, { useKvOptions, options: [] });
+
+        this.addMetaFieldOption(metaField);
+
+        if (typeof this.args.onFieldsChanged === 'function') {
+            this.args.onFieldsChanged(this.fields);
+        }
+    }
+
+    @action toggleMetaFieldHumanizeOptions(metaField, humanizeOptions) {
+        setProperties(metaField, { humanizeOptions, options: [] });
+
+        this.addMetaFieldOption(metaField);
+
+        if (typeof this.args.onFieldsChanged === 'function') {
+            this.args.onFieldsChanged(this.fields);
+        }
+    }
+
+    @action sortMetaFieldOptions(metaField, el, target) {
+        console.log(`sortMetaFieldOptions`, ...arguments);
+        // const { fields } = this;
+        // const { index } = el.dataset;
+        // const parentEl = el.parentElement();
+
+        // console.log(parentEl);
+        // const { metaGroupKey } = target.dataset;
+
+        // // get the index of the moved metafield
+        // const metaFieldIndex = fields.findIndex((field) => field.key === metaFieldKey);
+
+        // // get the meta field and update the group
+        // const metaField = fields[metaFieldIndex];
+
+        // if (!metaField) {
+        //     return;
+        // }
+
+        // metaField.group = metaGroupKey;
+
+        // if (typeof this.args.onFieldsChanged === 'function') {
+        //     this.args.onFieldsChanged(fields);
+        // }
+    }
+
+    @action removeGroup(group) {
+        const fields = this.fields.filter((metaField) => metaField.group !== group);
+        this.fields = fields;
+
+        if (typeof this.args.onFieldsChanged === 'function') {
+            this.args.onFieldsChanged(fields);
+        }
+    }
+}

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

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

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

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

package/addon/components/order-config.hbs

@@ -0,0 +1,66 @@
+<div class="order-config" {{did-insert this.setupComponent}} ...attributes>
+    <div class="space-y-1">
+        <div class="px-5 mt-6 flex">
+            <div class="flex-1">
+                <InfoBlock class="px-3 py-2">Select an order configuration to modify, or click "New Config" to create a new order configuration.</InfoBlock>
+            </div>
+            <div>
+                <Button class="ml-6" @icon="plus" @iconPrefix="fas" @text="New Config" @size="md" @onClick={{this.createNewOrderConfig}} />
+            </div>
+        </div>
+        <div class="flex items-center justify-between p-4">
+            {{#if this.isLoading}}
+                <div class="flex text-center items-center justify-center p-4">
+                    <Spinner class="mr-2 dark:text-gray-100" />
+                    <span class="dark:text-gray-100">Loading your order configurations...</span>
+                </div>
+            {{else}}
+                <Select class="w-full flex-1" @value={{this.selected}} @options={{this.configurations}} @optionLabel="name" @optionValue="namespace" @placeholder="Select order configuration" @onSelect={{this.selectConfig}} />
+                {{#if this.selected}}
+                    <div class="pl-6">
+                        <Button @type="primary" @icon="save" @text="Save Changes" @size="md" @isLoading={{this.isSaving}} @onClick={{this.saveConfig}} />
+                    </div>
+                {{/if}}
+            {{/if}}
+        </div>
+
+        <div class="w-full h-screen-70">
+            {{#if this.orderConfig}}
+                <div class="ui-tabs mb-4">
+                    <nav>
+                        <a href="javascript:;" class="ui-tab {{if (eq this.activeTab 'details') 'active'}}" {{on "click" (fn
+                            (mut this.activeTab) "details" )}}>
+                            Details
+                        </a>
+                        <a href="javascript:;" class="ui-tab  {{if (eq this.activeTab 'meta') 'active'}}" {{on "click" (fn
+                            (mut this.activeTab) "meta" )}}>
+                            Custom Fields
+                        </a>
+                        <a href="javascript:;" class="ui-tab  {{if (eq this.activeTab 'activity') 'active'}}" {{on "click"
+                            (fn (mut this.activeTab) "activity" )}}>
+                            Activity Flow
+                        </a>
+                        <a href="javascript:;" class="ui-tab  {{if (eq this.activeTab 'entities') 'active'}}" {{on "click"
+                            (fn (mut this.activeTab) "entities" )}}>
+                            Entities
+                        </a>
+                    </nav>
+                </div>
+            {{/if}}
+
+            <div class="p-4 mb-20">
+                {{#if this.orderConfig}}
+                    {{#if this.isDetailsTab}}
+                        <OrderConfig::DetailsEditor @orderConfig={{this.orderConfig}} @onUninstall={{this.uninstallConfiguration}} @onDelete={{this.deleteExtension}} @onClone={{this.cloneConfiguration}} />
+                    {{else if (eq this.activeTab "meta")}}
+                        <OrderConfig::FieldsEditor @orderConfig={{this.orderConfig}} @onFieldsChanged={{this.setMetaFields}} />
+                    {{else if (eq this.activeTab "activity")}}
+                        <OrderConfig::ActivityFlowEditor @orderConfig={{this.orderConfig}} @onFlowChanged={{this.setFlow}} />
+                    {{else if (eq this.activeTab "entities")}}
+                        <OrderConfig::EntitiesEditor @orderConfig={{this.orderConfig}} @onEntitiesChanged={{this.setEntities}} />
+                    {{/if}}
+                {{/if}}
+            </div>
+        </div>
+    </div>
+</div>