mirror of https://github.com/nocodb/nocodb
1 changed files with 145 additions and 0 deletions
@ -0,0 +1,145 @@
|
||||
<template> |
||||
<div class="main justify-center d-flex" style="min-height: 600px;overflow: auto"> |
||||
<v-form ref="form" v-model="valid" @submit.prevent="renameProject"> |
||||
<v-card style="width:530px;margin-top: 100px" class="mx-auto"> |
||||
<div |
||||
style="position: absolute;top:-33px; |
||||
left:-moz-calc(50% - 33px); |
||||
left:-webkit-calc(50% - 33px); |
||||
left:calc(50% - 33px); |
||||
border-radius: 15px; |
||||
" |
||||
class="primary" |
||||
> |
||||
<v-img |
||||
class="mx-auto" |
||||
width="66" |
||||
height="66" |
||||
:src="require('~/assets/img/icons/512x512-trans.png')" |
||||
/> |
||||
</div> |
||||
|
||||
<v-container fluid class="pb-10 px-12" style="padding-top: 43px !important;"> |
||||
<!-- Edit Project --> |
||||
<h1 class="mt-4 mb-4 text-center"> |
||||
{{ $t('activity.editProject') }} |
||||
</h1> |
||||
<div class="mx-auto" style="width:350px"> |
||||
<!-- label="Enter Project Name" --> |
||||
<!-- rule text: Required --> |
||||
<v-text-field |
||||
ref="projectTitleInput" |
||||
v-model="projectTitle" |
||||
autofocus |
||||
:full-width="false" |
||||
class="nc-metadb-project-name" |
||||
:label="$t('placeholder.projName')" |
||||
:rules="form.titleValidationRule" |
||||
/> |
||||
</div> |
||||
<div class="text-center"> |
||||
<v-btn |
||||
v-t="['a:project:edit:rename']" |
||||
class="mt-3" |
||||
large |
||||
:loading="loading" |
||||
color="primary" |
||||
@click="renameProject" |
||||
> |
||||
<v-icon class="mr-1 mt-n1"> |
||||
mdi-rocket-launch-outline |
||||
</v-icon> |
||||
<!-- Edit --> |
||||
<span class="mr-1">{{ $t('general.edit') }}</span> |
||||
</v-btn> |
||||
</div> |
||||
</v-container> |
||||
</v-card> |
||||
</v-form> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import colors from '@/mixins/colors' |
||||
|
||||
export default { |
||||
name: 'EditProject', |
||||
mixins: [colors], |
||||
data: () => ({ |
||||
valid: null, |
||||
projectTitle: '', |
||||
loading: false, |
||||
projectType: 'rest', |
||||
form: { |
||||
titleValidationRule: [ |
||||
v => !!v || 'Title is required', |
||||
v => v && v.length <= 50 || 'Project name exceeds 50 characters', |
||||
], |
||||
}, |
||||
}), |
||||
computed: { |
||||
pid() { |
||||
return this.$route.query.projectId |
||||
}, |
||||
}, |
||||
async mounted() { |
||||
setTimeout(() => { |
||||
this.$refs.projectTitleInput.$el.querySelector('input').focus() |
||||
}, 100) |
||||
await this.getProject(this.pid) |
||||
}, |
||||
methods: { |
||||
async getProject() { |
||||
try { |
||||
const result = (await this.$api.project.read(this.pid)) |
||||
this.$nextTick(() => { |
||||
this.projectTitle = result.title |
||||
}) |
||||
} catch (e) { |
||||
this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000) |
||||
} |
||||
}, |
||||
async renameProject() { |
||||
if (this.$refs.form.validate()) { |
||||
this.loading = true |
||||
try { |
||||
await this.$api.project.update(this.pid, { |
||||
title: this.projectTitle |
||||
}) |
||||
|
||||
await this.$store.dispatch('project/ActLoadProjectInfo') |
||||
|
||||
this.projectReloading = false |
||||
|
||||
this.$router.push({ |
||||
path: `/nc/${this.pid}`, |
||||
query: { |
||||
new: 1 |
||||
} |
||||
}) |
||||
} catch (e) { |
||||
this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000) |
||||
} |
||||
this.loading = false |
||||
} else { |
||||
this.$toast.error('Invalid Form') |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
/deep/ label { |
||||
font-size: .75rem; |
||||
} |
||||
|
||||
.wrapper { |
||||
border: 2px solid var(--v-backgroundColor-base); |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.main { |
||||
height: calc(100vh - 48px) |
||||
} |
||||
</style> |
Loading…
Reference in new issue