docs: add lookup cell type's JSDocs & add lookup code examples to cod…

…e-examples SPA
blackbaud · Mar 11, 2022 · c1be7dc · c1be7dc
1 parent e296d9f
commit c1be7dc
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 5 deletions.
diff --git a/apps/code-examples/src/app/app-routing.module.ts b/apps/code-examples/src/app/app-routing.module.ts
@@ -17,6 +17,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./features/layout.module').then((m) => m.LayoutModule),
   },
+  {
+    path: 'lookup',
+    loadChildren: () =>
+      import('./features/lookup.module').then((m) => m.LookupModule),
+  },
 ];
 
 @NgModule({

diff --git a/apps/code-examples/src/app/app.component.html b/apps/code-examples/src/app/app.component.html
@@ -13,12 +13,58 @@
       <li><a routerLink="forms/checkbox/basic">Checkbox (basic)</a></li>
     </ul>
   </li>
+
   <li>
     Layout
     <ul>
       <li><a routerLink="layout/box/basic">Box (basic)</a></li>
     </ul>
   </li>
+
+  <li>
+    Lookup
+    <ul>
+      <li>
+        Autocomplete
+        <ul>
+          <li><a routerLink="lookup/autocomplete/basic">Basic</a></li>
+          <li>
+            <a routerLink="lookup/autocomplete/search-filters"
+              >Search filters</a
+            >
+          </li>
+          <li><a routerLink="lookup/autocomplete/advanced">Advanced</a></li>
+          <li>
+            <a routerLink="lookup/autocomplete/custom-search">Custom search</a>
+          </li>
+        </ul>
+      </li>
+      <li>
+        Country field
+        <ul>
+          <li><a routerLink="lookup/country-field/basic">Basic</a></li>
+        </ul>
+      </li>
+      <li>
+        Lookup
+        <ul>
+          <li><a routerLink="lookup/lookup/async">Async</a></li>
+          <li><a routerLink="lookup/lookup/custom-picker">Custom picker</a></li>
+          <li><a routerLink="lookup/lookup/multi-select">Multi-select</a></li>
+          <li>
+            <a routerLink="lookup/lookup/result-templates">Result templates</a>
+          </li>
+          <li><a routerLink="lookup/lookup/single-select">Single select</a></li>
+        </ul>
+      </li>
+      <li>
+        Search
+        <ul>
+          <li><a routerLink="lookup/search/basic">Basic</a></li>
+        </ul>
+      </li>
+    </ul>
+  </li>
 </ul>
 
 <router-outlet></router-outlet>
diff --git a/apps/code-examples/src/app/code-examples/lookup/lookup/async/lookup-async-demo.component.ts b/apps/code-examples/src/app/code-examples/lookup/lookup/async/lookup-async-demo.component.ts
@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import {
+  SkyAutocompleteSearchAsyncArgs,
   SkyAutocompleteSearchAsyncResult,
   SkyAutocompleteSearchFunctionFilter,
 } from '@skyux/lookup';
 
-import { SkyAutocompleteSearchAsyncArgs } from 'lookup';
 import { Subject } from 'rxjs';
 
 @Component({

diff --git a/apps/code-examples/src/app/features/lookup.module.ts b/apps/code-examples/src/app/features/lookup.module.ts
@@ -0,0 +1,96 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AutocompleteDemoComponent as AdvancedAutocompleteComponent } from '../code-examples/lookup/autocomplete/advanced/autocomplete-demo.component';
+import { AutocompleteDemoModule as AdvancedAutocompleteModule } from '../code-examples/lookup/autocomplete/advanced/autocomplete-demo.module';
+import { AutocompleteDemoComponent as BasicAutocompleteComponent } from '../code-examples/lookup/autocomplete/basic/autocomplete-demo.component';
+import { AutocompleteDemoModule as BasicAutocompleteModule } from '../code-examples/lookup/autocomplete/basic/autocomplete-demo.module';
+import { AutocompleteDemoComponent as CustomSearchAutocompleteComponent } from '../code-examples/lookup/autocomplete/custom-search/autocomplete-demo.component';
+import { AutocompleteDemoModule as CustomSearchAutocompleteModule } from '../code-examples/lookup/autocomplete/custom-search/autocomplete-demo.module';
+import { AutocompleteDemoComponent as SearchFiltersAutocompleteComponent } from '../code-examples/lookup/autocomplete/search-filters/autocomplete-demo.component';
+import { AutocompleteDemoModule as SearchFiltersAutocompleteModule } from '../code-examples/lookup/autocomplete/search-filters/autocomplete-demo.module';
+import { CountryFieldDemoComponent } from '../code-examples/lookup/country-field/basic/country-field-demo.component';
+import { CountryFieldDemoModule } from '../code-examples/lookup/country-field/basic/country-field-demo.module';
+import { LookupAsyncDemoComponent } from '../code-examples/lookup/lookup/async/lookup-async-demo.component';
+import { LookupAsyncDemoModule } from '../code-examples/lookup/lookup/async/lookup-async-demo.module';
+import { LookupCustomPickerDemoComponent } from '../code-examples/lookup/lookup/custom-picker/lookup-custom-picker-demo.component';
+import { LookupCustomPickerDemoModule } from '../code-examples/lookup/lookup/custom-picker/lookup-custom-picker-demo.module';
+import { LookupMultipleSelectDemoComponent } from '../code-examples/lookup/lookup/multi-select/lookup-multiple-demo.component';
+import { LookupMultipleSelectDemoModule } from '../code-examples/lookup/lookup/multi-select/lookup-multiple-demo.module';
+import { LookupResultTemplatesDemoComponent } from '../code-examples/lookup/lookup/result-templates/lookup-result-templates-demo.component';
+import { LookupResultTemplatesDemoModule } from '../code-examples/lookup/lookup/result-templates/lookup-result-templates-demo.module';
+import { LookupSingleSelectDemoComponent } from '../code-examples/lookup/lookup/single-select/lookup-single-demo.component';
+import { LookupSingleSelectDemoModule } from '../code-examples/lookup/lookup/single-select/lookup-single-demo.module';
+import { SearchDemoComponent } from '../code-examples/lookup/search/basic/search-demo.component';
+import { SearchDemoModule } from '../code-examples/lookup/search/basic/search-demo.module';
+
+const routes: Routes = [
+  {
+    path: 'autocomplete/advanced',
+    component: AdvancedAutocompleteComponent,
+  },
+  {
+    path: 'autocomplete/basic',
+    component: BasicAutocompleteComponent,
+  },
+  {
+    path: 'autocomplete/custom-search',
+    component: CustomSearchAutocompleteComponent,
+  },
+  {
+    path: 'autocomplete/search-filters',
+    component: SearchFiltersAutocompleteComponent,
+  },
+  {
+    path: 'country-field/basic',
+    component: CountryFieldDemoComponent,
+  },
+  {
+    path: 'lookup/async',
+    component: LookupAsyncDemoComponent,
+  },
+  {
+    path: 'lookup/custom-picker',
+    component: LookupCustomPickerDemoComponent,
+  },
+  {
+    path: 'lookup/multi-select',
+    component: LookupMultipleSelectDemoComponent,
+  },
+  {
+    path: 'lookup/result-templates',
+    component: LookupResultTemplatesDemoComponent,
+  },
+  {
+    path: 'lookup/single-select',
+    component: LookupSingleSelectDemoComponent,
+  },
+  {
+    path: 'search/basic',
+    component: SearchDemoComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LookupRoutingModule {}
+
+@NgModule({
+  imports: [
+    AdvancedAutocompleteModule,
+    BasicAutocompleteModule,
+    CustomSearchAutocompleteModule,
+    SearchFiltersAutocompleteModule,
+    CountryFieldDemoModule,
+    LookupAsyncDemoModule,
+    LookupCustomPickerDemoModule,
+    LookupMultipleSelectDemoModule,
+    LookupResultTemplatesDemoModule,
+    LookupSingleSelectDemoModule,
+    SearchDemoModule,
+    LookupRoutingModule,
+  ],
+})
+export class LookupModule {}
diff --git a/libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts b/libs/components/ag-grid/src/lib/modules/ag-grid/types/cell-type.ts
@@ -1,13 +1,13 @@
 /**
- * These column types can be used by setting the AG Grid [column definition `type`](https://www.ag-grid.com/javascript-grid-column-properties/) to one of the following values.
+ * These column types can be used by setting the AG Grid [column definition `type`](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing) to one of the following values.
  * <br/>
  * Any [SKY UX component](https://developer.blackbaud.com/skyux/components) can be made into a [cell editor](https://www.ag-grid.com/javascript-grid-cell-editor/) or [cell renderer](https://www.ag-grid.com/javascript-grid-cell-rendering-components/) component. If you would like to use a component that does not have a column definition yet, please consider [contributing it](https://developer.blackbaud.com/skyux/contribute/contribution-process) to the SKY UX data entry grid module, or [file an issue](https://developer.blackbaud.com/skyux/contribute/contribution-process/file-issue) in the [`@skyux/ag-grid` repo](https://github.com/blackbaud/skyux-ag-grid).
  */
 export enum SkyCellType {
   /**
    * **Edit mode**
    * <br/>
-   * Specifies that cells in the column will be edited as  [SKY UX autocomplete components](https://developer.blackbaud.com/skyux/components/autocomplete). You can set any of the autocomplete component's properties by passing them in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/javascript-grid-column-properties/). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Text can be entered and a value selected from the provided list.
+   * Specifies that cells in the column will be edited as  [SKY UX autocomplete components](https://developer.blackbaud.com/skyux/components/autocomplete). You can set any of the autocomplete component's properties by passing `SkyCellEditorAutocompleteParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Text can be entered and a value selected from the provided list.
    * <br/><br/>
    * **Read-only mode**
    * <br/>
@@ -33,13 +33,22 @@ export enum SkyCellType {
   /**
    * **Edit mode**
    * <br/>
-   * Specifies that cells in the column will be edited as [SKY UX datepicker components](https://developer.blackbaud.com/skyux/components/datepicker). You can set any of the datepicker component's properties by passing them in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/javascript-grid-column-properties/). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Date values can be entered.
+   * Specifies that cells in the column will be edited as [SKY UX datepicker components](https://developer.blackbaud.com/skyux/components/datepicker). You can set any of the datepicker component's properties by passing `SkyCellEditorDatepickerParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Date values can be entered.
    * <br/><br/>
    * **Read-only mode**
    * <br/>
    * Specifies that cells in the column will display the currently selected date formatted as `MM-DD-YYYY`, or the date format of the locale passed to `getGridOptions()`. If you would like to overwrite this format, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition. See the demo for an example.
    */
   Date = 'skyCellDate',
+  /**
+   * **Edit mode**
+   * <br/>
+   * Specifies that cells in the column will be edited as [SKY UX lookup components](https://developer.blackbaud.com/skyux-v5/components/lookup). You can set any of the lookup component's properties by passing `SkyCellEditorLookupParams` in the [column definition's `cellEditorParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing). These params can be updated as other cell edits are made or [provided dynamically](https://www.ag-grid.com/javascript-grid-cell-editing/#dynamic-parameters) based on other cell values. See the demo for an example. Text can be entered and a value selected from the provided list.
+   * <br/><br/>
+   * **Read-only mode**
+   * <br/>
+   * Specifies that cells the column will display, by default, either: the name(s) of the selected value(s) if there are less than 6, or a summary count of the values if there are more than 5. If the lookup needs to show a different property or needs to be formatted in any way, you can [define a `valueFormatter`](https://www.ag-grid.com/javascript-grid-value-formatters/) on the column definition.
+   */
   Lookup = 'skyCellLookup',
   /**
    * **Edit mode**
@@ -76,7 +85,7 @@ export enum SkyCellType {
   /**
    * **Edit and read-only modes**
    * <br/>
-   * Specifies cell in the column will be passed to a validator function which flags erroneous entries. You can set the validator function and message by passing them to [column definition's `cellRendererParams` property](https://www.ag-grid.com/javascript-grid-column-properties/) as `skyComponentProperties.validator` and `skyComponentProperties.validatorMessage`. SkyCellType.Validator can be combined with other cell types, such as SkyCellType.Autocomplete or SkyCellType.Date, by using the array syntax for the [column definition's `type` property](https://www.ag-grid.com/javascript-grid-column-properties/).
+   * Specifies cell in the column will be passed to a validator function which flags erroneous entries. You can set the validator function and message by passing them to [column definition's `cellRendererParams` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing) as `skyComponentProperties.validator` and `skyComponentProperties.validatorMessage`. SkyCellType.Validator can be combined with other cell types, such as SkyCellType.Autocomplete or SkyCellType.Date, by using the array syntax for the [column definition's `type` property](https://www.ag-grid.com/angular-data-grid/column-properties/#reference-editing).
    */
   Validator = 'skyCellValidator',
 }