@fleetbase/fleetops-engine 0.3.2 → 0.3.4

package/addon/controllers/management/vendors/index.js

@@ -5,7 +5,7 @@ import { action } from '@ember/object';
 import { isBlank } from '@ember/utils';
 import { timeout } from 'ember-concurrency';
 import { task } from 'ember-concurrency-decorators';
-
+import getVendorStatusOptions from '../../../utils/get-vendor-status-options';
 export default class ManagementVendorsIndexController extends Controller {
     /**
      * Inject the `management.places.index` controller
@@ -68,7 +68,7 @@ export default class ManagementVendorsIndexController extends Controller {
      *
      * @var {Array}
      */
-    queryParams = ['page', 'limit', 'sort', 'query', 'public_id', 'internal_id', 'created_by', 'updated_by', 'status'];
+    queryParams = ['page', 'limit', 'sort', 'query', 'public_id', 'internal_id', 'created_by', 'updated_by', 'status', 'name', 'email', 'phone', 'type', 'country', 'address', 'website_url'];
 
     /**
      * The current page of data being viewed
@@ -112,6 +112,48 @@ export default class ManagementVendorsIndexController extends Controller {
      */
     @tracked status;
 
+    /**
+     * The filterable param `type`
+     *
+     * @var {Array|String}
+     */
+    @tracked type;
+
+    /**
+     * The filterable param `name`
+     *
+     * @var {String}
+     */
+    @tracked name;
+
+    /**
+     * The filterable param `website_url`
+     *
+     * @var {String}
+     */
+    @tracked website_url;
+
+    /**
+     * The filterable param `phone`
+     *
+     * @var {String}
+     */
+    @tracked phone;
+
+    /**
+     * The filterable param `email`
+     *
+     * @var {String}
+     */
+    @tracked email;
+
+    /**
+     * The filterable param `country`
+     *
+     * @var {String}
+     */
+    @tracked country;
+
     /**
      * Rows for the table
      *
@@ -168,6 +210,17 @@ export default class ManagementVendorsIndexController extends Controller {
             filterable: true,
             filterComponent: 'filter/string',
         },
+        {
+            label: 'Website URL',
+            valuePath: 'website_url',
+            cellComponent: 'click-to-copy',
+            width: '80px',
+            resizable: true,
+            sortable: true,
+            hidden: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
         {
             label: 'Phone',
             valuePath: 'phone',
@@ -194,11 +247,13 @@ export default class ManagementVendorsIndexController extends Controller {
         {
             label: 'Type',
             valuePath: 'type',
-            cellComponent: 'table/cell/status',
-            width: '120px',
+            cellComponent: 'table/cell/anchor',
+            action: this.viewVendorPlace,
+            width: '150px',
             resizable: true,
             sortable: true,
             filterable: true,
+            filterParam: 'type',
             filterComponent: 'filter/string',
         },
         {
@@ -206,12 +261,12 @@ export default class ManagementVendorsIndexController extends Controller {
             valuePath: 'country',
             cellComponent: 'table/cell/base',
             cellClassNames: 'uppercase',
-            width: '130px',
+            width: '120px',
             resizable: true,
             sortable: true,
-            hidden: true,
             filterable: true,
-            filterComponent: 'filter/string',
+            filterComponent: 'filter/country',
+            filterParam: 'country',
         },
         {
             label: 'Created At',
@@ -243,7 +298,7 @@ export default class ManagementVendorsIndexController extends Controller {
             sortable: true,
             filterable: true,
             filterComponent: 'filter/multi-option',
-            filterOptions: this.statusOptions,
+            filterOptions: getVendorStatusOptions(),
         },
         {
             label: '',

package/addon/controllers/operations/orders/index.js

@@ -1,4 +1,4 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
@@ -9,20 +9,6 @@ import { timeout } from 'ember-concurrency';
 import { task } from 'ember-concurrency-decorators';
 
 export default class OperationsOrdersIndexController extends Controller {
-    /**
-     * Injection of the `ManagementDriversIndexController` controller
-     *
-     * @memberof OperationsOrdersIndexController
-     */
-    @controller('management.drivers.index') driversController;
-
-    /**
-     * Injection of the `ManagementFleetIndexController` controller
-     *
-     * @memberof OperationsOrdersIndexController
-     */
-    @controller('management.fleets.index') fleetController;
-
     /**
      * Inject the `currentUser` service
      *
@@ -110,6 +96,8 @@ export default class OperationsOrdersIndexController extends Controller {
         'status',
         'type',
         'layout',
+        'drawerOpen',
+        'drawerTab',
     ];
 
     /**
@@ -266,6 +254,13 @@ export default class OperationsOrdersIndexController extends Controller {
      */
     @tracked leafletMap;
 
+    /**
+     * Reference to the drawer context API.
+     *
+     * @type {Object}
+     */
+    @tracked drawer;
+
     /**
      * Current layout type (e.g., 'map', 'table', 'kanban', 'analytics')
      *
@@ -273,6 +268,20 @@ export default class OperationsOrdersIndexController extends Controller {
      */
     @tracked layout = 'map';
 
+    /**
+     * Decides if scope drawer is open.
+     *
+     * @type {Boolean}
+     */
+    @tracked drawerOpen = 0;
+
+    /**
+     * The drawer tab that is active.
+     *
+     * @type {Boolean}
+     */
+    @tracked drawerTab;
+
     /**
      * Flag to determine if the layout is 'map'
      *
@@ -722,6 +731,52 @@ export default class OperationsOrdersIndexController extends Controller {
         this.liveMap = liveMap;
     }
 
+    /**
+     * Sets the drawer component context api.
+     *
+     * @param {Object} drawerApi
+     * @memberof OperationsOrdersIndexController
+     */
+    @action setDrawerContext(drawerApi) {
+        this.drawer = drawerApi;
+    }
+
+    /**
+     * Toggles the LiveMap drawer component.
+     *
+     * @memberof OperationsOrdersIndexController
+     */
+    @action onPressLiveMapDrawerToggle() {
+        if (this.drawer) {
+            this.drawer.toggleMinimize({
+                onToggle: (drawerApi) => {
+                    this.drawerOpen = drawerApi.isMinimized ? 0 : 1;
+                },
+            });
+        }
+    }
+
+    /**
+     * Handles the resize end event for the `<LiveMapDrawer />` component.
+     *
+     * @params {Object} event
+     * @params {Object.drawerPanelNode|HTMLElement}
+     * @memberof OperationsOrdersIndexController
+     */
+    @action onDrawerResizeEnd({ drawerPanelNode }) {
+        const rect = drawerPanelNode.getBoundingClientRect();
+
+        if (rect.height === 0) {
+            this.drawerOpen = 0;
+        } else if (rect.height > 1) {
+            this.drawerOpen = 1;
+        }
+    }
+
+    @action onDrawerTabChanged(tabName) {
+        this.drawerTab = tabName;
+    }
+
     /**
      * Exports all orders.
      * @action

package/addon/controllers/operations/scheduler/index.js

@@ -1,31 +1,26 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { computed, action } from '@ember/object';
+import { action } from '@ember/object';
 import { format, isValid as isValidDate } from 'date-fns';
+import createFullCalendarEventFromOrder from '../../../utils/create-full-calendar-event-from-order';
 
 export default class OperationsSchedulerIndexController extends Controller {
     @service modalsManager;
     @service notifications;
-
-    @computed('model.@each.scheduled_at') get scheduledOrders() {
-        return this.model.filter((order) => isValidDate(order.scheduled_at));
-    }
-
-    @computed('model.@each.scheduled_at') get unscheduledOrders() {
-        return this.model.filter((order) => !order.scheduled_at);
-    }
-
-    @computed('scheduledOrders.@each.scheduled_at') get events() {
-        return this.scheduledOrders.map((order) => ({
-            id: order.id,
-            title: `${order.scheduledAtTime} - ${order.public_id}`,
-            start: order.scheduled_at,
-            allDay: true,
-        }));
+    @service store;
+    @service hostRouter;
+    @tracked scheduledOrders = [];
+    @tracked unscheduledOrders = [];
+    @tracked events = [];
+
+    @action setCalendarApi(calendar) {
+        this.calendar = calendar;
     }
 
-    @action viewEvent(order, eventClickInfo) {
-        const { event } = eventClickInfo;
+    @action viewEvent(order) {
+        // get the event from the calendar
+        let event = this.calendar.getEventById(order.id);
 
         this.modalsManager.show('modals/order-event', {
             title: `Scheduling for ${order.public_id}`,
@@ -34,7 +29,7 @@ export default class OperationsSchedulerIndexController extends Controller {
             hideDeclineButton: true,
             order,
             reschedule: (date) => {
-                if (typeof date?.toDate === 'function') {
+                if (date && typeof date.toDate === 'function') {
                     date = date.toDate();
                 }
 
@@ -51,15 +46,27 @@ export default class OperationsSchedulerIndexController extends Controller {
                 }
 
                 return order.save().then((order) => {
-                    this.notifications.success(`'${order.public_id}' has been updated.`);
+                    // remove event from calendar
+                    if (event) {
+                        event.remove();
+                    }
 
-                    // update event props
-                    event?.setProp('title', order.eventTitle);
+                    if (order.scheduled_at) {
+                        // notify order has been scheduled
+                        this.notifications.success(`Order '${order.public_id}' has been scheduled at ${order.scheduledAt}.`);
+                        // add event to calendar
+                        event = this.calendar.addEvent(createFullCalendarEventFromOrder(order));
+                    } else {
+                        this.notifications.info(`Order '${order.public_id}' has been unscheduled.`);
+                    }
 
-                    // remove event from calendar if unscheduled
-                    if (!order.scheduled_at || !isValidDate(order.scheduled_at)) {
-                        event.remove();
+                    // update event props
+                    if (event && typeof event.setProp === 'function') {
+                        event.setProp('title', order.eventTitle);
                     }
+
+                    // refresh route
+                    this.hostRouter.refresh();
                 });
             },
         });
@@ -80,7 +87,9 @@ export default class OperationsSchedulerIndexController extends Controller {
         const order = this.store.peekRecord('order', data.id);
 
         order.set('scheduled_at', date);
-        order.save();
+        return order.save().then(() => {
+            this.hostRouter.refresh();
+        });
     }
 
     @action receivedEvent(eventReceivedInfo) {
@@ -88,7 +97,9 @@ export default class OperationsSchedulerIndexController extends Controller {
         const order = this.store.peekRecord('order', event.id);
 
         // update event props
-        event?.setProp('title', order.eventTitle);
+        if (typeof event.setProp === 'function') {
+            event.setProp('title', order.eventTitle);
+        }
     }
 
     @action rescheduleEventFromDrag(eventDropInfo) {
@@ -102,9 +113,13 @@ export default class OperationsSchedulerIndexController extends Controller {
 
         // set and save order props
         order.set('scheduled_at', isValidDate(newDate) ? newDate : start);
-        order.save();
+        order.save().then(() => {
+            this.hostRouter.refresh();
+        });
 
         // update event props
-        event?.setProp('title', order.eventTitle);
+        if (typeof event.setProp === 'function') {
+            event.setProp('title', order.eventTitle);
+        }
     }
 }

package/addon/routes/management/contacts/index.js

@@ -15,6 +15,14 @@ export default class ManagementContactsIndexRoute extends Route {
         sort: { refreshModel: true },
         query: { refreshModel: true },
         status: { refreshModel: true },
+        name: { refreshModel: true },
+        title: { refreshModel: true },
+        phone: { refreshModel: true },
+        email: { refreshModel: true },
+        type: { refreshModel: true },
+        internal_id: { refreshModel: true },
+        createdAt: { refreshModel: true },
+        updatedAt: { refreshModel: true },
     };
 
     model(params) {

package/addon/routes/management/fleets/index.js

@@ -15,11 +15,17 @@ export default class ManagementFleetsIndexRoute extends Route {
         sort: { refreshModel: true },
         query: { refreshModel: true },
         status: { refreshModel: true },
-        internal_id: { refreshModel: true },
+        public_id: { refreshModel: true },
         zone: { refreshModel: true },
         service_area: { refreshModel: true },
-        parent_fleet: { refreshModel: true },
+        parent_fleet_uuid: { refreshModel: true },
         task: { refreshModel: true },
+        name: { refreshModel: true },
+        vendor: { refreshModel: true },
+        drivers_count: { refreshModel: true },
+        drivers_online_count: { refreshModel: true },
+        createdAt: { refreshModel: true },
+        updatedAt: { refreshModel: true },
     };
 
     model(params) {

package/addon/routes/management/fuel-reports/index.js

@@ -15,8 +15,14 @@ export default class ManagementFuelReportsIndexRoute extends Route {
         sort: { refreshModel: true },
         query: { refreshModel: true },
         vehicle: { refreshModel: true },
+        reporter: { refreshModel: true },
         driver: { refreshModel: true },
         status: { refreshModel: true },
+        createdAt: { refreshModel: true },
+        updatedAt: { refreshModel: true },
+        public_id: { refreshModel: true },
+        volume: { refreshModel: true },
+        odometer: { refreshModel: true },
     };
 
     model(params) {

package/addon/routes/management/issues/index.js

@@ -14,8 +14,16 @@ export default class ManagementIssuesIndexRoute extends Route {
         limit: { refreshModel: true },
         sort: { refreshModel: true },
         query: { refreshModel: true },
-        country: { refreshModel: true },
+        priority: { refreshModel: true },
         status: { refreshModel: true },
+        vehicle: { refreshModel: true },
+        driver: { refreshModel: true },
+        assignee: { refreshModel: true },
+        reporter: { refreshModel: true },
+        type: { refreshModel: true },
+        category: { refreshModel: true },
+        updatedAt: { refreshModel: true },
+        createdAt: { refreshModel: true },
     };
 
     model(params) {

package/addon/routes/management/places/index.js

@@ -15,9 +15,19 @@ export default class ManagementPlacesIndexRoute extends Route {
         sort: { refreshModel: true },
         query: { refreshModel: true },
         country: { refreshModel: true },
+        name: { refreshModel: true },
+        address: { refreshModel: true },
+        public_id: { refreshModel: true },
+        city: { refreshModel: true },
+        phone: { refreshModel: true },
+        neighborhood: { refreshModel: true },
+        postal_code: { refreshModel: true },
+        state: { refreshModel: true },
+        createdAt: { refreshModel: true },
+        updatedAt: { refreshModel: true },
     };
 
     model(params) {
-        return this.store.query('place', { params });
+        return this.store.query('place', { ...params });
     }
 }

package/addon/routes/management/vehicles/index.js

@@ -10,14 +10,14 @@ export default class ManagementVehiclesIndexRoute extends Route {
         sort: { refreshModel: true },
         query: { refreshModel: true },
         status: { refreshModel: true },
-        name: { refreshModel: true },
+        display_name: { refreshModel: true },
         public_id: { refreshModel: true },
         vin: { refreshModel: true },
         plate_number: { refreshModel: true },
-        vehicle_make: { refreshModel: true },
-        vehicle_model: { refreshModel: true },
+        model: { refreshModel: true },
         year: { refreshModel: true },
         country: { refreshModel: true },
+        make: { refreshModel: true },
         fleet: { refreshModel: true },
         vendor: { refreshModel: true },
         driver: { refreshModel: true },

package/addon/routes/management/vendors/index.js

@@ -16,6 +16,14 @@ export default class ManagementVendorsIndexRoute extends Route {
         query: { refreshModel: true },
         country: { refreshModel: true },
         status: { refreshModel: true },
+        name: { refreshModel: true },
+        email: { refreshModel: true },
+        address: { refreshModel: true },
+        phone: { refreshModel: true },
+        type: { refreshModel: true },
+        createdAt: { refreshModel: true },
+        updatedAt: { refreshModel: true },
+        website_url: { refreshModel: true },
     };
 
     model(params) {

package/addon/routes/operations/scheduler/index.js

@@ -1,10 +1,35 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { isValid as isValidDate } from 'date-fns';
+import { isNone } from '@ember/utils';
+import createFullCalendarEventFromOrder from '../../../utils/create-full-calendar-event-from-order';
+
+const getUnscheduledOrder = (order) => {
+    return isNone(order.scheduled_at);
+};
+
+const getScheduledOrder = (order) => {
+    return isValidDate(order.scheduled_at);
+};
 
 export default class OperationsSchedulerIndexRoute extends Route {
     @service store;
 
     model() {
-        return this.store.query('order', { status: 'created', with: ['payload'] });
+        return this.store.query('order', { status: 'created', with: ['payload', 'driverAssigned.vehicle'] });
+    }
+
+    setupController(controller, model) {
+        // get orders
+        const orders = model.toArray();
+
+        // set unscheduled orders
+        controller.unscheduledOrders = orders.filter(getUnscheduledOrder);
+
+        // set scheduled orders
+        controller.scheduledOrders = orders.filter(getScheduledOrder);
+
+        // create events from scheduledOrders
+        controller.events = controller.scheduledOrders.map(createFullCalendarEventFromOrder);
     }
 }

package/addon/styles/fleetops-engine.css

@@ -0,0 +1,28 @@
+.scheduler-left-sidebar {
+    border-right: 1px rgba(229, 231, 235, 1) solid;
+    height: 100vh;
+    overflow-y: scroll;
+}
+
+body[data-theme="dark"] .scheduler-left-sidebar {
+    border-right: 1px rgba(55, 65, 81, 1) solid;
+}
+
+.scheduler-left-sidebar > .next-content-panel-wrapper  > .next-content-panel-container  > .next-content-panel > .next-content-panel-header.next-content-panel-is-closed {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.scheduler-left-sidebar > .next-content-panel-wrapper  > .next-content-panel-container  > .next-content-panel > .next-content-panel-header {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+}
+
+.scheduler-left-sidebar > .next-content-panel-wrapper  > .next-content-panel-container  > .next-content-panel > .next-content-panel-body {
+    border-left: 0;
+    border-right: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}

package/addon/templates/operations/orders/index.hbs

@@ -13,9 +13,9 @@
 {{#if this.isMapLayout}}
     <MapContainer @layout={{this.layout}} @onReady={{this.onMapContainerReady}}>
         <GlobalSearch @visible={{this.isSearchVisible}} @onPressOrder={{this.viewOrder}} />
-        <MapContainer::Toolbar @activeOrdersCount={{this.activeOrdersCount}} @liveMap={{this.liveMap}} @map={{this.leafletMap}} @onPressViewOrders={{this.toggleOrdersPanel}} @onPressSearch={{this.toggleSearch}} @onPressCreateOrder={{this.createOrder}} @onPressCreateDriver={{this.driversController.createDriver}} @onPressDriverProfile={{this.driversController.viewDriver}} />
+        <MapContainer::Toolbar @activeOrdersCount={{this.activeOrdersCount}} @liveMap={{this.liveMap}} @map={{this.leafletMap}} @onPressViewOrders={{this.toggleOrdersPanel}} @onPressSearch={{this.toggleSearch}} @onPressCreateOrder={{this.createOrder}} @onPressLiveMapDrawerToggle={{this.onPressLiveMapDrawerToggle}} />
         <OrderListOverlay @noBackdrop={{true}} @fullHeight={{true}} @outView={{not this.isOrdersPanelVisible}} @width={{if (media 'isMobile') "100%" "338px"}} @onPressCancel={{this.hideOrdersPanel}} @onPressCreateOrder={{this.createOrder}} @onPressViewOrder={{this.viewOrder}} @onPressCreateFleet={{this.fleetController.createFleet}} @onPressManageFleet={{this.fleetController.viewFleet}} @onPressCancelOrders={{this.bulkCancelOrders}} @onPressDeleteOrders={{this.bulkDeleteOrders}} />
-        <LiveMap id="leafletMap" class="next-leaflet-container-map" @lat={{1.3521}} @lng={{103.8198}} @zoom={{12}} @zoomControl={{false}} @onLoad={{this.setMapReference}} {{set-container-dimensions}} />
+        <LiveMap id="leafletMap" class="next-leaflet-container-map" @lat={{1.3521}} @lng={{103.8198}} @zoom={{12}} @zoomControl={{false}} @onLoad={{this.setMapReference}} @onDrawerReady={{this.setDrawerContext}} @isDrawerMinimized={{not this.drawerOpen}} @onDrawerResizeEnd={{this.onDrawerResizeEnd}} @onDrawerTabChanged={{this.onDrawerTabChanged}} @drawerTab={{this.drawerTab}} {{set-container-dimensions}} />
     </MapContainer>
 {{/if}}
 

package/addon/templates/operations/scheduler/index.hbs

@@ -1,10 +1,18 @@
 <Layout::Section::Header @title="Scheduler" />
 
-{{!-- <div>
-    <div class="p-6">
-        <div class="grid grid-cols-3 gap-4">
-            <div class="space-y-4">
-                <ContentPanel @title="Unscheduled Orders" @titleStatuRight={{this.unscheduledOrders.length}} @titleStatuRightClass="info-status-badge" @hideStatusDot={{true}} @open={{this.unscheduledOrders.length}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+<Layout::Section::Body class="overflow-y-scroll h-screen">
+    <div class="h-screen">
+        <div class="grid grid-cols-1 lg:grid-cols-3">
+            <div class="scheduler-left-sidebar">
+                <ContentPanel
+                    @title="Unscheduled Orders"
+                    @titleStatuRight={{this.unscheduledOrders.length}}
+                    @titleStatuRightClass="info-status-badge"
+                    @hideStatusDot={{true}}
+                    @open={{true}}
+                    @pad={{true}}
+                    @panelBodyClass="bg-white dark:bg-gray-900"
+                >
                     <div class="space-y-4">
                         {{#each this.unscheduledOrders as |order|}}
                             <FullCalendar::Draggable @eventData={{json-hash id=order.id title=order.eventTitle allDay=true}}>
@@ -13,7 +21,15 @@
                         {{/each}}
                     </div>
                 </ContentPanel>
-                <ContentPanel @title="Scheduled Orders" @titleStatuRight={{this.scheduledOrders.length}} @titleStatusRightClass="info-status-badge" @hideStatusDot={{true}} @open={{this.scheduledOrders.length}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <ContentPanel
+                    @title="Scheduled Orders"
+                    @titleStatuRight={{this.scheduledOrders.length}}
+                    @titleStatusRightClass="info-status-badge"
+                    @hideStatusDot={{true}}
+                    @open={{true}}
+                    @pad={{true}}
+                    @panelBodyClass="bg-white dark:bg-gray-900"
+                >
                     <div class="space-y-4">
                         {{#each this.scheduledOrders as |order|}}
                             <Order::ScheduleCard @order={{order}} @titleClass="cursor-pointer" @onTitleClick={{fn this.viewEvent order}} />
@@ -22,9 +38,17 @@
                 </ContentPanel>
             </div>
 
-            <div class="col-span-2">
-                <FullCalendar @events={{this.events}} @onDrop={{this.scheduleEventFromDrop}} @onEventReceive={{this.receivedEvent}} @onEventDrop={{this.rescheduleEventFromDrag}} @onEventClick={{this.viewOrderAsEvent}} />
+            <div class="col-span-2 p-4">
+                <FullCalendar
+                    @events={{this.events}}
+                    @editable={{true}}
+                    @onDrop={{this.scheduleEventFromDrop}}
+                    @onEventReceive={{this.receivedEvent}}
+                    @onEventDrop={{this.rescheduleEventFromDrag}}
+                    @onEventClick={{this.viewOrderAsEvent}}
+                    @onInit={{this.setCalendarApi}}
+                />
             </div>
         </div>
     </div>
-</div> --}}
+</Layout::Section::Body>

package/addon/utils/create-full-calendar-event-from-order.js

@@ -0,0 +1,8 @@
+export default function createFullCalendarEventFromOrder(order) {
+    return {
+        id: order.id,
+        title: `${order.scheduledAtTime} - ${order.public_id}`,
+        start: order.scheduled_at,
+        allDay: true,
+    };
+}