improved active tab finding and abstracted to utility

addon/components/contact-panel.js

@@ -6,6 +6,7 @@ import { isArray } from '@ember/array';
 import ContactPanelDetailComponent from './contact-panel/details';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
 import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
+import findActiveTab from '../utils/find-active-tab';
 
 export default class ContactPanelComponent extends Component {
     @service fetch;
@@ -53,7 +54,7 @@ export default class ContactPanelComponent extends Component {
     constructor() {
         super(...arguments);
         this.contact = this.args.contact;
-        this.tab = this.getTabUsingSlug(this.args.tab);
+        this.tab = findActiveTab(this.tabs, this.args.tab);
         applyContextComponentArguments(this);
     }
 
@@ -76,7 +77,7 @@ export default class ContactPanelComponent extends Component {
      * @action
      */
     @action onTabChanged(tab) {
-        this.tab = this.getTabUsingSlug(tab);
+        this.tab = findActiveTab(this.tabs, tab);
         contextComponentCallback(this, 'onTabChanged', tab);
     }
 
@@ -108,18 +109,4 @@ export default class ContactPanelComponent extends Component {
     @action onPressCancel() {
         return contextComponentCallback(this, 'onPressCancel', this.contact);
     }
-
-    /**
-     * 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];
-    }
 }

addon/components/customer-panel.js

@@ -6,6 +6,7 @@ import { isArray } from '@ember/array';
 import CustomerPanelDetailComponent from './customer-panel/details';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
 import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
+import findActiveTab from '../utils/find-active-tab';
 
 export default class CustomerPanelComponent extends Component {
     @service fetch;
@@ -53,7 +54,7 @@ export default class CustomerPanelComponent extends Component {
     constructor() {
         super(...arguments);
         this.customer = this.args.customer;
-        this.tab = this.getTabUsingSlug(this.args.tab);
+        this.tab = findActiveTab(this.tabs, this.args.tab);
         applyContextComponentArguments(this);
     }
 
@@ -76,7 +77,7 @@ export default class CustomerPanelComponent extends Component {
      * @action
      */
     @action onTabChanged(tab) {
-        this.tab = this.getTabUsingSlug(tab);
+        this.tab = findActiveTab(this.tabs, tab);
         contextComponentCallback(this, 'onTabChanged', tab);
     }
 
@@ -108,18 +109,4 @@ export default class CustomerPanelComponent extends Component {
     @action onPressCancel() {
         return contextComponentCallback(this, 'onPressCancel', this.customer);
     }
-
-    /**
-     * 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];
-    }
 }

addon/components/driver-panel.js

@@ -7,6 +7,7 @@ import DriverPanelDetailComponent from './driver-panel/details';
 import DriverPanelOrdersComponent from './driver-panel/orders';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
 import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
+import findActiveTab from '../utils/find-active-tab';
 
 export default class DriverPanelComponent extends Component {
     /**
@@ -92,7 +93,7 @@ export default class DriverPanelComponent extends Component {
     constructor() {
         super(...arguments);
         this.driver = this.args.driver;
-        this.tab = this.getTabUsingSlug(this.args.tab);
+        this.tab = findActiveTab(this.tabs, this.args.tab);
         applyContextComponentArguments(this);
     }
 
@@ -115,7 +116,7 @@ export default class DriverPanelComponent extends Component {
      * @action
      */
     @action onTabChanged(tab) {
-        this.tab = this.getTabUsingSlug(tab);
+        this.tab = findActiveTab(this.tabs, tab);
         contextComponentCallback(this, 'onTabChanged', tab);
     }
 
@@ -160,18 +161,4 @@ export default class DriverPanelComponent extends Component {
             this.contextPanel.focus(vehicle);
         }
     }
-
-    /**
-     * 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];
-    }
 }

addon/components/fleet-panel.js

@@ -8,6 +8,7 @@ import FleetPanelDriverListingComponent from './fleet-panel/driver-listing';
 import FleetPanelVehicleListingComponent from './fleet-panel/vehicle-listing';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
 import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
+import findActiveTab from '../utils/find-active-tab';
 
 export default class FleetPanelComponent extends Component {
     @service fetch;
@@ -70,7 +71,7 @@ export default class FleetPanelComponent extends Component {
     constructor() {
         super(...arguments);
         this.fleet = this.args.fleet;
-        this.tab = this.getTabUsingSlug(this.args.tab);
+        this.tab = findActiveTab(this.tabs, this.args.tab);
         applyContextComponentArguments(this);
     }
 
@@ -93,7 +94,7 @@ export default class FleetPanelComponent extends Component {
      * @action
      */
     @action onTabChanged(tab) {
-        this.tab = this.getTabUsingSlug(tab);
+        this.tab = findActiveTab(this.tabs, tab);
         contextComponentCallback(this, 'onTabChanged', tab);
     }
 
@@ -125,18 +126,4 @@ export default class FleetPanelComponent extends Component {
     @action onPressCancel() {
         return contextComponentCallback(this, 'onPressCancel', this.fleet);
     }
-
-    /**
-     * 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];
-    }
 }

addon/components/fuel-report-panel.js

@@ -6,6 +6,7 @@ import { isArray } from '@ember/array';
 import FuelReportPanelDetailsComponent from './fuel-report-panel/details';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
 import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
+import findActiveTab from '../utils/find-active-tab';
 
 export default class FuelReportPanelComponent extends Component {
     /**
@@ -89,7 +90,7 @@ export default class FuelReportPanelComponent extends Component {
     constructor() {
         super(...arguments);
         this.fuelReport = this.args.fuelReport;
-        this.tab = this.getTabUsingSlug(this.args.tab);
+        this.tab = findActiveTab(this.tabs, this.args.tab);
         applyContextComponentArguments(this);
     }
 
@@ -112,7 +113,7 @@ export default class FuelReportPanelComponent extends Component {
      * @action
      */
     @action onTabChanged(tab) {
-        this.tab = this.getTabUsingSlug(tab);
+        this.tab = findActiveTab(this.tabs, tab);
         contextComponentCallback(this, 'onTabChanged', tab);
     }
 
@@ -144,18 +145,4 @@ export default class FuelReportPanelComponent extends Component {
     @action onPressCancel() {
         return contextComponentCallback(this, 'onPressCancel', this.fuelReport);
     }
-
-    /**
-     * 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];
-    }
 }

addon/components/issue-panel.js

@@ -6,6 +6,8 @@ import { isArray } from '@ember/array';
 import IssuePanelDetailComponent from './issue-panel/details';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
 import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
+import findActiveTab from '../utils/find-active-tab';
+
 export default class IssuePanelComponent extends Component {
     /**
      * Service for fetching data.
@@ -88,7 +90,7 @@ export default class IssuePanelComponent extends Component {
     constructor() {
         super(...arguments);
         this.issue = this.args.issue;
-        this.tab = this.getTabUsingSlug(this.args.tab);
+        this.tab = findActiveTab(this.tabs, this.args.tab);
         applyContextComponentArguments(this);
     }
 
@@ -111,7 +113,7 @@ export default class IssuePanelComponent extends Component {
      * @action
      */
     @action onTabChanged(tab) {
-        this.tab = this.getTabUsingSlug(tab);
+        this.tab = findActiveTab(this.tabs, tab);
         contextComponentCallback(this, 'onTabChanged', tab);
     }
 
@@ -143,18 +145,4 @@ export default class IssuePanelComponent extends Component {
     @action onPressCancel() {
         return contextComponentCallback(this, 'onPressCancel', this.issue);
     }
-
-    /**
-     * 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];
-    }
 }

addon/components/live-map-drawer.js

@@ -8,6 +8,7 @@ import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-co
 import LiveMapDrawerVehicleListingComponent from './live-map-drawer/vehicle-listing';
 import LiveMapDrawerDriverListingComponent from './live-map-drawer/driver-listing';
 import LiveMapDrawerPlaceListingComponent from './live-map-drawer/place-listing';
+import findActiveTab from '../utils/find-active-tab';
 
 export default class LiveMapDrawerComponent extends Component {
     /**
@@ -58,7 +59,7 @@ export default class LiveMapDrawerComponent extends Component {
      */
     constructor() {
         super(...arguments);
-        this.tab = this.getTabUsingSlug(this.args.tab);
+        this.tab = findActiveTab(this.tabs, this.args.tab);
         applyContextComponentArguments(this);
     }
 
@@ -84,21 +85,7 @@ export default class LiveMapDrawerComponent extends Component {
      * @action
      */
     @action onTabChanged(tab) {
-        this.tab = this.getTabUsingSlug(tab);
+        this.tab = findActiveTab(this.tabs, tab);
         contextComponentCallback(this, 'onTabChanged', tab);
     }
-
-    /**
-     * 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];
-    }
 }

addon/components/order-config-manager.js

@@ -15,6 +15,7 @@ import OrderConfigManagerDetailsComponent from './order-config-manager/details';
 import OrderConfigManagerCustomFieldsComponent from './order-config-manager/custom-fields';
 import OrderConfigManagerActivityFlowComponent from './order-config-manager/activity-flow';
 import OrderConfigManagerEntitiesComponent from './order-config-manager/entities';
+import findActiveTab from '../utils/find-active-tab';
 
 const configManagerContext = EmberObject.extend(Evented);
 export default class OrderConfigManagerComponent extends Component {
@@ -62,7 +63,7 @@ export default class OrderConfigManagerComponent extends Component {
         this.context = context;
         this.contextModel = contextModel;
         this.configManagerContext = configManagerContext.create();
-        this.tab = this.getTabUsingSlug(tab);
+        this.tab = findActiveTab(this.tabs, tab);
         this.loadOrderConfigs.perform();
     }
 
@@ -255,7 +256,7 @@ export default class OrderConfigManagerComponent extends Component {
      * @action
      */
     @action onTabChanged(tab) {
-        this.tab = this.getTabUsingSlug(tab);
+        this.tab = findActiveTab(this.tabs, tab);
         this.configManagerContext.trigger('onTabChanged');
         contextComponentCallback(this, 'onTabChanged', tab);
     }
@@ -284,18 +285,4 @@ export default class OrderConfigManagerComponent extends Component {
     @action onPressCancel() {
         return contextComponentCallback(this, 'onPressCancel');
     }
-
-    /**
-     * 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];
-    }
 }

addon/components/place-panel.hbs

@@ -33,6 +33,7 @@
             </div>
         </div>
         <div class="tab-content tab-{{this.tab.slug}}">
+            {{log this.tab}}
             {{component this.tab.component place=this.place tabOptions=this.tab options=this.tab.componentParams}}
         </div>
         <Spacer @height="300px" />