@fleetbase/fleetops-engine 0.6.18 → 0.6.20

package/addon/components/custom-field-form-panel.hbs

@@ -1,121 +0,0 @@
-<Overlay
-    @onLoad={{this.setOverlayContext}}
-    @onOpen={{this.onOpen}}
-    @onClose={{this.onClose}}
-    @onToggle={{this.onToggle}}
-    @position="right"
-    @noBackdrop={{true}}
-    @fullHeight={{true}}
-    @isResizable={{or this.isResizable @isResizable}}
-    @width={{or this.width @width "570px"}}
->
-    <Overlay::Header
-        @title={{if
-            this.customField.label
-            (concat (t "fleet-ops.component.custom-field-form-panel.custom-field-title-concat") this.customField.label)
-            (t "fleet-ops.component.custom-field-form-panel.new-custom-field")
-        }}
-        @hideStatusDot={{true}}
-        @titleWrapperClass="leading-5"
-    >
-        <div class="flex flex-1 justify-end">
-            <Button
-                @icon={{if this.customField.id "save" "check"}}
-                @type="primary"
-                @text={{if this.customField.id (t "fleet-ops.component.custom-field-form-panel.save-custom-field") (t "fleet-ops.component.custom-field-form-panel.create-custom-field")}}
-                @onClick={{perform this.save}}
-                @isLoading={{not this.save.isIdle}}
-                @wrapperClass="mr-2"
-            />
-            <Button
-                @type="default"
-                @icon="times"
-                @helpText={{if
-                    this.customField.id
-                    (t "fleet-ops.component.custom-field-form-panel.cancel-edit-custom-field")
-                    (t "fleet-ops.component.custom-field-form-panel.close-new-custom-field")
-                }}
-                @onClick={{this.onPressCancel}}
-            />
-        </div>
-    </Overlay::Header>
-
-    <Overlay::Body @wrapperClass="px-4 pt-4">
-        <InputGroup @name={{t "fleet-ops.component.custom-field-form-panel.field-label"}} @value={{this.customField.label}} {{on "input" this.setCustomFieldName}} />
-        <InputGroup @name={{t "fleet-ops.component.custom-field-form-panel.field-description"}} @value={{this.customField.description}} />
-        <InputGroup @name={{t "fleet-ops.component.custom-field-form-panel.field-help-text"}} @value={{this.customField.help_text}} />
-        <InputGroup>
-            <Toggle @isToggled={{this.customField.required}} @onToggle={{fn (mut this.customField.required)}}>
-                <span class="dark:text-gray-100 text-sm ml-2">{{t "fleet-ops.component.custom-field-form-panel.field-is-required"}}</span>
-            </Toggle>
-        </InputGroup>
-        <InputGroup>
-            <Toggle @isToggled={{this.customField.editable}} @onToggle={{fn (mut this.customField.editable)}}>
-                <span class="dark:text-gray-100 text-sm ml-2">{{t "fleet-ops.component.custom-field-form-panel.field-is-editable"}}</span>
-            </Toggle>
-        </InputGroup>
-        <InputGroup @name={{t "fleet-ops.component.custom-field-form-panel.field-type"}}>
-            <select class="form-select w-full has--placeholder" {{on "change" this.onSelectCustomFieldType}}>
-                <option selected disabled>
-                    {{t "fleet-ops.component.custom-field-form-panel.select-field-type"}}
-                </option>
-                {{#each-in this.customFieldTypeMap as |key|}}
-                    <option value={{dasherize key}} selected={{eq this.customField.type (dasherize key)}}>
-                        {{smart-humanize key}}
-                    </option>
-                {{/each-in}}
-            </select>
-        </InputGroup>
-        {{#if this.currentFieldMap.hasOptions}}
-            <CustomFieldFormPanel::OptionsInput @customField={{this.customField}} @fieldMap={{this.currentFieldMap}} class="mb-4" />
-        {{/if}}
-        {{#if this.currentFieldMap.allowedModels}}
-            <InputGroup @name={{t "fleet-ops.component.custom-field-form-panel.field-model-type"}}>
-                <select class="form-select w-full has--placeholder" {{on "change" this.onSelectModelType}}>
-                    <option selected disabled>
-                        {{t "fleet-ops.component.custom-field-form-panel.field-select-model-type"}}
-                    </option>
-                    {{#each this.currentFieldMap.allowedModels as |modelName|}}
-                        <option value={{dasherize modelName}} selected={{eq this.customField.meta.modelName (dasherize modelName)}}>
-                            {{smart-humanize modelName}}
-                        </option>
-                    {{/each}}
-                </select>
-            </InputGroup>
-        {{/if}}
-        <InputGroup @name={{t "fleet-ops.component.custom-field-form-panel.meta-col-span"}}>
-            <DropdownButton
-                @text={{concat (t "fleet-ops.component.custom-field-form-panel.col-span-size") ": " (n-a this.customField.meta.colSpan)}}
-                @textClass="text-sm mr-2"
-                @buttonClass="flex-row-reverse w-64 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.colSpanSizeOptions as |size|}}
-                            <a href="javascript:;" class="next-dd-item" {{on "click" (dropdown-fn dd this.setCustomFieldMetaProperty "colSpan" 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 this.customField.meta.colSpan)}}
-                                        <FaIcon @icon="check" class="text-green-500" />
-                                    {{/if}}
-                                </div>
-                            </a>
-                        {{/each}}
-                    </div>
-                </div>
-            </DropdownButton>
-        </InputGroup>
-        <Spacer @height="300px" />
-    </Overlay::Body>
-</Overlay>

package/addon/components/custom-field-form-panel.js

@@ -1,147 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
-import { dasherize, camelize } from '@ember/string';
-import { task } from 'ember-concurrency';
-import isObject from '@fleetbase/ember-core/utils/is-object';
-import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
-import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
-import getCustomFieldTypeMap from '../utils/get-custom-field-type-map';
-
-/**
- * Component class for managing custom fields within forms.
- * This component facilitates the creation and editing of custom fields,
- * offering a variety of field types including inputs, selects, and file uploads.
- *
- * @extends Component
- */
-export default class CustomFieldFormPanelComponent extends Component {
-    /**
-     * Service for displaying notifications.
-     * @service
-     */
-    @service notifications;
-
-    /**
-     * Tracked property for the custom field being edited or created.
-     * @tracked
-     */
-    @tracked customField;
-
-    /**
-     * Tracked property representing the current mapping for the selected field type.
-     * @tracked
-     */
-    @tracked currentFieldMap;
-
-    /**
-     * A map defining the available custom field types and their corresponding components.
-     */
-    customFieldTypeMap = getCustomFieldTypeMap();
-
-    /**
-     * Tracked array of col span size options for the custom field groups.
-     * @tracked
-     */
-    @tracked colSpanSizeOptions = [1, 2, 3];
-
-    /**
-     * Constructor for CustomFieldFormPanelComponent.
-     * Applies context component arguments and selects the appropriate field map
-     * based on the custom field type.
-     */
-    constructor() {
-        super(...arguments);
-        applyContextComponentArguments(this);
-        this.selectFieldMap(this.customField.type);
-    }
-
-    /**
-     * A task for saving the custom field. It handles the save operation asynchronously,
-     * manages callbacks on success, and shows notifications on error.
-     * @task
-     */
-    @task *save() {
-        contextComponentCallback(this, 'onBeforeCustomFieldSaved', this.customField);
-
-        try {
-            this.customField = yield this.customField.save();
-        } catch (error) {
-            this.notifications.serverError(error);
-            return;
-        }
-
-        if (typeof this.onCustomFieldSaved === 'function') {
-            this.onCustomFieldSaved(this.customField);
-        }
-        contextComponentCallback(this, 'onCustomFieldSaved', this.customField);
-    }
-
-    /**
-     * Action method to set the name of the custom field. Converts the name to a dasherized string.
-     * @param {Event} event - The event object containing the new field name.
-     * @action
-     */
-    @action setCustomFieldName(event) {
-        const value = event.target.value;
-        this.customField.name = dasherize(value);
-    }
-
-    /**
-     * Action method for selecting the custom field type. It updates the field type
-     * and selects the corresponding field map.
-     * @param {Event} event - The event object containing the selected field type.
-     * @action
-     */
-    @action onSelectCustomFieldType(event) {
-        const value = event.target.value;
-        const type = dasherize(value);
-        this.customField.type = type;
-        this.selectFieldMap(type);
-    }
-
-    /**
-     * Action method for selecting a model type for the custom field.
-     * @param {Event} event - The event object containing the selected model type.
-     * @action
-     */
-    @action onSelectModelType(event) {
-        const value = event.target.value;
-        const modelName = dasherize(value);
-        this.setCustomFieldMetaProperty('modelName', modelName);
-    }
-
-    /**
-     * Action method to set a metadata property for the custom field.
-     * Initializes the metadata object if it doesn't exist.
-     * @param {string} key - The key of the metadata property.
-     * @param {*} value - The value to set for the property.
-     * @action
-     */
-    @action setCustomFieldMetaProperty(key, value) {
-        if (!isObject(this.customField.meta)) {
-            this.customField.set('meta', {});
-        }
-
-        const currentMeta = this.customField.meta ?? {};
-        this.customField.set('meta', { ...currentMeta, [key]: value });
-    }
-
-    /**
-     * Selects the field map based on the given field type.
-     * Updates the current field map and the component for the custom field.
-     * @param {string} type - The type of the custom field.
-     */
-    selectFieldMap(type) {
-        if (!type) {
-            return;
-        }
-        const fieldKey = camelize(type);
-        const fieldMap = this.customFieldTypeMap[fieldKey];
-        if (fieldMap) {
-            this.currentFieldMap = fieldMap;
-            this.customField.component = fieldMap.component;
-        }
-    }
-}

package/addon/components/custom-field-value.hbs

@@ -1,11 +0,0 @@
-<span class="custom-meta-field" {{did-insert this.setupComponent}} ...attributes>
-    {{#if this.isTextDisplay}}
-        {{@value}}
-    {{/if}}
-
-    {{#if this.isBooleanInput}}
-        <Badge @status={{if @metaField.value "success" ""}}>{{if @metaField.value "Yes" "No"}}</Badge>
-    {{/if}}
-
-    {{yield}}
-</span>

package/addon/components/custom-field-value.js

@@ -1,41 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
-import { action, computed } from '@ember/object';
-import { equal } from '@ember/object/computed';
-
-export default class CustomFieldValueComponent extends Component {
-    @service fetch;
-
-    @tracked selectedPort;
-    @tracked selectedVessel;
-
-    @equal('args.metaField.type', 'text') isTextInput;
-    @equal('args.metaField.type', 'select') isSelectInput;
-    @equal('args.metaField.type', 'vessel') isVesselInput;
-    @equal('args.metaField.type', 'port') isPortInput;
-    @equal('args.metaField.type', 'datetime') isDateTimeInput;
-    @equal('args.metaField.type', 'boolean') isBooleanInput;
-
-    @computed('args.metaField.type') get isTextDisplay() {
-        const { type } = this.args.metaField;
-
-        return ['text', 'select', 'vessel', 'port', 'datetime'].includes(type);
-    }
-
-    @action setupComponent() {
-        const { isPortInput, isVesselInput } = this;
-
-        if (isPortInput) {
-            this.fetchPort();
-        }
-
-        if (isVesselInput) {
-            this.fetchVessel();
-        }
-    }
-
-    @action fetchVessel() {}
-
-    @action fetchPort() {}
-}

package/addon/components/custom-field.hbs

@@ -1,89 +0,0 @@
-{{#if this.customFieldComponent}}
-    <div class="{{if this.customField.meta.colSpan (concat 'col-span-' this.customField.meta.colSpan) ''}}">
-        {{#if (eq this.customFieldComponent "input")}}
-            <InputGroup
-                @name={{this.customField.label}}
-                @value={{this.value}}
-                @required={{this.customField.required}}
-                @helpText={{this.customField.help_text}}
-                {{on "input" this.onChangeHandler}}
-            />
-        {{else if (eq this.customFieldComponent "select")}}
-            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
-                <select class="form-select w-full has--placeholder" {{on "change" this.onChangeHandler}}>
-                    <option selected disabled>
-                        {{this.customField.label}}
-                    </option>
-                    {{#each this.customField.options as |selectOption|}}
-                        <option value={{selectOption}} selected={{eq this.value selectOption}}>
-                            {{selectOption}}
-                        </option>
-                    {{/each}}
-                </select>
-            </InputGroup>
-        {{else if (eq this.customFieldComponent "phone-input")}}
-            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
-                <PhoneInput @value={{this.value}} @onInput={{this.onChangeHandler}} class="form-input w-full" />
-            </InputGroup>
-        {{else if (eq this.customFieldComponent "money-input")}}
-            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
-                <MoneyInput class="w-full" @wrapperClass="x-fleetops-input-height shadow-md" @value={{this.value}} @canSelectCurrency={{true}} @onChange={{this.onChangeHandler}} />
-            </InputGroup>
-        {{else if (eq this.customFieldComponent "date-time-input")}}
-            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
-                <DateTimeInput
-                    class="form-input"
-                    @value={{this.value}}
-                    @minDate={{format-date (now) "yyyy-MM-d"}}
-                    @minTime={{format-date (now) "HH:mm"}}
-                    @onUpdate={{this.onChangeHandler}}
-                />
-            </InputGroup>
-        {{else if (eq this.customFieldComponent "radio-button-select")}}
-            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
-                <div class="mt-2 flex items-center space-x-2">
-                    {{#each this.customField.options as |radioOption index|}}
-                        <div class="radio-group-item shadow-sm {{if (eq this.value radioOption) 'is-checked'}}">
-                            <div class="flex items-center">
-                                <RadioButton
-                                    @radioClass="focus:ring-blue-500"
-                                    @radioId={{concat this.customField.name "-radio-option-" index}}
-                                    @value={{radioOption}}
-                                    @groupValue={{this.value}}
-                                    @name={{radioOption}}
-                                    @changed={{this.onChangeHandler}}
-                                />
-                                <div class="ml-2 text-sm dark:text-gray-100 text-gray-900 truncate">{{radioOption}}</div>
-                            </div>
-                        </div>
-                    {{/each}}
-                </div>
-            </InputGroup>
-        {{else if (eq this.customFieldComponent "file-upload")}}
-            <InputGroup @name={{this.customField.label}} @required={{this.customField.required}} @helpText={{this.customField.help_text}}>
-                <div class="flex items-center">
-                    <FileUpload
-                        @name={{this.customField.name}}
-                        @for={{this.customField.name}}
-                        @accept={{join "," this.acceptedFileTypes}}
-                        @multiple={{false}}
-                        @onFileAdded={{this.onFileAddedHandler}}
-                    >
-                        <a tabindex={{0}} class="btn btn-default btn-xs cursor-pointer">
-                            <FaIcon @icon="upload" @size="sm" class="mr-2" />{{t "common.select-file"}}
-                        </a>
-                    </FileUpload>
-                    {{#if this.file}}
-                        <div class="ml-2 flex items-center text-sm">
-                            <Spinner class="dark:text-blue-400 text-blue-900" />
-                            <span class="ml-2 text-xs dark:text-blue-400 text-blue-900">{{round this.file.progress}}%</span>
-                        </div>
-                    {{/if}}
-                </div>
-                {{#if this.uploadedFile}}
-                    <File @file={{this.uploadedFile}} @onDelete={{this.removeFile}} class="custom-field-file" />
-                {{/if}}
-            </InputGroup>
-        {{/if}}
-    </div>
-{{/if}}

package/addon/components/custom-field.js

@@ -1,145 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
-import isObject from '@fleetbase/ember-core/utils/is-object';
-import isModel from '@fleetbase/ember-core/utils/is-model';
-import getCustomFieldTypeMap from '../utils/get-custom-field-type-map';
-
-export default class CustomFieldComponent extends Component {
-    @service fetch;
-    @tracked orderConfig;
-    @tracked customField;
-    @tracked order;
-    @tracked customFieldComponent;
-    @tracked value;
-    @tracked file;
-    @tracked uploadedFile;
-    acceptedFileTypes = [
-        'application/vnd.ms-excel',
-        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-        'application/msword',
-        'application/pdf',
-        'application/x-pdf',
-        'image/jpeg',
-        'image/png',
-        'image/gif',
-        'image/webp',
-        'video/mp4',
-        'video/quicktime',
-        'video/x-msvideo',
-        'video/x-flv',
-        'video/x-ms-wmv',
-        'audio/mpeg',
-        'video/x-msvideo',
-        'application/zip',
-        'application/x-tar',
-    ];
-
-    /**
-     * A map defining the available custom field types and their corresponding components.
-     */
-    customFieldTypeMap = getCustomFieldTypeMap();
-
-    constructor(owner, { customField, orderConfig, order }) {
-        super(...arguments);
-        this.customField = customField;
-        this.value = customField.value;
-        this.orderConfig = orderConfig;
-        this.order = order;
-        this.customFieldComponent = typeof customField.component === 'string' ? customField.component : 'input';
-    }
-
-    @action removeFile() {
-        if (isModel(this.uploadedFile)) {
-            this.uploadedFile.destroyRecord();
-        }
-
-        this.uploadedFile = undefined;
-        this.value = undefined;
-
-        if (typeof this.args.onChange === 'function') {
-            this.args.onChange(undefined, this.customField);
-        }
-    }
-
-    @action onFileAddedHandler(file) {
-        // since we have dropzone and upload button within dropzone validate the file state first
-        // as this method can be called twice from both functions
-        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) {
-            return;
-        }
-
-        // set file for progress state
-        this.file = file;
-
-        // Queue and upload immediatley
-        this.fetch.uploadFile.perform(
-            file,
-            {
-                path: 'uploads/fleet-ops/order-files',
-                type: 'order_file',
-            },
-            (uploadedFile) => {
-                this.file = undefined;
-                this.value = `file:${uploadedFile.id}`;
-                this.uploadedFile = uploadedFile;
-                if (typeof this.args.onChange === 'function') {
-                    this.args.onChange(this.value, this.customField);
-                }
-            },
-            () => {
-                // remove file from queue
-                if (file.queue && typeof file.queue.remove === 'function') {
-                    file.queue.remove(file);
-                }
-                this.file = undefined;
-            }
-        );
-    }
-
-    @action onChangeHandler(event, otherValue) {
-        const isRawInput = typeof event === 'string' || typeof event === 'number';
-        const isMoneyInput = this.customFieldComponent === 'money-input' && isObject(event);
-        const isEventInput = event instanceof window.Event;
-        const isDateTimeInput = this.customFieldComponent === 'date-time-input' && typeof otherValue === 'string';
-
-        if (isDateTimeInput) {
-            const value = otherValue;
-            this.value = value;
-
-            if (typeof this.args.onChange === 'function') {
-                this.args.onChange(value, this.customField);
-            }
-            return;
-        }
-
-        if (isRawInput) {
-            this.value = event;
-
-            if (typeof this.args.onChange === 'function') {
-                this.args.onChange(event, this.customField);
-            }
-            return;
-        }
-
-        if (isMoneyInput) {
-            const value = event.newValue;
-            if (typeof this.args.onChange === 'function') {
-                this.args.onChange(value, this.customField);
-            }
-            return;
-        }
-
-        if (isEventInput) {
-            const value = event.target.value;
-            this.value = value;
-
-            if (typeof this.args.onChange === 'function') {
-                this.args.onChange(value, this.customField);
-            }
-            return;
-        }
-    }
-}