Skip to content

Commit

Permalink
[ONL-7786] EcTextFilter (#1684)
Browse files Browse the repository at this point in the history
  • Loading branch information
Anton Lazarev authored Sep 19, 2023
1 parent 2f7c8fa commit 0196883
Show file tree
Hide file tree
Showing 19 changed files with 573 additions and 6 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

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
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
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
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
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
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

1 comment on commit 0196883

@vercel
Copy link

@vercel vercel bot commented on 0196883 Sep 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

chameleon – ./

chameleon-ebury.vercel.app
chameleon-git-master-ebury.vercel.app
chameleon-dead-plane.vercel.app

Please sign in to comment.