@fleetbase/storefront-engine 0.3.31 → 0.4.0

package/addon/components/customer-panel/orders.js

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action, get } from '@ember/object';
 import { debug } from '@ember/debug';
-import { task } from 'ember-concurrency-decorators';
+import { task } from 'ember-concurrency';
 
 export default class CustomerPanelOrdersComponent extends Component {
     @service store;

package/addon/components/modals/share-network.hbs

@@ -29,7 +29,7 @@
             </div>
         </div>
 
-        <div class="rounded-md border dark:border-fgray-800 dark:bg-gray-800 p-4">
+        <div class="rounded-md border dark:border-gray-800 dark:bg-gray-800 p-4">
             <h4 class="dark:text-gray-50 mb-4 font-semibold">{{t "storefront.component.modals.share-network.get-link"}}</h4>
             <div class="input-group mb-0i">
                 <Toggle

package/addon/components/network-category-picker.hbs

@@ -8,11 +8,12 @@
     @buttonClass={{concat "w-full truncate w-48" " " @buttonClass}}
     @buttonWrapperClass={{concat "w-full" " " @buttonWrapperClass}}
     @wrapperClass={{@wrapperClass}}
+    {{did-update this.updateArgs @category}}
     as |dd|
 >
     <div role="menu" class="store-selector-dropdown-menu next-dd-menu py-1">
         <div role="group" class="px-1 overflow-y-scroll max-h-72">
-            {{#if this.isLoading}}
+            {{#if this.loadCategories.isRunning}}
                 <div class="text-sm flex flex-row items-center px-3 py-0.5 border-0 my-1">
                     <Spinner class="mr-2i" />
                     <span class="dark:text-gray-100 test-sm">{{t "storefront.common.loading"}}</span>

package/addon/components/network-category-picker.js

@@ -2,6 +2,8 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import { debug } from '@ember/debug';
+import { task } from 'ember-concurrency';
 import isModel from '@fleetbase/ember-core/utils/is-model';
 
 export default class NetworkCategoryPickerComponent extends Component {
@@ -11,20 +13,27 @@ export default class NetworkCategoryPickerComponent extends Component {
     @tracked categories = [];
     @tracked selectedCategory;
     @tracked network;
-    @tracked isLoading = false;
-    @tracked buttonTitle = null;
+    @tracked buttonTitle = 'Select Category';
 
-    constructor() {
+    context = {
+        loadCategories: this.loadCategories,
+        loadParentCategories: this.loadParentCategories,
+        onSelectCategory: this.onSelectCategory,
+        onCreateNewCategory: this.onCreateNewCategory,
+    };
+
+    constructor(owner, { network, category, onReady }) {
         super(...arguments);
-        this.network = this.args.network;
-        this.category = this.args.category;
-        this.setButtonTitle(this.category);
-        this.loadCategories(this.category);
+        this.network = network;
+        this.setCategory(category);
+
+        if (typeof onReady === 'function') {
+            onReady(this.context);
+        }
     }
 
     setButtonTitle(selectedCategory) {
         let buttonTitle = this.args.buttonTitle ?? 'Select Category';
-
         if (selectedCategory) {
             buttonTitle = selectedCategory.name;
         }
@@ -32,7 +41,7 @@ export default class NetworkCategoryPickerComponent extends Component {
         this.buttonTitle = buttonTitle;
     }
 
-    @action loadCategories(parentCategory) {
+    @task *loadCategories(parentCategory) {
         const queryParams = {
             owner_uuid: this.network.id,
             parents_only: parentCategory ? false : true,
@@ -45,26 +54,20 @@ export default class NetworkCategoryPickerComponent extends Component {
             queryParams.with_parent = true;
         }
 
-        this.isLoading = true;
-        this.store
-            .query('category', queryParams)
-            .then((categories) => {
-                this.categories = categories.toArray();
-            })
-            .finally(() => {
-                this.isLoading = false;
-            });
+        try {
+            const categories = yield this.store.query('category', queryParams);
+            this.categories = categories.toArray();
+        } catch (error) {
+            debug(`Unable to load categories : ${error.message}`)
+        }
     }
 
     @action onSelectCategory(category) {
-        this.selectedCategory = category;
-        this.setButtonTitle(category);
+        this.setCategory(category);
 
         if (typeof this.args.onSelect === 'function') {
             this.args.onSelect(category);
         }
-
-        this.loadCategories(category);
     }
 
     @action onCreateNewCategory() {
@@ -80,4 +83,31 @@ export default class NetworkCategoryPickerComponent extends Component {
 
         this.onSelectCategory(null);
     }
+
+    @action updateArgs(el, [category]) {
+        this.setCategory(category);
+    }
+
+    async setCategoryById(categoryId) {
+        const category = this.store.peekRecord('category', categoryId);
+        if (category) {
+            this.setCategory(category);
+        } else {
+            // load from server if possible
+            const categoryRecord = await this.store.findRecord('category', categoryId);
+            if (categoryRecord) {
+                this.onSelectCategory(categoryRecord);
+            }
+        }
+    }
+
+    setCategory(category) {
+        if (typeof category === 'string') {
+            return this.setCategoryById(category);
+        }
+
+        this.selectedCategory = category;
+        this.setButtonTitle(category);
+        this.loadCategories.perform(category);
+    }
 }

package/addon/components/widget/storefront-key-metrics.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
-import { task } from 'ember-concurrency-decorators';
+import { task } from 'ember-concurrency';
 
 export default class WidgetStorefrontKeyMetricsComponent extends Component {
     /**

package/addon/controllers/customers/index.js

@@ -2,9 +2,9 @@ import { inject as service } from '@ember/service';
 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';
+import { timeout, task } from 'ember-concurrency';
 import { action } from '@ember/object';
+
 export default class CustomersIndexController extends BaseController {
     /**
      * Inject the `notifications` service

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

@@ -2,8 +2,7 @@ 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 { timeout, task } from 'ember-concurrency';
 import { action } from '@ember/object';
 
 export default class NetworksIndexNetworkOrdersController extends Controller {

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

@@ -3,67 +3,19 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action, set } from '@ember/object';
 import { isBlank } from '@ember/utils';
-import { timeout } from 'ember-concurrency';
-import { task } from 'ember-concurrency-decorators';
+import { debug } from '@ember/debug';
+import { timeout, task } from 'ember-concurrency';
 import createShareableLink from '../../../../utils/create-shareable-link';
 import isEmail from '@fleetbase/ember-core/utils/is-email';
 import isModel from '@fleetbase/ember-core/utils/is-model';
 
 export default class NetworksIndexNetworkStoresController extends Controller {
-    /**
-     * Inject the `notifications` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service notifications;
-
-    /**
-     * Inject the `intl` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service intl;
-
-    /**
-     * Inject the `modals-manager` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service modalsManager;
-
-    /**
-     * Inject the `crud` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service crud;
-
-    /**
-     * Inject the `fetch` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service fetch;
-
-    /**
-     * Inject the `store` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service store;
-
-    /**
-     * Inject the `hostRouter` service
-     *
-     * @var {Service}
-     * @memberof NetworksIndexNetworkStoresController
-     */
     @service hostRouter;
 
     /**
@@ -122,12 +74,25 @@ export default class NetworksIndexNetworkStoresController extends Controller {
     @tracked network;
 
     /**
-     * The loading state.
+     * The stores loaded.
+     *
+     * @memberof NetworksIndexNetworkStoresController
+     */
+    @tracked stores = [];
+
+    /**
+     * The category picker component context.
+     *
+     * @memberof NetworksIndexNetworkStoresController
+     */
+    @tracked categoryPicker;
+
+    /**
+     * The current category model instance.
      *
-     * @var {Boolean}
      * @memberof NetworksIndexNetworkStoresController
      */
-    @tracked isLoading = false;
+    @tracked categoryModel;
 
     /**
      * All columns applicable for network stores
@@ -144,6 +109,7 @@ export default class NetworksIndexNetworkStoresController extends Controller {
             filterable: true,
             filterComponent: 'filter/string',
             showOnlineIndicator: true,
+            cellClassNames: 'network-store-name-column',
         },
         {
             label: this.intl.t('storefront.common.id'),
@@ -208,6 +174,11 @@ export default class NetworksIndexNetworkStoresController extends Controller {
                     label: this.intl.t('storefront.networks.index.network.stores.assign-category'),
                     fn: this.assignStoreToCategory,
                 },
+                {
+                    label: this.intl.t('storefront.networks.index.network.stores.remove-category'),
+                    fn: this.removeStoreCategory,
+                    isVisible: (store) => store.category,
+                },
                 {
                     separator: true,
                 },
@@ -247,6 +218,10 @@ export default class NetworksIndexNetworkStoresController extends Controller {
         this.storeQuery = value;
     }
 
+    @action setCategoryPickerContext(context) {
+        this.categoryPicker = context;
+    }
+
     /**
      * Selects a category and assigns its ID to the current category property.
      * If the selected category is null, the category property is set to null.
@@ -255,6 +230,8 @@ export default class NetworksIndexNetworkStoresController extends Controller {
      * @param {CategoryModel|null} selectedCategory - The selected category object containing the ID.
      */
     @action selectCategory(selectedCategory) {
+        this.categoryModel = selectedCategory;
+
         if (selectedCategory) {
             this.category = selectedCategory.id;
         } else {
@@ -285,6 +262,36 @@ export default class NetworksIndexNetworkStoresController extends Controller {
         });
     }
 
+    /**
+     * Displays a confirmation modal to remove a specified store from the network.
+     * Allows the user to confirm the removal.
+     *
+     * @action
+     * @param {StoreModel} store - The store object to be removed.
+     */
+    @action async removeStoreCategory(store) {
+        this.modalsManager.confirm({
+            title: this.intl.t('storefront.networks.index.network.stores.remove-store-category'),
+            body: this.intl.t('storefront.networks.index.network.stores.remove-store-category-body', { storeName: store.name, categoryName: store.category?.get('name') }),
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await this.fetch.post(`networks/${this.network.id}/remove-store-category`, { store: store.id }, { namespace: 'storefront/int/v1' });
+                    await this.hostRouter.refresh();
+                    modal.done();
+                } catch (error) {
+                    modal.stopLoading();
+                    this.notifications.serverError(error);
+                }
+            },
+        });
+    }
+
     /**
      * Displays a modal to assign a store to a category or create a new category.
      * Allows the user to select a category, create a new one, or confirm the assignment.
@@ -516,19 +523,17 @@ export default class NetworksIndexNetworkStoresController extends Controller {
             acceptButtonIconPrefix: 'fas',
             declineButtonIcon: 'times',
             declineButtonIconPrefix: 'fas',
-            confirm: (modal) => {
+            confirm: async (modal) => {
                 modal.startLoading();
 
-                this.fetch
-                    .post(`networks/${this.network.id}/remove-stores`, { stores: [store.id] }, { namespace: 'storefront/int/v1' })
-                    .then(() => {
-                        this.stores.removeObject(store);
-                        modal.done();
-                    })
-                    .catch((error) => {
-                        modal.stopLoading();
-                        this.notifications.serverError(error);
-                    });
+                try {
+                    await this.fetch.post(`networks/${this.network.id}/remove-stores`, { stores: [store.id] }, { namespace: 'storefront/int/v1' });
+                    await this.hostRouter.refresh();
+                    modal.done();
+                } catch (error) {
+                    modal.stopLoading();
+                    this.notifications.serverError(error);
+                }
             },
         });
     }

package/addon/controllers/networks/index.js

@@ -4,8 +4,7 @@ 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';
+import { timeout, task } from 'ember-concurrency';
 
 export default class NetworksIndexController extends BaseController {
     /**

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

@@ -4,8 +4,7 @@ import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { dasherize } from '@ember/string';
 import { isBlank } from '@ember/utils';
-import { timeout } from 'ember-concurrency';
-import { task } from 'ember-concurrency-decorators';
+import { timeout, task } from 'ember-concurrency';
 
 export default class ProductsIndexCategoryController extends BaseController {
     @service intl;

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

@@ -3,8 +3,7 @@ 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';
+import { timeout, task } from 'ember-concurrency';
 
 export default class ProductsIndexIndexController extends BaseController {
     @service filters;

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

@@ -3,6 +3,7 @@ import { inject as service } from '@ember/service';
 
 export default class NetworksIndexNetworkStoresRoute extends Route {
     @service store;
+    @service hostRouter;
 
     queryParams = {
         category: { refreshModel: true },
@@ -23,10 +24,10 @@ export default class NetworksIndexNetworkStoresRoute extends Route {
         // set the network to controller
         controller.network = this.network;
 
-        // // load the network categories
-        // const categories = await this.store.query('category', { owner_uuid: network.id, parents_only: true, for: 'storefront_network' });
-
-        // // set the categories loaded
-        // controller.categories = categories.toArray();
+        // set the cateogry if set
+        const { category: categoryId } = this.paramsFor(this.routeName);
+        if (categoryId) {
+            controller.category = categoryId;
+        }
     }
 }

package/addon/styles/storefront-engine.css

@@ -77,3 +77,10 @@ body[data-theme='dark'] .ui-tabs.overlay-content-panel > ul .ui-tab.active,
 body[data-theme='dark'] .ui-tabs.overlay-content-panel > nav .ui-tab.active {
     background-color: #202a37;
 }
+
+/** hotfix online indicator overflowing store name */
+td.network-store-name-column > div > svg {
+    margin-left: -0.7rem;
+    height: 0.5rem;
+    width: 0.5rem;
+}

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

@@ -19,6 +19,13 @@
 </Layout::Section::Header>
 
 <Layout::Section::Body>
-    <NetworkCategoryPicker @network={{this.network}} @onCreateNewCategory={{this.createNewCategory}} @onSelect={{this.selectCategory}} @wrapperClass="my-4 ml-9" />
+    <div class="flex flex-row items-center space-x-2">
+        <NetworkCategoryPicker @network={{this.network}} @category={{this.category}} @onCreateNewCategory={{this.createNewCategory}} @onSelect={{this.selectCategory}} @onReady={{this.setCategoryPickerContext}} @wrapperClass="w-64 my-4 ml-9" />
+        {{#if this.categoryModel}}
+            <Button @icon="arrow-left" @size="xs" @onClick={{this.categoryPicker.loadParentCategories}} />
+            <Button @icon="cog" @text="Edit Category" @size="xs" @onClick={{fn this.editCategory this.categoryModel}} />
+            <Button @icon="trash" @text="Delete Category" @size="xs" @type="danger" @onClick={{fn this.deleteCategory this.categoryModel}} />
+        {{/if}}
+    </div>
     <Table @rows={{@model}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @tfoot={{false}} @selectAllColumnWidth={{20}} />
 </Layout::Section::Body>

package/addon/templates/networks/index.hbs

@@ -12,7 +12,7 @@
                             <Image src={{network.logo_url}} class="w-32" alt={{network.name}} @fallbackSrc="https://flb-assets.s3.ap-southeast-1.amazonaws.com/static/image-file-icon.png" />
                         </div>
                         <div class="border-t dark:border-gray-700 px-4 py-2">
-                            <div class="flex items-center justify-between">
+                            <div class="flex items-start justify-between">
                                 <div>
                                     <LinkTo @route="networks.index.network" @model={{network}} class="font-bold text-lg text-gray-700 dark:text-gray-100">{{network.name}}</LinkTo>
                                 </div>

package/composer.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetbase/storefront-api",
-    "version": "0.3.31",
+    "version": "0.4.0",
     "description": "Headless Commerce & Marketplace Extension for Fleetbase",
     "keywords": [
         "fleetbase-extension",

package/extension.json

@@ -1,6 +1,6 @@
 {
     "name": "Storefront",
-    "version": "0.3.31",
+    "version": "0.4.0",
     "description": "Headless Commerce & Marketplace Extension for Fleetbase",
     "repository": "https://github.com/fleetbase/storefront",
     "license": "AGPL-3.0-or-later",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/storefront-engine",
-    "version": "0.3.31",
+    "version": "0.4.0",
     "description": "Headless Commerce & Marketplace Extension for Fleetbase",
     "fleetbase": {
         "route": "storefront",
@@ -46,7 +46,7 @@
         "@babel/core": "^7.23.2",
         "@fleetbase/ember-core": "latest",
         "@fleetbase/ember-ui": "latest",
-        "@fleetbase/fleetops-data": "latest",
+        "@fleetbase/fleetops-data": "^0.1.19",
         "@fortawesome/ember-fontawesome": "^2.0.0",
         "@fortawesome/fontawesome-svg-core": "6.4.0",
         "@fortawesome/free-brands-svg-icons": "6.4.0",
@@ -79,7 +79,6 @@
         "ember-cli-sri": "^2.1.1",
         "ember-cli-terser": "^4.0.2",
         "ember-concurrency": "^3.1.1",
-        "ember-concurrency-decorators": "^2.0.3",
         "ember-data": "^4.12.5",
         "ember-engines": "^0.9.0",
         "ember-load-initializers": "^2.1.2",

package/server/src/Http/Controllers/NetworkController.php

@@ -110,7 +110,7 @@ class NetworkController extends StorefrontController
      */
     public function removeStores(string $id, NetworkActionRequest $request)
     {
-        $stores = collect($request->input('stores', []));
+        $stores = $request->array('stores');
 
         // delete each
         foreach ($stores as $storeId) {
@@ -121,7 +121,7 @@ class NetworkController extends StorefrontController
     }
 
     /**
-     * Remove stores to a network.
+     * Add a store to a network category
      *
      * @return \Illuminate\Http\Response
      */
@@ -132,7 +132,6 @@ class NetworkController extends StorefrontController
 
         // get network store instance
         $networkStore = NetworkStore::where(['network_uuid' => $id, 'store_uuid' => $store])->first();
-
         if ($networkStore) {
             $networkStore->update(['category_uuid' => $category]);
         }
@@ -140,6 +139,24 @@ class NetworkController extends StorefrontController
         return response()->json(['status' => 'ok']);
     }
 
+    /**
+     * Remove stores to a network.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function removeStoreCategory(string $id, NetworkActionRequest $request)
+    {
+        $store    = $request->input('store');
+
+        // get network store instance
+        $networkStore = NetworkStore::where(['network_uuid' => $id, 'store_uuid' => $store])->first();
+        if ($networkStore) {
+            $networkStore->update(['category_uuid' => null]);
+        }
+
+        return response()->json(['status' => 'ok']);
+    }
+
     /**
      * Remove stores to a network.
      *

package/server/src/Models/Network.php

@@ -156,7 +156,8 @@ class Network extends StorefrontModel
     {
         return $this->belongsToMany(Store::class, 'network_stores', 'network_uuid', 'store_uuid')
             ->using(NetworkStore::class)
-            ->withPivot('category_uuid');
+            ->withPivot(['category_uuid', 'deleted_at'])
+            ->wherePivotNull('deleted_at');
     }
 
     /**

package/server/src/Models/Store.php

@@ -278,7 +278,8 @@ class Store extends StorefrontModel
     {
         return $this->belongsToMany(Network::class, 'network_stores', 'store_uuid', 'network_uuid')
             ->using(NetworkStore::class)
-            ->withPivot('category_uuid');
+            ->withPivot(['category_uuid', 'deleted_at'])
+            ->wherePivotNull('deleted_at');
     }
 
     /**

package/server/src/routes.php

@@ -169,6 +169,7 @@ Route::prefix(config('storefront.api.routing.prefix', 'storefront'))->namespace(
                             function ($router, $controller) {
                                 $router->delete('{id}/remove-category', $controller('deleteCategory'));
                                 $router->post('{id}/set-store-category', $controller('addStoreToCategory'));
+                                $router->post('{id}/remove-store-category', $controller('removeStoreCategory'));
                                 $router->post('{id}/add-stores', $controller('addStores'));
                                 $router->post('{id}/remove-stores', $controller('removeStores'));
                                 $router->post('{id}/invite', $controller('sendInvites'));

package/translations/en-us.yaml

@@ -409,6 +409,7 @@ storefront:
           view-store-details: View Store Details
           edit-store: Edit Store
           assign-category: Assign Category
+          remove-category: Remove Category
           remove-store-from-network: Remove Store from Network
           delete-network-category: Delete network category?
           deleting-category-move-all-stores-inside-on-top-level: Deleting this category will move all stores inside to the top level, are you sure you want to delete this category?
@@ -429,6 +430,8 @@ storefront:
           send-invitations: Send Invitations
           invitation-sent-recipients: Invitations sent to recipients!
           invalid-emails-provided-error: Invalid emails provided!
+          remove-store-category: Remove store category
+          remove-store-category-body: You are about to remove {storeName} from the category {categoryName}, do you wish to proceed?
   orders:
     index:
       internal-id: Internal ID