mirror of
https://github.com/Dvorinka/swingmusic-extended.git
synced 2026-06-04 20:43:04 +00:00
move global search input to a general location
- create a global search store - create a half-baked context menu store -
This commit is contained in:
geoffrey45
@@ -37,7 +37,7 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.r-tracks {
|
||||
margin-top: 0.5rem;
|
||||
margin: 0.5rem 0.5rem 0.5rem 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,24 +1,7 @@
|
||||
<template>
|
||||
<div class="right-search">
|
||||
<div>
|
||||
<div class="input">
|
||||
<Filters :filters="filters" @removeFilter="removeFilter" />
|
||||
<div class="input-loader border">
|
||||
<input
|
||||
id="search"
|
||||
v-model="query"
|
||||
placeholder="find your music"
|
||||
type="text"
|
||||
@keyup.backspace="removeLastFilter"
|
||||
/>
|
||||
<div class="_loader">
|
||||
<Loader />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator no-border"></div>
|
||||
<Options @addFilter="addFilter" />
|
||||
</div>
|
||||
<Options />
|
||||
<!-- </div> -->
|
||||
<div class="scrollable" ref="search_thing">
|
||||
<TracksGrid
|
||||
v-if="tracks.tracks.length"
|
||||
@@ -26,7 +9,7 @@
|
||||
:tracks="tracks.tracks"
|
||||
@loadMore="loadMoreTracks"
|
||||
/>
|
||||
<div class="separator no-border"></div>
|
||||
<div class="separator no-border" v-if="tracks.tracks.length"></div>
|
||||
|
||||
<AlbumGrid
|
||||
v-if="albums.albums.length"
|
||||
@@ -42,166 +25,118 @@
|
||||
@loadMore="loadMoreArtists"
|
||||
/>
|
||||
<div
|
||||
v-if="
|
||||
v-if="search.query.trim().length === 0"
|
||||
class="no-res border rounded"
|
||||
>
|
||||
<div class="no-res-text">👻 Find your music</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="
|
||||
!artists.artists.length &&
|
||||
!tracks.tracks.length &&
|
||||
!albums.albums.length &&
|
||||
query.length !== 0
|
||||
!albums.albums.length
|
||||
"
|
||||
class="no-res border rounded"
|
||||
>
|
||||
<div class="no-res-text">
|
||||
No results for <span class="highlight rounded">{{ query }}</span>
|
||||
No results for
|
||||
<span class="highlight rounded">{{ search.query }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="query.length === 0" class="no-res border rounded">
|
||||
<div class="no-res-text">👻 Find your music</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { reactive, ref } from "@vue/reactivity";
|
||||
|
||||
import { watch } from "@vue/runtime-core";
|
||||
import state from "@/composables/state.js";
|
||||
import searchMusic from "@/composables/searchMusic.js";
|
||||
import useDebouncedRef from "@/composables/useDebouncedRef";
|
||||
import AlbumGrid from "@/components/Search/AlbumGrid.vue";
|
||||
import ArtistGrid from "@/components/Search/ArtistGrid.vue";
|
||||
import TracksGrid from "@/components/Search/TracksGrid.vue";
|
||||
import Loader from "@/components/shared/Loader.vue";
|
||||
import Options from "@/components/Search/Options.vue";
|
||||
import Filters from "@/components/Search/Filters.vue";
|
||||
import "@/assets/css/Search/Search.scss";
|
||||
import loadMore from "../../composables/loadmore";
|
||||
import useSearchStore from "../../stores/gsearch";
|
||||
import useTabStore from "../../stores/tabs";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AlbumGrid,
|
||||
ArtistGrid,
|
||||
TracksGrid,
|
||||
Loader,
|
||||
Options,
|
||||
Filters,
|
||||
},
|
||||
import "@/assets/css/Search/Search.scss";
|
||||
|
||||
setup() {
|
||||
const search_thing = ref(null);
|
||||
const loading = ref(state.loading);
|
||||
const filters = ref([]);
|
||||
const search = useSearchStore();
|
||||
const tabs = useTabStore();
|
||||
|
||||
const tracks = reactive({
|
||||
tracks: [],
|
||||
more: false,
|
||||
});
|
||||
const search_thing = ref(null);
|
||||
|
||||
let albums = reactive({
|
||||
albums: [],
|
||||
more: false,
|
||||
});
|
||||
const tracks = reactive({
|
||||
tracks: [],
|
||||
more: false,
|
||||
});
|
||||
|
||||
const artists = reactive({
|
||||
artists: [],
|
||||
more: false,
|
||||
});
|
||||
let albums = reactive({
|
||||
albums: [],
|
||||
more: false,
|
||||
});
|
||||
|
||||
const query = useDebouncedRef("", 600);
|
||||
const artists = reactive({
|
||||
artists: [],
|
||||
more: false,
|
||||
});
|
||||
|
||||
function addFilter(filter) {
|
||||
if (!filters.value.includes(filter)) {
|
||||
filters.value.push(filter);
|
||||
}
|
||||
const query = useDebouncedRef("", 600);
|
||||
|
||||
function scrollSearchThing() {
|
||||
search_thing.value.scroll({
|
||||
top: search_thing.value.scrollTop + 330,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
function loadMoreTracks(start) {
|
||||
scrollSearchThing();
|
||||
loadMore.loadMoreTracks(start).then((response) => {
|
||||
tracks.tracks = [...tracks.tracks, ...response.tracks];
|
||||
tracks.more = response.more;
|
||||
});
|
||||
}
|
||||
|
||||
function loadMoreAlbums(start) {
|
||||
loadMore.loadMoreAlbums(start).then((response) => {
|
||||
albums.albums = [...albums.albums, ...response.albums];
|
||||
albums.more = response.more;
|
||||
});
|
||||
}
|
||||
|
||||
function loadMoreArtists(start) {
|
||||
scrollSearchThing();
|
||||
loadMore.loadMoreArtists(start).then((response) => {
|
||||
artists.artists = [...artists.artists, ...response.artists];
|
||||
artists.more = response.more;
|
||||
});
|
||||
}
|
||||
|
||||
search.$subscribe((mutation, state) => {
|
||||
if (state.query.trim() == "") {
|
||||
tracks.tracks = [];
|
||||
albums.albums = [];
|
||||
artists.artists = [];
|
||||
return;
|
||||
}
|
||||
|
||||
searchMusic(state.query).then((res) => {
|
||||
if (tabs.current !== tabs.tabs.search) {
|
||||
tabs.switchToSearch();
|
||||
}
|
||||
|
||||
function removeFilter(filter) {
|
||||
filters.value = filters.value.filter((f) => f !== filter);
|
||||
}
|
||||
albums.albums = res.albums.albums;
|
||||
albums.more = res.albums.more;
|
||||
|
||||
let counter = 0;
|
||||
artists.artists = res.artists.artists;
|
||||
artists.more = res.artists.more;
|
||||
|
||||
function removeLastFilter() {
|
||||
if (query.value === "" || query.value === null) {
|
||||
counter++;
|
||||
|
||||
if (counter > 1 || query.value === null) {
|
||||
filters.value.pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function scrollSearchThing() {
|
||||
search_thing.value.scroll({
|
||||
top: search_thing.value.scrollTop + 330,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
|
||||
function loadMoreTracks(start) {
|
||||
scrollSearchThing();
|
||||
loadMore.loadMoreTracks(start).then((response) => {
|
||||
tracks.tracks = [...tracks.tracks, ...response.tracks];
|
||||
tracks.more = response.more;
|
||||
});
|
||||
}
|
||||
|
||||
function loadMoreAlbums(start) {
|
||||
loadMore.loadMoreAlbums(start).then((response) => {
|
||||
albums.albums = [...albums.albums, ...response.albums];
|
||||
albums.more = response.more;
|
||||
});
|
||||
}
|
||||
|
||||
function loadMoreArtists(start) {
|
||||
scrollSearchThing();
|
||||
loadMore.loadMoreArtists(start).then((response) => {
|
||||
artists.artists = [...artists.artists, ...response.artists];
|
||||
artists.more = response.more;
|
||||
});
|
||||
}
|
||||
|
||||
watch(query, (new_query) => {
|
||||
if (
|
||||
query.value === "" ||
|
||||
query.value === " " ||
|
||||
query.value.length < 2
|
||||
) {
|
||||
albums.albums = [];
|
||||
artists.artists = [];
|
||||
tracks.tracks = [];
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
searchMusic(new_query).then((res) => {
|
||||
albums.albums = res.albums.albums;
|
||||
albums.more = res.albums.more;
|
||||
|
||||
artists.artists = res.artists.artists;
|
||||
artists.more = res.artists.more;
|
||||
|
||||
tracks.tracks = res.tracks.tracks;
|
||||
tracks.more = res.tracks.more;
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
addFilter,
|
||||
removeFilter,
|
||||
removeLastFilter,
|
||||
loadMoreTracks,
|
||||
loadMoreAlbums,
|
||||
loadMoreArtists,
|
||||
tracks,
|
||||
albums,
|
||||
artists,
|
||||
query,
|
||||
filters,
|
||||
loading,
|
||||
search_thing,
|
||||
};
|
||||
},
|
||||
};
|
||||
tracks.tracks = res.tracks.tracks;
|
||||
tracks.more = res.tracks.more;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="gsearch-input">
|
||||
<Filters :filters="search.filters" @removeFilter="removeFilter" />
|
||||
<div class="input-loader border">
|
||||
<input
|
||||
id="search"
|
||||
v-model="search.query"
|
||||
placeholder="Aretha Franklin"
|
||||
type="text"
|
||||
@keyup.backspace="removeLastFilter"
|
||||
/>
|
||||
<div class="_loader">
|
||||
<Loader />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Filters from "../Search/Filters.vue";
|
||||
import Loader from "../shared/Loader.vue";
|
||||
import useSearchStore from "../../stores/gsearch";
|
||||
|
||||
const search = useSearchStore();
|
||||
|
||||
function removeFilter(filter) {
|
||||
search.removeFilter(filter);
|
||||
}
|
||||
|
||||
let counter = 0;
|
||||
|
||||
function removeLastFilter() {
|
||||
if (search.query === "") {
|
||||
counter++;
|
||||
|
||||
if (counter > 0) {
|
||||
search.removeLastFilter();
|
||||
}
|
||||
} else {
|
||||
counter = 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.gsearch-input {
|
||||
margin-top: $small;
|
||||
padding: 0 $small;
|
||||
display: flex;
|
||||
|
||||
.input-loader {
|
||||
width: 100%;
|
||||
border-radius: 0.4rem;
|
||||
position: relative;
|
||||
|
||||
._loader {
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border: none;
|
||||
line-height: 2rem;
|
||||
background-color: transparent;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
transition: all 0.5s ease;
|
||||
padding-left: 0.75rem;
|
||||
|
||||
&:focus {
|
||||
transition: all 0.5s ease;
|
||||
color: rgb(255, 255, 255);
|
||||
outline: none;
|
||||
|
||||
&::placeholder {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,9 +5,11 @@
|
||||
v-for="tab in tabs.tabs"
|
||||
@click="tabs.changeTab(tab)"
|
||||
:key="tab"
|
||||
class="image t-item"
|
||||
:class="({ active_tab: tabs.current === tab }, `${tab}`)"
|
||||
></div>
|
||||
class="container"
|
||||
:class="{ active_tab: tabs.current === tab }"
|
||||
>
|
||||
<div class="image t-item" :class="`${tab}`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -15,7 +17,7 @@
|
||||
<script setup>
|
||||
import useTabStore from "../../stores/tabs";
|
||||
|
||||
const tabs = useTabStore()
|
||||
const tabs = useTabStore();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -38,16 +40,25 @@ const tabs = useTabStore()
|
||||
height: 2.25rem;
|
||||
background-size: 1.5rem;
|
||||
border-radius: $small;
|
||||
background-color: $gray4;
|
||||
transition: all 0.25s;
|
||||
width: 4rem;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(128, 128, 128, 0.281);
|
||||
background-color: $gray3;
|
||||
}
|
||||
}
|
||||
|
||||
.active_tab {
|
||||
border: solid;
|
||||
background-color: rgba(17, 123, 223, 0.192);
|
||||
border-radius: $small;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 4rem;
|
||||
|
||||
.t-item {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
background-image: linear-gradient(to right, $blue, $red) !important;
|
||||
}
|
||||
|
||||
.search {
|
||||
|
||||
Reference in New Issue
Block a user