@fleetbase/ember-ui 0.3.25 → 0.3.26

package/addon/components/event-calendar.hbs

@@ -0,0 +1,30 @@
+<div
+    class="fleetbase-event-calendar"
+    ...attributes
+    {{did-insert this.setup}}
+    {{did-update this.update
+        @view
+        @resources
+        @events
+        @editable
+        @droppable
+        @selectable
+        @slotMinTime
+        @slotMaxTime
+        @slotDuration
+        @slotLabelInterval
+        @slotWidth
+        @height
+        @headerToolbar
+        @locale
+        @scrollTime
+        @nowIndicator
+        @date
+        @eventContent
+        @resourceLabelContent
+        @dayCellContent
+        @slotLabelContent
+        @options
+    }}
+    {{will-destroy this.teardown}}
+></div>

package/addon/components/event-calendar.js

@@ -0,0 +1,333 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { scheduleOnce } from '@ember/runloop';
+import { createCalendar, destroyCalendar, ResourceTimeline, ResourceTimeGrid, TimeGrid, DayGrid, List, Interaction } from '@event-calendar/core';
+import '@event-calendar/core/index.css';
+
+/**
+ * EventCalendar component wrapping @event-calendar/core (MIT licensed).
+ *
+ * This is the preferred calendar component for resource-timeline views in
+ * Fleetbase. It replaces the need for FullCalendar Premium plugins
+ * (@fullcalendar/resource-timeline etc.) which carry a commercial license
+ * incompatible with Fleetbase's dual AGPL v3 / commercial licensing model.
+ *
+ * @see https://github.com/vkurko/calendar
+ *
+ * Supported views (all MIT, no license key required):
+ *   - resourceTimelineDay / resourceTimelineWeek / resourceTimelineMonth
+ *   - resourceTimeGridDay / resourceTimeGridWeek
+ *   - timeGridDay / timeGridWeek
+ *   - dayGridMonth / dayGridWeek / dayGridDay
+ *   - listDay / listWeek / listMonth / listYear
+ *
+ * Usage:
+ * ```hbs
+ * <EventCalendar
+ *   @view="resourceTimelineDay"
+ *   @resources={{this.calendarResources}}
+ *   @events={{this.calendarEvents}}
+ *   @editable={{true}}
+ *   @droppable={{true}}
+ *   @onEventDrop={{this.handleEventDrop}}
+ *   @onEventReceive={{this.handleEventReceive}}
+ *   @onEventClick={{this.handleEventClick}}
+ *   @onDateClick={{this.handleDateClick}}
+ *   @resourceLabelContent={{this.renderResourceLabel}}
+ *   @eventContent={{this.renderEventContent}}
+ *   @onCalendarReady={{this.onCalendarReady}}
+ *   @options={{this.extraCalendarOptions}}
+ * />
+ * ```
+ *
+ * The `@options` arg is merged last, allowing full override of any option.
+ *
+ * Callback args:
+ *   @onEventDrop(info)        — info.event, info.oldResource, info.newResource, info.revert
+ *   @onEventReceive(info)     — info.event, info.revert (external drop)
+ *   @onEventClick(info)       — info.event, info.el, info.jsEvent
+ *   @onDateClick(info)        — info.date, info.resource, info.jsEvent
+ *   @onEventResize(info)      — info.event, info.revert
+ *   @onEventMouseEnter(info)  — info.event, info.el, info.jsEvent
+ *   @onEventMouseLeave(info)  — info.event, info.el, info.jsEvent
+ *   @onDatesSet(info)         — info.start, info.end, info.view
+ *   @onLoading(isLoading)     — boolean
+ *
+ * Render hook args (no 'on' prefix — these return content descriptors):
+ *   @eventContent             — function(info) returning { html } or { domNodes }
+ *   @resourceLabelContent     — function(info) returning { html } or { domNodes }
+ *   @dayCellContent           — function(info) returning { html } or { domNodes }
+ *   @slotLabelContent         — function(info) returning { html } or { domNodes }
+ */
+export default class EventCalendarComponent extends Component {
+    /**
+     * All plugins enabled by default. Consumers can override via @plugins.
+     * @type {Array}
+     */
+    defaultPlugins = [ResourceTimeline, ResourceTimeGrid, TimeGrid, DayGrid, List, Interaction];
+
+    /**
+     * Reference to the DOM element the calendar is mounted on.
+     * @type {HTMLElement}
+     */
+    @tracked calendarEl = null;
+
+    /**
+     * The EventCalendar instance returned by createCalendar().
+     * Exposes .setOption(name, value) and .getOption(name).
+     * @type {Object}
+     */
+    @tracked calendar = null;
+
+    /**
+     * Callback arg names that map to @event-calendar/core event options.
+     * Each entry is the raw option name; the corresponding @arg is prefixed
+     * with 'on' (e.g. 'eventDrop' → @onEventDrop).
+     * @type {string[]}
+     */
+    callbackOptions = [
+        'eventClick',
+        'eventDrop',
+        'eventResize',
+        'eventReceive',
+        'eventLeave',
+        'eventMouseEnter',
+        'eventMouseLeave',
+        'dateClick',
+        'datesSet',
+        'loading',
+        'viewDidMount',
+        'eventDidMount',
+        'eventWillUnmount',
+        'select',
+        'unselect',
+    ];
+
+    /**
+     * Render hook option names. These are passed directly (no 'on' prefix)
+     * because they return content descriptors, not fire-and-forget callbacks.
+     * @type {string[]}
+     */
+    renderHooks = ['eventContent', 'resourceLabelContent', 'resourceLabelDidMount', 'dayCellContent', 'dayCellDidMount', 'slotLabelContent', 'slotLabelDidMount', 'nowIndicatorContent'];
+
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+
+    /**
+     * Initialises the EventCalendar instance on the container element.
+     * Called via {{did-insert this.setup}} in the template.
+     *
+     * @param {HTMLElement} el
+     */
+    @action setup(el) {
+        this.calendarEl = el;
+        const plugins = this.args.plugins ?? this.defaultPlugins;
+        const options = this._buildOptions();
+        this.calendar = createCalendar(el, plugins, options);
+
+        if (typeof this.args.onCalendarReady === 'function') {
+            this.args.onCalendarReady(this.calendar);
+        }
+    }
+
+    /**
+     * Responds to tracked arg changes and updates the calendar options.
+     * Called via {{did-update this.update ...watchedArgs}} in the template.
+     */
+    @action update() {
+        if (!this.calendar) {
+            return;
+        }
+        scheduleOnce('afterRender', this, this._applyDynamicOptions);
+    }
+
+    /**
+     * Destroys the EventCalendar instance when the component is torn down.
+     * Called via {{will-destroy this.teardown}} in the template.
+     */
+    @action teardown() {
+        if (this.calendar) {
+            destroyCalendar(this.calendar);
+        }
+        this.calendar = null;
+        this.calendarEl = null;
+    }
+
+    // -------------------------------------------------------------------------
+    // Public API helpers (callable by parent via @onCalendarReady)
+    // -------------------------------------------------------------------------
+
+    /**
+     * Programmatically change the view type.
+     * @param {string} viewName  e.g. 'resourceTimelineWeek'
+     */
+    @action changeView(viewName) {
+        this._setOption('view', viewName);
+    }
+
+    /**
+     * Navigate the calendar to today.
+     */
+    @action today() {
+        this._setOption('date', new Date());
+    }
+
+    /**
+     * Refetch events from the events source.
+     */
+    @action refetchEvents() {
+        this._setOption('events', this.args.events ?? []);
+    }
+
+    /**
+     * Refetch resources from the resources source.
+     */
+    @action refetchResources() {
+        this._setOption('resources', this.args.resources ?? []);
+    }
+
+    // -------------------------------------------------------------------------
+    // Private helpers
+    // -------------------------------------------------------------------------
+
+    /**
+     * Build the full options object passed to createCalendar().
+     * @returns {Object}
+     */
+    _buildOptions() {
+        const {
+            view,
+            resources,
+            events,
+            editable,
+            droppable,
+            selectable,
+            nowIndicator,
+            slotMinTime,
+            slotMaxTime,
+            slotDuration,
+            slotLabelInterval,
+            slotWidth,
+            firstDay,
+            height,
+            headerToolbar,
+            locale,
+            scrollTime,
+            date,
+            options: extraOptions,
+        } = this.args;
+
+        const base = {
+            view: view ?? 'resourceTimelineDay',
+            resources: resources ?? [],
+            events: events ?? [],
+            editable: editable !== false,
+            droppable: droppable !== false,
+            selectable: selectable ?? false,
+            nowIndicator: nowIndicator !== false,
+            slotMinTime: slotMinTime ?? '00:00:00',
+            slotMaxTime: slotMaxTime ?? '24:00:00',
+            firstDay: firstDay ?? 0,
+            height: height ?? '100%',
+            headerToolbar: headerToolbar ?? {
+                start: 'prev,next today',
+                center: 'title',
+                end: 'resourceTimelineDay,resourceTimelineWeek',
+            },
+            locale: locale ?? 'en',
+            scrollTime: scrollTime ?? '06:00:00',
+        };
+
+        if (slotDuration !== undefined) base.slotDuration = slotDuration;
+        if (slotLabelInterval !== undefined) base.slotLabelInterval = slotLabelInterval;
+        if (slotWidth !== undefined) base.slotWidth = slotWidth;
+        if (date !== undefined) base.date = date;
+
+        // Wire up callback args (@onEventDrop → eventDrop option)
+        for (const name of this.callbackOptions) {
+            const argName = `on${name.charAt(0).toUpperCase()}${name.slice(1)}`;
+            if (typeof this.args[argName] === 'function') {
+                base[name] = this.args[argName];
+            }
+        }
+
+        // Wire up render hooks (passed directly, no 'on' prefix)
+        for (const hook of this.renderHooks) {
+            if (typeof this.args[hook] === 'function') {
+                base[hook] = this.args[hook];
+            }
+        }
+
+        // Merge extra options last — allows full override of any option
+        return { ...base, ...(extraOptions ?? {}) };
+    }
+
+    /**
+     * Re-apply all dynamic options to the live calendar instance.
+     * Batched via scheduleOnce('afterRender') to coalesce multiple arg changes.
+     */
+    _applyDynamicOptions() {
+        if (!this.calendar) {
+            return;
+        }
+
+        const dynamicKeys = [
+            'view',
+            'resources',
+            'events',
+            'editable',
+            'droppable',
+            'selectable',
+            'slotMinTime',
+            'slotMaxTime',
+            'slotDuration',
+            'height',
+            'headerToolbar',
+            'locale',
+            'scrollTime',
+            'nowIndicator',
+            'date',
+        ];
+
+        for (const key of dynamicKeys) {
+            if (this.args[key] !== undefined) {
+                this._setOption(key, this.args[key]);
+            }
+        }
+
+        // Re-wire render hooks in case they changed
+        for (const hook of this.renderHooks) {
+            if (typeof this.args[hook] === 'function') {
+                this._setOption(hook, this.args[hook]);
+            }
+        }
+
+        // Re-wire callback options in case they changed
+        for (const name of this.callbackOptions) {
+            const argName = `on${name.charAt(0).toUpperCase()}${name.slice(1)}`;
+            if (typeof this.args[argName] === 'function') {
+                this._setOption(name, this.args[argName]);
+            }
+        }
+
+        // Merge any extra options override
+        if (this.args.options) {
+            for (const [key, value] of Object.entries(this.args.options)) {
+                this._setOption(key, value);
+            }
+        }
+    }
+
+    /**
+     * Safely call calendar.setOption().
+     * @param {string} key
+     * @param {*}      value
+     */
+    _setOption(key, value) {
+        if (this.calendar && typeof this.calendar.setOption === 'function') {
+            this.calendar.setOption(key, value);
+        }
+    }
+}

package/addon/components/modal/default.hbs

@@ -33,9 +33,9 @@
             {{component @options.footerComponent options=@options confirm=modal.submit modal=modal}}
         {{else}}
             {{#unless @options.hideFooterActions}}
-                <div class="modal-footer-actions {{@options.modalFooterActionsClass}}">
+                <div class="modal-footer-actions space-x-2 {{@options.modalFooterActionsClass}}">
                     <Button
-                        class="mr-2 {{if @options.hideDeclineButton 'hidden'}}"
+                        class="{{if @options.hideDeclineButton 'hidden'}}"
                         @type={{or @options.declineButtonScheme @options.declineButtonType "default"}}
                         @size={{or @options.buttonSize "md"}}
                         @icon={{or @options.declineButtonIcon "times"}}
@@ -44,6 +44,85 @@
                         @onClick={{modal.close}}
                         @disabled={{or @options.declineButtonDisabled @options.isLoading}}
                     />
+                    {{#each @options.actionButtons as |actionButton|}}
+                        {{#if actionButton.items}}
+                            <DropdownButton
+                                @icon={{or actionButton.icon "ellipsis"}}
+                                @size={{or actionButton.size "md"}}
+                                @iconPrefix={{actionButton.prefix}}
+                                @triggerClass={{actionButton.triggerClass}}
+                                @renderInPlace={{or actionButton.renderInPlace true}}
+                                as |dd|
+                            >
+                                <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
+                                    {{#each actionButton.items as |item|}}
+                                        {{#if item.separator}}
+                                            <div class="next-dd-menu-seperator"></div>
+                                        {{else}}
+                                            <div class="px-1 {{item.wrapperClass}}">
+                                                <a
+                                                    href="javascript:;"
+                                                    class="next-dd-item {{item.class}} {{if item.disabled 'disabled'}}"
+                                                    disabled={{item.disabled}}
+                                                    {{on "click" (dropdown-fn dd (or item.fn item.onClick))}}
+                                                >
+                                                    <div class="w-7 flex-grow-0 flex-shrink-0">
+                                                        <FaIcon @icon={{item.icon}} />
+                                                    </div>
+                                                    <span>{{or item.text item.label}}</span>
+                                                </a>
+                                            </div>
+                                        {{/if}}
+                                    {{/each}}
+                                </div>
+                            </DropdownButton>
+                        {{else if actionButton.component}}
+                            {{component
+                                actionButton.component
+                                icon=actionButton.icon
+                                iconPrefix=actionButton.iconPrefix
+                                iconComponent=actionButton.iconComponent
+                                size=(or actionButton.size "md")
+                                text=actionButton.text
+                                options=actionButton.options
+                                items=actionButton.items
+                                permission=actionButton.permission
+                                isLoading=actionButton.isLoading
+                                renderInPlace=actionButton.renderInPlace
+                                triggerClass=actionButton.triggerClass
+                                disabled=actionButton.disabled
+                                onClick=actionButton.onClick
+                                fn=actionButton.fn
+                                perform=actionButton.perform
+                                onSelect=actionButton.onSelect
+                                onChange=actionButton.onChange
+                            }}
+                        {{else}}
+                            <Button
+                                @type={{actionButton.type}}
+                                @text={{actionButton.text}}
+                                @onClick={{if actionButton.perform (perform actionButton.perform) (or actionButton.onClick actionButton.fn)}}
+                                @size={{or actionButton.size "md"}}
+                                @buttonType={{actionButton.buttonType}}
+                                @disabled={{actionButton.disabled}}
+                                @exampleText={{actionButton.exampleText}}
+                                @helpText={{actionButton.helpText}}
+                                @icon={{actionButton.icon}}
+                                @iconClass={{actionButton.iconClass}}
+                                @iconFlip={{actionButton.iconFlip}}
+                                @iconPrefix={{actionButton.iconPrefix}}
+                                @iconRotation={{actionButton.iconRotation}}
+                                @iconSize={{actionButton.iconSize}}
+                                @isLoading={{actionButton.isLoading}}
+                                @outline={{actionButton.outline}}
+                                @permission={{actionButton.permission}}
+                                @wrapperClass={{actionButton.wrapperClass}}
+                                @textClass={{actionButton.textClass}}
+                                @tooltipPlacement={{actionButton.tooltipPlacement}}
+                                @visible={{actionButton.visible}}
+                            />
+                        {{/if}}
+                    {{/each}}
                     <Button
                         class="{{if @options.hideAcceptButton 'hidden'}}"
                         @type={{or @options.acceptButtonScheme @options.acceptButtonType "primary"}}

package/addon/components/resource-context-panel.js

@@ -78,6 +78,7 @@ export default class ResourceContextPanelComponent extends Component {
                           resource,
                           component: tab.component ?? tab.render,
                           model: resource,
+                          key: tab.key ?? tab.id ?? dasherize(tab.label ?? tab.title),
                           id: tab.id ?? tab.key ?? dasherize(tab.label ?? tab.title),
                           label: tab.label ?? tab.title,
                           icon: tab.icon,

package/addon/modifiers/constrain-view-section-width.js

@@ -0,0 +1,57 @@
+import { modifier } from 'ember-modifier';
+
+const SIDEBAR_SELECTOR = 'nav.next-sidebar';
+const SECTION_SELECTOR = 'section.next-view-section';
+const TABLIST_SELECTOR = '[role="tablist"]';
+
+function getSidebarWidth() {
+    return document.querySelector(SIDEBAR_SELECTOR)?.offsetWidth ?? 0;
+}
+
+function updateTablistMaxWidth(container, sidebarWidth) {
+    const tablist = container.querySelector(TABLIST_SELECTOR);
+
+    if (!tablist) {
+        return;
+    }
+
+    const pageWidth = document.body.offsetWidth;
+    tablist.style.maxWidth = `${Math.max(0, pageWidth - sidebarWidth)}px`;
+}
+
+function updateSectionWidth(sidebarWidth) {
+    const section = document.querySelector(SECTION_SELECTOR);
+
+    if (!section) {
+        return;
+    }
+
+    section.style.width = `calc(100vw - ${sidebarWidth}px)`;
+}
+
+function updateLayout(container) {
+    const sidebarWidth = getSidebarWidth();
+
+    updateTablistMaxWidth(container, sidebarWidth);
+    updateSectionWidth(sidebarWidth);
+}
+
+export default modifier(function constrainViewSectionWidth(element) {
+    const applyLayout = () => updateLayout(element);
+
+    applyLayout();
+
+    window.addEventListener('resize', applyLayout);
+
+    const sidebar = document.querySelector(SIDEBAR_SELECTOR);
+    const observer = new ResizeObserver(applyLayout);
+
+    if (sidebar) {
+        observer.observe(sidebar);
+    }
+
+    return () => {
+        window.removeEventListener('resize', applyLayout);
+        observer.disconnect();
+    };
+});

package/addon/services/resource-context-panel.js

@@ -199,7 +199,7 @@ export default class ResourceContextPanelService extends Service {
             throw new Error(`Overlay with ID ${id} does not have tabs`);
         }
 
-        const tab = overlay.tabs.find((t) => t.key === tabKey);
+        const tab = overlay.tabs.find((t) => t.key === tabKey || t.id === tabKey);
         if (!tab) {
             throw new Error(`Tab with key ${tabKey} not found in overlay ${id}`);
         }

package/addon/utils/is-menu-item-active.js

@@ -4,6 +4,10 @@ import getUrlParam from './get-url-param';
 export default function isMenuItemActive(section, slug, view = null) {
     let path = window.location.pathname;
     let segments = path.replace(/^\/|\/$/g, '').split('/');
+    // Hack for now for fleet-ops until we can refactor the menu system to be more route-aware and not rely on URL parsing
+    if (segments.length === 3 && segments[0] === 'fleet-ops') {
+        segments = segments.slice(1);
+    }
     let sectionMatch = segments[0] === section;
     let slugOnly = segments[0] === slug && section === slug && view === null;
     let slugMatch = segments.includes(slug);

package/app/components/event-calendar.js

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

package/app/modifiers/constrain-view-section-width.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/modifiers/constrain-view-section-width';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.3.25",
+    "version": "0.3.26",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",
@@ -39,6 +39,7 @@
         "@ember/string": "^3.0.1",
         "@embroider/addon": "^0.30.0",
         "@embroider/macros": "^1.8.3",
+        "@event-calendar/core": "^5.6.0",
         "@fleetbase/ember-accounting": "^0.0.1",
         "@floating-ui/dom": "^1.0.1",
         "@fortawesome/ember-fontawesome": "^2.0.0",
@@ -106,6 +107,7 @@
         "ember-wormhole": "^0.6.0",
         "gridstack": "^7.3.0",
         "imask": "^6.4.3",
+        "interactjs": "^1.10.27",
         "intl-tel-input": "^22.0.2",
         "leaflet": "^1.9.4",
         "postcss-at-rules-variables": "^0.3.0",
@@ -114,8 +116,7 @@
         "postcss-import": "^15.1.0",
         "postcss-mixins": "^9.0.4",
         "postcss-preset-env": "^9.1.1",
-        "tailwindcss": "^3.1.8",
-        "interactjs": "^1.10.27"
+        "tailwindcss": "^3.1.8"
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.22.15",