From 5dd759d2cb580abd20ab39cf4723f771666313f2 Mon Sep 17 00:00:00 2001
From: Chris <wtc.justin82@gmail.com>
Date: Mon, 30 Mar 2026 03:33:50 +0800
Subject: [PATCH] feat(flow): auto-resolve authentik sub and improve admin
 dropdown UX

---
 src/pages/admin/MembersPage.vue               |  5 +----
 src/pages/admin/ModulesPage.vue               | 11 +++++++---
 src/pages/admin/PermissionGroupsPage.vue      | 21 +++++++++++++++----
 src/pages/permissions/PermissionAdminPage.vue |  8 +++++--
 4 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/pages/admin/MembersPage.vue b/src/pages/admin/MembersPage.vue
index f98a0ef..79e2ca4 100644
--- a/src/pages/admin/MembersPage.vue
+++ b/src/pages/admin/MembersPage.vue
@@ -28,7 +28,6 @@
 
     <el-dialog v-model="showCreateDialog" title="新增會員" @close="resetCreateForm">
       <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="120px">
-        <el-form-item label="Authentik Sub" prop="authentik_sub"><el-input v-model="createForm.authentik_sub" /></el-form-item>
         <el-form-item label="Email" prop="email"><el-input v-model="createForm.email" /></el-form-item>
         <el-form-item label="顯示名稱" prop="display_name"><el-input v-model="createForm.display_name" /></el-form-item>
         <el-form-item label="啟用"><el-switch v-model="createForm.is_active" /></el-form-item>
@@ -71,14 +70,13 @@ const showCreateDialog = ref(false)
 const createFormRef = ref()
 const creating = ref(false)
 const createForm = ref({
-  authentik_sub: '',
   email: '',
   display_name: '',
   is_active: true,
   sync_to_authentik: true
 })
 const createRules = {
-  authentik_sub: [{ required: true, message: '請輸入 Authentik Sub', trigger: 'blur' }]
+  email: [{ required: true, message: '請輸入 Email', trigger: 'blur' }]
 }
 
 const showEditDialog = ref(false)
@@ -107,7 +105,6 @@ async function load() {
 
 function resetCreateForm() {
   createForm.value = {
-    authentik_sub: '',
     email: '',
     display_name: '',
     is_active: true,
diff --git a/src/pages/admin/ModulesPage.vue b/src/pages/admin/ModulesPage.vue
index 8a5aff0..f913b57 100644
--- a/src/pages/admin/ModulesPage.vue
+++ b/src/pages/admin/ModulesPage.vue
@@ -32,7 +32,9 @@
     <el-dialog v-model="showDialog" title="新增模組" @close="resetForm">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="System Key" prop="system_key">
-          <el-input v-model="form.system_key" placeholder="mkt" />
+          <el-select v-model="form.system_key" placeholder="選擇系統" filterable style="width: 100%">
+            <el-option v-for="s in systems" :key="s.system_key" :label="`${s.name} (${s.system_key})`" :value="s.system_key" />
+          </el-select>
         </el-form-item>
         <el-form-item label="Module Key" prop="module_key">
           <el-input v-model="form.module_key" placeholder="campaign" />
@@ -75,8 +77,10 @@ import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import { getModules, createModule, updateModule } from '@/api/modules'
+import { getSystems } from '@/api/systems'
 
 const modules = ref([])
+const systems = ref([])
 const loading = ref(false)
 const error = ref(false)
 const errorMsg = ref('')
@@ -98,8 +102,9 @@ async function load() {
   loading.value = true
   error.value = false
   try {
-    const res = await getModules()
-    modules.value = res.data?.items || []
+    const [modulesRes, systemsRes] = await Promise.all([getModules(), getSystems()])
+    modules.value = modulesRes.data?.items || []
+    systems.value = systemsRes.data?.items || []
   } catch (err) {
     error.value = true
     errorMsg.value = err.response?.status === 422
diff --git a/src/pages/admin/PermissionGroupsPage.vue b/src/pages/admin/PermissionGroupsPage.vue
index 39cd342..51cf4df 100644
--- a/src/pages/admin/PermissionGroupsPage.vue
+++ b/src/pages/admin/PermissionGroupsPage.vue
@@ -36,7 +36,14 @@
               </el-select>
             </el-form-item>
             <el-form-item label="Authentik Sub">
-              <el-input v-model="memberForm.authentikSub" placeholder="authentik-sub-xxx" />
+              <el-select v-model="memberForm.authentikSub" placeholder="選擇會員" filterable allow-create default-first-option style="width: 100%">
+                <el-option
+                  v-for="m in members"
+                  :key="m.authentik_sub"
+                  :label="`${m.display_name || m.email || '(no-name)'} (${m.authentik_sub})`"
+                  :value="m.authentik_sub"
+                />
+              </el-select>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" :loading="addingMember" @click="handleAddMember" :disabled="!memberForm.groupKey || !memberForm.authentikSub">
@@ -177,12 +184,14 @@ import { getSystems } from '@/api/systems'
 import { getModules } from '@/api/modules'
 import { getCompanies } from '@/api/companies'
 import { getSites } from '@/api/sites'
+import { getMembers } from '@/api/members'
 
 const activeTab = ref('groups')
 const systems = ref([])
 const modules = ref([])
 const companies = ref([])
 const sites = ref([])
+const members = ref([])
 const actionOptions = ['view', 'edit', 'manage', 'admin']
 
 const filteredModuleOptions = computed(() => {
@@ -190,7 +199,9 @@ const filteredModuleOptions = computed(() => {
   return modules.value
     .filter(m => m.system_key === groupPermForm.system && !m.module_key.endsWith('.__system__'))
     .map(m => ({
-      value: m.module_key.split('.', 2)[1] || m.module_key,
+      value: m.module_key.startsWith(`${groupPermForm.system}.`)
+        ? m.module_key.slice(groupPermForm.system.length + 1)
+        : m.module_key,
       label: `${m.name} (${m.module_key})`
     }))
 })
@@ -226,16 +237,18 @@ async function loadGroups() {
 }
 
 async function loadCatalogs() {
-  const [systemsRes, modulesRes, companiesRes, sitesRes] = await Promise.all([
+  const [systemsRes, modulesRes, companiesRes, sitesRes, membersRes] = await Promise.all([
     getSystems(),
     getModules(),
     getCompanies(),
-    getSites()
+    getSites(),
+    getMembers()
   ])
   systems.value = systemsRes.data?.items || []
   modules.value = modulesRes.data?.items || []
   companies.value = companiesRes.data?.items || []
   sites.value = sitesRes.data?.items || []
+  members.value = membersRes.data?.items || []
 }
 
 // Create Group
diff --git a/src/pages/permissions/PermissionAdminPage.vue b/src/pages/permissions/PermissionAdminPage.vue
index 1710cfd..0dbc4ac 100644
--- a/src/pages/permissions/PermissionAdminPage.vue
+++ b/src/pages/permissions/PermissionAdminPage.vue
@@ -199,7 +199,9 @@ const grantModuleOptions = computed(() => {
   return modules.value
     .filter(m => m.system_key === grantForm.system && !m.module_key.endsWith('.__system__'))
     .map(m => ({
-      value: m.module_key.split('.', 2)[1] || m.module_key,
+      value: m.module_key.startsWith(`${grantForm.system}.`)
+        ? m.module_key.slice(grantForm.system.length + 1)
+        : m.module_key,
       label: `${m.name} (${m.module_key})`
     }))
 })
@@ -268,7 +270,9 @@ const revokeModuleOptions = computed(() => {
   return modules.value
     .filter(m => m.system_key === revokeForm.system && !m.module_key.endsWith('.__system__'))
     .map(m => ({
-      value: m.module_key.split('.', 2)[1] || m.module_key,
+      value: m.module_key.startsWith(`${revokeForm.system}.`)
+        ? m.module_key.slice(revokeForm.system.length + 1)
+        : m.module_key,
       label: `${m.name} (${m.module_key})`
     }))
 })