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

Use unique-id-helper and don't use guidFor #494

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Use unique-id-helper and don't use guidFor #494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
83f1a07
Use `unique-id`-helper and don't use `guidFor`
onechiporenko Jul 9, 2022
61ca301
Wait for ember-cli-typescript#1515
onechiporenko Jul 10, 2022
816c5ba
Fix `embroider-optimized` scenario
onechiporenko Jul 11, 2022
236b307
Use correct versions
onechiporenko Jul 11, 2022
a1a2c64
Merge branch 'master' into use-unique-id
onechiporenko Jul 11, 2022
0b7208f
Fix lock-file
onechiporenko Jul 11, 2022
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
6 changes: 1 addition & 5 deletions addon/components/models-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import Component from '@glimmer/component';
import { assert, warn } from '@ember/debug';
import { action, get, set } from '@ember/object';
import EmberArray, { A, isArray } from '@ember/array';
import { guidFor } from '@ember/object/internals';
import betterCompare from '../utils/emt/better-compare';
import { SortConstants } from '../constants/sort-constants';
import ModelsTableColumn, {
Expand Down Expand Up @@ -692,9 +691,6 @@ export interface ModelsTableArgs {
export default class ModelsTableComponent<
T extends ModelsTableArgs = ModelsTableArgs
> extends Component<T> {
@tracked
protected _id = guidFor(this);

@tracked
protected _showColumnsDropdown = true;

Expand Down Expand Up @@ -1412,7 +1408,7 @@ export default class ModelsTableComponent<
protected _checkColumnTitles(): void {
this.columns.forEach((c, index) => {
warn(
`#${this._id}. No title. Column #${index}. ${c.propertyName}`,
`No title. Column #${index}. ${c.propertyName}`,
!(!hasOwnProperty.call(c, 'title') && c.propertyName),
{ id: '#emt-column-no-title' }
);
Expand Down
46 changes: 24 additions & 22 deletions addon/components/models-table/themes/bootstrap4/global-filter.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,30 @@
{{#if (has-block)}}
{{yield}}
{{else}}
<div class={{concat @themeInstance.form " globalSearch"}}>
<div class={{@themeInstance.inputGroup}}>
<label for={{this.inputId}} class="input-group-addon">{{@themeInstance.searchLabelMsg}}</label>
<Input
id={{this.inputId}}
@type="text"
@value={{@value}}
class={{concat @themeInstance.input " filterString"}}
@enter={{this.noop}}
{{on "input" this.updateGlobalFilterString}}
placeholder={{@themeInstance.searchPlaceholderMsg}}/>
<span class="input-group-btn">
<button
class="clearFilterIcon {{@themeInstance.buttonDefaultSmall}}"
disabled={{unless @globalFilterUsed "disabled"}}
{{on "click" this.clearGlobalFilter}}
type="button">
<i class={{@themeInstance.clearFilterIcon}}></i>
<span class="emt-sr-only">{{@themeInstance.clearGlobalFilterMsg}}</span>
</button>
</span>
{{#let (unique-id) as |globalFilterId|}}
<div class={{concat @themeInstance.form " globalSearch"}}>
<div class={{@themeInstance.inputGroup}}>
<label for={{globalFilterId}} class="input-group-addon">{{@themeInstance.searchLabelMsg}}</label>
<Input
id={{globalFilterId}}
@type="text"
@value={{@value}}
class={{concat @themeInstance.input " filterString"}}
@enter={{this.noop}}
{{on "input" this.updateGlobalFilterString}}
placeholder={{@themeInstance.searchPlaceholderMsg}}/>
<span class="input-group-btn">
<button
class="clearFilterIcon {{@themeInstance.buttonDefaultSmall}}"
disabled={{unless @globalFilterUsed "disabled"}}
{{on "click" this.clearGlobalFilter}}
type="button">
<i class={{@themeInstance.clearFilterIcon}}></i>
<span class="emt-sr-only">{{@themeInstance.clearGlobalFilterMsg}}</span>
</button>
</span>
</div>
</div>
</div>
{{/let}}
{{/if}}
</div>
68 changes: 35 additions & 33 deletions addon/components/models-table/themes/bootstrap4/row-filtering-cell.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,39 +32,41 @@
}}
{{else}}
{{#if @column.useFilter}}
<label for={{this.inputId}} class="emt-sr-only">{{@column.columnTitle}}</label>
<div class={{@themeInstance.inputGroup}}>
{{#if @column.filterWithSelect}}
{{component
(ensure-safe-component @themeInstance.selectComponent)
[email protected]
[email protected]
[email protected]
themeInstance=@themeInstance
class=(concat @themeInstance.input " changeFilterForColumn")
changeValue=this.updateColumnFilter
}}
{{else}}
<Input
id={{this.inputId}}
@type="text"
@value={{@column.filterString}}
class={{@themeInstance.input}}
@enter={{this.noop}}
{{on "input" this.updateColumnFilter}}
placeholder={{@column.filterPlaceholder}}/>
{{/if}}
<span class="input-group-btn">
<button
class="clearFilterIcon {{@themeInstance.buttonDefaultSmall}}"
aria-label={{@themeInstance.clearFilterMsg}}
disabled={{unless @column.filterUsed "disabled"}}
{{on "click" this.clearColumnFilter}}
type="button">
<i class={{@themeInstance.clearFilterIcon}}></i>
</button>
</span>
</div>
{{#let (unique-id) as |rowFilteringCellId|}}
<label for={{rowFilteringCellId}} class="emt-sr-only">{{@column.columnTitle}}</label>
<div class={{@themeInstance.inputGroup}}>
{{#if @column.filterWithSelect}}
{{component
(ensure-safe-component @themeInstance.selectComponent)
[email protected]
[email protected]
[email protected]
themeInstance=@themeInstance
class=(concat @themeInstance.input " changeFilterForColumn")
changeValue=this.updateColumnFilter
}}
{{else}}
<Input
id={{rowFilteringCellId}}
@type="text"
@value={{@column.filterString}}
class={{@themeInstance.input}}
@enter={{this.noop}}
{{on "input" this.updateColumnFilter}}
placeholder={{@column.filterPlaceholder}}/>
{{/if}}
<span class="input-group-btn">
<button
class="clearFilterIcon {{@themeInstance.buttonDefaultSmall}}"
aria-label={{@themeInstance.clearFilterMsg}}
disabled={{unless @column.filterUsed "disabled"}}
{{on "click" this.clearColumnFilter}}
type="button">
<i class={{@themeInstance.clearFilterIcon}}></i>
</button>
</span>
</div>
{{/let}}
{{else}}
&nbsp;
{{/if}}
Expand Down
40 changes: 21 additions & 19 deletions addon/components/models-table/themes/default/global-filter.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,27 @@
{{#if (has-block)}}
{{yield}}
{{else}}
<div class={{concat @themeInstance.form " globalSearch"}}>
<div class={{@themeInstance.formElementWrapper}}>
<label for={{this.inputId}}>{{@themeInstance.searchLabelMsg}}</label> <Input
id={{this.inputId}}
@type="text"
@value={{@value}}
class={{concat @themeInstance.input " filterString"}}
@enter={{this.noop}}
{{on "input" this.updateGlobalFilterString}}
placeholder={{@themeInstance.searchPlaceholderMsg}}/>
{{#if @globalFilterUsed}}
<i
class="clearFilterIcon {{@themeInstance.clearFilterIcon}}"
role="button"
aria-label={{@themeInstance.clearGlobalFilterMsg}}
{{on "click" this.clearGlobalFilter}}>
</i>
{{/if}}
{{#let (unique-id) as |globalFilterId|}}
<div class={{concat @themeInstance.form " globalSearch"}}>
<div class={{@themeInstance.formElementWrapper}}>
<label for={{globalFilterId}}>{{@themeInstance.searchLabelMsg}}</label> <Input
id={{globalFilterId}}
@type="text"
@value={{@value}}
class={{concat @themeInstance.input " filterString"}}
@enter={{this.noop}}
{{on "input" this.updateGlobalFilterString}}
placeholder={{@themeInstance.searchPlaceholderMsg}}/>
{{#if @globalFilterUsed}}
<i
class="clearFilterIcon {{@themeInstance.clearFilterIcon}}"
role="button"
aria-label={{@themeInstance.clearGlobalFilterMsg}}
{{on "click" this.clearGlobalFilter}}>
</i>
{{/if}}
</div>
</div>
</div>
{{/let}}
{{/if}}
</div>
7 changes: 0 additions & 7 deletions addon/components/models-table/themes/default/global-filter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { action } from '@ember/object';
import DefaultTheme from '../../../../services/emt-themes/default';

Expand Down Expand Up @@ -53,12 +52,6 @@ export interface GlobalFilterArgs {
* ```
*/
export default class GlobalFilter extends Component<GlobalFilterArgs> {
protected elementId = guidFor(this);

protected get inputId(): string {
return `${this.elementId}-global-filter`;
}

protected getNewFilterValueFromEvent(e: Event | string): string {
return typeof e === 'object' ? (<HTMLInputElement>e.target).value : e;
}
Expand Down
50 changes: 26 additions & 24 deletions addon/components/models-table/themes/default/page-size-select.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,30 @@
<div class="{{@themeInstance.pageSizeWrapper}}">
{{#let
(hash
Select=(
component (ensure-safe-component @themeInstance.selectComponent)
id=this.inputId
options=@pageSizeOptions
value=@pageSize
type=@type
themeInstance=@themeInstance
cssPropertyName="changePageSize"
changeValue=@changePageSize
{{#let (unique-id) as |pageSizeSelectId|}}
{{#let
(hash
Select=(
component (ensure-safe-component @themeInstance.selectComponent)
id=pageSizeSelectId
options=@pageSizeOptions
value=@pageSize
type=@type
themeInstance=@themeInstance
cssPropertyName="changePageSize"
changeValue=@changePageSize
)
)
)
as |PageSizeSelect|
}}
{{#if (has-block)}}
{{yield PageSizeSelect}}
{{else}}
<form class={{@themeInstance.form}}>
<div class={{@themeInstance.formElementWrapper}}>
<label for={{this.inputId}}>{{@themeInstance.rowsCountMsg}}</label>
<PageSizeSelect.Select/>
</div>
</form>
{{/if}}
as |PageSizeSelect|
}}
{{#if (has-block)}}
{{yield PageSizeSelect}}
{{else}}
<form class={{@themeInstance.form}}>
<div class={{@themeInstance.formElementWrapper}}>
<label for={{pageSizeSelectId}}>{{@themeInstance.rowsCountMsg}}</label>
<PageSizeSelect.Select/>
</div>
</form>
{{/if}}
{{/let}}
{{/let}}
</div>
7 changes: 1 addition & 6 deletions addon/components/models-table/themes/default/page-size-select.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { SelectOption } from '../../../models-table';
import DefaultTheme from '../../../../services/emt-themes/default';

Expand Down Expand Up @@ -60,9 +59,5 @@ export interface PageSizeSelectArgs {
* * [[DefaultTheme.Select | Select]] - selectbox with list of available page size options
*/
export default class PageSizeSelect extends Component<PageSizeSelectArgs> {
protected elementId = guidFor(this);

protected get inputId(): string {
return `${this.elementId}-page-size-select`;
}
// no-op
}
96 changes: 49 additions & 47 deletions addon/components/models-table/themes/default/pagination-numeric.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,54 @@
<div class="{{@themeInstance.paginationWrapper}} {{@themeInstance.paginationWrapperNumeric}}">
{{#let
(hash
PageNumberSelect=(
component (ensure-safe-component @themeInstance.selectComponent)
id=this.inputId
options=@currentPageNumberOptions
value=@currentPageNumber
type="number"
visiblePageNumbers=this.visiblePageNumbers
themeInstance=@themeInstance
changeValue=this.goToPage)
visiblePageNumbers=this.visiblePageNumbers)
as |Pagination|
}}
{{#if (has-block)}}
{{yield Pagination}}
{{else}}
<div class={{@themeInstance.paginationInternalWrapper}}>
<div class={{@themeInstance.paginationBlock}}>
{{#each this.visiblePageNumbers as |page|}}
{{#if page.isLink}}
<button
type="button"
class="{{@themeInstance.paginationNumericItem}} {{if page.isActive @themeInstance.paginationNumericItemActive}} {{@themeInstance.buttonDefault}}"
{{on "click" (fn this.goToPage page.label)}}>
{{page.label}}
</button>
{{else}}
<button
type="button"
class="{{@themeInstance.buttonDefault}} {{@themeInstance.paginationNumericItem}}"
disabled="disabled">
{{page.label}}
</button>
{{/if}}
{{/each}}
</div>
</div>
{{#if @showCurrentPageNumberSelect}}
<div class={{@themeInstance.currentPageSizeSelectWrapper}}>
<form class={{@themeInstance.form}}>
<div class={{@themeInstance.formElementWrapper}}>
<label for={{this.inputId}}>{{@themeInstance.currentPageNumberMsg}}</label>
<Pagination.PageNumberSelect/>&nbsp;
</div>
</form>
{{#let (unique-id) as |currentPageNumberId|}}
{{#let
(hash
PageNumberSelect=(
component (ensure-safe-component @themeInstance.selectComponent)
id=currentPageNumberId
options=@currentPageNumberOptions
value=@currentPageNumber
type="number"
visiblePageNumbers=this.visiblePageNumbers
themeInstance=@themeInstance
changeValue=this.goToPage)
visiblePageNumbers=this.visiblePageNumbers)
as |Pagination|
}}
{{#if (has-block)}}
{{yield Pagination}}
{{else}}
<div class={{@themeInstance.paginationInternalWrapper}}>
<div class={{@themeInstance.paginationBlock}}>
{{#each this.visiblePageNumbers as |page|}}
{{#if page.isLink}}
<button
type="button"
class="{{@themeInstance.paginationNumericItem}} {{if page.isActive @themeInstance.paginationNumericItemActive}} {{@themeInstance.buttonDefault}}"
{{on "click" (fn this.goToPage page.label)}}>
{{page.label}}
</button>
{{else}}
<button
type="button"
class="{{@themeInstance.buttonDefault}} {{@themeInstance.paginationNumericItem}}"
disabled="disabled">
{{page.label}}
</button>
{{/if}}
{{/each}}
</div>
</div>
{{#if @showCurrentPageNumberSelect}}
<div class={{@themeInstance.currentPageSizeSelectWrapper}}>
<form class={{@themeInstance.form}}>
<div class={{@themeInstance.formElementWrapper}}>
<label for={{currentPageNumberId}}>{{@themeInstance.currentPageNumberMsg}}</label>
<Pagination.PageNumberSelect/>&nbsp;
</div>
</form>
</div>
{{/if}}
{{/if}}
{{/if}}
{{/let}}
{{/let}}
</div>
Loading