mirror of
https://github.com/maciejpedzich/spotifyplaylistarchive.com.git
synced 2024-09-19 18:16:19 +02:00
Implement title typeahead and search history
This commit is contained in:
parent
b144597153
commit
ba6aa44ee2
@ -6,10 +6,20 @@ import { SearchResult } from '~~/models/search-result';
|
|||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
|
const searchHistory = useCookie<SearchResult[]>('searchHistory');
|
||||||
|
searchHistory.value = searchHistory.value || [];
|
||||||
|
|
||||||
const searchText = ref('');
|
const searchText = ref('');
|
||||||
const suggestions = ref([]);
|
const suggestions = ref([]);
|
||||||
|
|
||||||
|
// For some odd reason, if you don't do JSON.parse(JSON.stringify),
|
||||||
|
// suggestions ref won't get populated.
|
||||||
|
const displaySearchHistory = () =>
|
||||||
|
(suggestions.value = JSON.parse(JSON.stringify(searchHistory.value)));
|
||||||
|
|
||||||
const findPlaylists = async () => {
|
const findPlaylists = async () => {
|
||||||
|
if (searchText.value.length === 0) return displaySearchHistory();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const urlObject = new URL(searchText.value);
|
const urlObject = new URL(searchText.value);
|
||||||
const [collectionName, playlistId] = urlObject.pathname
|
const [collectionName, playlistId] = urlObject.pathname
|
||||||
@ -36,7 +46,7 @@ const findPlaylists = async () => {
|
|||||||
}
|
}
|
||||||
).catch((e) => e.data);
|
).catch((e) => e.data);
|
||||||
|
|
||||||
suggestions.value = searchResults;
|
return (suggestions.value = searchResults);
|
||||||
} else {
|
} else {
|
||||||
throw new Error('This is not a valid playlist link');
|
throw new Error('This is not a valid playlist link');
|
||||||
}
|
}
|
||||||
@ -47,7 +57,7 @@ const findPlaylists = async () => {
|
|||||||
`/api/playlists/search?title=${searchText.value}`
|
`/api/playlists/search?title=${searchText.value}`
|
||||||
);
|
);
|
||||||
|
|
||||||
suggestions.value = searchResults;
|
return (suggestions.value = searchResults);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -56,18 +66,27 @@ const openSnapshotsCalendar = async ({
|
|||||||
}: {
|
}: {
|
||||||
value: SearchResult;
|
value: SearchResult;
|
||||||
}) => {
|
}) => {
|
||||||
|
const existingHistoryEntry = searchHistory.value.find(
|
||||||
|
(e) => e.id === entry.id
|
||||||
|
);
|
||||||
|
|
||||||
|
if (searchHistory.value.length === 0 || !existingHistoryEntry) {
|
||||||
|
searchHistory.value.unshift(entry);
|
||||||
|
searchHistory.value = searchHistory.value.slice(0, 10);
|
||||||
|
}
|
||||||
|
|
||||||
await router.push(`/playlists/${entry.id}/snapshots`);
|
await router.push(`/playlists/${entry.id}/snapshots`);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<NuxtLayout name="centered-content">
|
<NuxtLayout name="centered-content">
|
||||||
<h1 class="m-0 text-5xl">Spotify Playlist Archive</h1>
|
<h1 class="m-0 md:text-5xl text-4xl">Spotify Playlist Archive</h1>
|
||||||
<div class="flex flex-column justify-content-center text-center">
|
<div class="flex flex-column justify-content-center text-center">
|
||||||
<p class="text-xl text-gray-300">
|
<p class="text-xl text-gray-300">
|
||||||
Browse past versions of thousands of playlists saved over time
|
Browse past versions of thousands of playlists saved over time
|
||||||
</p>
|
</p>
|
||||||
<div class="w-full">
|
<div class="w-full md:px-0 px-3">
|
||||||
<AutoComplete
|
<AutoComplete
|
||||||
v-model="searchText"
|
v-model="searchText"
|
||||||
:suggestions="suggestions"
|
:suggestions="suggestions"
|
||||||
@ -75,6 +94,7 @@ const openSnapshotsCalendar = async ({
|
|||||||
placeholder="Type in at least 3 characters, or paste a playlist link"
|
placeholder="Type in at least 3 characters, or paste a playlist link"
|
||||||
field="title"
|
field="title"
|
||||||
:min-length="3"
|
:min-length="3"
|
||||||
|
complete-on-focus
|
||||||
@complete="findPlaylists"
|
@complete="findPlaylists"
|
||||||
@item-select="openSnapshotsCalendar"
|
@item-select="openSnapshotsCalendar"
|
||||||
/>
|
/>
|
||||||
|
Loading…
Reference in New Issue
Block a user