@fleetbase/storefront-engine 0.3.4 → 0.3.6

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

@@ -1,3 +1,326 @@
 import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { isBlank } from '@ember/utils';
+import { timeout } from 'ember-concurrency';
+import { task } from 'ember-concurrency-decorators';
+import { action } from '@ember/object';
 
-export default class NetworksIndexNetworkOrdersController extends Controller {}
+export default class NetworksIndexNetworkOrdersController extends Controller {
+    /**
+     * Inject the `notifications` service
+     *
+     * @var {Service}
+     */
+    @service notifications;
+
+    /**
+     * Inject the `intl` service
+     *
+     * @var {Service}
+     */
+    @service intl;
+
+    /**
+     * Inject the `modals-manager` service
+     *
+     * @var {Service}
+     */
+    @service modalsManager;
+
+    /**
+     * Inject the `crud` service
+     *
+     * @var {Service}
+     */
+    @service crud;
+
+    /**
+     * Inject the `fetch` service
+     *
+     * @var {Service}
+     */
+    @service fetch;
+
+    /**
+     * Inject the `filters` service
+     *
+     * @var {Service}
+     */
+    @service filters;
+
+    @service contextPanel;
+
+    /**
+     * Queryable parameters for this controller's model
+     *
+     * @var {Array}
+     */
+    queryParams = [];
+
+    @tracked page = 1;
+    @tracked limit;
+    @tracked query;
+    @tracked sort = '-created_at';
+    @tracked public_id;
+    @tracked internal_id;
+    @tracked tracking;
+    @tracked facilitator;
+    @tracked customer;
+    @tracked driver;
+    @tracked payload;
+    @tracked pickup;
+    @tracked dropoff;
+    @tracked updated_by;
+    @tracked created_by;
+    @tracked status;
+
+    @tracked columns = [
+        {
+            label: this.intl.t('storefront.common.id'),
+            valuePath: 'public_id',
+            width: '150px',
+            cellComponent: 'table/cell/anchor',
+            action: this.viewOrder,
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: this.intl.t('storefront.orders.index.internal-id'),
+            valuePath: 'internal_id',
+            width: '125px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: this.intl.t('storefront.orders.index.customer'),
+            valuePath: 'customer.name',
+            cellComponent: 'table/cell/base',
+            width: '125px',
+            resizable: true,
+            sortable: true,
+            hidden: true,
+            filterable: true,
+            filterComponent: 'filter/model',
+            filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-order-customer'),
+            filterParam: 'customer',
+            model: 'customer',
+        },
+        {
+            label: this.intl.t('storefront.common.pickup'),
+            valuePath: 'pickupName',
+            cellComponent: 'table/cell/base',
+            width: '160px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/model',
+            filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-order-pickup-location'),
+            filterParam: 'pickup',
+            model: 'place',
+        },
+        {
+            label: this.intl.t('storefront.common.dropoff'),
+            valuePath: 'dropoffName',
+            cellComponent: 'table/cell/base',
+            width: '160px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/model',
+            filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-order-dropoff-location'),
+            filterParam: 'dropoff',
+            model: 'place',
+        },
+        {
+            label: this.intl.t('storefront.orders.index.scheduled-at'),
+            valuePath: 'scheduledAt',
+            sortParam: 'scheduled_at',
+            filterParam: 'scheduled_at',
+            width: '150px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/date',
+        },
+        {
+            label: '# Items',
+            cellComponent: 'table/cell/base',
+            valuePath: 'item_count',
+            resizable: true,
+            hidden: true,
+            width: '50px',
+        },
+        {
+            label: this.intl.t('storefront.orders.index.transaction-total'),
+            cellComponent: 'table/cell/base',
+            valuePath: 'transaction_amount',
+            width: '50px',
+            resizable: true,
+            hidden: true,
+            sortable: true,
+        },
+        {
+            label: this.intl.t('storefront.orders.index.tracking-number'),
+            cellComponent: 'table/cell/base',
+            valuePath: 'tracking_number.tracking_number',
+            width: '170px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: this.intl.t('storefront.orders.index.driver-assigned'),
+            cellComponent: 'table/cell/driver-name',
+            valuePath: 'driver_assigned',
+            modelPath: 'driver_assigned',
+            width: '170px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/model',
+            filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-driver-for-order'),
+            filterParam: 'driver',
+            model: 'driver',
+            query: {
+                // no model, serializer, adapter for relations
+                without: ['fleets', 'vendor', 'vehicle', 'currentJob'],
+            },
+        },
+        {
+            label: this.intl.t('storefront.common.type'),
+            cellComponent: 'cell/humanize',
+            valuePath: 'type',
+            width: '100px',
+            resizable: true,
+            hidden: true,
+            sortable: true,
+        },
+        {
+            label: this.intl.t('storefront.common.status'),
+            valuePath: 'status',
+            cellComponent: 'table/cell/status',
+            width: '120px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/multi-option',
+            // filterOptions: this.statusOptions,
+        },
+        {
+            label: this.intl.t('storefront.orders.index.created-at'),
+            valuePath: 'createdAt',
+            sortParam: 'created_at',
+            filterParam: 'created_at',
+            width: '140px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/date',
+        },
+        {
+            label: this.intl.t('storefront.orders.index.updated-at'),
+            valuePath: 'updatedAt',
+            sortParam: 'updated_at',
+            filterParam: 'updated_at',
+            width: '125px',
+            resizable: true,
+            sortable: true,
+            hidden: true,
+            filterable: true,
+            filterComponent: 'filter/date',
+        },
+        {
+            label: this.intl.t('storefront.orders.index.created-by'),
+            valuePath: 'created_by_name',
+            width: '125px',
+            resizable: true,
+            hidden: true,
+            filterable: true,
+            filterComponent: 'filter/model',
+            filterComponentPlaceholder: 'Select user',
+            filterParam: 'created_by',
+            model: 'user',
+        },
+        {
+            label: this.intl.t('storefront.orders.index.updated-by'),
+            valuePath: 'updated_by_name',
+            width: '125px',
+            resizable: true,
+            hidden: true,
+            filterable: true,
+            filterComponent: 'filter/model',
+            filterComponentPlaceholder: this.intl.t('storefront.orders.index.select-user'),
+            filterParam: 'updated_by',
+            model: 'user',
+        },
+        {
+            label: '',
+            cellComponent: 'table/cell/dropdown',
+            ddButtonText: false,
+            ddButtonIcon: 'ellipsis-h',
+            ddButtonIconPrefix: 'fas',
+            ddMenuLabel: 'Order Actions',
+            cellClassNames: 'overflow-visible',
+            wrapperClass: 'flex items-center justify-end mx-2',
+            width: '12%',
+            actions: [
+                {
+                    label: this.intl.t('storefront.orders.index.view-order'),
+                    icon: 'eye',
+                    fn: this.viewOrder,
+                },
+                {
+                    label: this.intl.t('storefront.orders.index.cancel-order'),
+                    icon: 'ban',
+                    fn: this.cancelOrder,
+                },
+                {
+                    separator: true,
+                },
+                {
+                    label: this.intl.t('storefront.orders.index.delete-order'),
+                    icon: 'trash',
+                    fn: this.deleteOrder,
+                },
+            ],
+            sortable: false,
+            filterable: false,
+            resizable: false,
+            searchable: false,
+        },
+    ];
+
+    /**
+     * The search task.
+     *
+     * @void
+     */
+    @task({ restartable: true }) *search({ target: { value } }) {
+        // if no query don't search
+        if (isBlank(value)) {
+            this.query = null;
+            return;
+        }
+
+        // timeout for typing
+        yield timeout(250);
+
+        // reset page for results
+        if (this.page > 1) {
+            this.page = 1;
+        }
+
+        // update the query param
+        this.query = value;
+    }
+
+    @action viewOrder(order) {
+        this.contextPanel.focus(order, 'viewing');
+    }
+}

package/addon/controllers/networks/index/network/stores.js

@@ -568,8 +568,6 @@ export default class NetworksIndexNetworkStoresController extends Controller {
             confirm: (modal) => {
                 modal.startLoading();
 
-                console.log('saving store', store);
-
                 return store
                     .save()
                     .then(() => {

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

@@ -0,0 +1,13 @@
+import { action } from '@ember/object';
+import BaseController from '../../base-controller';
+
+export default class OrdersIndexViewController extends BaseController {
+    /**
+     * Uses router service to transition back to `orders.index`
+     *
+     * @void
+     */
+    @action transitionBack() {
+        return this.transitionToRoute('orders.index');
+    }
+}

package/addon/controllers/orders/index.js

@@ -1,11 +1,12 @@
-import Controller from '@ember/controller';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
 import { isBlank } from '@ember/utils';
+import BaseController from '@fleetbase/storefront-engine/controllers/base-controller';
+import { tracked } from '@glimmer/tracking';
 import { timeout } from 'ember-concurrency';
 import { task } from 'ember-concurrency-decorators';
 
-export default class OrdersIndexController extends Controller {
+export default class OrdersIndexController extends BaseController {
     /**
      * Inject the `notifications` service
      *
@@ -94,13 +95,11 @@ export default class OrdersIndexController extends Controller {
             label: this.intl.t('storefront.common.id'),
             valuePath: 'public_id',
             width: '150px',
-            cellComponent: 'table/cell/link-to',
-            route: 'orders.index.view',
-            // onLinkClick: this.viewOrder,
+            cellComponent: 'table/cell/anchor',
+            onClick: this.viewOrder,
             resizable: true,
             sortable: true,
             filterable: true,
-            filterComponent: 'filter/string',
         },
         {
             label: this.intl.t('storefront.orders.index.internal-id'),
@@ -334,4 +333,8 @@ export default class OrdersIndexController extends Controller {
         // update the query param
         this.query = value;
     }
+
+    @action viewOrder(order) {
+        return this.transitionToRoute('orders.index.view', order);
+    }
 }

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

@@ -1,12 +1,13 @@
 import ProductsIndexCategoryNewController from './new';
 import { tracked } from '@glimmer/tracking';
-import { alias } from '@ember/object/computed';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+import { filterHasManyForNewRecords } from '../../../../serializers/product';
 
 export default class ProductsIndexCategoryEditController extends ProductsIndexCategoryNewController {
-    @alias('model') product;
     @service intl;
+    @tracked product;
     @tracked overlayActionButtonTitle = 'Save Changes';
     @tracked overlayActionButtonIcon = 'save';
     @tracked overlayExitButtonTitle = 'Done';
@@ -15,20 +16,15 @@ export default class ProductsIndexCategoryEditController extends ProductsIndexCa
         return `Edit ${this.product.name}`;
     }
 
-    @action saveProduct() {
-        this.isSaving = true;
-
-        this.product
-            .serializeMeta()
-            .save()
-            .then(() => {
-                this.isSaving = false;
-                this.notifications.success(this.intl.t('storefront.products.index.edit.changes-saved'));
-            })
-            .catch((error) => {
-                this.isSaving = false;
-                this.notifications.serverError(error);
-            });
+    @task *saveProduct() {
+        let savedProduct;
+        try {
+            savedProduct = yield this.product.serializeMeta().save();
+        } catch (error) {
+            return this.notifications.serverError(error);
+        }
+        this.product = filterHasManyForNewRecords(savedProduct, ['variants', 'addon_categories', 'hours']);
+        this.notifications.success(this.intl.t('storefront.products.index.edit.changes-saved'));
     }
 
     @action transitionBack({ closeOverlay }) {

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

@@ -6,6 +6,7 @@ import { action } from '@ember/object';
 import { alias } from '@ember/object/computed';
 import { underscore } from '@ember/string';
 import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
 
 export default class ProductsIndexCategoryNewController extends BaseController {
     @controller('products.index.category') productsIndexCategoryController;
@@ -40,6 +41,7 @@ export default class ProductsIndexCategoryNewController extends BaseController {
             onClick: this.addMetaField,
         },
     ];
+
     @tracked acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'video/mp4', 'video/quicktime', 'video/x-msvideo', 'video/x-flv', 'video/x-ms-wmv'];
 
     @action reset() {
@@ -48,32 +50,24 @@ export default class ProductsIndexCategoryNewController extends BaseController {
         this.uploadedFiles = [];
     }
 
-    @action saveProduct() {
-        const { category } = this.productsIndexCategoryController;
+    @task *saveProduct() {
         const loader = this.loader.showLoader('body', { loadingMessage: 'Creating new product...' });
-        this.isSaving = true;
-
+        const { category } = this.productsIndexCategoryController;
         if (category) {
             this.product.set('category_uuid', category.id);
         }
 
-        this.product
-            .serializeMeta()
-            .save()
-            .then(() => {
-                this.loader.removeLoader(loader);
-                this.isSaving = false;
-                this.notifications.success(this.intl.t('storefront.products.index.new.new-product-created-success'));
-
-                this.transitionToRoute('products.index.category', category.slug).finally(() => {
-                    this.reset();
-                });
-            })
-            .catch((error) => {
-                this.loader.removeLoader(loader);
-                this.isSaving = false;
-                this.notifications.serverError(error);
-            });
+        try {
+            yield this.product.serializeMeta().save();
+        } catch (error) {
+            this.loader.removeLoader(loader);
+            return this.notifications.serverError(error);
+        }
+
+        this.loader.removeLoader(loader);
+        this.notifications.success(this.intl.t('storefront.products.index.new.new-product-created-success'));
+        yield this.transitionToRoute('products.index.category', category.slug);
+        this.reset();
     }
 
     @action addTag(tag) {
@@ -166,7 +160,6 @@ export default class ProductsIndexCategoryNewController extends BaseController {
     }
 
     @action exit(closeOverlay) {
-        console.log(closeOverlay, 'closeOverlay');
         return closeOverlay(() => {
             return this.transitionToRoute('products.index.category').then(() => {
                 this.reset();
@@ -174,32 +167,34 @@ export default class ProductsIndexCategoryNewController extends BaseController {
         });
     }
 
-    @action async selectAddonCategory() {
-        this.modalsManager.displayLoader();
-
-        const { product } = this;
-        const addonCategories = await this.store.findAll('addon-category');
-
-        return this.modalsManager.done().then(() => {
-            this.modalsManager.show('modals/select-addon-category', {
-                title: this.intl.t('storefront.products.index.new.select-addon-categories'),
-                addonCategories,
-                product,
-                updateProductAddonCategories: (categories) => {
-                    this.product.addon_categories = categories.map((category) => {
-                        return this.store.createRecord('product-addon-category', {
-                            product_uuid: product.id,
-                            category_uuid: category.id,
-                            name: category.name,
-                            excluded_addons: [],
-                            category,
-                        });
-                    });
-                },
-            });
+    @task *promptSelectAddonCategories() {
+        const addonCategories = yield this.store.findAll('addon-category');
+        const selectedAddonCategories = this.product.addon_categories;
+        this.modalsManager.show('modals/select-addon-category', {
+            title: this.intl.t('storefront.products.index.new.select-addon-categories'),
+            selectedAddonCategories,
+            addonCategories,
+            updateProductAddonCategories: (addonCategories) => {
+                this.product.syncProductAddonCategories(addonCategories);
+            },
         });
     }
 
+    // @action selectAddonCategory() {
+    //     this.store.findAll('addon-category')
+    //     const addonCategories = await this.store.findAll('addon-category');
+
+    //     await this.modalsManager.done();
+    //     this.modalsManager.show('modals/select-addon-category', {
+    //         title: this.intl.t('storefront.products.index.new.select-addon-categories'),
+    //         addonCategories,
+    //         selectedAddonCategories: this.product.addon_categories,
+    //         updateProductAddonCategories: (addonCategories) => {
+    //             this.product.syncProductAddonCategories(addonCategories);
+    //         },
+    //     });
+    // }
+
     @action createProductVariant() {
         const { product } = this;
         const productVariant = this.store.createRecord('product-variant');

package/addon/controllers/products/index.js

@@ -33,11 +33,17 @@ export default class ProductsIndexController extends BaseController {
         return this.transitionToRoute('products.index.category.new');
     }
 
+    /**
+     * Toggles a dialog which allows user to manage addon categories and options.
+     *
+     * @memberof ProductsIndexController
+     */
     @action manageAddons() {
         this.modalsManager.show('modals/manage-addons', {
-            title: this.intl.t('storefront.products.index.aside-scroller.title'),
+            title: this.intl.t('storefront.products.index.manage-addons-dialog.manage-addons-title'),
+            acceptButtonText: this.intl.t('storefront.products.index.manage-addons-dialog.manage-addons-accept-button'),
+            acceptButtonIcon: 'save',
             modalClass: 'modal-lg',
-            acceptButtonText: this.intl.t('storefront.products.index.done'),
             store: this.activeStore,
         });
     }

package/addon/helpers/avatar-url.js

@@ -0,0 +1,9 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function avatarUrl([url, defaultUrl = 'https://s3.ap-southeast-1.amazonaws.com/flb-assets/static/no-avatar.png']) {
+    if (typeof url === 'string') {
+        return url;
+    }
+
+    return defaultUrl;
+});

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

@@ -17,7 +17,14 @@ export default class ProductVariantOptionModel extends Model {
 
     /** @methods */
     toJSON() {
-        return this.serialize();
+        return {
+            uuid: this.id,
+            product_variant_uuid: this.product_variant_uuid,
+            name: this.name,
+            description: this.description,
+            additional_cost: this.additional_cost,
+            translations: this.additional_cost,
+        };
     }
 
     /** @computed */

package/addon/models/product-variant.js

@@ -1,12 +1,13 @@
 import Model, { attr, hasMany } from '@ember-data/model';
 import { format, formatDistanceToNow } from 'date-fns';
+import { isArray } from '@ember/array';
 
 export default class ProductVariantModel extends Model {
     /** @ids */
     @attr('string') product_uuid;
 
     /** @relationships */
-    @hasMany('product-variant-option') options;
+    @hasMany('product-variant-option', { async: false }) options;
 
     /** @attributes */
     @attr('string', { defaultValue: '' }) name;
@@ -21,7 +22,16 @@ export default class ProductVariantModel extends Model {
 
     /** @methods */
     toJSON() {
-        return this.serialize();
+        return {
+            uuid: this.id,
+            product_uuid: this.product_uuid,
+            name: this.name,
+            description: this.description,
+            is_multiselect: this.is_multiselect,
+            is_required: this.is_required,
+            translations: this.translations,
+            options: isArray(this.options) ? Array.from(this.options) : [],
+        };
     }
 
     /** @computed */