mirror of https://github.com/veypi/OneAuth.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
4.1 KiB
HTML
149 lines
4.1 KiB
HTML
1 week ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta name="description" content="Org List">
|
||
|
|
<title>{{ $t('nav.org') }}</title>
|
||
|
|
<style>
|
||
|
|
.page-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.org-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
.org-card {
|
||
|
|
background: #fff;
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
box-shadow: var(--shadow-sm);
|
||
|
|
padding: 20px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
||
|
|
}
|
||
|
|
.org-card:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: var(--shadow-md);
|
||
|
|
}
|
||
|
|
.org-name {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 18px;
|
||
|
|
color: var(--text-color);
|
||
|
|
}
|
||
|
|
.org-meta {
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--text-color-secondary);
|
||
|
|
}
|
||
|
|
.btn-create {
|
||
|
|
padding: 8px 16px;
|
||
|
|
background-color: var(--color-primary);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: var(--radius-md);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.modal-overlay {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: rgba(0,0,0,0.5);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
.modal-content {
|
||
|
|
background: #fff;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: var(--radius-lg);
|
||
|
|
width: 400px;
|
||
|
|
max-width: 90%;
|
||
|
|
}
|
||
|
|
.modal-actions {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
gap: 10px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="page-header">
|
||
|
|
<h1>{{ $t('nav.org') }}</h1>
|
||
|
|
<button class="btn-create" @click="openCreateModal">{{ $t('common.create') }}</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="org-grid">
|
||
|
|
<div class="org-card" v-for="org in orgs" @click="goToDetail(org.id)">
|
||
|
|
<div class="org-name">{{ org.name }}</div>
|
||
|
|
<div class="org-meta">ID: {{ org.id }}</div>
|
||
|
|
<div class="org-meta">Role: {{ org.role || 'Member' }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Create Modal -->
|
||
|
|
<div class="modal-overlay" v-if="showCreateModal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<h3>{{ $t('org.create') }}</h3>
|
||
|
|
<div class="form-group">
|
||
|
|
<label>{{ $t('org.name') }}</label>
|
||
|
|
<input type="text" v:value="newOrgName" class="form-input" style="width: 100%; margin-top: 5px;">
|
||
|
|
</div>
|
||
|
|
<div class="modal-actions">
|
||
|
|
<button @click="closeCreateModal" class="btn-cancel">{{ $t('common.cancel') }}</button>
|
||
|
|
<button @click="createOrg" class="btn-confirm">{{ $t('common.confirm') }}</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script setup>
|
||
|
|
orgs = [];
|
||
|
|
showCreateModal = false;
|
||
|
|
newOrgName = "";
|
||
|
|
|
||
|
|
loadOrgs = async () => {
|
||
|
|
try {
|
||
|
|
const res = await $axios.get('/api/orgs');
|
||
|
|
orgs = res || [];
|
||
|
|
} catch (e) {
|
||
|
|
$message.error(e.message);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
openCreateModal = () => {
|
||
|
|
showCreateModal = true;
|
||
|
|
newOrgName = "";
|
||
|
|
};
|
||
|
|
|
||
|
|
closeCreateModal = () => {
|
||
|
|
showCreateModal = false;
|
||
|
|
};
|
||
|
|
|
||
|
|
createOrg = async () => {
|
||
|
|
if (!newOrgName) return;
|
||
|
|
try {
|
||
|
|
await $axios.post('/api/orgs', { name: newOrgName });
|
||
|
|
$message.success("Created successfully");
|
||
|
|
closeCreateModal();
|
||
|
|
loadOrgs();
|
||
|
|
} catch (e) {
|
||
|
|
$message.error(e.message);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
goToDetail = (id) => {
|
||
|
|
$router.push('/org/' + id);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
$data.loadOrgs();
|
||
|
|
</script>
|
||
|
|
</html>
|