PR for Filter wrap example added to design system

apps/sam-design-system-site/src/app/app.component.html

@@ -61,6 +61,12 @@
               FormlyInput
             </a>
           </li>
+          <li class="usa-sidenav__item">
+            <a [routerLink]="['formly/formlyFilters']" routerLinkActive="usa-current">
+              Formly Filters
+            </a>
+          </li>
+
           <li class="usa-sidenav__item">
             <a [routerLink]="['component/subheader']" routerLinkActive="usa-current">
               Subheader

libs/component-sample/src/lib/feature/side-menu-filters-sample/side-menu-filters-sample.component.html

@@ -3,5 +3,5 @@
 </sds-toolbar>
 <div class="sam-example-pagination" [sdsToolbarExpand]="toolbar">
     <h4>Filter Model:</h4>
-    <pre>{{results |json}}</pre>
+    <pre>{{results ? (results |json) : ''}}</pre>
 </div>

libs/component-sample/src/lib/feature/side-menu-filters-sample/side-menu-filters-sample.component.ts

@@ -24,14 +24,15 @@ export class SideMenuFiltersSampleComponent implements OnInit{
   fields: FormlyFieldConfig[] = [
     {
       key: 'searchKeyword',
-      wrappers: ['accordianwrapper'],
-      templateOptions: { label: 'Search by Keyword' },
+      wrappers: ['filterwrapper'],
+      templateOptions: { label: 'Keyword' },
       fieldGroup: [{
         key: 'keyword',
         type: 'input',
         templateOptions: {
           type: 'text',
           label: 'Keyword',
+          hideLabel: true
         },
 
       }]
@@ -40,13 +41,13 @@ export class SideMenuFiltersSampleComponent implements OnInit{
     {
       key: 'searchEntity',
       wrappers: ['accordianwrapper'],
-      templateOptions: { label: 'Search by Entity' },
+      templateOptions: { label: 'Entity' },
       fieldGroup: [
         {
           key: 'legalBusinessName',
           type: 'input',
           templateOptions: {
-            label: 'Legal Business Name',
+            label: 'Entity Name',
             placeholder: '',
             inputType: 'text',
           },

libs/packages/sam-formly/src/lib/formly/formly.config.ts

@@ -1,4 +1,4 @@
-    
+
 import { ConfigOption } from '@ngx-formly/core';
 import { FormlyWrapperFormFieldComponent } from './wrappers/form-field.wrapper';
 import { FormlyFieldInputComponent } from './types/input';
@@ -7,17 +7,19 @@ import { FormlyFieldRadioComponent } from './types/radio';
 import { FormlyFieldCheckboxComponent } from './types/checkbox';
 import { FormlyFieldMultiCheckboxComponent } from './types/multicheckbox';
 import { FormlyFieldTextAreaComponent } from './types/textarea';
- import { FormlyAccordianFormFieldComponent } from './wrappers/form-field.accordian';
+import { FormlyAccordianFormFieldComponent } from './wrappers/form-field.accordian';
+import { FormlyFormFieldFilterWrapperComponent } from './wrappers/form-field.filterwrapper';
 
 export const FIELD_TYPE_COMPONENTS = [
   FormlyFieldInputComponent,
   FormlyFieldCheckboxComponent,
-   FormlyFieldRadioComponent,
+  FormlyFieldRadioComponent,
   FormlyFieldSelectComponent,
   FormlyFieldTextAreaComponent,
-   FormlyFieldMultiCheckboxComponent,
+  FormlyFieldMultiCheckboxComponent,
   FormlyWrapperFormFieldComponent,
-   FormlyAccordianFormFieldComponent
+  FormlyAccordianFormFieldComponent,
+  FormlyFormFieldFilterWrapperComponent
 ];
 
 export const FORMLY_CONFIG: ConfigOption = {
@@ -54,8 +56,10 @@ export const FORMLY_CONFIG: ConfigOption = {
     },
   ],
   wrappers: [
-    {name: 'form-field', component: FormlyWrapperFormFieldComponent },
-
-    {name: 'accordianwrapper', component: FormlyAccordianFormFieldComponent },
+    { name: 'form-field', component: FormlyWrapperFormFieldComponent },
+
+    { name: 'accordianwrapper', component: FormlyAccordianFormFieldComponent },
+    { name: 'filterwrapper', component: FormlyFormFieldFilterWrapperComponent },
   ],
+
 };

libs/packages/sam-formly/src/lib/formly/wrappers/form-field.filterwrapper.ts

@@ -0,0 +1,28 @@
+
+import { Component, ViewChild, ViewContainerRef, OnInit } from '@angular/core';
+import { FieldWrapper } from '@ngx-formly/core';
+
+@Component({
+  selector: 'sam-formly-filter-wrapper-form-field',
+  template: `
+
+    <div  class="wrapper-body">
+      <div class="sds-accordion__trigger header-label"> {{to.label}} </div>
+      <ng-container #fieldComponent></ng-container>
+    </div>
+  `,
+    styles: [`
+    .wrapper-body {
+        margin: 0 5px;
+        padding:1px 6px 10px;
+    }
+
+    .header-label{
+        color: #0a3466;
+        font-size:16px;
+    }
+  `]
+})
+export class FormlyFormFieldFilterWrapperComponent extends FieldWrapper {
+  @ViewChild('fieldComponent', {read: ViewContainerRef}) fieldComponent: ViewContainerRef;
+}

libs/sam-formly-sample/src/lib/feature/filter-wrapper/filter-wrapper.component.html

@@ -0,0 +1,7 @@
+<div>
+    <sds-filters [form]="form" [fields]="fields" [model]="model" (filterChange)="filterChange$.next($event)"></sds-filters> 
+</div>
+<div class="sam-example-pagination" >
+    <h4>Filter Model:</h4>
+    <pre>{{results ? (results |json) : ''}}</pre>
+</div>

libs/sam-formly-sample/src/lib/feature/filter-wrapper/filter-wrapper.component.ts

@@ -0,0 +1,231 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';
+import { BehaviorSubject } from 'rxjs';
+
+
+@Component({
+  selector: 'filter-wrapper',
+  templateUrl: './filter-wrapper.component.html',
+})
+export class FilterWrapperComponent implements OnInit {
+
+  results: any = {};
+  form = new FormGroup({});
+  model = {};
+  options: FormlyFormOptions = {};
+    /**
+   * Event when something is checked/selected in the grid
+   */
+  public filterChange$ = new BehaviorSubject<object>(null);
+
+
+  fields: FormlyFieldConfig[] = [
+    {
+      key: 'searchKeyword',
+      wrappers: ['filterwrapper'],
+      templateOptions: { label: 'Keyword' },
+      fieldGroup: [{
+        key: 'keyword',
+        type: 'input',
+        templateOptions: {
+          type: 'text',
+          label: 'Keyword',
+          hideLabel: true
+        },
+
+      }]
+    },
+
+    {
+      key: 'searchEntity',
+      wrappers: ['accordianwrapper'],
+      templateOptions: { label: 'Entity' },
+      fieldGroup: [
+        {
+          key: 'legalBusinessName',
+          type: 'input',
+          templateOptions: {
+            label: 'Entity Name',
+            placeholder: '',
+            inputType: 'text',
+          },
+        },
+        {
+          key: 'uniqueEntityIdSam',
+          type: 'input',
+          templateOptions: {
+            required: true,
+            label: 'Unique Entity ID (SAM)',
+            placeholder: '',
+            min: 13,
+            max: 40,
+            inputType: 'number',
+            inputStyle: 'error',
+          },
+        }
+      ],
+    },
+    {
+      key: 'entityStatus',
+      wrappers: ['accordianwrapper'],
+      templateOptions: { label: 'Entity Status' },
+      fieldGroup: [
+        {
+          key: 'statusCheckbox',
+          type: 'multicheckbox',
+          templateOptions: {
+            label: 'Status Select',
+            options: [
+              {
+                key: 'Active',
+                value: 'Active'
+              },
+              {
+                key: 'Draft',
+                value: 'Draft'
+              },
+              {
+                key: 'Expired',
+                value: 'Expired'
+              },
+              {
+                key: 'InProgress',
+                value: 'In Progress'
+              }
+            ]
+          },
+        },
+        {
+          key: 'entityName',
+          type: 'input',
+          templateOptions: {
+            label: 'Entity Name',
+            placeholder: '',
+            inputType: 'text',
+          },
+        },
+      ]
+    },
+    {
+      key: 'expirationDate',
+      wrappers: ['accordianwrapper'],
+      templateOptions: { label: 'Expiration Date' },
+      fieldGroup: [
+        {
+          key: 'expirationDateOption',
+          type: 'radio',
+          templateOptions: {
+            label:'Expiration Date',
+            options: [
+              { label: '30 Days', value: '30' },
+              { label: '60 Days', value: '60' },
+              { label: '90 Days', value: '90' },
+
+            ]
+          },
+
+
+        },
+        {
+          key: 'entityCheckbox',
+          type: 'multicheckbox',
+          templateOptions: {
+            label: 'Entity Status',
+            options: [
+              {
+                key: 'Active',
+                value: 'Active'
+              },
+              {
+                key: 'Draft',
+                value: 'Draft'
+              },
+              {
+                key: 'Expired',
+                value: 'Expired'
+              },
+              {
+                key: 'InProgress',
+                value: 'In Progress'
+              }
+            ]
+          },
+        },
+      ]
+    },
+    // {
+    //   key: 'addressUpdate',
+    //   wrappers: ['accordianwrapper'],
+    //   templateOptions: { label: 'Address Update' },
+    //   fieldGroup: [
+    //     {
+    //       key: 'addressUpdateOption',
+    //       type: 'radio',
+    //       templateOptions: {
+    //         options: [
+    //           { label: 'Update Required', value: 'adrupr' },
+    //           { label: 'Update Not Required', value: 'adrupn' },
+
+    //         ]
+    //       },
+    //     }
+    //   ]
+    // },
+    {
+      key: 'entityType',
+      wrappers: ['filterwrapper'],
+      templateOptions: { label: 'Entity Types' },
+      fieldGroup: [
+        {
+          key: 'entityType',
+          type: 'select',
+          templateOptions: {
+            label: 'Type',
+            multiple: false,
+            options: [
+              { label: 'Contract Opportunities', value: 'co' },
+              { label: 'Entity Information', value: 'ei' },
+              { label: 'Assitance Listings', value: 'al' },
+              { label: 'Contract Data', value: 'cd' },
+              { label: 'Federal Heirarchy', value: 'fh' },
+              { label: 'Wage Determination', value: 'wd' },
+            ],
+          },
+        },
+        {
+          key: 'entityCheckbox',
+          type: 'multicheckbox',
+          templateOptions: {
+            label: 'Entity Status',
+            options: [
+              {
+                key: 'Active',
+                value: 'Active'
+              },
+              {
+                key: 'Draft',
+                value: 'Draft'
+              },
+              {
+                key: 'Expired',
+                value: 'Expired'
+              },
+              {
+                key: 'InProgress',
+                value: 'In Progress'
+              }
+            ]
+          },
+        },
+      ]
+    }
+  ];
+  public ngOnInit() {
+    this.filterChange$.subscribe(
+      res =>
+        this.results = res
+  );
+  }
+
+}

libs/sam-formly-sample/src/lib/feature/filter-wrapper/filter-wrapper.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { FormlyModule } from '@ngx-formly/core';
+import { SdsFiltersModule } from '@gsa-sam/sam-formly';
+import { FilterWrapperComponent } from './filter-wrapper.component';
+@NgModule({
+    declarations: [FilterWrapperComponent],
+    imports: [
+        CommonModule,
+        FormsModule,
+        SdsFiltersModule,
+        FormlyModule.forRoot(),
+        ReactiveFormsModule
+
+    ], exports: [FilterWrapperComponent]
+})
+export class FilterWrapperSampleModule { }