@fleetbase/fleetops-engine 0.3.1 → 0.3.3

package/addon/components/place-form-panel.js

@@ -0,0 +1,134 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+
+export default class PlaceFormPanelComponent extends Component {
+    /**
+     * @service store
+     */
+    @service store;
+
+    /**
+     * @service fetch
+     */
+    @service fetch;
+
+    /**
+     * @service notifications
+     */
+    @service notifications;
+
+    /**
+     * @service hostRouter
+     */
+    @service hostRouter;
+
+    /**
+     * @service loader
+     */
+    @service loader;
+
+    /**
+     * @service contextPanel
+     */
+    @service contextPanel;
+
+    /**
+     * Overlay context.
+     * @type {any}
+     */
+    @tracked context;
+
+    /**
+     * Indicates whether the component is in a loading state.
+     * @type {boolean}
+     */
+    @tracked isLoading = false;
+
+    /**
+     * All possible place types
+     *
+     * @var {String}
+     */
+    @tracked placeTypes = ['place', 'customer'];
+
+    /**
+     * Constructs the component and applies initial state.
+     */
+    constructor() {
+        super(...arguments);
+        this.place = this.args.place;
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Saves the place changes.
+     *
+     * @action
+     * @returns {Promise<any>}
+     */
+    @action save() {
+        const { place } = this;
+
+        this.loader.showLoader('.next-content-overlay-panel-container', { loadingMessage: 'Saving place...', preserveTargetPosition: true });
+        this.isLoading = true;
+
+        contextComponentCallback(this, 'onBeforeSave', place);
+
+        try {
+            return place
+                .save()
+                .then((place) => {
+                    this.notifications.success(`place (${place.address}) saved successfully.`);
+                    contextComponentCallback(this, 'onAfterSave', place);
+                })
+                .catch((error) => {
+                    this.notifications.serverError(error);
+                })
+                .finally(() => {
+                    this.loader.removeLoader('.next-content-overlay-panel-container ');
+                    this.isLoading = false;
+                });
+        } catch (error) {
+            this.loader.removeLoader('.next-content-overlay-panel-container ');
+            this.isLoading = false;
+        }
+    }
+
+    /**
+     * View the details of the place.
+     *
+     * @action
+     */
+    @action onViewDetails() {
+        const isActionOverrided = contextComponentCallback(this, 'onViewDetails', this.place);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.place, 'viewing');
+        }
+    }
+
+    /**
+     * Handles cancel button press.
+     *
+     * @action
+     * @returns {any}
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.place);
+    }
+}

package/addon/components/place-panel/details.hbs

@@ -0,0 +1,95 @@
+<div class="p-4 space-y-4">
+    <ContentPanel @title="Map" @open={{false}}>
+        <LeafletMap class="w-full h-48 rounded-b-md shadow-md" @lat={{@place.latitude}} @lng={{@place.longitude}} @zoom={{17}} @zoomControl={{false}} as |layers|>
+            <layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
+            <layers.marker @id={{@place.id}} @icon={{icon iconUrl="/engines-dist/images/building-marker.png" iconSize=(array 16 16)}} @location={{point-to-coordinates @place.location}} @riseOnHover={{true}} @title={{@place.address}} @alt={{@place.address}} as |marker|>
+                <marker.popup>
+                    <div>{{@place.address}}</div>
+                    <div>{{format-point @place.location}}</div>
+                </marker.popup>
+                <marker.tooltip @permanent={{false}} @sticky={{true}} @direction="bottom">{{@place.name}}</marker.tooltip>
+            </layers.marker>
+        </LeafletMap>
+    </ContentPanel>
+    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 text-xs dark:text-gray-100">
+            <div class="field-info-container col-span-3">
+                <div class="field-name">Name</div>
+                <div class="field-value">{{n-a @place.name}}</div>
+            </div>
+
+            <div class="field-info-container col-span-3">
+                <div class="field-name">Street</div>
+                <div class="field-value">{{n-a @place.street1}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Neighborhood</div>
+                <div class="field-value">{{n-a @place.neighborhood}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Building</div>
+                <div class="field-value">{{n-a @place.building}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Security Access Code</div>
+                <div class="field-value">{{n-a @place.security_access_code}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">City</div>
+                <div class="field-value">{{n-a @place.city}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">State</div>
+                <div class="field-value">{{n-a @place.province}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Country</div>
+                <div class="field-value">
+                    <CountryName @country={{@place.country}} @showFlag={{true}} />
+                </div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Phone</div>
+                <div class="field-value">{{n-a @place.phone}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Email</div>
+                <div class="field-value">{{n-a @place.email}}</div>
+            </div>
+
+            <div class="field-info-container">
+                <div class="field-name">Vendor</div>
+                <div class="field-value">
+                    {{#if @place.vendor_uuid}}
+                        <a href="javascript:;" {{on "click" @place.viewVendor}}>
+                            {{@place.vendor_name}}
+                        </a>
+                    {{else}}
+                        {{@place.vendor_name}}
+                    {{/if}}
+                </div>
+            </div>
+
+            <div class="field-info-container col-span-3">
+                <div class="field-name">
+                    Coordinates
+                    {{!-- <a href="javascript:;" class="block ml-3" {{on "click" @place.viewPlaceOnMap}}>
+                                <FaIcon @icon="map" class="mr-1" />
+                                View on map
+                            </a> --}}
+                </div>
+                <div class="field-value">
+                    {{point-coordinates @place.location}}
+                </div>
+            </div>
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/place-panel.hbs

@@ -0,0 +1,30 @@
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizable={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
+    <Overlay::Header @title={{this.place.name}} @status={{this.place.public_id}} @hideStatusDot={{true}} @createdAt={{this.place.createdAt}}>
+        <Button @type="default" @icon="pen" @helpText="Edit place" @onClick={{this.onEdit}} @wrapperClass="mr-2" />
+        <Button @type="default" @icon="times" @helpText={{if this.place.id "Cancel edit place" "Cancel new place"}} @onClick={{this.onPressCancel}} />
+    </Overlay::Header>
+    <Overlay::Body class="no-padding" @increaseInnerBodyHeightBy={{1000}}>
+        <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
+            <div class="ui-tabs mt-4">
+                <nav>
+                    {{#each this.tabs as |tab|}}
+                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active'}}" {{on "click" (fn this.onTabChanged tab.slug)}}>
+                            <FaIcon @icon={{tab.icon}} class="mr-1" />
+                            <span>{{tab.title}}</span>
+                        </a>
+                    {{/each}}
+                </nav>
+            </div>
+        </div>
+        <div class="tab-content tab-{{this.tab.slug}}">
+            {{component this.tab.component place=this.place tabOptions=this.tab options=this.tab.componentParams}}
+        </div>
+    </Overlay::Body>
+</Overlay>

package/addon/components/place-panel.js

@@ -0,0 +1,161 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import PlacePanelDetailComponent from './place-panel/details';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
+
+export default class PlacePanelComponent extends Component {
+    /**
+     * Service for fetching data.
+     *
+     * @type {Service}
+     */
+    @service fetch;
+
+    /**
+     * Service for managing modals.
+     *
+     * @type {Service}
+     */
+    @service modalsManager;
+
+    /**
+     * Universe service for managing global data and settings.
+     *
+     * @type {Service}
+     */
+    @service universe;
+
+    /**
+     * Ember data store service.
+     *
+     * @type {Service}
+     */
+    @service store;
+
+    /**
+     * Service for managing routing within the host app.
+     *
+     * @type {Service}
+     */
+    @service hostRouter;
+
+    /**
+     * Service for managing the context panel.
+     *
+     * @type {Service}
+     */
+    @service contextPanel;
+
+    /**
+     * The current active tab.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked tab;
+
+    /**
+     * The place being displayed or edited.
+     *
+     * @type {placeModel}
+     * @tracked
+     */
+    @tracked place;
+
+    /**
+     * Returns the array of tabs available for the panel.
+     *
+     * @type {Array}
+     */
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:place-panel');
+        // this.universe._createMenuItem('Tracking', null, { icon: 'satellite-dish', component: placePanelTrackingComponent }),
+        const defaultTabs = [this.universe._createMenuItem('Details', null, { icon: 'circle-info', component: PlacePanelDetailComponent })];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+
+    /**
+     * Initializes the place panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.place = this.args.place;
+        this.tab = this.getTabUsingSlug(this.args.tab);
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Handles changing the active tab.
+     *
+     * @method
+     * @param {String} tab - The new tab to switch to.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.tab = this.getTabUsingSlug(tab);
+        contextComponentCallback(this, 'onTabChanged', tab);
+    }
+
+    /**
+     * Handles edit action for the place.
+     *
+     * @method
+     * @action
+     */
+    @action onEdit() {
+        const isActionOverrided = contextComponentCallback(this, 'onEdit', this.place);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.place, 'editing', {
+                onAfterSave: () => {
+                    this.contextPanel.clear();
+                },
+            });
+        }
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.place);
+    }
+
+    /**
+     * Finds and returns a tab based on its slug.
+     *
+     * @param {String} tabSlug - The slug of the tab.
+     * @returns {Object|null} The found tab or null.
+     */
+    getTabUsingSlug(tabSlug) {
+        if (tabSlug) {
+            return this.tabs.find(({ slug }) => slug === tabSlug);
+        }
+
+        return this.tabs[0];
+    }
+}

package/addon/components/vehicle-form-panel.hbs

@@ -16,11 +16,16 @@
         <div class="flex flex-row justify-between w-full">
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
-                    <div class="w-14 flex items-center justify-center">
-                        <Image src={{this.vehicle.photo_url}} @fallbackSrc={{config "defaultValues.vehicleImage"}} alt={{this.vehicle.name}} height="48" width="48" class="h-12 w-12" />
-                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{this.vehicle.public_id}} />
-                        </Attach::Tooltip>
+                    <div class="w-14">
+                        <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
+                            <img src={{this.vehicle.photo_url}} alt={{this.vehicle.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                            <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                                <InputInfo @text="Upload new photo" />
+                            </Attach::Tooltip>
+                            <div class="upload-avatar-button-wrapper rounded-lg">
+                                <UploadButton @name="photos" @accept="image/*" @onFileAdded={{this.onUploadNewPhoto}} @icon="upload" @hideButtonText={{true}} @labelClass="upload-avatar-label-overlay" class="w-12 btn-reset" />
+                            </div>
+                        </div>
                     </div>
                     <div class="flex flex-col">
                         <h1 class="text-gray-900 dark:text-white text-2xl">
@@ -58,61 +63,47 @@
         <div class="flex-1 space-y-4">
             <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                 <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
-                    <div class="input-group mb-2">
-                        <label>
-                            Internal ID
-                        </label>
+                    <InputGroup @name="Internal ID">
                         <Input @value={{this.vehicle.internal_id}} @type="text" class="w-full form-input" placeholder="Internal ID" />
-                    </div>
+                    </InputGroup>
 
-                    <div class="input-group mb-2">
-                        <label>
-                            Plate Number
-                        </label>
+                    <InputGroup @name="Plate Number">
                         <Input @value={{this.vehicle.plate_number}} @type="text" class="w-full form-input" placeholder="Plate Number" />
-                    </div>
+                    </InputGroup>
 
-                    <div class="input-group mb-2">
-                        <label>
-                            VIN Number
-                        </label>
+                    <InputGroup @name="VIN Number">
                         <Input @value={{this.vehicle.vin}} @type="text" class="w-full form-input" placeholder="VIN Number" />
-                    </div>
+                    </InputGroup>
 
-                    <div class="input-group mb-2">
-                        <label>
-                            Make
-                        </label>
+                    <InputGroup @name="Make">
                         <Input @value={{this.vehicle.make}} @type="text" class="w-full form-input" placeholder="Vehicle Make" />
-                    </div>
+                    </InputGroup>
 
-                    <div class="input-group mb-2">
-                        <label>
-                            Model
-                        </label>
+                    <InputGroup @name="Model">
                         <Input @value={{this.vehicle.model}} @type="text" class="w-full form-input" placeholder="Vehicle Model" />
-                    </div>
+                    </InputGroup>
 
-                    <div class="input-group mb-2">
-                        <label>
-                            Year
-                        </label>
+                    <InputGroup @name="Year">
                         <Input @value={{this.vehicle.year}} @type="text" class="w-full form-input" placeholder="Vehicle Year" />
-                    </div>
+                    </InputGroup>
 
-                    <div class="input-group mb-2">
-                        <label>
-                            Driver Assigned
-                        </label>
-                        <ModelSelect @modelName="driver" @selectedModel={{this.vehicle.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut
-                                this.vehicle.driver)}} as |model|>
+                    <InputGroup @name="Driver Assigned">
+                        <ModelSelect @modelName="driver" @selectedModel={{this.vehicle.driver}} @placeholder="Select Driver" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut this.vehicle.driver)}} as |model|>
                             {{model.name}}
                         </ModelSelect>
-                    </div>
+                    </InputGroup>
+
+                    <InputGroup @name="Status">
+                        <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
+                            <PowerSelect @options={{this.vehicleStatusOptions}} @selected={{this.vehicle.status}} @onChange={{fn (mut this.vehicle.status)}} @placeholder="Select vehicle status" @triggerClass="form-select form-input" as |status|>
+                                {{smart-humanize status}}
+                            </PowerSelect>
+                        </div>
+                    </InputGroup>
                 </div>
             </ContentPanel>
 
-            <ContentPanel @title="Avatar" @open={{false}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+            <ContentPanel @title="Avatar" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                 <div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
                     <div class="input-group mb-2">
                         <InputLabel @labelText="Select map avatar" @helpText="Select an avatar to be used for rendering on maps when using geolocation tracking features." />
@@ -121,7 +112,7 @@
                         </FetchSelect>
                     </div>
                     <div>
-                        <img alt={{this.vehicle.public_id}} src={{this.vehicle.avatar_url}} class="w-24 h-24" />
+                        <img alt={{this.vehicle.displayName}} src={{this.vehicle.avatar_url}} class="w-24 h-24" />
                     </div>
                 </div>
             </ContentPanel>

package/addon/components/vehicle-form-panel.js

@@ -11,6 +11,16 @@ export default class VehicleFormPanelComponent extends Component {
      */
     @service store;
 
+    /**
+     * @service store
+     */
+    @service fetch;
+
+    /**
+     * @service currentUser
+     */
+    @service currentUser;
+
     /**
      * @service notifications
      */
@@ -43,6 +53,12 @@ export default class VehicleFormPanelComponent extends Component {
      */
     @tracked isLoading = false;
 
+    /**
+     * Status options for vehicles.
+     * @type {Array}
+     */
+    @tracked vehicleStatusOptions = ['active', 'pending'];
+
     /**
      * Constructs the component and applies initial state.
      */
@@ -97,6 +113,31 @@ export default class VehicleFormPanelComponent extends Component {
         }
     }
 
+    /**
+     * Uploads a new photo for the vehicle.
+     *
+     * @param {File} file
+     * @memberof DriverFormPanelComponent
+     */
+    @action onUploadNewPhoto(file) {
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/${this.currentUser.companyId}/vehicles/${this.vehicle.id}`,
+                subject_uuid: this.vehicle.id,
+                subject_type: 'vehicle',
+                type: 'vehicle_photo',
+            },
+            (uploadedFile) => {
+                this.vehicle.setProperties({
+                    photo_uuid: uploadedFile.id,
+                    photo_url: uploadedFile.url,
+                    photo: uploadedFile,
+                });
+            }
+        );
+    }
+
     /**
      * View the details of the vehicle.
      *

package/addon/components/vehicle-panel/details.hbs

@@ -1,6 +1,6 @@
-<div class="p-4">
+<div class="p-4 space-y-4">
     <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
-        <div class="grid grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
+        <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
             <div class="field-info-container">
                 <div class="field-name">Name</div>
                 <div class="field-value">{{n-a @vehicle.display_name}}</div>
@@ -31,4 +31,10 @@
             </div>
         </div>
     </ContentPanel>
+
+    <ContentPanel @title="Avatar" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+        <div class="p-4">
+            <img alt={{@vehicle.displayName}} src={{@vehicle.avatar_url}} class="w-24 h-24" />
+        </div>
+    </ContentPanel>
 </div>

package/addon/components/vehicle-panel.hbs

@@ -11,11 +11,13 @@
         <div class="flex flex-row justify-between w-full">
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
-                    <div class="w-14 flex items-center justify-center">
-                        <Image src={{this.vehicle.photo_url}} @fallbackSrc={{this.vehicle.avatar_url}} alt={{this.vehicle.name}} height="48" width="48" class="h-12 w-12" />
-                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{this.vehicle.public_id}} />
-                        </Attach::Tooltip>
+                    <div class="w-14">
+                        <div class="w-12 h-12 flex items-center justify-start rounded-lg">
+                            <Image src={{this.vehicle.photo_url}} @fallbackSrc={{config "defaultValues.vehicleImage"}} alt={{this.vehicle.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                            <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                                <InputInfo @text={{this.vehicle.displayName}} />
+                            </Attach::Tooltip>
+                        </div>
                     </div>
                     <div class="flex flex-col">
                         <h1 class="text-gray-900 dark:text-white text-2xl">{{this.vehicle.display_name}}</h1>
@@ -53,7 +55,7 @@
             </div>
         </div>
         <div class="tab-content tab-{{this.tab.slug}}">
-            {{component this.tab.component vehicle=this.vehicle tabOptions=this.tab params=this.tab.componentParams}}
+            {{component this.tab.component vehicle=this.vehicle tabOptions=this.tab options=this.tab.componentParams}}
         </div>
     </Overlay::Body>
 </Overlay>