feat(RowChips): supporting checkboxes in row chips (#1615)

* feat(RowChips): testing out supporting checkboxes in row chips * update example * fix value issue --------- Co-authored-by: michael.dill <[email protected]>
bullhorn · Nov 4, 2024 · 2d9ed44 · 2d9ed44
1 parent 9272ba5
commit 2d9ed44
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 17 deletions.
diff --git a/projects/novo-elements/src/elements/chips/Chips.module.ts b/projects/novo-elements/src/elements/chips/Chips.module.ts
@@ -8,6 +8,7 @@ import { ErrorStateMatcher, NovoCommonModule } from 'novo-elements/elements/comm
 import { NovoFieldModule } from 'novo-elements/elements/field';
 import { NovoIconModule } from 'novo-elements/elements/icon';
 import { NovoPickerModule } from 'novo-elements/elements/picker';
+import { NovoCheckboxModule } from 'novo-elements/elements/checkbox';
 import { NovoChipAvatar, NovoChipElement, NovoChipRemove } from './Chip';
 import { NovoChipsDefaultOptions, NOVO_CHIPS_DEFAULT_OPTIONS } from './ChipDefaults';
 import { NovoChipInput } from './ChipInput';
@@ -16,7 +17,7 @@ import { NovoChipsElement } from './Chips';
 import { NovoRowChipElement, NovoRowChipsElement } from './RowChips';
 import { AvatarTypePipe } from './pipe/AvatarType.pipe';
 @NgModule({
-  imports: [CommonModule, FormsModule, NovoPickerModule, NovoIconModule, NovoFieldModule, NovoCommonModule],
+  imports: [CommonModule, FormsModule, NovoCheckboxModule, NovoPickerModule, NovoIconModule, NovoFieldModule, NovoCommonModule],
   declarations: [
     NovoChipElement,
     NovoChipAvatar,

diff --git a/projects/novo-elements/src/elements/chips/Chips.ts b/projects/novo-elements/src/elements/chips/Chips.ts
@@ -171,26 +171,26 @@ export class NovoChipsElement implements OnInit, ControlValueAccessor {
     this.items = [];
     if (this.model && Array.isArray(this.model)) {
       const noLabels = [];
-      for (const value of this.model) {
+      for (const item of this.model) {
         let label;
-        if (this.source && this.source.format && Helpers.validateInterpolationProps(this.source.format, value)) {
-          label = Helpers.interpolate(this.source.format, value);
+        if (this.source && this.source.format && Helpers.validateInterpolationProps(this.source.format, item)) {
+          label = Helpers.interpolate(this.source.format, item);
         }
         if (this.source && label && label !== this.source.format) {
           this.items.push({
-            value,
+            value: item.value || item,
             label,
           });
         } else if (this.source.getLabels && typeof this.source.getLabels === 'function') {
-          noLabels.push(value);
+          noLabels.push(item);
         } else if (this.source.options && Array.isArray(this.source.options)) {
-          this.items.push(this.getLabelFromOptions(value));
+          this.items.push(this.getLabelFromOptions(item));
         } else if (this.source.categoryMap && this.source.categoryMap.size) {
-          this.items.push(value);
+          this.items.push(item);
         } else {
           this.items.push({
-            value,
-            label: value,
+            value: item,
+            label: item,
           });
         }
       }

diff --git a/projects/novo-elements/src/elements/chips/RowChips.ts b/projects/novo-elements/src/elements/chips/RowChips.ts
@@ -72,7 +72,8 @@ export class NovoRowChipElement extends NovoChipElement {
         *ngFor="let column of source.columns"
       >
         <ng-container *ngIf="column.editable">
-          <novo-field>
+          <novo-checkbox *ngIf="column.type === 'checkbox'" [(ngModel)]="item.value[column.name]" [disabled]="!column.editable"></novo-checkbox>
+          <novo-field *ngIf="column.type !== 'checkbox'">
             <input novoInput [type]="column.type || 'text'" [(ngModel)]="item.value[column.name]" />
           </novo-field>
         </ng-container>

diff --git a/projects/novo-elements/src/elements/field/input.ts b/projects/novo-elements/src/elements/field/input.ts
@@ -38,7 +38,7 @@ import { NovoFieldControl } from './field-control';
 export const NOVO_INPUT_VALUE_ACCESSOR = new InjectionToken<{ value: any }>('NOVO_INPUT_VALUE_ACCESSOR');
 
 // Invalid input type. Using one of these will throw an NovoInputUnsupportedTypeError.
-const NOVO_INPUT_INVALID_TYPES = ['button', 'checkbox', 'file', 'hidden', 'image', 'radio', 'reset', 'submit'];
+const NOVO_INPUT_INVALID_TYPES = ['button', 'file', 'hidden', 'image', 'radio', 'reset', 'submit'];
 
 let nextUniqueId = 0;
 

diff --git a/projects/novo-examples/src/examples.routes.ts b/projects/novo-examples/src/examples.routes.ts
@@ -241,7 +241,7 @@ export class AsideDesignPage {
 <p><em>Note:</em> All modal components should be declared as <code>entryComponents</code> in the module.</p>
 <h2>NovoAsideRef&lt;T&gt;</h2>
 <p><code>NovoAsideRef</code> should be injected into your modal component and all pass params can be accessed in the <code>params</code> property.</p>
-<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> <span class="hljs-title class_">AddFormParams</span> &#123;
+<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> AddFormParams &#123;
   <span class="hljs-attr">record</span>: <span class="hljs-built_in">number</span>;
 &#125;
 <span class="hljs-meta">&#64;Component</span>(&#123;&#125;)
@@ -2027,7 +2027,7 @@ export class ModalDesignPage {
 <ul>
 <li>
 <p><code>NovoModalParams</code> should no longer be used, instead use <code>NovoModalRef.params</code>. This is because <code>NovoModalRef</code> accepts a generic for the params property.</p>
-<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> <span class="hljs-title class_">MyParams</span> &#123;
+<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> MyParams &#123;
   <span class="hljs-attr">isDefault</span>: <span class="hljs-built_in">boolean</span>;
 &#125;
 ...
@@ -2085,7 +2085,7 @@ export class ModalDesignPage {
 <p><em>Note:</em> All modal components should be declared as <code>entryComponents</code> in the module.</p>
 <h2>NovoModalRef&lt;T&gt;</h2>
 <p><code>NovoModalRef</code> should be injected into your modal component and all pass params can be accessed in the <code>params</code> property.</p>
-<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> <span class="hljs-title class_">DeleteModalParams</span> &#123;
+<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> DeleteModalParams &#123;
   <span class="hljs-attr">record</span>: <span class="hljs-built_in">number</span>;
 &#125;
 <span class="hljs-meta">&#64;Component</span>(&#123;&#125;)
@@ -5603,8 +5603,8 @@ export class PatternsNativeFormsPage {
 <input readonly name="id" id="id" value="04D6H89Z" /></p>
 <p><label for="disabled">Random disabled input</label>
 <input disabled name="disabled" id="disabled" placeholder="Because why not?" /></p>
-<p><label for="about">About me</label></p>
-<textarea name="about" id="about" placeholder="I am a textarea..."></textarea>
+<p><label for="about">About me</label>
+<textarea name="about" id="about" placeholder="I am a textarea..."></textarea></p>
 <p><label>Choose a Doe:</label></p>
   <div>
     <input type="radio" id="john" name="drone" value="john" checked />

diff --git a/projects/novo-examples/src/form-controls/chips/row-chips/row-chips-example.ts b/projects/novo-examples/src/form-controls/chips/row-chips/row-chips-example.ts
@@ -20,21 +20,25 @@ export class RowChipsExample {
         id: 1,
         shiftDate: '2021-04-03',
         openings: 1,
+        closing: true,
       },
       {
         id: 2,
         shiftDate: '2021-04-06',
         openings: 1,
+        closing: true,
       },
       {
         id: 3,
         shiftDate: '2021-04-10',
         openings: 1,
+        closing: false,
       },
       {
         id: 4,
         shiftDate: '2021-04-12',
         openings: 1,
+        closing: false,
       },
     ];
     this.rowValue = [];
@@ -58,6 +62,16 @@ export class RowChipsExample {
             return item.value.openings;
           },
         },
+        {
+          label: 'Closing shift?',
+          editable: false,
+          type: 'checkbox',
+          width: 260,
+          name: 'closing',
+          data: (item: any): string => {
+            return item.value.closing;
+          },
+        },
       ],
     };
   }