Add USB, Notifications, Network plugins and reusable EmployeeSearch component
New Plugins: - USB plugin: Device checkout/checkin with employee lookup, checkout history - Notifications plugin: Announcements with types, scheduling, shopfloor display - Network plugin: Network device management with subnets and VLANs - Equipment and Computers plugins: Asset type separation Frontend: - EmployeeSearch component: Reusable employee lookup with autocomplete - USB views: List, detail, checkout/checkin modals - Notifications views: List, form with recognition mode - Network views: Device list, detail, form - Calendar view with FullCalendar integration - Shopfloor and TV dashboard views - Reports index page - Map editor for asset positioning - Light/dark mode fixes for map tooltips Backend: - Employee search API with external lookup service - Collector API for PowerShell data collection - Reports API endpoints - Slides API for TV dashboard - Fixed AppVersion model (removed BaseModel inheritance) - Added checkout_name column to usbcheckouts table Styling: - Unified detail page styles - Improved pagination (page numbers instead of prev/next) - Dark/light mode theme improvements Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
@@ -50,6 +50,18 @@
|
||||
<h3>Business Units</h3>
|
||||
<p>Manage organizational units</p>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/settings/vlans" class="settings-card">
|
||||
<div class="card-icon">🌐</div>
|
||||
<h3>VLANs</h3>
|
||||
<p>Manage virtual LANs</p>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/settings/subnets" class="settings-card">
|
||||
<div class="card-icon">🔗</div>
|
||||
<h3>Subnets</h3>
|
||||
<p>Manage IP subnets and DHCP</p>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -71,8 +83,8 @@
|
||||
.settings-card {
|
||||
display: block;
|
||||
padding: 1.5rem;
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
@@ -80,8 +92,8 @@
|
||||
}
|
||||
|
||||
.settings-card:hover {
|
||||
border-color: #1976d2;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
@@ -91,12 +103,12 @@
|
||||
|
||||
.settings-card h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #333;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.settings-card p {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
color: var(--text-light);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
559
frontend/src/views/settings/SubnetsList.vue
Normal file
559
frontend/src/views/settings/SubnetsList.vue
Normal file
@@ -0,0 +1,559 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>Subnets</h2>
|
||||
<button class="btn btn-primary" @click="openModal()">+ Add Subnet</button>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="filters">
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Search subnets..."
|
||||
@input="debouncedSearch"
|
||||
/>
|
||||
<select v-model="vlanFilter" class="form-control" @change="loadSubnets">
|
||||
<option value="">All VLANs</option>
|
||||
<option v-for="vlan in vlans" :key="vlan.vlanid" :value="vlan.vlanid">
|
||||
VLAN {{ vlan.vlannumber }} - {{ vlan.name }}
|
||||
</option>
|
||||
</select>
|
||||
<select v-model="typeFilter" class="form-control" @change="loadSubnets">
|
||||
<option value="">All Types</option>
|
||||
<option value="ipv4">IPv4</option>
|
||||
<option value="ipv6">IPv6</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>CIDR</th>
|
||||
<th>Name</th>
|
||||
<th>VLAN</th>
|
||||
<th>Gateway</th>
|
||||
<th>DHCP</th>
|
||||
<th>Location</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="subnet in subnets" :key="subnet.subnetid">
|
||||
<td class="mono">{{ subnet.cidr }}</td>
|
||||
<td>{{ subnet.name }}</td>
|
||||
<td>
|
||||
<span v-if="subnet.vlan_name">
|
||||
VLAN {{ subnet.vlan_number }} - {{ subnet.vlan_name }}
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
<td class="mono">{{ subnet.gatewayip || '-' }}</td>
|
||||
<td>
|
||||
<span class="badge" :class="subnet.dhcpenabled ? 'badge-success' : 'badge-secondary'">
|
||||
{{ subnet.dhcpenabled ? 'Enabled' : 'Disabled' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ subnet.location_name || '-' }}</td>
|
||||
<td class="actions">
|
||||
<button
|
||||
class="btn btn-secondary btn-sm"
|
||||
@click="openModal(subnet)"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger btn-sm"
|
||||
@click="confirmDelete(subnet)"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="subnets.length === 0">
|
||||
<td colspan="7" style="text-align: center; color: var(--text-light);">
|
||||
No subnets found
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination" v-if="totalPages > 1">
|
||||
<button
|
||||
v-for="p in totalPages"
|
||||
:key="p"
|
||||
:class="{ active: p === page }"
|
||||
@click="goToPage(p)"
|
||||
>
|
||||
{{ p }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit Modal -->
|
||||
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
||||
<div class="modal modal-lg">
|
||||
<div class="modal-header">
|
||||
<h3>{{ editingSubnet ? 'Edit Subnet' : 'Add Subnet' }}</h3>
|
||||
</div>
|
||||
<form @submit.prevent="saveSubnet">
|
||||
<div class="modal-body">
|
||||
<!-- Basic Info -->
|
||||
<div class="form-section">
|
||||
<h4>Basic Information</h4>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="cidr">CIDR *</label>
|
||||
<input
|
||||
id="cidr"
|
||||
v-model="form.cidr"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="e.g., 10.1.1.0/24"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name *</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="vlanid">VLAN</label>
|
||||
<select id="vlanid" v-model="form.vlanid" class="form-control">
|
||||
<option value="">Select VLAN</option>
|
||||
<option v-for="vlan in vlans" :key="vlan.vlanid" :value="vlan.vlanid">
|
||||
VLAN {{ vlan.vlannumber }} - {{ vlan.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="locationid">Location</label>
|
||||
<select id="locationid" v-model="form.locationid" class="form-control">
|
||||
<option value="">Select Location</option>
|
||||
<option v-for="loc in locations" :key="loc.locationid" :value="loc.locationid">
|
||||
{{ loc.location }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
v-model="form.description"
|
||||
class="form-control"
|
||||
rows="2"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Details -->
|
||||
<div class="form-section">
|
||||
<h4>Network Details</h4>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="gatewayip">Gateway IP</label>
|
||||
<input
|
||||
id="gatewayip"
|
||||
v-model="form.gatewayip"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="e.g., 10.1.1.1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subnetmask">Subnet Mask</label>
|
||||
<input
|
||||
id="subnetmask"
|
||||
v-model="form.subnetmask"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="e.g., 255.255.255.0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="dns1">Primary DNS</label>
|
||||
<input
|
||||
id="dns1"
|
||||
v-model="form.dns1"
|
||||
type="text"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dns2">Secondary DNS</label>
|
||||
<input
|
||||
id="dns2"
|
||||
v-model="form.dns2"
|
||||
type="text"
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DHCP Settings -->
|
||||
<div class="form-section">
|
||||
<h4>DHCP Settings</h4>
|
||||
<div class="form-group checkbox-group">
|
||||
<label>
|
||||
<input type="checkbox" v-model="form.dhcpenabled" />
|
||||
<span>DHCP Enabled</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div v-if="form.dhcpenabled" class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="dhcprangestart">DHCP Range Start</label>
|
||||
<input
|
||||
id="dhcprangestart"
|
||||
v-model="form.dhcprangestart"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="e.g., 10.1.1.100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dhcprangeend">DHCP Range End</label>
|
||||
<input
|
||||
id="dhcprangeend"
|
||||
v-model="form.dhcprangeend"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="e.g., 10.1.1.200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">{{ error }}</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" :disabled="saving">
|
||||
{{ saving ? 'Saving...' : 'Save' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>Delete Subnet</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete subnet <strong>{{ subnetToDelete?.cidr }}</strong>?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
|
||||
<button class="btn btn-danger" @click="deleteSubnet">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { networkApi, locationsApi } from '../../api'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
const subnets = ref([])
|
||||
const vlans = ref([])
|
||||
const locations = ref([])
|
||||
const loading = ref(true)
|
||||
const search = ref('')
|
||||
const vlanFilter = ref('')
|
||||
const typeFilter = ref('')
|
||||
const page = ref(1)
|
||||
const totalPages = ref(1)
|
||||
|
||||
const showModal = ref(false)
|
||||
const editingSubnet = ref(null)
|
||||
const saving = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const showDeleteModal = ref(false)
|
||||
const subnetToDelete = ref(null)
|
||||
|
||||
const form = ref({
|
||||
cidr: '',
|
||||
name: '',
|
||||
description: '',
|
||||
gatewayip: '',
|
||||
subnetmask: '',
|
||||
vlanid: '',
|
||||
locationid: '',
|
||||
subnettype: '',
|
||||
dhcpenabled: true,
|
||||
dhcprangestart: '',
|
||||
dhcprangeend: '',
|
||||
dns1: '',
|
||||
dns2: ''
|
||||
})
|
||||
|
||||
let searchTimeout = null
|
||||
|
||||
onMounted(async () => {
|
||||
// Check for vlanid query parameter
|
||||
if (route.query.vlanid) {
|
||||
vlanFilter.value = route.query.vlanid
|
||||
}
|
||||
|
||||
await Promise.all([
|
||||
loadVLANs(),
|
||||
loadLocations()
|
||||
])
|
||||
await loadSubnets()
|
||||
})
|
||||
|
||||
async function loadVLANs() {
|
||||
try {
|
||||
const response = await networkApi.vlans.list({ per_page: 100 })
|
||||
vlans.value = response.data.data || []
|
||||
} catch (err) {
|
||||
console.error('Error loading VLANs:', err)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadLocations() {
|
||||
try {
|
||||
const response = await locationsApi.list({ per_page: 100 })
|
||||
locations.value = response.data.data || []
|
||||
} catch (err) {
|
||||
console.error('Error loading locations:', err)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSubnets() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: page.value,
|
||||
per_page: 20
|
||||
}
|
||||
if (search.value) params.search = search.value
|
||||
if (vlanFilter.value) params.vlanid = vlanFilter.value
|
||||
if (typeFilter.value) params.type = typeFilter.value
|
||||
|
||||
const response = await networkApi.subnets.list(params)
|
||||
subnets.value = response.data.data || []
|
||||
totalPages.value = response.data.meta?.pagination?.total_pages || 1
|
||||
} catch (err) {
|
||||
console.error('Error loading subnets:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function debouncedSearch() {
|
||||
clearTimeout(searchTimeout)
|
||||
searchTimeout = setTimeout(() => {
|
||||
page.value = 1
|
||||
loadSubnets()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function goToPage(p) {
|
||||
page.value = p
|
||||
loadSubnets()
|
||||
}
|
||||
|
||||
function openModal(subnet = null) {
|
||||
editingSubnet.value = subnet
|
||||
if (subnet) {
|
||||
form.value = {
|
||||
cidr: subnet.cidr || '',
|
||||
name: subnet.name || '',
|
||||
description: subnet.description || '',
|
||||
gatewayip: subnet.gatewayip || '',
|
||||
subnetmask: subnet.subnetmask || '',
|
||||
vlanid: subnet.vlanid || '',
|
||||
locationid: subnet.locationid || '',
|
||||
subnettype: subnet.subnettype || '',
|
||||
dhcpenabled: subnet.dhcpenabled ?? true,
|
||||
dhcprangestart: subnet.dhcprangestart || '',
|
||||
dhcprangeend: subnet.dhcprangeend || '',
|
||||
dns1: subnet.dns1 || '',
|
||||
dns2: subnet.dns2 || ''
|
||||
}
|
||||
} else {
|
||||
form.value = {
|
||||
cidr: '',
|
||||
name: '',
|
||||
description: '',
|
||||
gatewayip: '',
|
||||
subnetmask: '',
|
||||
vlanid: vlanFilter.value || '',
|
||||
locationid: '',
|
||||
subnettype: '',
|
||||
dhcpenabled: true,
|
||||
dhcprangestart: '',
|
||||
dhcprangeend: '',
|
||||
dns1: '',
|
||||
dns2: ''
|
||||
}
|
||||
}
|
||||
error.value = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
editingSubnet.value = null
|
||||
}
|
||||
|
||||
async function saveSubnet() {
|
||||
error.value = ''
|
||||
saving.value = true
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
cidr: form.value.cidr,
|
||||
name: form.value.name,
|
||||
description: form.value.description || null,
|
||||
gatewayip: form.value.gatewayip || null,
|
||||
subnetmask: form.value.subnetmask || null,
|
||||
vlanid: form.value.vlanid || null,
|
||||
locationid: form.value.locationid || null,
|
||||
subnettype: form.value.subnettype || null,
|
||||
dhcpenabled: form.value.dhcpenabled,
|
||||
dhcprangestart: form.value.dhcprangestart || null,
|
||||
dhcprangeend: form.value.dhcprangeend || null,
|
||||
dns1: form.value.dns1 || null,
|
||||
dns2: form.value.dns2 || null
|
||||
}
|
||||
|
||||
if (editingSubnet.value) {
|
||||
await networkApi.subnets.update(editingSubnet.value.subnetid, payload)
|
||||
} else {
|
||||
await networkApi.subnets.create(payload)
|
||||
}
|
||||
closeModal()
|
||||
loadSubnets()
|
||||
} catch (err) {
|
||||
console.error('Error saving subnet:', err)
|
||||
error.value = err.response?.data?.message || 'Failed to save subnet'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(subnet) {
|
||||
subnetToDelete.value = subnet
|
||||
showDeleteModal.value = true
|
||||
}
|
||||
|
||||
async function deleteSubnet() {
|
||||
try {
|
||||
await networkApi.subnets.delete(subnetToDelete.value.subnetid)
|
||||
showDeleteModal.value = false
|
||||
subnetToDelete.value = null
|
||||
loadSubnets()
|
||||
} catch (err) {
|
||||
console.error('Error deleting subnet:', err)
|
||||
alert(err.response?.data?.message || 'Failed to delete subnet')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mono {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filters input {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.filters select {
|
||||
width: auto;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.modal-lg {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.form-section:last-of-type {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-section h4 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-light);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background: var(--secondary);
|
||||
color: var(--text);
|
||||
}
|
||||
</style>
|
||||
369
frontend/src/views/settings/VLANsList.vue
Normal file
369
frontend/src/views/settings/VLANsList.vue
Normal file
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="page-header">
|
||||
<h2>VLANs</h2>
|
||||
<button class="btn btn-primary" @click="openModal()">+ Add VLAN</button>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="filters">
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Search VLANs..."
|
||||
@input="debouncedSearch"
|
||||
/>
|
||||
<select v-model="typeFilter" class="form-control" @change="loadVLANs">
|
||||
<option value="">All Types</option>
|
||||
<option value="data">Data</option>
|
||||
<option value="voice">Voice</option>
|
||||
<option value="management">Management</option>
|
||||
<option value="guest">Guest</option>
|
||||
<option value="iot">IoT</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div v-if="loading" class="loading">Loading...</div>
|
||||
|
||||
<template v-else>
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>VLAN #</th>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Description</th>
|
||||
<th>Subnets</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="vlan in vlans" :key="vlan.vlanid">
|
||||
<td class="mono">{{ vlan.vlannumber }}</td>
|
||||
<td>{{ vlan.name }}</td>
|
||||
<td>
|
||||
<span v-if="vlan.vlantype" class="badge" :class="getTypeClass(vlan.vlantype)">
|
||||
{{ vlan.vlantype }}
|
||||
</span>
|
||||
<span v-else>-</span>
|
||||
</td>
|
||||
<td>{{ vlan.description || '-' }}</td>
|
||||
<td>
|
||||
<router-link
|
||||
:to="{ path: '/settings/subnets', query: { vlanid: vlan.vlanid } }"
|
||||
class="subnet-link"
|
||||
>
|
||||
View Subnets
|
||||
</router-link>
|
||||
</td>
|
||||
<td class="actions">
|
||||
<button
|
||||
class="btn btn-secondary btn-sm"
|
||||
@click="openModal(vlan)"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-danger btn-sm"
|
||||
@click="confirmDelete(vlan)"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="vlans.length === 0">
|
||||
<td colspan="6" style="text-align: center; color: var(--text-light);">
|
||||
No VLANs found
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination" v-if="totalPages > 1">
|
||||
<button
|
||||
v-for="p in totalPages"
|
||||
:key="p"
|
||||
:class="{ active: p === page }"
|
||||
@click="goToPage(p)"
|
||||
>
|
||||
{{ p }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit Modal -->
|
||||
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>{{ editingVLAN ? 'Edit VLAN' : 'Add VLAN' }}</h3>
|
||||
</div>
|
||||
<form @submit.prevent="saveVLAN">
|
||||
<div class="modal-body">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="vlannumber">VLAN Number *</label>
|
||||
<input
|
||||
id="vlannumber"
|
||||
v-model.number="form.vlannumber"
|
||||
type="number"
|
||||
class="form-control"
|
||||
min="1"
|
||||
max="4094"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">Name *</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
class="form-control"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="vlantype">VLAN Type</label>
|
||||
<select id="vlantype" v-model="form.vlantype" class="form-control">
|
||||
<option value="">Select Type</option>
|
||||
<option value="data">Data</option>
|
||||
<option value="voice">Voice</option>
|
||||
<option value="management">Management</option>
|
||||
<option value="guest">Guest</option>
|
||||
<option value="iot">IoT</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
v-model="form.description"
|
||||
class="form-control"
|
||||
rows="3"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">{{ error }}</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" :disabled="saving">
|
||||
{{ saving ? 'Saving...' : 'Save' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>Delete VLAN</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete VLAN <strong>{{ vlanToDelete?.vlannumber }} ({{ vlanToDelete?.name }})</strong>?</p>
|
||||
<p style="color: var(--text-light); font-size: 0.875rem;">
|
||||
VLANs with associated subnets cannot be deleted.
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
|
||||
<button class="btn btn-danger" @click="deleteVLAN">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { networkApi } from '../../api'
|
||||
|
||||
const vlans = ref([])
|
||||
const loading = ref(true)
|
||||
const search = ref('')
|
||||
const typeFilter = ref('')
|
||||
const page = ref(1)
|
||||
const totalPages = ref(1)
|
||||
|
||||
const showModal = ref(false)
|
||||
const editingVLAN = ref(null)
|
||||
const saving = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const showDeleteModal = ref(false)
|
||||
const vlanToDelete = ref(null)
|
||||
|
||||
const form = ref({
|
||||
vlannumber: null,
|
||||
name: '',
|
||||
vlantype: '',
|
||||
description: ''
|
||||
})
|
||||
|
||||
let searchTimeout = null
|
||||
|
||||
onMounted(() => {
|
||||
loadVLANs()
|
||||
})
|
||||
|
||||
async function loadVLANs() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: page.value,
|
||||
per_page: 20
|
||||
}
|
||||
if (search.value) params.search = search.value
|
||||
if (typeFilter.value) params.type = typeFilter.value
|
||||
|
||||
const response = await networkApi.vlans.list(params)
|
||||
vlans.value = response.data.data || []
|
||||
totalPages.value = response.data.meta?.pagination?.total_pages || 1
|
||||
} catch (err) {
|
||||
console.error('Error loading VLANs:', err)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function debouncedSearch() {
|
||||
clearTimeout(searchTimeout)
|
||||
searchTimeout = setTimeout(() => {
|
||||
page.value = 1
|
||||
loadVLANs()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function goToPage(p) {
|
||||
page.value = p
|
||||
loadVLANs()
|
||||
}
|
||||
|
||||
function getTypeClass(type) {
|
||||
switch (type) {
|
||||
case 'data': return 'badge-info'
|
||||
case 'voice': return 'badge-success'
|
||||
case 'management': return 'badge-warning'
|
||||
case 'guest': return 'badge-secondary'
|
||||
case 'iot': return 'badge-primary'
|
||||
default: return 'badge-info'
|
||||
}
|
||||
}
|
||||
|
||||
function openModal(vlan = null) {
|
||||
editingVLAN.value = vlan
|
||||
if (vlan) {
|
||||
form.value = {
|
||||
vlannumber: vlan.vlannumber,
|
||||
name: vlan.name || '',
|
||||
vlantype: vlan.vlantype || '',
|
||||
description: vlan.description || ''
|
||||
}
|
||||
} else {
|
||||
form.value = {
|
||||
vlannumber: null,
|
||||
name: '',
|
||||
vlantype: '',
|
||||
description: ''
|
||||
}
|
||||
}
|
||||
error.value = ''
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
editingVLAN.value = null
|
||||
}
|
||||
|
||||
async function saveVLAN() {
|
||||
error.value = ''
|
||||
saving.value = true
|
||||
|
||||
try {
|
||||
if (editingVLAN.value) {
|
||||
await networkApi.vlans.update(editingVLAN.value.vlanid, form.value)
|
||||
} else {
|
||||
await networkApi.vlans.create(form.value)
|
||||
}
|
||||
closeModal()
|
||||
loadVLANs()
|
||||
} catch (err) {
|
||||
console.error('Error saving VLAN:', err)
|
||||
error.value = err.response?.data?.message || 'Failed to save VLAN'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(vlan) {
|
||||
vlanToDelete.value = vlan
|
||||
showDeleteModal.value = true
|
||||
}
|
||||
|
||||
async function deleteVLAN() {
|
||||
try {
|
||||
await networkApi.vlans.delete(vlanToDelete.value.vlanid)
|
||||
showDeleteModal.value = false
|
||||
vlanToDelete.value = null
|
||||
loadVLANs()
|
||||
} catch (err) {
|
||||
console.error('Error deleting VLAN:', err)
|
||||
alert(err.response?.data?.message || 'Failed to delete VLAN')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mono {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.filters select {
|
||||
width: auto;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.subnet-link {
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.subnet-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background: var(--secondary);
|
||||
color: var(--text);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user