@fleetbase/fleetops-engine 0.4.16 → 0.4.18

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

@@ -0,0 +1,129 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { dasherize } from '@ember/string';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+
+/**
+ * Component class for custom entity form panel.
+ * This component handles the creation and editing of custom entities,
+ * including file uploads and type settings.
+ *
+ * @extends Component
+ */
+export default class CustomEntityFormPanelComponent extends Component {
+    /**
+     * Service for displaying notifications.
+     * @service
+     */
+    @service notifications;
+
+    /**
+     * Service for performing fetch operations.
+     * @service
+     */
+    @service fetch;
+
+    /**
+     * Tracked property for the custom entity being edited or created.
+     * @tracked
+     */
+    @tracked customEntity;
+
+    /**
+     * Tracked property for configuration settings of the custom entity.
+     * @tracked
+     */
+    @tracked config;
+
+    /**
+     * Constructor for CustomEntityFormPanelComponent.
+     * Applies context component arguments upon instantiation.
+     */
+    constructor() {
+        super(...arguments);
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Action method to save the custom entity. It triggers an optional onSave callback
+     * with the current state of the custom entity.
+     * @action
+     */
+    @action save() {
+        contextComponentCallback(this, 'onSave', this.customEntity);
+        if (typeof this.onSave === 'function') {
+            this.onSave(this.customEntity);
+        }
+    }
+
+    /**
+     * Action method called when a file is added. It uploads the file
+     * and updates the custom entity's photo information.
+     * @param {File} file - The file that was added.
+     * @action
+     */
+    @action onFileAdded(file) {
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/${this.config.id}/entity/${this.simpleHash(this.customEntity.get('name') + '+' + this.customEntity.get('description'))}`,
+                subject_uuid: this.config.id,
+                subject_type: 'fleet-ops:order-config',
+                type: 'custom_entity_image',
+            },
+            (uploadedFile) => {
+                this.customEntity.setProperties({
+                    photo_uuid: uploadedFile.id,
+                    photo_url: uploadedFile.url,
+                });
+            }
+        );
+    }
+
+    /**
+     * Action method to set the type of the custom entity. Converts the type to a dasherized string.
+     * @param {Event} event - The event object containing the selected type.
+     * @action
+     */
+    @action setCustomEntityType(event) {
+        const value = event.target.value;
+        this.customEntity.set('type', dasherize(value));
+    }
+
+    /**
+     * Action method to update the unit of dimensions of the custom entity.
+     * @param {string} unit - The unit for the dimensions.
+     * @action
+     */
+    @action updateCustomEntityDimensionsUnit(unit) {
+        this.customEntity.set('dimensions_unit', unit);
+    }
+
+    /**
+     * Action method to update the weight unit of the custom entity.
+     * @param {string} unit - The unit for the weight.
+     * @action
+     */
+    @action updateCustomEntityWeightUnit(unit) {
+        this.customEntity.set('weight_unit', unit);
+    }
+
+    /**
+     * A utility method to generate a simple hash from a string.
+     * Used for creating unique identifiers.
+     * @param {string} str - The input string.
+     * @returns {number} The generated hash value.
+     */
+    simpleHash(str) {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = (hash << 5) - hash + char;
+            hash |= 0;
+        }
+        return hash;
+    }
+}

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

@@ -0,0 +1,12 @@
+<div class="rounded-lg border border-gray-200 dark:border-gray-700" ...attributes>
+    <div class="flex flex-row items-center justify-between px-4 py-2">
+        <div class="mr-2 text-sm">{{t "fleet-ops.component.custom-field-form-panel.field-options"}}</div>
+        <Button @type="magic" @icon="plus" @text="Add new option" @size="xs" @onClick={{this.addOption}} />
+    </div>
+    {{#each-in this.options as |index option|}}
+        <div class="border-t border-gray-200 dark:border-gray-700 flex flex-row items-center pr-2 py-1">
+            <input value={{option}} {{on "input" (fn this.updateOptionValue index)}} {{on "blur" this.updateOptions}} class="w-full bg-white dark:bg-gray-900 text-sm leading-4 text-black dark:text-gray-200 p-2" />
+            <Button @type="danger" @icon="times" @onClick={{fn this.removeOption index}} @size="xs" />
+        </div>
+    {{/each-in}}
+</div>

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

@@ -0,0 +1,139 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+import isObject from '@fleetbase/ember-core/utils/is-object';
+
+export default class CustomFieldFormPanelOptionsInputComponent extends Component {
+    /**
+     * Represents the custom field being manipulated.
+     * @type {Object}
+     */
+    @tracked customField;
+
+    /**
+     * The object holding the current state of options, indexed by unique keys.
+     * @type {Object}
+     */
+    @tracked options = {};
+
+    /**
+     * A temporary object used to manage updates to options before finalizing changes.
+     * @type {Object}
+     */
+    @tracked _options = {};
+
+    /**
+     * Constructs a new CustomFieldFormPanelOptionsInputComponent instance, initializing the custom field and options tracking.
+     * @param {Object} owner - The owner of the component.
+     * @param {Object} customField - The custom field object to be managed.
+     */
+    constructor(owner, { customField }) {
+        super(...arguments);
+        this.customField = customField;
+        this.trackOptions(this.createOptionsObjectFromArray(customField.options));
+    }
+
+    /**
+     * Converts an array of options into an object format for easier tracking and manipulation.
+     * @param {Array} options - The array of options to be converted.
+     * @returns {Object} The options object.
+     */
+    createOptionsObjectFromArray(options = []) {
+        const optionsObject = {};
+        if (isArray(options)) {
+            for (let i = 0; i < options.length; i++) {
+                const option = options[i];
+                optionsObject[i] = option;
+            }
+        }
+
+        return optionsObject;
+    }
+
+    /**
+     * Tracks the given options object, setting both the primary and temporary options states.
+     * @param {Object} options - The options object to track.
+     */
+    trackOptions(options = {}) {
+        this.options = options;
+        this._options = options;
+    }
+
+    /**
+     * Adds a new option to the options object.
+     */
+    @action addOption() {
+        const index = Object.keys(this.options).length + 1;
+        this.trackOptions({
+            ...this.options,
+            [index]: '',
+        });
+    }
+
+    /**
+     * Updates the value of an option at the specified index.
+     * @param {number} index - The index of the option to update.
+     * @param {Event} event - The input event containing the new value.
+     */
+    @action updateOptionValue(index, event) {
+        let value = event.target.value;
+        this._options = {
+            ...this.options,
+            [index]: value,
+        };
+    }
+
+    /**
+     * Removes an option at the specified index.
+     * @param {number} index - The index of the option to remove.
+     */
+    @action removeOption(index) {
+        const options = { ...this.options };
+        delete options[index];
+        this.trackOptions(options);
+        this.onOptionsChanges();
+    }
+
+    /**
+     * Updates the primary options object with changes made to the temporary options object.
+     */
+    @action updateOptions() {
+        this.options = {
+            ...this._options,
+        };
+        this.onOptionsChanges();
+    }
+
+    /**
+     * Handles changes to the options, updating the customField and calling the onChange callback if provided.
+     */
+    @action onOptionsChanges() {
+        const options = Object.values(this.options);
+        this.customField.set('options', options);
+        if (typeof this.args.onChange === 'function') {
+            this.args.onChange(options, this.customField);
+        }
+    }
+
+    /**
+     * Adds or updates a meta option with the given key and value.
+     * @param {string} key - The key of the meta option to add or update.
+     * @param {string} value - The value of the meta option.
+     */
+    @action addMetaOption(key, value) {
+        if (!isObject(this.customField.meta)) {
+            this.customField.set('meta', {});
+        }
+
+        const meta = {
+            ...this.customField.meta,
+            [key]: value,
+        };
+
+        this.customField.meta = meta;
+        if (typeof this.args.onMetaChanged === 'function') {
+            this.args.onMetaChanged(meta, this.customField);
+        }
+    }
+}

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

@@ -0,0 +1,77 @@
+<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

@@ -0,0 +1,144 @@
+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-decorators';
+import isObject from '@fleetbase/ember-core/utils/is-object';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../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() {
+        yield this.customField
+            .save()
+            .then((customField) => {
+                if (typeof this.onCustomFieldSaved === 'function') {
+                    this.onCustomFieldSaved(customField);
+                }
+                contextComponentCallback(this, 'onCustomFieldSaved', customField);
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            });
+    }
+
+    /**
+     * 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', {});
+        }
+
+        this.customField.meta[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.hbs

@@ -1,42 +1,64 @@
-<div class="custom-meta-field" ...attributes>
-    {{#if this.isTextInput}}
-        <Input @type="text" class="form-input w-full {{@inputClass}}" @value={{@value}} placeholder={{@placeholder}} />
-    {{/if}}
-
-    {{#if this.isSelectInput}}
-        <Select class="{{@inputClass}} w-full" @options={{@metaField.options}} @optionLabel="label" @optionValue="value" @value={{@value}} @placeholder={{@placeholder}} @humanize={{@metaField.humanizeOptions}} @onSelect={{@onChange}} />
-    {{/if}}
-
-    {{#if this.isDateTimeInput}}
-        <DateTimeInput class="form-input {{@inputClass}}" @value={{@value}} @onUpdate={{this.setDateValue}} />
-    {{/if}}
-
-    {{#if this.isPortInput}}
-        <ModelSelect @modelName="port" @selectedModel={{this.selectedPort}} @placeholder="Select Port" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @onChange={{this.selectPort}} as |port|>
-            <div class="flex items-center">
-                <span class="uppercase">
-                    {{port.name}} - {{port.portcode}}
-                </span>
-            </div>
-        </ModelSelect>
-    {{/if}}
-
-    {{#if this.isVesselInput}}
-        <ModelSelect @modelName="vessel" @selectedModel={{this.selectedVessel}} @placeholder="Select Vessel" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @allowClear={{true}} @onChange={{this.selectVessel}} as |vessel|>
-            <div class="flex items-center">
-                <div class="w-7">
-                    <FaIcon @icon="ship" />
+{{#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>
-                <span class="uppercase">
-                    {{vessel.name}} - {{vessel.imo}}
-                </span>
-            </div>
-        </ModelSelect>
-    {{/if}}
-
-    {{#if this.isBooleanInput}}
-        <Toggle @label={{@metaField.label}} @wrapperClass="justify-start-i" @isToggled={{@value}} @onToggle={{this.onToggle}} @helpText={{@metaField.helpText}} />
-    {{/if}}
-
-    {{yield}}
-</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}}