@fleetbase/fleetops-engine 0.4.15 → 0.4.17

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

@@ -0,0 +1,50 @@
+<div class="px-6 space-y-4">
+    <div class="flex flex-row items-center py-2 space-x-4">
+        <Button @type="primary" @icon="square-plus" @text={{t "fleet-ops.component.order-config-manager.custom-fields.new-field-group"}} @onClick={{this.createNewFieldGroup}} />
+    </div>
+    {{#each this.groups as |group|}}
+        <ContentPanel @title={{group.name}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+            <div class="flex flex-row items-center py-2 space-x-4 mb-3">
+                <Button @type="primary" @icon="square-plus" @text={{t "fleet-ops.component.order-config-manager.custom-fields.new-custom-field"}} @onClick={{fn this.createNewCustomField group}} />
+                <DropdownButton @text={{concat (t "fleet-ops.component.order-config-manager.custom-fields.grid-size") ": " (or group.meta.grid_size 1)}} @textClass="text-sm mr-2" @buttonClass="flex-row-reverse w-44 justify-between" @icon="caret-down" @iconClass="mr-0i" @size="sm" @iconPrefix="fas" @triggerClass="hidden md:flex" as |dd|>
+                    <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
+                        <div class="p-1">
+                            {{#each this.gridSizeOptions as |size|}}
+                                <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.selectGridSize group size)}}>
+                                    <div class="flex-1 flex flex-row items-center">
+                                        <div class="w-6">
+                                            <FaIcon @icon="grip" />
+                                        </div>
+                                        <span>{{size}}</span>
+                                    </div>
+                                    <div>
+                                        {{#if (eq size (or group.meta.grid_size 1))}}
+                                            <FaIcon @icon="check" class="text-green-500" />
+                                        {{/if}}
+                                    </div>
+                                </a>
+                            {{/each}}
+                        </div>
+                    </div>
+                </DropdownButton>
+                <Button @type="danger" @icon="trash" @onClick={{fn this.deleteCustomFieldGroup group}} />
+            </div>
+            <div class="grid grid-cols-{{or group.meta.grid_size 1}} gap-2">
+                {{#each group.customFields as |customField|}}
+                    <div class="rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-1.5 flex flex-row items-center justify-between {{unless customField.id 'opacity-50'}}">
+                        <div class="flex items-center space-x-2">
+                            <div class="font-semibold text-sm">{{customField.label}}</div>
+                            <div class="order-config-custom-field-type-pill rounded-lg bg-gray-300 dark:bg-gray-700 text-black dark:text-gray-300 px-2 py-0.5 text-xs truncate font-mono">
+                                {{customField.type}}
+                            </div>
+                        </div>
+                        <div class="flex flex-row items-center space-x-2">
+                            <Button @type="default" @icon="pencil" @onClick={{fn this.editCustomField customField}} />
+                            <Button @type="danger" @icon="trash" @onClick={{fn this.deleteCustomField customField}} />
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        </ContentPanel>
+    {{/each}}
+</div>

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

@@ -0,0 +1,276 @@
+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 isObject from '@fleetbase/ember-core/utils/is-object';
+import contextComponentCallback from '../../utils/context-component-callback';
+
+/**
+ * Component class for managing custom fields within an order configuration.
+ * This component allows for creating, editing, grouping, and managing custom fields,
+ * along with their associated field groups in the context of an order configuration.
+ *
+ * @extends Component
+ */
+export default class OrderConfigManagerCustomFieldsComponent extends Component {
+    /**
+     * Store service for handling data operations.
+     * @service
+     */
+    @service store;
+
+    /**
+     * Notifications service for displaying user feedback.
+     * @service
+     */
+    @service notifications;
+
+    /**
+     * Modals manager service for handling modal dialogs.
+     * @service
+     */
+    @service modalsManager;
+
+    /**
+     * Context panel service for managing UI contexts.
+     * @service
+     */
+    @service contextPanel;
+
+    /**
+     * Internationalization service for handling translations.
+     * @service
+     */
+    @service intl;
+
+    /**
+     * Tracked array of field groups.
+     * @tracked
+     */
+    @tracked groups = [];
+
+    /**
+     * Tracked property for the configuration being managed.
+     * @tracked
+     */
+    @tracked config;
+
+    /**
+     * Tracked array of grid size options for the custom field groups.
+     * @tracked
+     */
+    @tracked gridSizeOptions = [1, 2, 3];
+
+    /**
+     * Constructor for OrderConfigManagerCustomFieldsComponent.
+     * Initializes the component with the provided configuration and loads custom fields.
+     * @param {Object} owner - The owner of the component.
+     * @param {Object} args - The arguments passed to the component, including the configuration.
+     */
+    constructor(owner, { config, configManagerContext }) {
+        super(...arguments);
+        this.config = config;
+        this.loadCustomFields.perform();
+
+        configManagerContext.on('onConfigChanged', (newConfig) => {
+            this.changeConfig(newConfig);
+        });
+    }
+
+    /**
+     * Action method to select a grid size for a custom field group.
+     * @param {Object} group - The custom field group to update.
+     * @param {number} size - The selected grid size.
+     * @action
+     */
+    @action selectGridSize(group, size) {
+        if (!isObject(group.meta)) {
+            group.set('meta', {});
+        }
+        group.meta.grid_size = size;
+
+        return group.save();
+    }
+
+    /**
+     * Action method to create a new custom field within a group.
+     * @param {Object} group - The group to add the new custom field to.
+     * @action
+     */
+    @action createNewCustomField(group) {
+        const customField = this.store.createRecord('custom-field', {
+            category_uuid: group.id,
+            subject_uuid: this.config.id,
+            subject_type: 'order-config',
+            required: 0,
+            options: [],
+        });
+
+        this.addCustomFieldToGroup(customField, group);
+        this.editCustomField(customField);
+    }
+
+    /**
+     * Action method to edit an existing custom field.
+     * @param {Object} customField - The custom field to edit.
+     * @action
+     */
+    @action editCustomField(customField) {
+        contextComponentCallback(this, 'onContextChanged', customField);
+        this.contextPanel.focus(customField, 'editing', {
+            args: {
+                customField,
+                onCustomFieldSaved: () => {
+                    this.loadCustomFields.perform();
+                    this.contextPanel.clear();
+                    contextComponentCallback(this, 'onContextChanged', null);
+                },
+                onPressCancel: () => {
+                    this.contextPanel.clear();
+                    contextComponentCallback(this, 'onContextChanged', null);
+                },
+            },
+        });
+    }
+
+    /**
+     * Action method to delete a custom field.
+     * @param {Object} customField - The custom field to delete.
+     * @action
+     */
+    @action deleteCustomField(customField) {
+        this.modalsManager.confirm({
+            title: this.intl.t('fleet-ops.component.order-config-manager.custom-fields.delete-custom-field-prompt.modal-title'),
+            body: this.intl.t('fleet-ops.component.order-config-manager.custom-fields.delete-custom-field-prompt.delete-body-message'),
+            acceptButtonText: this.intl.t('fleet-ops.component.order-config-manager.custom-fields.delete-custom-field-prompt.confirm-delete'),
+            confirm: () => {
+                return customField.destroyRecord();
+            },
+        });
+    }
+
+    /**
+     * Action method to create a new field group for custom fields.
+     * @action
+     */
+    @action createNewFieldGroup() {
+        const customFieldGroup = this.store.createRecord('category', {
+            owner_uuid: this.config.id,
+            owner_type: 'order-config',
+            for: 'custom_field_group',
+        });
+
+        this.modalsManager.show('modals/new-custom-field-group', {
+            title: this.intl.t('fleet-ops.component.modals.new-custom-field-group.modal-title'),
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            customFieldGroup,
+            confirm: (modal) => {
+                if (!customFieldGroup.name) {
+                    return;
+                }
+
+                modal.startLoading();
+                return customFieldGroup
+                    .save()
+                    .then(() => {
+                        this.loadCustomFields.perform();
+                    })
+                    .catch((error) => {
+                        this.notifications.serverError(error);
+                    });
+            },
+        });
+    }
+
+    /**
+     * Action method to delete a custom field group.
+     * @param {Object} group - The field group to delete.
+     * @action
+     */
+    @action deleteCustomFieldGroup(group) {
+        this.modalsManager.confirm({
+            title: this.intl.t('fleet-ops.component.order-config-manager.custom-fields.delete-custom-field-group-prompt.modal-title'),
+            body: this.intl.t('fleet-ops.component.order-config-manager.custom-fields.delete-custom-field-group-prompt.delete-body-message'),
+            acceptButtonText: this.intl.t('fleet-ops.component.order-config-manager.custom-fields.delete-custom-field-group-prompt.confirm-delete'),
+            confirm: () => {
+                return group.destroyRecord();
+            },
+        });
+    }
+
+    /**
+     * A task method to load custom fields from the store and group them.
+     * @task
+     */
+    @task *loadCustomFields() {
+        this.groups = yield this.store.query('category', { owner_uuid: this.config.id, for: 'custom_field_group' });
+        this.customFields = yield this.store.query('custom-field', { subject_uuid: this.config.id });
+        this.groupCustomFields();
+        this.initializeContext();
+    }
+
+    /**
+     * 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-field') {
+                    const contextCustomField = this.store.peekRecord('custom-field', context);
+                    if (contextCustomField) {
+                        this.editCustomField(contextCustomField);
+                    }
+                }
+            },
+            300
+        );
+    }
+
+    /**
+     * Handle the change of config.
+     *
+     * @param {OrderConfigModel} newConfig
+     * @memberof OrderConfigManagerCustomFieldsComponent
+     */
+    changeConfig(newConfig) {
+        this.config = newConfig;
+        this.loadCustomFields.perform();
+    }
+
+    /**
+     * Adds a custom field to a specified group.
+     * @param {Object} customField - The custom field to add.
+     * @param {Object} group - The group to add the custom field to.
+     */
+    addCustomFieldToGroup(customField, group) {
+        if (!isArray(group.customFields)) {
+            group.customFields = [];
+        }
+        group.set('customFields', [...group.customFields, customField]);
+    }
+
+    /**
+     * Organizes custom fields into their respective groups.
+     */
+    groupCustomFields() {
+        for (let i = 0; i < this.groups.length; i++) {
+            const group = this.groups[i];
+            group.set(
+                'customFields',
+                this.customFields.filter((customField) => {
+                    return customField.category_uuid === group.id;
+                })
+            );
+        }
+    }
+}

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

@@ -0,0 +1,23 @@
+<div class="px-6 py-2 space-y-4">
+    <ContentPanel @title={{t "fleet-ops.component.order-config-manager.details.details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+        <InputGroup @name={{t "fleet-ops.component.order-config-manager.details.name"}} @value={{@config.name}} @disabled={{@config.core_service}} />
+        <InputGroup @name={{t "fleet-ops.component.order-config-manager.details.description"}} @value={{@config.description}} @disabled={{@config.core_service}} />
+        <InputGroup @name={{t "fleet-ops.component.order-config-manager.details.tags"}}>
+            <TagInput class="form-input" @placeholder={{t "fleet-ops.component.order-config-manager.details.add-tags"}} @allowSpacesInTags={{true}} @tags={{@config.tags}} @addTag={{@config.addTag}} @removeTagAtIndex={{@config.removeTag}} @disabled={{@config.core_service}} as |tag|>
+                {{tag}}
+            </TagInput>
+        </InputGroup>
+        <InputGroup @name={{t "fleet-ops.component.order-config-manager.details.key"}} @value={{@config.key}} @disabled={{true}} />
+        <InputGroup @name={{t "fleet-ops.component.order-config-manager.details.namespace"}} @value={{@config.namespace}} @disabled={{true}} />
+        <InputGroup @name={{t "fleet-ops.component.order-config-manager.details.version"}} @value={{@config.version}} @disabled={{true}} />
+    </ContentPanel>
+
+    {{#unless @config.core_service}}
+        <ContentPanel @title={{t "fleet-ops.component.order-config-manager.details.controls"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+            <div class="flex flex-row items-center py-2 space-x-4">
+                <Button @type="primary" @icon="save" @text={{t "common.save-changes"}} @onClick={{this.save}} @disabled={{not @config.hasDirtyAttributes}} />
+                <Button @type="danger" @icon="trash" @text={{t "fleet-ops.component.order-config-manager.details.delete-config"}} @onClick={{this.delete}} />
+            </div>
+        </ContentPanel>
+    {{/unless}}
+</div>

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

@@ -0,0 +1,97 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+/**
+ * Component class for managing the details of an order configuration.
+ * This component allows for saving and deleting order configurations,
+ * with user feedback through notifications and confirmation modals.
+ *
+ * @extends Component
+ */
+export default class OrderConfigManagerDetailsComponent extends Component {
+    /**
+     * Modals manager service for handling modal dialogs.
+     * @service
+     */
+    @service modalsManager;
+
+    /**
+     * Notifications service for displaying user feedback.
+     * @service
+     */
+    @service notifications;
+
+    /**
+     * Internationalization service for handling translations.
+     * @service
+     */
+    @service intl;
+
+    /**
+     * Store service for handling data storage and retrieval.
+     * @service
+     */
+    @service store;
+
+    /**
+     * Tracked property for the configuration being managed.
+     * @tracked
+     */
+    @tracked config;
+
+    /**
+     * Constructor for OrderConfigManagerDetailsComponent.
+     * Initializes the component with the provided configuration.
+     * @param {Object} owner - The owner of the component.
+     * @param {Object} args - The arguments passed to the component, including the configuration.
+     */
+    constructor(owner, { config }) {
+        super(...arguments);
+        this.config = config;
+    }
+
+    /**
+     * Action method to save the current configuration.
+     * Provides user feedback and executes callback on successful update.
+     * @action
+     */
+    @action save() {
+        return this.config
+            .save()
+            .then(() => {
+                this.notifications.success(this.intl.t('fleet-ops.component.order-config-manager.saved-success-message', { orderConfigName: this.config.name }));
+                if (typeof this.args.onConfigUpdated === 'function') {
+                    this.args.onConfigUpdated(this.config);
+                }
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            });
+    }
+
+    /**
+     * Action method to delete the current configuration.
+     * Provides a confirmation modal and executes callback on successful deletion.
+     * @action
+     */
+    @action delete() {
+        this.modalsManager.confirm({
+            title: this.intl.t('fleet-ops.component.order-config-manager.details.delete.delete-title'),
+            body: this.intl.t('fleet-ops.component.order-config-manager.details.delete.delete-body-message'),
+            acceptButtonText: this.intl.t('fleet-ops.component.order-config-manager.details.delete.confirm-delete'),
+            confirm: () => {
+                if (typeof this.args.onConfigDeleting === 'function') {
+                    this.args.onConfigDeleting(this.config);
+                }
+
+                return this.config.destroyRecord().then(() => {
+                    if (typeof this.args.onConfigDeleted === 'function') {
+                        this.args.onConfigDeleted(this.config);
+                    }
+                });
+            },
+        });
+    }
+}

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

@@ -0,0 +1,54 @@
+<div class="px-6 space-y-4">
+    <div class="flex flex-row items-center py-2 space-x-4">
+        <Button @type="primary" @icon="plus" @text={{t "fleet-ops.component.order-config-manager.entities.new-custom-entity"}} @onClick={{this.createNewCustomEntity}} />
+    </div>
+    {{#each this.customEntities as |customEntity index|}}
+        <ContentPanel @title={{customEntity.name}} @subtitle={{customEntity.description}} @panelSubtitleInlineClass="text-xs" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+            <div class="flex flex-row items-center py-2 space-x-2 mb-4">
+                <Button @type="default" @icon="pencil" @onClick={{fn this.editCustomEntity customEntity index}} />
+                <Button @type="danger" @icon="trash" @onClick={{fn this.deleteCustomEntity customEntity index}} />
+            </div>
+            <div class="flex">
+                <div class="pr-4">
+                    <div class="w-32 flex flex-col items-center">
+                        <Image src={{customEntity.photo_url}} alt={{customEntity.name}} height="128" width="128" class="h-32 w-32 rounded-md" />
+                    </div>
+                </div>
+                <div class="flex-1 space-y-4 pl-2">
+                    <div class="grid grid-cols-4 gap-2">
+                        <div>
+                            <div class="font-semibold text-sm mb-2">{{t "fleet-ops.component.order-config-manager.entities.name"}}</div>
+                            <div class="text-xs">{{customEntity.name}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold text-sm mb-2">{{t "fleet-ops.component.order-config-manager.entities.description"}}</div>
+                            <div class="text-xs">{{customEntity.description}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold text-sm mb-2">{{t "fleet-ops.component.order-config-manager.entities.type"}}</div>
+                            <div class="text-xs"><Badge @type="default">{{customEntity.type}}</Badge></div>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-4 gap-2">
+                        <div>
+                            <div class="font-semibold text-sm mb-2">{{t "fleet-ops.component.order-config-manager.entities.length"}}</div>
+                            <div class="text-xs">{{customEntity.length}} {{customEntity.dimensions_unit}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold text-sm mb-2">{{t "fleet-ops.component.order-config-manager.entities.width"}}</div>
+                            <div class="text-xs">{{customEntity.width}} {{customEntity.dimensions_unit}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold text-sm mb-2">{{t "fleet-ops.component.order-config-manager.entities.height"}}</div>
+                            <div class="text-xs">{{customEntity.height}} {{customEntity.dimensions_unit}}</div>
+                        </div>
+                        <div>
+                            <div class="font-semibold text-sm mb-2">{{t "fleet-ops.component.order-config-manager.entities.weight"}}</div>
+                            <div class="text-xs">{{customEntity.weight}} {{customEntity.weight_unit}}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ContentPanel>
+    {{/each}}
+</div>