diff --git a/packages/boxel-ui/addon/src/components/view-selector/index.gts b/packages/boxel-ui/addon/src/components/view-selector/index.gts index 5bc0ec388d..e39ef5cfb5 100644 --- a/packages/boxel-ui/addon/src/components/view-selector/index.gts +++ b/packages/boxel-ui/addon/src/components/view-selector/index.gts @@ -32,7 +32,10 @@ export default class ViewSelector extends Component { { id: 'strip', icon: StripIcon }, { id: 'grid', icon: GridIcon }, ]; - viewOptions = this.args.items ?? this.standardViewOptions; + + get viewOptions() { + return this.args.items ?? this.standardViewOptions; + } get selectedId() { return this.args.selectedId ?? (this.viewOptions[0] as ViewItem).id; diff --git a/packages/experiments-realm/crm-app.gts b/packages/experiments-realm/crm-app.gts index 74e72cad18..778d3413a1 100644 --- a/packages/experiments-realm/crm-app.gts +++ b/packages/experiments-realm/crm-app.gts @@ -41,8 +41,22 @@ import type { Deal } from './crm/deal'; import DealSummary from './crm/deal-summary'; import { CRMTaskPlanner } from './crm/task-planner'; +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { + Card as CardIcon, + Grid3x3 as GridIcon, + Rows4 as StripIcon, +} from '@cardstack/boxel-ui/icons'; + type ViewOption = 'card' | 'strip' | 'grid'; +interface ViewItem { + icon: TemplateOnlyComponent<{ + Element: SVGElement; + }>; + id: ViewOption; +} + const CONTACT_FILTERS: LayoutFilter[] = [ { displayName: 'All Contacts', @@ -132,6 +146,29 @@ class CrmAppTemplate extends Component { @tracked activeTabId: string | undefined = this.args.model.tabs?.[0]?.tabId; @tracked tabs = this.args.model.tabs; @tracked private selectedView: ViewOption = 'card'; + + // Only show strip and grid views for Deal tab for now + get dealView(): ViewItem[] { + return [ + { id: 'strip', icon: StripIcon }, + { id: 'grid', icon: GridIcon }, + ]; + } + + get commonViews(): ViewItem[] { + return [ + { id: 'card', icon: CardIcon }, + { id: 'strip', icon: StripIcon }, + { id: 'grid', icon: GridIcon }, + ]; + } + + get tabViews(): ViewItem[] { + const views = + this.activeTabId === 'Deal' ? this.dealView : this.commonViews; + return views; + } + @tracked private searchKey = ''; @tracked private deals: Deal[] = []; @@ -203,11 +240,13 @@ class CrmAppTemplate extends Component { //Tabs @action setActiveTab(id: string) { + this.selectedView = id === 'Deal' ? 'strip' : 'card'; this.activeTabId = id; this.searchKey = ''; this.setActiveFilter(); this.loadDealCards.perform(); } + get headerColor() { return ( Object.getPrototypeOf(this.args.model).constructor.headerColor ?? @@ -425,6 +464,7 @@ class CrmAppTemplate extends Component { class='view-menu content-header-row-2' @selectedId={{this.selectedView}} @onChange={{this.onChangeView}} + @items={{this.tabViews}} /> {{/if}} {{#if this.activeFilter.sortOptions.length}}