nocodb/packages/nc-gui/pages/project/edit.vue

<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>