Skip to content

Commit

Permalink
Merge pull request #627 from Neovici/feat/limits-range-inputs
Browse files Browse the repository at this point in the history 
feat/limits range inputs
  • Loading branch information
@megheaiulian
megheaiulian authored Sep 12, 2024
2 parents e861dd9 + 193163a commit fd96136
Show file tree
Hide file tree
Showing 6 changed files with 265 additions and 161 deletions.
18 changes: 17 additions & 1 deletion cosmoz-omnitable-column-amount.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
return {
min: { type: Number, value: null, notify: true },
max: { type: Number, value: null, notify: true },
limits: { type: Function },
locale: { type: String, value: null, notify: true },
autoupdate: { type: Boolean, value: false, notify: true },
currency: { type: String, notify: true },
Expand All @@ -42,6 +43,10 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
};
}

getConfig(column) {
return { limits: column.limits };
}

getFilterFn(column, filter) {
const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
max = getComparableValue({ ...column, valuePath: 'max' }, filter);
Expand Down Expand Up @@ -119,7 +124,17 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
}

renderHeader(
{ title, min, max, locale, rates, currency, autoupdate, autodetect },
{
title,
min,
max,
limits,
locale,
rates,
currency,
autoupdate,
autodetect,
},
{ filter },
setState,
source,
Expand All @@ -131,6 +146,7 @@ class OmnitableColumnAmount extends columnMixin(PolymerElement) {
.rates=${rates}
.min=${min}
.max=${max}
.limits=${limits}
.locale=${locale}
.currency=${currency}
.autoupdate=${autoupdate}
Expand Down
56 changes: 35 additions & 21 deletions cosmoz-omnitable-column-date.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,37 @@ import { html } from 'lit-html';
import { columnMixin } from './cosmoz-omnitable-column-mixin';
import './lib/cosmoz-omnitable-date-range-input';
import { defaultComputeSource } from './lib/utils-data';
import { getString, getComparableValue, toDate, toHashString, toXlsxValue, applySingleFilter, getInputString, fromInputString } from './lib/utils-date';
import {
getString,
getComparableValue,
toDate,
toHashString,
toXlsxValue,
applySingleFilter,
getInputString,
fromInputString,
} from './lib/utils-date';

class OmnitableColumnDate extends columnMixin(PolymerElement) {
static get properties() {
return {
min: { type: Number, value: null, notify: true },
max: { type: Number, value: null, notify: true },
limits: { type: Function },
locale: { type: String, value: null, notify: true },
headerCellClass: { type: String, value: 'date-header-cell' },
width: { type: String, value: '100px' },
minWidth: { type: String, value: '82px' },
flex: { type: String, value: '0' }
flex: { type: String, value: '0' },
};
}

getConfig(column) {
return { limits: column.limits };
}

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 @@ -77,7 +90,7 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {

return {
min: toDate(matches[1]),
max: toDate(matches[2])
max: toDate(matches[2]),
};
}

Expand All @@ -86,34 +99,35 @@ class OmnitableColumnDate extends columnMixin(PolymerElement) {
}

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

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

renderHeader(
{ title,
min,
max,
locale },
{ title, min, max, limits, locale },
{ filter },
setState,
source
source,
) {
return html`<cosmoz-omnitable-date-range-input
.title=${ title }
.filter=${ filter }
.values=${ source }
.min=${ min }
.max=${ max }
.locale=${ locale }
@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}
.limits=${limits}
.locale=${locale}
@filter-changed=${({ detail: { value } }) =>
setState((state) => ({ ...state, filter: value }))}
@header-focused-changed=${({ detail: { value } }) =>
setState((state) => ({ ...state, headerFocused: value }))}
></cosmoz-omnitable-date-range-input>`;
}

Expand Down
65 changes: 42 additions & 23 deletions cosmoz-omnitable-column-datetime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,18 @@ import './ui-helpers/cosmoz-clear-button';
import { columnMixin } from './cosmoz-omnitable-column-mixin';
import { PolymerElement } from '@polymer/polymer/polymer-element';
import { html } from 'lit-html';
import { fromHashString, getString, toHashString, toXlsxValue } from './lib/utils-datetime';
import { applySingleFilter, fromInputString, getComparableValue, toDate } from './lib/utils-date';
import {
fromHashString,
getString,
toHashString,
toXlsxValue,
} from './lib/utils-datetime';
import {
applySingleFilter,
fromInputString,
getComparableValue,
toDate,
} from './lib/utils-date';
import { defaultComputeSource } from './lib/utils-data';
import './lib/cosmoz-omnitable-datetime-range-input';

Expand All @@ -25,18 +35,22 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
return {
min: { type: Number, value: null, notify: true },
max: { type: Number, value: null, notify: true },
limits: { type: Function },
locale: { type: String, value: null, notify: true },
headerCellClass: { type: String, value: 'datetime-header-cell' },
width: { type: String, value: '210px' },
minWidth: { type: String, value: '128px' },
flex: { type: String, value: '0' },
filterStep: { type: Number, value: 1 }
filterStep: { type: Number, value: 1 },
};
}

getConfig(column) {
return { limits: column.limits };
}

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,7 +100,7 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {

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

Expand All @@ -95,31 +109,36 @@ class OmnitableColumnDatetime extends columnMixin(PolymerElement) {
}

renderEditCell(column, { item }, onItemChange) {
const onChange = event => onItemChange(fromInputString(event.target.value));
return html`<cosmoz-input no-label-float type="text" @change=${ onChange } .value=${ getString(column, item) }></cosmoz-input>`;
const onChange = (event) =>
onItemChange(fromInputString(event.target.value));
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
renderHeader(
{ title,
min,
max,
locale,
filterStep },
{ title, min, max, limits, locale, filterStep },
{ filter },
setState,
source
source,
) {
return html`<cosmoz-omnitable-datetime-range-input
.title=${ title }
.filter=${ filter }
.values=${ source }
.min=${ min }
.max=${ max }
.locale=${ locale }
.filterStep=${ filterStep }
@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}
.limits=${limits}
.locale=${locale}
.filterStep=${filterStep}
@filter-changed=${({ detail: { value } }) =>
setState((state) => ({ ...state, filter: value }))}
@header-focused-changed=${({ detail: { value } }) =>
setState((state) => ({ ...state, headerFocused: value }))}
></cosmoz-omnitable-datetime-range-input>`;
}

Expand Down
7 changes: 7 additions & 0 deletions cosmoz-omnitable-column-number.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
return {
min: { type: Number, value: null, notify: true },
max: { type: Number, value: null, notify: true },
limits: { type: Function },
locale: { type: String, value: null, notify: true },
autoupdate: { type: Boolean, value: false, notify: true },
cellClass: { type: String, value: 'number-cell align-right' },
Expand All @@ -40,6 +41,10 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
};
}

getConfig(column) {
return { limits: column.limits };
}

getFilterFn(column, filter) {
const min = getComparableValue({ ...column, valuePath: 'min' }, filter),
max = getComparableValue({ ...column, valuePath: 'max' }, filter);
Expand Down Expand Up @@ -117,6 +122,7 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
title,
min,
max,
limits,
locale,
maximumFractionDigits,
minimumFractionDigits,
Expand All @@ -132,6 +138,7 @@ class OmnitableColumnNumber extends columnMixin(PolymerElement) {
.values=${source}
.min=${min}
.max=${max}
.limits=${limits}
.locale=${locale}
.maximumFractionDigits=${maximumFractionDigits}
.minimumFractionDigsits=${minimumFractionDigits}
Expand Down
Loading

0 comments on commit fd96136

Please sign in to comment.