several improvements to the resource panel components

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/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/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/edit-order-route-panel.js

@@ -88,11 +88,17 @@ export default class EditOrderRoutePanelComponent extends Component {
         contextComponentCallback(this, 'onLoad', ...arguments);
     }
 
+    /**
+     * Task to save order route.
+     *
+     * @return {void}
+     * @memberof EditOrderRoutePanelComponent
+     */
     @task *save() {
         const { payload } = this.order;
 
-        yield this.fetch
-            .patch(
+        try {
+            this.order = yield this.fetch.patch(
                 `orders/route/${this.order.id}`,
                 {
                     pickup: payload.pickup,
@@ -104,14 +110,14 @@ export default class EditOrderRoutePanelComponent extends Component {
                     normalizeToEmberData: true,
                     normalizeModelType: 'order',
                 }
-            )
-            .then((order) => {
-                this.notifications.success(this.intl.t('fleet-ops.operations.orders.index.view.update-success', { orderId: order.public_id }));
-                contextComponentCallback(this, 'onAfterSave', order);
-            })
-            .catch((error) => {
-                this.notifications.serverError(error);
-            });
+            );
+        } catch (error) {
+            this.notifications.serverError(error);
+            return;
+        }
+
+        this.notifications.success(this.intl.t('fleet-ops.operations.orders.index.view.update-success', { orderId: this.order.public_id }));
+        contextComponentCallback(this, 'onAfterSave', this.order);
     }
 
     _serializeWaypoints(waypoints = []) {

addon/components/entity-field-editing-settings.hbs

@@ -54,7 +54,7 @@
                 </div>
             </InputGroup>
             {{#if orderConfigEntityEditingSettings.is_editable}}
-                <div class="bg-gray-400 border-gray-600 rounded-lg px-4 py-2 dark:bg-gray-700 dark:border-gray-800">
+                <div class="bg-gray-100 border-gray-600 rounded-lg px-4 py-2 dark:bg-gray-700 dark:border-gray-800">
                     {{#let (get (get this.entityEditingSettings this.selectedOrderConfig.id) "editable_entity_fields") as |editableEntityFields|}}
                         {{#each this.entityFields as |entityField|}}
                             <div class="mt-1">

addon/components/fleet-form-panel.hbs

@@ -17,7 +17,7 @@
         @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 (t "fleet-ops.component.fleet-form-panel.save-fleet")(t "fleet-ops.component.fleet-form-panel.create-fleet") }} @onClick={{this.save}} @wrapperClass="mr-2" />
+            <Button @icon={{if this.fleet.id "save" "check"}} @type="primary" @text={{if this.fleet.id (t "fleet-ops.component.fleet-form-panel.save-fleet")(t "fleet-ops.component.fleet-form-panel.create-fleet") }} @onClick={{perform this.save}} @isLoading={{not this.save.isIdle}} @wrapperClass="mr-2" />
             {{#if this.fleet.id}}
                 <Button @type="default" @icon="id-card" @helpText={{t "fleet-ops.component.fleet-form-panel.view-details"}} @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
             {{/if}}