Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<form class="navbar-search" :class="{'is-search-open': isSearchOpen}" autocomplete="off" @submit.stop.prevent="onFormSubmit" @keydown.down.prevent="onKeydownDown" @keydown.up.prevent="onKeydownUp" @keydown.enter.prevent="onKeydownEnter">
|
||||
<input type="text"
|
||||
v-model.trim="searchTerm"
|
||||
ref="searchInput"
|
||||
class="title is-small is-regular navbar-searchInput"
|
||||
:class="{ 'navbar-searchInput--filled': isFilled }"
|
||||
:placeholder="placeholder"
|
||||
@focus="onInputFocus"
|
||||
@blur="onInputBlur">
|
||||
<SearchSuggestions :query="searchTerm" :isOpen="isInputFocused && isFilled" @pageChange="resetInput" ref="searchSuggestions"/>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SearchSuggestions from './Suggestions/SearchSuggestions';
|
||||
import getCARTOData from 'new-dashboard/store/utils/getCARTOData';
|
||||
|
||||
const CARTOData = getCARTOData();
|
||||
|
||||
export default {
|
||||
name: 'Search',
|
||||
components: {
|
||||
SearchSuggestions
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
searchTerm: '',
|
||||
isInputFocused: false,
|
||||
baseUrl: CARTOData.user_data.base_url
|
||||
};
|
||||
},
|
||||
props: {
|
||||
isSearchOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
placeholder () {
|
||||
if (this.isInputFocused) {
|
||||
return this.$t('SearchComponent.placeholder.active');
|
||||
}
|
||||
|
||||
return this.$t('SearchComponent.placeholder.default');
|
||||
},
|
||||
isFilled () {
|
||||
return Boolean(this.searchTerm);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInputFocus () {
|
||||
this.isInputFocused = true;
|
||||
},
|
||||
onInputBlur () {
|
||||
this.isInputFocused = false;
|
||||
},
|
||||
onFormSubmit () {
|
||||
this.blurInput();
|
||||
this.goToSearchTermPage();
|
||||
this.searchTerm = '';
|
||||
},
|
||||
goToSearchTermPage () {
|
||||
if (this.$router) {
|
||||
this.$router.push({ name: 'search', params: { query: this.searchTerm } });
|
||||
} else {
|
||||
window.location = `${this.baseUrl}/dashboard/search/${this.searchTerm}`;
|
||||
}
|
||||
},
|
||||
blurInput () {
|
||||
this.$refs.searchInput.blur();
|
||||
},
|
||||
resetInput () {
|
||||
this.searchTerm = '';
|
||||
this.blurInput();
|
||||
},
|
||||
onKeydownDown () {
|
||||
this.$refs.searchSuggestions.keydownDown();
|
||||
},
|
||||
onKeydownUp () {
|
||||
this.$refs.searchSuggestions.keydownUp();
|
||||
},
|
||||
onKeydownEnter () {
|
||||
const activeSuggestion = this.$refs.searchSuggestions.getActiveSuggestionElement();
|
||||
if (activeSuggestion) {
|
||||
activeSuggestion.click();
|
||||
} else {
|
||||
this.onFormSubmit();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.navbar-search {
|
||||
@media (max-width: $layout-mobile) {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 16px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
background-image: url("../../assets/icons/navbar/loupe.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
background-image: url("../../assets/icons/navbar/loupe_primary.svg");
|
||||
}
|
||||
|
||||
.navbar-searchInput {
|
||||
&::placeholder {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&::placeholder {
|
||||
color: $text__color--secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
&::after {
|
||||
background-image: url("../../assets/icons/navbar/loupe.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-searchInput {
|
||||
width: 120px;
|
||||
height: 36px;
|
||||
padding: 0 14px 0 42px;
|
||||
transition: width 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
|
||||
border: 0;
|
||||
border-radius: 18px;
|
||||
background-color: $white;
|
||||
|
||||
&::placeholder {
|
||||
color: $text__color--secondary;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.navbar-searchInput--filled {
|
||||
width: 240px;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.is-search-open {
|
||||
.navbar-search {
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: calc(100% - 66px);
|
||||
margin-left: 16px;
|
||||
opacity: 1;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-searchInput {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border-radius: 3px;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+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