Merge pull request #108 from fleetbase/dev-v0.4.28

dev-v0.4.28

addon/components/activity-form-panel.hbs

@@ -1,7 +1,7 @@
 <Overlay @onLoad={{this.setOverlayContext}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} @onToggle={{this.onToggle}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizable={{or this.isResizable @isResizable}} @width={{or this.width @width "570px"}}>
     <Overlay::Header @title={{if this.activity.status (concat (t "fleet-ops.component.activity-form-panel.title-concat") this.activity.status) (t "fleet-ops.component.activity-form-panel.new-activity-title") }} @hideStatusDot={{true}} @titleWrapperClass="leading-5">
         <div class="flex flex-1 justify-end">
-            <Button @type="primary" @icon="save" @text={{t "common.save"}} @onClick={{this.save}} @wrapperClass="mr-2" />
+            <Button @type="primary" @icon="save" @text={{t "common.save"}} @onClick={{perform this.save}} @isLoading={{this.save.isRunning}} @wrapperClass="mr-2" />
             <Button @type="default" @icon="times" @text={{t "fleet-ops.common.cancel"}} @onClick={{this.onPressCancel}} />
         </div>
     </Overlay::Header>

addon/components/activity-form-panel.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { underscore, capitalize, w } from '@ember/string';
+import { task } from 'ember-concurrency';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
 import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
 
@@ -42,14 +43,14 @@ export default class ActivityFormPanelComponent extends Component {
     }
 
     /**
-     * Action method to save the activity. It triggers an optional onSave callback
+     * Task to save the activity. It triggers an optional onSave callback
      * with the current state of the activity.
-     * @action
+     * @task
      */
-    @action save() {
+    @task *save() {
         contextComponentCallback(this, 'onSave', this.customEntity);
         if (typeof this.onSave === 'function') {
-            this.onSave(this.activity);
+            yield this.onSave(this.activity);
         }
     }
 

addon/components/cell/driver-name.hbs

@@ -1,8 +1,19 @@
 {{#if this.driver}}
     <div class="relative flex items-center" ...attributes>
         <img src={{this.driver.photo_url}} alt={{this.driver.name}} {{fallback-img-src (config 'defaultValues.driverImage')}} class="w-5 h-5 mr-2 rounded-md" />
-        <a href="javascript:;" class="relative block" {{on "click" (fn this.onClick this.driver)}}>
+        <a href="javascript:;" class="relative flex flex-row items-center" {{on "click" (fn this.onClick this.driver)}}>
             <span>{{get-default-value this.driver.name}}</span>
+            {{#if @row.vehicle_assigned}}
+                <div class="ml-2 rounded-lg bg-gray-300 dark:bg-gray-800 opacity-50 px-1 text-xs">
+                    <FaIcon @icon="car" @size="xs" class="mr-0.5" />
+                    <span>{{n-a @row.vehicle_assigned.display_name}}</span>
+                </div>
+            {{else if this.driver.vehicle}}
+                <div class="ml-2 rounded-lg bg-gray-300 dark:bg-gray-800 opacity-50 px-1 text-xs">
+                    <FaIcon @icon="car" @size="xs" class="mr-0.5" />
+                    <span>{{n-a this.driver.vehicle_name}}</span>
+                </div>
+            {{/if}}
         </a>
         <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 -mt-1 -ml-1 {{if this.driver.online "text-green-500" "text-yellow-200"}}" />
     </div>

addon/components/cell/vehicle-name.hbs

@@ -0,0 +1,17 @@
+<div class="relative flex items-center">
+    <Image src={{this.mediaUrl}} @fallbackSrc={{config "defaultValues.vehicleAvatar"}} data-vehicle={{@row.id}} alt={{this.altText}} class="w-4 h-4 rounded-md {{if @column.hasOnline "mx-2" "mr-2"}}" />
+    <span class="relative block">
+        <a href="javascript:;" class="relative block" {{on "click" this.onClick}}>
+            {{#if (has-block)}}
+                {{yield}}
+            {{else}}
+                <span>
+                    {{n-a @value}}
+                </span>
+            {{/if}}
+        </a>
+    </span>
+    {{#if @column.showOnlineIndicator}}
+        <FaIcon @icon="circle" class="absolute left-0 top-0 -mt-1 -ml-2 h-2 w-2 {{if @row.online "text-green-500" "text-yellow-200"}}" />
+    {{/if}}
+</div>

addon/components/cell/vehicle-name.js

@@ -0,0 +1,3 @@
+import TableCellMediaNameComponent from '@fleetbase/ember-ui/components/table/cell/media-name';
+
+export default class CellVehicleNameComponent extends TableCellMediaNameComponent {}

addon/components/contact-form-panel.hbs

@@ -18,7 +18,7 @@
             </div>
             <div class="flex flex-1 justify-end">
                 <div class="mr-2">
-                    <Button @icon={{if this.contact.id "save" "check"}} @type="primary" @text={{if this.contact.id (t "fleet-ops.component.contact-form-panel.save-contact")(t "fleet-ops.component.contact-form-panel.create-contact") }} @onClick={{this.save}} />
+                    <Button @icon={{if this.contact.id "save" "check"}} @type="primary" @text={{if this.contact.id (t "fleet-ops.component.contact-form-panel.save-contact")(t "fleet-ops.component.contact-form-panel.create-contact") }} @onClick={{perform this.save}} @isLoading={{this.save.isRunning}} />
                 </div>
                 <Button @type="default" @icon="times" @helpText={{if this.contact.id (t "fleet-ops.component.contact-form-panel.cancel-edit-button")(t "fleet-ops.component.contact-form-panel.cancel-new-button") }} @onClick={{this.onPressCancel}} />
             </div>

addon/components/contact-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 { task } from 'ember-concurrency';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
 import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
 
@@ -10,6 +11,7 @@ export default class ContactFormPanelComponent extends Component {
      * @service store
      */
     @service store;
+
     /**
      * @service intl
      */
@@ -35,11 +37,6 @@ export default class ContactFormPanelComponent extends Component {
      */
     @service hostRouter;
 
-    /**
-     * @service loader
-     */
-    @service loader;
-
     /**
      * @service contextPanel
      */
@@ -51,12 +48,6 @@ export default class ContactFormPanelComponent extends Component {
      */
     @tracked context;
 
-    /**
-     * Indicates whether the component is in a loading state.
-     * @type {boolean}
-     */
-    @tracked isLoading = false;
-
     /**
      * All possible contact types.
      *
@@ -92,37 +83,23 @@ export default class ContactFormPanelComponent extends Component {
     }
 
     /**
-     * Saves the contact changes.
+     * Task to save contact.
      *
-     * @action
-     * @returns {Promise<any>}
+     * @return {void}
+     * @memberof ContactFormPanelComponent
      */
-    @action save() {
-        const { contact } = this;
-
-        this.loader.showLoader('.next-content-overlay-panel-container', { loadingMessage: 'Saving contact...', preserveTargetPosition: true });
-        this.isLoading = true;
-
-        contextComponentCallback(this, 'onBeforeSave', contact);
+    @task *save() {
+        contextComponentCallback(this, 'onBeforeSave', this.contact);
 
         try {
-            return contact
-                .save()
-                .then((contact) => {
-                    this.notifications.success(this.intl.t('fleet-ops.component.contact-form-panel.success-message', { contactName: contact.name }));
-                    contextComponentCallback(this, 'onAfterSave', contact);
-                })
-                .catch((error) => {
-                    this.notifications.serverError(error);
-                })
-                .finally(() => {
-                    this.loader.removeLoader('.next-content-overlay-panel-container ');
-                    this.isLoading = false;
-                });
+            this.contact = yield this.contact.save();
         } catch (error) {
-            this.loader.removeLoader('.next-content-overlay-panel-container ');
-            this.isLoading = false;
+            this.notifications.serverError(error);
+            return;
         }
+
+        this.notifications.success(this.intl.t('fleet-ops.component.contact-form-panel.success-message', { contactName: this.contact.name }));
+        contextComponentCallback(this, 'onAfterSave', this.contact);
     }
 
     /**

addon/components/contact-panel/details.hbs

@@ -2,34 +2,34 @@
     <ContentPanel @title={{t "fleet-ops.common.details"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
         <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4 text-xs dark:text-gray-100">
 
-            <div class="field-info-container">
+            <div class="field-info-container space-y-2">
                 <div class="field-name">{{t "fleet-ops.component.contact-panel.details.web-url"}}</div>
                 <div class="field-value">{{n-a @contact.name}}</div>
             </div>
 
-            <div class="field-info-container">
+            <div class="field-info-container space-y-2">
                 <div class="field-name">{{t "fleet-ops.common.title"}}</div>
                 <div class="field-value">{{n-a @contact.title}}</div>
             </div>
 
-            <div class="field-info-container">
+            <div class="field-info-container space-y-2">
                 <div class="field-name">{{t "fleet-ops.common.internal-id"}}</div>
                 <div class="field-value">{{n-a @contact.internal_id}}</div>
             </div>
 
-            <div class="field-info-container">
+            <div class="field-info-container space-y-2">
                 <div class="field-name">{{t "fleet-ops.common.email"}}</div>
                 <div class="field-value">{{n-a @contact.email}}</div>
             </div>
 
-            <div class="field-info-container">
+            <div class="field-info-container space-y-2">
                 <div class="field-name">{{t "fleet-ops.common.email"}}</div>
                 <div class="field-value">{{n-a @contact.phone}}</div>
             </div>
 
-            <div class="field-info-container">
+            <div class="field-info-container space-y-2">
                 <div class="field-name">{{t "fleet-ops.common.type"}}</div>
-                <div class="field-value"><Badge @status={{@contact.type}} /></div>
+                <div class="field-value"><Badge @status="info">{{@contact.type}}</Badge></div>
             </div>
         </div>
     </ContentPanel>

addon/components/custom-field-form-panel.js

@@ -63,17 +63,19 @@ export default class CustomFieldFormPanelComponent extends Component {
      * @task
      */
     @task *save() {
-        yield this.customField
-            .save()
-            .then((customField) => {
-                if (typeof this.onCustomFieldSaved === 'function') {
-                    this.onCustomFieldSaved(customField);
-                }
-                contextComponentCallback(this, 'onCustomFieldSaved', customField);
-            })
-            .catch((error) => {
-                this.notifications.serverError(error);
-            });
+        contextComponentCallback(this, 'onBeforeCustomFieldSaved', this.customField);
+
+        try {
+            this.customField = yield this.customField.save();
+        } catch (error) {
+            this.notifications.serverError(error);
+            return;
+        }
+
+        if (typeof this.onCustomFieldSaved === 'function') {
+            this.onCustomFieldSaved(this.customField);
+        }
+        contextComponentCallback(this, 'onCustomFieldSaved', this.customField);
     }
 
     /**

addon/components/driver-form-panel.hbs

@@ -8,7 +8,7 @@
             </div>
             <div class="flex flex-1 justify-end">
                 <div class="mr-2">
-                    <Button @icon={{if this.driver.id "save" "check"}} @type="primary" @text={{if this.driver.id (t "fleet-ops.component.driver-form-panel.save-driver")(t "fleet-ops.component.driver-form-panel.create-driver") }} @onClick={{this.save}} />
+                    <Button @icon={{if this.driver.id "save" "check"}} @type="primary" @text={{if this.driver.id (t "fleet-ops.component.driver-form-panel.save-driver")(t "fleet-ops.component.driver-form-panel.create-driver") }} @onClick={{perform this.save}} @isLoading={{not this.save.isIdle}} />
                 </div>
                 <Button @type="default" @icon="times" @helpText={{if this.driver.id (t "fleet-ops.component.driver-form-panel.cancel-edit-driver")(t "fleet-ops.component.driver-form-panel.cancel-new-driver") }} @onClick={{this.onPressCancel}} />
             </div>
@@ -54,7 +54,7 @@
                 </div>
             </div>
             <div class="flex justify-end w-1/4">
-                <Badge @status={{this.driver.status}} />
+                <Badge @status={{if this.driver.online "online" "offline"}}>{{if this.driver.online "Online" "Offline"}}</Badge>
             </div>
         </div>
     </Overlay::Header>

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 { task } from 'ember-concurrency';
 import Point from '@fleetbase/fleetops-data/utils/geojson/point';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
 import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
@@ -37,11 +38,6 @@ export default class DriverFormPanelComponent extends Component {
      */
     @service hostRouter;
 
-    /**
-     * @service loader
-     */
-    @service loader;
-
     /**
      * @service contextPanel
      */
@@ -64,12 +60,6 @@ export default class DriverFormPanelComponent extends Component {
      */
     @tracked driverStatusOptions = ['active', 'pending'];
 
-    /**
-     * Indicates whether the component is in a loading state.
-     * @type {boolean}
-     */
-    @tracked isLoading = false;
-
     /**
      * The coordinates input component instance.
      * @type {CoordinateInputComponent}
@@ -151,32 +141,23 @@ export default class DriverFormPanelComponent extends Component {
     }
 
     /**
-     * Saves the driver changes.
+     * Task to save driver.
      *
-     * @action
-     * @returns {Promise<any>}
+     * @return {void}
+     * @memberof DriverFormPanelComponent
      */
-    @action save() {
-        const { driver } = this;
+    @task *save() {
+        contextComponentCallback(this, 'onBeforeSave', this.driver);
 
-        this.loader.showLoader('.next-content-overlay-panel-container', { loadingMessage: 'Saving driver...', preserveTargetPosition: true });
-        this.isLoading = true;
-
-        contextComponentCallback(this, 'onBeforeSave', driver);
+        try {
+            this.driver = yield this.driver.save();
+        } catch (error) {
+            this.notifications.serverError(error);
+            return;
+        }
 
-        return driver
-            .save()
-            .then((driver) => {
-                this.notifications.success(this.intl.t('fleet-ops.component.driver-form-panel.success-message', { driverName: driver.name }));
-                contextComponentCallback(this, 'onAfterSave', driver);
-            })
-            .catch((error) => {
-                this.notifications.serverError(error);
-            })
-            .finally(() => {
-                this.loader.removeLoader('.next-content-overlay-panel-container ');
-                this.isLoading = false;
-            });
+        this.notifications.success(this.intl.t('fleet-ops.component.driver-form-panel.success-message', { driverName: this.driver.name }));
+        contextComponentCallback(this, 'onAfterSave', this.driver);
     }
 
     /**

addon/components/driver-onboard-settings.js

@@ -7,6 +7,7 @@ import { task } from 'ember-concurrency-decorators';
 export default class DriverOnboardSettingsComponent extends Component {
     @service fetch;
     @service currentUser;
+    @service notifications;
     @tracked companyId;
     @tracked driverOnboardSettingsLoaded = false;
     @tracked driverOnboardSettings = {};
@@ -37,8 +38,18 @@ export default class DriverOnboardSettingsComponent extends Component {
 
     @task *saveDriverOnboardSettings() {
         const { driverOnboardSettings } = this;
-        const driverOnboardSettingsResponse = yield this.fetch.post('fleet-ops/settings/driver-onboard-settings', { driverOnboardSettings });
-        if (driverOnboardSettings?.enableDriverOnboardFromApp == false) this.driverOnboardSettings = driverOnboardSettingsResponse?.driverOnboardSettings;
+        let driverOnboardSettingsResponse;
+
+        try {
+            driverOnboardSettingsResponse = yield this.fetch.post('fleet-ops/settings/driver-onboard-settings', { driverOnboardSettings });
+        } catch (error) {
+            this.notifications.serverError(error);
+            return;
+        }
+
+        if (driverOnboardSettingsResponse && driverOnboardSettings && driverOnboardSettings.enableDriverOnboardFromApp == false) {
+            this.driverOnboardSettings = driverOnboardSettingsResponse.driverOnboardSettings;
+        }
     }
 
     @task *getDriverOnboardSettings() {

addon/components/driver-panel.hbs

@@ -59,7 +59,7 @@
                 </div>
             </div>
             <div class="flex justify-end w-1/4">
-                <Badge @status={{this.driver.status}} />
+                <Badge @status={{if this.driver.online "online" "offline"}}>{{if this.driver.online "Online" "Offline"}}</Badge>
             </div>
         </div>
     </Overlay::Header>