v0.4.16

addon/components/customer-panel.hbs

@@ -1,70 +1,17 @@
-<Overlay
-    @onLoad={{this.setOverlayContext}}
-    @position="right"
-    @noBackdrop={{true}}
-    @fullHeight={{true}}
-    @isResizable={{or this.isResizable @isResizable}}
+<Layout::Resource::Panel
+    @resource={{this.customer}}
+    @controller={{this}}
+    @headerComponent={{component "customer-panel/panel-header" resource=this.customer actionButtons=this.actionButtons}}
+    @headerTitle={{or this.customer.name}}
+    @actionButtons={{this.actionButtons}}
+    @onPressCancel={{this.onPressCancel}}
+    @onOverlayReady={{this.setOverlayContext}}
+    @headerClass="no-bottom-border"
+    @bodyClass="no-scroll"
     @width={{or this.width @width "570px"}}
+    @isResizable={{or this.isResizable @isResizable}}
 >
-    <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>
+    <TabNavigation @tabs={{this.tabs}} @activeTabId={{this.tab.id}} @onTabChange={{this.onTabChanged}} @contentClass="scrollable" @tablistClass="pl-2" as |activeTab|>
+        {{component activeTab.component customer=this.customer tabOptions=activeTab options=activeTab.componentParams}}
+    </TabNavigation>
+</Layout::Resource::Panel>

addon/components/customer-panel.js

@@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { isArray } from '@ember/array';
+import { dasherize } from '@ember/string';
 import CustomerPanelDetailsComponent from './customer-panel/details';
 import CustomerPanelOrdersComponent from './customer-panel/orders';
 import contextComponentCallback from '@fleetbase/ember-core/utils/context-component-callback';
@@ -99,10 +100,21 @@ export default class CustomerPanelComponent extends Component {
         ];
 
         if (isArray(registeredTabs)) {
-            return [...defaultTabs, ...registeredTabs];
+            return [...defaultTabs, ...registeredTabs].map((tab) => this.normalizeTab(tab));
         }
 
-        return defaultTabs;
+        return defaultTabs.map((tab) => this.normalizeTab(tab));
+    }
+
+    get actionButtons() {
+        return [
+            {
+                icon: 'pencil',
+                helpText: 'Edit customer',
+                onClick: this.onEdit,
+                permission: 'storefront update customer',
+            },
+        ];
     }
     /**
      * Sets the overlay context.
@@ -123,8 +135,8 @@ export default class CustomerPanelComponent extends Component {
      * @action
      */
     @action onTabChanged(tab) {
-        this.tab = this.getTabUsingSlug(tab);
-        contextComponentCallback(this, 'onTabChanged', tab);
+        this.tab = tab;
+        contextComponentCallback(this, 'onTabChanged', tab?.slug ?? tab?.id);
     }
 
     /**
@@ -164,9 +176,20 @@ export default class CustomerPanelComponent extends Component {
      */
     getTabUsingSlug(tabSlug) {
         if (tabSlug) {
-            return this.tabs.find(({ slug }) => slug === tabSlug);
+            return this.tabs.find(({ slug, id }) => slug === tabSlug || id === tabSlug);
         }
 
         return this.tabs[0];
     }
+
+    normalizeTab(tab) {
+        const id = tab.id ?? tab.slug ?? dasherize(tab.title ?? tab.text ?? tab.label ?? 'tab');
+
+        return {
+            ...tab,
+            id,
+            slug: tab.slug ?? id,
+            label: tab.label ?? tab.title ?? tab.text,
+        };
+    }
 }

addon/components/customer-panel/panel-header.hbs

@@ -0,0 +1,33 @@
+<div class="px-4 py-2">
+    <div class="flex flex-1 flex-row items-start justify-between">
+        <div class="flex flex-row space-x-3">
+            <div class="flex items-start justify-start rounded-full">
+                <Image src={{@resource.photo_url}} @fallbackSrc={{config "defaultValues.customerImage"}} alt={{@resource.name}} height="48" width="48" class="h-14 w-14 rounded-full shadow-sm" />
+                <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                    <InputInfo @text={{@resource.public_id}} />
+                </Attach::Tooltip>
+            </div>
+            <div class="flex flex-col">
+                <h1 class="text-gray-900 dark:text-white font-semibold text-2xl">{{@resource.name}}</h1>
+                <div class="mt-1 flex flex-row items-center space-x-2">
+                    <Badge @status={{@resource.type}} />
+                    <Badge @status={{@resource.public_id}} @type="info" @hideStatusDot={{true}} />
+                </div>
+            </div>
+        </div>
+        <div class="next-view-header-right">
+            <Layout::Resource::Panel::HeaderActions
+                @resource={{@resource}}
+                @saveTask={{@saveTask}}
+                @saveOptions={{@saveOptions}}
+                @saveDisabled={{@saveDisabled}}
+                @pojoResource={{@pojoResource}}
+                @authSchema={{@authSchema}}
+                @actionButtons={{@actionButtons}}
+                @onPressCancel={{@onPressCancel}}
+            >
+                {{yield}}
+            </Layout::Resource::Panel::HeaderActions>
+        </div>
+    </div>
+</div>

addon/components/customer-panel/panel-header.js

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

addon/components/store-selector.hbs

@@ -1,34 +1,18 @@
 {{#if @activeStore}}
-    <DropdownButton
-        @renderInPlace={{true}}
-        @size="xs"
-        @type="primary"
-        @icon="store"
-        @iconSize="sm"
-        @text={{@activeStore.name}}
-        @buttonClass={{concat "w-full " @buttonClass}}
-        @buttonWrapperClass={{concat "w-full " @buttonWrapperClass}}
-        @wrapperClass={{@wrapperClass}}
-        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">
-                {{#each @stores as |store|}}
-                    <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (dropdown-fn dd this.onSwitchStore store)}}>
-                        {{or store.name "-"}}
-                    </a>
-                {{else}}
-                    <div class="next-dd-item" role="menuitem">{{t "storefront.component.store-selector.no-stores"}}</div>
-                {{/each}}
-            </div>
-            <div class="px-1">
-                <div class="next-dd-menu-seperator"></div>
-                <div role="group" class="px-1">
-                    <a href="javascript:;" class="next-dd-item" role="menuitem" {{on "click" (dropdown-fn dd this.onCreateStore)}}>
-                        {{t "storefront.component.store-selector.create-storefront"}}
-                    </a>
-                </div>
-            </div>
-        </div>
-    </DropdownButton>
-{{/if}}
+    <div class={{@wrapperClass}} {{did-insert this.setupTrigger}} {{will-destroy this.close}} ...attributes>
+        <Button
+            title={{@activeStore.name}}
+            class="{{concat "w-full " @buttonClass}} {{if this.isOpen "dd-is-open"}}"
+            @wrapperClass={{concat "w-full " @buttonWrapperClass}}
+            @size="xs"
+            @type="primary"
+            @icon="store"
+            @iconSize="sm"
+            @text={{@activeStore.name}}
+            @textClass="truncate"
+            @onClick={{this.toggle}}
+        />
+    </div>
+{{else if (has-block)}}
+    {{yield}}
+{{/if}}