Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Fix Quick buttons

Browse source
This commit is contained in:
Sam Carlton 2022-05-18 13:25:46 -05:00
parent 8ae2204928
commit c0581c633b
1 changed files with 46 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

59
components/search-stork.vue
View file

@ -38,7 +38,7 @@
:class="[ :class="[
'inline-block text-xs rounded-lg py-1 px-2', 'inline-block text-xs rounded-lg py-1 px-2',
'border-2 border-white focus:outline-none', 'border-2 border-white focus:outline-none',
query.includes(button.query) ? 'border-opacity-50 bg-darkest' : 'border-opacity-0 neumorphic-shadow-inner' hasQueryPart( button.query ) ? 'border-opacity-50 bg-darkest' : 'border-opacity-0 neumorphic-shadow-inner'
]" ]"
:aria-label="`Filter list by ${button.label}`" :aria-label="`Filter list by ${button.label}`"
@click="toggleFilter(button.query); queryResults(query)" @click="toggleFilter(button.query); queryResults(query)"
@ -52,7 +52,6 @@
ref="search-container" ref="search-container"
class="search-container relative divide-y divide-gray-700 w-full rounded-lg border border-gray-700 bg-gradient-to-br from-darker to-dark my-8 px-5" class="search-container relative divide-y divide-gray-700 w-full rounded-lg border border-gray-700 bg-gradient-to-br from-darker to-dark my-8 px-5"
> >
<svg style="display: none;"> <svg style="display: none;">
<defs> <defs>
<path <path
@ -121,7 +120,7 @@
</div> </div>
</div> </div>
<!-- result.listing.lastUpdated: {{ result.listing.lastUpdated }} --> <!-- result.listing.lastUpdated: {{ result.listing.lastUpdated }} -->
<client-only v-if="result.listing.lastUpdated"> <template v-if="result.listing.lastUpdated">
<small <small
class="text-xs opacity-50" class="text-xs opacity-50"
> >
@ -136,7 +135,7 @@
> >
⏳ ⏳
</small> </small>
</client-only> </template>
<!-- result.listing.endpoint: {{ result.listing.endpoint }} --> <!-- result.listing.endpoint: {{ result.listing.endpoint }} -->
@ -187,7 +186,7 @@
}" }"
> >
<span>Details</span> <span>Details</span>
<client-only>
<svg <svg
class="h-5 w-5 -mr-2" class="h-5 w-5 -mr-2"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@ -195,7 +194,7 @@
> >
<use href="#chevron-right" /> <use href="#chevron-right" />
</svg> </svg>
</client-only>
</LinkButton> </LinkButton>
</div> </div>
@ -310,6 +309,9 @@ export default {
hasSearchInputText () { hasSearchInputText () {
return this.query.length > 0 return this.query.length > 0
}, },
queryParts () {
return this.query.split(/\s+/).filter(part => part.length > 0)
},
}, },
beforeDestroy() { beforeDestroy() {
this.observer.disconnect() this.observer.disconnect()
@ -408,13 +410,26 @@ export default {
array.splice(index, 1) array.splice(index, 1)
return pluckedItem return pluckedItem
}, },
getFilterKeyAndValue (query) {
const key = query.substring(0, query.indexOf( statusFilterSeparator ))
const value = query.substring(query.indexOf( statusFilterSeparator )+1)
return { key, value }
},
hasQueryPart (part) {
return this.queryParts.includes( part )
},
toggleFilter ( newFilterQuery ) { toggleFilter ( newFilterQuery ) {
// Get the key and value from our filter // Get the key and value from our filter
const [ // const [
newFilterKey, // This will always have a value // newFilterKey, // This will always have a value
newFilterValue = null // newFilterValue = null
] = newFilterQuery.split(':') // ] = newFilterQuery.split( statusFilterSeparator )
const {
key: newFilterKey,
value: newFilterValue = null
} = this.getFilterKeyAndValue( newFilterQuery )
const oldQueryWords = this.query.split(' ') const oldQueryWords = this.query.split(' ')
@ -432,8 +447,10 @@ export default {
// If this filter is already present // If this filter is already present
// then remove it // then remove it
if (this.query.includes(newFilterQuery)) { if ( this.hasQueryPart( newFilterQuery ) ) {
this.query = this.query.replace(newFilterQuery, '').trim() this.query = oldQueryWords.filter( word => word !== newFilterQuery ).join(' ')
//this.query.replace(newFilterQuery, '').trim()
return return
} }
@ -460,11 +477,11 @@ export default {
// However, if the query already has a status // However, if the query already has a status
// then update the existing status // then update the existing status
if (this.query.includes(newFilterKey)) { if ( this.hasQueryPart( newFilterQuery ) ) {
const queryWords = this.query.split(' ') // const queryWords = this.query.split(' ')
this.query = queryWords.map( word => { this.query = this.queryParts.map( word => {
// If this the filter word // If this the filter word
// then update it to the new one // then update it to the new one
if (word.includes(newFilterKey)) return newFilterQuery if (word.includes(newFilterKey)) return newFilterQuery
@ -549,16 +566,18 @@ export default {
if (rawQuery.length === 0) return if (rawQuery.length === 0) return
// Separate status filters from the actual query text // Separate status filters from the actual query text
const [ // const [
statusText, // statusText,
query // query
] = this.filterStatusFromText(rawQuery.toLowerCase()) // ] = this.filterStatusFromText(rawQuery.toLowerCase())
// Declare that at least one query has been made // Declare that at least one query has been made
this.hasStartedAnyQuery = true this.hasStartedAnyQuery = true
const storkQuery = await storkClient.lazyQuery( query ) // console.log('rawQuery', rawQuery)
const storkQuery = await storkClient.lazyQuery( rawQuery )
console.log('storkQuery', storkQuery) console.log('storkQuery', storkQuery)