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: 0.75rem;
}

.wrapper {
  border: 2px solid var(--v-backgroundColor-base);
  border-radius: 4px;
}

.main {
  height: calc(100vh - 48px);
}
</style>