@fleetbase/fleetops-engine 0.6.56 → 0.6.58

package/addon/components/ai/create-order-preview.hbs

@@ -0,0 +1,297 @@
+<div class="fleetbase-ai-response-region fleetbase-ai-create-order-preview" {{did-update this.updatePreview @preview}}>
+    <div class="fleetbase-ai-create-order-preview__header">
+        <div>
+            <div class="fleetbase-ai-action-title">{{this.preview.label}}</div>
+            <div class="fleetbase-ai-action-message">{{this.preview.message}}</div>
+        </div>
+        <span class="fleetbase-ai-action-status">{{if this.isCompleted "Completed" (if this.isCancelled "Cancelled" (if this.preview.ready "Ready" "Needs info"))}}</span>
+    </div>
+
+    {{#if @isApplying}}
+        <div class="fleetbase-ai-create-order-preview__applying">
+            <span class="fleetbase-ai-create-order-preview__magic-loader" aria-hidden="true">
+                <span></span>
+                <span></span>
+                <span></span>
+            </span>
+            <span>Creating Fleet-Ops order...</span>
+        </div>
+    {{else if this.isCompleted}}
+        <div class="fleetbase-ai-create-order-preview__completed">
+            <div class="fleetbase-ai-create-order-preview__completed-icon">
+                <FaIcon @icon="check" />
+            </div>
+            <div class="fleetbase-ai-create-order-preview__completed-copy">
+                <strong>{{this.completedMessage}}</strong>
+                <span>{{this.orderReference}}</span>
+            </div>
+            {{#if this.canOpenOrder}}
+                <Button @size="sm" @icon="arrow-up-right-from-square" @text="Open order" @onClick={{this.openOrder}} />
+            {{/if}}
+        </div>
+    {{else if this.isCancelled}}
+        <div class="fleetbase-ai-create-order-preview__cancelled">
+            <FaIcon @icon="circle-xmark" />
+            <span>{{this.cancelledMessage}}</span>
+        </div>
+    {{else if this.preview.error}}
+        <div class="fleetbase-ai-action-error">{{this.preview.error.message}}</div>
+    {{else}}
+        <Ai::RoutePreviewMap @payload={{this.payload}} @orderId={{this.orderPreviewId}} @status="created" />
+
+        <div class="fleetbase-ai-create-order-preview__fields">
+            <div class="fleetbase-ai-create-order-preview__field-row">
+                <div class="fleetbase-ai-create-order-preview__field-copy">
+                    <span>Order type</span>
+                    {{#if this.isEditingOrderType}}
+                        <ModelSelect
+                            @modelName="order-config"
+                            @selectedModel={{this.draft.order_config_uuid}}
+                            @placeholder="Select order type"
+                            @triggerClass="fleetbase-ai-create-order-preview__inline-select"
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{this.setOrderConfig}}
+                            as |model|
+                        >
+                            {{or model.name model.key}}
+                        </ModelSelect>
+                    {{else}}
+                        <strong>{{this.orderTypeLabel}}</strong>
+                    {{/if}}
+                </div>
+                <Button
+                    @icon={{if this.isEditingOrderType "xmark" "pen"}}
+                    @helpText={{if this.isEditingOrderType "Close editor" "Edit order type"}}
+                    @wrapperClass="fleetbase-ai-create-order-preview__edit-wrapper"
+                    class="fleetbase-ai-create-order-preview__edit-button"
+                    @onClick={{if this.isEditingOrderType this.closeEditor (fn this.editField "orderType")}}
+                />
+            </div>
+
+            <div class="fleetbase-ai-create-order-preview__field-row">
+                <div class="fleetbase-ai-create-order-preview__field-copy">
+                    <span>Schedule</span>
+                    {{#if this.isEditingSchedule}}
+                        <DateTimeInput
+                            class="fleetbase-ai-create-order-preview__inline-datetime"
+                            @value={{this.draft.scheduled_at}}
+                            @minDate={{format-date-fns (now) "yyyy-MM-dd"}}
+                            @minTime={{format-date-fns (now) "HH:mm"}}
+                            @onUpdate={{this.setScheduledAt}}
+                        />
+                    {{else}}
+                        <strong>
+                            {{#if this.draft.scheduled_at}}
+                                {{format-date-fns this.draft.scheduled_at "yyyy-MM-dd HH:mm" fallback=this.scheduledAtLabel}}
+                            {{else}}
+                                {{this.scheduledAtLabel}}
+                            {{/if}}
+                        </strong>
+                    {{/if}}
+                </div>
+                <Button
+                    @icon={{if this.isEditingSchedule "check" "pen"}}
+                    @helpText={{if this.isEditingSchedule "Done" "Edit schedule"}}
+                    @wrapperClass="fleetbase-ai-create-order-preview__edit-wrapper"
+                    class="fleetbase-ai-create-order-preview__edit-button"
+                    @onClick={{if this.isEditingSchedule this.closeEditor (fn this.editField "schedule")}}
+                />
+            </div>
+
+            <div class="fleetbase-ai-create-order-preview__field-row">
+                <div class="fleetbase-ai-create-order-preview__field-copy">
+                    <span>Pickup</span>
+                    {{#if this.isEditingPickup}}
+                        <ModelSelect
+                            @modelName="place"
+                            @selectedModel={{this.payload.pickup}}
+                            @placeholder="Pickup address"
+                            @triggerClass="fleetbase-ai-create-order-preview__inline-select"
+                            @customSearchEndpoint="places/search"
+                            @query={{hash geo=true}}
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.setPayloadPlace "pickup"}}
+                            as |place|
+                        >
+                            <div class="fleetbase-ai-create-order-preview__select-label">{{this.addressLabel place}}</div>
+                        </ModelSelect>
+                    {{else}}
+                        <strong>{{this.pickupLabel}}</strong>
+                    {{/if}}
+                </div>
+                <Button
+                    @icon={{if this.isEditingPickup "xmark" "pen"}}
+                    @helpText={{if this.isEditingPickup "Close editor" "Edit pickup"}}
+                    @wrapperClass="fleetbase-ai-create-order-preview__edit-wrapper"
+                    class="fleetbase-ai-create-order-preview__edit-button"
+                    @onClick={{if this.isEditingPickup this.closeEditor (fn this.editField "pickup")}}
+                />
+            </div>
+
+            <div class="fleetbase-ai-create-order-preview__field-row">
+                <div class="fleetbase-ai-create-order-preview__field-copy">
+                    <span>Dropoff</span>
+                    {{#if this.isEditingDropoff}}
+                        <ModelSelect
+                            @modelName="place"
+                            @selectedModel={{this.payload.dropoff}}
+                            @placeholder="Dropoff address"
+                            @triggerClass="fleetbase-ai-create-order-preview__inline-select"
+                            @customSearchEndpoint="places/search"
+                            @query={{hash geo=true}}
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.setPayloadPlace "dropoff"}}
+                            as |place|
+                        >
+                            <div class="fleetbase-ai-create-order-preview__select-label">{{this.addressLabel place}}</div>
+                        </ModelSelect>
+                    {{else}}
+                        <strong>{{this.dropoffLabel}}</strong>
+                    {{/if}}
+                </div>
+                <Button
+                    @icon={{if this.isEditingDropoff "xmark" "pen"}}
+                    @helpText={{if this.isEditingDropoff "Close editor" "Edit dropoff"}}
+                    @wrapperClass="fleetbase-ai-create-order-preview__edit-wrapper"
+                    class="fleetbase-ai-create-order-preview__edit-button"
+                    @onClick={{if this.isEditingDropoff this.closeEditor (fn this.editField "dropoff")}}
+                />
+            </div>
+
+            <div class="fleetbase-ai-create-order-preview__field-row">
+                <div class="fleetbase-ai-create-order-preview__field-copy">
+                    <span>Driver</span>
+                    {{#if this.isEditingDriver}}
+                        <ModelSelect
+                            @modelName="driver"
+                            @placeholder="Assign driver"
+                            @triggerClass="fleetbase-ai-create-order-preview__inline-select"
+                            @allowClear={{true}}
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{this.setDriver}}
+                            as |driver|
+                        >
+                            {{driver.name}}
+                        </ModelSelect>
+                    {{else}}
+                        <strong>{{this.driverLabel}}</strong>
+                    {{/if}}
+                </div>
+                <Button
+                    @icon={{if this.isEditingDriver "xmark" "pen"}}
+                    @helpText={{if this.isEditingDriver "Close editor" "Edit driver"}}
+                    @wrapperClass="fleetbase-ai-create-order-preview__edit-wrapper"
+                    class="fleetbase-ai-create-order-preview__edit-button"
+                    @onClick={{if this.isEditingDriver this.closeEditor (fn this.editField "driver")}}
+                />
+            </div>
+
+            <div class="fleetbase-ai-create-order-preview__field-row">
+                <div class="fleetbase-ai-create-order-preview__field-copy">
+                    <span>Vehicle</span>
+                    {{#if this.isEditingVehicle}}
+                        <ModelSelect
+                            @modelName="vehicle"
+                            @placeholder="Assign vehicle"
+                            @triggerClass="fleetbase-ai-create-order-preview__inline-select"
+                            @allowClear={{true}}
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{this.setVehicle}}
+                            as |vehicle|
+                        >
+                            {{or vehicle.display_name vehicle.name vehicle.plate_number}}
+                        </ModelSelect>
+                    {{else}}
+                        <strong>{{this.vehicleLabel}}</strong>
+                    {{/if}}
+                </div>
+                <Button
+                    @icon={{if this.isEditingVehicle "xmark" "pen"}}
+                    @helpText={{if this.isEditingVehicle "Close editor" "Edit vehicle"}}
+                    @wrapperClass="fleetbase-ai-create-order-preview__edit-wrapper"
+                    class="fleetbase-ai-create-order-preview__edit-button"
+                    @onClick={{if this.isEditingVehicle this.closeEditor (fn this.editField "vehicle")}}
+                />
+            </div>
+
+            <div class="fleetbase-ai-create-order-preview__field-row fleetbase-ai-create-order-preview__field-row--notes">
+                <div class="fleetbase-ai-create-order-preview__field-copy">
+                    <span>Notes</span>
+                    {{#if this.isEditingNotes}}
+                        <Textarea
+                            @value={{this.draft.notes}}
+                            class="fleetbase-ai-create-order-preview__inline-textarea"
+                            rows={{2}}
+                            placeholder="Add order notes"
+                            {{on "input" this.setNotes}}
+                        />
+                    {{else}}
+                        <strong>{{this.notesLabel}}</strong>
+                    {{/if}}
+                </div>
+                <Button
+                    @icon={{if this.isEditingNotes "check" "pen"}}
+                    @helpText={{if this.isEditingNotes "Done" "Edit notes"}}
+                    @wrapperClass="fleetbase-ai-create-order-preview__edit-wrapper"
+                    class="fleetbase-ai-create-order-preview__edit-button"
+                    @onClick={{if this.isEditingNotes this.closeEditor (fn this.editField "notes")}}
+                />
+            </div>
+        </div>
+
+        <div class="fleetbase-ai-create-order-preview__toggles">
+            <div class="fleetbase-ai-create-order-preview__toggle-row">
+                <Toggle @isToggled={{this.draft.pod_required}} @onToggle={{this.setPodRequired}} @label="Require POD" />
+                {{#if this.draft.pod_required}}
+                    {{#if this.isEditingPodMethod}}
+                        <select class="fleetbase-ai-create-order-preview__inline-native-select" value={{this.draft.pod_method}} {{on "change" this.setPodMethodFromEvent}}>
+                            {{#each this.podMethods as |method|}}
+                                <option value={{method}} selected={{eq method this.draft.pod_method}}>{{this.titleize method}}</option>
+                            {{/each}}
+                        </select>
+                    {{else}}
+                        <button type="button" class="fleetbase-ai-create-order-preview__inline-pill" {{on "click" (fn this.editField "podMethod")}}>
+                            {{this.podMethodLabel}}
+                            <FaIcon @icon="pen" />
+                        </button>
+                    {{/if}}
+                {{/if}}
+            </div>
+            <div class="fleetbase-ai-create-order-preview__toggle-row">
+                <Toggle @isToggled={{this.draft.dispatched}} @onToggle={{this.setDispatched}} @label="Dispatch after create" />
+            </div>
+        </div>
+
+        {{#if this.hasMissingFields}}
+            <div class="fleetbase-ai-action-list">
+                <div class="fleetbase-ai-action-list-title">Required before apply</div>
+                <ul>
+                    {{#each this.missingFields as |field|}}
+                        <li>{{field}}</li>
+                    {{/each}}
+                </ul>
+            </div>
+        {{/if}}
+
+        <div class="fleetbase-ai-create-order-preview__controls">
+            <Button
+                @type="primary"
+                @size="sm"
+                @icon="check"
+                @text="Create order"
+                @disabled={{this.isApplyDisabled}}
+                @isLoading={{@isApplying}}
+                @onClick={{this.apply}}
+            />
+            <Button @size="sm" @icon="xmark" @text="Cancel" @disabled={{@isCancelling}} @onClick={{this.cancel}} />
+            {{#if this.refreshPreview.isRunning}}
+                <span class="fleetbase-ai-create-order-preview__refreshing">Updating preview...</span>
+            {{/if}}
+        </div>
+    {{/if}}
+</div>

package/addon/components/ai/create-order-preview.js

@@ -0,0 +1,362 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, get } from '@ember/object';
+import { task, timeout } from 'ember-concurrency';
+
+export default class AiCreateOrderPreviewComponent extends Component {
+    @service router;
+
+    @tracked draft = this.clone(this.args.preview?.draft ?? {});
+    @tracked preview = this.args.preview;
+    @tracked editingField = null;
+
+    get payload() {
+        return this.draft.payload ?? {};
+    }
+
+    get routeStops() {
+        return this.preview?.route_preview?.stops ?? [];
+    }
+
+    get podMethods() {
+        return this.preview?.options?.pod_methods ?? ['scan', 'signature', 'photo'];
+    }
+
+    get isReady() {
+        return this.preview?.ready === true && !this.isTerminal;
+    }
+
+    get isCompleted() {
+        return Boolean(this.preview?.result);
+    }
+
+    get isTerminal() {
+        return this.isCompleted || this.isCancelled || Boolean(this.preview?.error);
+    }
+
+    get isCancelled() {
+        return this.args.task?.status === 'cancelled' || this.preview?.error?.type === 'cancelled';
+    }
+
+    get cancelledMessage() {
+        return this.preview?.error?.message ?? 'This order creation preview was cancelled.';
+    }
+
+    get completedMessage() {
+        return this.preview?.result?.message ?? 'Fleet-Ops order was created.';
+    }
+
+    get resultResource() {
+        return this.preview?.result?.resource;
+    }
+
+    get orderReference() {
+        return this.resultResource?.id ?? this.resultResource?.uuid ?? 'Created order';
+    }
+
+    get canOpenOrder() {
+        return Boolean(this.resultResource?.route && (this.resultResource?.models?.length || this.resultResource?.uuid || this.resultResource?.id));
+    }
+
+    get missingFields() {
+        return this.preview?.missing_fields ?? [];
+    }
+
+    get hasMissingFields() {
+        return this.missingFields.length > 0;
+    }
+
+    get orderPreviewId() {
+        return this.args.task?.uuid ?? this.args.task?.id ?? this.preview?.key ?? 'ai-order-preview';
+    }
+
+    get orderTypeLabel() {
+        return this.titleize(this.draft.type ?? this.draft.order_config_name ?? this.draft.order_config_uuid) ?? 'Select order type';
+    }
+
+    get scheduledAtLabel() {
+        const scheduledAt = this.draft.scheduled_at;
+
+        if (!scheduledAt) {
+            return 'Add schedule';
+        }
+
+        return String(scheduledAt);
+    }
+
+    get pickupLabel() {
+        return this.addressLabel(this.payload.pickup) ?? this.payload.pickup_query ?? 'Add pickup';
+    }
+
+    get dropoffLabel() {
+        return this.addressLabel(this.payload.dropoff) ?? this.payload.dropoff_query ?? 'Add dropoff';
+    }
+
+    get driverLabel() {
+        return this.draft.driver_query ?? this.draft.driver_name ?? 'Assign driver';
+    }
+
+    get vehicleLabel() {
+        return this.draft.vehicle_query ?? this.draft.vehicle_name ?? 'Assign vehicle';
+    }
+
+    get notesLabel() {
+        return this.draft.notes?.trim?.() || 'Add order notes';
+    }
+
+    get podMethodLabel() {
+        return this.titleize(this.draft.pod_method ?? 'scan');
+    }
+
+    get isEditingOrderType() {
+        return this.editingField === 'orderType';
+    }
+
+    get isEditingSchedule() {
+        return this.editingField === 'schedule';
+    }
+
+    get isEditingPickup() {
+        return this.editingField === 'pickup';
+    }
+
+    get isEditingDropoff() {
+        return this.editingField === 'dropoff';
+    }
+
+    get isEditingDriver() {
+        return this.editingField === 'driver';
+    }
+
+    get isEditingVehicle() {
+        return this.editingField === 'vehicle';
+    }
+
+    get isEditingPodMethod() {
+        return this.editingField === 'podMethod';
+    }
+
+    get isEditingNotes() {
+        return this.editingField === 'notes';
+    }
+
+    get isApplyDisabled() {
+        return !this.isReady || this.args.isApplying || this.refreshPreview.isRunning;
+    }
+
+    addressLabel(place) {
+        if (!place) {
+            return null;
+        }
+
+        const values = [place.address, place.street1, place.name, place.query, place.city, place.postal_code, place.country]
+            .map((value) => (value === null || value === undefined ? null : String(value).trim()))
+            .filter((value) => value && !['undefined', 'null'].includes(value.toLowerCase()));
+
+        return [...new Set(values)].slice(0, 3).join(' - ');
+    }
+
+    clone(value) {
+        return JSON.parse(JSON.stringify(value ?? {}));
+    }
+
+    modelValue(model, key) {
+        if (!model) {
+            return null;
+        }
+
+        if (typeof model.get === 'function') {
+            return model.get(key);
+        }
+
+        return get(model, key) ?? model[key];
+    }
+
+    serializeModel(model, fallback = {}) {
+        if (!model) {
+            return null;
+        }
+
+        if (typeof model.toJSON === 'function') {
+            return {
+                ...model.toJSON(),
+                id: this.modelValue(model, 'id'),
+                uuid: this.modelValue(model, 'uuid') ?? this.modelValue(model, 'id'),
+                public_id: this.modelValue(model, 'public_id'),
+                name: this.modelValue(model, 'name'),
+                address: this.addressLabel(model) ?? this.modelValue(model, 'address'),
+                street1: this.modelValue(model, 'street1'),
+                city: this.modelValue(model, 'city'),
+                postal_code: this.modelValue(model, 'postal_code'),
+                country: this.modelValue(model, 'country'),
+                latitude: this.modelValue(model, 'latitude'),
+                longitude: this.modelValue(model, 'longitude'),
+                ...fallback,
+            };
+        }
+
+        return { ...model, ...fallback };
+    }
+
+    titleize(value) {
+        if (!value) {
+            return null;
+        }
+
+        return String(value)
+            .replace(/[_-]+/g, ' ')
+            .replace(/\s+/g, ' ')
+            .trim()
+            .replace(/\b\w/g, (char) => char.toUpperCase());
+    }
+
+    updateDraft(updates = {}) {
+        this.draft = {
+            ...this.draft,
+            ...updates,
+            payload: {
+                ...(this.draft.payload ?? {}),
+                ...(updates.payload ?? {}),
+            },
+        };
+    }
+
+    updateRouteDraft(updates = {}) {
+        this.updateDraft(updates);
+        this.refreshPreview.perform();
+    }
+
+    @action editField(field) {
+        if (this.isTerminal) {
+            return;
+        }
+
+        this.editingField = field;
+    }
+
+    @action closeEditor() {
+        this.editingField = null;
+    }
+
+    @task *refreshPreview() {
+        yield timeout(180);
+        const refreshed = yield this.args.onRefresh?.(this.args.task, this.preview, { draft: this.draft });
+        if (refreshed) {
+            this.preview = {
+                ...this.preview,
+                ...refreshed,
+                draft: this.draft,
+            };
+        }
+    }
+
+    @action setPayloadPlace(role, place) {
+        const serialized = this.serializeModel(place);
+        const payload = { ...(this.draft.payload ?? {}) };
+
+        payload[role] = serialized;
+        payload[`${role}_query`] = this.addressLabel(serialized) ?? serialized?.address ?? serialized?.name ?? null;
+
+        if (serialized?.uuid) {
+            payload[`${role}_uuid`] = serialized.uuid;
+        } else {
+            delete payload[`${role}_uuid`];
+        }
+
+        this.updateRouteDraft({ payload });
+        this.closeEditor();
+    }
+
+    @action setOrderConfig(orderConfig) {
+        this.updateDraft({
+            order_config_uuid: this.modelValue(orderConfig, 'uuid') ?? this.modelValue(orderConfig, 'id'),
+            order_config_name: this.modelValue(orderConfig, 'name'),
+            type: this.modelValue(orderConfig, 'key'),
+        });
+        this.closeEditor();
+    }
+
+    @action setScheduledAt(value) {
+        this.updateDraft({ scheduled_at: value });
+    }
+
+    @action setDriver(driver) {
+        this.updateDraft({
+            driver: this.modelValue(driver, 'uuid') ?? this.modelValue(driver, 'id'),
+            driver_query: this.modelValue(driver, 'name') ?? this.modelValue(driver, 'public_id'),
+        });
+        this.closeEditor();
+    }
+
+    @action setVehicle(vehicle) {
+        this.updateDraft({
+            vehicle_assigned_uuid: this.modelValue(vehicle, 'uuid') ?? this.modelValue(vehicle, 'id'),
+            vehicle_query: this.modelValue(vehicle, 'display_name') ?? this.modelValue(vehicle, 'name') ?? this.modelValue(vehicle, 'plate_number'),
+        });
+        this.closeEditor();
+    }
+
+    @action setPodRequired(value) {
+        this.updateDraft({
+            pod_required: value,
+            pod_method: value ? (this.draft.pod_method ?? 'scan') : null,
+        });
+    }
+
+    @action setPodMethod(value) {
+        this.updateDraft({ pod_method: value });
+        this.closeEditor();
+    }
+
+    @action setPodMethodFromEvent(event) {
+        this.setPodMethod(event.target.value);
+    }
+
+    @action setDispatched(value) {
+        this.updateDraft({ dispatched: value });
+    }
+
+    @action setNotes(valueOrEvent) {
+        const value = valueOrEvent?.target ? valueOrEvent.target.value : valueOrEvent;
+
+        this.updateDraft({ notes: value });
+    }
+
+    @action apply() {
+        if (this.isTerminal) {
+            return;
+        }
+
+        return this.args.onApply?.(this.args.task, this.preview, { draft: this.draft });
+    }
+
+    @action cancel() {
+        if (this.isTerminal) {
+            return;
+        }
+
+        return this.args.onCancel?.(this.args.task);
+    }
+
+    @action openOrder() {
+        if (!this.canOpenOrder) {
+            return;
+        }
+
+        const models = this.resultResource.models?.length ? this.resultResource.models : [this.resultResource.uuid ?? this.resultResource.id].filter(Boolean);
+
+        try {
+            this.router.transitionTo(this.resultResource.route, ...models);
+        } catch {
+            this.router.transitionTo('operations.orders.index.details', ...models);
+        }
+    }
+
+    @action updatePreview(preview) {
+        this.preview = preview;
+        if (preview?.draft && !this.editingField) {
+            this.draft = this.clone(preview.draft);
+        }
+    }
+}