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

Replace paper-input with cosmoz-input #598

Merged
merged 5 commits into from
Nov 22, 2023
Merged

Replace paper-input with cosmoz-input #598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bb83d80
feat: replace paper-input with cosmoz-input in text column
megheaiulian Nov 21, 2023
d9223d1
feat: run prettier and test and demo
megheaiulian Nov 21, 2023
7dd61fc
feat(number-range-input): replace paper-input
megheaiulian Nov 21, 2023
d61fa5f
feat: replace paper-input with cosmoz-input
megheaiulian Nov 21, 2023
8534150
feat: update @neovici/cosmoz-datetime-input
megheaiulian Nov 22, 2023
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
84 changes: 46 additions & 38 deletions cosmoz-omnitable-column-amount.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable no-return-assign */
import '@polymer/paper-input/paper-input';
import '@neovici/cosmoz-input';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
import './ui-helpers/cosmoz-clear-button';

Expand All @@ -9,7 +9,16 @@
import { columnMixin } from './cosmoz-omnitable-column-mixin';
import { defaultComputeSource } from './lib/utils-data';
import './lib/cosmoz-omnitable-amount-range-input';
import { getComparableValue, getCurrency, applySingleFilter, getString, getInputString, toAmount, toHashString, fromHashString } from './lib/utils-amount';
import {
getComparableValue,
getCurrency,
applySingleFilter,
getString,
getInputString,
toAmount,
toHashString,
fromHashString,
} from './lib/utils-amount';
import { get } from '@polymer/polymer/lib/utils/path';

/**
Expand All @@ -29,13 +38,12 @@
rates: { type: Object, notify: true },
width: { type: String, value: '70px' },
cellClass: { type: String, value: 'amount-cell align-right' },
headerCellClass: { type: String, value: 'amount-header-cell' }
headerCellClass: { type: String, value: 'amount-header-cell' },
};
}

getFilterFn(column, filter) {
const
min = getComparableValue({ ...column, valuePath: 'min' }, filter),
const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
max = getComparableValue({ ...column, valuePath: 'max' }, filter);

if (min == null && max == null) {
Expand Down Expand Up @@ -64,8 +72,7 @@
if (filter == null) {
return;
}
const
min = toAmount(rates, filter.min),
const min = toAmount(rates, filter.min),

Check warning on line 75 in cosmoz-omnitable-column-amount.js

View check run for this annotation

Codecov / codecov/patch

cosmoz-omnitable-column-amount.js#L75 

Added line #L75 was not covered by tests
max = toAmount(rates, filter.max);

if (min == null && max == null) {
Expand All @@ -86,51 +93,52 @@

return {
min: fromHashString(matches[1]),
max: fromHashString(matches[2])
max: fromHashString(matches[2]),

Check warning on line 96 in cosmoz-omnitable-column-amount.js

View check run for this annotation

Codecov / codecov/patch

cosmoz-omnitable-column-amount.js#L96 

Added line #L96 was not covered by tests
};
}

renderCell(column, { item }) {
return html`<span>${ column.getString(column, item) }</span>`;
return html`<span>${column.getString(column, item)}</span>`;
}

renderEditCell(column, { item }, onItemChange) {
const onChange = event => onItemChange({
amount: event.target.value,
currency: get(item, column.valuePath)?.currency
});

return html`<paper-input no-label-float type="number" @change=${ onChange } .value=${ getInputString(column, item) }>
<div slot="suffix">${ getCurrency(column, item) }</div>
</paper-input>`;
const onChange = (event) =>
onItemChange({
amount: event.target.value,
currency: get(item, column.valuePath)?.currency,
});

return html`<cosmoz-input
no-label-float
type="number"
@change=${onChange}
.value=${getInputString(column, item)}
>
<div slot="suffix">${getCurrency(column, item)}</div>
</cosmoz-input>`;

Check warning on line 118 in cosmoz-omnitable-column-amount.js

View check run for this annotation

Codecov / codecov/patch

cosmoz-omnitable-column-amount.js#L105-L118 

Added lines #L105 - L118 were not covered by tests
}

renderHeader(
{ title,
min,
max,
locale,
rates,
currency,
autoupdate,
autodetect },
{ title, min, max, locale, rates, currency, autoupdate, autodetect },
{ filter },
setState,
source
source,
) {
return html`<cosmoz-omnitable-amount-range-input
.title=${ title }
.filter=${ filter }
.values=${ source }
.rates=${ rates }
.min=${ min }
.max=${ max }
.locale=${ locale }
.currency=${ currency }
.autoupdate=${ autoupdate }
.autodetect=${ autodetect }
@filter-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, filter: value })) }
@header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) }
.title=${title}
.filter=${filter}
.values=${source}
.rates=${rates}
.min=${min}
.max=${max}
.locale=${locale}
.currency=${currency}
.autoupdate=${autoupdate}
.autodetect=${autodetect}
@filter-changed=${({ detail: { value } }) =>
setState((state) => ({ ...state, filter: value }))}
@header-focused-changed=${({ detail: { value } }) =>
setState((state) => ({ ...state, headerFocused: value }))}
></cosmoz-omnitable-amount-range-input>`;
}

Expand Down
23 changes: 12 additions & 11 deletions cosmoz-omnitable-column-autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

export const getComparableValue = (
{ valuePath, textProperty, valueProperty },
item
item,
) => {
const property = textProperty ? strProp(textProperty) : prop(valueProperty),
values = array(valuePath && get(item, valuePath)).map(property);
Expand All @@ -33,7 +33,7 @@
* @appliesMixin columnMixin
*/
class OmnitableColumnAutocomplete extends listColumnMixin(
columnMixin(PolymerElement)
columnMixin(PolymerElement),
) {
static get properties() {
return {
Expand Down Expand Up @@ -63,12 +63,12 @@

renderEditCell(column, { item }, onItemChange) {
const onChange = (event) => onItemChange(event.target.value);
return html`<paper-input
return html`<cosmoz-input

Check warning on line 66 in cosmoz-omnitable-column-autocomplete.js

View check run for this annotation

Codecov / codecov/patch

cosmoz-omnitable-column-autocomplete.js#L66 

Added line #L66 was not covered by tests
no-label-float
type="text"
@change=${onChange}
.value=${getString(column, item)}
></paper-input>`;
></cosmoz-input>`;

Check warning on line 71 in cosmoz-omnitable-column-autocomplete.js

View check run for this annotation

Codecov / codecov/patch

cosmoz-omnitable-column-autocomplete.js#L71 

Added line #L71 was not covered by tests
}

renderHeader(column, { filter, query }, setState, source) {
Expand All @@ -89,12 +89,13 @@
.onText=${onText(setState)}
>${when(
column.loading,
() => html`<paper-spinner-lite
style="width: 20px; height: 20px; flex:none;"
suffix
slot="suffix"
active
></paper-spinner-lite>`
() =>
html`<paper-spinner-lite
style="width: 20px; height: 20px; flex:none;"
suffix
slot="suffix"
active

Check warning on line 97 in cosmoz-omnitable-column-autocomplete.js

View check run for this annotation

Codecov / codecov/patch

cosmoz-omnitable-column-autocomplete.js#L93-L97 

Added lines #L93 - L97 were not covered by tests
></paper-spinner-lite>`,
)}</cosmoz-autocomplete-ui
>`;
}
Expand All @@ -105,5 +106,5 @@
}
customElements.define(
'cosmoz-omnitable-column-autocomplete',
OmnitableColumnAutocomplete
OmnitableColumnAutocomplete,
);
6 changes: 3 additions & 3 deletions cosmoz-omnitable-column-date.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable no-return-assign */
import '@polymer/paper-input/paper-input';
import '@neovici/cosmoz-input';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';

import './ui-helpers/cosmoz-clear-button';
Expand Down Expand Up @@ -88,12 +88,12 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
renderEditCell(column, { item }, onItemChange) {
const onChange = event => onItemChange(fromInputString(event.target.value));

return html`<paper-input
return html`<cosmoz-input
no-label-float
type="date"
@change=${ onChange }
.value=${ getInputString(column, item) }
></paper-input>`;
></cosmoz-input>`;
}

renderHeader(
Expand Down
2 changes: 1 addition & 1 deletion cosmoz-omnitable-column-datetime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {

renderEditCell(column, { item }, onItemChange) {
const onChange = event => onItemChange(fromInputString(event.target.value));
return html`<paper-input no-label-float type="text" @change=${ onChange } .value=${ getString(column, item) }></paper-input>`;
return html`<cosmoz-input no-label-float type="text" @change=${ onChange } .value=${ getString(column, item) }></cosmoz-input>`;
}

// eslint-disable-next-line max-lines-per-function
Expand Down
19 changes: 10 additions & 9 deletions cosmoz-omnitable-column-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,12 @@
const onChange = (event) =>
onItemChange(event.target.value.split(/,\s*/gu));

return html`<paper-input
return html`<cosmoz-input

Check warning on line 55 in cosmoz-omnitable-column-list.js

View check run for this annotation

Codecov / codecov/patch

cosmoz-omnitable-column-list.js#L55 

Added line #L55 was not covered by tests
no-label-float
type="text"
@change=${onChange}
.value=${getString(column, item)}
></paper-input>`;
@change=${onChange}
></cosmoz-input>`;

Check warning on line 60 in cosmoz-omnitable-column-list.js

View check run for this annotation

Codecov / codecov/patch

cosmoz-omnitable-column-list.js#L59-L60 

Added lines #L59 - L60 were not covered by tests
}

renderHeader(column, { filter, query }, setState, source) {
Expand All @@ -79,12 +79,13 @@
.onText=${onText(setState)}
>${when(
column.loading,
() => html`<paper-spinner-lite
style="width: 20px; height: 20px; flex:none;"
suffix
slot="suffix"
active
></paper-spinner-lite>`
() =>
html`<paper-spinner-lite
style="width: 20px; height: 20px; flex:none;"
suffix
slot="suffix"
active

Check warning on line 87 in cosmoz-omnitable-column-list.js

View check run for this annotation

Codecov / codecov/patch

cosmoz-omnitable-column-list.js#L83-L87 

Added lines #L83 - L87 were not covered by tests
></paper-spinner-lite>`,
)}</cosmoz-autocomplete-ui
>`;
}
Expand Down
66 changes: 41 additions & 25 deletions cosmoz-omnitable-column-number.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import '@polymer/paper-input/paper-input';
import '@neovici/cosmoz-input';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
import './ui-helpers/cosmoz-clear-button';

Expand All @@ -9,10 +9,16 @@

import './lib/cosmoz-omnitable-number-range-input';
import { defaultComputeSource } from './lib/utils-data';
import { applySingleFilter, getComparableValue, getInputString, getString, toHashString, toNumber } from './lib/utils-number';
import {
applySingleFilter,
getComparableValue,
getInputString,
getString,
toHashString,
toNumber,
} from './lib/utils-number';
import { get } from '@polymer/polymer/lib/utils/path';


/**
* @polymer
* @customElement
Expand All @@ -30,13 +36,12 @@
minWidth: { type: String, value: '30px' },
headerCellClass: { type: String, value: 'number-header-cell' },
maximumFractionDigits: { type: Number, value: null },
minimumFractionDigits: { type: Number, value: null } // browser default 0 for numbers, currency-specific or 2 for currency
minimumFractionDigits: { type: Number, value: null }, // browser default 0 for numbers, currency-specific or 2 for currency
};
}

getFilterFn(column, filter) {
const
min = getComparableValue({ ...column, valuePath: 'min' }, filter),
const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
max = getComparableValue({ ...column, valuePath: 'max' }, filter);

if (min == null && max == null) {
Expand Down Expand Up @@ -86,44 +91,55 @@

return {
min: toNumber(matches[1]),
max: toNumber(matches[2])
max: toNumber(matches[2]),

Check warning on line 94 in cosmoz-omnitable-column-number.js

View check run for this annotation

Codecov / codecov/patch

cosmoz-omnitable-column-number.js#L94 

Added line #L94 was not covered by tests
};
}

renderCell(column, { item }) {
return html`<div class="omnitable-cell-number">${ getString(column, item) }</div>`;
return html`<div class="omnitable-cell-number">
${getString(column, item)}
</div>`;
}

renderEditCell(column, { item }, onItemChange) {
const onChange = event => onItemChange(event.target.value);

return html`<paper-input no-label-float type="number" @change=${ onChange } .value=${ getInputString(column, item) }></paper-input>`;
const onChange = (event) => onItemChange(event.target.value);

return html`<cosmoz-input
no-label-float
type="number"
@change=${onChange}
.value=${getInputString(column, item)}
></cosmoz-input>`;

Check warning on line 112 in cosmoz-omnitable-column-number.js

View check run for this annotation

Codecov / codecov/patch

cosmoz-omnitable-column-number.js#L105-L112 

Added lines #L105 - L112 were not covered by tests
}

renderHeader(
{ title,
{
title,
min,
max,
locale,
maximumFractionDigits,
minimumFractionDigits,
autoupdate },
autoupdate,
},
{ filter },
setState,
source
source,
) {
return html`<cosmoz-omnitable-number-range-input
.title=${ title }
.filter=${ filter }
.values=${ source }
.min=${ min }
.max=${ max }
.locale=${ locale }
.maximumFractionDigits=${ maximumFractionDigits }
.minimumFractionDigsits=${ minimumFractionDigits }
.autoupdate=${ autoupdate }
@filter-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, filter: value })) }
@header-focused-changed=${ ({ detail: { value }}) => setState(state => ({ ...state, headerFocused: value })) }
.title=${title}
.filter=${filter}
.values=${source}
.min=${min}
.max=${max}
.locale=${locale}
.maximumFractionDigits=${maximumFractionDigits}
.minimumFractionDigsits=${minimumFractionDigits}
.autoupdate=${autoupdate}
@filter-changed=${({ detail: { value } }) =>
setState((state) => ({ ...state, filter: value }))}
@header-focused-changed=${({ detail: { value } }) =>
setState((state) => ({ ...state, headerFocused: value }))}
></cosmoz-omnitable-number-range-input>`;
}

Expand Down
Loading