Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 56681c0

Browse files
filiphricfiliphric
authored
Merge pull request filiphric#21 from filiphric/feature/search
add search feature
2 parents f44281a + e5dc148 commit 56681c0

File tree

8 files changed

+84
-4
lines changed

8 files changed

+84
-4
lines changed

‎cypress/support/@types/selectors.d.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@ export type Selectors =
5858
| 'new-card'
5959
| 'new-card-input'
6060
| 'notification-message'
61-
| 'selector'
6261
| 'signup-email'
6362
| 'signup-password'
6463
| 'signup-submit'

‎src/App.vue

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<template>
22
<div
33
tabindex="-1"
4+
@keydown.meta.k="toggleSearch(!state.showSearch)"
45
@keyup.f2="toggleTools(!state.showTools)"
5-
@keyup.esc="toggleTools(false)"
6+
@keyup.esc="
7+
toggleTools(false);
8+
toggleSearch(false);
9+
"
610
>
11+
<Search v-if="state.showSearch" />
712
<Navbar />
813
<Notification />
914
<Tools v-show="state.showTools" />
@@ -16,12 +21,14 @@
1621
import { useStore } from '@/store/store';
1722
import Navbar from '@/components/Navbar.vue';
1823
import Notification from '@/components/Notification.vue';
19-
import Tools from './components/Tools.vue';
24+
import Tools from '@/components/Tools.vue';
25+
import Search from '@/components/Search.vue';
2026
import Footer from '@/components/Footer.vue';
2127
import axios from 'axios';
2228
2329
const state = useStore();
2430
const toggleTools = state.toggleTools;
31+
const toggleSearch = state.toggleSearch;
2532
const getCookieValue = (name: string) => document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop();
2633
2734
const trelloToken = getCookieValue('trello_token');

‎src/components/Search.vue

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<template>
2+
<div
3+
class="grid fixed z-50 place-content-center w-screen h-screen"
4+
style="background-color: rgba(30, 41, 59, 0.5)"
5+
>
6+
<div class="shadow-lg">
7+
<input
8+
ref="search"
9+
v-model="searchQuery"
10+
v-click-away="onClickAway"
11+
type="text"
12+
class="px-3 w-96 h-16 text-2xl bg-white border-b-2 border-slate-300 outline-none"
13+
@keyup="triggerSearch"
14+
>
15+
<div
16+
v-for="result in searchResults"
17+
:key="result.id"
18+
class="py-3 px-3 w-96 h-16 text-xl bg-white border-slate-600 border-b-1"
19+
>
20+
<a
21+
:href="`/board/${result.boardId}?card=${result.id}`"
22+
class="block w-full h-full"
23+
>
24+
{{ result.name }}
25+
</a>
26+
</div>
27+
</div>
28+
</div>
29+
</template>
30+
31+
<script setup lang="ts">
32+
import { onMounted, ref } from 'vue';
33+
import { useStore } from '@/store/store';
34+
import { storeToRefs } from 'pinia';
35+
36+
const { searchCard, toggleSearch } = useStore();
37+
const { searchResults } = storeToRefs(useStore());
38+
const triggerSearch = () => {
39+
if (!searchQuery.value.length) {
40+
searchResults.value = [];
41+
}
42+
else {
43+
searchCard(searchQuery.value);
44+
}
45+
};
46+
47+
const search = ref();
48+
const searchQuery = ref();
49+
const onClickAway = () => {
50+
toggleSearch(false);
51+
};
52+
onMounted(() => {
53+
search.value.focus();
54+
});
55+
</script>

‎src/components/common/DropdownItem.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
</template>
99

1010
<script setup lang="ts">
11-
import { defineProps } from 'vue';
1211
defineProps({
1312
itemText: {
1413
default: 'Item text',

‎src/store/actions/searchCard.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import axios from 'axios';
2+
3+
export const searchCard = async function (this: any, query: string) {
4+
const { data } = await axios.get(`/api/cards?q=${query}`);
5+
this.searchResults = data;
6+
};

‎src/store/actions/toggleSearch.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const toggleSearch = async function (this: any, flag: boolean) {
2+
this.showSearch = flag;
3+
this.searchResults = [];
4+
};

‎src/store/store.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import { resetCards } from './actions/resetCards';
2323
import { resetUsers } from './actions/resetUsers';
2424
import { patchBoard } from './actions/patchBoard';
2525
import { toggleTools } from './actions/toggleTools';
26+
import { toggleSearch } from './actions/toggleSearch';
27+
import { searchCard } from './actions/searchCard';
2628
import { oauthLogin } from './actions/oauthLogin';
2729
import { oauthSignup } from './actions/oauthSignup';
2830
import Board from '@/typings/board';
@@ -69,6 +71,8 @@ export const useStore = defineStore({
6971
password: '',
7072
},
7173
showTools: false,
74+
showSearch: false,
75+
searchResults: [],
7276
};
7377
},
7478
actions: {
@@ -105,6 +109,10 @@ export const useStore = defineStore({
105109
// api tools
106110
toggleTools,
107111

112+
// search functionality
113+
toggleSearch,
114+
searchCard,
115+
108116
// reset actions
109117
reset,
110118
resetBoards,

‎src/typings/store.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,7 @@ declare module 'pinia' {
4444
password: string;
4545
};
4646
showTools: boolean;
47+
showSearch: boolean;
48+
searchResults: Cards[];
4749
}
4850
}

0 commit comments

Comments
 (0)