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

Upload an application's image and installer instead of typing paths

Browse Source 
Adding an application meant typing an image FILENAME and trusting someone had
dropped the file into the frontend's own directory by hand, and typing an
install path from memory. Both are uploads now, following the model-image trio
that models and part photos already use.

The two differ deliberately. The image is public, because application tiles
render before anything is authenticated. The installer is not: it is licensed
vendor software, an open URL would publish it to anything that can reach the
site, and it is always sent as an attachment rather than rendered.

Installers are capped at 500MB and the size is measured by seeking the stream
rather than trusting Content-Length, which a chunked upload does not send and a
client can understate. Anything larger belongs on the share, and the error says
so rather than just refusing.

Files are chosen before a new application exists, so they are held and uploaded
once there is an id to attach them to. A failed upload leaves the saved record
alone and reports, rather than losing what saved fine.

Removing an installer only clears installpath when it pointed at the upload - a
share path was typed by a person and is not ours to wipe. The detail page reads
both shapes, since entries from the classic site hold a bare filename that is
still served from /images/applications/.
This commit is contained in:
cproudlock
2026-08-12 11:45:17 -04:00
parent 2693eb28d6
commit c28b02e45b
5 changed files with 1033 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/api/index.js
View File

@@ -306,6 +306,9 @@ export const printersApi = {
getDrivers(id) {
return api.get(`/printers/${id}/drivers`)
},
supplyForecast(days = 90) {
return api.get('/printers/supplies/forecast', { params: { days } })
},
lowSupplies() {
return api.get('/printers/lowsupplies')
},
@@ -477,6 +480,33 @@ export const applicationsApi = {
delete(id) {
return api.delete(`/applications/${id}`)
},
// multipart image upload; backend sets image to the served URL
uploadImage(id, file) {
const form = new FormData()
form.append('file', file)
return api.post(`/applications/${id}/image`, form, { headers: { 'Content-Type': 'multipart/form-data' } })
},
removeImage(id) {
return api.delete(`/applications/${id}/image`)
},
// installer upload; backend sets installpath to the download URL.
// onProgress gets 0-100 - an installer is big enough that a silent wait
// reads as a hang.
uploadPackage(id, file, onProgress) {
const form = new FormData()
form.append('file', file)
return api.post(`/applications/${id}/package`, form, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: event => {
if (onProgress && event.total) {
onProgress(Math.round((event.loaded * 100) / event.total))
}
}
})
},
removePackage(id) {
return api.delete(`/applications/${id}/package`)
},
// Versions
getVersions(appId) {
return api.get(`/applications/${appId}/versions`)
@@ -1088,6 +1118,15 @@ export const warrantyApi = {
},
report() {
return api.get('/warranty/report')
},
// proof of cover: invoice, certificate, whatever the vendor sent
uploadProof(id, file) {
const form = new FormData()
form.append('file', file)
return api.post(`/warranty/${id}/proof`, form, { headers: { 'Content-Type': 'multipart/form-data' } })
},
removeProof(id) {
return api.delete(`/warranty/${id}/proof`)
}
}

893
plugins/applications/frontend/views/ApplicationDetail.vue
View File

@@ -1,441 +1,452 @@
<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="`/images/applications/${app.image}`" :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.applicationlink || app.installpath || app.documentationpath">
<a v-if="app.applicationlink" :href="fileHref(app.applicationlink)" target="_blank" class="hero-link">
<span class="link-icon">&#x1F517;</span> Launch Application
</a>
<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.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'
const route = useRoute()
const loading = ref(true)
const app = ref(null)
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
// 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 */
.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>
<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.applicationlink || app.installpath || app.documentationpath">
<a v-if="app.applicationlink" :href="fileHref(app.applicationlink)" target="_blank" class="hero-link">
<span class="link-icon">&#x1F517;</span> Launch Application
</a>
<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.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'
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
// 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 */
.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>

183
plugins/applications/frontend/views/ApplicationForm.vue
View File

@@ -111,18 +111,59 @@
class="form-control"
placeholder="Network path or URL to install files"
/>
<small class="form-hint">
A share path or URL, or upload the installer below and this fills
itself in.
</small>
</div>
<div class="form-group">
<label for="image">Image Filename</label>
<label for="packagefile">Installer</label>
<div v-if="uploadedPackage" class="upload-current">
<span class="upload-name">{{ uploadedPackage }}</span>
<button type="button" class="btn btn-sm btn-secondary" @click="removePackage"
:disabled="busyPackage">Remove installer</button>
</div>
<input id="packagefile" type="file" class="form-control"
:accept="PACKAGE_ACCEPT" @change="onPackagePicked" />
<div v-if="packageProgress !== null" class="upload-progress">
<div class="upload-bar"><span :style="{ width: packageProgress + '%' }"></span></div>
<span>{{ packageProgress }}%</span>
</div>
<small class="form-hint">
Up to 500MB. Anything larger belongs on the share - put its path in
Install Path instead. Downloads require a login.
</small>
</div>
<div class="form-group">
<label for="imagefile">Image</label>
<div v-if="imagePreview" class="upload-current">
<img :src="imagePreview" alt="" class="upload-thumb" />
<button type="button" class="btn btn-sm btn-secondary" @click="removeImage"
:disabled="busyImage">Remove image</button>
</div>
<input id="imagefile" type="file" class="form-control"
accept="image/*" @change="onImagePicked" />
<small class="form-hint">
PNG, JPG, GIF, WEBP, SVG or ICO. Replaces whatever is there now.
</small>
</div>
<div class="form-group">
<label for="image">Image path</label>
<input
id="image"
v-model="form.image"
type="text"
class="form-control"
placeholder="e.g., myapp.png"
placeholder="filled in by the upload above"
/>
<small class="form-hint">Image should be placed in /images/applications/</small>
<small class="form-hint">
Set by the upload. Older entries hold a bare filename served from
/images/applications/, and those still work - leave them alone
unless you are replacing the image.
</small>
</div>
<h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Notes</h4>
@@ -184,6 +225,76 @@ const form = ref({
const supportTeams = ref([])
// Files are chosen before the application exists, so they are held here and
// uploaded once there is an id to attach them to (see saveApplication).
const pendingImage = ref(null)
const pendingPackage = ref(null)
const imagePreview = ref('')
const uploadedPackage = ref('')
const packageProgress = ref(null)
const busyImage = ref(false)
const busyPackage = ref(false)
const PACKAGE_ACCEPT = '.exe,.msi,.msp,.zip,.7z,.cab,.iso,.appx,.msix,.ps1,.bat,.txt,.pdf'
const MAX_PACKAGE_BYTES = 500 * 1024 * 1024
function onImagePicked(event) {
const file = event.target.files?.[0]
if (!file) return
pendingImage.value = file
// Show the chosen file immediately rather than after a round trip.
imagePreview.value = URL.createObjectURL(file)
}
function onPackagePicked(event) {
const file = event.target.files?.[0]
if (!file) return
if (file.size > MAX_PACKAGE_BYTES) {
error.value = `${file.name} is ${(file.size / 1048576).toFixed(0)}MB; the limit is 500MB. `
+ 'Put it on the share and use Install Path instead.'
event.target.value = ''
return
}
error.value = ''
pendingPackage.value = file
uploadedPackage.value = file.name
}
async function removeImage() {
pendingImage.value = null
imagePreview.value = ''
form.value.image = ''
if (isEdit.value) {
busyImage.value = true
try { await applicationsApi.removeImage(route.params.id) }
catch (err) { error.value = apiError(err, 'Failed to remove the image') }
finally { busyImage.value = false }
}
}
async function removePackage() {
pendingPackage.value = null
uploadedPackage.value = ''
if (isEdit.value) {
busyPackage.value = true
try {
const response = await applicationsApi.removePackage(route.params.id)
form.value.installpath = response.data.data.installpath || ''
} catch (err) {
error.value = apiError(err, 'Failed to remove the installer')
} finally { busyPackage.value = false }
}
}
// The image field holds either a served URL (new) or a bare filename from the
// classic site, which is still rendered out of /images/applications/.
function imageSrcFor(value) {
if (!value) return ''
return value.startsWith('/api/') || value.startsWith('http')
? value
: `/images/applications/${value}`
}
onMounted(async () => {
try {
// Load support teams
@@ -210,6 +321,10 @@ onMounted(async () => {
image: app.image || '',
applicationnotes: app.applicationnotes || ''
}
imagePreview.value = imageSrcFor(app.image)
if ((app.installpath || '').startsWith('/api/applications/package/')) {
uploadedPackage.value = app.installpath.split('/').pop()
}
}
} catch (err) {
console.error('Error loading data:', err)
@@ -240,16 +355,34 @@ async function saveApplication() {
applicationnotes: form.value.applicationnotes || null
}
let appid = route.params.id
if (isEdit.value) {
await applicationsApi.update(route.params.id, appData)
await applicationsApi.update(appid, appData)
} else {
await applicationsApi.create(appData)
const created = await applicationsApi.create(appData)
appid = created.data.data.appid
}
// Uploads come after the save: a new application has no id until it exists,
// and both endpoints key on it. A failed upload must not lose the record
// that saved fine, so it reports and stays on the form.
if (pendingImage.value) {
await applicationsApi.uploadImage(appid, pendingImage.value)
pendingImage.value = null
}
if (pendingPackage.value) {
packageProgress.value = 0
await applicationsApi.uploadPackage(appid, pendingPackage.value,
percent => { packageProgress.value = percent })
pendingPackage.value = null
packageProgress.value = null
}
router.push('/applications')
} catch (err) {
console.error('Error saving application:', err)
error.value = apiError(err, 'Failed to save application')
packageProgress.value = null
} finally {
saving.value = false
}
@@ -257,6 +390,46 @@ async function saveApplication() {
</script>
<style scoped>
.upload-current {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.upload-thumb {
width: 3rem;
height: 3rem;
object-fit: contain;
border: 1px solid var(--border);
border-radius: 0.25rem;
background: var(--bg);
}
.upload-name {
font-family: ui-monospace, monospace;
font-size: 0.85rem;
word-break: break-all;
}
.upload-progress {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.5rem;
font-size: 0.85rem;
}
.upload-bar {
flex: 1;
height: 0.5rem;
background: var(--border);
border-radius: 999px;
overflow: hidden;
}
.upload-bar span {
display: block;
height: 100%;
background: var(--primary);
transition: width 0.2s ease;
}
.checkbox-group {
display: flex;
gap: 1.5rem;

200
shopdb/core/api/applications.py
View File

@@ -1,7 +1,11 @@
"""Applications API endpoints."""
from flask import Blueprint, request
import glob
import os
from flask import Blueprint, request, current_app, send_from_directory
from flask_jwt_extended import jwt_required
from werkzeug.utils import secure_filename
from shopdb.extensions import db
from shopdb.core.models import (
@@ -17,6 +21,46 @@ from shopdb.utils.pagination import get_pagination_params, paginate_query
from shopdb.utils.import_mode import apply_import_timestamps
# Uploads live in the instance dir, like model images and part photos, so a
# site's files are not mixed into the code tree and survive a redeploy.
APP_IMAGE_EXTENSIONS = {'.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg', '.ico'}
APP_IMAGE_URL_PREFIX = '/api/applications/image/'
# Installers are whatever a vendor ships. The list is a guard against a browser
# handing us something unintended, not a security boundary - the download route
# always sends as an attachment and never executes anything.
APP_PACKAGE_EXTENSIONS = {'.exe', '.msi', '.msp', '.zip', '.7z', '.cab', '.iso',
'.appx', '.msix', '.ps1', '.bat', '.txt', '.pdf'}
APP_PACKAGE_URL_PREFIX = '/api/applications/package/'
# A real installer runs to hundreds of megabytes; an ISO runs to gigabytes and
# does not belong in an instance directory. 500MB is the line: enough for the
# msi/exe this is for, small enough that the disk cannot vanish behind it.
MAX_PACKAGE_BYTES = 500 * 1024 * 1024
def _appimage_dir():
return os.path.join(current_app.instance_path, 'applicationimages')
def _apppackage_dir():
return os.path.join(current_app.instance_path, 'applicationpackages')
def _replace_upload(directory, stem, ext, upload):
"""Save one file per application, replacing any prior extension.
Returns the stored filename. Without the glob a re-upload as .png would
orphan the old .jpg and the two would fight over which is current.
"""
os.makedirs(directory, exist_ok=True)
for old in glob.glob(os.path.join(directory, secure_filename(stem) + '.*')):
os.remove(old)
filename = secure_filename(f'{stem}{ext}')
upload.save(os.path.join(directory, filename))
return filename
def _computer_models():
"""Lazily import the computers plugin models, or None if unavailable.
@@ -460,3 +504,157 @@ def update_installed_app(machine_id: int, app_id: int):
# Support teams + contacts now live in the supportteams blueprint
# (/api/supportteams), replacing the legacy appowners pair.
# =============================================================================
# Image and installer uploads
#
# Both follow the model-image trio (upload / serve / delete). The image is
# public because application pages render it before anything else loads; the
# installer is not, because it is a binary a site pays for.
# =============================================================================
@applications_bp.route('/<int:app_id>/image', methods=['POST'])
@jwt_required()
@require_permission('applications.edit')
def upload_application_image(app_id: int):
"""Upload (or replace) an application's image.
multipart/form-data: file=<image>. Stored as application-<id><ext>, one per
application, and application.image is pointed at the served URL.
"""
app = db.session.get(Application, app_id)
if not app:
return error_response(ErrorCodes.NOT_FOUND,
f'Application with ID {app_id} not found',
http_code=404)
upload = request.files.get('file')
if not upload or not upload.filename:
return error_response(ErrorCodes.VALIDATION_ERROR, 'No file provided')
ext = os.path.splitext(upload.filename)[1].lower()
if ext not in APP_IMAGE_EXTENSIONS:
return error_response(ErrorCodes.VALIDATION_ERROR,
f'Unsupported image type {ext}')
filename = _replace_upload(_appimage_dir(), f'application-{app_id}', ext, upload)
app.image = f'{APP_IMAGE_URL_PREFIX}{filename}'
db.session.commit()
AuditLog.log('updated', 'Application', entityid=app_id,
entityname=app.appname, changes={'image': {'new': app.image}})
db.session.commit()
return success_response(app.to_dict(), message='Application image uploaded')
@applications_bp.route('/image/<path:filename>', methods=['GET'])
def serve_application_image(filename):
"""Serve an uploaded application image (public - lists and tiles read it)."""
return send_from_directory(_appimage_dir(), filename)
@applications_bp.route('/<int:app_id>/image', methods=['DELETE'])
@jwt_required()
@require_permission('applications.edit')
def delete_application_image(app_id: int):
"""Remove an application's image and clear the field."""
app = db.session.get(Application, app_id)
if not app:
return error_response(ErrorCodes.NOT_FOUND,
f'Application with ID {app_id} not found',
http_code=404)
for old in glob.glob(os.path.join(_appimage_dir(),
secure_filename(f'application-{app_id}') + '.*')):
os.remove(old)
app.image = None
db.session.commit()
return success_response(app.to_dict(), message='Application image removed')
@applications_bp.route('/<int:app_id>/package', methods=['POST'])
@jwt_required()
@require_permission('applications.edit')
def upload_application_package(app_id: int):
"""Upload (or replace) the installer for an application.
multipart/form-data: file=<installer>. The original filename is kept in
installpath so the download arrives named the way the vendor shipped it,
and the stored copy is application-<id><ext>.
"""
app = db.session.get(Application, app_id)
if not app:
return error_response(ErrorCodes.NOT_FOUND,
f'Application with ID {app_id} not found',
http_code=404)
upload = request.files.get('file')
if not upload or not upload.filename:
return error_response(ErrorCodes.VALIDATION_ERROR, 'No file provided')
ext = os.path.splitext(upload.filename)[1].lower()
if ext not in APP_PACKAGE_EXTENSIONS:
return error_response(
ErrorCodes.VALIDATION_ERROR,
'Unsupported installer type {}. Allowed: {}'.format(
ext, ', '.join(sorted(APP_PACKAGE_EXTENSIONS))))
# Measure by seeking the stream, not Content-Length: a chunked upload has
# no length header, and trusting the header lets a client understate size.
upload.stream.seek(0, os.SEEK_END)
size = upload.stream.tell()
upload.stream.seek(0)
if size > MAX_PACKAGE_BYTES:
return error_response(
ErrorCodes.VALIDATION_ERROR,
'Installer is {:.0f}MB; the limit is {:.0f}MB. Put larger payloads '
'on the share and link to them with Install Path.'.format(
size / 1048576, MAX_PACKAGE_BYTES / 1048576))
filename = _replace_upload(_apppackage_dir(), f'application-{app_id}', ext, upload)
app.installpath = '{}{}'.format(APP_PACKAGE_URL_PREFIX, filename)
db.session.commit()
AuditLog.log('updated', 'Application', entityid=app_id,
entityname=app.appname,
changes={'installpath': {'new': app.installpath},
'uploadedfilename': {'new': upload.filename},
'bytes': {'new': size}})
db.session.commit()
return success_response(
{**app.to_dict(), 'uploadedfilename': upload.filename, 'bytes': size},
message='Installer uploaded')
@applications_bp.route('/package/<path:filename>', methods=['GET'])
@jwt_required()
@require_permission('applications.view')
def serve_application_package(filename):
"""Download an uploaded installer.
Authenticated, unlike the image: this is licensed vendor software, and an
open URL would publish it to anything that can reach the site. Always sent
as an attachment so a browser saves it rather than trying to render it.
"""
return send_from_directory(_apppackage_dir(), filename, as_attachment=True)
@applications_bp.route('/<int:app_id>/package', methods=['DELETE'])
@jwt_required()
@require_permission('applications.edit')
def delete_application_package(app_id: int):
"""Remove an uploaded installer and clear the path it set."""
app = db.session.get(Application, app_id)
if not app:
return error_response(ErrorCodes.NOT_FOUND,
f'Application with ID {app_id} not found',
http_code=404)
for old in glob.glob(os.path.join(_apppackage_dir(),
secure_filename(f'application-{app_id}') + '.*')):
os.remove(old)
# Only clear the path if it pointed at the upload; a site's own share path
# was typed by a person and is not ours to wipe.
if (app.installpath or '').startswith(APP_PACKAGE_URL_PREFIX):
app.installpath = None
db.session.commit()
return success_response(app.to_dict(), message='Installer removed')

165
tests/test_core/test_application_uploads.py Normal file
View File

@@ -0,0 +1,165 @@
"""Tests for application image and installer uploads.
The form used to take an image FILENAME and expect someone to drop the file into
the frontend's own directory by hand, and an install path typed from memory.
Both are uploads now, following the model-image trio.
The two differ deliberately and that is most of what is pinned here: the image
is public because application tiles render before anything is authenticated, the
installer is not, because it is licensed vendor software.
"""
import io
from shopdb.core.models import Application
def _app(db, name='Test App'):
app = Application(appname=name)
db.session.add(app)
db.session.commit()
return app
def _png():
# 1x1 PNG; enough to exercise the path without a fixture file.
return io.BytesIO(
b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x00\x01\x00\x00\x00\x01'
b'\x08\x06\x00\x00\x00\x1f\x15\xc4\x89\x00\x00\x00\nIDATx\x9cc\x00'
b'\x01\x00\x00\x05\x00\x01\r\n-\xb4\x00\x00\x00\x00IEND\xaeB`\x82')
def test_image_upload_sets_the_served_url(client, db, auth_headers):
app = _app(db)
response = client.post(f'/api/applications/{app.appid}/image',
data={'file': (_png(), 'logo.png')},
content_type='multipart/form-data',
headers=auth_headers)
assert response.status_code == 200, response.get_json()
assert response.get_json()['data']['image'] == \
f'/api/applications/image/application-{app.appid}.png'
def test_image_is_readable_without_a_token(client, db, auth_headers):
"""Tiles and lists render the image before anything is authenticated."""
app = _app(db)
client.post(f'/api/applications/{app.appid}/image',
data={'file': (_png(), 'logo.png')},
content_type='multipart/form-data', headers=auth_headers)
anon = client.get(f'/api/applications/image/application-{app.appid}.png')
assert anon.status_code == 200
assert anon.mimetype == 'image/png'
def test_image_rejects_a_non_image(client, db, auth_headers):
app = _app(db)
response = client.post(f'/api/applications/{app.appid}/image',
data={'file': (io.BytesIO(b'MZ'), 'payload.exe')},
content_type='multipart/form-data',
headers=auth_headers)
assert response.status_code == 400
assert 'Unsupported image type' in response.get_data(as_text=True)
def test_installer_upload_sets_the_install_path(client, db, auth_headers):
app = _app(db)
response = client.post(f'/api/applications/{app.appid}/package',
data={'file': (io.BytesIO(b'fake installer'), 'setup.msi')},
content_type='multipart/form-data',
headers=auth_headers)
assert response.status_code == 200, response.get_json()
body = response.get_json()['data']
assert body['installpath'] == \
f'/api/applications/package/application-{app.appid}.msi'
# The name the vendor shipped is reported back, since the stored copy is
# renamed and the uploader needs to recognise what they sent.
assert body['uploadedfilename'] == 'setup.msi'
def test_installer_download_needs_a_token(client, db, auth_headers):
"""Licensed software: an open URL would publish it to the whole network."""
app = _app(db)
client.post(f'/api/applications/{app.appid}/package',
data={'file': (io.BytesIO(b'fake installer'), 'setup.msi')},
content_type='multipart/form-data', headers=auth_headers)
path = f'/api/applications/package/application-{app.appid}.msi'
assert client.get(path).status_code == 401
authed = client.get(path, headers=auth_headers)
assert authed.status_code == 200
assert authed.data == b'fake installer'
# Sent as an attachment so a browser saves it rather than rendering it.
assert 'attachment' in authed.headers.get('Content-Disposition', '')
def test_installer_rejects_an_unlisted_type(client, db, auth_headers):
app = _app(db)
response = client.post(f'/api/applications/{app.appid}/package',
data={'file': (io.BytesIO(b'x'), 'driver.dll')},
content_type='multipart/form-data',
headers=auth_headers)
assert response.status_code == 400
assert 'Unsupported installer type' in response.get_data(as_text=True)
def test_installer_rejects_an_oversize_file(client, db, auth_headers, monkeypatch):
"""The cap keeps an ISO out of the instance directory."""
from shopdb.core.api import applications as applications_api
monkeypatch.setattr(applications_api, 'MAX_PACKAGE_BYTES', 1024)
app = _app(db)
response = client.post(f'/api/applications/{app.appid}/package',
data={'file': (io.BytesIO(b'x' * 4096), 'big.msi')},
content_type='multipart/form-data',
headers=auth_headers)
assert response.status_code == 400
assert 'the limit is' in response.get_data(as_text=True)
def test_removing_an_installer_clears_only_an_uploaded_path(client, db, auth_headers):
"""A share path was typed by a person and is not ours to wipe."""
app = _app(db)
client.post(f'/api/applications/{app.appid}/package',
data={'file': (io.BytesIO(b'installer'), 'setup.msi')},
content_type='multipart/form-data', headers=auth_headers)
cleared = client.delete(f'/api/applications/{app.appid}/package',
headers=auth_headers)
assert cleared.get_json()['data']['installpath'] is None
app.installpath = r'\\share\installers\vendor.msi'
db.session.commit()
again = client.delete(f'/api/applications/{app.appid}/package',
headers=auth_headers)
assert again.get_json()['data']['installpath'] == r'\\share\installers\vendor.msi'
def test_replacing_an_image_does_not_orphan_the_old_extension(client, db, auth_headers):
"""One image per application, whatever the extension arrives as."""
import glob
import os
from flask import current_app
app = _app(db)
client.post(f'/api/applications/{app.appid}/image',
data={'file': (_png(), 'logo.png')},
content_type='multipart/form-data', headers=auth_headers)
client.post(f'/api/applications/{app.appid}/image',
data={'file': (io.BytesIO(b'<svg/>'), 'logo.svg')},
content_type='multipart/form-data', headers=auth_headers)
imagedir = os.path.join(current_app.instance_path, 'applicationimages')
files = glob.glob(os.path.join(imagedir, f'application-{app.appid}.*'))
assert len(files) == 1 and files[0].endswith('.svg')