Improve user management UX with clean list layout and search
- Replace grid layout with clean line-by-line agent list - Add search functionality for agent selection with real-time filtering - Implement professional list items with agent names and descriptions - Add proper hover effects and spacing for better interactivity - Include description truncation to keep interface compact - Clear search query when modal opens/closes for better UX - Style search input with brand colors and focus states 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DJP
parent
21c8174bf9
commit
a772e53840
3 changed files with 301 additions and 29 deletions
|
|
@ -315,6 +315,86 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit User Modal -->
|
||||
<div v-if="showEditUserModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Edit User</h3>
|
||||
<button @click="showEditUserModal = false" class="close-btn">×</button>
|
||||
</div>
|
||||
<form @submit.prevent="updateUser">
|
||||
<div class="form-group">
|
||||
<label>Name:</label>
|
||||
<input v-model="editingUser.name" type="text" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email:</label>
|
||||
<input v-model="editingUser.email" type="email" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Role:</label>
|
||||
<select v-model="editingUser.role" required>
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Status:</label>
|
||||
<select v-model="editingUser.isActive" required>
|
||||
<option :value="true">Active</option>
|
||||
<option :value="false">Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Agent Access:</label>
|
||||
<div class="agent-access-controls">
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="editingUser.hasAllAgents"
|
||||
@change="toggleAllAgents"
|
||||
>
|
||||
All Agents (Full Access)
|
||||
</label>
|
||||
|
||||
<div v-if="!editingUser.hasAllAgents" class="agent-selection">
|
||||
<label>Select Specific Agents:</label>
|
||||
<div class="agent-search">
|
||||
<input
|
||||
type="text"
|
||||
v-model="agentSearchQueryUser"
|
||||
placeholder="Search agents..."
|
||||
class="agent-search-input"
|
||||
>
|
||||
</div>
|
||||
<div class="agent-list">
|
||||
<label
|
||||
v-for="agent in filteredAgentsForUser"
|
||||
:key="agent.key"
|
||||
class="agent-list-item"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="agent.key"
|
||||
v-model="editingUser.allowedAgents"
|
||||
>
|
||||
<div class="agent-info">
|
||||
<span class="agent-name">{{ agent.name }}</span>
|
||||
<span class="agent-description">{{ agent.description }}</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" @click="showEditUserModal = false" class="btn btn-secondary">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Update User</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Agent Modal -->
|
||||
<div v-if="showCreateAgentModal" class="modal">
|
||||
<div class="modal-content">
|
||||
|
|
@ -656,7 +736,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { agentsAPI, analyticsAPI } from '../services/api.js'
|
||||
import { agentsAPI, analyticsAPI, usersAPI } from '../services/api.js'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
|
|
@ -690,6 +770,7 @@ export default {
|
|||
users: [],
|
||||
agents: [],
|
||||
agentSearchQuery: '',
|
||||
agentSearchQueryUser: '',
|
||||
conversations: [],
|
||||
conversationFilter: 'all',
|
||||
usageData: [],
|
||||
|
|
@ -705,11 +786,13 @@ export default {
|
|||
trendsDays: 30,
|
||||
isAdmin: false,
|
||||
showCreateUserModal: false,
|
||||
showEditUserModal: false,
|
||||
showCreateAgentModal: false,
|
||||
showEditAgentModal: false,
|
||||
showCreateVectorStoreModal: false,
|
||||
showFileUploadModal: false,
|
||||
editingAgent: null,
|
||||
editingUser: null,
|
||||
vectorStores: [],
|
||||
openaiVectorStores: [],
|
||||
selectedVectorStore: null,
|
||||
|
|
@ -764,6 +847,17 @@ export default {
|
|||
agent.category.toLowerCase().includes(query) ||
|
||||
agent.model.toLowerCase().includes(query)
|
||||
)
|
||||
},
|
||||
filteredAgentsForUser() {
|
||||
if (!this.agentSearchQueryUser.trim()) {
|
||||
return this.agents
|
||||
}
|
||||
const query = this.agentSearchQueryUser.toLowerCase()
|
||||
return this.agents.filter(agent =>
|
||||
agent.name.toLowerCase().includes(query) ||
|
||||
agent.description.toLowerCase().includes(query) ||
|
||||
agent.category.toLowerCase().includes(query)
|
||||
)
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
|
|
@ -829,25 +923,13 @@ export default {
|
|||
},
|
||||
|
||||
async loadUsers() {
|
||||
// Mock data for now - you'll need to create an API endpoint
|
||||
this.users = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Administrator',
|
||||
email: 'admin@oliver.agency',
|
||||
preferences: { role: 'admin' },
|
||||
isActive: true,
|
||||
createdAt: new Date()
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'User',
|
||||
email: 'user@oliver.agency',
|
||||
preferences: { role: 'user' },
|
||||
isActive: true,
|
||||
createdAt: new Date()
|
||||
}
|
||||
]
|
||||
try {
|
||||
const response = await usersAPI.getAll()
|
||||
this.users = response.users || []
|
||||
} catch (error) {
|
||||
console.error('Error loading users:', error)
|
||||
this.users = []
|
||||
}
|
||||
},
|
||||
|
||||
async loadAgents() {
|
||||
|
|
@ -865,13 +947,68 @@ export default {
|
|||
},
|
||||
|
||||
editUser(user) {
|
||||
// TODO: Implement user editing
|
||||
console.log('Edit user:', user)
|
||||
// Set up the editing user with role and access from preferences
|
||||
this.editingUser = {
|
||||
...user,
|
||||
role: user.preferences?.role || 'user',
|
||||
allowedAgents: user.preferences?.allowedAgents || [],
|
||||
hasAllAgents: !user.preferences?.allowedAgents || user.preferences?.allowedAgents.length === 0
|
||||
}
|
||||
this.agentSearchQueryUser = '' // Clear search when opening modal
|
||||
this.showEditUserModal = true
|
||||
},
|
||||
|
||||
async updateUser() {
|
||||
try {
|
||||
const userData = {
|
||||
name: this.editingUser.name,
|
||||
email: this.editingUser.email,
|
||||
isActive: this.editingUser.isActive,
|
||||
preferences: {
|
||||
role: this.editingUser.role,
|
||||
allowedAgents: this.editingUser.hasAllAgents ? null : this.editingUser.allowedAgents
|
||||
}
|
||||
}
|
||||
|
||||
// Call API to update user
|
||||
await usersAPI.update(this.editingUser.id, userData)
|
||||
|
||||
// Update user in local list
|
||||
const index = this.users.findIndex(u => u.id === this.editingUser.id)
|
||||
if (index !== -1) {
|
||||
this.users[index] = { ...this.editingUser, preferences: userData.preferences }
|
||||
}
|
||||
|
||||
this.showEditUserModal = false
|
||||
this.editingUser = null
|
||||
alert('User updated successfully!')
|
||||
} catch (error) {
|
||||
console.error('Error updating user:', error)
|
||||
alert('Failed to update user. Please try again.')
|
||||
}
|
||||
},
|
||||
|
||||
toggleAllAgents() {
|
||||
if (this.editingUser.hasAllAgents) {
|
||||
this.editingUser.allowedAgents = []
|
||||
}
|
||||
},
|
||||
|
||||
async toggleUserStatus(user) {
|
||||
// TODO: Implement user status toggle
|
||||
console.log('Toggle user status:', user)
|
||||
try {
|
||||
const response = await usersAPI.toggleStatus(user.id)
|
||||
|
||||
// Update user in local list
|
||||
const index = this.users.findIndex(u => u.id === user.id)
|
||||
if (index !== -1) {
|
||||
this.users[index].isActive = response.user.isActive
|
||||
}
|
||||
|
||||
alert(response.message)
|
||||
} catch (error) {
|
||||
console.error('Error toggling user status:', error)
|
||||
alert('Failed to toggle user status. Please try again.')
|
||||
}
|
||||
},
|
||||
|
||||
editAgent(agent) {
|
||||
|
|
@ -1764,6 +1901,109 @@ export default {
|
|||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
/* Agent Access Control Styles */
|
||||
.agent-access-controls {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.agent-selection {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.agent-search {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.agent-search-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.agent-search-input:focus {
|
||||
outline: none;
|
||||
border-color: #e6a335;
|
||||
box-shadow: 0 0 0 3px rgba(230, 163, 53, 0.1);
|
||||
}
|
||||
|
||||
.agent-list {
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.agent-list-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.agent-list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.agent-list-item:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.agent-list-item input[type="checkbox"] {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
margin-top: 0.1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.agent-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.agent-description {
|
||||
color: #6b7280;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.error {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -53,20 +53,20 @@
|
|||
<div class="stats-section mt-8">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<h3>Migration Complete! 🎉</h3>
|
||||
<p class="mb-4">Successfully migrated from Make.com workflow to Node.js backend</p>
|
||||
<h3>AI-Powered Creativity Platform</h3>
|
||||
<p class="mb-4">Advanced AI assistants ready to help with your creative projects</p>
|
||||
<div class="stats-grid">
|
||||
<div class="stat">
|
||||
<div class="stat-number">{{ totalAssistants }}</div>
|
||||
<div class="stat-label">AI Assistants</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-number">✅</div>
|
||||
<div class="stat-label">Responses API</div>
|
||||
<div class="stat-number">🧠</div>
|
||||
<div class="stat-label">Advanced AI</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-number">🚀</div>
|
||||
<div class="stat-label">Ready to Use</div>
|
||||
<div class="stat-label">Ready to Create</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -191,4 +191,36 @@ export const analyticsAPI = {
|
|||
}
|
||||
};
|
||||
|
||||
export const usersAPI = {
|
||||
async getAll() {
|
||||
const response = await api.get('/users');
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async getById(id) {
|
||||
const response = await api.get(`/users/${id}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async update(id, userData) {
|
||||
const response = await api.put(`/users/${id}`, userData);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async create(userData) {
|
||||
const response = await api.post('/users', userData);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async delete(id) {
|
||||
const response = await api.delete(`/users/${id}`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async toggleStatus(id) {
|
||||
const response = await api.patch(`/users/${id}/toggle-status`);
|
||||
return response.data;
|
||||
}
|
||||
};
|
||||
|
||||
export default api
|
||||
Loading…
Add table
Reference in a new issue