feat: Fixed custom field render and input & added more file component…

addon/components/custom-field/input.hbs

@@ -27,7 +27,7 @@
             </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}} />
+                <MoneyInput class="w-full" @wrapperClass="x-fleetops-input-height shadow-md" @value={{this.value}} @canSelectCurrency={{@canSelectCurrency}} @currency={{or @currency "USD"}} @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}}>

addon/components/custom-field/value.hbs

@@ -3,6 +3,8 @@
     <div class="field-value">
         {{#if this.isBoolean}}
             <Badge @status={{if this.value "success" ""}}>{{if this.value "Yes" "No"}}</Badge>
+        {{else if this.isFile}}
+            <File @file={{this.value}} @onDownload={{this.downloadFile}} class="custom-field-file" />
         {{else}}
             {{n-a this.value}}
         {{/if}}

addon/components/custom-field/value.js

@@ -1,12 +1,22 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { equal } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class CustomFieldValueComponent extends Component {
+    @service store;
+    @service fetch;
     @tracked customField;
     @tracked value;
     @tracked subject;
-    @equal('args.customField.type', 'boolean') isBoolean;
+
+    get isBoolean() {
+        return this.customField?.type === 'boolean';
+    }
+
+    get isFile() {
+        return this.customField?.type === 'file-upload';
+    }
 
     constructor(owner, { customField, subject }) {
         super(...arguments);
@@ -17,7 +27,18 @@ export default class CustomFieldValueComponent extends Component {
 
     #getValueFromSubject(customField, subject) {
         const cfValue = (subject.get('custom_field_values') ?? []).find((cfv) => cfv.custom_field_uuid === customField.id);
-        if (cfValue) return cfValue.value;
-        return null;
+        let value = cfValue?.value ?? null;
+        // If custom field is file upload normalize value to image
+        if (value && customField?.type === 'file-upload') {
+            const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+            const normalized = this.store.normalize('file', parsed);
+            value = this.store.push(normalized);
+        }
+        return value;
+    }
+
+    @action downloadFile() {
+        const file = this.value;
+        return this.fetch.download('files/download', { file: file.id }, { fileName: file.filename, mimeType: file.content_type });
     }
 }

addon/components/file.hbs

@@ -12,44 +12,74 @@
         {{/if}}
     </div>
 
-    <div class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
-        <DropdownButton
-            @dropdownId="file-actions-{{@file.id}}"
-            @icon={{or @dropdownIcon "ellipsis-v"}}
-            @iconSize="sm"
-            @iconPrefix={{@dropdownButtonIconPrefix}}
-            @text={{@dropdownButtonText}}
-            @size="xs"
-            @horizontalPosition="left"
-            @calculatePosition={{@dropdownButtonCalculatePosition}}
-            @renderInPlace={{or @dropdownButtonRenderInPlace true}}
-            @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}}
-            @triggerClass={{@dropdownButtonTriggerClass}}
-            @registerAPI={{@registerAPI}}
-            @onInsert={{this.onDropdownButtonInsert}}
-            as |dd|
-        >
-            <div class="next-dd-menu mt-0" role="menu">
-                <div class="px-1 pt-2">
-                    <div class="text-xs px-2 text-gray-500 dark:text-gray-400 font-medium">
-                        {{t "component.file.dropdown-label"}}
+    {{#if this.hasActions}}
+        <div class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
+            <DropdownButton
+                @dropdownId="file-actions-{{@file.id}}"
+                @icon={{or @dropdownIcon "ellipsis-v"}}
+                @iconSize="sm"
+                @iconPrefix={{@dropdownButtonIconPrefix}}
+                @text={{@dropdownButtonText}}
+                @size="xs"
+                @horizontalPosition="left"
+                @calculatePosition={{@dropdownButtonCalculatePosition}}
+                @renderInPlace={{or @dropdownButtonRenderInPlace true}}
+                @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}}
+                @triggerClass={{@dropdownButtonTriggerClass}}
+                @registerAPI={{@registerAPI}}
+                @onInsert={{this.onDropdownButtonInsert}}
+                as |dd|
+            >
+                <div class="next-dd-menu mt-0" role="menu">
+                    <div class="px-1 pt-2">
+                        <div class="text-xs px-2 text-gray-500 dark:text-gray-400 font-medium">
+                            {{t "component.file.dropdown-label"}}
+                        </div>
                     </div>
+                    <div class="next-dd-menu-seperator"></div>
+                    {{#if @onDelete}}
+                        <div role="group" class="px-1">
+                            <a
+                                href="javascript:;"
+                                role="menuitem"
+                                class="next-dd-item xs-text text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
+                                {{on "click" (dropdown-fn dd @onDelete this.file)}}
+                            >
+                                <FaIcon @icon="trash" @size="sm" class="mr-2" @prefix={{@dropdownButtonIconPrefix}} />
+                                {{t "common.delete"}}
+                            </a>
+                        </div>
+                    {{/if}}
+                    {{#if @onDownload}}
+                        <div role="group" class="px-1">
+                            <a
+                                href="javascript:;"
+                                role="menuitem"
+                                class="next-dd-item xs-text"
+                                {{on "click" (dropdown-fn dd @onDownload this.file)}}
+                            >
+                                <FaIcon @icon="download" @size="sm" class="mr-2" @prefix={{@dropdownButtonIconPrefix}} />
+                                {{t "common.download"}}
+                            </a>
+                        </div>
+                    {{/if}}
+                    {{#if @onPreview}}
+                        <div role="group" class="px-1">
+                            <a
+                                href="javascript:;"
+                                role="menuitem"
+                                class="next-dd-item xs-text"
+                                {{on "click" (dropdown-fn dd @onPreview this.file)}}
+                            >
+                                <FaIcon @icon="magnifying-glass" @size="sm" class="mr-2" @prefix={{@dropdownButtonIconPrefix}} />
+                                {{t "common.preview"}}
+                            </a>
+                        </div>
+                    {{/if}}
                 </div>
-                <div class="next-dd-menu-seperator"></div>
-                <div role="group" class="px-1">
-                    <a
-                        href="javascript:;"
-                        role="menuitem"
-                        class="next-dd-item xs-text text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
-                        {{on "click" (dropdown-fn dd @onDelete this.file)}}
-                    >
-                        <FaIcon @icon="trash" @size="sm" class="mr-2" @prefix={{@dropdownButtonIconPrefix}} />
-                        {{t "common.delete"}}
-                    </a>
-                </div>
-            </div>
-        </DropdownButton>
-    </div>
+            </DropdownButton>
+        </div>
+    {{/if}}
 
     <div class="flex items-center justify-between px-2 py-1.5 border-t border-gray-100 dark:border-gray-700">
         <span class="text-xs text-gray-700 dark:text-gray-300 truncate font-medium">

addon/components/file.js

@@ -9,4 +9,8 @@ export default class FileComponent extends Component {
     get isImage() {
         return isImageFile(this.file);
     }
+
+    get hasActions() {
+        return typeof this.args.onDelete === 'function' || typeof this.args.onDownload === 'function' || typeof this.args.onPreview === 'function';
+    }
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.3.16",
+    "version": "0.3.17",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",