@fleetbase/ember-ui 0.3.23 → 0.3.24

package/addon/components/template-builder/properties-panel.js

@@ -0,0 +1,413 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+/**
+ * TemplateBuilderPropertiesPanelComponent
+ *
+ * Right-side panel that shows and edits all properties of the currently
+ * selected element. Sections are collapsed/expanded. When no element is
+ * selected, shows template-level canvas settings.
+ *
+ * @argument {Object}   selectedElement  - Currently selected element (or null)
+ * @argument {Object}   template         - The template object (for canvas settings)
+ * @argument {Array}    contextSchemas   - Variable schemas from the API
+ * @argument {Function} onUpdateElement  - Called with (uuid, changes)
+ * @argument {Function} onUpdateTemplate - Called with changes to the template itself
+ * @argument {Function} onOpenVariablePicker - Called to open the variable picker modal
+ */
+export default class TemplateBuilderPropertiesPanelComponent extends Component {
+    @service fetch;
+    @service notifications;
+
+    @tracked openSections = new Set(['position', 'size', 'style', 'text', 'content']);
+
+    /** @type {Boolean} Whether an image upload is in progress */
+    @tracked isUploadingImage = false;
+
+    /** @type {String|null} Filename of the most recently uploaded image */
+    @tracked uploadedImageFilename = null;
+
+    get hasSelection() {
+        return !!this.args.selectedElement;
+    }
+
+    get element() {
+        return this.args.selectedElement;
+    }
+
+    get elementType() {
+        return this.element?.type ?? null;
+    }
+
+    get isText() {
+        return this.elementType === 'text';
+    }
+    get isImage() {
+        return this.elementType === 'image';
+    }
+    get isTable() {
+        return this.elementType === 'table';
+    }
+    get isLine() {
+        return this.elementType === 'line';
+    }
+    get isShape() {
+        return this.elementType === 'shape';
+    }
+    get isQrCode() {
+        return this.elementType === 'qr_code';
+    }
+    get isBarcode() {
+        return this.elementType === 'barcode';
+    }
+    get hasTextContent() {
+        return this.isText;
+    }
+    get hasBorderOptions() {
+        return !this.isLine;
+    }
+
+    @action
+    isSectionOpen(section) {
+        return this.openSections.has(section);
+    }
+
+    @action
+    toggleSection(section) {
+        const next = new Set(this.openSections);
+        if (next.has(section)) {
+            next.delete(section);
+        } else {
+            next.add(section);
+        }
+        this.openSections = next;
+    }
+
+    @action
+    updateProp(prop, event) {
+        const value = event?.target ? event.target.value : event;
+        if (this.args.onUpdateElement && this.element) {
+            this.args.onUpdateElement(this.element.uuid, { [prop]: value });
+        }
+    }
+
+    @action
+    updateNumericProp(prop, event) {
+        const raw = event?.target ? event.target.value : event;
+        const value = raw === '' ? null : parseFloat(raw);
+        if (this.args.onUpdateElement && this.element) {
+            this.args.onUpdateElement(this.element.uuid, { [prop]: value });
+        }
+    }
+
+    @action
+    updateTemplateProp(prop, event) {
+        const value = event?.target ? event.target.value : event;
+        if (this.args.onUpdateTemplate) {
+            this.args.onUpdateTemplate({ [prop]: value });
+        }
+    }
+
+    @action
+    openVariablePicker(targetProp) {
+        if (this.args.onOpenVariablePicker) {
+            this.args.onOpenVariablePicker(targetProp, (variable) => {
+                if (this.args.onUpdateElement && this.element) {
+                    const current = this.element[targetProp] ?? '';
+                    this.args.onUpdateElement(this.element.uuid, { [targetProp]: current + variable });
+                }
+            });
+        }
+    }
+
+    get fontWeightOptions() {
+        return [
+            { value: '300', label: 'Light' },
+            { value: '400', label: 'Regular' },
+            { value: '500', label: 'Medium' },
+            { value: '600', label: 'Semi Bold' },
+            { value: '700', label: 'Bold' },
+            { value: '800', label: 'Extra Bold' },
+            { value: '900', label: 'Black' },
+        ];
+    }
+
+    get fontFamilyOptions() {
+        return [
+            { value: 'Inter, sans-serif', label: 'Inter' },
+            { value: 'Arial, sans-serif', label: 'Arial' },
+            { value: 'Helvetica, sans-serif', label: 'Helvetica' },
+            { value: 'Georgia, serif', label: 'Georgia' },
+            { value: 'Times New Roman, serif', label: 'Times New Roman' },
+            { value: 'Courier New, monospace', label: 'Courier New' },
+            { value: 'Roboto, sans-serif', label: 'Roboto' },
+            { value: 'Open Sans, sans-serif', label: 'Open Sans' },
+        ];
+    }
+
+    get textAlignOptions() {
+        return [
+            { value: 'left', icon: 'align-left' },
+            { value: 'center', icon: 'align-center' },
+            { value: 'right', icon: 'align-right' },
+            { value: 'justify', icon: 'align-justify' },
+        ];
+    }
+
+    get lineStyleOptions() {
+        return [
+            { value: 'solid', label: 'Solid' },
+            { value: 'dashed', label: 'Dashed' },
+            { value: 'dotted', label: 'Dotted' },
+        ];
+    }
+
+    get objectFitOptions() {
+        return [
+            { value: 'cover', label: 'Cover' },
+            { value: 'contain', label: 'Contain' },
+            { value: 'fill', label: 'Fill' },
+            { value: 'none', label: 'None' },
+        ];
+    }
+
+    // -------------------------------------------------------------------------
+    // Table helpers
+    // -------------------------------------------------------------------------
+
+    get tableColumns() {
+        return this.element?.columns ?? [];
+    }
+
+    get tableRows() {
+        return this.element?.rows ?? [];
+    }
+
+    /**
+     * The current data mode for the table: 'variable', 'query', or 'manual'.
+     * Stored explicitly as `data_source_mode` on the element so the mode is
+     * independent of whether the variable/query fields have been filled in yet.
+     * Defaults to 'manual' for new elements.
+     */
+    get tableDataMode() {
+        return this.element?.data_source_mode ?? 'manual';
+    }
+
+    @action
+    setTableDataMode(mode) {
+        if (!this.args.onUpdateElement || !this.element) return;
+        const changes = { data_source_mode: mode };
+        if (mode === 'manual') {
+            // Clear variable/query fields when switching to manual
+            changes.data_source = null;
+            changes.query_endpoint = null;
+            changes.query_params = [];
+            changes.query_response_path = null;
+        } else if (mode === 'variable') {
+            // Clear query fields when switching to variable
+            changes.query_endpoint = null;
+            changes.query_params = [];
+            changes.query_response_path = null;
+        } else if (mode === 'query') {
+            // Clear variable field when switching to query
+            changes.data_source = null;
+            // Seed empty query_params array if not already present
+            if (!this.element.query_params) {
+                changes.query_params = [];
+            }
+        }
+        this.args.onUpdateElement(this.element.uuid, changes);
+    }
+
+    // ── Query data source helpers ────────────────────────────────────────────
+
+    get queryParams() {
+        return this.element?.query_params ?? [];
+    }
+
+    @action
+    addQueryParam() {
+        if (!this.args.onUpdateElement || !this.element) return;
+        const params = [...this.queryParams, { key: '', value: '' }];
+        this.args.onUpdateElement(this.element.uuid, { query_params: params });
+    }
+
+    @action
+    removeQueryParam(index) {
+        if (!this.args.onUpdateElement || !this.element) return;
+        const params = this.queryParams.filter((_, i) => i !== index);
+        this.args.onUpdateElement(this.element.uuid, { query_params: params });
+    }
+
+    @action
+    updateQueryParamKey(index, event) {
+        if (!this.args.onUpdateElement || !this.element) return;
+        const params = this.queryParams.map((p, i) => (i === index ? { ...p, key: event.target.value } : p));
+        this.args.onUpdateElement(this.element.uuid, { query_params: params });
+    }
+
+    @action
+    updateQueryParamValue(index, event) {
+        if (!this.args.onUpdateElement || !this.element) return;
+        const params = this.queryParams.map((p, i) => (i === index ? { ...p, value: event.target.value } : p));
+        this.args.onUpdateElement(this.element.uuid, { query_params: params });
+    }
+
+    @action
+    addColumn() {
+        if (!this.args.onUpdateElement || !this.element) return;
+        const columns = [...this.tableColumns, { label: '', key: '' }];
+        this.args.onUpdateElement(this.element.uuid, { columns });
+    }
+
+    @action
+    removeColumn(index) {
+        if (!this.args.onUpdateElement || !this.element) return;
+        const columns = this.tableColumns.filter((_, i) => i !== index);
+        // Also remove the corresponding key from all rows
+        const removedKey = this.tableColumns[index]?.key;
+        const rows = removedKey
+            ? this.tableRows.map((row) => {
+                  const next = Object.assign({}, row);
+                  delete next[removedKey];
+                  return next;
+              })
+            : this.tableRows;
+        this.args.onUpdateElement(this.element.uuid, { columns, rows });
+    }
+
+    @action
+    updateColumnLabel(index, event) {
+        if (!this.args.onUpdateElement || !this.element) return;
+        const columns = this.tableColumns.map((col, i) => (i === index ? { ...col, label: event.target.value } : col));
+        this.args.onUpdateElement(this.element.uuid, { columns });
+    }
+
+    @action
+    updateColumnKey(index, event) {
+        if (!this.args.onUpdateElement || !this.element) return;
+        const oldKey = this.tableColumns[index]?.key;
+        const newKey = event.target.value;
+        const columns = this.tableColumns.map((col, i) => (i === index ? { ...col, key: newKey } : col));
+        // Rename the key in all existing rows
+        const rows = this.tableRows.map((row) => {
+            const next = Object.assign({}, row);
+            if (oldKey && oldKey !== newKey) {
+                next[newKey] = next[oldKey] ?? '';
+                delete next[oldKey];
+            }
+            return next;
+        });
+        this.args.onUpdateElement(this.element.uuid, { columns, rows });
+    }
+
+    @action
+    addRow() {
+        if (!this.args.onUpdateElement || !this.element) return;
+        // Build an empty row with a key for each defined column
+        const emptyRow = {};
+        this.tableColumns.forEach((col) => {
+            if (col.key) emptyRow[col.key] = '';
+        });
+        const rows = [...this.tableRows, emptyRow];
+        this.args.onUpdateElement(this.element.uuid, { rows });
+    }
+
+    @action
+    removeRow(index) {
+        if (!this.args.onUpdateElement || !this.element) return;
+        const rows = this.tableRows.filter((_, i) => i !== index);
+        this.args.onUpdateElement(this.element.uuid, { rows });
+    }
+
+    @action
+    updateRowCell(rowIndex, key, event) {
+        if (!this.args.onUpdateElement || !this.element) return;
+        const rows = this.tableRows.map((row, i) => (i === rowIndex ? { ...row, [key]: event.target.value } : row));
+        this.args.onUpdateElement(this.element.uuid, { rows });
+    }
+
+    // -------------------------------------------------------------------------
+    // Image helpers
+    // -------------------------------------------------------------------------
+
+    get imageIsVariable() {
+        const src = this.element?.src ?? '';
+        return src.length > 0 && src.includes('{');
+    }
+
+    /**
+     * True when the image src is a URL (uploaded file) rather than a variable token.
+     */
+    get imageIsUploaded() {
+        const src = this.element?.src ?? '';
+        return src.length > 0 && !src.includes('{');
+    }
+
+    @action
+    async onImageFileAdded(file) {
+        // Guard against duplicate calls (ember-file-upload can fire twice)
+        if (['queued', 'failed', 'timed_out', 'aborted'].indexOf(file.state) === -1) return;
+
+        this.isUploadingImage = true;
+        this.uploadedImageFilename = file.name;
+
+        try {
+            await this.fetch.uploadFile.perform(
+                file,
+                {
+                    path: 'uploads/template-builder/images',
+                    type: 'template_image',
+                },
+                (uploadedFile) => {
+                    this.isUploadingImage = false;
+                    // Store the URL on the element but keep the filename visible in the UI
+                    if (this.args.onUpdateElement && this.element) {
+                        this.args.onUpdateElement(this.element.uuid, { src: uploadedFile.url });
+                    }
+                }
+            );
+        } catch (err) {
+            this.isUploadingImage = false;
+            this.uploadedImageFilename = null;
+            if (this.notifications) {
+                this.notifications.error(`Image upload failed: ${err.message}`);
+            }
+        }
+    }
+
+    @action
+    clearImageSrc() {
+        this.uploadedImageFilename = null;
+        if (this.args.onUpdateElement && this.element) {
+            this.args.onUpdateElement(this.element.uuid, { src: '' });
+        }
+    }
+
+    get shapeOptions() {
+        return [
+            { value: 'rectangle', label: 'Rectangle' },
+            { value: 'circle', label: 'Circle' },
+        ];
+    }
+
+    get paperSizeOptions() {
+        return [
+            { value: 'A4', label: 'A4 (210 × 297 mm)' },
+            { value: 'A3', label: 'A3 (297 × 420 mm)' },
+            { value: 'A5', label: 'A5 (148 × 210 mm)' },
+            { value: 'Letter', label: 'Letter (216 × 279 mm)' },
+            { value: 'Legal', label: 'Legal (216 × 356 mm)' },
+            { value: 'custom', label: 'Custom' },
+        ];
+    }
+
+    get orientationOptions() {
+        return [
+            { value: 'portrait', label: 'Portrait' },
+            { value: 'landscape', label: 'Landscape' },
+        ];
+    }
+}

package/addon/components/template-builder/queries-panel.hbs

@@ -0,0 +1,84 @@
+{{! Template Builder Queries Panel }}
+<div class="tb-queries-panel flex flex-col h-full" ...attributes>
+
+    {{! Header }}
+    <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Queries</span>
+        <button
+            type="button"
+            class="flex items-center space-x-1 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+            title="Add query"
+            {{on "click" this.openAddForm}}
+        >
+            <FaIcon @icon="plus" class="w-3 h-3" />
+            <span>Add</span>
+        </button>
+    </div>
+
+    {{! Query list }}
+    <div class="flex-1 overflow-y-auto">
+
+        {{#if this.queries.length}}
+            {{#each this.queries as |query|}}
+                <div
+                    class="tb-query-row group flex items-start px-3 py-2 border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+                >
+                    {{! Icon + text }}
+                    <div class="flex-1 min-w-0 mr-2">
+                        <div class="flex items-center space-x-1.5">
+                            <FaIcon @icon="database" class="w-3 h-3 text-indigo-500 flex-shrink-0" />
+                            <span class="text-xs font-medium text-gray-700 dark:text-gray-300 truncate">{{query.label}}</span>
+                        </div>
+                        <div class="flex items-center space-x-1.5 mt-0.5">
+                            <span class="font-mono text-xs text-indigo-600 dark:text-indigo-400 truncate">&#123;{{query.variable_name}}&#125;</span>
+                            {{#if query.model_type}}
+                                <span class="text-xs text-gray-400 dark:text-gray-500 truncate">{{query.model_type}}</span>
+                            {{/if}}
+                            {{! Show "unsaved" badge for queries created before the template was saved }}
+                            {{#if (string-starts-with query.uuid "_new_")}}
+                                <span class="flex-shrink-0 px-1 py-0 rounded text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">unsaved</span>
+                            {{/if}}
+                        </div>
+                    </div>
+
+                    {{! Action buttons (shown on hover) }}
+                    <div class="flex items-center space-x-0.5 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
+                        <button
+                            type="button"
+                            class="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                            title="Edit query"
+                            {{on "click" (fn this.openEditForm query)}}
+                        >
+                            <FaIcon @icon="pen" class="w-3 h-3" />
+                        </button>
+                        <button
+                            type="button"
+                            class="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-gray-400 hover:text-red-500 dark:hover:text-red-400"
+                            title="Delete query"
+                            {{on "click" (fn this.deleteQuery query)}}
+                        >
+                            <FaIcon @icon="trash" class="w-3 h-3" />
+                        </button>
+                    </div>
+                </div>
+            {{/each}}
+
+        {{else}}
+            <div class="flex flex-col items-center justify-center py-8 px-4 text-center">
+                <FaIcon @icon="database" class="w-6 h-6 text-gray-300 dark:text-gray-600 mb-2" />
+                <p class="text-xs text-gray-400 dark:text-gray-500">No queries yet.</p>
+                <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">Queries load data from Fleetbase models at render time and are saved with the template.</p>
+            </div>
+        {{/if}}
+
+    </div>
+
+    {{! Query Form Modal }}
+    <TemplateBuilder::QueryForm
+        @isOpen={{this.isFormOpen}}
+        @query={{this.editingQuery}}
+        @onSave={{this.handleQuerySave}}
+        @onClose={{this.closeForm}}
+    />
+
+</div>

package/addon/components/template-builder/queries-panel.js

@@ -0,0 +1,88 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+/**
+ * TemplateBuilderQueriesPanelComponent
+ *
+ * Lists the TemplateQuery records for the current template and provides
+ * add / edit / delete operations. All mutations are propagated upward via
+ * @onQueriesChange — no API calls are made here. The parent (template-builder)
+ * includes the full queries array in the template save payload, so everything
+ * persists in one request when the user clicks Save.
+ *
+ * @argument {Array}    queries          - Current list of query objects (from parent state)
+ * @argument {Function} onQueriesChange  - Called with the updated queries array after any mutation
+ */
+export default class TemplateBuilderQueriesPanelComponent extends Component {
+    @tracked isFormOpen = false;
+    @tracked editingQuery = null;
+
+    // -------------------------------------------------------------------------
+    // Computed
+    // -------------------------------------------------------------------------
+
+    get queries() {
+        return this.args.queries ?? [];
+    }
+
+    // -------------------------------------------------------------------------
+    // Form open/close
+    // -------------------------------------------------------------------------
+
+    @action
+    openAddForm() {
+        this.editingQuery = null;
+        this.isFormOpen = true;
+    }
+
+    @action
+    openEditForm(query) {
+        this.editingQuery = query;
+        this.isFormOpen = true;
+    }
+
+    @action
+    closeForm() {
+        this.isFormOpen = false;
+        this.editingQuery = null;
+    }
+
+    // -------------------------------------------------------------------------
+    // CRUD — all mutations notify the parent via @onQueriesChange
+    // -------------------------------------------------------------------------
+
+    @action
+    handleQuerySave(queryData) {
+        let updated;
+
+        if (queryData.uuid) {
+            // Update existing query in the list
+            updated = this.queries.map((q) => (q.uuid === queryData.uuid ? { ...q, ...queryData } : q));
+        } else {
+            // New query — assign a temporary client-side UUID so it can be
+            // identified for edits/deletes before the template is saved.
+            const tempUuid = `_new_${Date.now()}`;
+            updated = [...this.queries, { ...queryData, uuid: tempUuid }];
+        }
+
+        this._notify(updated);
+        this.closeForm();
+    }
+
+    @action
+    deleteQuery(query) {
+        const updated = this.queries.filter((q) => q.uuid !== query.uuid);
+        this._notify(updated);
+    }
+
+    // -------------------------------------------------------------------------
+    // Private
+    // -------------------------------------------------------------------------
+
+    _notify(queries) {
+        if (this.args.onQueriesChange) {
+            this.args.onQueriesChange(queries);
+        }
+    }
+}