From 2392a1b90a12f521945af214499484cc99c2d037 Mon Sep 17 00:00:00 2001
From: Derek Burgman <derek@dereekb.com>
Date: Tue, 21 Jun 2022 02:02:01 -0500
Subject: [PATCH] feat: added valueSelectionField()

- deprecated staticEnumField()
---
 .../form/container/selection.component.html   |  5 +++
 .../form/container/selection.component.ts     | 41 ++++++++++++++++++-
 .../src/lib/formly/field/selection/index.ts   |  1 +
 .../formly/field/selection/selection.field.ts | 37 +++++++++++++++++
 .../lib/formly/field/value/enum/enum.field.ts |  6 +++
 .../src/lib/formly/field/value/enum/enum.ts   |  3 ++
 6 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 packages/dbx-form/src/lib/formly/field/selection/selection.field.ts

diff --git a/apps/demo/src/app/modules/doc/modules/form/container/selection.component.html b/apps/demo/src/app/modules/doc/modules/form/container/selection.component.html
index a801f41b1..1c77d1ed8 100644
--- a/apps/demo/src/app/modules/doc/modules/form/container/selection.component.html
+++ b/apps/demo/src/app/modules/doc/modules/form/container/selection.component.html
@@ -1,6 +1,11 @@
 <dbx-content-container>
   <doc-feature-layout header="Selection Fields" hint="">
     <!-- Examples -->
+    <h3>Select</h3>
+    <p>The typical select fields.</p>
+    <doc-feature-example header="valueSelectionField()" hint="A field that lets you select static options.">
+      <doc-form-example-form [dbxFormlyFields]="valueSelectionFields"></doc-form-example-form>
+    </doc-feature-example>
     <h3>Pickable</h3>
     <p>Pickable fields are use to display a list of preset/static values that the user can choose from.</p>
     <doc-feature-example header="pickableItemChipField()" hint="A field that lets you choose items from a set of chips.">
diff --git a/apps/demo/src/app/modules/doc/modules/form/container/selection.component.ts b/apps/demo/src/app/modules/doc/modules/form/container/selection.component.ts
index 95a075b42..78bcf1608 100644
--- a/apps/demo/src/app/modules/doc/modules/form/container/selection.component.ts
+++ b/apps/demo/src/app/modules/doc/modules/form/container/selection.component.ts
@@ -2,7 +2,7 @@ import { safeDetectChanges } from '@dereekb/dbx-core';
 import { BehaviorSubject, map, Observable, of, delay } from 'rxjs';
 import { ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
 import { FormlyFieldConfig } from '@ngx-formly/core';
-import { filterPickableItemFieldValuesByLabel, pickableItemChipField, pickableItemListField, searchableChipField, searchableStringChipField, searchableTextField, SearchableValueFieldDisplayFn, SearchableValueFieldDisplayValue, SearchableValueFieldStringSearchFn, SearchableValueFieldValue } from '@dereekb/dbx-form';
+import { filterPickableItemFieldValuesByLabel, pickableItemChipField, pickableItemListField, searchableChipField, searchableStringChipField, searchableTextField, SearchableValueFieldDisplayFn, SearchableValueFieldDisplayValue, SearchableValueFieldStringSearchFn, SearchableValueFieldValue, valueSelectionField, ValueSelectionOption } from '@dereekb/dbx-form';
 import { randomDelayWithRandomFunction } from '@dereekb/rxjs';
 import { randomArrayFactory, randomNumberFactory } from '@dereekb/util';
 import { DocFormExampleSelectionValue, DocFormExampleSelectionValueId, EXAMPLE_DISPLAY_FOR_SELECTION_VALUE, EXAMPLE_DISPLAY_FOR_SELECTION_VALUE_WITH_CUSTOM_DISPLAYS, EXAMPLE_SEARCH_FOR_SELECTION_VALUE, MAKE_EXAMPLE_SELECTION_VALUE } from '../component/selection.example';
@@ -33,6 +33,21 @@ export const DISPLAY_FOR_STRING_VALUE: SearchableValueFieldDisplayFn<string> = (
 
 export const MAKE_RANDOM_STRING_VALUES = randomArrayFactory({ random: { min: 40, max: 40 }, make: () => ({ value: String(MAKE_EXAMPLE_SELECTION_VALUE().value) }) });
 
+export const VALUE_SELECTION_VALUES: ValueSelectionOption<number>[] = [
+  {
+    label: 'First Value',
+    value: 100
+  },
+  {
+    label: 'Second Value',
+    value: 200
+  },
+  {
+    label: 'Third Value',
+    value: 300
+  }
+];
+
 @Component({
   templateUrl: './selection.component.html'
 })
@@ -40,6 +55,30 @@ export class DocFormSelectionComponent implements OnDestroy {
   private _searchStrings = new BehaviorSubject<TestStringSearchFunction>((search) => ['A', 'B', 'C', 'D'].map((x) => `${search} ${x}`.trim()));
   readonly searchFn$ = this._searchStrings.asObservable();
 
+  readonly valueSelectionFields: FormlyFieldConfig[] = [
+    valueSelectionField({
+      key: 'selectOne',
+      label: 'Select One',
+      description: 'This is a simple selection field for picking a single value.',
+      options: VALUE_SELECTION_VALUES
+    }),
+    valueSelectionField({
+      key: 'selectMultiple',
+      label: 'Select Multiple',
+      description: 'This is a simple selection field for picking an array of values.',
+      options: VALUE_SELECTION_VALUES,
+      multiple: true,
+      selectAllOption: true
+    }),
+    valueSelectionField({
+      key: 'selectOneNative',
+      label: 'Select Native',
+      description: 'This is a native selection field.',
+      options: VALUE_SELECTION_VALUES,
+      native: true
+    })
+  ];
+
   readonly pickableItemChipFields: FormlyFieldConfig[] = [
     pickableItemChipField({
       key: 'stringItemChips',
diff --git a/packages/dbx-form/src/lib/formly/field/selection/index.ts b/packages/dbx-form/src/lib/formly/field/selection/index.ts
index c2610003e..e935dfa9e 100644
--- a/packages/dbx-form/src/lib/formly/field/selection/index.ts
+++ b/packages/dbx-form/src/lib/formly/field/selection/index.ts
@@ -1,4 +1,5 @@
 export * from './pickable';
 export * from './searchable';
 export * from './selection';
+export * from './selection.field';
 export * from './selection.module';
diff --git a/packages/dbx-form/src/lib/formly/field/selection/selection.field.ts b/packages/dbx-form/src/lib/formly/field/selection/selection.field.ts
new file mode 100644
index 000000000..43ccc2953
--- /dev/null
+++ b/packages/dbx-form/src/lib/formly/field/selection/selection.field.ts
@@ -0,0 +1,37 @@
+import { Maybe } from '@dereekb/util';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { DescriptionFieldConfig, formlyField, LabeledFieldConfig, propsForFieldConfig } from '../field';
+
+export interface ValueSelectionOption<T> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface ValueSelectionFieldConfig<T> extends LabeledFieldConfig, DescriptionFieldConfig {
+  native?: boolean;
+  options: ValueSelectionOption<T>[];
+  multiple?: boolean;
+  selectAllOption?: true | string;
+}
+
+export function valueSelectionField<T>(config: ValueSelectionFieldConfig<T>): FormlyFieldConfig {
+  const { key, native = false, selectAllOption: inputSelectAllOption } = config;
+  let selectAllOptionConfig: Maybe<{ selectAllOption: string }>;
+
+  if (inputSelectAllOption) {
+    selectAllOptionConfig = {
+      selectAllOption: typeof inputSelectAllOption === 'boolean' ? 'Select All' : (inputSelectAllOption as string)
+    };
+  }
+
+  return formlyField({
+    key,
+    type: native ? 'native-select' : 'select',
+    ...propsForFieldConfig(config, {
+      options: config.options,
+      multiple: config.multiple ?? false,
+      ...selectAllOptionConfig
+    })
+  });
+}
diff --git a/packages/dbx-form/src/lib/formly/field/value/enum/enum.field.ts b/packages/dbx-form/src/lib/formly/field/value/enum/enum.field.ts
index 88461b8f9..a50ab3fe7 100644
--- a/packages/dbx-form/src/lib/formly/field/value/enum/enum.field.ts
+++ b/packages/dbx-form/src/lib/formly/field/value/enum/enum.field.ts
@@ -2,6 +2,9 @@ import { formlyField, DescriptionFieldConfig, LabeledFieldConfig } from '../../f
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { EnumValueFieldOption } from './enum';
 
+/**
+ * @deprecated
+ */
 export interface StaticEnumFieldConfig<T> extends LabeledFieldConfig, DescriptionFieldConfig {
   /**
    * Whether or not multiple values can be selected.
@@ -13,6 +16,9 @@ export interface StaticEnumFieldConfig<T> extends LabeledFieldConfig, Descriptio
   options: EnumValueFieldOption<T>[];
 }
 
+/**
+ * @deprecated use valueSelectionField instead.
+ */
 export function staticEnumField<T = unknown>({ key, label = '', placeholder = '', description, multiple = false, required = false, options }: StaticEnumFieldConfig<T>): FormlyFieldConfig {
   const fieldConfig: FormlyFieldConfig = formlyField({
     key,
diff --git a/packages/dbx-form/src/lib/formly/field/value/enum/enum.ts b/packages/dbx-form/src/lib/formly/field/value/enum/enum.ts
index e2ccb7d77..0081b55f3 100644
--- a/packages/dbx-form/src/lib/formly/field/value/enum/enum.ts
+++ b/packages/dbx-form/src/lib/formly/field/value/enum/enum.ts
@@ -1,3 +1,6 @@
+/**
+ * @deprecated use ValueSelectionOption instead.
+ */
 export interface EnumValueFieldOption<T> {
   value: T;
   label: string;