mirror of https://github.com/veypi/OneAuth.git
feat: 重构组织详情页UI和权限控制
veypi
1 week ago
parent
178fa755d4
commit
800d7fd4fd
@ -1,165 +1,447 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta name="description" content="Org Detail">
|
<meta name="description" content="Org Detail">
|
||||||
<title>{{ $t('org.detail') }}</title>
|
<title>{{ org ? org.name : ($t('org.detail') || 'Organization Detail') }}</title>
|
||||||
<style>
|
<style>
|
||||||
.page-header {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
align-items: center;
|
gap: var(--spacing-lg);
|
||||||
margin-bottom: 20px;
|
}
|
||||||
}
|
|
||||||
.section {
|
.page-header {
|
||||||
background: #fff;
|
display: flex;
|
||||||
padding: 20px;
|
justify-content: space-between;
|
||||||
border-radius: var(--radius-md);
|
align-items: center;
|
||||||
box-shadow: var(--shadow-sm);
|
flex-wrap: wrap;
|
||||||
margin-bottom: 20px;
|
gap: var(--spacing-md);
|
||||||
}
|
}
|
||||||
.section-title {
|
|
||||||
font-size: 18px;
|
.header-left {
|
||||||
font-weight: bold;
|
display: flex;
|
||||||
margin-bottom: 15px;
|
align-items: center;
|
||||||
color: var(--text-color);
|
gap: var(--spacing-md);
|
||||||
}
|
}
|
||||||
.info-grid {
|
|
||||||
display: grid;
|
.btn-back {
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
display: flex;
|
||||||
gap: 20px;
|
align-items: center;
|
||||||
}
|
justify-content: center;
|
||||||
.info-item {
|
width: 36px;
|
||||||
display: flex;
|
height: 36px;
|
||||||
flex-direction: column;
|
border-radius: var(--radius-md);
|
||||||
gap: 5px;
|
background: var(--bg-color-tertiary);
|
||||||
}
|
color: var(--text-color);
|
||||||
.info-label {
|
border: 1px solid var(--border-color);
|
||||||
font-size: 14px;
|
cursor: pointer;
|
||||||
color: var(--text-color-secondary);
|
transition: all var(--transition-fast);
|
||||||
}
|
}
|
||||||
.info-value {
|
|
||||||
font-size: 16px;
|
.btn-back:hover {
|
||||||
font-weight: 500;
|
background: var(--border-color);
|
||||||
}
|
}
|
||||||
.btn-danger {
|
|
||||||
background-color: var(--color-danger);
|
.header-actions {
|
||||||
color: white;
|
display: flex;
|
||||||
padding: 8px 16px;
|
gap: var(--spacing-sm);
|
||||||
border-radius: var(--radius-md);
|
}
|
||||||
cursor: pointer;
|
|
||||||
border: none;
|
.section {
|
||||||
}
|
background: var(--bg-color-secondary);
|
||||||
.btn-edit {
|
padding: var(--spacing-lg);
|
||||||
background-color: var(--color-info);
|
border-radius: var(--radius-lg);
|
||||||
color: white;
|
box-shadow: var(--shadow-sm);
|
||||||
padding: 8px 16px;
|
border: 1px solid var(--border-color);
|
||||||
border-radius: var(--radius-md);
|
}
|
||||||
cursor: pointer;
|
|
||||||
border: none;
|
.section-title {
|
||||||
}
|
font-size: var(--font-size-lg);
|
||||||
table {
|
font-weight: 600;
|
||||||
width: 100%;
|
margin-bottom: var(--spacing-md);
|
||||||
border-collapse: collapse;
|
color: var(--text-color);
|
||||||
}
|
display: flex;
|
||||||
th, td {
|
align-items: center;
|
||||||
text-align: left;
|
gap: var(--spacing-sm);
|
||||||
padding: 10px;
|
}
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
}
|
.info-grid {
|
||||||
th {
|
display: grid;
|
||||||
background-color: var(--bg-color-tertiary);
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
font-weight: 600;
|
gap: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: var(--font-size-md);
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-icon-large {
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-header-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-lg);
|
||||||
|
margin-bottom: var(--spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-header-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-header-name {
|
||||||
|
font-size: var(--font-size-2xl);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-header-desc {
|
||||||
|
font-size: var(--font-size-md);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Members Table */
|
||||||
|
.members-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: var(--spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
text-align: left;
|
||||||
|
padding: var(--spacing-sm) var(--spacing-md);
|
||||||
|
border-bottom: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: var(--bg-color-tertiary);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
font-size: var(--font-size-md);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover td {
|
||||||
|
background-color: var(--bg-color-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--spacing-xs) var(--spacing-sm);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: var(--font-size-xs);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-admin {
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
color: var(--color-primary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.role-member {
|
||||||
|
background-color: var(--bg-color-tertiary);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 3px solid var(--border-color);
|
||||||
|
border-top-color: var(--color-primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: var(--spacing-lg);
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state i {
|
||||||
|
font-size: 48px;
|
||||||
|
color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<!-- Loading State -->
|
||||||
|
<div class="loading-state" v-if="loading">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
<span>{{ $t('common.loading') || 'Loading...' }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template v:if="!loading && org">
|
||||||
|
<!-- Page Header -->
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{ org ? org.name : 'Loading...' }}</h1>
|
<div class="header-left">
|
||||||
<div class="actions">
|
<button class="btn-back" @click="goBack" title="{{ $t('common.back') || 'Back' }}">
|
||||||
<button class="btn-edit" @click="editOrg">{{ $t('common.edit') }}</button>
|
<i class="fas fa-arrow-left"></i>
|
||||||
<button class="btn-danger" @click="deleteOrg">{{ $t('common.delete') }}</button>
|
</button>
|
||||||
</div>
|
<h1>{{ $t('org.detail') || 'Organization Detail' }}</h1>
|
||||||
|
</div>
|
||||||
|
<div class="header-actions">
|
||||||
|
<v-btn variant="outline" :click="openEditModal">
|
||||||
|
<i class="fas fa-edit"></i>
|
||||||
|
{{ $t('common.edit') || 'Edit' }}
|
||||||
|
</v-btn>
|
||||||
|
<v-btn color="danger" :click="deleteOrg">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
{{ $t('common.delete') || 'Delete' }}
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Org Info Section -->
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">{{ $t('org.info') }}</div>
|
<div class="org-header-info">
|
||||||
<div class="info-grid" v-if="org">
|
<div class="org-icon-large">{{ org.name ? org.name.charAt(0).toUpperCase() : 'O' }}</div>
|
||||||
<div class="info-item">
|
<div class="org-header-text">
|
||||||
<span class="info-label">ID</span>
|
<div class="org-header-name">{{ org.name }}</div>
|
||||||
<span class="info-value">{{ org.id }}</span>
|
<div class="org-header-desc">{{ org.description || ($t('org.no_description') || 'No description') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-item">
|
</div>
|
||||||
<span class="info-label">Name</span>
|
|
||||||
<span class="info-value">{{ org.name }}</span>
|
<div class="info-grid">
|
||||||
</div>
|
<div class="info-item">
|
||||||
<div class="info-item">
|
<span class="info-label">ID</span>
|
||||||
<span class="info-label">Created At</span>
|
<span class="info-value">{{ org.id }}</span>
|
||||||
<span class="info-value">{{ new Date(org.created_at).toLocaleDateString() }}</span>
|
</div>
|
||||||
</div>
|
<div class="info-item">
|
||||||
|
<span class="info-label">{{ $t('org.created_at') || 'Created At' }}</span>
|
||||||
|
<span class="info-value">{{ formatDate(org.created_at) }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="info-item" v:if="org.updated_at">
|
||||||
|
<span class="info-label">{{ $t('org.updated_at') || 'Updated At' }}</span>
|
||||||
|
<span class="info-value">{{ formatDate(org.updated_at) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Members Section -->
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<div class="section-title">{{ $t('org.members') }}</div>
|
<div class="members-header">
|
||||||
<table>
|
<div class="section-title">
|
||||||
<thead>
|
<i class="fas fa-users"></i>
|
||||||
<tr>
|
{{ $t('org.members') || 'Members' }}
|
||||||
<th>Username</th>
|
<span style="font-size: var(--font-size-sm); color: var(--text-color-tertiary);">({{ members.length }})</span>
|
||||||
<th>Role</th>
|
</div>
|
||||||
<th>Actions</th>
|
</div>
|
||||||
</tr>
|
|
||||||
</thead>
|
<div class="empty-state" v:if="members.length === 0">
|
||||||
<tbody>
|
<i class="fas fa-user-slash"></i>
|
||||||
<tr v-for="member in members">
|
<p>{{ $t('org.no_members') || 'No members yet' }}</p>
|
||||||
<td>{{ member.username }}</td>
|
</div>
|
||||||
<td>{{ member.role }}</td>
|
|
||||||
<td>
|
<table v:if="members.length > 0">
|
||||||
<button class="btn-sm btn-danger" @click="removeMember(member.id)">Remove</button>
|
<thead>
|
||||||
</td>
|
<tr>
|
||||||
</tr>
|
<th>{{ $t('user.username') || 'Username' }}</th>
|
||||||
</tbody>
|
<th>{{ $t('user.email') || 'Email' }}</th>
|
||||||
</table>
|
<th>{{ $t('user.role') || 'Role' }}</th>
|
||||||
|
<th>{{ $t('common.actions') || 'Actions' }}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v:for="member in members">
|
||||||
|
<td>{{ member.username }}</td>
|
||||||
|
<td>{{ member.email || '-' }}</td>
|
||||||
|
<td>
|
||||||
|
<span class="role-badge" :class="member.role === 'admin' ? 'role-admin' : 'role-member'">
|
||||||
|
{{ member.role || 'member' }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<v-btn size="sm" color="danger" variant="outline" :click="() => removeMember(member)"
|
||||||
|
v:if="member.id !== currentUserId">
|
||||||
|
<i class="fas fa-user-minus"></i>
|
||||||
|
{{ $t('org.remove_member') || 'Remove' }}
|
||||||
|
</v-btn>
|
||||||
|
<span v:else style="color: var(--text-color-tertiary); font-size: var(--font-size-sm);">
|
||||||
|
{{ $t('org.you') || 'You' }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Edit Dialog -->
|
||||||
|
<v-dialog v:visible="showEditModal" title="{{ $t('org.edit') || 'Edit Organization' }}">
|
||||||
|
<v-input type="text" v:value="editForm.name" label="{{ $t('org.name') || 'Organization Name' }}" required
|
||||||
|
placeholder="{{ $t('org.name_placeholder') || 'Enter organization name' }}">
|
||||||
|
</v-input>
|
||||||
|
<v-input type="textarea" v:value="editForm.description" label="{{ $t('org.description') || 'Description' }}"
|
||||||
|
placeholder="{{ $t('org.desc_placeholder') || 'Enter organization description (optional)' }}">
|
||||||
|
</v-input>
|
||||||
|
<div vslot="footer">
|
||||||
|
<v-btn variant="outline" :click="closeEditModal">{{ $t('common.cancel') || 'Cancel' }}</v-btn>
|
||||||
|
<v-btn color="primary" :disabled="!editForm.name" :click="saveOrg">
|
||||||
|
{{ $t('common.save') || 'Save' }}
|
||||||
|
</v-btn>
|
||||||
</div>
|
</div>
|
||||||
|
</v-dialog>
|
||||||
</body>
|
</body>
|
||||||
<script setup>
|
<script setup>
|
||||||
orgId = $router.params.id;
|
orgId = $router.params.id;
|
||||||
org = null;
|
org = null;
|
||||||
members = [];
|
members = [];
|
||||||
|
loading = false;
|
||||||
loadData = async () => {
|
currentUserId = $env.$vbase.user?.id;
|
||||||
try {
|
|
||||||
const [orgRes, membersRes] = await Promise.all([
|
|
||||||
$axios.get(`/api/orgs/${orgId}`),
|
|
||||||
$axios.get(`/api/orgs/${orgId}/members`)
|
|
||||||
]);
|
|
||||||
org = orgRes;
|
|
||||||
members = membersRes || [];
|
|
||||||
} catch (e) {
|
|
||||||
$message.error(e.message);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
editOrg = () => {
|
// Edit modal state
|
||||||
$message.info("Edit feature coming soon");
|
showEditModal = false;
|
||||||
};
|
editForm = {
|
||||||
|
name: "",
|
||||||
|
description: ""
|
||||||
|
};
|
||||||
|
|
||||||
deleteOrg = async () => {
|
loadData = async () => {
|
||||||
try {
|
loading = true;
|
||||||
await $message.confirm("Are you sure you want to delete this organization?");
|
try {
|
||||||
await $axios.delete(`/api/orgs/${orgId}`);
|
const [orgRes, membersRes] = await Promise.all([
|
||||||
$message.success("Deleted");
|
$axios.get(`/api/orgs/${orgId}`),
|
||||||
$router.push('/org');
|
$axios.get(`/api/orgs/${orgId}/members`)
|
||||||
} catch (e) {
|
]);
|
||||||
// Cancelled or error
|
org = orgRes;
|
||||||
}
|
members = membersRes || [];
|
||||||
};
|
} catch (e) {
|
||||||
|
$message.error(e.message);
|
||||||
|
if (e.status === 404) {
|
||||||
|
$router.push('/org');
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
formatDate = (dateStr) => {
|
||||||
|
if (!dateStr) return '-';
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
return date.toLocaleString();
|
||||||
|
};
|
||||||
|
|
||||||
removeMember = async (userId) => {
|
goBack = () => {
|
||||||
// Implement remove logic
|
$router.back();
|
||||||
$message.info("Remove member feature coming soon");
|
};
|
||||||
|
|
||||||
|
// Edit modal
|
||||||
|
openEditModal = () => {
|
||||||
|
editForm = {
|
||||||
|
name: org.name,
|
||||||
|
description: org.description || ""
|
||||||
};
|
};
|
||||||
|
showEditModal = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
closeEditModal = () => {
|
||||||
|
showEditModal = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
saveOrg = async () => {
|
||||||
|
if (!editForm.name) return;
|
||||||
|
try {
|
||||||
|
await $axios.patch(`/api/orgs/${orgId}`, {
|
||||||
|
name: editForm.name,
|
||||||
|
description: editForm.description
|
||||||
|
});
|
||||||
|
$message.success($t('org.updated') || "Updated successfully");
|
||||||
|
closeEditModal();
|
||||||
|
loadData();
|
||||||
|
} catch (e) {
|
||||||
|
$message.error(e.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
deleteOrg = async () => {
|
||||||
|
try {
|
||||||
|
await $message.confirm($t('org.delete_confirm') || `Are you sure you want to delete "${org.name}"?`);
|
||||||
|
await $axios.delete(`/api/orgs/${orgId}`);
|
||||||
|
$message.success($t('org.deleted') || "Deleted successfully");
|
||||||
|
$router.push('/org');
|
||||||
|
} catch (e) {
|
||||||
|
// Cancelled
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
removeMember = async (member) => {
|
||||||
|
try {
|
||||||
|
await $message.confirm($t('org.remove_confirm') || `Remove "${member.username}" from organization?`);
|
||||||
|
// API might not support this yet, but prepare for it
|
||||||
|
await $axios.delete(`/api/orgs/${orgId}/members/${member.id}`);
|
||||||
|
$message.success($t('org.member_removed') || "Member removed");
|
||||||
|
loadData();
|
||||||
|
} catch (e) {
|
||||||
|
// Cancelled or not implemented
|
||||||
|
if (e.status === 404) {
|
||||||
|
$message.info($t('org.feature_coming') || "Feature coming soon");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
$data.loadData();
|
$data.loadData();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,148 +1,389 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta name="description" content="Org List">
|
<meta name="description" content="Org Management">
|
||||||
<title>{{ $t('nav.org') }}</title>
|
<title>{{ $t('nav.org') }}</title>
|
||||||
<style>
|
<style>
|
||||||
.page-header {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
align-items: center;
|
gap: var(--spacing-lg);
|
||||||
margin-bottom: 20px;
|
padding: var(--spacing-lg);
|
||||||
}
|
height: 100vh;
|
||||||
.org-grid {
|
box-sizing: border-box;
|
||||||
display: grid;
|
overflow: hidden;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
}
|
||||||
gap: 20px;
|
|
||||||
}
|
.page-header {
|
||||||
.org-card {
|
display: flex;
|
||||||
background: #fff;
|
justify-content: space-between;
|
||||||
border-radius: var(--radius-md);
|
align-items: center;
|
||||||
box-shadow: var(--shadow-sm);
|
flex-wrap: wrap;
|
||||||
padding: 20px;
|
gap: var(--spacing-md);
|
||||||
display: flex;
|
}
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
.search-box {
|
||||||
cursor: pointer;
|
display: flex;
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
align-items: center;
|
||||||
}
|
gap: var(--spacing-sm);
|
||||||
.org-card:hover {
|
background: var(--bg-color-secondary);
|
||||||
transform: translateY(-2px);
|
padding: var(--spacing-sm) var(--spacing-md);
|
||||||
box-shadow: var(--shadow-md);
|
border-radius: var(--radius-md);
|
||||||
}
|
border: 1px solid var(--border-color);
|
||||||
.org-name {
|
min-width: 280px;
|
||||||
font-weight: bold;
|
}
|
||||||
font-size: 18px;
|
|
||||||
color: var(--text-color);
|
.search-box input {
|
||||||
}
|
border: none;
|
||||||
.org-meta {
|
background: transparent;
|
||||||
font-size: 14px;
|
outline: none;
|
||||||
color: var(--text-color-secondary);
|
font-size: var(--font-size-md);
|
||||||
}
|
color: var(--text-color);
|
||||||
.btn-create {
|
width: 100%;
|
||||||
padding: 8px 16px;
|
}
|
||||||
background-color: var(--color-primary);
|
|
||||||
color: white;
|
.search-box input::placeholder {
|
||||||
border: none;
|
color: var(--text-color-tertiary);
|
||||||
border-radius: var(--radius-md);
|
}
|
||||||
cursor: pointer;
|
|
||||||
}
|
.org-grid {
|
||||||
.modal-overlay {
|
display: grid;
|
||||||
position: fixed;
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
top: 0;
|
gap: var(--spacing-lg);
|
||||||
left: 0;
|
overflow-y: auto;
|
||||||
width: 100%;
|
padding-bottom: var(--spacing-lg);
|
||||||
height: 100%;
|
flex: 1;
|
||||||
background: rgba(0,0,0,0.5);
|
}
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
.org-card {
|
||||||
justify-content: center;
|
background: var(--bg-color-secondary);
|
||||||
z-index: 1000;
|
border-radius: var(--radius-lg);
|
||||||
}
|
box-shadow: var(--shadow-sm);
|
||||||
.modal-content {
|
padding: var(--spacing-lg);
|
||||||
background: #fff;
|
display: flex;
|
||||||
padding: 20px;
|
flex-direction: column;
|
||||||
border-radius: var(--radius-lg);
|
gap: var(--spacing-md);
|
||||||
width: 400px;
|
cursor: pointer;
|
||||||
max-width: 90%;
|
transition: all var(--transition-base);
|
||||||
}
|
border: 1px solid var(--border-color);
|
||||||
.modal-actions {
|
}
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
.org-card:hover {
|
||||||
gap: 10px;
|
transform: translateY(-2px);
|
||||||
margin-top: 20px;
|
box-shadow: var(--shadow-md);
|
||||||
}
|
border-color: var(--color-primary);
|
||||||
</style>
|
}
|
||||||
|
|
||||||
|
.org-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--color-primary-text);
|
||||||
|
font-size: var(--font-size-xl);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-card:hover .org-actions {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: var(--font-size-lg);
|
||||||
|
color: var(--text-color);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-desc {
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
line-height: 1.5;
|
||||||
|
min-height: 40px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-meta {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
color: var(--text-color-tertiary);
|
||||||
|
padding-top: var(--spacing-sm);
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-meta-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--spacing-xs);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: 3px solid var(--border-color);
|
||||||
|
border-top-color: var(--color-primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: var(--spacing-xl);
|
||||||
|
gap: var(--spacing-md);
|
||||||
|
color: var(--text-color-secondary);
|
||||||
|
text-align: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state i {
|
||||||
|
font-size: 64px;
|
||||||
|
color: var(--border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state h3 {
|
||||||
|
font-size: var(--font-size-xl);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{ $t('nav.org') }}</h1>
|
<h1>{{ $t('nav.org') }}</h1>
|
||||||
<button class="btn-create" @click="openCreateModal">{{ $t('common.create') }}</button>
|
<div style="display: flex; gap: var(--spacing-md); align-items: center;">
|
||||||
|
<div class="search-box">
|
||||||
|
<i class="fas fa-search" style="color: var(--text-color-tertiary);"></i>
|
||||||
|
<input type="text" v:value="searchQuery"
|
||||||
|
:placeholder="$t('org.search_placeholder') || 'Search organizations...'">
|
||||||
|
</div>
|
||||||
|
<v-btn color="primary" :click="openCreateModal">
|
||||||
|
<i class="fas fa-plus"></i>
|
||||||
|
{{ $t('org.create') }}
|
||||||
|
</v-btn>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Loading State -->
|
||||||
|
<div class="loading-state" v-if="loading">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
<span>{{ $t('common.loading') || 'Loading...' }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="org-grid">
|
<!-- Empty State -->
|
||||||
<div class="org-card" v-for="org in orgs" @click="goToDetail(org.id)">
|
<div class="empty-state" v-if="!loading && filteredOrgs.length === 0">
|
||||||
<div class="org-name">{{ org.name }}</div>
|
<i class="fas fa-building"></i>
|
||||||
<div class="org-meta">ID: {{ org.id }}</div>
|
<h3>{{ $t('org.no_orgs') || 'No Organizations' }}</h3>
|
||||||
<div class="org-meta">Role: {{ org.role || 'Member' }}</div>
|
<p>{{ $t('org.no_orgs_desc') || 'Create your first organization to get started' }}</p>
|
||||||
|
<v-btn color="primary" :click="openCreateModal" v-if="searchQuery === ''">
|
||||||
|
<i class="fas fa-plus"></i>
|
||||||
|
{{ $t('org.create_first') || 'Create Organization' }}
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Org Grid -->
|
||||||
|
<div class="org-grid" v-if="!loading && filteredOrgs.length > 0">
|
||||||
|
<div class="org-card" v-for="org in filteredOrgs" @click="goToDetail(org.id)">
|
||||||
|
<div class="org-header">
|
||||||
|
<div class="org-icon">{{ org.name ? org.name.charAt(0).toUpperCase() : 'O' }}</div>
|
||||||
|
<div class="org-actions" @click.stop>
|
||||||
|
<v-btn icon size="sm" variant="outline" :click="() => openEditModal(org)">
|
||||||
|
<i class="fas fa-edit"></i>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn icon size="sm" color="danger" variant="outline" :click="() => deleteOrg(org)">
|
||||||
|
<i class="fas fa-trash"></i>
|
||||||
|
</v-btn>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="org-name">{{ org.name }}</div>
|
||||||
|
<div class="org-desc">{{ org.description || ($t('org.no_description') || 'No description') }}</div>
|
||||||
|
<div class="org-meta">
|
||||||
|
<div class="org-meta-item">
|
||||||
|
<i class="fas fa-id-card"></i>
|
||||||
|
<span>ID: {{ org.id }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="org-meta-item" v-if="org.member_count !== undefined">
|
||||||
|
<i class="fas fa-users"></i>
|
||||||
|
<span>{{ org.member_count }} {{ $t('org.members') || 'members' }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Create Modal -->
|
<!-- Create/Edit Dialog -->
|
||||||
<div class="modal-overlay" v-if="showCreateModal">
|
<v-dialog v:visible="showModal"
|
||||||
<div class="modal-content">
|
:title="isEdit ? ($t('org.edit') || 'Edit Organization') : ($t('org.create') || 'Create Organization')">
|
||||||
<h3>{{ $t('org.create') }}</h3>
|
<form @submit.prevent="saveOrg" style="display: grid; gap: 16px;">
|
||||||
<div class="form-group">
|
<v-input v-for="item in formItems" :type="item.type || 'text'" :label="$t(item.labelKey) || item.label"
|
||||||
<label>{{ $t('org.name') }}</label>
|
:required="item.required" :placeholder="$t(item.placeholderKey) || item.placeholder"
|
||||||
<input type="text" v:value="newOrgName" class="form-input" style="width: 100%; margin-top: 5px;">
|
v:value="formData[item.name]" :disabled="item.name === 'code' && isEdit">
|
||||||
</div>
|
</v-input>
|
||||||
<div class="modal-actions">
|
</form>
|
||||||
<button @click="closeCreateModal" class="btn-cancel">{{ $t('common.cancel') }}</button>
|
<div vslot="footer">
|
||||||
<button @click="createOrg" class="btn-confirm">{{ $t('common.confirm') }}</button>
|
<v-btn variant="outline" :click="closeModal">{{ $t('common.cancel') || 'Cancel' }}</v-btn>
|
||||||
</div>
|
<v-btn color="primary" :click="saveOrg">
|
||||||
</div>
|
{{ isEdit ? ($t('common.save') || 'Save') : ($t('common.create') || 'Create') }}
|
||||||
|
</v-btn>
|
||||||
</div>
|
</div>
|
||||||
|
</v-dialog>
|
||||||
</body>
|
</body>
|
||||||
<script setup>
|
<script setup>
|
||||||
orgs = [];
|
// State
|
||||||
showCreateModal = false;
|
orgs = [];
|
||||||
newOrgName = "";
|
loading = false;
|
||||||
|
searchQuery = "";
|
||||||
loadOrgs = async () => {
|
showModal = false;
|
||||||
try {
|
isEdit = false;
|
||||||
const res = await $axios.get('/api/orgs');
|
formData = {
|
||||||
orgs = res || [];
|
id: null,
|
||||||
} catch (e) {
|
name: "",
|
||||||
$message.error(e.message);
|
code: "",
|
||||||
}
|
description: "",
|
||||||
};
|
logo: ""
|
||||||
|
};
|
||||||
openCreateModal = () => {
|
|
||||||
showCreateModal = true;
|
formItems = [
|
||||||
newOrgName = "";
|
{name: 'name', labelKey: 'org.name', label: 'Organization Name', required: true, placeholderKey: 'org.name_placeholder', placeholder: 'Enter organization name'},
|
||||||
};
|
{name: 'code', labelKey: 'org.code', label: 'Organization Code', required: true, placeholderKey: 'org.code_placeholder', placeholder: 'Enter organization code (unique)'},
|
||||||
|
{name: 'logo', labelKey: 'org.logo', label: 'Logo URL', required: true, placeholderKey: 'org.logo_placeholder', placeholder: 'Enter logo URL'},
|
||||||
closeCreateModal = () => {
|
{name: 'description', type: 'textarea', labelKey: 'org.description', label: 'Description', placeholderKey: 'org.desc_placeholder', placeholder: 'Enter organization description (optional)'}
|
||||||
showCreateModal = false;
|
];
|
||||||
};
|
|
||||||
|
// Computed filtered orgs
|
||||||
createOrg = async () => {
|
filteredOrgs = () => {
|
||||||
if (!newOrgName) return;
|
if (!searchQuery) return orgs;
|
||||||
try {
|
const query = searchQuery.toLowerCase();
|
||||||
await $axios.post('/api/orgs', { name: newOrgName });
|
return orgs.filter(org =>
|
||||||
$message.success("Created successfully");
|
org.name.toLowerCase().includes(query) ||
|
||||||
closeCreateModal();
|
(org.description && org.description.toLowerCase().includes(query)) ||
|
||||||
loadOrgs();
|
(org.code && org.code.toLowerCase().includes(query))
|
||||||
} catch (e) {
|
);
|
||||||
$message.error(e.message);
|
};
|
||||||
}
|
|
||||||
};
|
// Load orgs
|
||||||
|
loadOrgs = async () => {
|
||||||
goToDetail = (id) => {
|
loading = true;
|
||||||
$router.push('/org/' + id);
|
try {
|
||||||
};
|
const res = await $axios.get('/api/orgs');
|
||||||
|
orgs = res.items || [];
|
||||||
|
} catch (e) {
|
||||||
|
$message.error(e.message);
|
||||||
|
} finally {
|
||||||
|
loading = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Modal operations
|
||||||
|
openCreateModal = () => {
|
||||||
|
isEdit = false;
|
||||||
|
formData = {id: null, name: "", code: "", description: "", logo: "https://via.placeholder.com/150"};
|
||||||
|
showModal = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
openEditModal = (org) => {
|
||||||
|
isEdit = true;
|
||||||
|
formData = {...org};
|
||||||
|
showModal = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
closeModal = () => {
|
||||||
|
showModal = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Save (create or update)
|
||||||
|
saveOrg = async () => {
|
||||||
|
if (!formData.name || !formData.code) {
|
||||||
|
$message.error($t('org.required_fields') || "Name and Code are required");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
if (isEdit) {
|
||||||
|
await $axios.patch(`/api/orgs/${formData.id}`, {
|
||||||
|
name: formData.name,
|
||||||
|
description: formData.description,
|
||||||
|
logo: formData.logo
|
||||||
|
});
|
||||||
|
$message.success($t('org.updated') || "Updated successfully");
|
||||||
|
} else {
|
||||||
|
await $axios.post('/api/orgs', {
|
||||||
|
name: formData.name,
|
||||||
|
code: formData.code,
|
||||||
|
description: formData.description,
|
||||||
|
logo: formData.logo
|
||||||
|
});
|
||||||
|
$message.success($t('org.created') || "Created successfully");
|
||||||
|
}
|
||||||
|
closeModal();
|
||||||
|
loadOrgs();
|
||||||
|
} catch (e) {
|
||||||
|
console.warn(e)
|
||||||
|
$message.error(e.message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Delete
|
||||||
|
deleteOrg = async (org) => {
|
||||||
|
try {
|
||||||
|
await $message.confirm($t('org.delete_confirm') || `Are you sure you want to delete "${org.name}"?`);
|
||||||
|
await $axios.delete(`/api/orgs/${org.id}`);
|
||||||
|
$message.success($t('org.deleted') || "Deleted successfully");
|
||||||
|
loadOrgs();
|
||||||
|
} catch (e) {
|
||||||
|
// Cancelled
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Navigate to detail
|
||||||
|
goToDetail = (id) => {
|
||||||
|
$router.push('/org/' + id);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
$data.loadOrgs();
|
$data.loadOrgs();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue