@fleetbase/storefront-engine 0.3.5 → 0.3.6

package/addon/models/product.js

@@ -1,4 +1,6 @@
 import Model, { attr, belongsTo, hasMany } from '@ember-data/model';
+import ProductAddonCategoryModel from './product-addon-category';
+import AddonCategoryModel from './addon-category';
 import { tracked } from '@glimmer/tracking';
 import { getOwner } from '@ember/application';
 import { setProperties } from '@ember/object';
@@ -237,4 +239,64 @@ export default class ProductModel extends Model {
                 });
         });
     }
+
+    createAddonCategory(category) {
+        const owner = getOwner(this);
+        const store = owner.lookup('service:store');
+        if (store) {
+            const productAddonCategory = store.createRecord('product-addon-category', {
+                product_uuid: this.id,
+                category_uuid: category.id,
+                name: category.name,
+                excluded_addons: [],
+                category,
+            });
+
+            this.addon_categories.pushObject(productAddonCategory);
+        }
+    }
+
+    doesProductAddonCategoryExist(category) {
+        const productAddonCategories = this.addon_categories;
+        return productAddonCategories.find((_) => _.category_uuid === category.id) !== undefined;
+    }
+
+    isProductAddonCategory(_) {
+        return _ instanceof ProductAddonCategoryModel;
+    }
+
+    isAddonCategory(_) {
+        return _ instanceof AddonCategoryModel;
+    }
+
+    incomingCategoriesIsMissingExistingAddonCategory(incomingAddonCategories = [], existingProductAddonCategory) {
+        const existingProductCategoryFromIncoming = incomingAddonCategories.find((addonCategory) => {
+            if (this.isAddonCategory(addonCategory)) {
+                return addonCategory.id === existingProductAddonCategory.category_uuid;
+            }
+            return addonCategory.category_uuid === existingProductAddonCategory.category_uuid;
+        });
+        return existingProductCategoryFromIncoming === undefined;
+    }
+
+    syncProductAddonCategories(incomingAddonCategories = []) {
+        // remove old categories first
+        const productAddonCategories = this.addon_categories;
+        for (let i = 0; i < productAddonCategories.length; i++) {
+            const productAddonCategory = productAddonCategories[i];
+            if (this.incomingCategoriesIsMissingExistingAddonCategory(incomingAddonCategories, productAddonCategory)) {
+                this.addon_categories = productAddonCategories.filter((_) => _.id !== productAddonCategory.id);
+                productAddonCategory.destroyRecord();
+            }
+        }
+
+        // add incoming non existing addon categories
+        for (let i = 0; i < incomingAddonCategories.length; i++) {
+            const incomingAddonCategory = incomingAddonCategories[i];
+            if (this.isProductAddonCategory(incomingAddonCategory) || this.doesProductAddonCategoryExist(incomingAddonCategory)) {
+                continue;
+            }
+            this.createAddonCategory(incomingAddonCategory);
+        }
+    }
 }

package/addon/routes/customers/index/view.js

@@ -0,0 +1,14 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class CustomersIndexViewRoute extends Route {
+    @service store;
+
+    queryParams = {
+        view: { refreshModel: false },
+    };
+
+    model({ public_id }) {
+        return this.store.findRecord('contact', public_id);
+    }
+}

package/addon/routes/networks/index/network/customers.js

@@ -1,6 +1,35 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { action, set } from '@ember/object';
+import isNestedRouteTransition from '@fleetbase/ember-core/utils/is-nested-route-transition';
 
 export default class NetworksIndexNetworkCustomersRoute extends Route {
     @service store;
+    @service storefront;
+
+    queryParams = {
+        page: { refreshModel: true, as: 'n_page' },
+        limit: { refreshModel: true, as: 'n_limit' },
+        sort: { refreshModel: true, as: 'n_sort' },
+        query: { refreshModel: true, as: 'n_query' },
+        status: { refreshModel: true, as: 'n_status' },
+        phone: { refreshModel: true },
+        email: { refreshModel: true },
+        address: { refreshModel: true },
+        public_id: { refreshModel: true },
+        internal_id: { refreshModel: true },
+        created_at: { refreshModel: true, as: 'n_created_at' },
+        updated_at: { refreshModel: true, as: 'n_updated_at' },
+    };
+
+    @action willTransition(transition) {
+        if (isNestedRouteTransition(transition)) {
+            set(this.queryParams, 'page.refreshModel', false);
+            set(this.queryParams, 'sort.refreshModel', false);
+        }
+    }
+
+    model(params) {
+        return this.store.query('customer', { ...params, storefront: this.storefront.getActiveStore('public_id') });
+    }
 }

package/addon/routes/networks/index/network/orders.js

@@ -3,4 +3,9 @@ import { inject as service } from '@ember/service';
 
 export default class NetworksIndexNetworkOrdersRoute extends Route {
     @service store;
+    @service storefront;
+
+    model(params) {
+        return this.store.query('order', { ...params, storefront: this.storefront.getActiveStore('public_id') });
+    }
 }

package/addon/routes/networks/index.js

@@ -23,6 +23,6 @@ export default class NetworksIndexRoute extends Route {
     }
 
     model(params) {
-        return this.store.query('network', params);
+        return this.store.query('network', { with_gateways: 1, with_notification_channels: 1, ...params });
     }
 }

package/addon/routes/orders/index/view.js

@@ -1,3 +1,24 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
-export default class OrdersIndexViewRoute extends Route {}
+export default class OrdersIndexViewRoute extends Route {
+    @service currentUser;
+    @service notifications;
+    @service store;
+    @service socket;
+
+    @action error(error) {
+        this.notifications.serverError(error);
+    }
+
+    model({ public_id }) {
+        const order = this.store.queryRecord('order', {
+            public_id,
+            single: true,
+            with: ['payload', 'driverAssigned', 'orderConfig', 'customer', 'facilitator', 'trackingStatuses', 'trackingNumber', 'purchaseRate', 'comments', 'files'],
+        });
+
+        return order;
+    }
+}

package/addon/routes/products/index/category/edit.js

@@ -1,5 +1,6 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
+import { filterHasManyForNewRecords } from '../../../../serializers/product';
 
 export default class ProductsIndexCategoryEditRoute extends Route {
     @service store;
@@ -12,4 +13,9 @@ export default class ProductsIndexCategoryEditRoute extends Route {
             with: ['addonCategories', 'variants', 'files', 'hours'],
         });
     }
+
+    setupController(controller, model) {
+        super.setupController(...arguments);
+        controller.product = filterHasManyForNewRecords(model, ['variants', 'addon_categories', 'hours']);
+    }
 }

package/addon/routes/products/index/category/new.js

@@ -2,6 +2,8 @@ import Route from '@ember/routing/route';
 
 export default class ProductsIndexCategoryNewRoute extends Route {
     didTransition() {
-        this.controller?.reset();
+        if (this.controller) {
+            this.controller.reset();
+        }
     }
 }

package/addon/routes.js

@@ -16,6 +16,7 @@ export default buildRoutes(function () {
     this.route('customers', function () {
         this.route('index', { path: '/' }, function () {
             this.route('edit', { path: '/:public_id' });
+            this.route('view', { path: '/:public_id' });
         });
     });
     this.route('orders', function () {

package/addon/serializers/product-variant-option.js

@@ -0,0 +1,14 @@
+import ApplicationSerializer from '@fleetbase/ember-core/serializers/application';
+
+export default class ProductVariantOptionSerializer extends ApplicationSerializer {
+    serialize(snapshot) {
+        return {
+            uuid: snapshot.record.get('id'),
+            product_variant_uuid: snapshot.record.get('product_variant_uuid'),
+            name: snapshot.record.get('name'),
+            description: snapshot.record.get('description'),
+            additional_cost: snapshot.record.get('additional_cost'),
+            translations: snapshot.record.get('additional_cost'),
+        };
+    }
+}

package/addon/serializers/product-variant.js

@@ -1,5 +1,6 @@
 import ApplicationSerializer from '@fleetbase/ember-core/serializers/application';
 import { EmbeddedRecordsMixin } from '@ember-data/serializer/rest';
+import { isArray } from '@ember/array';
 
 export default class ProductVariantSerializer extends ApplicationSerializer.extend(EmbeddedRecordsMixin) {
     /**
@@ -12,4 +13,30 @@ export default class ProductVariantSerializer extends ApplicationSerializer.exte
             options: { embedded: 'always' },
         };
     }
+
+    serialize(snapshot) {
+        const options = snapshot.record.get('options');
+        return {
+            uuid: snapshot.record.get('id'),
+            product_uuid: snapshot.record.get('product_uuid'),
+            name: snapshot.record.get('name'),
+            description: snapshot.record.get('description'),
+            is_multiselect: snapshot.record.get('is_multiselect'),
+            is_required: snapshot.record.get('is_required'),
+            translations: snapshot.record.get('translations'),
+            options: isArray(options) ? Array.from(options) : [],
+        };
+    }
+
+    serializeHasMany(snapshot, json, relationship) {
+        let key = relationship.key;
+
+        if (key === 'options') {
+            const options = snapshot.record.get('options');
+            json.options = isArray(options) ? Array.from(options) : [];
+            console.log('[ProductVariantSerializer #json.options]', json.options);
+        }
+
+        return super.serializeHasMany(...arguments);
+    }
 }

package/addon/serializers/product.js

@@ -2,6 +2,27 @@ import ApplicationSerializer from '@fleetbase/ember-core/serializers/application
 import { EmbeddedRecordsMixin } from '@ember-data/serializer/rest';
 import { isArray } from '@ember/array';
 
+export function filterHasManyForNewRecords(model, relations = []) {
+    for (let i = 0; i < relations.length; i++) {
+        let relationKey = relations[i];
+        let data = model[relationKey];
+        if (isArray(data)) {
+            data = data.filter((_) => {
+                if (relationKey === 'variants') {
+                    _ = filterHasManyForNewRecords(_, ['options']);
+                }
+                return !_.isNew;
+            });
+        } else {
+            data = [];
+        }
+
+        model.set(relationKey, data);
+    }
+
+    return model;
+}
+
 export default class ProductSerializer extends ApplicationSerializer.extend(EmbeddedRecordsMixin) {
     /**
      * Embedded relationship attributes
@@ -24,11 +45,12 @@ export default class ProductSerializer extends ApplicationSerializer.extend(Embe
 
         if (key === 'addon_categories') {
             const addonCategories = snapshot.record.get('addon_categories');
+            json.addon_categories = isArray(addonCategories) ? Array.from(addonCategories) : [];
+        }
 
-            if (isArray(addonCategories)) {
-                json.addon_categories = addonCategories;
-            }
-            return;
+        if (key === 'variants') {
+            const variants = snapshot.record.get('variants');
+            json.variants = isArray(variants) ? Array.from(variants) : [];
         }
 
         return super.serializeHasMany(...arguments);

package/addon/services/context-panel.js

@@ -0,0 +1,210 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { camelize } from '@ember/string';
+import getModelName from '@fleetbase/ember-core/utils/get-model-name';
+import getWithDefault from '@fleetbase/ember-core/utils/get-with-default';
+import isObject from '@fleetbase/ember-core/utils/is-object';
+
+/**
+ * Service for managing the state and interactions of the context panel.
+ *
+ * @class ContextPanelService
+ * @memberof @fleetbase/storefront
+ * @extends Service
+ */
+export default class ContextPanelService extends Service {
+    /**
+     * Registry mapping model names to their corresponding component details.
+     * @type {Object}
+     */
+    registry = {
+        customer: {
+            viewing: {
+                component: 'customer-panel',
+                componentArguments: [{ isResizable: true }, { width: '500px' }],
+            },
+        },
+        order: {
+            viewing: {
+                component: 'order-panel',
+                componentArguments: [{ isResizable: true }, { width: '500px' }],
+            },
+        },
+    };
+
+    /**
+     * The current context or model object.
+     * @type {Object}
+     * @tracked
+     */
+    @tracked currentContext;
+
+    /**
+     * The current registry configuration for the current context.
+     * @type {Object}
+     * @tracked
+     */
+    @tracked currentContextRegistry;
+
+    /**
+     * Arguments for the current context component.
+     * @type {Object}
+     * @tracked
+     */
+    @tracked currentContextComponentArguments = {};
+
+    /**
+     * Additional options for controlling the context.
+     * @type {Object}
+     * @tracked
+     */
+    @tracked contextOptions = {};
+
+    /**
+     * Focuses on a given model and intent.
+     *
+     * @method
+     * @param {Object} model - The model to focus on.
+     * @param {String} [intent='viewing'] - The type of intent ('viewing' or 'editing').
+     * @action
+     */
+    @action focus(model, intent = 'viewing', options = {}) {
+        // handle focus which is not based on a model resource
+        // this is purely intent
+        if (typeof model === 'string') {
+            if (isObject(intent)) {
+                options = intent;
+            }
+
+            const registry = this.registry[model];
+            const dynamicArgs = getWithDefault(options, 'args', {});
+            if (registry) {
+                this.currentContext = null;
+                this.currentContextRegistry = registry;
+                this.currentContextComponentArguments = this.createDynamicArgsFromRegistry(registry, model, dynamicArgs);
+                this.contextOptions = options;
+
+                return this;
+            }
+
+            throw new Error(`Unable to focus selected context: ${model}`);
+        }
+
+        const modelName = getModelName(model);
+        const registry = this.getRegistryFromModelName(modelName);
+        const dynamicArgs = getWithDefault(options, 'args', {});
+        if (registry && registry[intent]) {
+            this.currentContext = model;
+            this.currentContextRegistry = registry[intent];
+            this.currentContextComponentArguments = this.createDynamicArgsFromRegistry(registry[intent], model, dynamicArgs);
+            this.contextOptions = options;
+            return this;
+        }
+    }
+
+    /**
+     * Get the correct registry from the modelName provided.
+     *
+     * @param {string} modelName
+     * @return {object}
+     * @memberof ContextPanelService
+     */
+    getRegistryFromModelName(modelName) {
+        if (typeof modelName === 'string' && modelName.includes('-')) {
+            modelName = camelize(modelName);
+        }
+        return this.registry[modelName];
+    }
+
+    /**
+     * Clears the current context and associated details.
+     *
+     * @method
+     * @action
+     */
+    @action clear() {
+        this.currentContext = null;
+        this.currentContextRegistry = null;
+        this.currentContextComponentArguments = {};
+        this.contextOptions = {};
+    }
+
+    /**
+     * Changes the intent for the current context.
+     *
+     * @method
+     * @param {String} intent - The new intent.
+     * @action
+     */
+    @action changeIntent(intent) {
+        if (this.currentContext) {
+            return this.focus(this.currentContext, intent);
+        }
+    }
+
+    /**
+     * Sets an option key-value pair.
+     *
+     * @method
+     * @param {String} key - The option key.
+     * @param {*} value - The option value.
+     */
+    setOption(key, value) {
+        this.contextOptions = {
+            ...this.contextOptions,
+            [key]: value,
+        };
+    }
+
+    /**
+     * Retrieves the value of an option key.
+     *
+     * @method
+     * @param {String} key - The option key.
+     * @param {*} [defaultValue=null] - The default value to return if the key is not found.
+     * @returns {*}
+     */
+    getOption(key, defaultValue = null) {
+        const value = this.contextOptions[key];
+
+        if (value === undefined) {
+            return defaultValue;
+        }
+
+        return value;
+    }
+
+    /**
+     * Generates dynamic arguments for a given registry and model.
+     *
+     * @method
+     * @param {Object} registry - The registry details for a given model.
+     * @param {Object} model - The model object.
+     * @returns {Object} The dynamic arguments.
+     */
+    createDynamicArgsFromRegistry(registry, model, additionalArgs = {}) {
+        // Generate dynamic arguments object
+        const dynamicArgs = {
+            [camelize(getModelName(model))]: model,
+        };
+
+        const componentArguments = registry.componentArguments || [];
+
+        componentArguments.forEach((arg, index) => {
+            if (typeof arg === 'string') {
+                dynamicArgs[arg] = model[arg]; // Map string arguments to model properties
+            } else if (typeof arg === 'object' && arg !== null) {
+                Object.assign(dynamicArgs, arg);
+            } else {
+                // Handle other types of arguments as needed
+                dynamicArgs[`arg${index}`] = arg;
+            }
+        });
+
+        // Merge additional args
+        Object.assign(dynamicArgs, additionalArgs);
+
+        return dynamicArgs;
+    }
+}

package/addon/styles/storefront-engine.css

@@ -0,0 +1,6 @@
+.ui-combo-box .options-list a.combo-box-option.selected,
+.ui-combo-box .selected-list a.combo-box-option.selected,
+.ui-combo-box .options-list a.combo-box-option.selected:hover,
+.ui-combo-box .selected-list a.combo-box-option.selected:hover {
+    background-color: #76a9fa !important;
+}

package/addon/templates/application.hbs

@@ -13,4 +13,6 @@
 
 <Layout::Section::Container>
     {{outlet}}
-</Layout::Section::Container>
+</Layout::Section::Container>
+
+<ContextPanel />

package/addon/templates/customers/index/view.hbs

@@ -0,0 +1 @@
+<CustomerPanel @customer={{@model}} @tab={{this.view}} @onTabChanged={{this.onTabChanged}} @onPressCancel={{this.transitionBack}} @onEdit={{this.onEdit}} />

package/addon/templates/networks/index/network/customers.hbs

@@ -1 +1,18 @@
-{{outlet}}
+<Layout::Section::Header @title={{t "storefront.common.customers"}} @searchQuery={{this.query}} @onSearch={{perform this.search}} />
+
+<Layout::Section::Body>
+    <Table
+        @wrapperClass="overscroll-y-none"
+        @rows={{@model}}
+        @columns={{this.columns}}
+        @selectable={{false}}
+        @canSelectAll={{false}}
+        @onSetup={{fn (mut this.table)}}
+        @pagination={{true}}
+        @paginationMeta={{@model.meta}}
+        @page={{this.page}}
+        @onPageChange={{fn (mut this.page)}}
+        @tfootVerticalOffset="53"
+        @tfootVerticalOffsetElements=".next-view-section-subheader"
+    />
+</Layout::Section::Body>

package/addon/templates/networks/index/network/orders.hbs

@@ -1 +1,18 @@
-{{outlet}}
+<Layout::Section::Header @title={{t "storefront.common.orders"}} @searchQuery={{this.query}} @onSearch={{perform this.search}} />
+
+<Layout::Section::Body>
+    <Table
+        @wrapperClass="overscroll-y-none"
+        @rows={{@model}}
+        @columns={{this.columns}}
+        @selectable={{true}}
+        @canSelectAll={{true}}
+        @onSetup={{fn (mut this.table)}}
+        @pagination={{true}}
+        @paginationMeta={{@model.meta}}
+        @page={{this.page}}
+        @onPageChange={{fn (mut this.page)}}
+        @tfootVerticalOffset="53"
+        @tfootVerticalOffsetElements=".next-view-section-subheader"
+    />
+</Layout::Section::Body>

package/addon/templates/networks/index/network.hbs

@@ -1,4 +1,4 @@
-<Overlay @position="right" @isResizable={{true}} @noBackdrop={{true}} @width="570px" @minResizeWidth={{570}} @fullHeight={{true}}>
+<Overlay @position="right" @isResizable={{true}} @noBackdrop={{true}} @width="900px" @minResizeWidth={{570}} @fullHeight={{true}}>
     <Overlay::Header @title={{t "storefront.networks.index.network.manage-network"}} @onPressCancel={{this.transitionBack}} />
     <Overlay::Body class="p-0i" @increaseInnerBodyHeightBy="0" @wrapperClass="space-y-4 pt-4">
         <div class="flex flex-col">

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

@@ -1 +1 @@
-{{outlet}}
+<OrderPanel::Details @order={{@model}} @onPressCancel={{this.transitionBack}} />