Merge pull request #90 from fleetbase/dev-v0.3.8

v0.3.8

Author: roncodes

addon/components/custom-fields-manager.js

@@ -33,7 +33,8 @@ export default class CustomFieldsManagerComponent extends Component {
         super(...arguments);
         this.subjects = subjects ?? [];
         next(() => {
-            if (!this.subjects) return;
+            if (!this.subjects || this.subjects.length === 0) return;
+            // Load the first subject immediately
             this.loadCustomFields.perform(this.subjects[0]);
         });
     }
@@ -51,7 +52,44 @@ export default class CustomFieldsManagerComponent extends Component {
         }
     }
 
+    /**
+     * Restore custom fields from cache for subjects that haven't been loaded yet
+     * This method checks the CustomFieldsRegistry service cache and restores
+     * previously loaded data to avoid losing it during navigation
+     */
+    async restoreFromCache() {
+        if (!this.subjects || this.subjects.length <= 1) return;
+
+        // Skip the first subject as it's loaded in constructor
+        const subjectsToRestore = this.subjects.slice(1);
+
+        for (const subject of subjectsToRestore) {
+            try {
+                const company = await this.currentUser.loadCompany();
+                const loadOptions = {
+                    groupedFor: `${underscore(subject.model)}_custom_field_group`,
+                    fieldFor: subject.type,
+                };
+
+                // Check if we have a cached manager for this subject
+                const cachedManager = this.customFieldsRegistry.forSubject(company, { loadOptions });
+
+                // Only restore if we have cached groups data
+                if (cachedManager && cachedManager.groups && cachedManager.groups.length > 0) {
+                    this.#updateSubject(subject, (s) => {
+                        return { ...s, groups: cachedManager.groups };
+                    });
+                }
+            } catch (err) {
+                // Silently continue if cache restore fails for a subject
+                console.warn(`Failed to restore cache for subject ${subject.model}:`, err);
+            }
+        }
+    }
+
     @task *loadCustomFields(subject) {
+        if (!subject) return;
+
         try {
             const company = yield this.currentUser.loadCompany();
             const customFieldsManager = yield this.customFieldsRegistry.loadSubjectCustomFields.perform(company, {
@@ -60,12 +98,14 @@ export default class CustomFieldsManagerComponent extends Component {
                     fieldFor: subject.type,
                 },
             });
+
             this.#updateSubject(subject, (s) => {
                 return { ...s, groups: customFieldsManager.customFieldGroups };
             });
 
             return customFieldsManager;
         } catch (err) {
+            console.error(`❌ Failed to load custom fields for ${subject.model}:`, err);
             this.notifications.serverError(err);
         }
     }
@@ -127,7 +167,7 @@ export default class CustomFieldsManagerComponent extends Component {
 
                 try {
                     await group.destroyRecord();
-                    await this.loadCustomFields.perform(subject);
+                    await this.loadCustomFields.perform(subject, true); // Force reload after deletion
                     modal.done();
                 } catch (error) {
                     this.notifications.serverError(error);
@@ -151,7 +191,7 @@ export default class CustomFieldsManagerComponent extends Component {
 
                 try {
                     await customField.destroyRecord();
-                    await this.loadCustomFields.perform(subject);
+                    await this.loadCustomFields.perform(subject, true); // Force reload after deletion
                     modal.done();
                 } catch (error) {
                     this.notifications.serverError(error);
@@ -161,6 +201,13 @@ export default class CustomFieldsManagerComponent extends Component {
         });
     }
 
+    @action onTabChange(subject) {
+        // Ensure custom fields are loaded when switching tabs
+        if (subject && (!subject.groups || subject.groups.length === 0)) {
+            this.loadCustomFields.perform(subject);
+        }
+    }
+
     #addCustomFieldToGroup(subject, customField, group) {
         this.#updateGroupOnSubject(subject, group.id, (g) => {
             const current = isArray(g.customFields) ? g.customFields : [];
@@ -207,12 +254,8 @@ export default class CustomFieldsManagerComponent extends Component {
     #updateSubject(subject, updater) {
         if (!subject) return;
 
-        // Try to locate by object identity first; fallback to stable keys
-        const idKey = 'id' in subject ? 'id' : 'model' in subject ? 'model' : null;
-        const idx = this.subjects.findIndex((s) => {
-            if (s === subject) return true;
-            return idKey ? s?.[idKey] === subject?.[idKey] : false;
-        });
+        // Find by model property since tab objects have extra properties
+        const idx = this.subjects.findIndex((s) => s?.model === subject?.model);
 
         if (idx === -1) return;
 

addon/components/dashboard.js

@@ -23,7 +23,7 @@ export default class DashboardComponent extends Component {
      * Creates an instance of DashboardComponent.
      * @memberof DashboardComponent
      */
-    constructor(owner, { defaultDashboardId = 'dashboard', defaultDashboardName = 'Default Dashboard', showPanelWhenZeroWidgets = false, extension = 'core' }) {
+    constructor(owner, { defaultDashboardId = 'dashboard', defaultDashboardName = 'Default Dashboard', showPanelWhenZeroWidgets = false, extension = 'core' } = {}) {
         super(...arguments);
         this.dashboard.reset(); // ensure service is reset when re-rendering
         next(() => {

addon/components/pill.hbs

@@ -0,0 +1,48 @@
+<div class="fleetbase-pill" ...attributes>
+    <a href="javascript:;" class="flex flex-row space-x-2 {{@anchorClass}}" {{on "click" this.handleClick}}>
+        <div class="relative shrink-0 {{@imageWrapperClass}}">
+            {{#if (has-block "image")}}
+                {{yield @resource to="image"}}
+            {{else}}
+                <Image
+                    src={{@imageSrc}}
+                    @fallbackSrc={{or @imageFallback (config (concat "defaultValues." @fallbackImageType)) (config "defaultValues.placeholderImage")}}
+                    width={{or @imageSize @imageWidth "28"}}
+                    height={{or @imageSize @imageHeight "28"}}
+                    class="w-7 h-7 rounded-full ring-2 ring-gray-800 dark:ring-gray-700 shadow transition-shadow hover:shadow-md focus:shadow-md {{@imageClass}}"
+                    alt={{or @imageAlt this.resourceName}}
+                />
+                {{#if @showOnlineIndicator}}
+                    <FaIcon
+                        @icon="circle"
+                        @size="2xs"
+                        class="absolute left-0 top-0 h-2 w-2 {{if (get @resource (or @onlinePath 'online')) 'text-green-500' 'text-yellow-200'}} {{@onlineIndicatorClass}}"
+                    />
+                {{/if}}
+                {{yield @resource to="image"}}
+            {{/if}}
+        </div>
+        <div class={{@contentWrapperClass}}>
+            {{#if (has-block)}}
+                {{yield @resource}}
+            {{else}}
+                <div class="text-sm {{@titleClass}}">{{n-a @title this.resourceName}}</div>
+                {{#if @subtitle}}
+                    <div class="text-xs text-gray-400 dark:text-gray-500 {{@subtitleClass}}">{{n-a @subtitle}}</div>
+                {{/if}}
+                {{yield @resource}}
+            {{/if}}
+        </div>
+        {{#if (has-block "tooltip")}}
+            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPosition "top"}}>
+                <InputInfo>
+                    {{yield @resource to="tooltip"}}
+                </InputInfo>
+            </Attach::Tooltip>
+        {{else if @tooltipComponent}}
+            <Attach::Tooltip @class="clean" @animation="scale" @placement={{or @tooltipPosition "top"}}>
+                {{component @tooltipComponent}}
+            </Attach::Tooltip>
+        {{/if}}
+    </a>
+</div>

addon/components/pill.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import { action, get } from '@ember/object';
+import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+
+export default class PillComponent extends Component {
+    /* eslint-disable ember/no-get */
+    get resourceName() {
+        const record = this.args.resource;
+        if (!record) return 'resource';
+
+        return (
+            get(record, this.args.namePath ?? 'name') ??
+            get(record, 'display_name') ??
+            get(record, 'displayName') ??
+            get(record, 'tracking') ??
+            get(record, 'public_id') ??
+            getModelName(record)
+        );
+    }
+
+    @action handleClick() {
+        console.log('handleClick called!', ...arguments);
+        if (typeof this.args.onClick === 'function') {
+            if (this.args.resource) {
+                this.args.onClick(this.args.resource, ...arguments);
+            } else {
+                this.args.onClick(...arguments);
+            }
+        }
+    }
+}

addon/helpers/is-object-empty.js

@@ -0,0 +1,6 @@
+import { helper } from '@ember/component/helper';
+import isEmptyObject from '@fleetbase/ember-core/utils/is-empty-object';
+
+export default helper(function isObjectEmpty([subject]) {
+    return isEmptyObject(subject);
+});

app/components/pill.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/pill';

app/helpers/is-object-empty.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/helpers/is-object-empty';

package.json

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

tests/integration/components/pill-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | pill', function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+        // Set any properties with this.set('myProperty', 'value');
+        // Handle any actions with this.set('myAction', function(val) { ... });
+
+        await render(hbs`<Pill />`);
+
+        assert.dom().hasText('');
+
+        // Template block usage:
+        await render(hbs`
+      <Pill>
+        template block text
+      </Pill>
+    `);
+
+        assert.dom().hasText('template block text');
+    });
+});

tests/integration/helpers/is-object-empty-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | is-object-empty', function (hooks) {
+    setupRenderingTest(hooks);
+
+    // TODO: Replace this with your real tests.
+    test('it renders', async function (assert) {
+        this.set('inputValue', '1234');
+
+        await render(hbs`{{is-object-empty this.inputValue}}`);
+
+        assert.dom().hasText('1234');
+    });
+});