Merge pull request #22 from fleetbase/dev-v0.3.6

v0.3.6

.prettierrc.js

@@ -2,7 +2,7 @@
 
 module.exports = {
     trailingComma: 'es5',
-    tabWidth: 4,
+    tabWidth: 2,
     semi: true,
     singleQuote: true,
     printWidth: 190,
@@ -13,5 +13,11 @@ module.exports = {
                 singleQuote: false,
             },
         },
+        {
+            files: '*.{yml,yaml}',
+            options: {
+                tabWidth: 2,
+            },
+        },
     ],
 };

addon/components/context-panel.hbs

@@ -0,0 +1,5 @@
+{{#if this.contextPanel.currentContextRegistry}}
+    {{#let this.contextPanel.currentContext this.contextPanel.currentContextRegistry this.contextPanel.currentContextComponentArguments as |model registry dynamicArgs|}}
+        {{component registry.component context=model dynamicArgs=dynamicArgs onPressCancel=this.contextPanel.clear options=this.contextPanel.contextOptions}}
+    {{/let}}
+{{/if}}

addon/components/context-panel.js

@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class ContextPanelComponent extends Component {
+    @service contextPanel;
+}

addon/components/customer-panel.hbs

@@ -0,0 +1,70 @@
+<Overlay
+    @onLoad={{this.setOverlayContext}}
+    @position="right"
+    @noBackdrop={{true}}
+    @fullHeight={{true}}
+    @isResizable={{or this.isResizable @isResizable}}
+    @width={{or this.width @width "570px"}}
+>
+    <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
+        <div class="flex flex-row items-center justify-between w-full mb-4">
+
+            <div class="flex flex-1 justify-end">
+                <Button
+                    @type="default"
+                    @icon="times"
+                    @helpText={{if this.customer.id (t "storefront.customers.customer-panel.cancel-edit-button") (t "fleet-ops.component.customer-panel.cancel-new-button")}}
+                    @onClick={{this.onPressCancel}}
+                />
+            </div>
+        </div>
+        <div class="flex flex-row justify-between w-full">
+            <div class="flex flex-col flex-1 w-3/4">
+                <div class="flex flex-row">
+                    <div class="w-14 flex items-center justify-start">
+                        <Image
+                            src={{this.customer.photo_url}}
+                            @fallbackSrc={{config "defaultValues.customerImage"}}
+                            alt={{this.customer.name}}
+                            height="48"
+                            width="48"
+                            class="h-12 w-12 rounded-lg shadow-sm"
+                        />
+                        <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                            <InputInfo @text={{this.customer.public_id}} />
+                        </Attach::Tooltip>
+                    </div>
+                    <div class="flex flex-col">
+                        <h1 class="text-gray-900 dark:text-white text-2xl">{{this.customer.name}}</h1>
+                        <div class="-mt-1">
+                            <div class="flex flex-row items-center">
+                                <span class="text-sm dark:text-blue-400 text-blue-600">{{smart-humanize this.customer.type}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex justify-end w-1/4">
+                <Badge @status={{this.customer.public_id}} @type="info" @hideStatusDot={{true}} />
+            </div>
+
+        </div>
+    </Overlay::Header>
+    <Overlay::Body class="no-padding">
+        <div class="section-header-actions w-full overflow-x-scroll lg:overflow-x-auto">
+            <div class="ui-tabs mt-4">
+                <nav>
+                    {{#each this.tabs as |tab|}}
+                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active'}}" {{on "click" (fn this.onTabChanged tab.slug)}}>
+                            <FaIcon @icon={{tab.icon}} class="mr-1" />
+                            <span>{{tab.title}}</span>
+                        </a>
+                    {{/each}}
+                </nav>
+            </div>
+        </div>
+        <div class="tab-content tab-{{this.tab.slug}}">
+            {{component this.tab.component customer=this.customer tabOptions=this.tab options=this.tab.componentParams}}
+        </div>
+    </Overlay::Body>
+</Overlay>

addon/components/customer-panel.js

@@ -0,0 +1,171 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+import CustomerPanelDetailsComponent from './customer-panel/details';
+import CustomerPanelOrdersComponent from './customer-panel/orders';
+import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
+import applyContextComponentArguments from '@fleetbase/ember-core/utils/apply-context-component-arguments';
+export default class CustomerPanelComponent extends Component {
+    /**
+     * Service for fetching data.
+     *
+     * @type {Service}
+     */
+    @service fetch;
+
+    /**
+     * Service for managing modals.
+     *
+     * @type {Service}
+     */
+    @service modalsManager;
+
+    /**
+     * Universe service for managing global data and settings.
+     *
+     * @type {Service}
+     */
+    @service universe;
+
+    /**
+     * Ember data store service.
+     *
+     * @type {Service}
+     */
+    @service store;
+
+    /**
+     * Service for managing routing within the host app.
+     *
+     * @type {Service}
+     */
+    @service hostRouter;
+
+    /**
+     * Service for managing the context panel.
+     *
+     * @type {Service}
+     */
+    @service contextPanel;
+
+    /**
+     * The current active tab.
+     *
+     * @type {Object}
+     * @tracked
+     */
+    @tracked tab;
+
+    /**
+     * The customer being displayed or edited.
+     *
+     * @type {customerModel}
+     * @tracked
+     */
+    @tracked customer;
+
+    /**
+     * Overlay context.
+     * @type {any}
+     */
+    @tracked context;
+
+    /**
+     * Initializes the customer panel component.
+     */
+    constructor() {
+        super(...arguments);
+        this.customer = this.args.customer;
+
+        this.tab = this.getTabUsingSlug(this.args.tab);
+        applyContextComponentArguments(this);
+    }
+
+    /**
+    /**
+     * Returns the array of tabs available for the panel.
+     *
+     * @type {Array}
+     */
+    get tabs() {
+        const registeredTabs = this.universe.getMenuItemsFromRegistry('component:customer-panel');
+
+        const defaultTabs = [
+            this.universe._createMenuItem('Details', null, { icon: 'circle-info', component: CustomerPanelDetailsComponent }),
+            this.universe._createMenuItem('Orders', null, { icon: 'circle-info', component: CustomerPanelOrdersComponent }),
+        ];
+
+        if (isArray(registeredTabs)) {
+            return [...defaultTabs, ...registeredTabs];
+        }
+
+        return defaultTabs;
+    }
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Handles changing the active tab.
+     *
+     * @method
+     * @param {String} tab - The new tab to switch to.
+     * @action
+     */
+    @action onTabChanged(tab) {
+        this.tab = this.getTabUsingSlug(tab);
+        contextComponentCallback(this, 'onTabChanged', tab);
+    }
+
+    /**
+     * Handles edit action for the customer.
+     *
+     * @method
+     * @action
+     */
+    @action onEdit() {
+        const isActionOverrided = contextComponentCallback(this, 'onEdit', this.customer);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.customer, 'editing', {
+                onAfterSave: () => {
+                    this.contextPanel.clear();
+                },
+            });
+        }
+    }
+
+    /**
+     * Handles the cancel action.
+     *
+     * @method
+     * @action
+     * @returns {Boolean} Indicates whether the cancel action was overridden.
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.customer);
+    }
+
+    /**
+     * Finds and returns a tab based on its slug.
+     *
+     * @param {String} tabSlug - The slug of the tab.
+     * @returns {Object|null} The found tab or null.
+     */
+    getTabUsingSlug(tabSlug) {
+        if (tabSlug) {
+            return this.tabs.find(({ slug }) => slug === tabSlug);
+        }
+
+        return this.tabs[0];
+    }
+}

addon/components/customer-panel/details.hbs

@@ -0,0 +1,34 @@
+<div class="p-4">
+    <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 lg:gap-4 text-xs dark:text-gray-100">
+
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.customers.customer-panel.details.web-url"}}</div>
+            <div class="field-value">{{n-a @customer.name}}</div>
+        </div>
+
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.title"}}</div>
+            <div class="field-value">{{n-a @customer.title}}</div>
+        </div>
+
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.internal-id"}}</div>
+            <div class="field-value">{{n-a @customer.internal_id}}</div>
+        </div>
+
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.email"}}</div>
+            <div class="field-value">{{n-a @customer.email}}</div>
+        </div>
+
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.phone"}}</div>
+            <div class="field-value">{{n-a @customer.phone}}</div>
+        </div>
+
+        <div class="field-info-container">
+            <div class="field-name">{{t "storefront.common.type"}}</div>
+            <div class="field-value"><Badge @status={{@customer.type}} /></div>
+        </div>
+    </div>
+</div>

addon/components/customer-panel/details.js

@@ -0,0 +1,3 @@
+import Component from '@glimmer/component';
+
+export default class CustomerPanelDetailsComponent extends Component {}