From 0837fc28465c70c7c39b674d9d678287f31c7101 Mon Sep 17 00:00:00 2001
From: "Ronald A. Richardson" <me@ron.dev>
Date: Mon, 29 Dec 2025 14:24:11 +0800
Subject: [PATCH] feat: Fixed custom field render and input & added more file
 component options

---
 addon/components/custom-field/input.hbs |   2 +-
 addon/components/custom-field/value.hbs |   2 +
 addon/components/custom-field/value.js  |  29 ++++++-
 addon/components/file.hbs               | 102 +++++++++++++++---------
 addon/components/file.js                |   4 +
 package.json                            |   2 +-
 6 files changed, 99 insertions(+), 42 deletions(-)

diff --git a/addon/components/custom-field/input.hbs b/addon/components/custom-field/input.hbs
index 5026473..bf4530d 100644
--- a/addon/components/custom-field/input.hbs
+++ b/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}}>
diff --git a/addon/components/custom-field/value.hbs b/addon/components/custom-field/value.hbs
index 1cef310..3ede375 100644
--- a/addon/components/custom-field/value.hbs
+++ b/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}}
diff --git a/addon/components/custom-field/value.js b/addon/components/custom-field/value.js
index 6a4f19b..b15813f 100644
--- a/addon/components/custom-field/value.js
+++ b/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 });
     }
 }
diff --git a/addon/components/file.hbs b/addon/components/file.hbs
index f5e6abb..d64a9d4 100644
--- a/addon/components/file.hbs
+++ b/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">
diff --git a/addon/components/file.js b/addon/components/file.js
index b8d43a3..05abae6 100644
--- a/addon/components/file.js
+++ b/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';
+    }
 }
diff --git a/package.json b/package.json
index bd2236c..8659a8f 100644
--- a/package.json
+++ b/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",