|
|
|
@ -3,7 +3,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<meta name="description" content="Org Detail">
|
|
|
|
<meta name="description" content="Org Detail">
|
|
|
|
<title>{{ org ? org.name : ($t('org.detail') || 'Organization Detail') }}</title>
|
|
|
|
<title>{{ org ? org.name : $t('org.detail') }}</title>
|
|
|
|
<style>
|
|
|
|
<style>
|
|
|
|
body {
|
|
|
|
body {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
@ -228,26 +228,26 @@
|
|
|
|
<!-- Loading State -->
|
|
|
|
<!-- Loading State -->
|
|
|
|
<div class="loading-state" v-if="loading">
|
|
|
|
<div class="loading-state" v-if="loading">
|
|
|
|
<div class="spinner"></div>
|
|
|
|
<div class="spinner"></div>
|
|
|
|
<span>{{ $t('common.loading') || 'Loading...' }}</span>
|
|
|
|
<span>{{ $t('common.loading') }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<template v:if="!loading && org">
|
|
|
|
<template v:if="!loading && org">
|
|
|
|
<!-- Page Header -->
|
|
|
|
<!-- Page Header -->
|
|
|
|
<div class="page-header">
|
|
|
|
<div class="page-header">
|
|
|
|
<div class="header-left">
|
|
|
|
<div class="header-left">
|
|
|
|
<button class="btn-back" @click="goBack" title="{{ $t('common.back') || 'Back' }}">
|
|
|
|
<button class="btn-back" @click="goBack" title="{{ $t('common.back') }}">
|
|
|
|
<i class="fas fa-arrow-left"></i>
|
|
|
|
<i class="fas fa-arrow-left"></i>
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
<h1>{{ $t('org.detail') || 'Organization Detail' }}</h1>
|
|
|
|
<h1>{{ $t('org.detail') }}</h1>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="header-actions">
|
|
|
|
<div class="header-actions">
|
|
|
|
<v-btn variant="outline" :click="openEditModal">
|
|
|
|
<v-btn variant="outline" :click="openEditModal">
|
|
|
|
<i class="fas fa-edit"></i>
|
|
|
|
<i class="fas fa-edit"></i>
|
|
|
|
{{ $t('common.edit') || 'Edit' }}
|
|
|
|
{{ $t('common.edit') }}
|
|
|
|
</v-btn>
|
|
|
|
</v-btn>
|
|
|
|
<v-btn color="danger" :click="deleteOrg">
|
|
|
|
<v-btn color="danger" :click="deleteOrg">
|
|
|
|
<i class="fas fa-trash"></i>
|
|
|
|
<i class="fas fa-trash"></i>
|
|
|
|
{{ $t('common.delete') || 'Delete' }}
|
|
|
|
{{ $t('common.delete') }}
|
|
|
|
</v-btn>
|
|
|
|
</v-btn>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -258,7 +258,7 @@
|
|
|
|
<div class="org-icon-large">{{ org.name ? org.name.charAt(0).toUpperCase() : 'O' }}</div>
|
|
|
|
<div class="org-icon-large">{{ org.name ? org.name.charAt(0).toUpperCase() : 'O' }}</div>
|
|
|
|
<div class="org-header-text">
|
|
|
|
<div class="org-header-text">
|
|
|
|
<div class="org-header-name">{{ org.name }}</div>
|
|
|
|
<div class="org-header-name">{{ org.name }}</div>
|
|
|
|
<div class="org-header-desc">{{ org.description || ($t('org.no_description') || 'No description') }}</div>
|
|
|
|
<div class="org-header-desc">{{ org.description || $t('org.no_description') }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
@ -268,11 +268,11 @@
|
|
|
|
<span class="info-value">{{ org.id }}</span>
|
|
|
|
<span class="info-value">{{ org.id }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
|
|
<div class="info-item">
|
|
|
|
<span class="info-label">{{ $t('org.created_at') || 'Created At' }}</span>
|
|
|
|
<span class="info-label">{{ $t('org.created_at') }}</span>
|
|
|
|
<span class="info-value">{{ formatDate(org.created_at) }}</span>
|
|
|
|
<span class="info-value">{{ formatDate(org.created_at) }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="info-item" v:if="org.updated_at">
|
|
|
|
<div class="info-item" v:if="org.updated_at">
|
|
|
|
<span class="info-label">{{ $t('org.updated_at') || 'Updated At' }}</span>
|
|
|
|
<span class="info-label">{{ $t('org.updated_at') }}</span>
|
|
|
|
<span class="info-value">{{ formatDate(org.updated_at) }}</span>
|
|
|
|
<span class="info-value">{{ formatDate(org.updated_at) }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -283,23 +283,23 @@
|
|
|
|
<div class="members-header">
|
|
|
|
<div class="members-header">
|
|
|
|
<div class="section-title">
|
|
|
|
<div class="section-title">
|
|
|
|
<i class="fas fa-users"></i>
|
|
|
|
<i class="fas fa-users"></i>
|
|
|
|
{{ $t('org.members') || 'Members' }}
|
|
|
|
{{ $t('org.members') }}
|
|
|
|
<span style="font-size: var(--font-size-sm); color: var(--text-color-tertiary);">({{ members.length }})</span>
|
|
|
|
<span style="font-size: var(--font-size-sm); color: var(--text-color-tertiary);">({{ members.length }})</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="empty-state" v:if="members.length === 0">
|
|
|
|
<div class="empty-state" v:if="members.length === 0">
|
|
|
|
<i class="fas fa-user-slash"></i>
|
|
|
|
<i class="fas fa-user-slash"></i>
|
|
|
|
<p>{{ $t('org.no_members') || 'No members yet' }}</p>
|
|
|
|
<p>{{ $t('org.no_members') }}</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<table v:if="members.length > 0">
|
|
|
|
<table v:if="members.length > 0">
|
|
|
|
<thead>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<tr>
|
|
|
|
<th>{{ $t('user.username') || 'Username' }}</th>
|
|
|
|
<th>{{ $t('user.username') }}</th>
|
|
|
|
<th>{{ $t('user.email') || 'Email' }}</th>
|
|
|
|
<th>{{ $t('user.email') }}</th>
|
|
|
|
<th>{{ $t('user.role') || 'Role' }}</th>
|
|
|
|
<th>{{ $t('user.role') }}</th>
|
|
|
|
<th>{{ $t('common.actions') || 'Actions' }}</th>
|
|
|
|
<th>{{ $t('common.actions') }}</th>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tbody>
|
|
|
|
@ -315,10 +315,10 @@
|
|
|
|
<v-btn size="sm" color="danger" variant="outline" :click="() => removeMember(member)"
|
|
|
|
<v-btn size="sm" color="danger" variant="outline" :click="() => removeMember(member)"
|
|
|
|
v:if="member.id !== currentUserId">
|
|
|
|
v:if="member.id !== currentUserId">
|
|
|
|
<i class="fas fa-user-minus"></i>
|
|
|
|
<i class="fas fa-user-minus"></i>
|
|
|
|
{{ $t('org.remove_member') || 'Remove' }}
|
|
|
|
{{ $t('org.remove_member') }}
|
|
|
|
</v-btn>
|
|
|
|
</v-btn>
|
|
|
|
<span v:else style="color: var(--text-color-tertiary); font-size: var(--font-size-sm);">
|
|
|
|
<span v:else style="color: var(--text-color-tertiary); font-size: var(--font-size-sm);">
|
|
|
|
{{ $t('org.you') || 'You' }}
|
|
|
|
{{ $t('org.you') }}
|
|
|
|
</span>
|
|
|
|
</span>
|
|
|
|
</td>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
@ -328,17 +328,17 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Edit Dialog -->
|
|
|
|
<!-- Edit Dialog -->
|
|
|
|
<v-dialog v:visible="showEditModal" title="{{ $t('org.edit') || 'Edit Organization' }}">
|
|
|
|
<v-dialog v:visible="showEditModal" title="{{ $t('org.edit') }}">
|
|
|
|
<v-input type="text" v:value="editForm.name" label="{{ $t('org.name') || 'Organization Name' }}" required
|
|
|
|
<v-input type="text" v:value="editForm.name" label="{{ $t('org.name') }}" required
|
|
|
|
placeholder="{{ $t('org.name_placeholder') || 'Enter organization name' }}">
|
|
|
|
placeholder="{{ $t('org.name_placeholder') }}">
|
|
|
|
</v-input>
|
|
|
|
</v-input>
|
|
|
|
<v-input type="textarea" v:value="editForm.description" label="{{ $t('org.description') || 'Description' }}"
|
|
|
|
<v-input type="textarea" v:value="editForm.description" label="{{ $t('org.description') }}"
|
|
|
|
placeholder="{{ $t('org.desc_placeholder') || 'Enter organization description (optional)' }}">
|
|
|
|
placeholder="{{ $t('org.desc_placeholder') }}">
|
|
|
|
</v-input>
|
|
|
|
</v-input>
|
|
|
|
<div vslot="footer">
|
|
|
|
<div vslot="footer">
|
|
|
|
<v-btn variant="outline" :click="closeEditModal">{{ $t('common.cancel') || 'Cancel' }}</v-btn>
|
|
|
|
<v-btn variant="outline" :click="closeEditModal">{{ $t('common.cancel') }}</v-btn>
|
|
|
|
<v-btn color="primary" :disabled="!editForm.name" :click="saveOrg">
|
|
|
|
<v-btn color="primary" :disabled="!editForm.name" :click="saveOrg">
|
|
|
|
{{ $t('common.save') || 'Save' }}
|
|
|
|
{{ $t('common.save') }}
|
|
|
|
</v-btn>
|
|
|
|
</v-btn>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</v-dialog>
|
|
|
|
</v-dialog>
|
|
|
|
@ -406,7 +406,7 @@
|
|
|
|
name: editForm.name,
|
|
|
|
name: editForm.name,
|
|
|
|
description: editForm.description
|
|
|
|
description: editForm.description
|
|
|
|
});
|
|
|
|
});
|
|
|
|
$message.success($t('org.updated') || "Updated successfully");
|
|
|
|
$message.success($t('org.updated'));
|
|
|
|
closeEditModal();
|
|
|
|
closeEditModal();
|
|
|
|
loadData();
|
|
|
|
loadData();
|
|
|
|
} catch (e) {
|
|
|
|
} catch (e) {
|
|
|
|
@ -416,9 +416,9 @@
|
|
|
|
|
|
|
|
|
|
|
|
deleteOrg = async () => {
|
|
|
|
deleteOrg = async () => {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
await $message.confirm($t('org.delete_confirm') || `Are you sure you want to delete "${org.name}"?`);
|
|
|
|
await $message.confirm($t('org.delete_confirm'));
|
|
|
|
await $axios.delete(`/api/orgs/${orgId}`);
|
|
|
|
await $axios.delete(`/api/orgs/${orgId}`);
|
|
|
|
$message.success($t('org.deleted') || "Deleted successfully");
|
|
|
|
$message.success($t('org.deleted'));
|
|
|
|
$router.push('/org');
|
|
|
|
$router.push('/org');
|
|
|
|
} catch (e) {
|
|
|
|
} catch (e) {
|
|
|
|
// Cancelled
|
|
|
|
// Cancelled
|
|
|
|
@ -427,15 +427,15 @@
|
|
|
|
|
|
|
|
|
|
|
|
removeMember = async (member) => {
|
|
|
|
removeMember = async (member) => {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
await $message.confirm($t('org.remove_confirm') || `Remove "${member.username}" from organization?`);
|
|
|
|
await $message.confirm($t('org.remove_confirm'));
|
|
|
|
// API might not support this yet, but prepare for it
|
|
|
|
// API might not support this yet, but prepare for it
|
|
|
|
await $axios.delete(`/api/orgs/${orgId}/members/${member.id}`);
|
|
|
|
await $axios.delete(`/api/orgs/${orgId}/members/${member.id}`);
|
|
|
|
$message.success($t('org.member_removed') || "Member removed");
|
|
|
|
$message.success($t('org.member_removed'));
|
|
|
|
loadData();
|
|
|
|
loadData();
|
|
|
|
} catch (e) {
|
|
|
|
} catch (e) {
|
|
|
|
// Cancelled or not implemented
|
|
|
|
// Cancelled or not implemented
|
|
|
|
if (e.status === 404) {
|
|
|
|
if (e.status === 404) {
|
|
|
|
$message.info($t('org.feature_coming') || "Feature coming soon");
|
|
|
|
$message.info($t('org.feature_coming'));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
veypi
1 week ago