ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2026-04-06 01:25:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor isOfFirstType to computed/styling updates

Browse Source
This commit is contained in:
mattwr18 2019-12-19 17:13:58 +01:00
parent b79c292ef4
commit 46191e5889
2 changed files with 31 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/components/generic/SearchPost/SearchPost.vue
View File

@ -11,7 +11,7 @@
<b>{{ option.commentsCount }}</b> <b>{{ option.commentsCount }}</b>
<base-icon name="comments" /> <base-icon name="comments" />
</span> </span>
<span style="width: 36px; display: inline-block; text-align: right;"> <span class="post-shouted">
<b>{{ option.shoutedCount }}</b> <b>{{ option.shoutedCount }}</b>
<base-icon name="bullhorn" /> <base-icon name="bullhorn" />
</span> </span>
@ -58,4 +58,9 @@ export default {
vertical-align: sub; vertical-align: sub;
} }
} }
.post-shouted {
width: 36px;
display: inline-block;
text-align: right;
}
</style> </style>

63
webapp/components/generic/SearchableInput/SearchableInput.vue
View File

@ -10,11 +10,8 @@
> >
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<a v-if="isActive" class="search-clear-btn" @click="clear">&nbsp;</a> <ds-button v-if="isActive" icon="close" ghost class="search-clear-btn" @click="clear" />
<ds-select <ds-select
ref="input"
class="input"
name="search"
type="search" type="search"
icon="search" icon="search"
v-model="searchValue" v-model="searchValue"
@ -36,7 +33,7 @@
@blur.capture.native="onBlur" @blur.capture.native="onBlur"
@input.exact="onSelect" @input.exact="onSelect"
> >
<template slot="option" slot-scope="{ option }"> <template #option="{ option }">
<span v-if="isFirstOfType(option)" class="search-heading"> <span v-if="isFirstOfType(option)" class="search-heading">
<search-heading :resource-type="option.__typename" /> <search-heading :resource-type="option.__typename" />
</span> </span>
@ -82,7 +79,7 @@ export default {
value: '', value: '',
unprocessedSearchInput: '', unprocessedSearchInput: '',
searchProcess: null, searchProcess: null,
lastSearchTerm: '', previousSearchTerm: '',
delay: 300, delay: 300,
} }
}, },
@ -91,16 +88,18 @@ export default {
return this.isActive && !this.pending ? this.$t('search.failed') : this.$t('search.hint') return this.isActive && !this.pending ? this.$t('search.failed') : this.$t('search.hint')
}, },
isActive() { isActive() {
return !isEmpty(this.lastSearchTerm) return !isEmpty(this.previousSearchTerm)
},
isFirstOfType() {
return function(option) {
return (
this.options.findIndex(o => o === option) ===
this.options.findIndex(o => o.__typename === option.__typename)
)
}
}, },
}, },
methods: { methods: {
isFirstOfType(option) {
return (
this.options.findIndex(o => o === option) ===
this.options.findIndex(o => o.__typename === option.__typename)
)
},
onFocus(event) { onFocus(event) {
clearTimeout(this.searchProcess) clearTimeout(this.searchProcess)
this.isOpen = true this.isOpen = true
@ -114,7 +113,7 @@ export default {
return return
} }
this.searchProcess = setTimeout(() => { this.searchProcess = setTimeout(() => {
this.lastSearchTerm = this.value this.previousSearchTerm = this.value
this.$emit('query', this.value) this.$emit('query', this.value)
}, this.delay) }, this.delay)
}, },
@ -125,7 +124,7 @@ export default {
this.isOpen = false this.isOpen = false
clearTimeout(this.searchProcess) clearTimeout(this.searchProcess)
if (!this.pending) { if (!this.pending) {
this.lastSearchTerm = this.unprocessedSearchInput this.previousSearchTerm = this.unprocessedSearchInput
this.$emit('query', this.unprocessedSearchInput) this.$emit('query', this.unprocessedSearchInput)
} }
}, },
@ -141,16 +140,13 @@ export default {
clear() { clear() {
this.isOpen = false this.isOpen = false
this.unprocessedSearchInput = '' this.unprocessedSearchInput = ''
this.lastSearchTerm = '' this.previousSearchTerm = ''
this.searchValue = '' this.searchValue = ''
this.$emit('clearSearch') this.$emit('clearSearch')
clearTimeout(this.searchProcess) clearTimeout(this.searchProcess)
}, },
onBlur(event) { onBlur(event) {
this.searchValue = this.lastSearchTerm this.searchValue = this.previousSearchTerm
// this.$nextTick(() => {
// this.searchValue = this.lastSearchTerm
// })
this.isOpen = false this.isOpen = false
clearTimeout(this.searchProcess) clearTimeout(this.searchProcess)
}, },
@ -158,33 +154,24 @@ export default {
this.isOpen = false this.isOpen = false
this.goToResource(item) this.goToResource(item)
this.$nextTick(() => { this.$nextTick(() => {
this.searchValue = this.lastSearchTerm this.searchValue = this.previousSearchTerm
}) })
}, },
isPost(item) {
return item.__typename === 'Post'
},
goToResource(item) { goToResource(item) {
this.$nextTick(() => { this.$nextTick(() => {
switch (item.__typename) { this.$router.push({
case 'Post': name: this.isPost(item) ? 'post-id-slug' : 'profile-id-slug',
this.$router.push({ params: { id: item.id, slug: item.slug },
name: 'post-id-slug', })
params: { id: item.id, slug: item.slug },
})
break
case 'User':
this.$router.push({
name: 'profile-id-slug',
params: { id: item.id, slug: item.slug },
})
break
default:
break
}
}) })
}, },
}, },
} }
</script> </script>
<style lang="scss"> <style lang="scss" `>
.searchable-input { .searchable-input {
display: flex; display: flex;
align-self: center; align-self: center;