Skip to content

Commit 8fe5850

Browse files
AkryumAkryum
authored
feat: rename project (#3955)
* feat: project rename * chore: use a pen icon for rename button
1 parent 43826f1 commit 8fe5850

File tree

7 files changed

+227
-77
lines changed

7 files changed

+227
-77
lines changed

‎packages/@vue/cli-ui/apollo-server/connectors/projects.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -431,6 +431,11 @@ function setFavorite ({ id, favorite }, context) {
431431
return findOne(id, context)
432432
}
433433

434+
function rename ({ id, name }, context) {
435+
context.db.get('projects').find({ id }).assign({ name }).write()
436+
return findOne(id, context)
437+
}
438+
434439
function getType (project, context) {
435440
if (typeof project === 'string') {
436441
project = findByPath(project, context)
@@ -483,6 +488,7 @@ module.exports = {
483488
remove,
484489
resetCwd,
485490
setFavorite,
491+
rename,
486492
initCreator,
487493
removeCreator,
488494
getType,

‎packages/@vue/cli-ui/apollo-server/schema/project.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ extend type Mutation {
2020
projectRemove (id: ID!): Boolean!
2121
projectCwdReset: String
2222
projectSetFavorite (id: ID!, favorite: Int!): Project!
23+
projectRename (id: ID!, name: String!): Project!
2324
presetApply (id: ID!): ProjectCreation
2425
featureSetEnabled (id: ID!, enabled: Boolean): Feature
2526
}
@@ -105,6 +106,7 @@ exports.resolvers = {
105106
projectRemove: (root, { id }, context) => projects.remove(id, context),
106107
projectCwdReset: (root, args, context) => projects.resetCwd(context),
107108
projectSetFavorite: (root, args, context) => projects.setFavorite(args, context),
109+
projectRename: (root, args, context) => projects.rename(args, context),
108110
presetApply: (root, { id }, context) => projects.applyPreset(id, context),
109111
featureSetEnabled: (root, args, context) => projects.setFeatureEnabled(args, context)
110112
}

‎packages/@vue/cli-ui/locales/en.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"vue": {
44
"common": {
55
"close": "Close",
6+
"cancel": "Cancel",
67
"back": "Go back",
78
"more-info": "More info",
89
"show-more": "Show more",
@@ -111,6 +112,14 @@
111112
"open-in-editor": "Open in editor"
112113
}
113114
},
115+
"project-rename": {
116+
"title": "Rename",
117+
"name-field": {
118+
"title": "Name",
119+
"subtitle": "Enter the new name"
120+
},
121+
"submit": "Rename"
122+
},
114123
"project-plugin-item": {
115124
"version": "version",
116125
"latest": "latest",

‎packages/@vue/cli-ui/src/components/app/ProjectQuickDropdown.vue

Lines changed: 92 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,98 @@
11
<template>
2-
<VueDropdown
3-
v-if="$responsive.wide"
4-
:label="projectCurrent ? projectCurrent.name : $t('org.vue.components.status-bar.project.empty')"
5-
class="current-project project-quick-dropdown"
6-
icon-right="arrow_drop_down"
7-
button-class="round"
8-
>
9-
<!-- Current project options -->
10-
11-
<template v-if="projectCurrent">
12-
<VueSwitch
13-
:value="projectCurrent.favorite"
14-
:icon="projectCurrent.favorite ? 'star' : 'star_border'"
15-
class="extend-left"
16-
@update="toggleCurrentFavorite()"
17-
>
18-
{{ $t('org.vue.components.project-select-list-item.tooltips.favorite') }}
19-
</VueSwitch>
2+
<div class="project-quick-dropdown">
3+
<VueDropdown
4+
v-if="$responsive.wide"
5+
:label="projectCurrent ? projectCurrent.name : $t('org.vue.components.status-bar.project.empty')"
6+
class="current-project"
7+
icon-right="arrow_drop_down"
8+
button-class="round"
9+
>
10+
<!-- Current project options -->
11+
12+
<template v-if="projectCurrent">
13+
<VueSwitch
14+
:value="projectCurrent.favorite"
15+
:icon="projectCurrent.favorite ? 'star' : 'star_border'"
16+
class="extend-left"
17+
@update="toggleCurrentFavorite()"
18+
>
19+
{{ $t('org.vue.components.project-select-list-item.tooltips.favorite') }}
20+
</VueSwitch>
21+
22+
<VueDropdownButton
23+
:label="$t('org.vue.components.project-select-list-item.tooltips.open-in-editor')"
24+
icon-left="open_in_browser"
25+
@click="openInEditor(projectCurrent)"
26+
/>
27+
28+
<VueDropdownButton
29+
:label="$t('org.vue.components.project-rename.title')"
30+
icon-left="edit"
31+
@click="showRename = true"
32+
/>
33+
34+
<VueDropdownButton
35+
v-if="projectCurrent.homepage"
36+
:href="projectCurrent.homepage"
37+
:label="$t('org.vue.components.top-bar.homepage')"
38+
target="_blank"
39+
icon-left="open_in_new"
40+
/>
41+
</template>
2042

21-
<VueDropdownButton
22-
:label="$t('org.vue.components.project-select-list-item.tooltips.open-in-editor')"
23-
icon-left="open_in_browser"
24-
@click="openInEditor(projectCurrent)"
25-
/>
43+
<div class="dropdown-separator"/>
2644

27-
<VueDropdownButton
28-
v-if="projectCurrent.homepage"
29-
:href="projectCurrent.homepage"
30-
:label="$t('org.vue.components.top-bar.homepage')"
31-
target="_blank"
32-
icon-left="open_in_new"
33-
/>
34-
</template>
45+
<!-- Favorites -->
3546

36-
<div class="dropdown-separator"/>
47+
<div v-if="!favoriteProjects.length" class="vue-ui-empty">{{ $t('org.vue.components.top-bar.no-favorites') }}</div>
3748

38-
<!-- Favorites -->
49+
<template v-else>
50+
<div class="section-title">
51+
{{ $t('org.vue.components.top-bar.favorite-projects') }}
52+
</div>
3953

40-
<div v-if="!favoriteProjects.length" class="vue-ui-empty">{{ $t('org.vue.components.top-bar.no-favorites') }}</div>
54+
<VueDropdownButton
55+
v-for="project of favoriteProjects"
56+
:key="project.id"
57+
:label="project.name"
58+
icon-left="star"
59+
@click="openProject(project)"
60+
/>
61+
</template>
4162

42-
<template v-else>
43-
<div class="section-title">
44-
{{ $t('org.vue.components.top-bar.favorite-projects') }}
45-
</div>
63+
<!-- Recents -->
4664

47-
<VueDropdownButton
48-
v-for="project of favoriteProjects"
49-
:key="project.id"
50-
:label="project.name"
51-
icon-left="star"
52-
@click="openProject(project)"
53-
/>
54-
</template>
65+
<template v-if="recentProjects.length">
66+
<div class="dropdown-separator"/>
5567

56-
<!-- Recents -->
68+
<div class="section-title">
69+
{{ $t('org.vue.components.top-bar.recent-projects') }}
70+
</div>
5771

58-
<template v-if="recentProjects.length">
59-
<div class="dropdown-separator"/>
72+
<VueDropdownButton
73+
v-for="project of recentProjects"
74+
:key="project.id"
75+
:label="project.name"
76+
icon-left="restore"
77+
@click="openProject(project)"
78+
/>
79+
</template>
6080

61-
<div class="section-title">
62-
{{ $t('org.vue.components.top-bar.recent-projects') }}
63-
</div>
81+
<div class="dropdown-separator"/>
6482

6583
<VueDropdownButton
66-
v-for="project of recentProjects"
67-
:key="project.id"
68-
:label="project.name"
69-
icon-left="restore"
70-
@click="openProject(project)"
84+
:to="{ name: 'project-select' }"
85+
:label="$t('org.vue.views.project-select.title')"
86+
icon-left="home"
7187
/>
72-
</template>
73-
74-
<div class="dropdown-separator"/>
88+
</VueDropdown>
7589

76-
<VueDropdownButton
77-
:to="{ name: 'project-select' }"
78-
:label="$t('org.vue.views.project-select.title')"
79-
icon-left="home"
90+
<ProjectRename
91+
v-if="showRename"
92+
:project="projectCurrent"
93+
@close="showRename = false"
8094
/>
81-
</VueDropdown>
95+
</div>
8296
</template>
8397

8498
<script>
@@ -90,12 +104,24 @@ import PROJECT_OPEN from '@/graphql/project/projectOpen.gql'
90104
import PROJECT_SET_FAVORITE from '@/graphql/project/projectSetFavorite.gql'
91105
import OPEN_IN_EDITOR from '@/graphql/file/fileOpenInEditor.gql'
92106
107+
import ProjectRename from '../project-manager/ProjectRename.vue'
108+
93109
export default {
110+
components: {
111+
ProjectRename
112+
},
113+
94114
apollo: {
95115
projectCurrent: PROJECT_CURRENT,
96116
projects: PROJECTS
97117
},
98118
119+
data () {
120+
return {
121+
showRename: false
122+
}
123+
},
124+
99125
computed: {
100126
favoriteProjects () {
101127
if (!this.projects) return []
@@ -154,6 +180,7 @@ export default {
154180

155181
<style lang="stylus" scoped>
156182
.current-project
183+
width 100%
157184
>>> .trigger
158185
.vue-ui-button
159186
.vue-ui-icon.right

‎packages/@vue/cli-ui/src/components/project-manager/ProjectRename.vue

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<VueModal
3+
:title="$t('org.vue.components.project-rename.title')"
4+
class="medium anchor"
5+
@close="$emit('close')"
6+
>
7+
<div class="default-body">
8+
<VueFormField
9+
:title="$t('org.vue.components.project-rename.name-field.title')"
10+
:subtitle="$t('org.vue.components.project-rename.name-field.subtitle')"
11+
>
12+
<VueInput
13+
v-model="newName"
14+
icon-left="folder"
15+
v-focus
16+
class="big"
17+
@keyup.enter="rename()"
18+
/>
19+
</VueFormField>
20+
</div>
21+
22+
<div slot="footer" class="actions">
23+
<VueButton
24+
:label="$t('org.vue.common.cancel')"
25+
class="flat big close"
26+
@click="$emit('close')"
27+
/>
28+
29+
<VueButton
30+
class="primary big"
31+
:label="$t('org.vue.components.project-rename.submit')"
32+
@click="rename()"
33+
/>
34+
</div>
35+
</VueModal>
36+
</template>
37+
38+
<script>
39+
import gql from 'graphql-tag'
40+
41+
export default {
42+
props: {
43+
project: {
44+
type: Object,
45+
required: true
46+
}
47+
},
48+
49+
data () {
50+
return {
51+
newName: this.project.name,
52+
loading: false
53+
}
54+
},
55+
56+
methods: {
57+
async rename () {
58+
this.loading = true
59+
60+
await this.$apollo.mutate({
61+
mutation: gql`
62+
mutation renameProject ($id: ID!, $name: String!) {
63+
projectRename (id: $id, name: $name) {
64+
id
65+
name
66+
}
67+
}
68+
`,
69+
variables: {
70+
id: this.project.id,
71+
name: this.newName
72+
}
73+
})
74+
75+
this.$emit('close')
76+
}
77+
}
78+
}
79+
</script>

‎packages/@vue/cli-ui/src/components/project-manager/ProjectSelectListItem.vue

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,13 @@
4444
@click.stop
4545
/>
4646

47+
<VueButton
48+
class="icon-button"
49+
icon-left="edit"
50+
v-tooltip="$t('org.vue.components.project-rename.title')"
51+
@click.stop="showRename = true"
52+
/>
53+
4754
<VueButton
4855
class="icon-button"
4956
icon-left="close"
@@ -53,20 +60,39 @@
5360
/>
5461
</div>
5562
</div>
63+
64+
<ProjectRename
65+
v-if="showRename"
66+
:project="project"
67+
@close="showRename = false"
68+
@click.native.stop
69+
/>
5670
</div>
5771
</template>
5872

5973
<script>
6074
import OPEN_IN_EDITOR from '@/graphql/file/fileOpenInEditor.gql'
6175
76+
import ProjectRename from './ProjectRename.vue'
77+
6278
export default {
79+
components: {
80+
ProjectRename
81+
},
82+
6383
props: {
6484
project: {
6585
type: Object,
6686
required: true
6787
}
6888
},
6989
90+
data () {
91+
return {
92+
showRename: false
93+
}
94+
},
95+
7096
methods: {
7197
async openInEditor () {
7298
await this.$apollo.mutate({

0 commit comments

Comments
 (0)