feat(admin): add edit flows for all catalogs and member authentik sync

frontend/src/pages/admin/CompaniesPage.vue

@@ -5,38 +5,48 @@
       <el-button type="primary" @click="showDialog = true" :icon="Plus">新增公司</el-button>
     </div>
 
-    <el-alert
-      v-if="error"
-      :title="errorMsg"
-      type="error"
-      show-icon
-      :closable="false"
-      class="mb-4"
-    />
-
+    <el-alert v-if="error" :title="errorMsg" type="error" show-icon :closable="false" class="mb-4" />
     <el-skeleton v-if="loading" :rows="4" animated />
 
     <el-table v-else :data="companies" stripe border class="w-full shadow-sm">
       <template #empty><el-empty description="目前無公司" /></template>
-      <el-table-column prop="company_key" label="Company Key" width="200" />
-      <el-table-column prop="name" label="名稱" min-width="180" />
+      <el-table-column prop="company_key" label="Company Key" width="220" />
+      <el-table-column prop="name" label="名稱" min-width="200" />
+      <el-table-column prop="status" label="狀態" width="120" />
+      <el-table-column label="操作" width="120">
+        <template #default="{ row }">
+          <el-button size="small" @click="openEdit(row)">編輯</el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
-    <!-- 新增 Dialog -->
     <el-dialog v-model="showDialog" title="新增公司" @close="resetForm">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="Company Key" prop="company_key">
-          <el-input v-model="form.company_key" placeholder="company-001" />
-        </el-form-item>
-        <el-form-item label="名稱" prop="name">
-          <el-input v-model="form.name" placeholder="公司名稱" />
-        </el-form-item>
+        <el-form-item label="Company Key" prop="company_key"><el-input v-model="form.company_key" /></el-form-item>
+        <el-form-item label="名稱" prop="name"><el-input v-model="form.name" /></el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="showDialog = false">取消</el-button>
         <el-button type="primary" :loading="submitting" @click="handleCreate">確認</el-button>
       </template>
     </el-dialog>
+
+    <el-dialog v-model="showEditDialog" title="編輯公司" @close="resetEditForm">
+      <el-form :model="editForm" label-width="100px">
+        <el-form-item label="Company Key"><el-input :model-value="editForm.company_key" disabled /></el-form-item>
+        <el-form-item label="名稱"><el-input v-model="editForm.name" /></el-form-item>
+        <el-form-item label="狀態">
+          <el-select v-model="editForm.status" style="width: 100%">
+            <el-option label="active" value="active" />
+            <el-option label="inactive" value="inactive" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showEditDialog = false">取消</el-button>
+        <el-button type="primary" :loading="savingEdit" @click="handleEdit">儲存</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -44,7 +54,7 @@
 import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
-import { getCompanies, createCompany } from '@/api/companies'
+import { getCompanies, createCompany, updateCompany } from '@/api/companies'
 
 const companies = ref([])
 const loading = ref(false)
@@ -52,9 +62,12 @@ const error = ref(false)
 const errorMsg = ref('')
 const showDialog = ref(false)
 const submitting = ref(false)
+const showEditDialog = ref(false)
+const savingEdit = ref(false)
 const formRef = ref()
 
 const form = ref({ company_key: '', name: '' })
+const editForm = ref({ company_key: '', name: '', status: 'active' })
 const rules = {
   company_key: [{ required: true, message: '請輸入 Company Key', trigger: 'blur' }],
   name: [{ required: true, message: '請輸入名稱', trigger: 'blur' }]
@@ -80,6 +93,15 @@ function resetForm() {
   form.value = { company_key: '', name: '' }
 }
 
+function openEdit(row) {
+  editForm.value = { company_key: row.company_key, name: row.name, status: row.status || 'active' }
+  showEditDialog.value = true
+}
+
+function resetEditForm() {
+  editForm.value = { company_key: '', name: '', status: 'active' }
+}
+
 async function handleCreate() {
   const valid = await formRef.value.validate().catch(() => false)
   if (!valid) return
@@ -91,11 +113,25 @@ async function handleCreate() {
     resetForm()
     await load()
   } catch (err) {
-    ElMessage.error('新增失敗，請稍後再試')
+    ElMessage.error('新增失敗')
   } finally {
     submitting.value = false
   }
 }
 
+async function handleEdit() {
+  savingEdit.value = true
+  try {
+    await updateCompany(editForm.value.company_key, { name: editForm.value.name, status: editForm.value.status })
+    ElMessage.success('更新成功')
+    showEditDialog.value = false
+    await load()
+  } catch (err) {
+    ElMessage.error('更新失敗')
+  } finally {
+    savingEdit.value = false
+  }
+}
+
 onMounted(load)
 </script>