From 65a63c743f3d8f841d0f1abf8a84b89f4ec576a4 Mon Sep 17 00:00:00 2001 From: Valentin Kaelin Date: Mon, 10 Feb 2020 20:53:32 +0100 Subject: [PATCH] feat: add search dropdown with favorites and recent searches --- client/src/App.vue | 2 + client/src/components/SVGContainer.vue | 3 + client/src/components/SearchForm.vue | 46 ++++++++++++- client/src/components/SearchFormDropdown.vue | 67 ++++++++++++++++++ .../components/SearchFormDropdownPlayer.vue | 62 +++++++++++++++++ client/src/layouts/Default.vue | 6 ++ client/src/store/modules/settings.js | 68 +++++++++++++++++-- client/src/store/modules/summoner.js | 11 ++- client/tailwind.config.js | 2 + 9 files changed, 260 insertions(+), 7 deletions(-) create mode 100644 client/src/components/SearchFormDropdown.vue create mode 100644 client/src/components/SearchFormDropdownPlayer.vue diff --git a/client/src/App.vue b/client/src/App.vue index 20aed67..83fa32b 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -32,6 +32,8 @@ export default { created() { this.updatePercent() this.updateSettings({name: 'region'}) + this.updateSettings({name: 'recent_searches', isJson: true}) + this.updateSettings({name: 'favorites', isJson: true}) }, methods: { diff --git a/client/src/components/SVGContainer.vue b/client/src/components/SVGContainer.vue index 31c0e62..ac50bf5 100644 --- a/client/src/components/SVGContainer.vue +++ b/client/src/components/SVGContainer.vue @@ -3,6 +3,7 @@ + @@ -19,6 +20,8 @@ + + diff --git a/client/src/components/SearchForm.vue b/client/src/components/SearchForm.vue index c8bcb57..5d70119 100644 --- a/client/src/components/SearchForm.vue +++ b/client/src/components/SearchForm.vue @@ -3,11 +3,24 @@
+ + + +
+
+ + + +
Favorite
+
diff --git a/client/src/store/modules/settings.js b/client/src/store/modules/settings.js index 2409b91..2d6a1d8 100644 --- a/client/src/store/modules/settings.js +++ b/client/src/store/modules/settings.js @@ -1,21 +1,80 @@ export const namespaced = true export const state = { + favorites: [], percent: false, + recentSearches: [], region: 'euw', } export const mutations = { + ADD_FAVORITE(state, summoner) { + state.favorites.push(summoner) + }, + ADD_SEARCH(state, summoner) { + let searches = state.recentSearches + + const alreadySearch = searches.find(s => s.name === summoner.name) + if (alreadySearch) { + alreadySearch.date = Date.now() + searches.sort((a, b) => b.date - a.date) + return + } + + if (searches.length >= 6) { + searches.pop() + } + + summoner.date = Date.now() + searches.unshift(summoner) + }, + REMOVE_FAVORITE(state, summonerName) { + state.favorites = state.favorites.filter(s => s.name !== summonerName) + }, + REMOVE_SEARCH(state, summonerName) { + state.recentSearches = state.recentSearches.filter(s => s.name !== summonerName) + }, + UPDATE_FAVORITES(state, favorites) { + state.favorites = favorites + }, UPDATE_PERCENT(state, percent) { state.percent = percent }, + UPDATE_RECENT_SEARCHES(state, recentSearches) { + state.recentSearches = recentSearches + }, UPDATE_REGION(state, region) { state.region = region - } + }, } export const actions = { - async updatePercent({ commit }, percent) { + addRecentSearch({ commit, dispatch, state }, summoner) { + commit('ADD_SEARCH', summoner) + dispatch('updateSettings', { name: 'recent_searches', value: state.recentSearches, isJson: true }) + }, + removeRecentSearch({ commit, dispatch }, summoner) { + commit('REMOVE_SEARCH', summoner.name) + dispatch('updateSettings', { name: 'recent_searches', value: state.recentSearches, isJson: true }) + }, + updateFavorite({ commit, dispatch, state }, summoner) { + const alreadyFav = state.favorites.find(s => s.name === summoner.name) + if (alreadyFav) { + commit('REMOVE_FAVORITE', summoner.name) + } else { + if (state.favorites.length >= 6) { + // Display error message + return dispatch('notification/add', { + type: 'error', + message: 'Too many favorite summoners.' + }, { root: true }) + } + commit('ADD_FAVORITE', summoner) + } + + dispatch('updateSettings', { name: 'favorites', value: state.favorites, isJson: true }) + }, + updatePercent({ commit }, percent) { if (typeof (percent) !== 'boolean') { percent = localStorage.getItem('settings-percent') === 'true' } else { @@ -23,12 +82,13 @@ export const actions = { } commit('UPDATE_PERCENT', percent) }, - async updateSettings({ commit }, { name, value }) { + updateSettings({ commit }, { name, value, isJson = false }) { if (!value) { value = localStorage.getItem(name) + value = isJson ? JSON.parse(value) : value if (!value) return } else { - localStorage.setItem(name, value) + localStorage.setItem(name, isJson ? JSON.stringify(value) : value) } commit(`UPDATE_${name.toUpperCase()}`, value) } diff --git a/client/src/store/modules/summoner.js b/client/src/store/modules/summoner.js index 355da43..8634125 100644 --- a/client/src/store/modules/summoner.js +++ b/client/src/store/modules/summoner.js @@ -107,15 +107,22 @@ export const mutations = { export const actions = { async basicRequest({ commit, dispatch, rootState }, { summoner, region }) { - region = rootState.regionsList[region] + const regionId = rootState.regionsList[region] commit('BASIC_REQUEST') try { - const resp = await axios(({ url: 'summoner-basic', data: { summoner, region }, method: 'POST' })) + const resp = await axios(({ url: 'summoner-basic', data: { summoner, region: regionId }, method: 'POST' })) if (resp.data) { console.log(`---SUMMONER INFOS ${resp.data.account.name}---`) console.log(resp.data) const infos = createBasicSummonerData(resp.data) commit('SUMMONER_FOUND', infos) + + // Add summoner to recent searches + dispatch('settings/addRecentSearch', { + name: infos.account.name, + icon: infos.account.profileIconId, + region, + }, { root: true }) } else { commit('SUMMONER_NOT_FOUND') diff --git a/client/tailwind.config.js b/client/tailwind.config.js index fd24e08..b62fb39 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -137,6 +137,7 @@ module.exports = { '1': '0.25rem', '2': '0.5rem', '3': '0.75rem', + '3p5': '0.875rem', '4': '1rem', '4b': '1.15rem', '5': '1.25rem', @@ -326,6 +327,7 @@ module.exports = { screen: '100vh', }, maxWidth: { + '12': '3rem', xs: '20rem', sm: '24rem', md: '28rem',