Initial commit
This commit is contained in:
zhongjin
+190
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<section class="suggestions" :class="{ 'suggestions--open': isOpen }" @mouseleave="resetActiveSuggestion">
|
||||
<ul v-if="searchResults" class="suggestions__content">
|
||||
<li :class="{'suggestions--active': activeSuggestionIndex === 0 }" @mouseover="updateActiveSuggestion(0)">
|
||||
<router-link
|
||||
class="suggestions__header is-caption text"
|
||||
:class="{ 'suggestions__header--loading': isFetching }"
|
||||
:to="{ name: searchRoute, params: searchRouteParameters }"
|
||||
:staticRoute="`/dashboard/search/${query}`"
|
||||
v-if="query"
|
||||
@click.native="onPageChange">
|
||||
{{ query }} <span v-if="!isFetching">- {{ searchResults.total_count }} results</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-for="(result, index) in searchResults.result" :key="result.id" :class="{'suggestions--active': activeSuggestionIndex === index + 1}" @mouseover="updateActiveSuggestion(index + 1)">
|
||||
<SearchSuggestionsItem :item="result" @itemClick="onPageChange"/>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'underscore';
|
||||
import SearchSuggestionsItem from './SearchSuggestionsItem';
|
||||
import CartoNode from 'carto-node';
|
||||
|
||||
export default {
|
||||
name: 'SearchSuggestions',
|
||||
components: {
|
||||
SearchSuggestionsItem
|
||||
},
|
||||
props: {
|
||||
query: String,
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fetchSuggestionsDebounced = _.debounce(this.fetchSuggestions.bind(this), 500);
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isFetching: true,
|
||||
searchResults: {},
|
||||
client: new CartoNode.AuthenticatedClient(),
|
||||
activeSuggestionIndex: -1
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
query (newQuery) {
|
||||
if (newQuery === '') {
|
||||
this.isFetching = false;
|
||||
this.searchResults = {};
|
||||
return;
|
||||
}
|
||||
|
||||
this.isFetching = true;
|
||||
this.fetchSuggestionsDebounced();
|
||||
this.resetActiveSuggestion();
|
||||
}
|
||||
|
||||
},
|
||||
computed: {
|
||||
searchRoute () {
|
||||
return 'search';
|
||||
},
|
||||
searchRouteParameters () {
|
||||
return { query: this.query };
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchSuggestions () {
|
||||
if (!this.query) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.client.previewSearch(this.query,
|
||||
|
||||
(err, _, data) => {
|
||||
this.isFetching = false;
|
||||
|
||||
if (err) {
|
||||
return;
|
||||
}
|
||||
this.searchResults = data;
|
||||
}
|
||||
);
|
||||
},
|
||||
onPageChange () {
|
||||
this.$emit('pageChange');
|
||||
},
|
||||
getActiveSuggestionElement () {
|
||||
return this.$el.querySelector('.suggestions--active .suggestions__item');
|
||||
},
|
||||
keydownDown () {
|
||||
if (this.activeSuggestionIndex < this.searchResults.result.length) {
|
||||
this.activeSuggestionIndex++;
|
||||
}
|
||||
},
|
||||
keydownUp () {
|
||||
if (this.activeSuggestionIndex > 0) {
|
||||
this.activeSuggestionIndex--;
|
||||
}
|
||||
},
|
||||
resetActiveSuggestion () {
|
||||
this.activeSuggestionIndex = -1;
|
||||
},
|
||||
updateActiveSuggestion (index) {
|
||||
this.activeSuggestionIndex = index;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.suggestions {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: calc(100% - 16px);
|
||||
margin-top: 8px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 2px;
|
||||
opacity: 0;
|
||||
background-color: $white;
|
||||
pointer-events: none;
|
||||
|
||||
&.suggestions--open,
|
||||
&:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.suggestions__header {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 16px 16px 16px 38px;
|
||||
overflow: hidden;
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 12px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
background-image: url("../../../assets/icons/navbar/dropdown/loupe-dropdown.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&.suggestions__header--loading {
|
||||
padding-right: 38px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 12px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
background-image: url("../../../assets/icons/common/loading.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.suggestions--active {
|
||||
.suggestions__header {
|
||||
background-color: rgba($primary-color, 0.05);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-link
|
||||
v-if="isTagType"
|
||||
:to="{ name: 'tagSearch', params: { tag: item.name } }"
|
||||
:staticRoute="`/dashboard/search/tag/${item.name}`"
|
||||
class="suggestions__item text is-caption suggestions__item--tag">
|
||||
{{item.name}}
|
||||
</router-link>
|
||||
<a
|
||||
v-else
|
||||
:href="item.url || visualizationURL"
|
||||
class="suggestions__item text is-caption"
|
||||
:class="`suggestions__item--${item.type}`"
|
||||
@click="onItemClicked"
|
||||
target="_blank">
|
||||
{{item.name}}
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as Visualization from 'new-dashboard/core/models/visualization';
|
||||
|
||||
export default {
|
||||
name: 'SearchSuggestionsItem',
|
||||
props: {
|
||||
item: Object
|
||||
},
|
||||
computed: {
|
||||
visualizationURL () {
|
||||
return Visualization.getURL(this.$props.item, this.$cartoModels);
|
||||
},
|
||||
isTagType () {
|
||||
return this.$props.item.type === 'tag';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onItemClicked () {
|
||||
this.$emit('itemClick');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.suggestions__item {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 12px 16px 12px 36px;
|
||||
overflow: hidden;
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $softblue;
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
border-top: 1px solid $border-color--dark;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 14px;
|
||||
width: 12px;
|
||||
height: 100%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.suggestions--active {
|
||||
.suggestions__item {
|
||||
background-color: rgba($primary-color, 0.05);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.suggestions__item--derived {
|
||||
&::after {
|
||||
background-image: url('../../../assets/icons/navbar/search/search-map.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.suggestions__item--table {
|
||||
&::after {
|
||||
background-image: url('../../../assets/icons/navbar/search/search-data.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.suggestions__item--tag {
|
||||
&::after {
|
||||
background-image: url('../../../assets/icons/navbar/search/search-tags.svg');
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user