@fleetbase/ember-ui 0.3.22 → 0.3.24

package/addon/components/template-builder/query-form.hbs

@@ -0,0 +1,260 @@
+{{! Template Builder Query Form Modal }}
+{{! Consume _syncKey so Glimmer tracks @isOpen and @query changes }}
+{{this._syncKey}}
+{{#if @isOpen}}
+    <div class="tb-query-form fixed inset-0 z-50 flex items-center justify-center" role="dialog" aria-modal="true">
+
+        {{! Backdrop }}
+        <div class="absolute inset-0 bg-black/40 dark:bg-black/60" {{on "click" this.cancel}}></div>
+
+        {{! Modal }}
+        <div class="relative z-10 w-full max-w-2xl bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 flex flex-col max-h-[90vh]">
+
+            {{! Header }}
+            <div class="flex items-center justify-between px-5 py-3.5 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+                <div class="flex items-center space-x-2">
+                    <FaIcon @icon="database" class="w-4 h-4 text-indigo-500" />
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
+                        {{if this.isEditing "Edit Query" "New Query"}}
+                    </h3>
+                </div>
+                <button type="button" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-400" {{on "click" this.cancel}}>
+                    <FaIcon @icon="xmark" class="w-4 h-4" />
+                </button>
+            </div>
+
+            {{! Body (scrollable) }}
+            <div class="flex-1 overflow-y-auto px-5 py-4 space-y-6">
+
+                {{! ── Basic Info ── }}
+                <div>
+                    <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Basic Info</h4>
+
+                    <div class="grid grid-cols-2 gap-3">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
+                                Label <span class="text-red-400">*</span>
+                            </label>
+                            <input
+                                type="text"
+                                class="tb-input w-full"
+                                placeholder="e.g. Recent Orders"
+                                value={{this.label}}
+                                {{on "input" this.updateLabel}}
+                            />
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Variable Name</label>
+                            <div class="flex items-center space-x-1">
+                                <span class="text-xs text-gray-400 font-mono">{</span>
+                                <input
+                                    type="text"
+                                    class="tb-input flex-1 font-mono"
+                                    placeholder="recent_orders"
+                                    value={{this.variableName}}
+                                    {{on "input" this.updateVariableName}}
+                                />
+                                <span class="text-xs text-gray-400 font-mono">}</span>
+                            </div>
+                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">Auto-derived from label if left blank.</p>
+                        </div>
+                    </div>
+
+                    <div>
+                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
+                        <input
+                            type="text"
+                            class="tb-input w-full"
+                            placeholder="Optional description"
+                            value={{this.description}}
+                            {{on "input" this.updateDescription}}
+                        />
+                    </div>
+                </div>
+
+                {{! ── Resource Type ── }}
+                <div>
+                    <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">Resource Type</h4>
+                    <p class="text-xs text-gray-400 dark:text-gray-500 mb-2">Select the Fleetbase model this query runs against.</p>
+
+                    <div class="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto border border-gray-200 dark:border-gray-700 rounded-lg p-2">
+                        {{#each this.resourceTypes as |rt|}}
+                            <button
+                                type="button"
+                                class="flex items-center space-x-2 px-2.5 py-2 rounded-lg border text-left transition-colors
+                                    {{if (eq this.modelType rt.value)
+                                        'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20 text-indigo-700 dark:text-indigo-300'
+                                        'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-700 dark:text-gray-300'}}"
+                                {{on "click" (fn this.selectResourceType rt.value)}}
+                            >
+                                <FaIcon @icon={{rt.icon}} class="w-3.5 h-3.5 flex-shrink-0 {{if (eq this.modelType rt.value) 'text-indigo-500' 'text-gray-400'}}" />
+                                <span class="block text-xs font-medium truncate">{{rt.label}}</span>
+                            </button>
+                        {{/each}}
+                    </div>
+                </div>
+
+                {{! ── Filter Conditions ── }}
+                <div>
+                    <div class="flex items-center justify-between mb-2">
+                        <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Filter Conditions</h4>
+                        <button
+                            type="button"
+                            class="flex items-center space-x-1 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700"
+                            {{on "click" this.addCondition}}
+                        >
+                            <FaIcon @icon="plus" class="w-3 h-3" />
+                            <span>Add condition</span>
+                        </button>
+                    </div>
+
+                    {{#if this.conditions.length}}
+                        <div class="space-y-1.5">
+                            {{#each this.conditions as |condition condIndex|}}
+                                {{! Each row: field (flex-1) | operator (fixed 130px) | value (flex-1) | remove }}
+                                <div class="flex items-center gap-1.5">
+                                    <input
+                                        type="text"
+                                        class="tb-input min-w-0 flex-1"
+                                        placeholder="field"
+                                        value={{condition.field}}
+                                        {{on "input" (fn this.updateConditionField condIndex "field")}}
+                                    />
+                                    <select
+                                        class="tb-input flex-shrink-0 tb-select-operator"
+                                        {{on "change" (fn this.updateConditionField condIndex "operator")}}
+                                    >
+                                        {{#each this.conditionOperators as |op|}}
+                                            <option value={{op.value}} selected={{eq condition.operator op.value}}>{{op.label}}</option>
+                                        {{/each}}
+                                    </select>
+                                    {{#if (this.showConditionValue condition.operator)}}
+                                        <input
+                                            type="text"
+                                            class="tb-input min-w-0 flex-1"
+                                            placeholder="value or {variable}"
+                                            value={{condition.value}}
+                                            {{on "input" (fn this.updateConditionField condIndex "value")}}
+                                        />
+                                    {{/if}}
+                                    <button
+                                        type="button"
+                                        class="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-gray-400 hover:text-red-500 flex-shrink-0"
+                                        title="Remove condition"
+                                        {{on "click" (fn this.removeCondition condIndex)}}
+                                    >
+                                        <FaIcon @icon="xmark" class="w-3 h-3" />
+                                    </button>
+                                </div>
+                            {{/each}}
+                        </div>
+                    {{else}}
+                        <p class="text-xs text-gray-400 dark:text-gray-500 text-center py-2 border border-dashed border-gray-200 dark:border-gray-700 rounded-lg">No conditions — all records will be returned.</p>
+                    {{/if}}
+                </div>
+
+                {{! ── Sort ── }}
+                <div>
+                    <div class="flex items-center justify-between mb-2">
+                        <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Sort</h4>
+                        <button
+                            type="button"
+                            class="flex items-center space-x-1 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700"
+                            {{on "click" this.addSort}}
+                        >
+                            <FaIcon @icon="plus" class="w-3 h-3" />
+                            <span>Add sort</span>
+                        </button>
+                    </div>
+
+                    {{#if this.sort.length}}
+                        <div class="space-y-1.5">
+                            {{#each this.sort as |sortItem sortIndex|}}
+                                <div class="flex items-center gap-1.5">
+                                    <input
+                                        type="text"
+                                        class="tb-input min-w-0 flex-1"
+                                        placeholder="field (e.g. created_at)"
+                                        value={{sortItem.field}}
+                                        {{on "input" (fn this.updateSortField sortIndex "field")}}
+                                    />
+                                    <select
+                                        class="tb-input flex-shrink-0 tb-select-direction"
+                                        {{on "change" (fn this.updateSortField sortIndex "direction")}}
+                                    >
+                                        <option value="asc"  selected={{eq sortItem.direction "asc"}}>Ascending</option>
+                                        <option value="desc" selected={{eq sortItem.direction "desc"}}>Descending</option>
+                                    </select>
+                                    <button
+                                        type="button"
+                                        class="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-gray-400 hover:text-red-500 flex-shrink-0"
+                                        title="Remove sort"
+                                        {{on "click" (fn this.removeSort sortIndex)}}
+                                    >
+                                        <FaIcon @icon="xmark" class="w-3 h-3" />
+                                    </button>
+                                </div>
+                            {{/each}}
+                        </div>
+                    {{else}}
+                        <p class="text-xs text-gray-400 dark:text-gray-500 text-center py-2 border border-dashed border-gray-200 dark:border-gray-700 rounded-lg">No sort — default model order will be used.</p>
+                    {{/if}}
+                </div>
+
+                {{! ── Limit & Eager-load ── }}
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Limit</h4>
+                        <input
+                            type="number"
+                            class="tb-input w-full"
+                            placeholder="No limit"
+                            min="1"
+                            value={{this.limit}}
+                            {{on "input" this.updateLimit}}
+                        />
+                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Max number of rows to return.</p>
+                    </div>
+                    <div>
+                        <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Eager Load (with)</h4>
+                        <input
+                            type="text"
+                            class="tb-input w-full"
+                            placeholder="e.g. driver,vehicle"
+                            value={{this.withString}}
+                            {{on "input" this.updateWith}}
+                        />
+                        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Comma-separated relationship names to eager-load.</p>
+                    </div>
+                </div>
+
+            </div>
+
+            {{! Footer }}
+            <div class="flex items-center justify-between px-5 py-3.5 border-t border-gray-200 dark:border-gray-700 flex-shrink-0">
+                {{#if this.errorMessage}}
+                    <p class="text-xs text-red-500">{{this.errorMessage}}</p>
+                {{else}}
+                    <div></div>
+                {{/if}}
+                <div class="flex items-center space-x-2">
+                    <button
+                        type="button"
+                        class="px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors"
+                        {{on "click" this.cancel}}
+                    >
+                        Cancel
+                    </button>
+                    <Button
+                        @type="primary"
+                        @text={{if this.isEditing "Save Changes" "Create Query"}}
+                        @icon="floppy-disk"
+                        @size="xs"
+                        @onClick={{this.save}}
+                    />
+                </div>
+            </div>
+
+        </div>
+    </div>
+{{/if}}

package/addon/components/template-builder/query-form.js

@@ -0,0 +1,309 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+/**
+ * TemplateBuilderQueryFormComponent
+ *
+ * Modal dialog for creating or editing a TemplateQuery.
+ * This component is purely presentational — it validates the form and returns
+ * the data to the parent via @onSave. No API calls are made here; the parent
+ * (template-builder) persists everything in one go when the template is saved.
+ *
+ * Form state is split into individual @tracked fields plus separate @tracked
+ * arrays for conditions and sort. This prevents the {{#each}} loops from
+ * destroying and recreating input DOM elements on every keystroke (which would
+ * steal focus from the active input).
+ *
+ * @argument {Boolean}  isOpen         - Whether the modal is visible
+ * @argument {Object}   query          - Existing query to edit (null for create)
+ * @argument {Array}    resourceTypes  - Optional override for the resource type list
+ * @argument {Function} onSave         - Called with the validated query data object
+ * @argument {Function} onClose        - Called when the modal should close
+ */
+export default class TemplateBuilderQueryFormComponent extends Component {
+    @service('template-builder') templateBuilderService;
+
+    // ── Scalar form fields ──────────────────────────────────────────────────
+    @tracked label = '';
+    @tracked variableName = '';
+    @tracked description = '';
+    @tracked modelType = '';
+    @tracked limit = '';
+    @tracked withRelations = [];
+
+    // ── Array fields — kept as separate tracked properties so that mutating
+    //   a single item does NOT cause the entire form to re-render and destroy
+    //   focused input elements. ────────────────────────────────────────────
+    @tracked conditions = [];
+    @tracked sort = [];
+
+    @tracked errorMessage = null;
+
+    /**
+     * Track whether the user has manually edited the variable_name field.
+     * While false, variable_name is auto-derived from label on every keystroke.
+     */
+    @tracked _variableNameManuallyEdited = false;
+
+    // -------------------------------------------------------------------------
+    // Lifecycle — sync form state when @query or @isOpen changes
+    // -------------------------------------------------------------------------
+
+    get isEditing() {
+        return !!this.args.query?.uuid;
+    }
+
+    // Glimmer re-evaluates this getter whenever @query or @isOpen changes,
+    // giving us a hook to reset the form without needing did-update modifiers.
+    get _syncKey() {
+        const key = `${this.args.isOpen}-${this.args.query?.uuid ?? 'new'}`;
+        this._syncForm();
+        return key;
+    }
+
+    _syncForm() {
+        const q = this.args.query;
+        if (q) {
+            this.label = q.label ?? '';
+            this.variableName = q.variable_name ?? '';
+            this.description = q.description ?? '';
+            this.modelType = q.model_type ?? '';
+            this.limit = q.limit ?? '';
+            this.withRelations = Array.isArray(q.with) ? [...q.with] : [];
+            this.conditions = JSON.parse(JSON.stringify(q.conditions ?? []));
+            this.sort = JSON.parse(JSON.stringify(q.sort ?? []));
+            this._variableNameManuallyEdited = !!q.variable_name?.trim();
+        } else {
+            this.label = '';
+            this.variableName = '';
+            this.description = '';
+            this.modelType = '';
+            this.limit = '';
+            this.withRelations = [];
+            this.conditions = [];
+            this.sort = [];
+            this._variableNameManuallyEdited = false;
+        }
+        this.errorMessage = null;
+    }
+
+    // -------------------------------------------------------------------------
+    // Resource types
+    // Priority: @resourceTypes arg > service-registered types > built-in defaults
+    // -------------------------------------------------------------------------
+
+    get resourceTypes() {
+        if (this.args.resourceTypes?.length) {
+            return this.args.resourceTypes;
+        }
+        const serviceTypes = this.templateBuilderService?.resourceTypes ?? [];
+        if (serviceTypes.length) {
+            return serviceTypes;
+        }
+        return [
+            { value: 'Fleetbase\\FleetOps\\Models\\Order', label: 'Order', icon: 'box' },
+            { value: 'Fleetbase\\FleetOps\\Models\\Driver', label: 'Driver', icon: 'id-card' },
+            { value: 'Fleetbase\\FleetOps\\Models\\Place', label: 'Place', icon: 'location-dot' },
+            { value: 'Fleetbase\\FleetOps\\Models\\Vendor', label: 'Vendor', icon: 'building' },
+            { value: 'Fleetbase\\FleetOps\\Models\\Contact', label: 'Contact', icon: 'address-book' },
+            { value: 'Fleetbase\\FleetOps\\Models\\Issue', label: 'Issue', icon: 'triangle-exclamation' },
+            { value: 'Fleetbase\\FleetOps\\Models\\Vehicle', label: 'Vehicle', icon: 'truck' },
+            { value: 'Fleetbase\\FleetOps\\Models\\FuelReport', label: 'Fuel Report', icon: 'gas-pump' },
+            { value: 'Fleetbase\\FleetOps\\Models\\PurchaseRate', label: 'Purchase Rate', icon: 'receipt' },
+        ];
+    }
+
+    // -------------------------------------------------------------------------
+    // Condition helpers
+    // -------------------------------------------------------------------------
+
+    /**
+     * Returns true when the condition operator requires a value input.
+     * Operators "null" and "not null" are unary — no value field is needed.
+     * Used in the template to replace the {{#unless (or ...)}} pattern that
+     * violates the simple-unless lint rule.
+     */
+    showConditionValue(operator) {
+        return operator !== 'null' && operator !== 'not null';
+    }
+
+    // -------------------------------------------------------------------------
+    // Condition operators
+    // -------------------------------------------------------------------------
+
+    get conditionOperators() {
+        return [
+            { value: '=', label: '= equals' },
+            { value: '!=', label: '≠ not equals' },
+            { value: '>', label: '> greater than' },
+            { value: '>=', label: '≥ greater or equal' },
+            { value: '<', label: '< less than' },
+            { value: '<=', label: '≤ less or equal' },
+            { value: 'like', label: '~ contains' },
+            { value: 'not like', label: '!~ not contains' },
+            { value: 'in', label: 'in list' },
+            { value: 'not in', label: 'not in list' },
+            { value: 'null', label: 'is null' },
+            { value: 'not null', label: 'is not null' },
+        ];
+    }
+
+    // -------------------------------------------------------------------------
+    // Eager-load (with) — stored as array, edited as comma string
+    // -------------------------------------------------------------------------
+
+    get withString() {
+        return (this.withRelations ?? []).join(', ');
+    }
+
+    @action
+    updateWith(event) {
+        const raw = event.target.value;
+        this.withRelations = raw
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean);
+    }
+
+    // -------------------------------------------------------------------------
+    // Scalar field updates
+    // -------------------------------------------------------------------------
+
+    @action
+    updateLabel(event) {
+        const value = event.target.value;
+        this.label = value;
+        if (!this._variableNameManuallyEdited) {
+            this.variableName = this._deriveVariableName(value);
+        }
+    }
+
+    @action
+    updateVariableName(event) {
+        this._variableNameManuallyEdited = true;
+        this.variableName = event.target.value;
+    }
+
+    @action
+    updateDescription(event) {
+        this.description = event.target.value;
+    }
+
+    @action
+    updateLimit(event) {
+        const raw = event.target.value;
+        this.limit = raw === '' ? '' : parseInt(raw, 10);
+    }
+
+    @action
+    selectResourceType(value) {
+        this.modelType = value;
+    }
+
+    // -------------------------------------------------------------------------
+    // Conditions — mutate in-place then bump the array reference so Glimmer
+    // re-evaluates the {{#each}} without destroying existing DOM nodes.
+    // -------------------------------------------------------------------------
+
+    @action
+    addCondition() {
+        this.conditions = [...this.conditions, { field: '', operator: '=', value: '' }];
+    }
+
+    @action
+    updateConditionField(index, field, event) {
+        const value = event.target.value;
+        // Mutate the specific item in-place — the DOM node for this input stays
+        // alive and keeps focus. Then bump the array reference so Glimmer knows
+        // the list changed (needed for the operator select and value visibility).
+        const item = this.conditions[index];
+        if (item) {
+            Object.assign(item, { [field]: value });
+            this.conditions = [...this.conditions];
+        }
+    }
+
+    @action
+    removeCondition(index) {
+        this.conditions = this.conditions.filter((_, i) => i !== index);
+    }
+
+    // -------------------------------------------------------------------------
+    // Sort — same in-place mutation pattern as conditions
+    // -------------------------------------------------------------------------
+
+    @action
+    addSort() {
+        this.sort = [...this.sort, { field: '', direction: 'asc' }];
+    }
+
+    @action
+    updateSortField(index, field, event) {
+        const value = event.target.value;
+        const item = this.sort[index];
+        if (item) {
+            Object.assign(item, { [field]: value });
+            this.sort = [...this.sort];
+        }
+    }
+
+    @action
+    removeSort(index) {
+        this.sort = this.sort.filter((_, i) => i !== index);
+    }
+
+    // -------------------------------------------------------------------------
+    // Save / Cancel
+    // -------------------------------------------------------------------------
+
+    @action
+    save() {
+        this.errorMessage = null;
+
+        if (!this.label?.trim()) {
+            this.errorMessage = 'Label is required.';
+            return;
+        }
+        if (!this.modelType) {
+            this.errorMessage = 'Please select a resource type.';
+            return;
+        }
+
+        const data = {
+            uuid: this.args.query?.uuid ?? null,
+            label: this.label.trim(),
+            variable_name: this.variableName.trim() || this._deriveVariableName(this.label),
+            description: this.description?.trim() ?? '',
+            model_type: this.modelType,
+            conditions: this.conditions.filter((c) => c.field?.trim()),
+            sort: this.sort.filter((s) => s.field?.trim()),
+            limit: this.limit === '' ? null : this.limit,
+            with: this.withRelations,
+        };
+
+        if (this.args.onSave) {
+            this.args.onSave(data);
+        }
+    }
+
+    @action
+    cancel() {
+        this.errorMessage = null;
+        if (this.args.onClose) {
+            this.args.onClose();
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Private
+    // -------------------------------------------------------------------------
+
+    _deriveVariableName(label) {
+        return (label ?? '')
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '_')
+            .replace(/^_+|_+$/g, '');
+    }
+}