Merge pull request #17 from fleetbase/dev-v0.3.4

v0.3.4
fleetbase · Nov 16, 2023 · 6a65ca8 · 6a65ca8
2 parents 5ce11e2 + 18df96c
commit 6a65ca8
Show file tree

Hide file tree

Showing 115 changed files with 2,552 additions and 1,104 deletions.
diff --git a/addon/components/contact-form-panel.hbs b/addon/components/contact-form-panel.hbs
@@ -1,4 +1,11 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizeble={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
@@ -17,13 +24,21 @@
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
                     <div class="w-14">
-                        <div class="w-12 h-12 flex items-center justify-start relative hover:bg-gray-100 transition-all rounded-lg overflow-hidden">
-                            <img src={{this.contact.photo_url}} alt={{this.contact.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                        <div class="upload-avatar-overlay w-12 h-12 flex items-center justify-start rounded-lg">
+                            <img src={{this.contact.photo_url}} alt={{this.contact.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.contact.public_id}} />
                             </Attach::Tooltip>
-                            <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-gray-600 bg-opacity-50 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 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>
@@ -72,7 +87,14 @@
             </InputGroup>
             <InputGroup @name="Type">
                 <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
-                    <PowerSelect @options={{this.contactTypeOptions}} @selected={{this.contact.type}} @onChange={{fn (mut this.contact.type)}} @placeholder="Select contact type" @triggerClass="form-select form-input" as |type|>
+                    <PowerSelect
+                        @options={{this.contactTypeOptions}}
+                        @selected={{this.contact.type}}
+                        @onChange={{fn (mut this.contact.type)}}
+                        @placeholder="Select contact type"
+                        @triggerClass="form-select form-input"
+                        as |type|
+                    >
                         {{smart-humanize type}}
                     </PowerSelect>
                 </div>

diff --git a/addon/components/driver-form-panel.hbs b/addon/components/driver-form-panel.hbs
@@ -109,6 +109,16 @@
                         </PowerSelect>
                     </div>
                 </InputGroup>
+              <InputGroup @name="Coordinates" @wrapperClass="col-span-2">
+                <CoordinatesInput
+                    @value={{this.driver.location}}
+                    @onChange={{this.onCoordinatesChanged}}
+                    @onGeocode={{this.onAutocomplete}}
+                    @onUpdatedFromMap={{this.onCoordinatesChanged}}
+                    @onInit={{this.setCoordinatesInput}}
+                    @renderInPlace={{false}}
+                />
+            </InputGroup>
             </div>
         </div>
     </Overlay::Body>

diff --git a/addon/components/driver-form-panel.js b/addon/components/driver-form-panel.js
@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import Point from '@fleetbase/fleetops-data/utils/geojson/point';
 import contextComponentCallback from '../utils/context-component-callback';
 import applyContextComponentArguments from '../utils/apply-context-component-arguments';
 
@@ -59,6 +60,12 @@ export default class DriverFormPanelComponent extends Component {
      */
     @tracked isLoading = false;
 
+    /**
+     * The coordinates input component instance.
+     * @type {CoordinateInputComponent}
+     */
+    @tracked coordinatesInputComponent;
+
     /**
      * Constructs the component and applies initial state.
      */
@@ -108,6 +115,7 @@ export default class DriverFormPanelComponent extends Component {
                     this.isLoading = false;
                 });
         } catch (error) {
+            this.notifications.error(error.message);
             this.loader.removeLoader('.next-content-overlay-panel-container ');
             this.isLoading = false;
         }
@@ -160,4 +168,47 @@ export default class DriverFormPanelComponent extends Component {
     @action onPressCancel() {
         return contextComponentCallback(this, 'onPressCancel', this.driver);
     }
+
+    /**
+     * Handles the selection from an autocomplete. Updates the place properties with the selected data.
+     * If a coordinates input component is present, updates its coordinates too.
+     *
+     * @action
+     * @param {Object} selected - The selected item from the autocomplete.
+     * @param {Object} selected.location - The location data of the selected item.
+     * @memberof DriverFormPanelComponent
+     */
+    @action onAutocomplete({ location }) {
+        if (location) {
+            this.driver.set('location', location);
+            if (this.coordinatesInputComponent) {
+                this.coordinatesInputComponent.updateCoordinates(location);
+            }
+        }
+    }
+
+    /**
+     * Sets the coordinates input component.
+     *
+     * @action
+     * @param {Object} coordinatesInputComponent - The coordinates input component to be set.
+     * @memberof DriverFormPanelComponent
+     */
+    @action setCoordinatesInput(coordinatesInputComponent) {
+        this.coordinatesInputComponent = coordinatesInputComponent;
+    }
+
+    /**
+     * Updates the place coordinates with the given latitude and longitude.
+     *
+     * @action
+     * @param {Object} coordinates - The latitude and longitude coordinates.
+     * @param {number} coordinates.latitude - Latitude value.
+     * @param {number} coordinates.longitude - Longitude value.
+     * @memberof DriverFormPanelComponent
+     */
+    @action onCoordinatesChanged({ latitude, longitude }) {
+        const location = new Point(longitude, latitude);
+        this.driver.setProperties({ location });
+    }
 }
diff --git a/addon/components/driver-panel.hbs b/addon/components/driver-panel.hbs
@@ -1,4 +1,11 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizeble={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
@@ -14,7 +21,14 @@
                 <div class="flex flex-row">
                     <div class="w-14">
                         <div class="w-12 h-12 flex items-center justify-start rounded-lg">
-                            <Image src={{this.driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                            <Image
+                                src={{this.driver.photo_url}}
+                                @fallbackSrc={{config "defaultValues.driverImage"}}
+                                alt={{this.driver.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.driver.name}} />
                             </Attach::Tooltip>
@@ -25,7 +39,11 @@
                         <div class="-mt-1">
                             {{#if this.driver.vehicle}}
                                 <div class="flex flex-row items-center">
-                                    <a href="javascript:;" class="text-sm dark:text-blue-400 text-blue-600 hover:opacity-50" {{on "click" this.onClickDriverVehicle}}>{{this.driver.vehicle.displayName}}</a>
+                                    <a
+                                        href="javascript:;"
+                                        class="text-sm dark:text-blue-400 text-blue-600 hover:opacity-50"
+                                        {{on "click" this.onClickDriverVehicle}}
+                                    >{{this.driver.vehicle.displayName}}</a>
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">

diff --git a/addon/components/driver-panel/details.hbs b/addon/components/driver-panel/details.hbs
@@ -15,7 +15,7 @@
             </div>
             <div class="field-info-container">
                 <div class="field-name">Drivers License</div>
-                <div class="field-value">{{n-a @driver.drivers_license}}</div>
+                <div class="field-value">{{n-a @driver.drivers_license_number}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">Email</div>
@@ -25,10 +25,6 @@
                 <div class="field-name">Phone</div>
                 <div class="field-value">{{n-a @driver.phone}}</div>
             </div>
-            <div class="field-info-container">
-                <div class="field-name">Current Job</div>
-                <div class="field-value">{{n-a @driver.current_job_id}}</div>
-            </div>
             <div class="field-info-container">
                 <div class="field-name">City</div>
                 <div class="field-value">{{n-a @driver.city}}</div>

diff --git a/addon/components/fleet-form-panel.hbs b/addon/components/fleet-form-panel.hbs
@@ -1,5 +1,18 @@
-<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
-    <Overlay::Header @title={{if this.fleet.public_id this.fleet.name "New Fleet"}} @status={{this.fleet.public_id}} @hideStatusDot={{true}} @createdAt={{this.fleet.createdAt}} @titleWrapperClass="leading-5">
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizeble={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "600px"}}
+>
+    <Overlay::Header
+        @title={{if this.fleet.public_id this.fleet.name "New Fleet"}}
+        @status={{this.fleet.public_id}}
+        @hideStatusDot={{true}}
+        @createdAt={{this.fleet.createdAt}}
+        @titleWrapperClass="leading-5"
+    >
         <div class="flex flex-1 justify-end">
             <Button @icon={{if this.fleet.id "save" "check"}} @type="primary" @text={{if this.fleet.id "Save Fleet" "Create Fleet"}} @onClick={{this.save}} @wrapperClass="mr-2" />
             {{#if this.fleet.id}}
@@ -14,23 +27,64 @@
             <div class="flex flex-col text-xs dark:text-gray-100">
                 <InputGroup @name="Fleet Name" @value={{this.fleet.name}} />
                 <InputGroup @name="Parent Fleet" @value={{this.fleet.parent_fleet}}>
-                    <ModelSelect @modelName="fleet" @selectedModel={{this.fleet.parent_fleet}} @placeholder="Select parent fleet to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.updateRelationship "parent_fleet"}} @allowClear={{true}} as |model|>
+                    <ModelSelect
+                        @modelName="fleet"
+                        @selectedModel={{this.fleet.parent_fleet}}
+                        @placeholder="Select parent fleet to assign fleet to"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{fn this.updateRelationship "parent_fleet"}}
+                        @allowClear={{true}}
+                        as |model|
+                    >
                         {{model.name}}
                     </ModelSelect>
                 </InputGroup>
                 <InputGroup @name="Vendor" @value={{this.fleet.vendor}}>
-                    <ModelSelect @modelName="vendor" @selectedModel={{this.fleet.vendor}} @placeholder="Select vendor to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.updateRelationship "vendor"}} @allowClear={{true}} as |model|>
+                    <ModelSelect
+                        @modelName="vendor"
+                        @selectedModel={{this.fleet.vendor}}
+                        @placeholder="Select vendor to assign fleet to"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{fn this.updateRelationship "vendor"}}
+                        @allowClear={{true}}
+                        as |model|
+                    >
                         {{model.name}}
                     </ModelSelect>
                 </InputGroup>
                 <InputGroup @name="Assign to Service Area" @value={{this.fleet.service_area}}>
-                    <ModelSelect @modelName="service-area" @selectedModel={{this.fleet.service_area}} @placeholder="Select service area to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.updateRelationship "service_area"}} @allowClear={{true}} as |model|>
+                    <ModelSelect
+                        @modelName="service-area"
+                        @selectedModel={{this.fleet.service_area}}
+                        @placeholder="Select service area to assign fleet to"
+                        @triggerClass="form-select form-input"
+                        @infiniteScroll={{false}}
+                        @renderInPlace={{true}}
+                        @onChange={{fn this.updateRelationship "service_area"}}
+                        @allowClear={{true}}
+                        as |model|
+                    >
                         {{model.name}}
                     </ModelSelect>
                 </InputGroup>
                 {{#if this.fleet.service_area}}
                     <InputGroup @name="Assign to Zone" @value={{this.fleet.zone}}>
-                        <ModelSelect @modelName="zone" @selectedModel={{this.fleet.zone}} @query={{hash service_area_uuid=this.fleet.service_area.id}} @placeholder="Select zone to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.updateRelationship "zone"}} @allowClear={{true}} as |model|>
+                        <ModelSelect
+                            @modelName="zone"
+                            @selectedModel={{this.fleet.zone}}
+                            @query={{hash service_area_uuid=this.fleet.service_area.id}}
+                            @placeholder="Select zone to assign fleet to"
+                            @triggerClass="form-select form-input"
+                            @infiniteScroll={{false}}
+                            @renderInPlace={{true}}
+                            @onChange={{fn this.updateRelationship "zone"}}
+                            @allowClear={{true}}
+                            as |model|
+                        >
                             {{model.name}}
                         </ModelSelect>
                     </InputGroup>

diff --git a/addon/components/fleet-panel/details.hbs b/addon/components/fleet-panel/details.hbs
@@ -7,7 +7,7 @@
             </div>
             <div class="field-info-container">
                 <div class="field-name">Service Area</div>
-                <div class="field-value">{{n-a @fleet.serviceArea.name}}</div>
+                <div class="field-value">{{n-a @fleet.service_area.name}}</div>
             </div>
             <div class="field-info-container">
                 <div class="field-name">Zone</div>