Files
shopdb-flask/plugins/applications/frontend/views/ApplicationDetail.vue
cproudlock 534f179ee6 Make main the lean product a site receives
main was 16 days and 259 commits behind the line the product is actually built
on, at contract 0.30.0 against 0.35.0, with no per-PC credential code at all. It
was neither current nor curated - just stale. This brings it forward and, at the
same time, makes it mean something: main is what a receiving site installs, and
nothing else.

WHAT IT CARRIES. Twelve plugins - backups, computers, endpoints, guides,
knowledgebase, machines, network, notifications, printers, slides, tools,
warranty - plus applications, which is manifest-less core and always ships. The
only manifest dependency inside that set is endpoints on computers, and both are
in it, so the closure is self-contained.

WHAT IT DOES NOT. employees, geenforce, measuringtools, printedparts and usb
stay on the site line. So do the Windows installer tree, the VM rehearsal
helpers, the agent tooling config, one site's data loader, the internal audit
and findings records, and the planner spreadsheet. 1,135 tracked files against
1,438.

A REMOVAL THAT BREAKS THE APP IS NOT A REMOVAL, and two nearly shipped:

deploy/site-profile-universal.json still named all seventeen plugins. It is the
file docs/DEPLOY.md tells a site to provision from, so a fresh install would
have failed at `flask plugin apply-profile` with PluginError - the first thing a
receiving site does, broken by the branch meant to serve them. It now names the
twelve that exist, and its comment says the two must agree.

agent/ was never refreshed. Whoever populated this branch copied shopdb/,
plugins/, frontend/ and tests/ from the site line and left the agent tree at its
September state: 22 C# and PowerShell sources missing, including AgentCredentials,
EnrollmentService, AgentHttpFactory and the fleet-alert client, plus one file the
site line had deleted still present. The old tree is internally consistent, so it
compiles, and nothing in CI builds it - every gate was green over a server that
speaks enrollment and per-PC credentials to a bundled agent source that cannot.
Resynced whole.

DECISIONS THIS ENCODES, rather than defers:

- The plugin-authoring lab builds printedparts, whose manifest depends on
  employees, so it could not stay. The lab remains on the site line and main
  ships no build-along tutorial. That is a real loss for an adopting developer
  and is recorded here rather than discovered later.
- Recognition, Training and Recertification notifications are no longer seeded.
  Each splits one notification into a card per employee and renders a photo,
  which needs a plugin this branch does not bundle. Seeding them would offer an
  author a type that cannot resolve anybody. A site that installs employees gets
  them from that plugin's own seed.
- Windows/IIS is documented as the legacy path throughout, and the README leads
  with Docker, because that is what a receiving site gets.

The API description is regenerated for THIS branch - 347 paths and 483
operations, down from 415 and 573 - so the published contract describes what is
here rather than what the site line serves. docs/CONFIG.md lost the two
measuring-tool label keys the code no longer declares, which two lanes had
decided opposite ways.

Suite: 3124 passed, 6 skipped. Naming and style gates pass. The docs gates run
rather than skip, and every index line count is derived from the file it names.
2026-09-19 11:24:40 -04:00

464 lines
14 KiB
Vue

<template>
<div class="detail-page">
<div class="page-header">
<h2>Application Details</h2>
<div class="header-actions">
<router-link :to="`/applications/${$route.params.id}/edit`" class="btn btn-primary">Edit</router-link>
<router-link to="/applications" class="btn btn-secondary">Back to List</router-link>
</div>
</div>
<div v-if="loading" class="loading">Loading...</div>
<template v-else-if="app">
<!-- Hero Section -->
<div class="hero-card">
<div class="hero-image" v-if="app.image">
<img :src="imageSrc" :alt="app.appname" @error="handleImageError" />
</div>
<div class="hero-image placeholder" v-else>
<span class="placeholder-icon">&#x1F4E6;</span>
</div>
<div class="hero-content">
<div class="hero-title">
<h1>{{ app.appname }}</h1>
</div>
<p class="hero-description" v-if="app.appdescription">{{ app.appdescription }}</p>
<div class="hero-meta">
<span v-if="app.isinstallable" class="badge badge-lg badge-info">Installable</span>
<span v-if="app.islicenced" class="badge badge-lg badge-warning">Licensed</span>
<span v-if="app.isprinter" class="badge badge-lg badge-secondary">Printer App</span>
<span v-if="app.ishidden" class="badge badge-lg badge-dark">Hidden</span>
</div>
<div class="hero-links" v-if="app.installpath || app.documentationpath">
<a v-if="app.installpath" :href="fileHref(app.installpath)" target="_blank" class="hero-link">
<span class="link-icon">&#x2B07;</span> Download Files
</a>
<a v-if="app.documentationpath" :href="fileHref(app.documentationpath)" target="_blank" class="hero-link">
<span class="link-icon">&#x1F4C4;</span> Documentation
</a>
</div>
</div>
</div>
<!-- Main Content Grid -->
<div class="content-grid">
<!-- Left Column -->
<div class="content-column">
<!-- Support -->
<div class="section-card">
<h3 class="section-title">Support</h3>
<div class="info-list">
<div class="info-row">
<span class="info-label">Support Team</span>
<span class="info-value">
<a v-if="app.teamurl" :href="app.teamurl" target="_blank">
{{ app.supportteamname || '-' }}
</a>
<span v-else>{{ app.supportteamname || '-' }}</span>
</span>
</div>
<div class="info-row" v-if="app.applicationlink">
<span class="info-label">Application Link</span>
<!-- Reference only, deliberately not a link. It tells an
operator where to go for new versions; it is not a launch
or download action and must not read as one. -->
<span class="info-value mono reference-value">{{ app.applicationlink }}</span>
</div>
<div class="info-row" v-if="app.contacts && app.contacts.length">
<span class="info-label">Contacts</span>
<span class="info-value">
<span v-for="(contact, index) in app.contacts" :key="index" class="contact-line">
{{ contact.name }}<span v-if="contact.sso" class="mono"> ({{ contact.sso }})</span>
<template v-if="contact.sso && contactEmailDomain">
<a class="contact-action" :href="`mailto:${contactEmail(contact)}`" title="Email">Email</a>
<a class="contact-action" :href="`https://teams.microsoft.com/l/chat/0/0?users=${contactEmail(contact)}`" target="_blank" rel="noopener" title="Teams chat">Teams</a>
</template>
</span>
</span>
</div>
</div>
</div>
<!-- Application Notes -->
<div class="section-card" v-if="app.applicationnotes">
<h3 class="section-title">Application Notes</h3>
<!-- Notes are authored as HTML (form says "HTML supported");
render sanitized so scripts/handlers cannot slip in. -->
<div class="notes-text" v-html="sanitizedNotes"></div>
</div>
<!-- Versions -->
<div class="section-card" v-if="versions.length > 0">
<h3 class="section-title">Available Versions</h3>
<div class="version-list">
<div v-for="ver in versions" :key="ver.appversionid" class="version-item">
<span class="version-number">v{{ ver.version }}</span>
<span class="version-date" v-if="ver.releasedate">{{ formatDate(ver.releasedate) }}</span>
<span class="version-notes" v-if="ver.notes">{{ ver.notes }}</span>
</div>
</div>
</div>
<!-- Related Knowledge Base -->
<div class="section-card" v-if="app.knowledgebase && app.knowledgebase.length">
<h3 class="section-title">Knowledge Base ({{ app.knowledgebase.length }})</h3>
<div class="kb-list">
<a
v-for="kb in app.knowledgebase"
:key="kb.linkid"
:href="kb.linkurl"
target="_blank"
class="kb-item"
>
<span class="kb-title">{{ kb.shortdescription }}</span>
<span class="kb-keywords" v-if="kb.keywords">
<span
v-for="(kw, i) in kbKeywords(kb.keywords)"
:key="i"
class="kb-tag"
>{{ kw }}</span>
</span>
</a>
</div>
</div>
</div>
<!-- Right Column -->
<div class="content-column">
<!-- Installed On PCs -->
<div class="section-card">
<h3 class="section-title">Installed On ({{ installedOn.length }} PCs)</h3>
<div v-if="installedOn.length > 0" class="pc-list">
<router-link
v-for="install in installedOn"
:key="install.id"
:to="`/pcs/${install.computerid}`"
class="pc-item"
>
<div class="pc-info">
<span class="pc-name">{{ install.computer?.hostname || install.computer?.assetnumber || `PC #${install.computerid}` }}</span>
<span class="pc-alias" v-if="install.computer?.assetnumber">{{ install.computer.assetnumber }}</span>
</div>
<div class="pc-version" v-if="install.version">
v{{ install.version }}
</div>
</router-link>
</div>
<div v-else class="empty-state">
<p>Not installed on any PCs</p>
</div>
</div>
</div>
</div>
<!-- Audit Footer -->
<div class="audit-footer">
<span>Created {{ formatDate(app.createddate) }}</span>
<span>Modified {{ formatDate(app.modifieddate) }}</span>
</div>
</template>
<div v-else class="card">
<p style="text-align: center; color: var(--text-light);">Application not found</p>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { applicationsApi } from '@/api'
import { getContactEmailDomain } from '@/utils/siteSettings'
import { sanitizeNotesHtml } from '@/utils/sanitizeHtml'
import { fileHref } from '@/utils/basePath'
import { setRecordTitle } from '@/composables/pageTitle'
const route = useRoute()
const loading = ref(true)
const app = ref(null)
// An uploaded image is stored as a served URL; entries from the classic site
// are a bare filename that still lives under the frontend's own directory.
// Both have to render, so the shape of the value decides the source.
const imageSrc = computed(() => {
const value = app.value?.image
if (!value) return ''
return value.startsWith('/api/') || value.startsWith('http')
? value
: `/images/applications/${value}`
})
const versions = ref([])
const installedOn = ref([])
const contactEmailDomain = ref('')
// Application notes are HTML; sanitize before binding with v-html.
const sanitizedNotes = computed(() => sanitizeNotesHtml(app.value?.applicationnotes))
// Build sso@domain for a contact. Assumes contact.sso and domain are set.
function contactEmail(contact) {
return `${contact.sso}@${contactEmailDomain.value}`
}
onMounted(async () => {
try {
contactEmailDomain.value = await getContactEmailDomain()
// Load application details
const response = await applicationsApi.get(route.params.id)
app.value = response.data.data
setRecordTitle(app.value?.appname)
// Load versions
try {
const versionsRes = await applicationsApi.getVersions(route.params.id)
versions.value = versionsRes.data.data || []
} catch (e) {
}
// Load installed on which PCs
try {
const installedRes = await applicationsApi.getInstalledOn(route.params.id)
installedOn.value = installedRes.data.data || []
} catch (e) {
}
} catch (error) {
console.error('Error loading application:', error)
} finally {
loading.value = false
}
})
function formatDate(dateStr) {
if (!dateStr) return '-'
return new Date(dateStr).toLocaleDateString()
}
function handleImageError(e) {
e.target.style.display = 'none'
}
// Keywords are stored space-separated; split into chips for the KB card.
function kbKeywords(keywords) {
return (keywords || '').split(/\s+/).filter(Boolean)
}
</script>
<style scoped>
/* Application-specific styles - shared styles are in global style.css */
/* Knowledge Base card: each entry is a bordered block, not a run-on line.
shortdescription (up to 500 chars) clamps to 2 lines; keywords render as
small chips below instead of a second wall of text. */
.kb-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.kb-item {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.6rem 0.75rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg);
text-decoration: none;
transition: border-color 0.15s, background 0.15s;
}
.kb-item:hover {
border-color: var(--primary);
background: var(--bg-card);
}
.kb-title {
color: var(--link);
font-weight: 600;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kb-keywords {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.kb-tag {
font-size: 0.72rem;
color: var(--text-light);
background: var(--bg-card);
border: 1px solid var(--border);
padding: 0.1rem 0.45rem;
border-radius: 10px;
white-space: nowrap;
}
/* Hero description (app-specific) */
.hero-description {
color: var(--text-light);
margin: 0;
font-size: 1.125rem;
line-height: 1.5;
}
/* Hero links (app-specific) */
.hero-links {
display: flex;
gap: 1rem;
margin-top: auto;
flex-wrap: wrap;
}
.hero-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: var(--bg);
border-radius: 8px;
text-decoration: none;
color: var(--text);
font-weight: 500;
font-size: 1.125rem;
transition: background 0.15s;
}
.hero-link:hover {
background: var(--border);
}
.link-icon {
font-size: 1.25rem;
}
/* Placeholder image */
.hero-image.placeholder {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.placeholder-icon {
font-size: 5rem;
opacity: 0.5;
}
/* Version List */
.version-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.version-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 1rem;
background: var(--bg);
border-radius: 6px;
}
.version-number {
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
font-weight: 600;
font-size: 1.125rem;
color: var(--link);
}
.version-date {
font-size: 1rem;
color: var(--text-light);
}
.version-notes {
font-size: 1rem;
color: var(--text-light);
margin-left: auto;
}
/* PC List */
.pc-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-height: 400px;
overflow-y: auto;
}
.pc-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
background: var(--bg);
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: background 0.15s;
}
.pc-item:hover {
background: var(--border);
}
.pc-info {
display: flex;
flex-direction: column;
}
.pc-name {
font-weight: 500;
font-size: 1.125rem;
color: var(--text);
}
.pc-alias {
font-size: 1rem;
color: var(--text-light);
}
.pc-version {
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
font-size: 1rem;
color: var(--primary);
background: var(--bg-card);
padding: 0.375rem 0.75rem;
border-radius: 6px;
border: 1px solid var(--border);
}
/* Empty state */
.empty-state {
text-align: center;
padding: 2.5rem;
color: var(--text-light);
font-size: 1.125rem;
}
/* Support contacts stack one per line */
.reference-value {
word-break: break-all;
user-select: all;
}
.contact-line {
display: block;
}
/* Notes styling - rendered as escaped plain text, preserve author line breaks */
.notes-text {
/* Rendered HTML (v-html): block tags handle spacing, so no pre-wrap. */
white-space: normal;
word-break: break-word;
line-height: 1.5;
}
.notes-text :first-child { margin-top: 0; }
.notes-text :last-child { margin-bottom: 0; }
.notes-text p { margin: 0 0 0.6rem; }
.notes-text ul,
.notes-text ol { margin: 0 0 0.6rem 1.4rem; }
.notes-text a { color: var(--link); }
.notes-text code,
.notes-text pre { background: var(--bg); border-radius: 4px; padding: 0.1rem 0.3rem; }
</style>