From bcffa19e1777bd95eefdb57bae59465c5cfbfadc Mon Sep 17 00:00:00 2001 From: "Ronald A. Richardson" Date: Tue, 10 Sep 2024 11:32:47 +0800 Subject: [PATCH] improved active tab finding and abstracted to utility --- addon/components/contact-panel.js | 19 ++------ addon/components/customer-panel.js | 19 ++------ addon/components/driver-panel.js | 19 ++------ addon/components/fleet-panel.js | 19 ++------ addon/components/fuel-report-panel.js | 19 ++------ addon/components/issue-panel.js | 20 ++------- addon/components/live-map-drawer.js | 19 ++------ addon/components/order-config-manager.js | 19 ++------ addon/components/place-panel.hbs | 1 + addon/components/place-panel.js | 55 ++---------------------- addon/components/vehicle-panel.js | 19 ++------ addon/components/vendor-panel.js | 19 ++------ addon/engine.js | 2 +- addon/utils/find-active-tab.js | 7 +++ app/utils/find-active-tab.js | 1 + tests/unit/utils/find-active-tab-test.js | 10 +++++ 16 files changed, 54 insertions(+), 213 deletions(-) create mode 100644 addon/utils/find-active-tab.js create mode 100644 app/utils/find-active-tab.js create mode 100644 tests/unit/utils/find-active-tab-test.js diff --git a/addon/components/contact-panel.js b/addon/components/contact-panel.js index f5960158..e7da7f2f 100644 --- a/addon/components/contact-panel.js +++ b/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]; - } } diff --git a/addon/components/customer-panel.js b/addon/components/customer-panel.js index eb5db108..b7bdc930 100644 --- a/addon/components/customer-panel.js +++ b/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]; - } } diff --git a/addon/components/driver-panel.js b/addon/components/driver-panel.js index 3204023d..bec22b44 100644 --- a/addon/components/driver-panel.js +++ b/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]; - } } diff --git a/addon/components/fleet-panel.js b/addon/components/fleet-panel.js index a41703b7..182d5af7 100644 --- a/addon/components/fleet-panel.js +++ b/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]; - } } diff --git a/addon/components/fuel-report-panel.js b/addon/components/fuel-report-panel.js index 4d0225ad..ebdbdba2 100644 --- a/addon/components/fuel-report-panel.js +++ b/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]; - } } diff --git a/addon/components/issue-panel.js b/addon/components/issue-panel.js index f8fbbf63..eab82d28 100644 --- a/addon/components/issue-panel.js +++ b/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]; - } } diff --git a/addon/components/live-map-drawer.js b/addon/components/live-map-drawer.js index f1b317d7..c1cf3dfd 100644 --- a/addon/components/live-map-drawer.js +++ b/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]; - } } diff --git a/addon/components/order-config-manager.js b/addon/components/order-config-manager.js index b2dd9c3e..432a136f 100644 --- a/addon/components/order-config-manager.js +++ b/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]; - } } diff --git a/addon/components/place-panel.hbs b/addon/components/place-panel.hbs index 8d6df8c4..23122513 100644 --- a/addon/components/place-panel.hbs +++ b/addon/components/place-panel.hbs @@ -33,6 +33,7 @@
+ {{log this.tab}} {{component this.tab.component place=this.place tabOptions=this.tab options=this.tab.componentParams}}
diff --git a/addon/components/place-panel.js b/addon/components/place-panel.js index 1465a603..facc71a7 100644 --- a/addon/components/place-panel.js +++ b/addon/components/place-panel.js @@ -6,48 +6,14 @@ import { isArray } from '@ember/array'; import PlacePanelDetailComponent from './place-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 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; /** @@ -73,7 +39,6 @@ export default class PlacePanelComponent extends Component { */ get tabs() { const registeredTabs = this.universe.getMenuItemsFromRegistry('fleet-ops: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)) { @@ -89,7 +54,7 @@ export default class PlacePanelComponent extends Component { constructor() { super(...arguments); this.place = this.args.place; - this.tab = this.getTabUsingSlug(this.args.tab); + this.tab = findActiveTab(this.tabs, this.args.tab); applyContextComponentArguments(this); } @@ -112,7 +77,7 @@ export default class PlacePanelComponent extends Component { * @action */ @action onTabChanged(tab) { - this.tab = this.getTabUsingSlug(tab); + this.tab = findActiveTab(this.tabs, tab); contextComponentCallback(this, 'onTabChanged', tab); } @@ -144,18 +109,4 @@ export default class PlacePanelComponent extends Component { @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]; - } } diff --git a/addon/components/vehicle-panel.js b/addon/components/vehicle-panel.js index c7d789f7..2056730b 100644 --- a/addon/components/vehicle-panel.js +++ b/addon/components/vehicle-panel.js @@ -6,6 +6,7 @@ import { isArray } from '@ember/array'; import VehiclePanelDetailComponent from './vehicle-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'; /** * Represents the vehicle panel component, handling vehicle information display and editing. @@ -95,7 +96,7 @@ export default class VehiclePanelComponent extends Component { constructor() { super(...arguments); this.vehicle = this.args.vehicle; - this.tab = this.getTabUsingSlug(this.args.tab); + this.tab = findActiveTab(this.tabs, this.args.tab); applyContextComponentArguments(this); } @@ -118,7 +119,7 @@ export default class VehiclePanelComponent extends Component { * @action */ @action onTabChanged(tab) { - this.tab = this.getTabUsingSlug(tab); + this.tab = findActiveTab(this.tabs, tab); contextComponentCallback(this, 'onTabChanged', tab); } @@ -150,18 +151,4 @@ export default class VehiclePanelComponent extends Component { @action onPressCancel() { return contextComponentCallback(this, 'onPressCancel', this.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]; - } } diff --git a/addon/components/vendor-panel.js b/addon/components/vendor-panel.js index 9a11adf1..1b98d0aa 100644 --- a/addon/components/vendor-panel.js +++ b/addon/components/vendor-panel.js @@ -8,6 +8,7 @@ import VendorPanelPersonnelComponent from './vendor-panel/personnel'; import VendorPanelDriversComponent from './vendor-panel/drivers'; 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 VendorPanelComponent extends Component { @service fetch; @@ -70,7 +71,7 @@ export default class VendorPanelComponent extends Component { constructor() { super(...arguments); this.vendor = this.args.vendor; - this.tab = this.getTabUsingSlug(this.args.tab); + this.tab = findActiveTab(this.tabs, this.args.tab); applyContextComponentArguments(this); } @@ -93,7 +94,7 @@ export default class VendorPanelComponent 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 VendorPanelComponent extends Component { @action onPressCancel() { return contextComponentCallback(this, 'onPressCancel', this.vendor); } - - /** - * 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]; - } } diff --git a/addon/engine.js b/addon/engine.js index aebbba5d..6f286690 100644 --- a/addon/engine.js +++ b/addon/engine.js @@ -76,7 +76,7 @@ export default class FleetOpsEngine extends Engine { // Add menu items to customer portal if (universe.didBootEngine('@fleetbase/customer-portal-engine')) { universe.registerMenuItems('customer-portal:sidebar', [ - universe._createMenuItem('Orders', 'customer-portal.portal.virtual', { icon: 'boxes-packing', component: CustomerOrdersComponent }), + universe._createMenuItem('Orders', 'customer-portal.portal.virtual', { icon: 'boxes-packing', component: CustomerOrdersComponent, view: '' }), ]); } }; diff --git a/addon/utils/find-active-tab.js b/addon/utils/find-active-tab.js new file mode 100644 index 00000000..f275904d --- /dev/null +++ b/addon/utils/find-active-tab.js @@ -0,0 +1,7 @@ +export default function findActiveTab(tabs = [], identifier) { + if (identifier) { + return tabs.find(({ slug, id }) => slug === identifier || id === identifier); + } + + return this.tabs[0]; +} diff --git a/app/utils/find-active-tab.js b/app/utils/find-active-tab.js new file mode 100644 index 00000000..f559107a --- /dev/null +++ b/app/utils/find-active-tab.js @@ -0,0 +1 @@ +export { default } from '@fleetbase/fleetops-engine/utils/find-active-tab'; diff --git a/tests/unit/utils/find-active-tab-test.js b/tests/unit/utils/find-active-tab-test.js new file mode 100644 index 00000000..ae7e4b9e --- /dev/null +++ b/tests/unit/utils/find-active-tab-test.js @@ -0,0 +1,10 @@ +import findActiveTab from 'dummy/utils/find-active-tab'; +import { module, test } from 'qunit'; + +module('Unit | Utility | find-active-tab', function () { + // TODO: Replace this with your real tests. + test('it works', function (assert) { + let result = findActiveTab(); + assert.ok(result); + }); +});