Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Nov 4, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b1df0fa
feat(RowChips): testing out supporting checkboxes in row chips
dvoegelin Oct 4, 2024
3cb7cb5
update example
Oct 8, 2024
9cb4c9c
fix value issue
Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion projects/novo-elements/src/elements/chips/Chips.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down
18 changes: 9 additions & 9 deletions projects/novo-elements/src/elements/chips/Chips.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
}
}
Expand Down
3 changes: 2 additions & 1 deletion projects/novo-elements/src/elements/chips/RowChips.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion projects/novo-elements/src/elements/field/input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
10 changes: 5 additions & 5 deletions projects/novo-examples/src/examples.routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;)
Expand Down Expand Up @@ -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;
...
Expand Down Expand Up @@ -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;)
Expand Down Expand Up @@ -5597,8 +5597,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 />
Expand Down
14 changes: 14 additions & 0 deletions projects/novo-examples/src/form-controls/chips/row-chips/row-chips-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];
Expand All @@ -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;
},
},
],
};
}
Expand Down
Loading