@fleetbase/ember-ui 0.3.10 → 0.3.11

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/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);
+        }
+    }
+}

package/addon/components/filter/range.hbs

@@ -0,0 +1,52 @@
+<div class="filter-range" ...attributes>
+    <div class="filter-range-inputs">
+        <div class="filter-range-input-group">
+            <label class="filter-range-label">{{or @filter.minLabel "Min"}}</label>
+            <Input 
+                @type="number" 
+                @value={{this.minValue}} 
+                min={{or @filter.min 0}} 
+                max={{or @filter.max 100}} 
+                step={{or @filter.step 1}}
+                {{on "input" this.onMinChange}} 
+                class="form-input form-input-sm" 
+            />
+        </div>
+        <div class="filter-range-separator">-</div>
+        <div class="filter-range-input-group">
+            <label class="filter-range-label">{{or @filter.maxLabel "Max"}}</label>
+            <Input 
+                @type="number" 
+                @value={{this.maxValue}} 
+                min={{or @filter.min 0}} 
+                max={{or @filter.max 100}} 
+                step={{or @filter.step 1}}
+                {{on "input" this.onMaxChange}} 
+                class="form-input form-input-sm" 
+            />
+        </div>
+    </div>
+    <div class="filter-range-sliders">
+        <input 
+            type="range" 
+            value={{this.minValue}} 
+            min={{or @filter.min 0}} 
+            max={{or @filter.max 100}} 
+            step={{or @filter.step 1}}
+            {{on "input" this.onMinChange}} 
+            class="filter-range-slider filter-range-slider-min" 
+        />
+        <input 
+            type="range" 
+            value={{this.maxValue}} 
+            min={{or @filter.min 0}} 
+            max={{or @filter.max 100}} 
+            step={{or @filter.step 1}}
+            {{on "input" this.onMaxChange}} 
+            class="filter-range-slider filter-range-slider-max" 
+        />
+    </div>
+    <button type="button" class="clear-button" alt="Clear" {{on "click" this.clear}}>
+        <FaIcon @icon="times" />
+    </button>
+</div>

package/addon/components/filter/range.js

@@ -0,0 +1,74 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class FilterRangeComponent extends Component {
+    @tracked minValue;
+    @tracked maxValue;
+
+    constructor() {
+        super(...arguments);
+        this.parseValue(this.args.value);
+    }
+
+    parseValue(value) {
+        const { filter } = this.args;
+        const { min = 0, max = 100 } = filter;
+
+        if (typeof value === 'string' && value.includes(',')) {
+            const [minVal, maxVal] = value.split(',').map((v) => parseFloat(v.trim()));
+            this.minValue = isNaN(minVal) ? min : minVal;
+            this.maxValue = isNaN(maxVal) ? max : maxVal;
+        } else {
+            this.minValue = min;
+            this.maxValue = max;
+        }
+    }
+
+    buildValue() {
+        return `${this.minValue},${this.maxValue}`;
+    }
+
+    @action onMinChange(event) {
+        const { onChange, filter } = this.args;
+        const value = parseFloat(event.target.value);
+
+        this.minValue = value;
+
+        // Ensure min doesn't exceed max
+        if (this.minValue > this.maxValue) {
+            this.maxValue = this.minValue;
+        }
+
+        if (typeof onChange === 'function') {
+            onChange(filter, this.buildValue());
+        }
+    }
+
+    @action onMaxChange(event) {
+        const { onChange, filter } = this.args;
+        const value = parseFloat(event.target.value);
+
+        this.maxValue = value;
+
+        // Ensure max doesn't go below min
+        if (this.maxValue < this.minValue) {
+            this.minValue = this.maxValue;
+        }
+
+        if (typeof onChange === 'function') {
+            onChange(filter, this.buildValue());
+        }
+    }
+
+    @action clear() {
+        const { onClear, filter } = this.args;
+
+        this.minValue = filter.min ?? 0;
+        this.maxValue = filter.max ?? 100;
+
+        if (typeof onClear === 'function') {
+            onClear(filter);
+        }
+    }
+}

package/addon/components/filters-picker.js

@@ -91,25 +91,32 @@ export default class FiltersPickerComponent extends Component {
             this.args.onClear(...args);
         }
 
-        // Build a clean query-param bag
+        // Build a qp bag that explicitly clears the filter params
         const qp = { ...this.hostRouter.currentRoute.queryParams };
+
         (this.args.columns ?? [])
             .filter((c) => c.filterable)
             .forEach((c) => {
                 const key = c.filterParam ?? c.valuePath;
-                delete qp[key];
-                delete qp[`${key}[]`];
+
+                // Explicitly clear them instead of deleting
+                if (key in qp) {
+                    qp[key] = null; // will remove from URL if default is null
+                }
+
+                const arrayKey = `${key}[]`;
+                if (arrayKey in qp) {
+                    qp[arrayKey] = null;
+                }
             });
 
-        // Transition – routeDidChange listener will rebuild afterwards
         try {
             await this.hostRouter.transitionTo(this.hostRouter.currentRouteName, {
                 queryParams: qp,
             });
         } catch (error) {
-            // Ignore only the "transition aborted" case
             if (error?.name !== 'TransitionAborted') {
-                throw error; // real error → rethrow
+                throw error;
             }
         }
     }

package/addon/components/layout/resource/tabular.hbs

@@ -133,6 +133,8 @@
             @onPageChange={{@onPageChange}}
             @tfootVerticalOffset={{@tfootVerticalOffset}}
             @tfootVerticalOffsetElements={{@tfootVerticalOffsetElements}}
+            @onSort={{this.handleSort}}
+            @checkboxSticky={{this.checkboxSticky}}
         />
     {{/if}}
 </Layout::Section::Body>

package/addon/components/layout/resource/tabular.js

@@ -2,12 +2,20 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { isNone } from '@ember/utils';
 
 export default class LayoutResourceTabularComponent extends Component {
     @service filters;
     @tracked table;
     @tracked columns = [];
 
+    get checkboxSticky() {
+        if (!isNone(this.args.checkboxSticky)) return this.args.checkboxSticky;
+
+        const columns = this.args.columns ?? this.columns;
+        return columns.some((c) => !isNone(c?.sticky));
+    }
+
     constructor(owner, { columns = [] }) {
         super(...arguments);
         this.columns = columns;
@@ -19,4 +27,24 @@ export default class LayoutResourceTabularComponent extends Component {
             this.args.setupTable(table);
         }
     }
+
+    @action handleSort(sortString, sortColumns) {
+        // sortString is comma-delimited format: "created_at,-order_date,status"
+        // sortColumns is array format: [{ param: 'created_at', direction: 'asc' }, ...]
+
+        if (this.args.controller && this.args.controller.sort !== undefined) {
+            this.args.controller.sort = sortString;
+        }
+
+        if (typeof this.args.onSort === 'function') {
+            this.args.onSort({
+                sortString,
+                sortColumns,
+                // Legacy support for single column callbacks
+                sortBy: sortColumns.length > 0 ? sortColumns[0].param : null,
+                sortDirection: sortColumns.length > 0 ? sortColumns[0].direction : null,
+                sortValue: sortString,
+            });
+        }
+    }
 }