@fleetbase/ember-ui 0.3.9 → 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/custom-field/input.hbs

@@ -74,7 +74,7 @@
                         @onFileAdded={{this.onFileAddedHandler}}
                     >
                         <a tabindex={{0}} class="btn btn-default btn-xs cursor-pointer">
-                            <FaIcon @icon="upload" @size="sm" class="mr-2" />{{t "common.select-file"}}
+                            <FaIcon @icon="upload" @size="sm" class="mr-2" />{{t "common.select-field" field=(t "common.file")}}
                         </a>
                     </FileUpload>
                     {{#if this.file}}

package/addon/components/custom-field/input.js

@@ -16,27 +16,53 @@ export default class CustomFieldInputComponent extends Component {
     @tracked value;
     @tracked file;
     @tracked uploadedFile;
-    acceptedFileTypes = [
-        'application/vnd.ms-excel',
-        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-        'application/msword',
-        'application/pdf',
-        'application/x-pdf',
-        'image/jpeg',
-        'image/png',
-        'image/gif',
-        'image/webp',
-        'video/mp4',
-        'video/quicktime',
-        'video/x-msvideo',
-        'video/x-flv',
-        'video/x-ms-wmv',
-        'audio/mpeg',
-        'video/x-msvideo',
-        'application/zip',
-        'application/x-tar',
-    ];
+
+    get acceptedFileTypes() {
+        return [
+            // Excel
+            'application/vnd.ms-excel',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            'application/vnd.ms-excel.sheet.macroenabled.12',
+            // Word / PowerPoint
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+            'application/msword',
+            // PDF
+            'application/pdf',
+            'application/x-pdf',
+            // Images
+            'image/jpeg',
+            'image/png',
+            'image/gif',
+            'image/webp',
+            // Video
+            'video/mp4',
+            'video/quicktime',
+            'video/x-msvideo',
+            'video/x-flv',
+            'video/x-ms-wmv',
+            // Audio
+            'audio/mpeg',
+            // Archives
+            'application/zip',
+            'application/x-tar',
+            // Json
+            'application/json',
+            'text/json',
+            'application/x-json',
+            // Text documents
+            'text/plain',
+            'text/markdown',
+            'application/rtf',
+            'text/csv',
+            'text/tab-separated-values',
+            'text/html',
+            'application/xml',
+            'text/xml',
+            'application/x-yaml',
+            'text/yaml',
+        ];
+    }
 
     /**
      * A map defining the available custom field types and their corresponding components.
@@ -65,7 +91,7 @@ export default class CustomFieldInputComponent extends Component {
         }
     }
 
-    @action onFileAddedHandler(file) {
+    @action async onFileAddedHandler(file) {
         // since we have dropzone and upload button within dropzone validate the file state first
         // as this method can be called twice from both functions
         if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) return;
@@ -73,12 +99,23 @@ export default class CustomFieldInputComponent extends Component {
         // set file for progress state
         this.file = file;
 
+        // resolve subject if necessary
+        const subject = await this.subject;
+
+        let path = `uploads/${this.extension ?? 'cf-files'}/${this.customField.id}`;
+        let type = `custom_field_file`;
+
+        if (subject) {
+            path = `uploads/${this.extension ?? 'cf-files'}/${getModelName(subject)}-cf-files`;
+            type = `${underscore(getModelName(subject))}_file`;
+        }
+
         // Queue and upload immediatley
         this.fetch.uploadFile.perform(
             file,
             {
-                path: `uploads/${this.extension}/${getModelName(this.subject)}-cf-files`,
-                type: `${underscore(getModelName(this.subject))}_file`,
+                path,
+                type,
             },
             (uploadedFile) => {
                 this.file = undefined;

package/addon/components/custom-field/options-input.hbs

@@ -1,6 +1,6 @@
 <div class="rounded-lg border border-gray-200 dark:border-gray-700" ...attributes>
     <div class="flex flex-row items-center justify-between px-4 py-2">
-        <div class="mr-2 text-sm">{{t "fleet-ops.component.custom-field-form-panel.field-options"}}</div>
+        <div class="mr-2 text-sm">Field Options</div>
         <Button @type="magic" @icon="plus" @text="Add new option" @size="xs" @onClick={{this.addOption}} />
     </div>
     {{#each-in this.options as |index option|}}

package/addon/components/file.hbs

@@ -1,56 +1,59 @@
-<div class="x-fleetbase-file" ...attributes>
-    <div class="x-fleetbase-file-wrapper">
-        <div class="x-fleetbase-file-actions">
-            <DropdownButton
-                @dropdownId="x-fleetbase-file-actions-dropdown"
-                @icon={{or @dropdownIcon "ellipsis"}}
-                @iconSize="xs"
-                @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-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
-                    <div class="px-1">
-                        <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
-                            {{t "component.file.dropdown-label"}}
-                        </div>
-                    </div>
-                    <div class="next-dd-menu-seperator"></div>
-                    <div role="group" class="px-1">
+<div
+    class="group relative w-32 h-40 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-blue-500 dark:hover:border-blue-400 hover:shadow-md transition-all"
+    ...attributes
+>
+    <div class="relative w-full h-32 bg-gray-50 dark:bg-gray-900 flex items-center justify-center overflow-hidden rounded-t-lg">
+        {{#if this.isImage}}
+            <Image src={{@file.url}} alt={{@file.original_filename}} class="w-full h-full object-cover" />
+        {{else}}
+            <div class="flex items-center justify-center w-full h-full">
+                <FileIcon @file={{@file}} @hideExtension={{true}} @iconSize="3x" />
+            </div>
+        {{/if}}
+    </div>
 
-                        <a href="javascript:;" role="menuitem" class="next-dd-item text-danger" {{on "click" (fn this.onDropdownItemClick "onDelete" dd)}}>
-                            <span class="mr-1">
-                                <FaIcon @icon="trash" @prefix={{@dropdownButtonIconPrefix}} />
-                            </span>
-                            {{t "common.delete"}}
-                        </a>
+    <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>
-            </DropdownButton>
-        </div>
-        <div class="flex flex-1 flex-col justify-between items-center">
-            <div class="flex-1">
-                {{#if this.isImage}}
-                    <Image src={{@file.url}} alt={{@file.original_filename}} class="x-fleetbase-file-preview rounded-md shadow-sm" />
-                {{else}}
-                    <div class="x-fleetbase-file-preview">
-                        <FileIcon @file={{@file}} @hideExtension={{true}} @iconSize="2xl" />
-                    </div>
-                {{/if}}
-            </div>
-            <div class="flex-1 overflow-hidden flex flex-col items-center justify-end">
-                <div class="x-fleetbase-file-name">
-                    {{truncate-filename @file.original_filename}}
+                <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>
-        </div>
+        </DropdownButton>
+    </div>
+
+    <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">
+            {{truncate-filename @file.original_filename}}
+        </span>
     </div>
 </div>

package/addon/components/file.js

@@ -1,43 +1,12 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+import isImageFile from '../utils/is-image-file';
 
 export default class FileComponent extends Component {
-    @tracked file;
-    @tracked isImage = false;
-
-    constructor(owner, { file }) {
-        super(...arguments);
-
-        this.file = file;
-        this.isImage = this.isImageFile(file);
-    }
-
-    @action onDropdownItemClick(action, dd) {
-        if (typeof dd.actions === 'object' && typeof dd.actions.close === 'function') {
-            dd.actions.close();
-        }
-
-        if (typeof this.args[action] === 'function') {
-            this.args[action](this.file);
-        }
+    get file() {
+        return this.args.file;
     }
 
-    isImageFile(file) {
-        if (!file || (!file.original_filename && !file.url && !file.path)) {
-            return false;
-        }
-
-        const filename = file.original_filename || file.url || file.path;
-        const extensionMatch = filename.match(/\.(.+)$/);
-
-        if (!extensionMatch) {
-            return false;
-        }
-
-        const extension = extensionMatch[1].toLowerCase();
-        const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'webp'];
-
-        return imageExtensions.includes(extension);
+    get isImage() {
+        return isImageFile(this.file);
     }
 }

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