feat: search focused

meta-d · Feb 6, 2024 · 6c6c1a9 · 6c6c1a9
1 parent 9cb1045
commit 6c6c1a9
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 88 deletions.
diff --git a/packages/angular/common/search/search.component.stories.ts b/packages/angular/common/search/search.component.stories.ts
@@ -8,7 +8,7 @@ import { Meta, StoryObj, applicationConfig, argsToTemplate, moduleMetadata } fro
 import { NgmSearchComponent } from './search.component'
 
 export default {
-  title: 'NgmSearchComponent',
+  title: 'Search',
   component: NgmSearchComponent,
   decorators: [
     applicationConfig({
@@ -38,3 +38,11 @@ export const DensityCompact: Story = {
 </div>`
   })
 }
+
+export const Focus: Story = {
+  args: {},
+  render: (args: NgmSearchComponent) => ({
+    args,
+    template: `<ngm-search ${argsToTemplate(args)} cdkMonitorSubtreeFocus></ngm-search>`
+  })
+}
diff --git a/packages/angular/common/search/search.component.ts b/packages/angular/common/search/search.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common'
-import { Component, Input, forwardRef, signal } from '@angular/core'
+import { Component, HostBinding, Input, forwardRef, signal } from '@angular/core'
 import { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms'
 import { MatInputModule } from '@angular/material/input'
 import { DisplayDensity } from '@metad/ocap-angular/core'
@@ -35,6 +35,11 @@ export class NgmSearchComponent implements ControlValueAccessor {
   }
   readonly displayDensity$ = signal<DisplayDensity>(null)
 
+  @HostBinding('class.ngm-search__has-value')
+  get hasValue() {
+    return this._value !== null && this._value !== undefined && this._value !== ''
+  }
+
   public _value: string
   private onChange: (value: any) => void
   private onTouched: () => void

diff --git a/packages/angular/entity/entity-schema/data-source.ts b/packages/angular/entity/entity-schema/data-source.ts
@@ -378,11 +378,8 @@ export class EntitySchemaDataSource implements DataSource<EntitySchemaFlatNode>
   hasCapability(capability: EntityCapacity) {
     return this.capacities?.includes(capability)
   }
+
   getTranslation(key: string, params?: any) {
-    let t = ''
-    this.translateService.get(key, params).subscribe((value) => {
-      t = value
-    })
-    return t
+    return this.translateService.instant(key, params)
   }
 }
diff --git a/packages/angular/entity/entity-schema/entity-schema.component.html b/packages/angular/entity/entity-schema/entity-schema.component.html
@@ -40,7 +40,8 @@
       [highlight]="searchControl.value">
     </ngm-display-behaviour>
 
-    <ngm-search *ngIf="node.item.type === EntitySchemaType.Entity" class="w-0 overflow-hidden group-hover:w-auto"
+    <ngm-search *ngIf="node.item.type === EntitySchemaType.Entity" cdkMonitorSubtreeFocus
+      class="overflow-hidden"
       displayDensity="cosy"
       [formControl]="searchControl">
     </ngm-search>

diff --git a/packages/angular/entity/entity-schema/entity-schema.component.scss b/packages/angular/entity/entity-schema/entity-schema.component.scss
@@ -17,3 +17,16 @@
   flex: 1;
   overflow: hidden;
 }
+
+.ngm-search {
+  @apply w-0;
+
+  &.ngm-search__has-value, &.cdk-focused {
+    @apply w-auto;
+  }
+}
+.group:hover {
+  .ngm-search {
+    @apply w-auto;
+  }
+}
diff --git a/packages/angular/entity/entity-schema/entity-schema.component.stories.ts b/packages/angular/entity/entity-schema/entity-schema.component.stories.ts
@@ -1,84 +1,73 @@
 import { DragDropModule } from '@angular/cdk/drag-drop'
-import { Component, Input, importProvidersFrom } from '@angular/core'
 import { CommonModule } from '@angular/common'
+import { Component, Input } from '@angular/core'
 import { MatSidenavModule } from '@angular/material/sidenav'
 import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations'
 import {
-  NgmMissingTranslationHandler,
-  OcapCoreModule,
+  NgmDSCoreService,
   OCAP_AGENT_TOKEN,
   OCAP_DATASOURCE_TOKEN,
   OCAP_MODEL_TOKEN,
-  NgmDSCoreService
+  provideOcapCore
 } from '@metad/ocap-angular/core'
-import { CUBE_SALES_ORDER, MockAgent } from '../../mock/agent-mock.service'
+import { provideTranslate } from '@metad/ocap-angular/mock'
 import { AgentType, DataSettings, DataSource, Type } from '@metad/ocap-core'
-import { MissingTranslationHandler, TranslateLoader, TranslateModule } from '@ngx-translate/core'
-import { applicationConfig, Meta, moduleMetadata, Story } from '@storybook/angular'
-import { Observable, of } from 'rxjs'
-import { ZhHans } from '@metad/ocap-angular/i18n'
+import { Meta, StoryObj, applicationConfig, moduleMetadata } from '@storybook/angular'
+import { CUBE_SALES_ORDER, MockAgent } from '../../mock/agent-mock.service'
 import { NgmEntitySchemaComponent } from './entity-schema.component'
-
-class CustomLoader implements TranslateLoader {
-  getTranslation(lang: string): Observable<any> {
-    return of(ZhHans)
-  }
-}
+import { provideHttpClient } from '@angular/common/http'
+import { EntityCapacity } from './types'
 
 @Component({
   standalone: true,
-  imports: [
-    CommonModule,
-    MatSidenavModule,
-    DragDropModule,
-    NgmEntitySchemaComponent,
-  ],
+  imports: [CommonModule, MatSidenavModule, DragDropModule, NgmEntitySchemaComponent],
   selector: 'ngm-story-component-drag',
   template: `<mat-drawer-container class="example-container" autosize cdkDropListGroup>
-  <mat-drawer mode="side" opened cdkDropList >
-    <ngm-entity-schema [dataSettings]="dataSettings"></ngm-entity-schema>
-    <ngm-entity-schema [dataSettings]="{
-      dataSource: dataSettings.dataSource,
-      entitySet: 'sales_fact'
-    }"></ngm-entity-schema>
-  </mat-drawer>
-  <mat-drawer-content cdkDropList [cdkDropListData]="drops" (cdkDropListDropped)="drop($event)">
-    <ul>
-      <li *ngFor="let item of drops">
-        {{item.entity}}/{{item.name || item.raw.memberKey}}/{{item.type}}/{{item.dataType}}/{{item.dbType}}
-      </li>
-    </ul>
-  </mat-drawer-content>
-</mat-drawer-container>`,
-  styles: [`.mat-drawer-container {height: 500px;}`]
+    <mat-drawer mode="side" opened cdkDropList>
+      <ngm-entity-schema [dataSettings]="dataSettings"></ngm-entity-schema>
+      <ngm-entity-schema
+        [dataSettings]="{
+          dataSource: dataSettings.dataSource,
+          entitySet: 'sales_fact'
+        }"
+      ></ngm-entity-schema>
+    </mat-drawer>
+    <mat-drawer-content cdkDropList [cdkDropListData]="drops" (cdkDropListDropped)="drop($event)">
+      <ul>
+        <li *ngFor="let item of drops">
+          {{ item.entity }}/{{ item.name || item.raw.memberKey }}/{{ item.type }}/{{ item.dataType }}/{{ item.dbType }}
+        </li>
+      </ul>
+    </mat-drawer-content>
+  </mat-drawer-container>`,
+  styles: [
+    `
+      .mat-drawer-container {
+        height: 500px;
+      }
+    `
+  ]
 })
 class DragComponent {
   @Input() dataSettings: DataSettings
 
   drops = []
-  
-  drop (event) {
+
+  drop(event) {
     this.drops.push(event.item.data)
   }
 }
 
-export default {
-  title: 'NgmEntitySchemaComponent',
+const meta: Meta<NgmEntitySchemaComponent> = {
+  title: 'EntitySchema',
+  component: NgmEntitySchemaComponent,
   decorators: [
     applicationConfig({
       providers: [
         provideAnimations(),
-        importProvidersFrom(
-          TranslateModule.forRoot({
-            missingTranslationHandler: {
-              provide: MissingTranslationHandler,
-              useClass: NgmMissingTranslationHandler
-            },
-            loader: { provide: TranslateLoader, useClass: CustomLoader },
-            defaultLanguage: 'zh-Hans'
-          })
-        ),
-        importProvidersFrom(OcapCoreModule),
+        provideTranslate(),
+        provideHttpClient(),
+        provideOcapCore(),
         {
           provide: OCAP_AGENT_TOKEN,
           useClass: MockAgent,
@@ -105,50 +94,56 @@ export default {
               ignoreUnknownProperty: true
             },
             schema: {
-              cubes: [
-                CUBE_SALES_ORDER
-              ]
+              cubes: [CUBE_SALES_ORDER]
             }
           },
           multi: true
         }
       ]
     }),
     moduleMetadata({
-      imports: [
-        BrowserAnimationsModule,
-        MatSidenavModule,
-        DragDropModule,
-        NgmEntitySchemaComponent,
-        DragComponent
-      ],
-      providers: [
-        NgmDSCoreService
-      ]
+      imports: [BrowserAnimationsModule, MatSidenavModule, DragDropModule, NgmEntitySchemaComponent, DragComponent],
+      providers: [NgmDSCoreService]
     })
   ]
-} as Meta<NgmEntitySchemaComponent>
+}
 
-const Template: Story<NgmEntitySchemaComponent> = (args: NgmEntitySchemaComponent) => ({
-  props: args
-})
+export default meta
+
+type Story = StoryObj<NgmEntitySchemaComponent>
 
-export const Primary = {
+export const Primary: Story = {
   args: {
     dataSettings: {
       dataSource: 'Sales',
       entitySet: 'SalesOrder'
-    }
+    },
   }
 }
 
-export const SelectedHierarchy = Template.bind({})
-SelectedHierarchy.args = {
-  dataSettings: {
-    dataSource: 'Sales',
-    entitySet: 'SalesOrder'
-  },
-  selectedHierarchy: '[Product]'
+export const SelectedHierarchy = {
+  args: {
+    dataSettings: {
+      dataSource: 'Sales',
+      entitySet: 'SalesOrder'
+    },
+    selectedHierarchy: '[Product]'
+  }
+}
+
+export const Capacity = {
+  args: {
+    dataSettings: {
+      dataSource: 'Sales',
+      entitySet: 'SalesOrder'
+    },
+    capacities: [
+      EntityCapacity.Dimension,
+      EntityCapacity.Measure,
+      EntityCapacity.Calculation,
+      EntityCapacity.Indicator,
+    ]
+  }
 }
 
 // const DragTemplate = (args: DragComponent) => ({

diff --git a/packages/angular/entity/entity-schema/entity-schema.component.ts b/packages/angular/entity/entity-schema/entity-schema.component.ts
@@ -27,13 +27,15 @@ import { DataSettings } from '@metad/ocap-core'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { EntitySchemaDataSource, EntitySchemaFlatNode } from './data-source'
 import { EntityCapacity, EntitySchemaType } from './types'
+import { A11yModule } from '@angular/cdk/a11y'
 
 
 @Component({
   standalone: true,
   imports: [
     CommonModule,
     ReactiveFormsModule,
+    A11yModule,
     MatTreeModule,
     MatFormFieldModule,
     MatInputModule,
@@ -45,8 +47,9 @@ import { EntityCapacity, EntitySchemaType } from './types'
     MatCheckboxModule,
     MatProgressSpinnerModule,
     MatTooltipModule,
+
     NgmCommonModule,
-    OcapCoreModule
+    OcapCoreModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'ngm-entity-schema',
@@ -63,7 +66,10 @@ export class NgmEntitySchemaComponent implements OnInit, OnChanges {
   @Input() dataSettings: DataSettings
   @Input() appearance: NgmAppearance
   @Input() selectedHierarchy: string
-  @Input() capacities: EntityCapacity[]
+  @Input() capacities: EntityCapacity[] = [
+    EntityCapacity.Dimension,
+    EntityCapacity.Measure,
+  ]
 
   get searchControl() {
     return this.dataSource.searchControl