ebca0b00b0
Relocate warranty, measuringtools, network, printers, usb, notifications, computers, and slides into plugins/<name>/frontend/. Each plugin's views are pulled from wherever they lived (own dir, plus the shared views/settings/, views/reports/, views/print/ dirs, and top-level views) into the plugin's frontend/views/, and its route file becomes the self-contained routes.js. Handled the messy cases: - computers: name mismatch (its views live in views/pcs/) - moved by following the route file's own imports, so the dir name did not matter. Its OS/access- protocol/PC-type settings views move with it (only computers.js routed them). - network: NetworkHub's sibling sub-views (NetworkDevicesList, SubnetsBrowse, not directly routed) moved too so its `./` imports resolve. - printers: the qrLogo helper is SHARED with core AssetLabel, so it stays in views/print/ and PrinterQR imports it via @/views/print/qrLogo. - slides: route file is toplevel-only (TVDashboard); SlideManager stays core (core.js routes /settings/slides). frontend/src/views/ now holds only core views; frontend/src/router/routes/ holds only core.js. All 13 plugins are self-contained under plugins/<name>/frontend/. Verified live: Network (hub + moved sub-views), Computers (name mismatch), GE-Enforce (helper), printedparts all render from their staged frontends. Build + 58 vitest + naming green.
76 lines
2.3 KiB
Vue
76 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="filters">
|
|
<input v-model="search" type="text" placeholder="Search networks..." class="form-control" />
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div v-if="loading" class="loading">Loading...</div>
|
|
<div v-else-if="filtered.length === 0" class="empty-state"><p>No networks found.</p></div>
|
|
<div v-else class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>CIDR</th>
|
|
<th>Type</th>
|
|
<th>VLAN</th>
|
|
<th>Notes</th>
|
|
<th class="actions"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="subnet in filtered" :key="subnet.subnetid" class="clickable-row"
|
|
@click="$router.push(`/networks/${subnet.subnetid}`)">
|
|
<td>{{ subnet.name || '-' }}</td>
|
|
<td class="mono">{{ subnet.cidr }}</td>
|
|
<td>{{ subnet.subnettype || '-' }}</td>
|
|
<td>{{ subnet.vlannumber || subnet.vlanid || '-' }}</td>
|
|
<td class="cell-truncate" :title="subnet.description">{{ subnet.description || '-' }}</td>
|
|
<td class="actions">
|
|
<router-link :to="`/networks/${subnet.subnetid}`" class="btn btn-sm btn-secondary" @click.stop>View</router-link>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { networkApi } from '@/api'
|
|
|
|
const subnets = ref([])
|
|
const loading = ref(true)
|
|
const search = ref('')
|
|
|
|
const filtered = computed(() => {
|
|
const term = search.value.trim().toLowerCase()
|
|
if (!term) return subnets.value
|
|
return subnets.value.filter(s =>
|
|
(s.name || '').toLowerCase().includes(term) ||
|
|
(s.cidr || '').toLowerCase().includes(term) ||
|
|
(s.subnettype || '').toLowerCase().includes(term) ||
|
|
(s.description || '').toLowerCase().includes(term))
|
|
})
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
try {
|
|
const response = await networkApi.subnets.list({ per_page: 1000 })
|
|
subnets.value = response.data?.data || response.data || []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(load)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.clickable-row { cursor: pointer; }
|
|
.clickable-row:hover { background: var(--bg); }
|
|
</style>
|