@fleetbase/fleetops-engine 0.2.5 → 0.2.6

package/addon/components/admin/visibility-controls.hbs

@@ -0,0 +1,12 @@
+<ContentPanel @title="Visibility Controls" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <p class="mb-4 dark:text-white text-gray-800">Visibility controls allow you to disable sections of Fleet-Ops. Toggle the checkbox to enable or disable sections to hide in Fleet-ops.</p>
+    {{#each this.visibilitySettings as |visibilityControl|}}
+        <InputGroup @wrapperClass="mb-1i">
+            <Checkbox @value={{visibilityControl.visible}} @label={{concat visibilityControl.name " Visible"}} @onToggle={{fn (mut visibilityControl.visible)}} @helpText="Enable or disable visibility for this section in Fleet-Ops." />
+        </InputGroup>
+    {{/each}}
+</ContentPanel>
+
+<div class="mt-3 flex items-center justify-end">
+    <Button @type="primary" @size="lg" @icon="save" @text="Save Changes" @onClick={{this.saveVisibilitySettings}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+</div>

package/addon/components/admin/visibility-controls.js

@@ -0,0 +1,82 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+
+export default class AdminVisibilityControlsComponent extends Component {
+    @service fetch;
+    @tracked visibilitySettings = [
+        { name: 'Dashboard', route: 'operations.orders', visible: true },
+        { name: 'Service Rates', route: 'operations.service-rates', visible: true },
+        { name: 'Drivers', route: 'management.drivers', visible: true },
+        { name: 'Vehicles', route: 'management.vehicles', visible: true },
+        { name: 'Fleets', route: 'management.fleets', visible: true },
+        { name: 'Vendors', route: 'management.vendors', visible: true },
+        { name: 'Contacts', route: 'management.contacts', visible: true },
+        { name: 'Places', route: 'management.places', visible: true },
+        { name: 'Fuel Reports', route: 'management.fuel-reports', visible: true },
+        { name: 'Issues', route: 'management.issues', visible: true },
+    ];
+    @tracked isLoading = false;
+
+    constructor() {
+        super(...arguments);
+        this.loadVisibilitySettings();
+    }
+
+    @action mutateVisibility(route, visible) {
+        this.visibilitySettings = [...this.visibilitySettings].map((visibilityControl) => {
+            if (visibilityControl.route === route) {
+                return {
+                    ...visibilityControl,
+                    visible,
+                };
+            }
+
+            return visibilityControl;
+        });
+    }
+
+    @action loadVisibilitySettings() {
+        this.isLoading = true;
+
+        this.fetch
+            .get('fleet-ops/settings/visibility')
+            .then(({ visibilitySettings }) => {
+                if (isArray(visibilitySettings)) {
+                    for (let i = 0; i < visibilitySettings.length; i++) {
+                        const visibilityControl = visibilitySettings.objectAt(i);
+                        this.mutateVisibility(visibilityControl.route, visibilityControl.visible);
+                    }
+                }
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+
+    @action saveVisibilitySettings() {
+        this.isLoading = true;
+
+        this.fetch
+            .post('fleet-ops/settings/visibility', { visibilitySettings: this.visibilitySettings })
+            .then(({ visibilitySettings }) => {
+                if (isArray(visibilitySettings)) {
+                    for (let i = 0; i < visibilitySettings.length; i++) {
+                        const visibilityControl = visibilitySettings.objectAt(i);
+                        this.mutateVisibility(visibilityControl.route, visibilityControl.visible);
+                    }
+                }
+            })
+            .catch((error) => {
+                this.notifications.serverError(error);
+            })
+            .finally(() => {
+                this.isLoading = false;
+            });
+    }
+}

package/addon/components/fleet-panel.js

@@ -6,6 +6,7 @@ import { inject as service } from '@ember/service';
 export default class FleetPanelComponent extends Component {
     @service fetch;
     @service modalsManager;
+    @service universe;
     @service store;
     @service fetch;
     @tracked currentTab;
@@ -26,18 +27,26 @@ export default class FleetPanelComponent extends Component {
     }
 
     @action addDriver(driver) {
-        this.fetch.post('fleets/assign-driver', { driver: driver.id, fleet: this.fleet.id });
+        this.fetch.post('fleets/assign-driver', { driver: driver.id, fleet: this.fleet.id }).then(() => {
+            this.universe.trigger('fleet.driver.assigned', this.fleet, driver);
+        });
     }
 
     @action removeDriver(driver) {
-        this.fetch.post('fleets/remove-driver', { driver: driver.id, fleet: this.fleet.id });
+        this.fetch.post('fleets/remove-driver', { driver: driver.id, fleet: this.fleet.id }).then(() => {
+            this.universe.trigger('fleet.driver.unassigned', this.fleet, driver);
+        });
     }
 
     @action addVehicle(vehicle) {
-        this.fetch.post('fleets/assign-vehicle', { vehicle: vehicle.id, fleet: this.fleet.id });
+        this.fetch.post('fleets/assign-vehicle', { vehicle: vehicle.id, fleet: this.fleet.id }).then(() => {
+            this.universe.trigger('fleet.vehicle.assigned', this.fleet, vehicle);
+        });
     }
 
     @action removeVehicle(vehicle) {
-        this.fetch.post('fleets/remove-vehicle', { vehicle: vehicle.id, fleet: this.fleet.id });
+        this.fetch.post('fleets/remove-vehicle', { vehicle: vehicle.id, fleet: this.fleet.id }).then(() => {
+            this.universe.trigger('fleet.vehicle.unassigned', this.fleet, vehicle);
+        });
     }
 }

package/addon/components/fleet-vehicle-listing.hbs

@@ -1,4 +1,4 @@
-{{yield}}<div class="fleet-vehicle-listing" {{did-insert this.setupComponent}} ...attributes>
+<div class="fleet-vehicle-listing" {{did-insert this.setupComponent}} ...attributes>
     <div class="mb-2 flex items-center justify-between">
         <div class="flex items-center">
             <div class="fleet-vehicle-listing-search">

package/addon/components/layout/fleet-ops-sidebar.hbs

@@ -0,0 +1,26 @@
+<div class="mb-2">
+    <Button @text="Create new order" @type="primary" @size="xs" @icon="paper-plane" @iconPrefix="fas" @iconSize="sm" @wrapperClass="w-full" class="w-full" @onClick={{this.onClickCreateOrder}} />
+</div>
+{{#each this.universeMenuItems as |menuItem|}}
+    {{#if menuItem.renderComponentInPlace}}
+        {{component menuItem.component}}
+    {{else}}
+        <Layout::Sidebar::Item @onClick={{fn this.universe.transitionMenuItem (concat this.routePrefix "virtual") menuItem}} @item={{menuItem}} @icon={{menuItem.icon}}>{{menuItem.title}}</Layout::Sidebar::Item>
+    {{/if}}
+{{/each}}
+{{#each this.menuPanels as |menuPanel|}}
+    <Layout::Sidebar::Panel @open={{menuPanel.open}} @title={{menuPanel.title}}>
+        {{#each menuPanel.items as |item|}}
+            <Layout::Sidebar::Item @route={{concat this.routePrefix item.route}} @icon={{item.icon}}>{{item.title}}</Layout::Sidebar::Item>
+        {{/each}}
+    </Layout::Sidebar::Panel>
+{{/each}}
+{{#each this.universeMenuPanels as |menuPanel|}}
+    <Layout::Sidebar::Panel @open={{menuPanel.open}} @title={{menuPanel.title}}>
+        {{#each menuPanel.items as |menuItem|}}
+            <Layout::Sidebar::Item @onClick={{fn this.universe.transitionMenuItem (concat this.routePrefix "virtual") menuItem}} @item={{menuItem}} @icon={{menuItem.icon}}>{{menuItem.title}}</Layout::Sidebar::Item>
+        {{/each}}
+    </Layout::Sidebar::Panel>
+{{/each}}
+<Layout::Sidebar::Item @onClick={{this.onClickSettings}} @icon="cogs">Settings</Layout::Sidebar::Item>
+{{yield}}

package/addon/components/layout/fleet-ops-sidebar.js

@@ -0,0 +1,129 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+
+/**
+ * LayoutFleetOpsSidebarComponent
+ *
+ * This component manages the sidebar layout for Fleet Ops, including visibility and actions.
+ */
+export default class LayoutFleetOpsSidebarComponent extends Component {
+    @service universe;
+    @tracked routePrefix = 'console.fleet-ops.';
+    @tracked menuPanels = [];
+    @tracked universeMenuItems = [];
+    @tracked universeMenuPanels = [];
+
+    constructor() {
+        super(...arguments);
+        this.createMenuItemsFromUniverseRegistry();
+        this.createMenuPanels();
+    }
+
+    createMenuItemsFromUniverseRegistry() {
+        this.universeMenuItems = this.universe.getMenuItemsFromRegistry('engine:fleet-ops');
+        this.universeMenuPanels = this.universe.getMenuPanelsFromRegistry('engine:fleet-ops');
+    }
+
+    /**
+     * Initialize menu panels with visibility settings.
+     */
+    createMenuPanels() {
+        const operationsItems = [
+            { title: 'Dashboard', icon: 'home', route: 'operations.orders' },
+            { title: 'Service Rates', icon: 'file-invoice-dollar', route: 'operations.service-rates' },
+        ];
+
+        const resourcesItems = [
+            { title: 'Drivers', icon: 'route', route: 'management.drivers' },
+            { title: 'Vehicles', icon: 'truck', route: 'management.vehicles' },
+            { title: 'Fleets', icon: 'user-group', route: 'management.fleets' },
+            { title: 'Vendors', icon: 'warehouse', route: 'management.vendors' },
+            { title: 'Contacts', icon: 'address-book', route: 'management.contacts' },
+            { title: 'Places', icon: 'location-dot', route: 'management.places' },
+            { title: 'Fuel Reports', icon: 'gas-pump', route: 'management.fuel-reports' },
+            { title: 'Issues', icon: 'triangle-exclamation', route: 'management.issues' },
+        ];
+
+        const createPanel = (title, routePrefix, items = []) => ({
+            title,
+            open: true,
+            visible: this.isPanelVisible(routePrefix),
+            items: items
+                .map((item) => ({
+                    ...item,
+                    visible: this.isItemVisible(item.route),
+                }))
+                .filter((item) => item.visible),
+        });
+
+        this.menuPanels = [createPanel('Operations', 'operations', operationsItems), createPanel('Resources', 'management', resourcesItems)].filter((panel) => {
+            const isVisible = panel.visible && panel.items.length > 0;
+            return isVisible;
+        });
+    }
+
+    /**
+     * Check if a panel should be visible based on visibility settings.
+     *
+     * @param {string} routePrefix - The route prefix to check for visibility.
+     * @returns {boolean} - Whether the panel should be visible.
+     */
+    isPanelVisible(routePrefix) {
+        return this.isVisible(routePrefix, false);
+    }
+
+    /**
+     * Check if a menu item should be visible based on visibility settings.
+     *
+     * @param {string} routePrefix - The route prefix to check for visibility.
+     * @returns {boolean} - Whether the menu item should be visible.
+     */
+    isItemVisible(routePrefix) {
+        return this.isVisible(routePrefix, true);
+    }
+
+    /**
+     * Utility function to check visibility based on route prefix.
+     *
+     * @param {string} routePrefix - The route prefix to check for visibility.
+     * @param {boolean} exactMatch - Whether to match the route exactly or just the prefix.
+     * @returns {boolean} - Whether the item should be visible.
+     */
+    isVisible(routePrefix, exactMatch) {
+        const { visibilitySettings } = this.args;
+
+        if (!isArray(visibilitySettings)) {
+            return true;
+        }
+
+        return visibilitySettings.some((visibilityControl) => {
+            const match = exactMatch ? visibilityControl.route === routePrefix : visibilityControl.route.startsWith(routePrefix);
+            return match && visibilityControl.visible;
+        });
+    }
+
+    /**
+     * Action handler for creating an order.
+     */
+    @action onClickCreateOrder() {
+        const { onClickCreateOrder } = this.args;
+
+        if (typeof onClickCreateOrder === 'function') {
+            onClickCreateOrder();
+        }
+    }
+
+    /**
+     * Action handler for opening settings.
+     */
+    @action onClickSettings() {
+        const { onClickSettings } = this.args;
+
+        if (typeof onClickSettings === 'function') {
+            onClickSettings();
+        }
+    }
+}

package/addon/engine.js

@@ -3,6 +3,7 @@ import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 import config from './config/environment';
 import services from '@fleetbase/ember-core/exports/services';
+import AdminVisibilityControlsComponent from './components/admin/visibility-controls';
 
 const { modulePrefix } = config;
 const externalRoutes = ['console', 'extensions'];
@@ -18,6 +19,24 @@ export default class FleetOpsEngine extends Engine {
         // register menu item in header
         universe.registerHeaderMenuItem('Fleet-Ops', 'console.fleet-ops', { icon: 'route', priority: 0 });
 
+        // register admin settings -- create a fleet-ops menu panel with it's own setting options
+        universe.registerAdminMenuPanel(
+            'Fleet-Ops Config',
+            [
+                {
+                    title: 'Visibility Controls',
+                    icon: 'eye',
+                    component: AdminVisibilityControlsComponent,
+                },
+            ],
+            {
+                slug: 'fleet-ops',
+            }
+        );
+
+        // create primary registry for engine
+        universe.createRegistry('engine:fleet-ops');
+
         // register the vehicle panel
         universe.createRegistry('component:vehicle-panel');
 

package/addon/helpers/is-section-visible.js

@@ -0,0 +1,5 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function isSectionVisible(positional /*, named*/) {
+    return positional;
+});

package/addon/routes/application.js

@@ -1,15 +1,19 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-import { action } from '@ember/object';
 
 export default class ApplicationRoute extends Route {
     @service loader;
+    @service fetch;
 
-    @action loading(transition) {
+    loading(transition) {
         const resourceName = this.getResouceName(transition);
         this.loader.showOnInitialTransition(transition, 'section.next-view-section', resourceName ? `Loading ${resourceName}...` : `Loading...`);
     }
 
+    model() {
+        return this.fetch.get('fleet-ops/settings/visibility');
+    }
+
     getResouceName(transition) {
         const { to } = transition;
 

package/addon/routes/virtual.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class VirtualRoute extends Route {
+    @service universe;
+
+    model({ slug, view }) {
+        return this.universe.lookupMenuItemFromRegistry('engine:fleet-ops', slug, view);
+    }
+}

package/addon/routes.js

@@ -1,6 +1,7 @@
 import buildRoutes from 'ember-engines/routes';
 
 export default buildRoutes(function () {
+    this.route('virtual', { path: '/:slug/:view' });
     this.route('operations', { path: '/' }, function () {
         this.route('dispatch');
         this.route('zones', function () {});

package/addon/templates/application.hbs

@@ -1,23 +1,5 @@
 <EmberWormhole @to="sidebar-menu-items">
-    <div class="mb-2">
-        <Button @text="Create new order" @type="primary" @size="xs" @icon="paper-plane" @iconPrefix="fas" @iconSize="sm" @wrapperClass="w-full" class="w-full" @onClick={{this.createOrder}} />
-    </div>
-    <Layout::Sidebar::Panel @open={{true}} @title="Operations">
-        <Layout::Sidebar::Item @route="console.fleet-ops.operations.orders" @icon="home">Dashboard</Layout::Sidebar::Item>
-        {{!-- <Layout::Sidebar::Item @route="console.fleet-ops.operations.scheduler" @icon="calendar-day">Scheduler</Layout::Sidebar::Item> --}}
-        <Layout::Sidebar::Item @route="console.fleet-ops.operations.service-rates" @icon="file-invoice-dollar">Service Rates</Layout::Sidebar::Item>
-    </Layout::Sidebar::Panel>
-    <Layout::Sidebar::Panel @open={{true}} @title="Resources">
-        <Layout::Sidebar::Item @route="console.fleet-ops.management.drivers" @icon="route">Drivers</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.fleet-ops.management.vehicles" @icon="truck">Vehicles</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.fleet-ops.management.fleets" @icon="user-group">Fleets</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.fleet-ops.management.vendors" @icon="warehouse">Vendors</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.fleet-ops.management.contacts" @icon="address-book">Contacts</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.fleet-ops.management.places" @icon="location-dot">Places</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.fleet-ops.management.fuel-reports" @icon="gas-pump">Fuel Reports</Layout::Sidebar::Item>
-        <Layout::Sidebar::Item @route="console.fleet-ops.management.issues" @icon="triangle-exclamation">Issues</Layout::Sidebar::Item>
-    </Layout::Sidebar::Panel>
-    <Layout::Sidebar::Item @onClick={{this.toggleSettings}} @icon="cogs">Settings</Layout::Sidebar::Item>
+    <Layout::FleetOpsSidebar @visibilitySettings={{@model.visibilitySettings}} @onClickCreateOrder={{this.createOrder}} @onClickSettings={{this.toggleSettings}} />
 </EmberWormhole>
 
 <Layout::Section::Container>

package/addon/templates/virtual.hbs

@@ -0,0 +1,9 @@
+<Layout::Section::Header @title={{@model.title}} />
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="container mx-auto h-screen" {{increase-height-by 300}}>
+        <div class="max-w-3xl my-10 mx-auto space-y-">
+            {{component @model.component params=@model.componentParams}}
+        </div>
+    </div>
+</Layout::Section::Body>

package/app/components/admin/visibility-controls.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/admin/visibility-controls';

package/app/components/layout/fleet-ops-sidebar.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/components/layout/fleet-ops-sidebar';

package/app/helpers/is-section-visible.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/helpers/is-section-visible';

package/app/routes/virtual.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/routes/virtual';

package/app/templates/virtual.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/fleetops-engine/templates/virtual';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/fleetops-engine",
-    "version": "0.2.5",
+    "version": "0.2.6",
     "description": "Fleetbase Fleet-Ops extension provides a fleet management and last mile delivery operations system module.",
     "fleetbase": {
         "route": "fleet-ops",
@@ -39,9 +39,9 @@
         "publish:github": "npm config set '@fleetbase:registry' https://npm.pkg.github.com/ && npm publish"
     },
     "dependencies": {
-        "@fleetbase/ember-core": "^0.1.3",
-        "@fleetbase/ember-ui": "^0.1.9",
-        "@fleetbase/fleetops-data": "^0.1.0",
+        "@fleetbase/ember-core": "^0.1.4",
+        "@fleetbase/ember-ui": "^0.2.0",
+        "@fleetbase/fleetops-data": "^0.1.1",
         "@fleetbase/leaflet-routing-machine": "^3.2.16",
         "@fortawesome/ember-fontawesome": "^0.4.1",
         "@fortawesome/fontawesome-svg-core": "^6.4.0",