maciejpedzich/spotifyplaylistarchive.com
1
0
Fork 0
mirror of https://github.com/maciejpedzich/spotifyplaylistarchive.com.git synced 2024-09-19 18:16:19 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Ensure registry gets populated client-side

Browse Source
This commit is contained in:
maciejpedzich 2023-09-27 02:54:42 +02:00
parent bb37def23a
commit 4873ba02a9
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pages/index.vue
View File

@ -69,13 +69,15 @@ const performSearch = async () => {
} }
}; };
const goToSnapshotCalendar = async ({ const openSnapshotCalendar = async ({
value: playlist value: playlist
}: { }: {
value: RegistryEntry; value: RegistryEntry;
}) => { }) => {
await navigateTo(`/playlists/${playlist.id}`); await navigateTo(`/playlists/${playlist.id}`);
}; };
watch(playlistRegistry, (loadedEntries) => fuzzySearcher.add(...loadedEntries));
</script> </script>
<template> <template>
@ -106,15 +108,16 @@ const goToSnapshotCalendar = async ({
</Message> </Message>
<AutoComplete <AutoComplete
v-else v-else
id="search-bar"
class="w-full" class="w-full"
aria-label="Playlist Search Bar" aria-label="Playlist Search Bar"
placeholder="Start typing a playlist's title or paste its URL" placeholder="Start typing a playlist's title or paste its URL"
field="name"
:suggestions="searchResults" :suggestions="searchResults"
:min-length="minSearchTermLength" :min-length="minSearchTermLength"
field="name"
:complete-on-focus="searchTerm.length >= minSearchTermLength" :complete-on-focus="searchTerm.length >= minSearchTermLength"
@complete="performSearch" @complete="performSearch"
@item-select="goToSnapshotCalendar" @item-select="openSnapshotCalendar"
v-model="searchTerm" v-model="searchTerm"
/> />
</div> </div>
@ -122,10 +125,7 @@ const goToSnapshotCalendar = async ({
</template> </template>
<style scoped> <style scoped>
:deep(.p-autocomplete-input) { :deep(.p-autocomplete-input),
width: 100%;
}
:deep(.p-message-text) { :deep(.p-message-text) {
width: 100%; width: 100%;
} }