ge-aerospace/shopdb-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate frontend to plugin-based asset architecture

Browse Source 
- Add equipmentApi and computersApi to replace legacy machinesApi
- Add controller vendor/model fields to Equipment model and forms
- Fix map marker navigation to use plugin-specific IDs (equipmentid,
  computerid, printerid, networkdeviceid) instead of assetid
- Fix search to use unified Asset table with correct plugin IDs
- Remove legacy printer search that used non-existent field names
- Enable optional JWT auth for detail endpoints (public read access)
- Clean up USB plugin models (remove unused checkout model)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
2026-01-29 16:07:41 -05:00
parent 9c220a4194
commit c3ce69da12
28 changed files with 4123 additions and 3454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
frontend/src/views/MapView.vue
View File

@@ -10,19 +10,44 @@
<div v-if="loading" class="loading">Loading...</div>
<template v-else>
<!-- Layer Toggles -->
<div class="layer-toggles">
<label v-for="t in assetTypes" :key="t.assettypeid" class="layer-toggle">
<input
type="checkbox"
v-model="visibleTypes"
:value="t.assettype"
@change="updateMapLayers"
/>
<span class="layer-icon">{{ getTypeIcon(t.assettype) }}</span>
<span>{{ t.assettype }}</span>
<span class="layer-count">({{ getTypeCount(t.assettype) }})</span>
</label>
<!-- Filter Controls -->
<div class="map-filters">
<select v-model="selectedType" @change="onTypeChange">
<option value="">All Asset Types</option>
<option v-for="t in assetTypes" :key="t.assettypeid" :value="t.assettype">
{{ formatTypeName(t.assettype) }} ({{ getTypeCount(t.assettype) }})
</option>
</select>
<select v-model="selectedSubtype" @change="updateMapLayers" :disabled="!selectedType || !currentSubtypes.length">
<option value="">{{ subtypeLabel }}</option>
<option v-for="st in currentSubtypes" :key="st.id" :value="st.id">
{{ st.name }}
</option>
</select>
<select v-model="selectedBusinessUnit" @change="updateMapLayers">
<option value="">All Business Units</option>
<option v-for="bu in businessunits" :key="bu.businessunitid" :value="bu.businessunitid">
{{ bu.businessunit }}
</option>
</select>
<select v-model="selectedStatus" @change="updateMapLayers">
<option value="">All Statuses</option>
<option v-for="s in statuses" :key="s.statusid" :value="s.statusid">
{{ s.status }}
</option>
</select>
<input
type="text"
v-model="searchQuery"
placeholder="Search assets..."
@input="debouncedSearch"
/>
<span class="result-count">{{ filteredAssets.length }} assets</span>
</div>
<ShopFloorMap
@@ -32,6 +57,9 @@
:statuses="statuses"
:assetTypeMode="true"
:theme="currentTheme"
:selectedAssetType="selectedType"
:subtypeColors="subtypeColorMap"
:subtypeNames="subtypeNameMap"
@markerClick="handleMarkerClick"
/>
</template>
@@ -53,11 +81,125 @@ const assets = ref([])
const assetTypes = ref([])
const businessunits = ref([])
const statuses = ref([])
const visibleTypes = ref([])
const subtypes = ref({})
// Filter state
const selectedType = ref('')
const selectedSubtype = ref('')
const selectedBusinessUnit = ref('')
const selectedStatus = ref('')
const searchQuery = ref('')
let searchTimeout = null
// Case-insensitive lookup helper for subtypes
function getSubtypesForType(typeName) {
if (!typeName || !subtypes.value) return []
// Try exact match first
if (subtypes.value[typeName]) return subtypes.value[typeName]
// Try case-insensitive match
const lowerType = typeName.toLowerCase()
for (const [key, value] of Object.entries(subtypes.value)) {
if (key.toLowerCase() === lowerType) return value
}
return []
}
const currentSubtypes = computed(() => {
if (!selectedType.value) return []
return getSubtypesForType(selectedType.value)
})
const subtypeLabel = computed(() => {
if (!selectedType.value) return 'Select type first'
if (!currentSubtypes.value.length) return 'No subtypes'
const labels = {
'equipment': 'All Machine Types',
'computer': 'All Computer Types',
'network device': 'All Device Types',
'printer': 'All Printer Types'
}
return labels[selectedType.value.toLowerCase()] || 'All Subtypes'
})
// Generate distinct colors for subtypes
const subtypeColorPalette = [
'#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5',
'#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50',
'#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
'#FF5722', '#795548', '#607D8B', '#00ACC1', '#5C6BC0'
]
// Map subtype IDs to colors
const subtypeColorMap = computed(() => {
const colorMap = {}
const allSubtypes = currentSubtypes.value
allSubtypes.forEach((st, index) => {
colorMap[st.id] = subtypeColorPalette[index % subtypeColorPalette.length]
})
return colorMap
})
// Map subtype IDs to names
const subtypeNameMap = computed(() => {
const nameMap = {}
currentSubtypes.value.forEach(st => {
nameMap[st.id] = st.name
})
return nameMap
})
const filteredAssets = computed(() => {
if (visibleTypes.value.length === 0) return assets.value
return assets.value.filter(a => visibleTypes.value.includes(a.assettype))
let result = assets.value
// Filter by asset type (case-insensitive)
if (selectedType.value) {
const selectedLower = selectedType.value.toLowerCase()
result = result.filter(a => a.assettype && a.assettype.toLowerCase() === selectedLower)
}
// Filter by subtype (case-insensitive type check)
if (selectedSubtype.value) {
const subtypeId = parseInt(selectedSubtype.value)
const typeLower = selectedType.value?.toLowerCase() || ''
result = result.filter(a => {
if (!a.typedata) return false
// Check different ID fields based on asset type
if (typeLower === 'equipment') {
return a.typedata.equipmenttypeid === subtypeId
} else if (typeLower === 'computer') {
return a.typedata.computertypeid === subtypeId
} else if (typeLower === 'network device') {
return a.typedata.networkdevicetypeid === subtypeId
} else if (typeLower === 'printer') {
return a.typedata.printertypeid === subtypeId
}
return false
})
}
// Filter by business unit
if (selectedBusinessUnit.value) {
result = result.filter(a => a.businessunitid === parseInt(selectedBusinessUnit.value))
}
// Filter by status
if (selectedStatus.value) {
result = result.filter(a => a.statusid === parseInt(selectedStatus.value))
}
// Filter by search query
if (searchQuery.value) {
const q = searchQuery.value.toLowerCase()
result = result.filter(a =>
(a.assetnumber && a.assetnumber.toLowerCase().includes(q)) ||
(a.name && a.name.toLowerCase().includes(q)) ||
(a.displayname && a.displayname.toLowerCase().includes(q)) ||
(a.serialnumber && a.serialnumber.toLowerCase().includes(q))
)
}
return result
})
onMounted(async () => {
@@ -69,9 +211,7 @@ onMounted(async () => {
assetTypes.value = data.filters?.assettypes || []
businessunits.value = data.filters?.businessunits || []
statuses.value = data.filters?.statuses || []
// Default: show all types
visibleTypes.value = assetTypes.value.map(t => t.assettype)
subtypes.value = data.filters?.subtypes || {}
} catch (error) {
console.error('Failed to load map data:', error)
} finally {
@@ -79,43 +219,69 @@ onMounted(async () => {
}
})
function getTypeIcon(assettype) {
const icons = {
'equipment': '⚙',
'computer': '💻',
'printer': '🖨',
'network_device': '🌐'
function formatTypeName(assettype) {
if (!assettype) return assettype
const names = {
'equipment': 'Equipment',
'computer': 'Computers',
'printer': 'Printers',
'network device': 'Network Devices',
'network_device': 'Network Devices'
}
return icons[assettype] || '📦'
return names[assettype.toLowerCase()] || assettype
}
function getTypeCount(assettype) {
return assets.value.filter(a => a.assettype === assettype).length
if (!assettype) return 0
const lowerType = assettype.toLowerCase()
return assets.value.filter(a => a.assettype && a.assettype.toLowerCase() === lowerType).length
}
function onTypeChange() {
// Reset subtype when type changes
selectedSubtype.value = ''
updateMapLayers()
}
function updateMapLayers() {
// Filter is reactive via computed property
}
function debouncedSearch() {
clearTimeout(searchTimeout)
searchTimeout = setTimeout(() => {
updateMapLayers()
}, 300)
}
function handleMarkerClick(asset) {
// Route based on asset type
// Route based on asset type (lowercase keys to match API data)
const assetType = (asset.assettype || '').toLowerCase()
const routeMap = {
'equipment': '/machines',
'computer': '/pcs',
'printer': '/printers',
'network_device': '/network'
'network_device': '/network',
'network device': '/network'
}
const basePath = routeMap[asset.assettype] || '/machines'
const basePath = routeMap[assetType] || '/machines'
// For network devices, use the networkdeviceid from typedata
if (asset.assettype === 'network_device' && asset.typedata?.networkdeviceid) {
router.push(`/network/${asset.typedata.networkdeviceid}`)
} else {
// For machines (equipment, computer, printer), use machineid from typedata
const id = asset.typedata?.machineid || asset.assetid
router.push(`${basePath}/${id}`)
// Get the plugin-specific ID from typedata
let id = asset.assetid // fallback
if (asset.typedata) {
if (assetType === 'equipment' && asset.typedata.equipmentid) {
id = asset.typedata.equipmentid
} else if (assetType === 'computer' && asset.typedata.computerid) {
id = asset.typedata.computerid
} else if (assetType === 'printer' && asset.typedata.printerid) {
id = asset.typedata.printerid
} else if ((assetType === 'network_device' || assetType === 'network device') && asset.typedata.networkdeviceid) {
id = asset.typedata.networkdeviceid
}
}
router.push(`${basePath}/${id}`)
}
</script>
@@ -130,43 +296,45 @@ function handleMarkerClick(asset) {
flex-shrink: 0;
}
.layer-toggles {
.map-filters {
display: flex;
gap: 1rem;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.layer-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.map-filters select,
.map-filters input {
padding: 0.5rem 0.75rem;
border: 1px solid var(--border);
border-radius: 6px;
transition: background 0.2s;
}
.layer-toggle:hover {
background: var(--bg);
color: var(--text);
font-size: 0.875rem;
}
.layer-toggle input[type="checkbox"] {
width: 1.125rem;
height: 1.125rem;
.map-filters select {
min-width: 160px;
}
.layer-icon {
font-size: 1.25rem;
.map-filters select:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.layer-count {
.map-filters input {
min-width: 180px;
}
.result-count {
color: var(--text-light);
font-size: 0.875rem;
margin-left: auto;
}
.map-page :deep(.shopfloor-map) {