feat: table

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

@@ -12,7 +12,11 @@ const { copy } = useCopy()
 
 const { t } = useI18n()
 
-const tokens = ref<ApiTokenType[]>([])
+interface IApiTokenInfo extends ApiTokenType {
+  created_by: string
+}
+
+const tokens = ref<IApiTokenInfo[]>([])
 
 const currentPage = ref(1)
 
@@ -42,7 +46,7 @@ const loadTokens = async (page = currentPage.value, limit = currentLimit.value)
     pagination.total = response.pageInfo.totalRows ?? 0
     pagination.pageSize = 10
 
-    tokens.value = response.list as ApiTokenType[]
+    tokens.value = response.list as IApiTokenInfo[]
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -115,44 +119,46 @@ const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
         </NcButton>
       </div>
       <span>Create personal API tokens to use in automation or external apps.</span>
-      <table class="w-full mt-5 border-1 rounded-md">
-        <thead class="bg-gray-50">
-          <tr>
-            <th class="px-3 py-3.5 text-gray-500 font-medium text-3.5">Token name</th>
-            <th class="px-3 py-3.5 text-gray-500 font-medium text-3.5">Creator</th>
-            <th class="px-3 py-3.5 text-gray-500 font-medium text-3.5">Token</th>
-            <th class="px-3 py-3.5 text-gray-500 font-medium text-3.5">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-if="showNewTokenModal">
-            <td class="px-3 py-3.5 text-gray-500 font-medium text-3.5 text-center" colspan="3">
-              <div class="p-5 ml-4">
-                <a-input
-                  :ref="descriptionInput"
-                  v-model:value="selectedTokenData.description"
-                  type="text"
-                  class="!rounded-lg !py-2"
-                  placeholder="Token Name"
-                  data-testid="nc-token-modal-description"
-                />
-              </div>
-            </td>
-            <td class="text-gray-500 font-medium text-3.5 text-center">
-              <div class="flex gap-2 justify-center">
-                <NcButton v-if="!isLoading" type="secondary" size="sm" @click="showNewTokenModal = false"> Cancel </NcButton>
-                <NcButton type="primary" size="sm" :is-loading="isLoading" @click="generateToken"> Save </NcButton>
+      <div class="w-full mt-5 border-1 rounded-md">
+        <div class="flex w-full px-4 bg-gray-50 border-b-1">
+          <span class="px-3 py-3.5 text-gray-500 font-medium text-3.5 w-1/6">Token name</span>
+          <span class="px-3 py-3.5 text-gray-500 font-medium text-3.5 w-1/4 text-center">Creator</span>
+          <span class="px-3 py-3.5 text-gray-500 font-medium text-3.5 w-1/6 ml-12 text-center">Token</span>
+          <span class="px-3 py-3.5 text-gray-500 font-medium text-3.5 w-1/4 ml-20 text-center">Actions</span>
+        </div>
+        <main>
+          <div v-if="showNewTokenModal" class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full">
+            <a-input
+              :ref="descriptionInput"
+              v-model:value="selectedTokenData.description"
+              type="text"
+              class="!rounded-lg !py-2"
+              placeholder="Token Name"
+              data-testid="nc-token-modal-description"
+            />
+            <div class="flex gap-2 justify-start mr-10">
+              <NcButton v-if="!isLoading" type="secondary" size="small" @click="showNewTokenModal = false"> Cancel </NcButton>
+              <NcButton type="primary" size="sm" :is-loading="isLoading" @click="generateToken"> Save </NcButton>
+            </div>
+          </div>
+          <div v-for="el of tokens" :key="el.id" class="flex border-b-1 px-7 py-3 justify-between">
+            <span class="text-gray-500 font-medium text-3.5 text-start w-1/8 ml-3">{{ el.description }}</span>
+            <span class="text-gray-500 font-medium text-3.5 text-start w-1/4">{{ el.created_by }}</span>
+            <span class="text-gray-500 font-medium text-3.5 text-start w-1/4">
+              <GeneralTruncateText placement="top" length="22">
+                {{ el.token }}
+              </GeneralTruncateText>
+            </span>
+            <span class="text-gray-500 font-medium text-3.5 text-start w-1/4 text-center">
+              <div class="flex justify-center gap-3">
+                <component :is="iconMap.eyeSlash" class="hover::cursor-pointer" />
+                <component :is="iconMap.copy" class="hover::cursor-pointer" />
+                <component :is="iconMap.delete" class="hover::cursor-pointer" />
               </div>
-            </td>
-          </tr>
-          <tr v-for="el of tokens" :key="el.id">
-            <td class="px-3 py-3.5 text-gray-500 font-medium text-3.5 text-center">{{ el.description }}</td>
-            <td class="px-3 py-3.5 text-gray-500 font-medium text-3.5 text-center">{{ el.fk_user_id }}</td>
-            <td class="px-3 py-3.5 text-gray-500 font-medium text-3.5 text-center">{{ el.token }}</td>
-            <td class="px-3 py-3.5 text-gray-500 font-medium text-3.5 text-center">Tljghdfjghdfj</td>
-          </tr>
-        </tbody>
-      </table>
+            </span>
+          </div>
+        </main>
+      </div>
     </div>
 
     <GeneralDeleteModal v-model:visible="isModalOpen" entity-name="Token" :on-delete="() => deleteToken(tokenToCopy)">