Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit56681c0

Browse files
authored
Merge pull requestfiliphric#21 from filiphric/feature/search
add search feature
2 parentsf44281a +e5dc148 commit56681c0

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+
<Searchv-if="state.showSearch" />
712
<Navbar />
813
<Notification />
914
<Toolsv-show="state.showTools" />
@@ -16,12 +21,14 @@
1621
import {useStore }from'@/store/store';
1722
importNavbarfrom'@/components/Navbar.vue';
1823
importNotificationfrom'@/components/Notification.vue';
19-
importToolsfrom'./components/Tools.vue';
24+
importToolsfrom'@/components/Tools.vue';
25+
importSearchfrom'@/components/Search.vue';
2026
importFooterfrom'@/components/Footer.vue';
2127
importaxiosfrom'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+
<divclass="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+
importaxiosfrom'axios';
2+
3+
exportconstsearchCard=asyncfunction(this:any,query:string){
4+
const{ data}=awaitaxios.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+
exportconsttoggleSearch=asyncfunction(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
importBoardfrom'@/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)
[8]ページ先頭
©2009-2025 Movatter.jp