Files
shopdb-flask/plugins/machines/frontend/views/MachineDetail.vue
cproudlock 3f320fcc8b
Some checks failed
CI / backend (push) Failing after 7s
CI / naming (push) Successful in 1s
CI / frontend (push) Successful in 8s
CI / migrations-mysql (push) Failing after 7s
Derive an asset's vendor from its catalog model, and show the model's own type
An asset that carries a model but no vendor was showing a blank the database
could already answer: the model records its vendor, and both sides reference the
same vendors table. Machines, PCs, printers and network devices now fall back to
it.

The fallback is FLAGGED, not merged silently. to_dict sets vendorfrommodel and
the detail pages render "(from model)" beside the value, because the record
itself is still empty: the edit form shows an empty vendor box, and a page
implying the vendor is stored would be lying about where it came from.

The model's type is exposed under its own name, modeltypename, and shown as a
separate "Model type" row. It is deliberately NOT used to fill in the asset's
own type. modeltypes is the catalog-wide list covering every kind of asset - it
holds "Access Point", "Camera" and "Desktop PC" alongside the machine entries -
so it is a different taxonomy from machinetypes. Only about two thirds of the
names overlap, and mapping one onto the other would mistype the remainder, with
the failure mode being a machine labelled "Desktop PC".

scripts/backfill_vendor_from_model.py writes the derived vendor down for real,
since the display fallback leaves reports that read vendorid still seeing
nothing. It is a dry run unless given --commit, fills only rows where the
asset's vendor is NULL and the model names one, and never overwrites a vendor
somebody chose. It skips a table lacking either column, so it runs against a
server whose network migration has not been applied yet.

Verified against the development database by nulling one machine's vendor inside
a transaction: it was detected as fillable, restored to exactly its original
value, and the rollback left the row untouched.

FLASK_ENV is not forced by the script. The app already reads it from .env, and
overriding it demanded a SECRET_KEY the environment had no reason to supply.
2026-08-05 09:59:39 -04:00

333 lines
13 KiB
Vue

<template>
<div class="detail-page">
<div class="page-header">
<h2>Machine Details</h2>
<div class="header-actions">
<router-link :to="`/print/machine-badge/${machine?.machine?.machineid}`" class="btn btn-secondary" v-if="machine" target="_blank">
Print Badge
</router-link>
<router-link :to="`/print/asset-label/machine/${machine?.machine?.machineid}`" class="btn btn-secondary" v-if="machine" target="_blank">
Print Label
</router-link>
<router-link :to="`/machines/${machine?.machine?.machineid}/edit`" class="btn btn-primary" v-if="machine">
Edit
</router-link>
<router-link to="/machines" class="btn btn-secondary">Back to List</router-link>
</div>
</div>
<div v-if="loading" class="loading">Loading...</div>
<template v-else-if="machine">
<!-- Dual-bay sibling banner: a Dualpath pair is one physical machine -->
<div v-if="machine.dualpathpartner" class="dualpath-banner">
Dual-bay machine - sibling bay:
<router-link
v-if="machine.dualpathpartner.machineid"
:to="`/machines/${machine.dualpathpartner.machineid}`"
>{{ machine.dualpathpartner.assetnumber }}</router-link>
<span v-else>{{ machine.dualpathpartner.assetnumber }}</span>
</div>
<!-- Hero Section -->
<div class="hero-card">
<div class="hero-image" v-if="machine.machine?.imageurl">
<img :src="withBase(machine.machine.imageurl)" :alt="machine.machine.modelname || 'Model photo'" />
</div>
<div class="hero-content">
<div class="hero-title">
<h1>{{ machine.assetnumber }}</h1>
<span v-if="machine.name" class="hero-alias">{{ machine.name }}</span>
</div>
<div class="hero-meta">
<span class="badge badge-lg badge-primary">
{{ machine.assettypename || 'Machine' }}
</span>
<span class="badge badge-lg" :class="getStatusClass(machine.statusname)">
{{ machine.statusname || 'Unknown' }}
</span>
<span v-if="heroWarranty" class="badge badge-lg" :style="{ background: heroWarranty.statuscolor, color: '#fff' }"
:title="heroWarranty.enddate ? `Warranty ends ${warrantyDate(heroWarranty.enddate)}` : 'Warranty'">
{{ heroWarranty.label }}<template v-if="heroWarranty.enddate"> - {{ warrantyDate(heroWarranty.enddate) }}</template>
</span>
</div>
<div class="hero-details">
<div class="hero-detail" v-if="machine.machine?.machinetypename">
<span class="hero-detail-label">Type</span>
<span class="hero-detail-value">{{ machine.machine.machinetypename }}</span>
</div>
<div class="hero-detail" v-if="machine.machine?.vendorname">
<span class="hero-detail-label">Vendor</span>
<span class="hero-detail-value">{{ machine.machine.vendorname }}</span>
</div>
<div class="hero-detail" v-if="machine.machine?.modelname">
<span class="hero-detail-label">Model</span>
<span class="hero-detail-value">{{ machine.machine.modelname }}</span>
</div>
<div class="hero-detail" v-if="machine.locationname">
<span class="hero-detail-label">Location</span>
<span class="hero-detail-value">{{ machine.locationname }}</span>
</div>
</div>
</div>
</div>
<!-- Canonical card order: Identity -> type-specific -> status -> Location & Organization -> domain -> Custom Fields -> Warranty -> Relationships -> Notes -> audit footer -->
<!-- Main Content Grid -->
<div class="content-grid">
<!-- Left Column -->
<div class="content-column">
<!-- Identity Section -->
<div class="section-card">
<h3 class="section-title">Identity</h3>
<div class="info-list">
<div class="info-row">
<span class="info-label">Asset Number</span>
<span class="info-value">{{ machine.assetnumber }}</span>
</div>
<div class="info-row" v-if="machine.name">
<span class="info-label">Name</span>
<span class="info-value">{{ machine.name }}</span>
</div>
<div class="info-row" v-if="isEnabled('gaugelabreference', 'machine') && machine.gaugelabreference">
<span class="info-label">Gauge Lab Reference</span>
<span class="info-value mono">{{ machine.gaugelabreference }}</span>
</div>
<div class="info-row" v-if="isEnabled('maintenancereference', 'machine') && machine.maintenancereference">
<span class="info-label">Maintenance Reference</span>
<span class="info-value mono">{{ machine.maintenancereference }}</span>
</div>
<div class="info-row" v-if="machine.serialnumber">
<span class="info-label">Serial Number</span>
<span class="info-value mono">{{ machine.serialnumber }}</span>
</div>
</div>
</div>
<!-- Hardware Section -->
<div class="section-card">
<h3 class="section-title">Hardware</h3>
<div class="info-list">
<div class="info-row">
<span class="info-label">Type</span>
<span class="info-value">{{ machine.machine?.machinetypename || '-' }}</span>
</div>
<div class="info-row">
<span class="info-label">Vendor</span>
<span class="info-value">
{{ machine.machine?.vendorname || '-' }}
<!-- Inherited from the catalog model, not stored on this record. -->
<small v-if="machine.machine?.vendorfrommodel" class="text-muted">(from model)</small>
</span>
</div>
<div class="info-row">
<span class="info-label">Model</span>
<span class="info-value">{{ machine.machine?.modelname || '-' }}</span>
</div>
<!-- The catalog model's own type. Kept separate from this
asset's type: modeltypes spans every kind of asset. -->
<div class="info-row" v-if="machine.machine?.modeltypename">
<span class="info-label">Model type</span>
<span class="info-value">{{ machine.machine.modeltypename }}</span>
</div>
</div>
</div>
<!-- Controller Section (for CNC machines) -->
<div class="section-card" v-if="machine.machine?.controllervendorname || machine.machine?.controllermodelname">
<h3 class="section-title">Controller</h3>
<div class="info-list">
<div class="info-row">
<span class="info-label">Vendor</span>
<span class="info-value">{{ machine.machine?.controllervendorname || '-' }}</span>
</div>
<div class="info-row">
<span class="info-label">Model</span>
<span class="info-value">{{ machine.machine?.controllermodelname || '-' }}</span>
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="content-column">
<!-- Location & Organization -->
<div class="section-card">
<h3 class="section-title">Location & Organization</h3>
<div class="info-list">
<div class="info-row">
<span class="info-label">Location</span>
<span class="info-value">
<LocationMapTooltip
v-if="machine.mapx != null && machine.mapy != null"
:left="machine.mapx"
:top="machine.mapy"
:machineName="machine.assetnumber"
>
<span class="location-link">{{ machine.locationname || 'On Map' }}</span>
</LocationMapTooltip>
<span v-else>{{ machine.locationname || '-' }}</span>
</span>
</div>
<div class="info-row">
<span class="info-label">Business Unit</span>
<span class="info-value">{{ machine.businessunitname || '-' }}</span>
</div>
</div>
</div>
<!-- Machine Configuration -->
<div class="section-card">
<h3 class="section-title">Configuration</h3>
<div class="info-list">
<div class="info-row">
<span class="info-label">Requires Manual Config</span>
<span class="info-value">
<span class="feature-tag" :class="{ active: machine.machine?.requiresmanualconfig }">
{{ machine.machine?.requiresmanualconfig ? 'Yes' : 'No' }}
</span>
</span>
</div>
</div>
</div>
<!-- Maintenance Section -->
<div class="section-card" v-if="machine.machine?.lastmaintenancedate || machine.machine?.nextmaintenancedate">
<h3 class="section-title">Maintenance</h3>
<div class="info-list">
<div class="info-row" v-if="machine.machine?.lastmaintenancedate">
<span class="info-label">Last Maintenance</span>
<span class="info-value">{{ formatDate(machine.machine.lastmaintenancedate) }}</span>
</div>
<div class="info-row" v-if="machine.machine?.nextmaintenancedate">
<span class="info-label">Next Maintenance</span>
<span class="info-value">{{ formatDate(machine.machine.nextmaintenancedate) }}</span>
</div>
<div class="info-row" v-if="machine.machine?.maintenanceintervaldays">
<span class="info-label">Interval</span>
<span class="info-value">{{ machine.machine.maintenanceintervaldays }} days</span>
</div>
</div>
</div>
<!-- Custom Fields -->
<CustomFieldsSection :assetid="machine.assetid" />
<!-- Plugin-contributed detail panels (ADR-010), incl. Warranty -->
<PluginAssetPanels :assetid="machine.assetid" />
<!-- All relationships (dualpath, controls, ...) -->
<AssetRelationships v-if="machine.assetid" :assetid="machine.assetid" />
<!-- Notes -->
<div class="section-card" v-if="machine.notes">
<h3 class="section-title">Notes</h3>
<p class="notes-text">{{ machine.notes }}</p>
</div>
</div>
</div>
<!-- Audit Footer -->
<div class="audit-footer">
<span>Created {{ formatDate(machine.createddate) }}<template v-if="machine.createdby"> by {{ machine.createdby }}</template></span>
<span>Modified {{ formatDate(machine.modifieddate) }}<template v-if="machine.modifiedby"> by {{ machine.modifiedby }}</template></span>
</div>
</template>
<div v-else class="card">
<p style="text-align: center; color: var(--text-light);">Machine not found</p>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { machinesApi } from '@/api'
import { withBase } from '@/utils/basePath'
import LocationMapTooltip from '@/components/LocationMapTooltip.vue'
import CustomFieldsSection from '@/components/CustomFieldsSection.vue'
import PluginAssetPanels from '@/components/PluginAssetPanels.vue'
import AssetRelationships from '@/components/AssetRelationships.vue'
import { useWarrantyBadge } from '@/composables/warrantyBadge'
import { useIdentifierFlags } from '@/composables/identifierSettings'
const route = useRoute()
const { isEnabled } = useIdentifierFlags()
const loading = ref(true)
const machine = ref(null)
const { heroWarranty, warrantyDate } = useWarrantyBadge(() => machine.value?.assetid)
// relationships render via the shared AssetRelationships card
onMounted(async () => {
try {
const response = await machinesApi.get(route.params.id)
machine.value = response.data.data
} catch (error) {
console.error('Error loading machine:', error)
} finally {
loading.value = false
}
})
function getStatusClass(status) {
if (!status) return 'badge-info'
const s = status.toLowerCase()
if (s === 'in use' || s === 'active') return 'badge-success'
if (s === 'in repair' || s === 'spare') return 'badge-warning'
if (s === 'retired' || s === 'disposed') return 'badge-danger'
return 'badge-info'
}
function formatDate(dateStr) {
if (!dateStr) return '-'
return new Date(dateStr).toLocaleString()
}
</script>
<style scoped>
.mono {
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}
.dualpath-banner {
margin-bottom: 16px;
padding: 10px 14px;
border-radius: 6px;
background: var(--bg-card);
border: 1px solid var(--border);
border-left: 4px solid var(--primary);
color: var(--text);
font-size: 0.9rem;
}
.dualpath-banner a {
color: var(--link);
font-weight: 600;
}
.feature-tag {
display: inline-block;
padding: 0.3rem 0.625rem;
font-size: 0.875rem;
border-radius: 5px;
background: var(--bg);
color: var(--text-light);
}
.feature-tag.active {
background: #e3f2fd;
color: #1976d2;
}
@media (prefers-color-scheme: dark) {
.feature-tag.active {
background: #1e3a5f;
color: #60a5fa;
}
}
</style>