@fleetbase/storefront-engine 0.0.1

package/addon/controllers/orders/index.js

@@ -0,0 +1,331 @@
+import Controller, { inject as controller } from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { isBlank } from '@ember/utils';
+import { timeout } from 'ember-concurrency';
+import { task } from 'ember-concurrency-decorators';
+
+export default class OrdersIndexController extends Controller {
+    /**
+     * Inject the `notifications` service
+     *
+     * @var {Service}
+     */
+    @service notifications;
+
+    /**
+     * 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;
+
+    /**
+     * Queryable parameters for this controller's model
+     *
+     * @var {Array}
+     */
+    queryParams = [
+        'page',
+        'limit',
+        'sort',
+        'query',
+        'public_id',
+        'internal_id',
+        'payload',
+        'tracking_number',
+        'facilitator',
+        'customer',
+        'driver',
+        'pickup',
+        'dropoff',
+        'created_by',
+        'updated_by',
+        'status',
+    ];
+
+    @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: 'ID',
+            valuePath: 'public_id',
+            width: '150px',
+            cellComponent: 'table/cell/link-to',
+            route: 'orders.index.view',
+            // onLinkClick: this.viewOrder,
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: 'Internal ID',
+            valuePath: 'internal_id',
+            width: '125px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: 'Customer',
+            valuePath: 'customer.name',
+            cellComponent: 'table/cell/base',
+            width: '125px',
+            resizable: true,
+            sortable: true,
+            hidden: true,
+            filterable: true,
+            filterComponent: 'filter/model',
+            filterComponentPlaceholder: 'Select order customer',
+            filterParam: 'customer',
+            model: 'customer',
+        },
+        {
+            label: 'Pickup',
+            valuePath: 'pickupName',
+            cellComponent: 'table/cell/base',
+            width: '160px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/model',
+            filterComponentPlaceholder: 'Select order pickup location',
+            filterParam: 'pickup',
+            model: 'place',
+        },
+        {
+            label: 'Dropoff',
+            valuePath: 'dropoffName',
+            cellComponent: 'table/cell/base',
+            width: '160px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/model',
+            filterComponentPlaceholder: 'Select order dropoff location',
+            filterParam: 'dropoff',
+            model: 'place',
+        },
+        {
+            label: '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: 'Transaction Total',
+            cellComponent: 'table/cell/base',
+            valuePath: 'transaction_amount',
+            width: '50px',
+            resizable: true,
+            hidden: true,
+            sortable: true,
+        },
+        {
+            label: 'Tracking Number',
+            cellComponent: 'table/cell/base',
+            valuePath: 'tracking_number.tracking_number',
+            width: '170px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/string',
+        },
+        {
+            label: '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: 'Select driver for order',
+            filterParam: 'driver',
+            model: 'driver',
+            query: {
+                // no model, serializer, adapter for relations
+                without: ['fleets', 'vendor', 'vehicle', 'currentJob'],
+            },
+        },
+        {
+            label: 'Type',
+            cellComponent: 'cell/humanize',
+            valuePath: 'type',
+            width: '100px',
+            resizable: true,
+            hidden: true,
+            sortable: true,
+        },
+        {
+            label: 'Status',
+            valuePath: 'status',
+            cellComponent: 'table/cell/status',
+            width: '120px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/multi-option',
+            // filterOptions: this.statusOptions,
+        },
+        {
+            label: 'Created At',
+            valuePath: 'createdAt',
+            sortParam: 'created_at',
+            filterParam: 'created_at',
+            width: '140px',
+            resizable: true,
+            sortable: true,
+            filterable: true,
+            filterComponent: 'filter/date',
+        },
+        {
+            label: 'Updated At',
+            valuePath: 'updatedAt',
+            sortParam: 'updated_at',
+            filterParam: 'updated_at',
+            width: '125px',
+            resizable: true,
+            sortable: true,
+            hidden: true,
+            filterable: true,
+            filterComponent: 'filter/date',
+        },
+        {
+            label: '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: 'Updated By',
+            valuePath: 'updated_by_name',
+            width: '125px',
+            resizable: true,
+            hidden: true,
+            filterable: true,
+            filterComponent: 'filter/model',
+            filterComponentPlaceholder: '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: 'View Order',
+                    icon: 'eye',
+                    fn: this.viewOrder,
+                },
+                {
+                    label: 'Cancel Order',
+                    icon: 'ban',
+                    fn: this.cancelOrder,
+                },
+                {
+                    separator: true,
+                },
+                {
+                    label: '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;
+    }
+}

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

@@ -0,0 +1,62 @@
+import ProductsIndexCategoryNewController from './new';
+import { tracked } from '@glimmer/tracking';
+import { alias } from '@ember/object/computed';
+import { action } from '@ember/object';
+import { isArray } from '@ember/array';
+
+export default class ProductsIndexCategoryEditController extends ProductsIndexCategoryNewController {
+    @alias('model') product;
+    @tracked overlayActionButtonTitle = 'Save Changes';
+    @tracked overlayActionButtonIcon = 'save';
+    @tracked overlayExitButtonTitle = 'Done';
+
+    get overlayTitle() {
+        return `Edit ${this.product.name}`;
+    }
+
+    @action saveProduct() {
+        this.isSaving = true;
+
+        this.product
+            .serializeMeta()
+            .save()
+            .then(() => {
+                this.isSaving = false;
+                this.notifications.success('Changes saved!');
+            })
+            .catch((error) => {
+                this.isSaving = false;
+                this.notifications.serverError(error);
+            });
+    }
+
+    @action transitionBack({ closeOverlay }) {
+        if (this.isSaving) {
+            return;
+        }
+
+        if (this.product.hasDirtyAttributes) {
+            // details have been added warn user it will lost
+            return this.modalsManager.confirm({
+                title: 'Product is not saved!',
+                body: 'You will loose all unsaved changes, are you sure you wish to cancel?',
+                confirm: (modal) => {
+                    modal.done();
+                    return this.exit(closeOverlay);
+                },
+            });
+        }
+
+        return this.exit(closeOverlay);
+    }
+
+    @action exit(closeOverlay) {
+        return closeOverlay(() => {
+            window.history.back();
+        });
+    }
+
+    @action removeFile(file) {
+        this.product.files.removeObject(file);
+    }
+}

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

@@ -0,0 +1,287 @@
+import Controller, { inject as controller } from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { isArray } from '@ember/array';
+import { action } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import { isEmpty } from '@ember/utils';
+import { underscore } from '@ember/string';
+import { inject as service } from '@ember/service';
+
+export default class ProductsIndexCategoryNewController extends Controller {
+    @controller('products.index.category') productsIndexCategoryController;
+    @service notifications;
+    @service modalsManager;
+    @service currentUser;
+    @service store;
+    @service storefront;
+    @service fetch;
+    @service loader;
+    @service crud;
+    @alias('storefront.activeStore') activeStore;
+    @tracked product = this.store.createRecord('product', { store_uuid: this.activeStore.id, currency: this.activeStore.currency, tags: [], meta_array: [] });
+    @tracked uploadQueue = [];
+    @tracked uploadedFiles = [];
+    @tracked primaryFile = null;
+    @tracked isSaving = false;
+
+    /** overlay options */
+    @tracked overlayTitle = 'New Product';
+    @tracked overlayActionButtonTitle = 'Create Product';
+    @tracked overlayActionButtonIcon = 'check'; // box-check
+    @tracked overlayExitButtonTitle = 'Cancel';
+    @tracked metadataButtons = [
+        {
+            type: 'default',
+            text: 'Add Metafield',
+            icon: 'plus',
+            iconPrefix: 'fas',
+            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() {
+        this.product = this.store.createRecord('product', { store_uuid: this.activeStore.id, currency: this.activeStore.currency });
+        this.uploadQueue = [];
+        this.uploadedFiles = [];
+    }
+
+    @action saveProduct() {
+        const { category } = this.productsIndexCategoryController;
+        const loader = this.loader.showLoader('body', 'Creating new product...');
+        this.isSaving = true;
+
+        if (category) {
+            this.product.set('category_uuid', category.id);
+        }
+
+        this.product
+            .serializeMeta()
+            .save()
+            .then((product) => {
+                this.loader.removeLoader(loader);
+                this.isSaving = false;
+                this.notifications.success('New product created successfully!');
+
+                return this.transitionToRoute('products.index.category').then(() => {
+                    console.log(this.productsIndexCategoryController);
+                    console.log(this.productsIndexCategoryController.products);
+                    this.productsIndexCategoryController?.products?.pushObject(product);
+                });
+            })
+            .catch((error) => {
+                this.loader.removeLoader(loader);
+                this.isSaving = false;
+                this.notifications.serverError(error);
+            });
+    }
+
+    @action addTag(tag) {
+        if (!isArray(this.product.tags)) {
+            this.product.tags = [];
+        }
+
+        this.product.tags?.pushObject(tag);
+        console.log('this.product.tags', this.product.tags);
+    }
+
+    @action removeTag(index) {
+        this.product.tags?.removeAt(index);
+    }
+
+    @action queueFile(file) {
+        this.uploadQueue.pushObject(file);
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/storefront/${this.activeStore.id}/products`,
+                subject_uuid: this.product.id,
+                subject_type: `storefront:product`,
+                type: `storefront_product`,
+            },
+            (uploadedFile) => {
+                this.product.files.pushObject(uploadedFile);
+
+                // if no primary image make it
+                if (!this.product.primary_image_uuid) {
+                    this.product.primary_image_uuid = uploadedFile.id;
+                }
+
+                this.uploadQueue.removeObject(file);
+            },
+            () => {
+                this.uploadQueue.removeObject(file);
+            }
+        );
+    }
+
+    @action removeFile(file) {
+        if (file.queue) {
+            file.queue.remove(file);
+        }
+
+        if (file.model) {
+            this.uploadedFiles.removeObject(file.model);
+            file.model.destroyRecord();
+        }
+
+        this.uploadQueue.removeObject(file);
+    }
+
+    @action makePrimaryFile(file) {
+        if (file.isNotImage) {
+            return this.notifications.warning('You can only select an image file to be primary!');
+        }
+
+        this.notifications.success(`${file.original_filename} was made the primary image.`);
+        this.product.primary_image_uuid = file.id;
+        this.product.primary_image_url = file.url;
+        this.product.primary_image = file;
+    }
+
+    @action transitionBack({ closeOverlay }) {
+        if (this.product.hasDirtyAttributes) {
+            // details have been added warn user it will lost
+            return this.modalsManager.confirm({
+                title: 'Product is not saved!',
+                body: 'Going back will cancel this product creation, if you continue all input fields will be cleared!',
+                confirm: (modal) => {
+                    modal.done();
+                    return this.exit(closeOverlay);
+                },
+            });
+        }
+
+        return this.exit(closeOverlay);
+    }
+
+    @action exit(closeOverlay) {
+        return closeOverlay(() => {
+            return this.transitionToRoute('products.index.category').then(() => {
+                this.reset();
+            });
+        });
+    }
+
+    @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: 'Select addon categories',
+                addonCategories,
+                product,
+                updateProductAddonCategories: (categories) => {
+                    const productAddonCategories = categories.map((category) => {
+                        return this.store.createRecord('product-addon-category', {
+                            product_uuid: product.id,
+                            category_uuid: category.id,
+                            name: category.name,
+                            excluded_addons: [],
+                            category,
+                        });
+                    });
+
+                    product.addon_categories = productAddonCategories;
+                },
+            });
+        });
+    }
+
+    @action createProductVariant() {
+        const { product } = this;
+        const productVariant = this.store.createRecord('product-variant');
+
+        return this.modalsManager.show('modals/create-new-variant', {
+            title: 'Add new product variant',
+            productVariant,
+            confirm: (modal) => {
+                modal.startLoading();
+                // add variant to product
+                product.variants.pushObject(productVariant);
+                modal.done();
+            },
+        });
+    }
+
+    @action editProductVariant(productVariant) {
+        return this.modalsManager.show('modals/create-new-variant', {
+            title: 'Edit product variant',
+            productVariant,
+        });
+    }
+
+    @action removeProductVariant(productVariant) {
+        return this.crud.delete(productVariant, {
+            onConfirm: () => {
+                this.product.variants.removeObject(productVariant);
+            },
+        });
+    }
+
+    @action addVariantOption(productVariant) {
+        const variantOption = this.store.createRecord('product-variant-option');
+        productVariant.options.pushObject(variantOption);
+    }
+
+    @action removeVariantOption(productVariant, index) {
+        const option = productVariant.options.objectAt(index);
+        productVariant.options.removeObject(option);
+
+        if (option.id) {
+            option.destroyRecord();
+        }
+    }
+
+    @action removeAddonCategory(index) {
+        const productAddonCategory = this.product.addon_categories.objectAt(index);
+
+        this.product.addon_categories.removeObject(productAddonCategory);
+
+        if (productAddonCategory.id) {
+            productAddonCategory.destroyRecord();
+        }
+    }
+
+    @action excludeAddon(index, addon) {
+        const productAddonCategory = this.product.addon_categories.objectAt(index);
+        const id = addon.id;
+
+        if (!productAddonCategory.excluded_addons) {
+            productAddonCategory.excluded_addons = [];
+        }
+
+        if (productAddonCategory.excluded_addons.includes(id)) {
+            productAddonCategory.excluded_addons.removeObject(id);
+        } else {
+            productAddonCategory.excluded_addons.pushObject(id);
+        }
+
+        console.log(productAddonCategory);
+    }
+
+    @action addMetaField() {
+        let { meta_array } = this.product;
+
+        if (!isArray(meta_array)) {
+            meta_array = [];
+        }
+
+        const label = `Untitled Field`;
+
+        meta_array.pushObject({
+            key: underscore(label),
+            label,
+            value: null,
+        });
+
+        this.product.meta_array = meta_array;
+    }
+
+    @action removeMetaField(index) {
+        this.product.meta_array.removeAt(index);
+    }
+}