Skip to content

Commit 1143c14

Browse files
author
Guillaume Chau
committed
feat(ui): extract package search into own component
1 parent 935f18e commit 1143c14

File tree

2 files changed

+155
-82
lines changed

2 files changed

+155
-82
lines changed

‎packages/@vue/cli-ui/src/components/NpmPackageSearch.vue

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<template>
2+
<div class="npm-package-search">
3+
<div class="content vue-ui-disable-scroll">
4+
<ais-index
5+
app-id="OFCNCOG2CU"
6+
api-key="db283631f89b5b8a10707311f911fd00"
7+
index-name="npm-search"
8+
:query-parameters="{
9+
hitsPerPage: pageSize,
10+
attributesToRetrieve: [
11+
'name',
12+
'description',
13+
'repository',
14+
'homepage',
15+
'version',
16+
'owner',
17+
'humanDownloadsLast30Days',
18+
'keywords'
19+
],
20+
attributesToHighlight: [
21+
'name',
22+
'description'
23+
],
24+
filters
25+
}"
26+
>
27+
<InstantSearchInput
28+
ref="searchInput"
29+
:placeholder="$t('org.vue.views.project-plugins-add.tabs.search.search-input')"
30+
/>
31+
<ais-results ref="results">
32+
<PackageSearchItem
33+
slot-scope="{ result }"
34+
:pkg="result"
35+
:selected="selectedIdModel === result.name"
36+
@click.native="selectedIdModel = result.name"
37+
/>
38+
</ais-results>
39+
<ais-no-results>
40+
<div class="vue-ui-empty">
41+
<VueIcon icon="search" class="huge"/>
42+
<div>{{ $t('org.vue.views.project-plugins-add.tabs.search.not-found') }}</div>
43+
</div>
44+
</ais-no-results>
45+
<InstantSearchPagination @page-change="scrollResultsToTop()"/>
46+
</ais-index>
47+
</div>
48+
49+
<div class="actions-bar no-padding-x space-between">
50+
<VueButton
51+
icon-left="close"
52+
:label="$t('org.vue.views.project-plugins-add.tabs.search.buttons.cancel')"
53+
class="big"
54+
@click="close()"
55+
/>
56+
57+
<div class="algolia">
58+
<img class="ais-logo" src="~@/assets/search-by-algolia.svg">
59+
</div>
60+
61+
<VueButton
62+
icon-left="file_download"
63+
:label="$t('org.vue.views.project-plugins-add.tabs.search.buttons.install', { target: selectedIdModel || $t('org.vue.views.project-plugins-add.plugin') })"
64+
class="big primary"
65+
:disabled="!selectedIdModel"
66+
data-testid="download-plugin"
67+
@click="install()"
68+
/>
69+
</div>
70+
</div>
71+
</template>
72+
73+
<script>
74+
export default {
75+
props: {
76+
selectedId: {
77+
type: String,
78+
default: null
79+
},
80+
81+
filters: {
82+
type: String,
83+
default: null
84+
},
85+
86+
pageSize: {
87+
type: Number,
88+
default: 20
89+
}
90+
},
91+
92+
data () {
93+
return {
94+
internalSelectedId: this.selectedId
95+
}
96+
},
97+
98+
computed: {
99+
selectedIdModel: {
100+
get () { return this.internalSelectedId },
101+
set (value) {
102+
this.internalSelectedId = value
103+
this.$emit('update:selectedId', value)
104+
}
105+
}
106+
},
107+
108+
watch: {
109+
selectedId (value) {
110+
if (value !== this.internalSelectedId) {
111+
this.internalSelectedId = value
112+
}
113+
}
114+
},
115+
116+
methods: {
117+
close () {
118+
this.$emit('close')
119+
},
120+
121+
install () {
122+
this.$emit('install', this.selectedIdModel)
123+
}
124+
}
125+
}
126+
</script>
127+
128+
<style lang="stylus" scoped>
129+
@import "~@/style/imports"
130+
131+
.npm-package-search
132+
height 100%
133+
display grid
134+
grid-template-columns 1fr
135+
grid-template-rows 1fr auto
136+
137+
.algolia
138+
position absolute
139+
margin 0 auto
140+
top 0
141+
left 0
142+
width 100%
143+
height 100%
144+
pointer-events none
145+
h-box()
146+
box-center()
147+
</style>

‎packages/@vue/cli-ui/src/views/ProjectPluginsAdd.vue

Lines changed: 8 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -13,72 +13,11 @@
1313
icon="search"
1414
disabled
1515
>
16-
<div class="content vue-ui-disable-scroll">
17-
<ais-index
18-
app-id="OFCNCOG2CU"
19-
api-key="db283631f89b5b8a10707311f911fd00"
20-
index-name="npm-search"
21-
:query-parameters="{
22-
hitsPerPage: 20,
23-
attributesToRetrieve: [
24-
'name',
25-
'description',
26-
'repository',
27-
'homepage',
28-
'version',
29-
'owner',
30-
'humanDownloadsLast30Days'
31-
],
32-
attributesToHighlight: [
33-
'name',
34-
'description'
35-
],
36-
filters: `computedKeywords:vue-cli-plugin`
37-
}"
38-
>
39-
<InstantSearchInput
40-
ref="searchInput"
41-
:placeholder="$t('org.vue.views.project-plugins-add.tabs.search.search-input')"
42-
/>
43-
<ais-results ref="results">
44-
<PackageSearchItem
45-
slot-scope="{ result }"
46-
:pkg="result"
47-
:selected="selectedId === result.name"
48-
@click.native="selectedId = result.name"
49-
/>
50-
</ais-results>
51-
<ais-no-results>
52-
<div class="vue-ui-empty">
53-
<VueIcon icon="search" class="huge"/>
54-
<div>{{ $t('org.vue.views.project-plugins-add.tabs.search.not-found') }}</div>
55-
</div>
56-
</ais-no-results>
57-
<InstantSearchPagination @page-change="scrollResultsToTop()"/>
58-
</ais-index>
59-
</div>
60-
61-
<div class="actions-bar no-padding-x">
62-
<VueButton
63-
icon-left="close"
64-
:label="$t('org.vue.views.project-plugins-add.tabs.search.buttons.cancel')"
65-
class="big"
66-
@click="close()"
67-
/>
68-
69-
<div class="algolia">
70-
<img class="ais-logo" src="~@/assets/search-by-algolia.svg">
71-
</div>
72-
73-
<VueButton
74-
icon-left="file_download"
75-
:label="$t('org.vue.views.project-plugins-add.tabs.search.buttons.install', { target: selectedId || $t('org.vue.views.project-plugins-add.plugin') })"
76-
class="big primary"
77-
:disabled="!selectedId"
78-
data-testid="download-plugin"
79-
@click="installPlugin()"
80-
/>
81-
</div>
16+
<NpmPackageSearch
17+
filters="computedKeywords:vue-cli-plugin"
18+
@close="close()"
19+
@install="installPlugin"
20+
/>
8221
</VueTab>
8322

8423
<VueTab
@@ -198,7 +137,6 @@ export default {
198137
data () {
199138
return {
200139
tabId: 'search',
201-
selectedId: null,
202140
showCancelInstall: false,
203141
pluginInstallation: null
204142
}
@@ -207,7 +145,7 @@ export default {
207145
apollo: {
208146
pluginInstallation: {
209147
query: PLUGIN_INSTALLATION,
210-
fetchPolicy: 'netork-only',
148+
fetchPolicy: 'network-only',
211149
result () {
212150
this.checkTab()
213151
}
@@ -253,12 +191,12 @@ export default {
253191
}
254192
},
255193
256-
async installPlugin () {
194+
async installPlugin (id) {
257195
try {
258196
await this.$apollo.mutate({
259197
mutation: PLUGIN_INSTALL,
260198
variables: {
261-
id: this.selectedId
199+
id
262200
}
263201
})
264202
this.tabId = 'config'
@@ -269,7 +207,6 @@ export default {
269207
},
270208
271209
cancelInstall () {
272-
this.selectedId = null
273210
this.tabId = 'search'
274211
this.showCancelInstall = false
275212
},
@@ -337,15 +274,4 @@ export default {
337274
.content
338275
grid-area content
339276
overflow hidden
340-
341-
.algolia
342-
position absolute
343-
margin 0 auto
344-
top 0
345-
left 0
346-
width 100%
347-
height 100%
348-
pointer-events none
349-
h-box()
350-
box-center()
351277
</style>

0 commit comments

Comments
 (0)