mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
refactor and use base-button in SearchableInput
This commit is contained in:
Alina Beck
parent
a45d9749c8
commit
fcbe6125f3
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<ds-flex-item class="search-heading">
|
||||
<ds-heading soft size="h5">
|
||||
{{ $t(`search.heading.${resourceType}`) }}
|
||||
</ds-heading>
|
||||
</ds-flex-item>
|
||||
<ds-heading soft size="h5" class="search-heading">
|
||||
{{ $t(`search.heading.${resourceType}`) }}
|
||||
</ds-heading>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
@ -14,13 +12,16 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.search-heading {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-weight: bold;
|
||||
.search-heading.ds-heading {
|
||||
margin: -$space-x-small;
|
||||
padding: $space-x-small;
|
||||
background-color: $color-neutral-100;
|
||||
font-weight: $font-weight-bold;
|
||||
cursor: default;
|
||||
background-color: white;
|
||||
margin: -8px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
// override styleguide styles
|
||||
.search-heading.ds-heading:first-child {
|
||||
margin-top: -8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -32,81 +32,79 @@ describe('SearchableInput.vue', () => {
|
||||
}
|
||||
|
||||
describe('mount', () => {
|
||||
describe('testing custom functions', () => {
|
||||
let select
|
||||
let select, dropdown
|
||||
|
||||
beforeEach(() => {
|
||||
select = wrapper.find('.ds-select')
|
||||
select.trigger('focus')
|
||||
select.element.value = 'abcd'
|
||||
})
|
||||
|
||||
it('opens the dropdown when focused', () => {
|
||||
expect(wrapper.find('.ds-select-dropdown').isVisible()).toBe(true)
|
||||
})
|
||||
|
||||
it('closes the dropdown when blurred', () => {
|
||||
select.trigger('blur')
|
||||
expect(wrapper.find('.ds-select-is-open').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('closes the dropdown when cleared with esc key', () => {
|
||||
select.trigger('input')
|
||||
select.trigger('keyup.esc')
|
||||
expect(wrapper.find('.ds-select-is-open').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('changes the unprocessedSearchInput as the value changes', () => {
|
||||
select.trigger('input')
|
||||
expect(select.element.value).toBe('abcd')
|
||||
})
|
||||
|
||||
it('searches for the term when enter is pressed', async () => {
|
||||
select.element.value = 'ab'
|
||||
select.trigger('input')
|
||||
select.trigger('keyup.enter')
|
||||
await expect(wrapper.emitted().query[0]).toEqual(['ab'])
|
||||
})
|
||||
|
||||
it('calls onDelete when the delete key is pressed', () => {
|
||||
const spy = jest.spyOn(wrapper.vm, 'onDelete')
|
||||
select.trigger('input')
|
||||
select.trigger('keyup.delete')
|
||||
expect(spy).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
describe('navigating to resource', () => {
|
||||
beforeEach(() => {
|
||||
propsData = { options: searchResults }
|
||||
wrapper = Wrapper()
|
||||
select = wrapper.find('.ds-select')
|
||||
select.trigger('focus')
|
||||
select.element.value = 'abcd'
|
||||
})
|
||||
|
||||
it('opens the select dropdown when focused on', () => {
|
||||
expect(wrapper.find('.is-open').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('opens the select dropdown and blurs after focused on', () => {
|
||||
select.trigger('blur')
|
||||
expect(wrapper.find('.is-open').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('is clearable', () => {
|
||||
it('pushes to post page', async () => {
|
||||
select.element.value = 'Post'
|
||||
select.trigger('input')
|
||||
select.trigger('keyup.esc')
|
||||
expect(wrapper.find('.is-open').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('changes the unprocessedSearchInput as the value changes', () => {
|
||||
select.trigger('input')
|
||||
expect(select.element.value).toBe('abcd')
|
||||
})
|
||||
|
||||
it('searches for the term when enter is pressed', async () => {
|
||||
select.element.value = 'ab'
|
||||
select.trigger('input')
|
||||
select.trigger('keyup.enter')
|
||||
await expect(wrapper.emitted().query[0]).toEqual(['ab'])
|
||||
})
|
||||
|
||||
it('calls onDelete when the delete key is pressed', () => {
|
||||
const spy = jest.spyOn(wrapper.vm, 'onDelete')
|
||||
select.trigger('input')
|
||||
select.trigger('keyup.delete')
|
||||
expect(spy).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
describe('navigating to resource', () => {
|
||||
beforeEach(() => {
|
||||
propsData = { options: searchResults }
|
||||
wrapper = Wrapper()
|
||||
select = wrapper.find('.ds-select')
|
||||
select.trigger('focus')
|
||||
})
|
||||
|
||||
it('pushes to post page', async () => {
|
||||
select.element.value = 'Post'
|
||||
select.trigger('input')
|
||||
const post = wrapper.find('.search-post')
|
||||
post.trigger('click')
|
||||
await Vue.nextTick().then(() => {
|
||||
expect(mocks.$router.push).toHaveBeenCalledWith({
|
||||
name: 'post-id-slug',
|
||||
params: { id: 'post-by-jenny', slug: 'user-post-by-jenny' },
|
||||
})
|
||||
const post = wrapper.find('.search-post')
|
||||
post.trigger('click')
|
||||
await Vue.nextTick().then(() => {
|
||||
expect(mocks.$router.push).toHaveBeenCalledWith({
|
||||
name: 'post-id-slug',
|
||||
params: { id: 'post-by-jenny', slug: 'user-post-by-jenny' },
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it("pushes to user's profile", async () => {
|
||||
select.element.value = 'Bob'
|
||||
select.trigger('input')
|
||||
const users = wrapper.findAll('.userinfo')
|
||||
const bob = users.filter(item => item.text() === '@bob-der-baumeister')
|
||||
bob.trigger('click')
|
||||
await Vue.nextTick().then(() => {
|
||||
expect(mocks.$router.push).toHaveBeenCalledWith({
|
||||
name: 'profile-id-slug',
|
||||
params: { id: 'u2', slug: 'bob-der-baumeister' },
|
||||
})
|
||||
it("pushes to user's profile", async () => {
|
||||
select.element.value = 'Bob'
|
||||
select.trigger('input')
|
||||
const users = wrapper.findAll('.userinfo')
|
||||
const bob = users.filter(item => item.text() === '@bob-der-baumeister')
|
||||
bob.trigger('click')
|
||||
await Vue.nextTick().then(() => {
|
||||
expect(mocks.$router.push).toHaveBeenCalledWith({
|
||||
name: 'profile-id-slug',
|
||||
params: { id: 'u2', slug: 'bob-der-baumeister' },
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -3,58 +3,48 @@
|
||||
class="searchable-input"
|
||||
aria-label="search"
|
||||
role="search"
|
||||
:class="{
|
||||
'is-active': isActive,
|
||||
'is-open': isOpen,
|
||||
}"
|
||||
>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<ds-button v-if="isActive" icon="close" ghost class="search-clear-btn" @click="clear" />
|
||||
<ds-select
|
||||
type="search"
|
||||
icon="search"
|
||||
v-model="searchValue"
|
||||
:id="id"
|
||||
label-prop="id"
|
||||
:icon-right="isActive ? 'close' : null"
|
||||
:options="options"
|
||||
:loading="loading"
|
||||
:filter="item => item"
|
||||
:no-options-available="emptyText"
|
||||
:auto-reset-search="!searchValue"
|
||||
:placeholder="$t('search.placeholder')"
|
||||
@click.capture.native="isOpen = true"
|
||||
@focus.capture.native="onFocus"
|
||||
@input.native="handleInput"
|
||||
@keyup.enter.native="onEnter"
|
||||
@keyup.delete.native="onDelete"
|
||||
@keyup.esc.native="clear"
|
||||
@blur.capture.native="onBlur"
|
||||
@input.exact="onSelect"
|
||||
<ds-select
|
||||
type="search"
|
||||
icon="search"
|
||||
v-model="searchValue"
|
||||
:id="id"
|
||||
label-prop="id"
|
||||
:icon-right="null"
|
||||
:options="options"
|
||||
:loading="loading"
|
||||
:filter="item => item"
|
||||
:no-options-available="emptyText"
|
||||
:auto-reset-search="!searchValue"
|
||||
:placeholder="$t('search.placeholder')"
|
||||
@focus.capture.native="onFocus"
|
||||
@input.native="handleInput"
|
||||
@keyup.enter.native="onEnter"
|
||||
@keyup.delete.native="onDelete"
|
||||
@keyup.esc.native="clear"
|
||||
@blur.capture.native="onBlur"
|
||||
@input.exact="onSelect"
|
||||
>
|
||||
<template #option="{ option }">
|
||||
<search-heading v-if="isFirstOfType(option)" :resource-type="option.__typename" />
|
||||
<p
|
||||
v-if="option.__typename === 'User'"
|
||||
:class="{ 'option-with-heading': isFirstOfType(option) }"
|
||||
>
|
||||
<template #option="{ option }">
|
||||
<span v-if="isFirstOfType(option)" class="search-heading">
|
||||
<search-heading :resource-type="option.__typename" />
|
||||
</span>
|
||||
<span
|
||||
v-if="option.__typename === 'User'"
|
||||
:class="{ 'option-with-heading': isFirstOfType(option), 'flex-span': true }"
|
||||
>
|
||||
<hc-user :user="option" :showPopover="false" />
|
||||
</span>
|
||||
<span
|
||||
v-if="option.__typename === 'Post'"
|
||||
:class="{ 'option-with-heading': isFirstOfType(option), 'flex-span': true }"
|
||||
>
|
||||
<search-post :option="option" />
|
||||
</span>
|
||||
</template>
|
||||
</ds-select>
|
||||
</div>
|
||||
</div>
|
||||
<hc-user :user="option" :showPopover="false" />
|
||||
</p>
|
||||
<p
|
||||
v-if="option.__typename === 'Post'"
|
||||
:class="{ 'option-with-heading': isFirstOfType(option) }"
|
||||
>
|
||||
<search-post :option="option" />
|
||||
</p>
|
||||
</template>
|
||||
</ds-select>
|
||||
<base-button v-if="isActive" icon="close" circle ghost size="small" @click="clear" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isEmpty } from 'lodash'
|
||||
import SearchHeading from '~/components/generic/SearchHeading/SearchHeading.vue'
|
||||
@ -75,7 +65,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOpen: false,
|
||||
searchValue: '',
|
||||
value: '',
|
||||
unprocessedSearchInput: '',
|
||||
@ -101,12 +90,10 @@ export default {
|
||||
},
|
||||
onFocus(event) {
|
||||
clearTimeout(this.searchProcess)
|
||||
this.isOpen = true
|
||||
},
|
||||
handleInput(event) {
|
||||
clearTimeout(this.searchProcess)
|
||||
this.value = event.target ? event.target.value.replace(/\s+/g, ' ').trim() : ''
|
||||
this.isOpen = true
|
||||
this.unprocessedSearchInput = this.value
|
||||
if (isEmpty(this.value) || this.value.replace(/\s+/g, '').length < 3) {
|
||||
return
|
||||
@ -120,7 +107,6 @@ export default {
|
||||
* TODO: on enter we should go to a dedicated search page!?
|
||||
*/
|
||||
onEnter(event) {
|
||||
this.isOpen = false
|
||||
clearTimeout(this.searchProcess)
|
||||
if (!this.pending) {
|
||||
this.previousSearchTerm = this.unprocessedSearchInput
|
||||
@ -137,7 +123,6 @@ export default {
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.isOpen = false
|
||||
this.unprocessedSearchInput = ''
|
||||
this.previousSearchTerm = ''
|
||||
this.searchValue = ''
|
||||
@ -146,11 +131,9 @@ export default {
|
||||
},
|
||||
onBlur(event) {
|
||||
this.searchValue = this.previousSearchTerm
|
||||
this.isOpen = false
|
||||
clearTimeout(this.searchProcess)
|
||||
},
|
||||
onSelect(item) {
|
||||
this.isOpen = false
|
||||
this.goToResource(item)
|
||||
this.$nextTick(() => {
|
||||
this.searchValue = this.previousSearchTerm
|
||||
@ -170,58 +153,32 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.searchable-input {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
$padding-left: $space-x-small;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.ds-form-item {
|
||||
flex-basis: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ds-select-dropdown {
|
||||
max-height: 70vh;
|
||||
box-shadow: $box-shadow-x-large;
|
||||
}
|
||||
|
||||
.option-with-heading {
|
||||
margin-top: $space-x-small;
|
||||
padding-top: $space-xx-small;
|
||||
}
|
||||
.flex-span {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.ds-select-dropdown {
|
||||
transition: box-shadow 100ms;
|
||||
max-height: 70vh;
|
||||
}
|
||||
&.is-open {
|
||||
.ds-select-dropdown {
|
||||
box-shadow: $box-shadow-x-large;
|
||||
}
|
||||
}
|
||||
.ds-select-dropdown-message {
|
||||
opacity: 0.5;
|
||||
padding-left: $padding-left;
|
||||
}
|
||||
.search-clear-btn {
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
|
||||
.base-button {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 36px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ds-select {
|
||||
z-index: $z-index-dropdown + 1;
|
||||
}
|
||||
.ds-select-option-hover {
|
||||
.ds-text-size-small,
|
||||
.ds-text-size-small-x {
|
||||
color: $text-color-soft;
|
||||
}
|
||||
}
|
||||
.field {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.control {
|
||||
width: 100%;
|
||||
right: $space-xx-small;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user