init: edit page

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

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