KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Refactored search and autocomplete

Browse Source 
Now with more icons, much simpler dropdown and a smooth open animation.
Filter is moved to the searchPage instead of baking in the search
dropdown.
This commit is contained in:
Kevin
2022-01-13 00:23:11 +01:00
parent d3a3160cf8
commit 0b6398cc4c
8 changed files with 477 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/components/AutocompleteDropdown.vue Normal file
View File

@@ -0,0 +1,231 @@
<template>
<transition name="shut">
<ul class="dropdown">
<li
v-for="result in searchResults"
@click="openPopup(result)"
:class="`result di-${result.index} ${
result.index === index ? 'active' : ''
}`"
>
<IconMovie v-if="result.type == 'movie'" class="type-icon" />
<IconShow v-if="result.type == 'show'" class="type-icon" />
<span>{{ result.title }}</span>
</li>
</ul>
</transition>
</template>
<script>
import { mapActions } from "vuex";
import IconMovie from "src/icons/IconMovie";
import IconShow from "src/icons/IconShow";
import IconPerson from "src/icons/IconPerson";
import { elasticSearchMoviesAndShows } from "@/api";
export default {
components: { IconMovie, IconShow, IconPerson },
props: {
query: {
type: String,
default: null,
required: false
},
index: {
type: Number,
default: -1,
required: false
},
results: {
type: Array,
default: [],
required: false
}
},
watch: {
query(newQuery) {
if (newQuery && newQuery.length > 1) this.fetchAutocompleteResults();
}
},
data() {
return {
searchResults: [],
keyboardNavigationIndex: 0
};
},
methods: {
...mapActions("popup", ["open"]),
openPopup(result) {
const { id, type } = result;
this.open({ id, type });
},
fetchAutocompleteResults() {
this.keyboardNavigationIndex = 0;
elasticSearchMoviesAndShows(this.query).then(resp => {
const data = resp.hits.hits;
let results = data.map(item => {
let index = null;
if (item._source.log.file.path.includes("movie")) index = "movie";
if (item._source.log.file.path.includes("series")) index = "show";
if (index === "movie" || index === "show") {
return {
title: item._source.original_name || item._source.original_title,
id: item._source.id,
adult: item._source.adult,
type: index
};
}
});
results = this.removeDuplicates(results);
results = results.map((el, index) => {
return { ...el, index };
});
this.$emit("update:results", results);
this.searchResults = results.slice(0, 10);
});
},
removeDuplicates(searchResults) {
let filteredResults = [];
searchResults.map(result => {
if (result === undefined) return;
const numberOfDuplicates = filteredResults.filter(
filterItem => filterItem.id == result.id
);
if (numberOfDuplicates.length >= 1) {
return null;
}
filteredResults.push(result);
});
if (this.adult == false) {
filteredResults = filteredResults.filter(
result => result.adult == false
);
}
return filteredResults;
}
},
created() {
this.fetchAutocompleteResults();
}
};
</script>
<style lang="scss" scoped>
@import "./src/scss/variables";
@import "./src/scss/media-queries";
@import "./src/scss/main";
$sizes: 22;
@for $i from 0 through $sizes {
.dropdown .di-#{$i} {
visibility: visible;
transform-origin: top center;
animation: scaleZ 200ms calc(50ms * #{$i}) ease-in forwards;
}
}
@keyframes scaleZ {
0% {
opacity: 0;
transform: scale(0);
}
80% {
transform: scale(1.07);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.dropdown {
top: var(--header-size);
position: relative;
height: 100%;
width: 100%;
max-width: 720px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
z-index: 5;
margin-top: -1px;
border-top: none;
padding: 0;
@include mobile {
position: fixed;
left: 0;
max-width: 100vw;
}
@include tablet-min {
top: unset;
--gutter: 1.5rem;
max-width: calc(100% - (2 * var(--gutter)));
margin: -1px var(--gutter) 0 var(--gutter);
}
@include desktop {
max-width: 720px;
}
}
li.result {
opacity: 0;
height: 56px;
width: 100%;
visibility: hidden;
display: flex;
align-items: center;
background-color: var(--background-95);
color: var(--text-color-50);
padding: 0.5rem 2rem;
font-size: 1.4rem;
text-transform: capitalize;
list-style: none;
cursor: pointer;
white-space: nowrap;
transition: color 0.1s ease, stroke 0.4s ease;
span {
overflow-x: hidden;
text-overflow: ellipsis;
transition: inherit;
}
&.active,
&:hover,
&:active {
color: var(--text-color);
// background-color: var(--background-color-secondary);
border-bottom: 2px solid var(--color-green);
.type-icon {
stroke: var(--text-color);
}
}
.type-icon {
margin-right: 1rem;
transition: inherit;
stroke: var(--text-color-50);
}
}
.shut-leave-to {
height: 0px;
transition: height 0.4s ease;
flex-wrap: no-wrap;
overflow: hidden;
}
</style>

332
src/components/SearchInput.vue
View File

@@ -1,6 +1,15 @@
<template>
<div>
<div class="search">
<div class="search" :class="{ active: focusingInput }">
<svg
class="search-icon"
tabindex="-1"
fill="currentColor"
@click="handleSubmit"
>
<use xlink:href="#iconSearch"></use>
</svg>
<input
ref="input"
type="text"
@@ -8,7 +17,7 @@
aria-label="Search input for finding a movie or show"
autocorrect="off"
autocapitalize="off"
tabindex="1"
tabindex="0"
v-model="query"
@input="handleInput"
@click="focus = true"
@@ -16,126 +25,86 @@
@keyup.enter="handleSubmit"
@keydown.up="navigateUp"
@keydown.down="navigateDown"
@focus="focusingInput = true"
@blur="focusingInput = false"
/>
<svg class="search-icon" fill="currentColor" @click="handleSubmit">
<use xlink:href="#iconSearch"></use>
</svg>
<IconClose
tabindex="0"
aria-label="button"
v-if="query && query.length"
@click="resetQuery"
@keydown.enter.stop="resetQuery"
class="close-icon"
/>
</div>
<transition name="fade">
<div class="dropdown" v-if="!disabled && focus && query.length > 0">
<div class="filter">
<h2>Filter your search:</h2>
<div class="filter-items">
<toggle-button
:options="searchTypes"
:selected.sync="selectedSearchType"
/>
<label
>Adult
<input type="checkbox" value="adult" v-model="adult" />
</label>
</div>
</div>
<hr />
<div class="dropdown-results" v-if="elasticSearchResults.length">
<ul
v-for="(item, index) in elasticSearchResults"
@click="openResult(item, index + 1)"
:class="{ active: index + 1 === selectedResult }"
>
{{
item.name
}}
</ul>
</div>
<div v-else class="dropdown">
<div class="dropdown-results">
<h2 class="not-found">
No results for query: <b>{{ query }}</b>
</h2>
</div>
</div>
<seasoned-button
class="end-section"
fullWidth="true"
@click="focus = false"
:active="elasticSearchResults.length + 1 === selectedResult"
>
close
</seasoned-button>
</div>
</transition>
<AutocompleteDropdown
v-if="showAutocompleteResults"
:query="query"
:index="dropdownIndex"
:results.sync="dropdownResults"
/>
</div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import SeasonedButton from "@/components/ui/SeasonedButton";
import ToggleButton from "@/components/ui/ToggleButton";
import AutocompleteDropdown from "@/components/AutocompleteDropdown";
import { elasticSearchMoviesAndShows } from "@/api";
import IconClose from "src/icons/IconClose";
import config from "@/config.json";
export default {
name: "SearchInput",
components: {
SeasonedButton,
ToggleButton
AutocompleteDropdown,
IconClose
},
props: ["value"],
data() {
return {
adult: true,
searchTypes: ["all", "movie", "show", "person"],
selectedSearchType: "all",
query: this.value,
focus: false,
query: null,
disabled: false,
scrollListener: undefined,
scrollDistance: 0,
elasticSearchResults: [],
selectedResult: 0
dropdownIndex: -1,
dropdownResults: [],
focusingInput: false,
showAutocomplete: false
};
},
watch: {
focus: function (val) {
if (val === true) {
window.addEventListener("scroll", this.disableFocus);
} else {
window.removeEventListener("scroll", this.disableFocus);
this.scrollDistance = 0;
}
},
adult: function (value) {
this.handleInput();
computed: {
...mapGetters("popup", ["isOpen"]),
showAutocompleteResults() {
return (
!this.disabled &&
this.focusingInput &&
this.query &&
this.query.length > 0
);
}
},
beforeMount() {
created() {
const params = new URLSearchParams(window.location.search);
if (params && params.has("query")) {
this.query = decodeURIComponent(params.get("query"));
}
const elasticUrl = config.ELASTIC_URL;
if (elasticUrl === undefined || elasticUrl === false || elasticUrl === "") {
this.disabled = true;
}
},
beforeDestroy() {
console.log("scroll eventlistener not removed, destroying!");
window.removeEventListener("scroll", this.disableFocus);
},
methods: {
...mapActions("popup", ["open"]),
navigateDown() {
this.focus = true;
this.selectedResult++;
if (this.dropdownIndex < this.dropdownResults.length - 1) {
this.dropdownIndex++;
}
},
navigateUp() {
this.focus = true;
this.selectedResult--;
if (this.dropdownIndex > -1) this.dropdownIndex--;
const input = this.$refs.input;
const textLength = input.value.length;
@@ -144,93 +113,48 @@ export default {
input.setSelectionRange(textLength, textLength + 1);
}, 1);
},
openResult(item, index) {
this.selectedResult = index;
this.$popup.open(item.id, item.type);
search() {
const encodedQuery = encodeURI(this.query.replace('/ /g, "+"'));
this.$router.push({
name: "search",
query: {
...this.$route.query,
query: encodedQuery
}
});
},
resetQuery(event) {
this.query = "";
this.$refs.input.focus();
},
handleInput(e) {
this.selectedResult = 0;
this.$emit("input", this.query);
if (!this.focus) {
this.focus = true;
}
elasticSearchMoviesAndShows(this.query).then(resp => {
const data = resp.hits.hits;
let results = data.map(item => {
const index = item._index.slice(0, -1);
if (index === "movie" || item._source.original_title) {
return {
name: item._source.original_title,
id: item._source.id,
adult: item._source.adult,
type: "movie"
};
} else if (index === "show" || item._source.original_name) {
return {
name: item._source.original_name,
id: item._source.id,
adult: item._source.adult,
type: "show"
};
}
});
results = this.removeDuplicates(results);
this.elasticSearchResults = results;
});
},
removeDuplicates(searchResults) {
let filteredResults = [];
searchResults.map(result => {
const numberOfDuplicates = filteredResults.filter(
filterItem => filterItem.id == result.id
);
if (numberOfDuplicates.length >= 1) {
return null;
}
filteredResults.push(result);
});
if (this.adult == false) {
filteredResults = filteredResults.filter(
result => result.adult == false
);
}
return filteredResults;
this.dropdownIndex = -1;
},
handleSubmit() {
let searchResults = this.elasticSearchResults;
if (!this.query || this.query.length == 0) return;
if (this.selectedResult > searchResults.length) {
this.focus = false;
this.selectedResult = 0;
} else if (this.selectedResult > 0) {
const resultItem = searchResults[this.selectedResult - 1];
this.$popup.open(resultItem.id, resultItem.type);
} else {
const encodedQuery = encodeURI(this.query.replace('/ /g, "+"'));
const media_type =
this.selectedSearchType !== "all" ? this.selectedSearchType : null;
this.$router.push({
name: "search",
query: { query: encodedQuery, adult: this.adult, media_type }
if (this.dropdownIndex >= 0) {
const resultItem = this.dropdownResults[this.dropdownIndex];
console.log("resultItem:", resultItem);
this.open({
id: resultItem.id,
type: resultItem.type
});
this.focus = false;
this.selectedResult = 0;
return;
}
this.search();
this.$refs.input.blur();
this.dropdownIndex = -1;
},
handleEscape() {
if (this.$popup.isOpen) {
console.log("THIS WAS FUCKOING OPEN!");
} else {
this.focus = false;
if (!this.isOpen) {
this.$refs.input.blur();
this.dropdownIndex = -1;
}
},
disableFocus(_) {
this.focus = false;
}
}
};
@@ -241,6 +165,17 @@ export default {
@import "./src/scss/media-queries";
@import "./src/scss/main";
.close-icon {
position: absolute;
top: calc(50% - 12px);
right: 0;
cursor: pointer;
@include tablet-min {
right: 6px;
}
}
.fade-enter-active {
transition: opacity 0.2s;
}
@@ -252,7 +187,6 @@ export default {
}
.filter {
// background-color: rgba(004, 122, 125, 0.2);
width: 100%;
display: flex;
flex-direction: column;
@@ -285,60 +219,13 @@ hr {
width: 90%;
}
.dropdown {
width: 100%;
position: relative;
display: flex;
flex-wrap: wrap;
z-index: 5;
min-height: $header-size;
right: 0px;
background-color: $background-color-secondary;
@include mobile-only {
position: fixed;
top: 50px;
padding-top: 20px;
width: calc(100%);
.search.active {
input {
border-color: var(--color-green);
}
.not-found {
font-weight: 400;
}
&-results {
padding-left: 60px;
width: 100%;
@include mobile-only {
padding-left: 45px;
}
> ul {
font-size: 1.3rem;
padding: 0;
margin: 0.2rem 0;
width: calc(100% - 25px);
max-width: fit-content;
list-style: none;
color: rgba(0, 0, 0, 0.5);
text-transform: capitalize;
cursor: pointer;
border-bottom: 2px solid transparent;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: $text-color-50;
&.active,
&:hover,
&:active {
color: $text-color;
border-bottom: 2px solid $text-color;
}
}
.search-icon {
fill: var(--color-green);
}
}
@@ -365,7 +252,7 @@ hr {
input {
display: block;
width: 100%;
padding: 13px 0 13px 45px;
padding: 13px 28px 13px 45px;
outline: none;
margin: 0;
border: 0;
@@ -373,10 +260,15 @@ hr {
font-weight: 300;
font-size: 18px;
color: $text-color;
// border-bottom: 1px solid transparent;
&:focus {
border-color: var(--text-color);
}
@include tablet-min {
font-size: 24px;
padding: 13px 30px 13px 60px;
padding: 13px 40px 13px 60px;
}
}

61
src/components/SearchPage.vue
View File

@@ -1,16 +1,30 @@
<template>
<div>
<button @click="updateQueryParams">Shows</button>
<div style="display: flex; flex-direction: row">
<label class="filter">
<span>Search filter:</span>
<toggle-button
:options="['All', 'movie', 'show']"
:selected="mediaType"
@change="toggleChanged"
/>
</label>
</div>
<ResultsSection :title="title" :apiFunction="searchTmdb" />
</div>
</template>
<script>
import ResultsSection from "./ResultsSection";
import { searchTmdb } from "@/api";
import ResultsSection from "./ResultsSection";
import ListHeader from "@/components/ListHeader";
import ToggleButton from "@/components/ui/ToggleButton";
export default {
components: { ResultsSection },
components: { ResultsSection, ListHeader, ToggleButton },
data() {
return {
query: "",
@@ -19,16 +33,6 @@ export default {
mediaType: null
};
},
watch: {
$route(to, from) {
console.log("query", to, from);
const { query, page, adult, media_type } = this.$route.query;
if (query != this.query) console.log("query updated");
if (page != this.page) console.log("page updated");
if (adult != this.adult) console.log("adult updated");
if (media_type != this.media_type) console.log("media_type updated");
}
},
computed: {
title() {
return `Search results: ${this.query}`;
@@ -36,18 +40,25 @@ export default {
},
methods: {
searchTmdb(page = this.page) {
return searchTmdb(this.query, page, this.adult, this.mediaType);
if (this.query && this.query.length)
return searchTmdb(this.query, page, this.adult, this.mediaType);
},
toggleChanged(value) {
if (["movie", "show"].includes(value.toLowerCase())) {
this.mediaType = value.toLowerCase();
} else {
this.mediaType = null;
}
this.updateQueryParams();
},
updateQueryParams() {
console.log("updating");
const { query, page, adult, media_type } = this.$route.query;
this.media_type = media_type == "show" ? "movie" : "show";
this.$router.push({
path: "search",
query: {
...this.$route.query,
media_type: this.media_type
media_type: this.mediaType
}
});
}
@@ -69,4 +80,18 @@ export default {
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.filter {
margin-top: 0.5rem;
margin-left: 1.25rem;
display: inline-flex;
flex-direction: column;
span {
font-size: 1.1rem;
line-height: 1;
margin: 0.5rem 0;
font-weight: 300;
}
}
</style>

51
src/components/ui/ToggleButton.vue
View File

@@ -1,14 +1,18 @@
<template>
<div class="toggle-container">
<button v-for="option in options" class="toggle-button" @click="toggle(option)"
<button
v-for="option in options"
class="toggle-button"
@click="toggle(option)"
:class="toggleValue === option ? 'selected' : null"
>{{ option }}</button>
>
{{ option }}
</button>
</div>
</template>
<script>
export default {
export default {
props: {
options: {
Array,
@@ -23,22 +27,20 @@ export default {
data() {
return {
toggleValue: this.selected || this.options[0]
}
},
beforeMount() {
this.toggle(this.toggleValue)
};
},
methods: {
toggle(toggleValue) {
this.toggleValue = toggleValue;
if (this.selected !== undefined) {
this.$emit('update:selected', toggleValue)
this.$emit("update:selected", toggleValue);
this.$emit("change", toggleValue);
} else {
this.$emit('change', toggleValue)
this.$emit("change", toggleValue);
}
}
},
}
}
};
</script>
<style lang="scss" scoped>
@@ -54,7 +56,6 @@ $background-selected: $background-color-secondary;
flex-direction: row;
justify-content: center;
align-items: center;
// padding: 0.2rem;
background-color: $background;
border: 2px solid $background;
border-radius: 8px;
@@ -65,36 +66,18 @@ $background-selected: $background-color-secondary;
font-size: 1rem;
line-height: 1rem;
font-weight: normal;
width: 100%;
padding: 0.5rem 0;
padding: 0.5rem;
border: 0;
color: $text-color;
// background-color: $text-color-5;
background-color: $background;
text-transform: capitalize;
cursor: pointer;
&.selected {
color: $text-color;
// background-color: $background-color-secondary;
background-color: $background-selected;
border-radius: 8px;
}
// &:first-of-type, &:last-of-type {
// border-left: 4px solid $background;
// border-right: 4px solid $background;
// }
// &:first-of-type {
// border-top-left-radius: 4px;
// border-bottom-left-radius: 4px;
// }
// &:last-of-type {
// border-top-right-radius: 4px;
// border-bottom-right-radius: 4px;
// }
}
}
</style>
</style>

19
src/icons/IconClose.vue Normal file
View File

@@ -0,0 +1,19 @@
<template>
<svg
@click="$emit('click')"
@keydown="event => $emit('keydown', event)"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-x"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</template>

22
src/icons/IconMovie.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect>
<line x1="7" y1="2" x2="7" y2="22"></line>
<line x1="17" y1="2" x2="17" y2="22"></line>
<line x1="2" y1="12" x2="22" y2="12"></line>
<line x1="2" y1="7" x2="7" y2="7"></line>
<line x1="2" y1="17" x2="7" y2="17"></line>
<line x1="17" y1="17" x2="22" y2="17"></line>
<line x1="17" y1="7" x2="22" y2="7"></line>
</svg>
</template>

16
src/icons/IconPerson.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</template>

17
src/icons/IconShow.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
style="margin-top: -2px"
>
<rect x="2" y="7" width="20" height="15" rx="2" ry="2"></rect>
<polyline points="17 2 12 7 7 2"></polyline>
</svg>
</template>