Added support for regexp

This commit is contained in:
Aleksandr Statciuk 2022-01-27 22:48:40 +03:00
parent aa41be0510
commit 2734ec7870
2 changed files with 12 additions and 5 deletions

View file

@ -28,7 +28,7 @@ const CountryItem = {
components: {
ChannelItem
},
props: ['item', 'query'],
props: ['item', 'normQuery', 'regQuery'],
data() {
return {
count: 0
@ -36,11 +36,16 @@ const CountryItem = {
},
computed: {
countryChannels() {
if (!this.query) return this.item.channels
if (!this.normQuery) return this.item.channels
return (
this.item.channels.filter(c => {
return c.key.includes(this.query)
const normResult = c.key.includes(this.normQuery)
const regResult = this.regQuery
? this.regQuery.test(c.name) || this.regQuery.test(c.id)
: false
return normResult || regResult
}) || []
)
}
@ -86,7 +91,7 @@ const CountryItem = {
</span>
</button>
</div>
<div class="card-content" v-show="item.expanded || (count > 0 && query.length)">
<div class="card-content" v-show="item.expanded || (count > 0 && normQuery.length)">
<div class="table-container">
<table class="table" style="min-width: 100%">
<thead>
@ -116,12 +121,14 @@ const App = {
isLoading: true,
query: '',
normQuery: '',
regQuery: null,
items: []
}
},
methods: {
search() {
this.normQuery = this.query.replace(/\s/g, '').toLowerCase()
this.regQuery = new RegExp(this.query)
}
},
async mounted() {

View file

@ -62,7 +62,7 @@
<div class="level-item">Loading...</div>
</div>
<country-item v-for="item in items" :item="item" :query="normQuery"></country-item>
<country-item v-for="item in items" :item="item" :norm-query="normQuery" :reg-query="regQuery"></country-item>
</div>
</div>
</div>