@fleetbase/ember-ui 0.3.10 → 0.3.12

package/SCHEDULING_COMPONENTS.md

@@ -0,0 +1,228 @@
+# Scheduling Components for Ember UI
+
+This package provides reusable scheduling components for the Fleetbase platform.
+
+## Components
+
+### ScheduleCalendar
+
+A full-featured calendar component for displaying and managing schedules.
+
+**Usage:**
+```handlebars
+<ScheduleCalendar
+  @resources={{this.drivers}}
+  @items={{this.scheduleItems}}
+  @view="resourceTimeline"
+  @onItemClick={{this.handleItemClick}}
+  @onItemDrop={{this.handleItemDrop}}
+  @onDateClick={{this.handleDateClick}}
+>
+  <:item as |item|>
+    <div class="custom-event-content">
+      {{item.title}}
+    </div>
+  </:item>
+</ScheduleCalendar>
+```
+
+**Arguments:**
+- `@resources` - Array of resources (e.g., drivers, vehicles)
+- `@items` - Array of schedule items to display
+- `@view` - Calendar view type (default: 'resourceTimeline')
+- `@editable` - Enable drag-and-drop editing (default: true)
+- `@onItemClick` - Callback when an item is clicked
+- `@onItemDrop` - Callback when an item is dragged and dropped
+- `@onDateClick` - Callback when a date is clicked
+
+**Named Blocks:**
+- `:item` - Custom rendering for schedule items
+- `:header` - Custom header content
+- `:footer` - Custom footer content
+
+### ScheduleItemCard
+
+Displays a schedule item in a card format.
+
+**Usage:**
+```handlebars
+<ScheduleItemCard @item={{this.scheduleItem}} @onClick={{this.handleClick}}>
+  <:content as |ctx|>
+    <div class="custom-content">
+      {{ctx.item.title}}
+    </div>
+  </:content>
+  <:actions as |ctx|>
+    <button {{on "click" (fn this.edit ctx.item)}}>Edit</button>
+    <button {{on "click" (fn this.delete ctx.item)}}>Delete</button>
+  </:actions>
+</ScheduleItemCard>
+```
+
+**Arguments:**
+- `@item` - The schedule item to display
+- `@onClick` - Callback when the card is clicked
+
+**Named Blocks:**
+- `:content` - Custom content rendering
+- `:actions` - Custom action buttons
+
+### AvailabilityEditor
+
+Allows users to set and manage availability windows.
+
+**Usage:**
+```handlebars
+<AvailabilityEditor
+  @subjectType="driver"
+  @subjectUuid={{@driver.id}}
+  @onSave={{this.handleAvailabilitySave}}
+/>
+```
+
+**Arguments:**
+- `@subjectType` - Type of the subject (e.g., 'driver', 'vehicle')
+- `@subjectUuid` - UUID of the subject
+- `@onSave` - Callback when availability is saved
+
+## Models
+
+### Schedule
+
+Represents a master schedule.
+
+**Attributes:**
+- `name` - Schedule name
+- `description` - Schedule description
+- `start_date` - Start date
+- `end_date` - End date
+- `timezone` - Timezone
+- `status` - Status (draft, published, active, paused, archived)
+- `subject_uuid` - UUID of the subject
+- `subject_type` - Type of the subject
+
+**Relationships:**
+- `items` - hasMany schedule-item
+- `company` - belongsTo company
+
+### ScheduleItem
+
+Represents an individual scheduled item.
+
+**Attributes:**
+- `start_at` - Start datetime
+- `end_at` - End datetime
+- `duration` - Duration in minutes
+- `status` - Status (pending, confirmed, in_progress, completed, cancelled, no_show)
+- `assignee_uuid` - UUID of the assignee
+- `assignee_type` - Type of the assignee
+- `resource_uuid` - UUID of the resource
+- `resource_type` - Type of the resource
+
+**Relationships:**
+- `schedule` - belongsTo schedule
+
+### ScheduleTemplate
+
+Represents a reusable schedule template.
+
+**Attributes:**
+- `name` - Template name
+- `description` - Template description
+- `start_time` - Start time
+- `end_time` - End time
+- `duration` - Duration in minutes
+- `break_duration` - Break duration in minutes
+- `rrule` - RFC 5545 recurrence rule
+
+### ScheduleAvailability
+
+Represents availability windows for resources.
+
+**Attributes:**
+- `subject_uuid` - UUID of the subject
+- `subject_type` - Type of the subject
+- `start_at` - Start datetime
+- `end_at` - End datetime
+- `is_available` - Availability flag
+- `preference_level` - Preference strength (1-5)
+- `reason` - Reason for unavailability
+- `notes` - Additional notes
+- `rrule` - RFC 5545 recurrence rule
+
+### ScheduleConstraint
+
+Represents scheduling constraints.
+
+**Attributes:**
+- `name` - Constraint name
+- `description` - Constraint description
+- `type` - Constraint type (hos, labor, business, capacity)
+- `category` - Constraint category (compliance, optimization)
+- `constraint_key` - Constraint key
+- `constraint_value` - Constraint value
+- `jurisdiction` - Jurisdiction (e.g., US-Federal, US-CA)
+- `priority` - Priority (higher = more important)
+- `is_active` - Active flag
+
+## Service
+
+### Scheduling Service
+
+Provides methods for interacting with the scheduling API.
+
+**Methods:**
+
+- `loadSchedule(scheduleId)` - Load a schedule by ID
+- `createSchedule(data)` - Create a new schedule
+- `createScheduleItem(data)` - Create a new schedule item
+- `updateScheduleItem(item, data)` - Update a schedule item
+- `deleteScheduleItem(item)` - Delete a schedule item
+- `getScheduleItemsForAssignee(assigneeType, assigneeUuid, filters)` - Get items for an assignee
+- `checkAvailability(subjectType, subjectUuid, startAt, endAt)` - Check availability
+- `setAvailability(data)` - Set availability
+- `loadConstraints(subjectType, subjectUuid)` - Load constraints
+- `validateScheduleItem(item)` - Validate an item against constraints
+
+**Usage:**
+```javascript
+import { inject as service } from '@ember/service';
+
+export default class MyComponent extends Component {
+  @service scheduling;
+
+  async loadDriverSchedule(driverId) {
+    const items = await this.scheduling.getScheduleItemsForAssignee.perform(
+      'driver',
+      driverId,
+      { start_at: '2025-11-15', end_at: '2025-11-22' }
+    );
+    return items;
+  }
+}
+```
+
+## Styling
+
+All components follow Fleetbase UI styling standards:
+- Minimal padding and spacing
+- Tailwind CSS framework
+- Dark mode support
+- Consistent with existing ember-ui components
+
+## Dependencies
+
+The ScheduleCalendar component requires FullCalendar to be installed:
+
+```bash
+pnpm add @fullcalendar/core @fullcalendar/resource-timeline @fullcalendar/interaction
+```
+
+## Future Enhancements
+
+- TimeOffForm component for time-off requests
+- ScheduleTemplateBuilder component for creating templates
+- Conflict detection UI
+- RRULE editor for recurring patterns
+- Multi-timezone support improvements
+- Real-time updates via WebSockets

package/addon/components/availability-editor.js

@@ -0,0 +1,81 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+/**
+ * AvailabilityEditor Component
+ *
+ * Allows users to set and manage availability windows for resources.
+ *
+ * @example
+ * <AvailabilityEditor
+ *   @subjectType="driver"
+ *   @subjectUuid={{@driver.id}}
+ *   @onSave={{this.handleAvailabilitySave}}
+ * />
+ */
+export default class AvailabilityEditorComponent extends Component {
+    @service scheduling;
+    @service notifications;
+
+    @tracked startAt = null;
+    @tracked endAt = null;
+    @tracked isAvailable = true;
+    @tracked preferenceLevel = 3;
+    @tracked reason = '';
+    @tracked notes = '';
+    @tracked rrule = '';
+
+    /**
+     * Save availability
+     */
+    @action
+    async saveAvailability() {
+        try {
+            const data = {
+                subject_type: this.args.subjectType,
+                subject_uuid: this.args.subjectUuid,
+                start_at: this.startAt,
+                end_at: this.endAt,
+                is_available: this.isAvailable,
+                preference_level: this.preferenceLevel,
+                reason: this.reason,
+                notes: this.notes,
+                rrule: this.rrule,
+            };
+
+            const availability = await this.scheduling.setAvailability.perform(data);
+
+            if (this.args.onSave) {
+                this.args.onSave(availability);
+            }
+
+            this.resetForm();
+        } catch (error) {
+            console.error('Failed to save availability:', error);
+        }
+    }
+
+    /**
+     * Reset form
+     */
+    @action
+    resetForm() {
+        this.startAt = null;
+        this.endAt = null;
+        this.isAvailable = true;
+        this.preferenceLevel = 3;
+        this.reason = '';
+        this.notes = '';
+        this.rrule = '';
+    }
+
+    /**
+     * Update field
+     */
+    @action
+    updateField(field, value) {
+        this[field] = value;
+    }
+}

package/addon/components/chart.js

@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { debug } from '@ember/debug';
 import Chart, { _adapters } from 'chart.js/auto';
 import {
     parse,
@@ -46,13 +47,7 @@ import {
 
 export default class ChartComponent extends Component {
     @tracked chart;
-    @tracked isLoading;
-
-    constructor() {
-        super(...arguments);
-
-        this.isLoading = this.args.isLoading === true;
-    }
+    @tracked isLoading = this.args.isLoading;
 
     @action async renderChart(ctx) {
         const options = {
@@ -65,9 +60,14 @@ export default class ChartComponent extends Component {
         };
 
         if (typeof options.data.datasets === 'function') {
-            this.isLoading = true;
-            options.data.datasets = await options.data.datasets();
-            this.isLoading = false;
+            try {
+                this.isLoading = true;
+                options.data.datasets = await options.data.datasets();
+            } catch (err) {
+                debug('Error loading Chart dataset: ' + err.message);
+            } finally {
+                this.isLoading = false;
+            }
         }
 
         this.useDateFns();

package/addon/components/click-to-reveal.hbs

@@ -1,4 +1,4 @@
-<div class="relative click-to-reveal {{if this.isVisible 'is-visible' 'is-blurred'}}" {{on "click" (fn this.copy @value)}} ...attributes>
+<div class="relative click-to-reveal {{this.wrapperClass}} {{if this.isVisible 'is-visible' 'is-blurred'}}" {{on "click" (fn this.copy @value)}} ...attributes>
     <span class="click-to-reveal--hidden-value">
         {{#if (has-block)}}
             {{yield}}

package/addon/components/click-to-reveal.js

@@ -4,33 +4,11 @@ import { action, computed } from '@ember/object';
 import { later } from '@ember/runloop';
 
 export default class ClickToRevealComponent extends ClickToCopyComponent {
-    /**
-     * The visiblity state of the value
-     *
-     * @var {Boolean}
-     */
     @tracked isVisible = false;
-
-    /**
-     * The loading state of the reveal process
-     *
-     * @var {Boolean}
-     */
     @tracked isLoading = false;
-
-    /**
-     * The loading timing
-     *
-     * @var {Integer}
-     */
     @tracked timeout = 600;
-
-    /**
-     * If click to copy should be enabled.
-     *
-     * @var {Boolean}
-     */
     @tracked clickToCopy = false;
+    @tracked wrapperClass = this.args.wrapperClass ?? '';
 
     /**
      * Setup the component
@@ -47,6 +25,10 @@ export default class ClickToRevealComponent extends ClickToCopyComponent {
         if (column && column.cellComponentArgs) {
             this.clickToCopy = column.cellComponentArgs.clickToCopy ?? false;
         }
+
+        if (column && column.cellComponentArgs) {
+            this.wrapperClass = column.cellComponentArgs.wrapperClass ?? '';
+        }
     }
 
     /**

package/addon/components/dashboard/create.hbs

@@ -1,10 +1,12 @@
 <div class="fleetbase-dashboard-grid" ...attributes>
     <GridStack @options={{this.gridOptions}} @onChange={{this.onChangeGrid}}>
         {{#each @dashboard.widgets as |widget|}}
-            {{#let (resolve-component widget.component) as |ResolvedComponent|}}
-                {{#if ResolvedComponent}}
+            {{#let (resolve-component widget.component) as |componentDefinition|}}
+                {{#if componentDefinition}}
                     <GridStackItem id={{widget.id}} @options={{spread-widget-options (hash id=widget.id options=widget.grid_options)}} class="relative">
-                        {{component ResolvedComponent widget=widget options=widget.options}}
+                        <LazyEngineComponent @component={{componentDefinition}} as |resolvedComponent|>
+                            {{component resolvedComponent widget=widget options=widget.options}}
+                        </LazyEngineComponent>
 
                         {{#if @isEdit}}
                             <div class="absolute top-2 right-2">

package/addon/components/dashboard/widget-panel.hbs

@@ -1,25 +1,35 @@
 <Overlay @isOpen={{@isOpen}} @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width={{or this.width @width "400px"}}>
-    <Overlay::Header @title={{t "component.dashboard-widget-panel.select-widgets"}} @hideStatusDot={{true}} @titleWrapperClass="leading-5">
+    <Overlay::Header @title={{t "dashboard-widget-panel.select-widgets"}} @hideStatusDot={{true}} @titleWrapperClass="leading-5 text-gray-800 dark:text-white">
         <:actions>
             <div class="flex flex-1 justify-end">
-                <Button @type="default" @icon="times" @helpText={{t "component.dashboard-widget-panel.close-and-save"}} @onClick={{this.onPressClose}} />
+                <Button @type="default" @icon="times" @helpText={{t "dashboard-widget-panel.close-and-save"}} @onClick={{this.onPressClose}} />
             </div>
         </:actions>
     </Overlay::Header>
 
-    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4">
+    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-1 space-y-4 pt-2">
+        <div>
+            <Input
+                @type="text"
+                @value={{this.searchQuery}}
+                placeholder={{or (t "dashboard-widget-panel.filter-widgets") "Filter widgets by keyword"}}
+                class="w-full form-input form-input-sm"
+                {{on "input" this.updateSearchQuery}}
+            />
+        </div>
+
         <div class="grid grid-cols-1 gap-4 text-xs dark:text-gray-100">
             {{#each this.availableWidgets as |widget|}}
                 <div
                     class="rounded-lg border border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300 ease-in-out shadow-md px-4 py-2 cursor-pointer"
-                    {{on "click" (fn this.addWidgetToDashboard widget)}}
+                    {{on "click" (perform this.addWidgetToDashboard widget)}}
                 >
-                    <div class="flex flex-row items-center leading-6 mb-2.5">
-                        <div class="w-8 flex items-center justify-start">
+                    <div class="flex flex-row items-center leading-7 mb-2">
+                        <div class="w-7 flex items-center justify-start">
                             <FaIcon @icon={{widget.icon}} class="text-lg text-gray-600 dark:text-gray-300" />
                         </div>
                         <p class="text-sm truncate font-semibold dark:text-gray-100 text-gray-800">
-                            {{t "component.dashboard-widget-panel.widget-name" widgetName=widget.name}}
+                            {{t "dashboard-widget-panel.widget-name" widgetName=widget.name}}
                         </p>
                     </div>
                     <div>

package/addon/components/dashboard/widget-panel.js

@@ -2,23 +2,72 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { ExtensionComponent } from '@fleetbase/ember-core/contracts';
 
 export default class DashboardWidgetPanelComponent extends Component {
-    @service universe;
-    @tracked availableWidgets = [];
+    @service('universe/widget-service') widgetService;
+    @service notifications;
+    @tracked defaultDashboardId = this.args.defaultDashboardId ?? 'dashboard';
     @tracked dashboard;
     @tracked isOpen = true;
-    @service notifications;
+    @tracked searchQuery = '';
 
     /**
      * Constructs the component and applies initial state.
      */
     constructor(owner, { dashboard, defaultDashboardId = 'dashboard' }) {
         super(...arguments);
-        this.availableWidgets = this.universe.getWidgets(defaultDashboardId);
+        this.defaultDashboardId = defaultDashboardId;
         this.dashboard = dashboard;
     }
 
+    /**
+     * Gets available widgets for the dashboard.
+     * Computed as a getter to ensure reactivity when widgets are registered.
+     * @returns {Array} Available widgets
+     */
+    get availableWidgets() {
+        const dashboardId = this.args.defaultDashboardId || this.defaultDashboardId || 'dashboard';
+        const widgets = this.widgetService.getWidgets(dashboardId);
+
+        // Filter widgets by search query
+        if (this.searchQuery && this.searchQuery.trim()) {
+            const query = this.searchQuery.toLowerCase().trim();
+            return widgets.filter((widget) => {
+                const name = (widget.name || '').toLowerCase();
+                const description = (widget.description || '').toLowerCase();
+                return name.includes(query) || description.includes(query);
+            });
+        }
+
+        return widgets;
+    }
+
+    /**
+     * Adds a new available widget to the current dashboard.
+     *
+     * @param {Component|Widget|string} widget
+     * @memberof DashboardWidgetPanelComponent
+     */
+    @task *addWidgetToDashboard(widget) {
+        // If widget is a component definition/class
+        if (typeof widget.component === 'function') {
+            widget.component = widget.component.name;
+        }
+
+        // If using extension component definition
+        if (widget.component instanceof ExtensionComponent) {
+            widget.component = widget.component.toString();
+        }
+
+        try {
+            yield this.dashboard.addWidget(widget);
+        } catch (err) {
+            this.notifications.serverError(err);
+        }
+    }
+
     /**
      * Sets the overlay context.
      *
@@ -33,15 +82,14 @@ export default class DashboardWidgetPanelComponent extends Component {
         }
     }
 
-    @action addWidgetToDashboard(widget) {
-        // If widget is a component definition/class
-        if (typeof widget.component === 'function') {
-            widget.component = widget.component.name;
-        }
-
-        this.args.dashboard.addWidget(widget).catch((error) => {
-            this.notifications.serverError(error);
-        });
+    /**
+     * Updates the search query
+     *
+     * @action
+     * @param {Event} event
+     */
+    @action updateSearchQuery(event) {
+        this.searchQuery = event.target.value;
     }
 
     /**

package/addon/components/dashboard.js

@@ -17,7 +17,6 @@ export default class DashboardComponent extends Component {
     @service modalsManager;
     @service fetch;
     @service dashboard;
-    @service universe;
 
     /**
      * Creates an instance of DashboardComponent.

package/addon/components/filter/multi-input.hbs

@@ -0,0 +1,16 @@
+<div class="filter-multi-input" ...attributes>
+    <TagInput
+        class="form-input form-input-sm flex-1"
+        @placeholder={{or @placeholder "Add values..."}}
+        @allowSpacesInTags={{or @allowSpacesInTags true}}
+        @tags={{this.tags}}
+        @addTag={{this.addTag}}
+        @removeTagAtIndex={{this.removeTag}}
+        as |tag|
+    >
+        {{tag}}
+    </TagInput>
+    <button type="button" class="clear-button" disabled={{not this.tags.length}} alt="Clear" {{on "click" this.clear}}>
+        <FaIcon @icon="times" />
+    </button>
+</div>

package/addon/components/filter/multi-input.js

@@ -0,0 +1,68 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+
+export default class FilterMultiInputComponent extends Component {
+    @tracked tags = [];
+
+    constructor() {
+        super(...arguments);
+        this.tags = this.parseValue(this.args.value);
+    }
+
+    parseValue(value) {
+        if (isArray(value)) {
+            return value;
+        }
+
+        if (typeof value === 'string' && value.includes(',')) {
+            return value
+                .split(',')
+                .map((v) => v.trim())
+                .filter(Boolean);
+        }
+
+        if (value) {
+            return [value];
+        }
+
+        return [];
+    }
+
+    buildValue() {
+        return this.tags.join(',');
+    }
+
+    @action addTag(tag) {
+        const { onChange, filter } = this.args;
+
+        this.tags.pushObject(tag);
+        const value = this.buildValue();
+
+        if (typeof onChange === 'function') {
+            onChange(filter, value);
+        }
+    }
+
+    @action removeTag(index) {
+        const { onChange, filter } = this.args;
+
+        this.tags.removeAt(index);
+        const value = this.buildValue();
+
+        if (typeof onChange === 'function') {
+            onChange(filter, value);
+        }
+    }
+
+    @action clear() {
+        const { onClear, filter } = this.args;
+
+        this.tags = [];
+
+        if (typeof onClear === 'function') {
+            onClear(filter);
+        }
+    }
+}