created Product Category page

addon/components/admin/product-category.hbs

@@ -1 +1,29 @@
-{{yield}}
+<ContentPanel @title="Categories" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+    <div class="mt-3 flex items-center justify-end">
+        <Button @type="primary" @size="sm" @icon="plus" @text="Add category" @onClick={{this.addCategory}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
+    </div>
+    <div class="mt-3">
+        <ul>
+            {{#each this.categories as |category|}}
+                    <div class="flex justify-between items-center border-b border-gray-700 py-2">
+                        <span>{{category.name}}</span>
+                        <div class="flex items-center space-x-2">
+                            <Button @type="info" @size="sm" @icon="eye" @text="Add subcategories" @onClick={{fn this.addSubCategory category}} />
+                            <Button @type="danger" @size="sm" @icon="trash" @text="Delete" @onClick={{fn this.deleteCategory category}} />
+                        </div>
+                    </div>
+                {{#each this.categories as |subCategory|}}
+                    {{#if (and (eq subCategory.parent.id category.id) (not (eq subCategory.id category.id)))}}
+                        <div class="ml-4 flex justify-between items-center border-b border-gray-700 py-2">
+                            <span>{{subCategory.name}}</span>
+                            <div class="flex items-center space-x-2">
+                                <Button @type="info" @size="sm" @icon="eye" @text="Add subcategories" @onClick={{fn this.addSubCategory subCategory}} />
+                                <Button @type="danger" @size="sm" @icon="trash" @text="Delete" @onClick={{fn this.deleteCategory subCategory}} />
+                            </div>
+                        </div>
+                    {{/if}}
+                {{/each}}
+            {{/each}}
+        </ul>
+    </div>
+</ContentPanel>

addon/components/admin/product-category.js

@@ -1,3 +1,134 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { dasherize } from '@ember/string';
+export default class AdminProductCategoryComponent extends Component {
+    @service store;
+    @service modalsManager;
+    @service currentUser;
+    @service modalsManager;
+    @service notifications;
+    @service fetch;
+    @service hostRouter;
+    @tracked categories = [];
+    @tracked selectedCategory;
+    @tracked isLoading = false;
+    @tracked buttonTitle = null;
 
-export default class AdminProductCategoryComponent extends Component {}
+    constructor() {
+        super(...arguments);
+        this.category = this.args.category;
+        this.fetchCategories();
+    }
+
+    @action async addCategory() {
+        const category = this.store.createRecord('category', {
+            for: 'pallet_product',
+        });
+
+        this.modalsManager.show('modals/create-product-category', {
+            title: 'Create a new product category',
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            category,
+            uploadNewPhoto: (file) => {
+                this.fetch.uploadFile.perform(
+                    file,
+                    {
+                        path: `uploads/${category.company_uuid}/product-category-icon/${dasherize(category.name ?? this.currentUser.companyId)}`,
+                        subject_uuid: category.id,
+                        subject_type: `category`,
+                        type: `category_icon`,
+                    },
+                    (uploadedFile) => {
+                        category.setProperties({
+                            icon_file_uuid: uploadedFile.id,
+                            icon_url: uploadedFile.url,
+                            icon: uploadedFile,
+                        });
+                    }
+                );
+            },
+            confirm: (modal) => {
+                modal.startLoading();
+
+                return category.save().then(() => {
+                    this.notifications.success('New product category created.');
+                    return this.fetchCategories();
+                });
+            },
+        });
+    }
+
+    @action async fetchCategories() {
+        this.categories = await this.store.query('category', {
+            for: 'pallet_product',
+        });
+    }
+
+    @action async addSubCategory(category) {
+        const subCategory = this.store.createRecord('category', {
+            for: 'pallet_product',
+            parent: category,
+        });
+
+        this.modalsManager.show('modals/create-product-category', {
+            title: 'Create a new subcategory',
+            acceptButtonIcon: 'check',
+            acceptButtonIconPrefix: 'fas',
+            declineButtonIcon: 'times',
+            declineButtonIconPrefix: 'fas',
+            category: subCategory,
+            uploadNewPhoto: (file) => {
+                this.fetch.uploadFile.perform(
+                    file,
+                    {
+                        path: `uploads/${subCategory.company_uuid}/product-category-icon/${dasherize(subCategory.name ?? this.currentUser.companyId)}`,
+                        subject_uuid: subCategory.id,
+                        subject_type: `category`,
+                        type: `category_icon`,
+                    },
+                    (uploadedFile) => {
+                        subCategory.setProperties({
+                            icon_file_uuid: uploadedFile.id,
+                            icon_url: uploadedFile.url,
+                            icon: uploadedFile,
+                        });
+                    }
+                );
+            },
+            confirm: async (modal) => {
+                modal.startLoading();
+
+                try {
+                    await subCategory.save();
+                    this.notifications.success('New subcategory created.');
+                    await this.fetchCategories();
+                } catch (error) {
+                    this.notifications.error('Error creating subcategory.');
+                    console.error('Error creating subcategory:', error);
+                } finally {
+                    modal.stopLoading();
+                }
+            },
+        });
+    }
+
+    @action async deleteCategory(category) {
+        const confirmation = confirm(`Are you sure you want to delete the category "${category.name}"?`);
+
+        if (confirmation) {
+            try {
+                await category.destroyRecord();
+                this.notifications.success('Category deleted successfully.');
+                await this.fetchCategories();
+            } catch (error) {
+                this.notifications.error('Error deleting category.');
+                console.error('Error deleting category:', error);
+            }
+        }
+    }
+}

addon/engine.js

@@ -3,7 +3,7 @@ import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 import config from './config/environment';
 import services from '@fleetbase/ember-core/exports/services';
-import AdminVisibilityControlsComponent from './components/admin/visibility-controls';
+import AdminProductCategoryComponent from './components/admin/product-category';
 
 const { modulePrefix } = config;
 const externalRoutes = ['console', 'extensions'];
@@ -17,37 +17,22 @@ export default class PalletEngine extends Engine {
     };
     setupExtension = function (app, engine, universe) {
         // register menu item in header
-        universe.registerHeaderMenuItem('Pallet', 'console.pallet', { icon: 'pallet', priority: 0 });
+        universe.registerHeaderMenuItem('Pallet', 'console.pallet', { icon: 'pallet', priority: 1 });
 
         // register admin settings -- create a pallet menu panel with it's own setting options
         universe.registerAdminMenuPanel(
             'Pallet Config',
             [
                 {
-                    title: 'Visibility Controls',
+                    title: 'Product Category',
                     icon: 'eye',
-                    component: AdminVisibilityControlsComponent,
+                    component: AdminProductCategoryComponent,
                 },
             ],
             {
                 slug: 'pallet',
             }
         );
-
-        // create primary registry for engine
-        universe.createRegistry('engine:pallet');
-
-        // register the product panel
-        universe.createRegistry('component:product-panel');
-
-        // register the inventory panel
-        universe.createRegistry('component:inventory-panel');
-
-        // register the supplier panel
-        universe.createRegistry('component:supplier-panel');
-
-        // register the warehouse panel
-        universe.createRegistry('component:warehouse-panel');
     };
 }
 

addon/templates/purchase-orders/index.hbs

@@ -13,7 +13,7 @@
             <div class="next-dd-menu mt-2 mx-0">
                 <div class="px-1">
                     <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeletePurchaseOrders)}}>
-                        Delete purchaseOrders
+                        Delete Purchase Order
                     </a>
                 </div>
             </div>