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

[ONL-7786] EcTextFilter #1684

Merged
merged 15 commits into from
Sep 19, 2023
+573 −6
Merged

[ONL-7786] EcTextFilter #1684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
7d5df9b
screenshots
Sep 14, 2023
4539a52
remove tw from html
Sep 14, 2023
428a1f5
[ONL-7786] EcTextFilter
Sep 15, 2023
8c9e44b
main functionality
Sep 18, 2023
90e38ad
unit tests
Sep 18, 2023
8cb3a78
screenshotz
Sep 18, 2023
4b740eb
fix TS
Sep 18, 2023
202630a
revert story isolation
Sep 18, 2023
dc65590
remove obsolete
Sep 18, 2023
39728e1
update table-filter spec and story
Sep 18, 2023
11c7804
update table-filter spec, story and screenshots
Sep 18, 2023
3a77417
add update:modelValue
Sep 19, 2023
3eafa18
add text filter to ec-smart-table.story.js
Sep 19, 2023
a0fc2ca
change import
Sep 19, 2023
c7b25fa
2.2.42
Sep 19, 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
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ebury/chameleon-components",
"version": "2.2.41",
"version": "2.2.42",
"main": "src/main.js",
"sideEffects": false,
"author": "Ebury Team (http://labs.ebury.rocks/)",
Expand Down
7 changes: 7 additions & 0 deletions src/components/ec-smart-table/ec-smart-table.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import * as SortDirectionCycle from '../../enums/sort-direction-cycle';
import EcDateRangeFilter from '../ec-date-range-filter';
import EcIcon from '../ec-icon';
import EcSyncMultipleValuesFilter from '../ec-sync-multiple-values-filter';
import EcTextFilter from '../ec-text-filter';
import EcSmartTable from './ec-smart-table.vue';

const defaultFilters = [{
Expand All @@ -35,6 +36,12 @@ const defaultFilters = [{
toLabelText: 'To',
clearText: 'Clear dates',
errorMessage: '',
}, {
name: 'text',
component: EcTextFilter,
inputProps: {
placeholder: 'Type here the text to search by',
},
}];

const columns = [
Expand Down
184 changes: 184 additions & 0 deletions src/components/ec-table-filter/__snapshots__/ec-table-filter.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,6 +486,40 @@ exports[`EcTableFilter should hide the clear filters button if there isn't any p

</ec-stub>
</div>
<div
class="ec-text-filter ec-table-filter__filter-item"
data-test="ec-table-filter__filter-item ec-table-filter__filter-item-3"
>
<div
class="ec-input-field"
data-test="ec-input-field"
>
<!--v-if-->
<input
class="ec-input-field__input ec-input-field__input--has-left-icon"
data-test="ec-input-field__input"
id="ec-input-field-8"
type="text"
/>
<div
class="ec-input-field__icon-wrapper ec-input-field__icon-wrapper--left"
data-test="ec-input-field__left-icon-wrapper"
>
<svg
class="ec-icon ec-input-field__icon"
data-test="ec-input-field__left-icon"
height="20"
width="20"
>
<use
xlink:href="#ec-simple-search"
/>
</svg>
</div>
<!--v-if-->
<!--v-if-->
</div>
</div>

<!--v-if-->
</section>
Expand Down Expand Up @@ -978,6 +1012,40 @@ exports[`EcTableFilter should hide the clear filters button when the user desele

</ec-stub>
</div>
<div
class="ec-text-filter ec-table-filter__filter-item"
data-test="ec-table-filter__filter-item ec-table-filter__filter-item-3"
>
<div
class="ec-input-field"
data-test="ec-input-field"
>
<!--v-if-->
<input
class="ec-input-field__input ec-input-field__input--has-left-icon"
data-test="ec-input-field__input"
id="ec-input-field-8"
type="text"
/>
<div
class="ec-input-field__icon-wrapper ec-input-field__icon-wrapper--left"
data-test="ec-input-field__left-icon-wrapper"
>
<svg
class="ec-icon ec-input-field__icon"
data-test="ec-input-field__left-icon"
height="20"
width="20"
>
<use
xlink:href="#ec-simple-search"
/>
</svg>
</div>
<!--v-if-->
<!--v-if-->
</div>
</div>

<!--v-if-->
</section>
Expand Down Expand Up @@ -1469,6 +1537,40 @@ exports[`EcTableFilter should render correctly if all the required props are pas

</ec-stub>
</div>
<div
class="ec-text-filter ec-table-filter__filter-item"
data-test="ec-table-filter__filter-item ec-table-filter__filter-item-3"
>
<div
class="ec-input-field"
data-test="ec-input-field"
>
<!--v-if-->
<input
class="ec-input-field__input ec-input-field__input--has-left-icon"
data-test="ec-input-field__input"
id="ec-input-field-8"
type="text"
/>
<div
class="ec-input-field__icon-wrapper ec-input-field__icon-wrapper--left"
data-test="ec-input-field__left-icon-wrapper"
>
<svg
class="ec-icon ec-input-field__icon"
data-test="ec-input-field__left-icon"
height="20"
width="20"
>
<use
xlink:href="#ec-simple-search"
/>
</svg>
</div>
<!--v-if-->
<!--v-if-->
</div>
</div>

<!--v-if-->
</section>
Expand Down Expand Up @@ -1961,6 +2063,40 @@ exports[`EcTableFilter should render custom attributes 1`] = `

</ec-stub>
</div>
<div
class="ec-text-filter ec-table-filter__filter-item"
data-test="ec-table-filter__filter-item ec-table-filter__filter-item-3"
>
<div
class="ec-input-field"
data-test="ec-input-field"
>
<!--v-if-->
<input
class="ec-input-field__input ec-input-field__input--has-left-icon"
data-test="ec-input-field__input"
id="ec-input-field-8"
type="text"
/>
<div
class="ec-input-field__icon-wrapper ec-input-field__icon-wrapper--left"
data-test="ec-input-field__left-icon-wrapper"
>
<svg
class="ec-icon ec-input-field__icon"
data-test="ec-input-field__left-icon"
height="20"
width="20"
>
<use
xlink:href="#ec-simple-search"
/>
</svg>
</div>
<!--v-if-->
<!--v-if-->
</div>
</div>

<!--v-if-->
</section>
Expand Down Expand Up @@ -2467,6 +2603,54 @@ exports[`EcTableFilter should render with pre-selected filters if the value prop

</ec-stub>
</div>
<div
class="ec-text-filter ec-table-filter__filter-item"
data-test="ec-table-filter__filter-item ec-table-filter__filter-item-3"
>
<div
class="ec-input-field"
data-test="ec-input-field"
>
<!--v-if-->
<input
class="ec-input-field__input ec-input-field__input--has-icon ec-input-field__input--has-left-icon"
data-test="ec-input-field__input"
id="ec-input-field-8"
type="text"
/>
<div
class="ec-input-field__icon-wrapper ec-input-field__icon-wrapper--left"
data-test="ec-input-field__left-icon-wrapper"
>
<svg
class="ec-icon ec-input-field__icon"
data-test="ec-input-field__left-icon"
height="20"
width="20"
>
<use
xlink:href="#ec-simple-search"
/>
</svg>
</div>
<div
class="ec-input-field__icon-wrapper ec-input-field__icon-wrapper--right"
data-test="ec-input-field__icon-wrapper"
>
<svg
class="ec-icon ec-input-field__icon"
data-test="ec-input-field__icon"
height="20"
width="20"
>
<use
xlink:href="#ec-simple-close"
/>
</svg>
</div>
<!--v-if-->
</div>
</div>

<button
class="ec-table-filter__clear-filters-button"
Expand Down
8 changes: 6 additions & 2 deletions src/components/ec-table-filter/ec-table-filter.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { defineComponent, markRaw } from 'vue';
import { withMockedConsole } from '../../../tests/utils/console';
import EcDateRangeFilter from '../ec-date-range-filter';
import EcSyncMultipleValuesFilter from '../ec-sync-multiple-values-filter';
import EcTextFilter from '../ec-text-filter';
import EcTableFilter from './ec-table-filter.vue';

const filters = [{
Expand All @@ -29,9 +30,12 @@ const filters = [{
fromLabelText: 'From',
toLabelText: 'To',
clearText: 'Clear dates',
}, {
name: 'text',
component: EcTextFilter,
}];

const modelValue = { feeType: [{ text: 'Invoiced', value: 'invoiced' }] };
const modelValue = { feeType: [{ text: 'Invoiced', value: 'invoiced' }], text: 'Some value' };

function mountEcTableFilter(props, mountOpts) {
return mount(EcTableFilter, {
Expand Down Expand Up @@ -106,7 +110,7 @@ describe('EcTableFilter', () => {
{
data() {
return {
value: modelValue,
value: { feeType: modelValue.feeType },
filters,
};
},
Expand Down
7 changes: 6 additions & 1 deletion src/components/ec-table-filter/ec-table-filter.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { ref, watchEffect } from 'vue';
import EcCurrencyFilter from '../ec-currency-filter';
import EcDateRangeFilter from '../ec-date-range-filter';
import EcSyncMultipleValuesFilter from '../ec-sync-multiple-values-filter';
import EcTableFilter from './ec-table-filter.vue';
import EcTextFilter from '../ec-text-filter';
import EcTableFilter from '.';

export default {
title: 'Filters/Table Filter',
Expand Down Expand Up @@ -62,6 +63,7 @@ basic.args = {
supplier: [{ text: 'Supplier 1', value: 'supplier1' }],
dueDate: { from: '2021-11-11' },
price: { comparisonSymbol: comparisonSymbolItems[1], amount: 1234.56, currencies: [currencyItems[0]] },
text: 'Some text',
},
filters: [{
label: 'Payment status',
Expand All @@ -85,5 +87,8 @@ basic.args = {
component: EcCurrencyFilter,
comparisonSymbolItems,
currencyItems,
}, {
name: 'text',
component: EcTextFilter,
}],
};
Loading