I added a page to edit user, edit the user table to show more user in…

packages/nc-gui/components/account/EditAccount.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { iconMap, computed, message, navigateTo, reactive, ref, useApi, useGlobal, useI18n } from '#imports'
+
+const { api, error } = useApi({ useGlobalInstance: true })
+const { isLoading, user, currentVersion } = useGlobal()
+const { t } = useI18n()
+
+const username = user.value?.username
+const firstname = user.value?.firstname
+const lastname = user.value?.lastname
+
+
+
+const formValidator = ref()
+
+const form = reactive({
+  username: username,
+  lastname: lastname,
+  firstname: firstname,
+})
+
+const formRules = {
+  username: [
+    // Current password is required
+    { required: false, message: t('msg.error.signUpRules.passwdRequired') },
+  ],
+  lastname: [
+    // Password is required
+    { required: false, message: t('msg.error.signUpRules.passwdRequired') },
+  ],
+  firstname: [
+    // PasswordRepeat is required
+    { required: false, message: t('msg.error.signUpRules.passwdRequired') },
+    // Passwords match
+  ],
+}
+
+const userEdit = async () => {
+  const valid = formValidator.value.validate()
+  if (!valid) return
+
+  error.value = null
+
+  await api.orgUsers.userEdit({
+    username: form.username,
+    lastname: form.lastname,
+    firstname: form.firstname
+  })
+
+  message.success(t('msg.success.passwordChanged'))
+
+
+  navigateTo('/users/list')
+}
+
+const resetError = () => {
+  if (error.value) error.value = null
+}
+</script>
+
+<template>
+  <div class="mx-auto relative flex flex-col justify-start gap-2 w-full px-8 md:(bg-white) max-w-[900px]">
+    <div class="text-xl my-4 text-left font-weight-bold">{{ 'Edit User' }}</div>
+    <a-form
+      ref="formValidator"
+      data-testid="nc-user-settings-form"
+      layout="vertical"
+      class="change-password lg:max-w-3/4 w-full"
+      no-style
+      :model="form"
+      @finish="userEdit"
+    >
+      <Transition name="layout">
+        <div v-if="error" class="mx-auto mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1">
+          <div data-testid="nc-user-settings-form__error" class="flex items-center gap-2 justify-center">
+            <MaterialSymbolsWarning />
+            {{ error }}
+          </div>
+        </div>
+      </Transition>
+
+      <a-form-item :label="$t('Username')" name="username" :rules="formRules.username">
+        <a-input
+          v-model:value="form.username"
+          data-testid="nc-user-settings-form__username"
+          size="large"
+          class="text"
+          @focus="resetError"
+        />
+      </a-form-item>
+
+      <a-form-item :label="$t('Lastname')" name="lastname" :rules="formRules.lastname">
+        <a-input
+          v-model:value="form.lastname"
+          data-testid="nc-user-settings-form__lastname"
+          size="large"
+          class="text"
+          @focus="resetError"
+        />
+      </a-form-item>
+
+      <a-form-item :label="$t('Firstname')" name="firstname" :rules="formRules.firstname">
+        <a-input
+          v-model:value="form.firstname"
+          data-testid="nc-user-settings-form__firstname"
+          size="large"
+          class="text"
+          @focus="resetError"
+        />
+      </a-form-item>
+
+      <div class="text-right">
+        <a-button
+          size="middle"
+          data-testid="nc-user-settings-form__submit"
+          class="!rounded-md !h-[2.5rem]"
+          type="primary"
+          html-type="submit"
+        >
+          <div class="flex justify-center items-center gap-2">
+            {{ $t('activity.editUser') }}
+          </div>
+        </a-button>
+      </div>
+    </a-form>
+  </div>
+</template>
+
+<style lang="scss">
+.change-password {
+  .ant-input-affix-wrapper,
+  .ant-input {
+    @apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
+  }
+
+  .password {
+    input {
+      @apply !border-none !m-0;
+    }
+  }
+}
+</style>

packages/nc-gui/components/account/UserList.vue

@@ -183,6 +183,13 @@ const copyPasswordResetUrl = async (user: User) => {
             </div>
           </template>
         </a-table-column>
+        <a-table-column :title="$t('labels.username')" data-index="username">
+          <template #default="{ text }">
+            <div>
+              {{ text }}
+            </div>
+          </template>
+        </a-table-column>
 
         <!-- Role -->
         <a-table-column key="roles" :title="$t('objects.role')" data-index="roles">

packages/nc-gui/components/erd/TableNode.vue

@@ -16,7 +16,7 @@ const { data, showSkeleton, dragging } = defineProps<Props>()
 
 const { viewport } = useVueFlow()
 
-const table = toRef(data, 'table')
+const table = getter(data, 'table')
 
 const isZooming = refAutoReset(false, 200)
 

packages/nc-gui/components/tabs/auth/UserManagement.vue

@@ -258,6 +258,13 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
           <component :is="iconMap.email" class="flex text-gray-500 -mt-0.5" />
 
           <div class="text-gray-600 text-xs space-x-1">{{ $t('labels.email') }}</div>
+
+        </div>
+        <div class="flex flex-row w-3/6 space-x-1 items-center pl-1">
+          <component :is="iconMap.users" class="flex text-gray-500 -mt-0.5" />
+
+          <div class="text-gray-600 text-xs space-x-1">{{ $t('labels.username') }}</div>
+
         </div>
         <div class="flex flex-row justify-start w-2/6 space-x-1 items-center pl-1">
           <component :is="iconMap.role" class="flex text-gray-500 -mt-0.5" />
@@ -273,6 +280,9 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
         <div class="flex w-3/6 flex-wrap nc-user-email">
           {{ user.email }}
         </div>
+        <div class="flex w-3/6 flex-wrap nc-user-username">
+          {{ user.username }}
+        </div>
 
         <div class="flex w-2/6 justify-start gap-2 flex-wrap ml-4">
           <div

packages/nc-gui/composables/useGlobal/actions.ts

@@ -26,6 +26,7 @@ export function useGlobalActions(state: State): Actions {
       state.user.value = {
         id: state.jwtPayload.value.id,
         email: state.jwtPayload.value.email,
+        username: state.jwtPayload.value.username,
         firstname: state.jwtPayload.value.firstname,
         lastname: state.jwtPayload.value.lastname,
         roles: state.jwtPayload.value.roles,

packages/nc-gui/composables/useGlobal/index.ts

@@ -68,6 +68,7 @@ export const useGlobal = createGlobalState((): UseGlobalReturn => {
         state.user.value = {
           id: nextPayload.id,
           email: nextPayload.email,
+          username: nextPayload.username,
           firstname: nextPayload.firstname,
           lastname: nextPayload.lastname,
           roles: nextPayload.roles,

packages/nc-gui/lang/en.json

@@ -231,7 +231,7 @@
     "sqliteFile": "SQLite File",
     "hostAddress": "Host Address",
     "port": "Port Number",
-    "username": "Username",
+    "username": "Username", 
     "password": "Password",
     "schemaName": "Schema name",
     "database": "Database",

packages/nc-gui/lib/types.ts

@@ -8,6 +8,7 @@ import type { rolePermissions } from './constants'
 export interface User {
   id: string
   email: string
+  username:string | null
   firstname: string | null
   lastname: string | null
   roles: Roles | string