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

Warranty polish: hero badges everywhere, search/pagination, re-check, shared apiError

Browse Source 
- Shared utils/apiError.js reads the correct nested error message (with
  fallbacks); swept 37 views/components off the shallow path so real backend
  messages (e.g. in-use 409s) surface instead of generic "Failed".
- useWarrantyBadge composable: warranty hero status/end-date badge now on PC,
  equipment, printer, and network detail heroes (one shared fetch feeds the
  badge + the WarrantyPanel).
- Warranties list: client-side search (vendor/level/tag/asset) + pagination;
  truncate long service levels so they stop blowing out the table width.
- "Re-check all" button + POST /warranty/sync/dell?all=true to re-pull dated
  Dell warranties, not just missing ones.
- Deprecate the standalone pxe-images/warranty_sync.py in favor of the plugin.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
cproudlock
2026-07-09 17:23:21 -04:00
parent 640b8de1b2
commit ec2de635ed
46 changed files with 4091 additions and 3968 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -970,8 +970,8 @@ export const warrantyApi = {
refresh(id) {
return api.post(`/warranty/${id}/refresh`)
},
syncDell() {
return api.post('/warranty/sync/dell')
syncDell(all = false) {
return api.post('/warranty/sync/dell', null, { params: all ? { all: 'true' } : {} })
},
report() {
return api.get('/warranty/report')

3
frontend/src/components/AssetRelationships.vue
View File

@@ -178,6 +178,7 @@ import { assetsApi, relationshipTypesApi } from '../api'
import { colorStyle } from '@/utils/colorStyle'
import { useAuthStore } from '../stores/auth'
import { useToast } from '../composables/toast'
import { apiError } from '../utils/apiError'
const toast = useToast()
const props = defineProps({
@@ -351,7 +352,7 @@ async function saveRelationship() {
emit('updated')
} catch (error) {
console.error('Failed to create relationship:', error)
toast.error('Failed to create relationship: ' + (error.response?.data?.message || error.message))
toast.error(apiError(error, 'Failed to create relationship'))
}
}

44
frontend/src/composables/warrantyBadge.js Normal file
View File

@@ -0,0 +1,44 @@
// Shared warranty fetch + hero-badge derivation for asset detail pages.
// Pass a getter for the asset id; get back the warranties list (to feed a
// WarrantyPanel) and a heroWarranty for a compact status badge.
import { ref, computed, watch } from 'vue'
import { warrantyApi } from '../api'
const STATUS_RANK = { expired: 0, expiring: 1, active: 2, unknown: 3 }
const STATUS_LABELS = {
active: 'Under Warranty',
expiring: 'Warranty Expiring',
expired: 'Warranty Expired',
unknown: 'Warranty',
}
export function useWarrantyBadge(getAssetId) {
const warranties = ref([])
// Worst-case warranty drives the badge: expired > expiring > active > unknown.
const heroWarranty = computed(() => {
if (!warranties.value.length) return null
const worst = [...warranties.value]
.sort((a, b) => (STATUS_RANK[a.status] ?? 9) - (STATUS_RANK[b.status] ?? 9))[0]
return { ...worst, label: STATUS_LABELS[worst.status] || 'Warranty' }
})
function warrantyDate(d) {
return d ? new Date(d + 'T00:00:00').toLocaleDateString() : ''
}
async function load() {
const assetid = getAssetId()
if (!assetid) { warranties.value = []; return }
try {
const response = await warrantyApi.forAsset(assetid)
warranties.value = response.data.data || []
} catch (err) {
warranties.value = []
}
}
watch(getAssetId, load, { immediate: true })
return { warranties, heroWarranty, warrantyDate, reloadWarranties: load }
}

9
frontend/src/utils/apiError.js Normal file
View File

@@ -0,0 +1,9 @@
// Extract a human-readable message from an API error. The backend nests the
// message at data.data.error.message (see error_response); older call sites read
// shallower paths, so try them all before falling back.
export function apiError(err, fallback = 'Something went wrong') {
return err?.response?.data?.data?.error?.message
|| err?.response?.data?.error?.message
|| err?.response?.data?.message
|| fallback
}

557
frontend/src/views/applications/ApplicationForm.vue
View File

@@ -1,278 +1,279 @@
<template>
<div>
<div class="page-header">
<h2>{{ isEdit ? 'Edit Application' : 'New Application' }}</h2>
</div>
<div class="card">
<div v-if="loading" class="loading">Loading...</div>
<form v-else @submit.prevent="saveApplication">
<div class="form-row">
<div class="form-group">
<label for="appname">Application Name *</label>
<input
id="appname"
v-model="form.appname"
type="text"
class="form-control"
required
/>
</div>
<div class="form-group">
<label for="supportteamid">Support Team</label>
<select
id="supportteamid"
v-model="form.supportteamid"
class="form-control"
>
<option value="">Select team...</option>
<option
v-for="team in supportTeams"
:key="team.supportteamid"
:value="team.supportteamid"
>
{{ team.teamname }}
</option>
</select>
</div>
</div>
<div class="form-group">
<label for="appdescription">Description</label>
<textarea
id="appdescription"
v-model="form.appdescription"
class="form-control"
rows="2"
></textarea>
</div>
<h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Application Flags</h4>
<div class="form-row">
<div class="form-group checkbox-group">
<label>
<input type="checkbox" v-model="form.isinstallable" />
Installable
</label>
<label>
<input type="checkbox" v-model="form.islicenced" />
Licensed
</label>
<label>
<input type="checkbox" v-model="form.isprinter" />
Printer App
</label>
<label>
<input type="checkbox" v-model="form.isrequired" />
Required on all PCs
</label>
<label>
<input type="checkbox" v-model="form.ishidden" />
Hidden
</label>
</div>
</div>
<h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Links & Paths</h4>
<div class="form-row">
<div class="form-group">
<label for="applicationlink">Application Link</label>
<input
id="applicationlink"
v-model="form.applicationlink"
type="text"
class="form-control"
placeholder="https://..."
/>
</div>
<div class="form-group">
<label for="documentationpath">Documentation Path</label>
<input
id="documentationpath"
v-model="form.documentationpath"
type="text"
class="form-control"
placeholder="URL or file path"
/>
</div>
</div>
<div class="form-group">
<label for="installpath">Install Path</label>
<input
id="installpath"
v-model="form.installpath"
type="text"
class="form-control"
placeholder="Network path or URL to install files"
/>
</div>
<div class="form-group">
<label for="image">Image Filename</label>
<input
id="image"
v-model="form.image"
type="text"
class="form-control"
placeholder="e.g., myapp.png"
/>
<small class="form-hint">Image should be placed in /images/applications/</small>
</div>
<h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Notes</h4>
<div class="form-group">
<label for="applicationnotes">Application Notes (HTML supported)</label>
<textarea
id="applicationnotes"
v-model="form.applicationnotes"
class="form-control"
rows="6"
placeholder="Enter notes... HTML tags like <BR>, <a>, <strong> are supported"
></textarea>
</div>
<div v-if="error" class="error-message">{{ error }}</div>
<div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
<button type="submit" class="btn btn-primary" :disabled="saving">
{{ saving ? 'Saving...' : 'Save Application' }}
</button>
<router-link to="/applications" class="btn btn-secondary">Cancel</router-link>
</div>
</form>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { applicationsApi } from '../../api'
const route = useRoute()
const router = useRouter()
const isEdit = computed(() => !!route.params.id)
const loading = ref(true)
const saving = ref(false)
const error = ref('')
const form = ref({
appname: '',
appdescription: '',
supportteamid: '',
isinstallable: false,
islicenced: false,
isprinter: false,
isrequired: false,
ishidden: false,
applicationlink: '',
documentationpath: '',
installpath: '',
image: '',
applicationnotes: ''
})
const supportTeams = ref([])
onMounted(async () => {
try {
// Load support teams
const teamsRes = await applicationsApi.getSupportTeams()
supportTeams.value = teamsRes.data.data || []
// Load application if editing
if (isEdit.value) {
const response = await applicationsApi.get(route.params.id)
const app = response.data.data
form.value = {
appname: app.appname || '',
appdescription: app.appdescription || '',
supportteamid: app.supportteam?.supportteamid || '',
isinstallable: app.isinstallable || false,
islicenced: app.islicenced || false,
isprinter: app.isprinter || false,
isrequired: app.isrequired || false,
ishidden: app.ishidden || false,
applicationlink: app.applicationlink || '',
documentationpath: app.documentationpath || '',
installpath: app.installpath || '',
image: app.image || '',
applicationnotes: app.applicationnotes || ''
}
}
} catch (err) {
console.error('Error loading data:', err)
error.value = 'Failed to load data'
} finally {
loading.value = false
}
})
async function saveApplication() {
error.value = ''
saving.value = true
try {
const appData = {
appname: form.value.appname,
appdescription: form.value.appdescription || null,
supportteamid: form.value.supportteamid || null,
isinstallable: form.value.isinstallable,
islicenced: form.value.islicenced,
isprinter: form.value.isprinter,
isrequired: form.value.isrequired,
ishidden: form.value.ishidden,
applicationlink: form.value.applicationlink || null,
documentationpath: form.value.documentationpath || null,
installpath: form.value.installpath || null,
image: form.value.image || null,
applicationnotes: form.value.applicationnotes || null
}
if (isEdit.value) {
await applicationsApi.update(route.params.id, appData)
} else {
await applicationsApi.create(appData)
}
router.push('/applications')
} catch (err) {
console.error('Error saving application:', err)
error.value = err.response?.data?.message || 'Failed to save application'
} finally {
saving.value = false
}
}
</script>
<style scoped>
.checkbox-group {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.checkbox-group label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.form-hint {
display: block;
margin-top: 0.25rem;
font-size: 0.8rem;
color: var(--text-light, #666);
}
</style>
<template>
<div>
<div class="page-header">
<h2>{{ isEdit ? 'Edit Application' : 'New Application' }}</h2>
</div>
<div class="card">
<div v-if="loading" class="loading">Loading...</div>
<form v-else @submit.prevent="saveApplication">
<div class="form-row">
<div class="form-group">
<label for="appname">Application Name *</label>
<input
id="appname"
v-model="form.appname"
type="text"
class="form-control"
required
/>
</div>
<div class="form-group">
<label for="supportteamid">Support Team</label>
<select
id="supportteamid"
v-model="form.supportteamid"
class="form-control"
>
<option value="">Select team...</option>
<option
v-for="team in supportTeams"
:key="team.supportteamid"
:value="team.supportteamid"
>
{{ team.teamname }}
</option>
</select>
</div>
</div>
<div class="form-group">
<label for="appdescription">Description</label>
<textarea
id="appdescription"
v-model="form.appdescription"
class="form-control"
rows="2"
></textarea>
</div>
<h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Application Flags</h4>
<div class="form-row">
<div class="form-group checkbox-group">
<label>
<input type="checkbox" v-model="form.isinstallable" />
Installable
</label>
<label>
<input type="checkbox" v-model="form.islicenced" />
Licensed
</label>
<label>
<input type="checkbox" v-model="form.isprinter" />
Printer App
</label>
<label>
<input type="checkbox" v-model="form.isrequired" />
Required on all PCs
</label>
<label>
<input type="checkbox" v-model="form.ishidden" />
Hidden
</label>
</div>
</div>
<h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Links & Paths</h4>
<div class="form-row">
<div class="form-group">
<label for="applicationlink">Application Link</label>
<input
id="applicationlink"
v-model="form.applicationlink"
type="text"
class="form-control"
placeholder="https://..."
/>
</div>
<div class="form-group">
<label for="documentationpath">Documentation Path</label>
<input
id="documentationpath"
v-model="form.documentationpath"
type="text"
class="form-control"
placeholder="URL or file path"
/>
</div>
</div>
<div class="form-group">
<label for="installpath">Install Path</label>
<input
id="installpath"
v-model="form.installpath"
type="text"
class="form-control"
placeholder="Network path or URL to install files"
/>
</div>
<div class="form-group">
<label for="image">Image Filename</label>
<input
id="image"
v-model="form.image"
type="text"
class="form-control"
placeholder="e.g., myapp.png"
/>
<small class="form-hint">Image should be placed in /images/applications/</small>
</div>
<h4 style="margin-top: 1.5rem; margin-bottom: 1rem;">Notes</h4>
<div class="form-group">
<label for="applicationnotes">Application Notes (HTML supported)</label>
<textarea
id="applicationnotes"
v-model="form.applicationnotes"
class="form-control"
rows="6"
placeholder="Enter notes... HTML tags like <BR>, <a>, <strong> are supported"
></textarea>
</div>
<div v-if="error" class="error-message">{{ error }}</div>
<div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
<button type="submit" class="btn btn-primary" :disabled="saving">
{{ saving ? 'Saving...' : 'Save Application' }}
</button>
<router-link to="/applications" class="btn btn-secondary">Cancel</router-link>
</div>
</form>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { applicationsApi } from '../../api'
import { apiError } from '../../utils/apiError'
const route = useRoute()
const router = useRouter()
const isEdit = computed(() => !!route.params.id)
const loading = ref(true)
const saving = ref(false)
const error = ref('')
const form = ref({
appname: '',
appdescription: '',
supportteamid: '',
isinstallable: false,
islicenced: false,
isprinter: false,
isrequired: false,
ishidden: false,
applicationlink: '',
documentationpath: '',
installpath: '',
image: '',
applicationnotes: ''
})
const supportTeams = ref([])
onMounted(async () => {
try {
// Load support teams
const teamsRes = await applicationsApi.getSupportTeams()
supportTeams.value = teamsRes.data.data || []
// Load application if editing
if (isEdit.value) {
const response = await applicationsApi.get(route.params.id)
const app = response.data.data
form.value = {
appname: app.appname || '',
appdescription: app.appdescription || '',
supportteamid: app.supportteam?.supportteamid || '',
isinstallable: app.isinstallable || false,
islicenced: app.islicenced || false,
isprinter: app.isprinter || false,
isrequired: app.isrequired || false,
ishidden: app.ishidden || false,
applicationlink: app.applicationlink || '',
documentationpath: app.documentationpath || '',
installpath: app.installpath || '',
image: app.image || '',
applicationnotes: app.applicationnotes || ''
}
}
} catch (err) {
console.error('Error loading data:', err)
error.value = 'Failed to load data'
} finally {
loading.value = false
}
})
async function saveApplication() {
error.value = ''
saving.value = true
try {
const appData = {
appname: form.value.appname,
appdescription: form.value.appdescription || null,
supportteamid: form.value.supportteamid || null,
isinstallable: form.value.isinstallable,
islicenced: form.value.islicenced,
isprinter: form.value.isprinter,
isrequired: form.value.isrequired,
ishidden: form.value.ishidden,
applicationlink: form.value.applicationlink || null,
documentationpath: form.value.documentationpath || null,
installpath: form.value.installpath || null,
image: form.value.image || null,
applicationnotes: form.value.applicationnotes || null
}
if (isEdit.value) {
await applicationsApi.update(route.params.id, appData)
} else {
await applicationsApi.create(appData)
}
router.push('/applications')
} catch (err) {
console.error('Error saving application:', err)
error.value = apiError(err, 'Failed to save application')
} finally {
saving.value = false
}
}
</script>
<style scoped>
.checkbox-group {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.checkbox-group label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.form-hint {
display: block;
margin-top: 0.25rem;
font-size: 0.8rem;
color: var(--text-light, #666);
}
</style>

333
frontend/src/views/knowledgebase/KnowledgeBaseForm.vue
View File

@@ -1,166 +1,167 @@
<template>
<div>
<div class="page-header">
<h2>{{ isEdit ? 'Edit Article' : 'Add Knowledge Base Article' }}</h2>
</div>
<div class="card">
<div v-if="loading" class="loading">Loading...</div>
<form v-else @submit.prevent="saveArticle">
<div class="form-group">
<label for="shortdescription">Description *</label>
<input
id="shortdescription"
v-model="form.shortdescription"
type="text"
class="form-control"
required
maxlength="500"
placeholder="Brief description of the article"
/>
</div>
<div class="form-group">
<label for="linkurl">URL *</label>
<input
id="linkurl"
v-model="form.linkurl"
type="url"
class="form-control"
required
maxlength="2000"
placeholder="https://..."
/>
</div>
<div class="form-group">
<label for="keywords">Keywords</label>
<input
id="keywords"
v-model="form.keywords"
type="text"
class="form-control"
maxlength="500"
placeholder="Space-separated keywords"
/>
<small class="form-hint">Keywords help with search - separate with spaces</small>
</div>
<div class="form-group">
<label for="appid">Topic (Application)</label>
<select
id="appid"
v-model="form.appid"
class="form-control"
>
<option value="">-- Select Topic (Optional) --</option>
<option
v-for="app in applications"
:key="app.appid"
:value="app.appid"
>
{{ app.appname }}
</option>
</select>
<small class="form-hint">Select the application/topic this article relates to</small>
</div>
<div v-if="error" class="error-message">{{ error }}</div>
<div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
<button type="submit" class="btn btn-primary" :disabled="saving">
{{ saving ? 'Saving...' : (isEdit ? 'Update Article' : 'Add Article') }}
</button>
<router-link to="/knowledgebase" class="btn btn-secondary">Cancel</router-link>
</div>
</form>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { knowledgebaseApi, applicationsApi } from '../../api'
const route = useRoute()
const router = useRouter()
const isEdit = computed(() => !!route.params.id)
const loading = ref(true)
const saving = ref(false)
const error = ref('')
const form = ref({
shortdescription: '',
linkurl: '',
keywords: '',
appid: ''
})
const applications = ref([])
onMounted(async () => {
try {
// Load applications for topic dropdown
const appsRes = await applicationsApi.list({ perpage: 1000 })
applications.value = appsRes.data.data || []
// Load article if editing
if (isEdit.value) {
const response = await knowledgebaseApi.get(route.params.id)
const article = response.data.data
form.value = {
shortdescription: article.shortdescription || '',
linkurl: article.linkurl || '',
keywords: article.keywords || '',
appid: article.application?.appid || ''
}
}
} catch (err) {
console.error('Error loading data:', err)
error.value = 'Failed to load data'
} finally {
loading.value = false
}
})
async function saveArticle() {
error.value = ''
saving.value = true
try {
const articleData = {
shortdescription: form.value.shortdescription,
linkurl: form.value.linkurl,
keywords: form.value.keywords || null,
appid: form.value.appid || null
}
if (isEdit.value) {
await knowledgebaseApi.update(route.params.id, articleData)
} else {
await knowledgebaseApi.create(articleData)
}
router.push('/knowledgebase')
} catch (err) {
console.error('Error saving article:', err)
error.value = err.response?.data?.message || 'Failed to save article'
} finally {
saving.value = false
}
}
</script>
<style scoped>
.form-hint {
display: block;
margin-top: 0.25rem;
font-size: 0.8rem;
color: var(--text-light, #666);
}
</style>
<template>
<div>
<div class="page-header">
<h2>{{ isEdit ? 'Edit Article' : 'Add Knowledge Base Article' }}</h2>
</div>
<div class="card">
<div v-if="loading" class="loading">Loading...</div>
<form v-else @submit.prevent="saveArticle">
<div class="form-group">
<label for="shortdescription">Description *</label>
<input
id="shortdescription"
v-model="form.shortdescription"
type="text"
class="form-control"
required
maxlength="500"
placeholder="Brief description of the article"
/>
</div>
<div class="form-group">
<label for="linkurl">URL *</label>
<input
id="linkurl"
v-model="form.linkurl"
type="url"
class="form-control"
required
maxlength="2000"
placeholder="https://..."
/>
</div>
<div class="form-group">
<label for="keywords">Keywords</label>
<input
id="keywords"
v-model="form.keywords"
type="text"
class="form-control"
maxlength="500"
placeholder="Space-separated keywords"
/>
<small class="form-hint">Keywords help with search - separate with spaces</small>
</div>
<div class="form-group">
<label for="appid">Topic (Application)</label>
<select
id="appid"
v-model="form.appid"
class="form-control"
>
<option value="">-- Select Topic (Optional) --</option>
<option
v-for="app in applications"
:key="app.appid"
:value="app.appid"
>
{{ app.appname }}
</option>
</select>
<small class="form-hint">Select the application/topic this article relates to</small>
</div>
<div v-if="error" class="error-message">{{ error }}</div>
<div style="display: flex; gap: 0.5rem; margin-top: 1.5rem;">
<button type="submit" class="btn btn-primary" :disabled="saving">
{{ saving ? 'Saving...' : (isEdit ? 'Update Article' : 'Add Article') }}
</button>
<router-link to="/knowledgebase" class="btn btn-secondary">Cancel</router-link>
</div>
</form>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { knowledgebaseApi, applicationsApi } from '../../api'
import { apiError } from '../../utils/apiError'
const route = useRoute()
const router = useRouter()
const isEdit = computed(() => !!route.params.id)
const loading = ref(true)
const saving = ref(false)
const error = ref('')
const form = ref({
shortdescription: '',
linkurl: '',
keywords: '',
appid: ''
})
const applications = ref([])
onMounted(async () => {
try {
// Load applications for topic dropdown
const appsRes = await applicationsApi.list({ perpage: 1000 })
applications.value = appsRes.data.data || []
// Load article if editing
if (isEdit.value) {
const response = await knowledgebaseApi.get(route.params.id)
const article = response.data.data
form.value = {
shortdescription: article.shortdescription || '',
linkurl: article.linkurl || '',
keywords: article.keywords || '',
appid: article.application?.appid || ''
}
}
} catch (err) {
console.error('Error loading data:', err)
error.value = 'Failed to load data'
} finally {
loading.value = false
}
})
async function saveArticle() {
error.value = ''
saving.value = true
try {
const articleData = {
shortdescription: form.value.shortdescription,
linkurl: form.value.linkurl,
keywords: form.value.keywords || null,
appid: form.value.appid || null
}
if (isEdit.value) {
await knowledgebaseApi.update(route.params.id, articleData)
} else {
await knowledgebaseApi.create(articleData)
}
router.push('/knowledgebase')
} catch (err) {
console.error('Error saving article:', err)
error.value = apiError(err, 'Failed to save article')
} finally {
saving.value = false
}
}
</script>
<style scoped>
.form-hint {
display: block;
margin-top: 0.25rem;
font-size: 0.8rem;
color: var(--text-light, #666);
}
</style>

8
frontend/src/views/machines/MachineDetail.vue
View File

@@ -30,6 +30,10 @@
<span class="badge badge-lg" :class="getStatusClass(equipment.statusname)">
{{ equipment.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="equipment.equipment?.equipmenttypename">
@@ -207,7 +211,7 @@
<CustomFieldsSection :assetid="equipment.assetid" />
<!-- Warranty -->
<WarrantyPanel :assetid="equipment.assetid" />
<WarrantyPanel :assetid="equipment.assetid" :items="warranties" />
<!-- Notes -->
<div class="section-card" v-if="equipment.notes">
@@ -237,6 +241,7 @@ import { equipmentApi, assetsApi } from '../../api'
import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
import WarrantyPanel from '../../components/WarrantyPanel.vue'
import { useWarrantyBadge } from '../../composables/warrantyBadge'
import { useIdentifierFlags } from '../../composables/identifierSettings'
const route = useRoute()
@@ -244,6 +249,7 @@ const { isEnabled } = useIdentifierFlags()
const loading = ref(true)
const equipment = ref(null)
const { warranties, heroWarranty, warrantyDate } = useWarrantyBadge(() => equipment.value?.assetid)
const relationships = ref({ incoming: [], outgoing: [] })
const controllingPc = computed(() => {

3
frontend/src/views/machines/MachineForm.vue
View File

@@ -353,6 +353,7 @@ import Modal from '../../components/Modal.vue'
import CustomFieldsInputs from '../../components/CustomFieldsInputs.vue'
import { currentTheme } from '../../stores/theme'
import { useIdentifierFlags } from '../../composables/identifierSettings'
import { apiError } from '../../utils/apiError'
const { isEnabled } = useIdentifierFlags()
@@ -606,7 +607,7 @@ async function saveEquipment() {
router.push(`/machines/${savedEquipment.equipment?.equipmentid || route.params.id}`)
} catch (err) {
console.error('Error saving equipment:', err)
error.value = err.response?.data?.message || 'Failed to save equipment'
error.value = apiError(err, 'Failed to save equipment')
} finally {
saving.value = false
}

8
frontend/src/views/network/NetworkDeviceDetail.vue
View File

@@ -27,6 +27,10 @@
<span v-if="device.networkdevice?.vendorname" class="meta-item">
{{ device.networkdevice.vendorname }}
</span>
<span v-if="heroWarranty" class="badge" :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="detail-item" v-if="device.assetnumber">
@@ -91,7 +95,7 @@
<CustomFieldsSection :assetid="device.assetid" />
<!-- Warranty -->
<WarrantyPanel :assetid="device.assetid" />
<WarrantyPanel :assetid="device.assetid" :items="warranties" />
<!-- Notes -->
<div class="section-card" v-if="device.notes">
@@ -198,6 +202,7 @@ import { networkApi } from '../../api'
import AssetRelationships from '../../components/AssetRelationships.vue'
import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
import WarrantyPanel from '../../components/WarrantyPanel.vue'
import { useWarrantyBadge } from '../../composables/warrantyBadge'
import { useIdentifierFlags } from '../../composables/identifierSettings'
import { useToast } from '../../composables/toast'
const toast = useToast()
@@ -210,6 +215,7 @@ const authStore = useAuthStore()
const deviceId = route.params.id
const device = ref(null)
const { warranties, heroWarranty, warrantyDate } = useWarrantyBadge(() => device.value?.assetid)
const loading = ref(true)
onMounted(async () => {

1103
frontend/src/views/network/NetworkDeviceForm.vue
View File

File diff suppressed because it is too large Load Diff

1283
frontend/src/views/notifications/NotificationForm.vue
View File

File diff suppressed because it is too large Load Diff

3
frontend/src/views/notifications/NotificationTypesList.vue
View File

@@ -139,6 +139,7 @@
import { ref, onMounted } from 'vue'
import { notificationsApi } from '@/api'
import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
import { apiError } from '../../utils/apiError'
const types = ref([])
const loading = ref(true)
@@ -238,7 +239,7 @@ async function save() {
editing.value = false
await load()
} catch (err) {
error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Save failed.'
error.value = apiError(err, 'Save failed.')
} finally {
saving.value = false
}

30
frontend/src/views/pcs/PCDetail.vue
View File

@@ -254,7 +254,8 @@
import { ref, onMounted, computed } from 'vue'
import { colorStyle } from "@/utils/colorStyle"
import { useRoute } from 'vue-router'
import { computersApi, applicationsApi, assetsApi, warrantyApi } from '../../api'
import { computersApi, applicationsApi, assetsApi } from '../../api'
import { useWarrantyBadge } from '../../composables/warrantyBadge'
import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
import WarrantyPanel from '../../components/WarrantyPanel.vue'
@@ -267,21 +268,9 @@ const loading = ref(true)
const computer = ref(null)
const relationships = ref({ incoming: [], outgoing: [] })
const installedApps = ref([])
const warranties = ref([])
// Worst-case warranty for the hero badge: expired > expiring > active > unknown.
const heroWarranty = computed(() => {
if (!warranties.value.length) return null
const rank = { expired: 0, expiring: 1, active: 2, unknown: 3 }
const worst = [...warranties.value].sort((a, b) => (rank[a.status] ?? 9) - (rank[b.status] ?? 9))[0]
const labels = { active: 'Under Warranty', expiring: 'Warranty Expiring', expired: 'Warranty Expired', unknown: 'Warranty' }
return { ...worst, label: labels[worst.status] || 'Warranty' }
})
function formatWarrantyDate(d) {
if (!d) return ''
return new Date(d + 'T00:00:00').toLocaleDateString()
}
// Warranty fetch + hero badge (shared across asset detail pages).
const { warranties, heroWarranty, warrantyDate: formatWarrantyDate } = useWarrantyBadge(() => computer.value?.assetid)
const controlledEquipment = computed(() => {
// For computers, find related equipment in any "Controls" relationship
@@ -334,16 +323,7 @@ onMounted(async () => {
} catch (appError) {
console.log('No installed apps data:', appError.message)
}
// Load warranties (one fetch; feeds both the hero badge and the panel)
if (computer.value?.assetid) {
try {
const warrantyResponse = await warrantyApi.forAsset(computer.value.assetid)
warranties.value = warrantyResponse.data.data || []
} catch (warrantyError) {
console.log('No warranty data:', warrantyError.message)
}
}
// Warranties load via useWarrantyBadge (watches computer.assetid).
} catch (error) {
console.error('Error loading computer:', error)
} finally {

1217
frontend/src/views/pcs/PCForm.vue
View File

File diff suppressed because it is too large Load Diff

8
frontend/src/views/printers/PrinterDetail.vue
View File

@@ -25,6 +25,10 @@
<span v-if="printer.printer?.iscsf" class="badge badge-lg badge-info">CSF</span>
<span v-if="printer.printer?.iscolor" class="badge badge-lg badge-success">Color</span>
<span v-if="printer.printer?.isnetwork" class="badge badge-lg badge-secondary">Network</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="printer.printer?.vendorname">
@@ -121,7 +125,7 @@
<CustomFieldsSection :assetid="printer.assetid" />
<!-- Warranty -->
<WarrantyPanel :assetid="printer.assetid" />
<WarrantyPanel :assetid="printer.assetid" :items="warranties" />
<!-- Notes -->
<div class="section-card" v-if="printer.notes">
@@ -263,6 +267,7 @@ import { printersApi } from '../../api'
import LocationMapTooltip from '../../components/LocationMapTooltip.vue'
import CustomFieldsSection from '../../components/CustomFieldsSection.vue'
import WarrantyPanel from '../../components/WarrantyPanel.vue'
import { useWarrantyBadge } from '../../composables/warrantyBadge'
import { useIdentifierFlags } from '../../composables/identifierSettings'
const route = useRoute()
@@ -270,6 +275,7 @@ const { isEnabled } = useIdentifierFlags()
const loading = ref(true)
const printer = ref(null)
const { warranties, heroWarranty, warrantyDate } = useWarrantyBadge(() => printer.value?.assetid)
const supplies = ref([])
const drivers = ref([])

1303
frontend/src/views/printers/PrinterForm.vue
View File

File diff suppressed because it is too large Load Diff

3
frontend/src/views/reports/WarrantyReport.vue
View File

@@ -33,7 +33,7 @@
<tbody>
<tr v-for="w in buckets[b.key]" :key="w.warrantyid">
<td><strong>{{ w.vendor }}</strong></td>
<td>{{ w.servicelevel || '-' }}</td>
<td class="servicelevel-cell" :title="w.servicelevel">{{ w.servicelevel || '-' }}</td>
<td>{{ w.enddate ? formatDate(w.enddate) : '-' }}</td>
<td>
<router-link v-for="a in w.assets" :key="a.assetid" :to="assetLink(a)" class="asset-chip">{{ a.assetnumber }}</router-link>
@@ -100,4 +100,5 @@ onMounted(async () => {
background: var(--bg); border-radius: 12px; font-size: 0.8rem; text-decoration: none; color: var(--text);
}
.muted { color: var(--text-light); }
.servicelevel-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>

3
frontend/src/views/settings/AccessProtocolsList.vue
View File

@@ -92,6 +92,7 @@
<script setup>
import { ref, computed, onMounted } from 'vue'
import { computersApi } from '@/api'
import { apiError } from '../../utils/apiError'
const protocols = ref([])
const loading = ref(true)
@@ -151,7 +152,7 @@ async function save() {
editing.value = false
await load()
} catch (err) {
error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Save failed.'
error.value = apiError(err, 'Save failed.')
} finally {
saving.value = false
}

3
frontend/src/views/settings/AssetTypesList.vue
View File

@@ -68,6 +68,7 @@ import { ref, onMounted } from 'vue'
import { assetsApi } from '../../api'
import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
import { colorStyle } from '@/utils/colorStyle'
import { apiError } from '../../utils/apiError'
const items = ref([])
const loading = ref(true)
@@ -106,7 +107,7 @@ async function save() {
closeModal()
loadData()
} catch (err) {
error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
error.value = apiError(err, 'Failed to save')
} finally {
saving.value = false
}

3
frontend/src/views/settings/BusinessUnitsList.vue
View File

@@ -102,6 +102,7 @@ import { ref, onMounted } from 'vue'
import { businessunitsApi } from '../../api'
import PaginationBar from '../../components/PaginationBar.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const items = ref([])
@@ -168,7 +169,7 @@ async function save() {
closeModal()
loadData()
} catch (err) {
error.value = err.response?.data?.message || 'Failed to save'
error.value = apiError(err, 'Failed to save')
} finally {
saving.value = false
}

5
frontend/src/views/settings/CustomFieldsList.vue
View File

@@ -115,6 +115,7 @@
import { ref, computed, onMounted } from 'vue'
import { assetsApi, customFieldsApi } from '../../api'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const assetTypes = ref([])
@@ -196,7 +197,7 @@ async function save() {
closeModal()
loadFields()
} catch (err) {
error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
error.value = apiError(err, 'Failed to save')
} finally {
saving.value = false
}
@@ -208,7 +209,7 @@ async function deleteField(f) {
await customFieldsApi.remove(f.fieldid)
loadFields()
} catch (err) {
toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
toast.error(apiError(err, 'Failed to delete'))
}
}
</script>

3
frontend/src/views/settings/DashboardDefaultsList.vue
View File

@@ -105,6 +105,7 @@
import { ref, onMounted } from 'vue'
import { dashboardDefaultsApi, businessUnitsApi } from '../../api'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const items = ref([])
@@ -168,7 +169,7 @@ async function save() {
closeModal()
loadData()
} catch (err) {
error.value = err.response?.data?.message || 'Failed to save'
error.value = apiError(err, 'Failed to save')
} finally {
saving.value = false
}

5
frontend/src/views/settings/EquipmentTypesList.vue
View File

@@ -77,6 +77,7 @@ import { equipmentApi } from '../../api'
import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
import { colorStyle } from '@/utils/colorStyle'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const items = ref([])
@@ -126,7 +127,7 @@ async function save() {
closeModal()
loadData()
} catch (err) {
error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
error.value = apiError(err, 'Failed to save')
} finally {
saving.value = false
}
@@ -138,7 +139,7 @@ async function deleteType(t) {
await equipmentApi.types.remove(t.equipmenttypeid)
loadData()
} catch (err) {
toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
toast.error(apiError(err, 'Failed to delete'))
}
}
</script>

5
frontend/src/views/settings/LocationTypesList.vue
View File

@@ -77,6 +77,7 @@ import { locationsApi } from '../../api'
import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
import { colorStyle } from '@/utils/colorStyle'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const items = ref([])
@@ -126,7 +127,7 @@ async function save() {
closeModal()
loadData()
} catch (err) {
error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
error.value = apiError(err, 'Failed to save')
} finally {
saving.value = false
}
@@ -138,7 +139,7 @@ async function deleteType(t) {
await locationsApi.types.remove(t.locationtypeid)
loadData()
} catch (err) {
toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
toast.error(apiError(err, 'Failed to delete'))
}
}
</script>

3
frontend/src/views/settings/LocationsList.vue
View File

@@ -212,6 +212,7 @@ import { ref, computed, onMounted } from 'vue'
import { locationsApi } from '../../api'
import PaginationBar from '../../components/PaginationBar.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const locations = ref([])
@@ -354,7 +355,7 @@ async function saveLocation() {
loadLocations()
} catch (err) {
console.error('Error saving location:', err)
error.value = err.response?.data?.message || 'Failed to save location'
error.value = apiError(err, 'Failed to save location')
} finally {
saving.value = false
}

3
frontend/src/views/settings/MachineTypesList.vue
View File

@@ -146,6 +146,7 @@ import { ref, onMounted } from 'vue'
import { machinetypesApi } from '../../api'
import PaginationBar from '../../components/PaginationBar.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const machineTypes = ref([])
@@ -239,7 +240,7 @@ async function saveType() {
loadTypes()
} catch (err) {
console.error('Error saving machine type:', err)
error.value = err.response?.data?.message || 'Failed to save machine type'
error.value = apiError(err, 'Failed to save machine type')
} finally {
saving.value = false
}

3
frontend/src/views/settings/ModelSuppliesList.vue
View File

@@ -147,6 +147,7 @@
<script setup>
import { ref, onMounted } from 'vue'
import { printersApi } from '@/api'
import { apiError } from '../../utils/apiError'
const models = ref([])
const loadingModels = ref(true)
@@ -246,7 +247,7 @@ async function save() {
await selectModel(selectedModel.value)
await loadModels()
} catch (err) {
formError.value = err.response?.data?.error?.message || 'Save failed.'
formError.value = apiError(err, 'Save failed.')
} finally {
saving.value = false
}

3
frontend/src/views/settings/ModelsList.vue
View File

@@ -184,6 +184,7 @@ import { ref, onMounted } from 'vue'
import { modelsApi, vendorsApi, machinetypesApi } from '../../api'
import PaginationBar from '../../components/PaginationBar.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const models = ref([])
@@ -328,7 +329,7 @@ async function saveModel() {
loadModels()
} catch (err) {
console.error('Error saving model:', err)
error.value = err.response?.data?.message || 'Failed to save model'
error.value = apiError(err, 'Failed to save model')
} finally {
saving.value = false
}

5
frontend/src/views/settings/NetworkTypesList.vue
View File

@@ -77,6 +77,7 @@ import { networkApi } from '../../api'
import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
import { colorStyle } from '@/utils/colorStyle'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const items = ref([])
@@ -126,7 +127,7 @@ async function save() {
closeModal()
loadData()
} catch (err) {
error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
error.value = apiError(err, 'Failed to save')
} finally {
saving.value = false
}
@@ -138,7 +139,7 @@ async function deleteType(t) {
await networkApi.types.remove(t.networkdevicetypeid)
loadData()
} catch (err) {
toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
toast.error(apiError(err, 'Failed to delete'))
}
}
</script>

3
frontend/src/views/settings/OperatingSystemsList.vue
View File

@@ -120,6 +120,7 @@ import { ref, onMounted } from 'vue'
import { operatingsystemsApi } from '../../api'
import PaginationBar from '../../components/PaginationBar.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const items = ref([])
@@ -193,7 +194,7 @@ async function save() {
closeModal()
loadData()
} catch (err) {
error.value = err.response?.data?.message || 'Failed to save'
error.value = apiError(err, 'Failed to save')
} finally {
saving.value = false
}

5
frontend/src/views/settings/PCTypesList.vue
View File

@@ -87,6 +87,7 @@ import { computersApi } from '../../api'
import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
import { colorStyle } from '@/utils/colorStyle'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const pcTypes = ref([])
@@ -132,7 +133,7 @@ async function deleteType(pt) {
await computersApi.types.remove(pt.computertypeid)
loadData()
} catch (err) {
toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
toast.error(apiError(err, 'Failed to delete'))
}
}
@@ -148,7 +149,7 @@ async function save() {
closeModal()
loadData()
} catch (err) {
error.value = err.response?.data?.message || 'Failed to save'
error.value = apiError(err, 'Failed to save')
} finally {
saving.value = false
}

5
frontend/src/views/settings/PrinterDriversList.vue
View File

@@ -98,6 +98,7 @@
import { ref, computed, onMounted } from 'vue'
import { printersApi } from '../../api'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const items = ref([])
@@ -161,7 +162,7 @@ async function save() {
closeModal()
loadData()
} catch (err) {
error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
error.value = apiError(err, 'Failed to save')
} finally {
saving.value = false
}
@@ -173,7 +174,7 @@ async function deleteDriver(d) {
await printersApi.drivers.delete(d.driverid)
loadData()
} catch (err) {
toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
toast.error(apiError(err, 'Failed to delete'))
}
}
</script>

5
frontend/src/views/settings/PrinterTypesList.vue
View File

@@ -77,6 +77,7 @@ import { printersApi } from '../../api'
import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
import { colorStyle } from '@/utils/colorStyle'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const items = ref([])
@@ -126,7 +127,7 @@ async function save() {
closeModal()
loadData()
} catch (err) {
error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
error.value = apiError(err, 'Failed to save')
} finally {
saving.value = false
}
@@ -138,7 +139,7 @@ async function deleteType(t) {
await printersApi.types.remove(t.printertypeid)
loadData()
} catch (err) {
toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
toast.error(apiError(err, 'Failed to delete'))
}
}
</script>

5
frontend/src/views/settings/RelationshipTypesList.vue
View File

@@ -77,6 +77,7 @@ import { relationshipTypesApi } from '../../api'
import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
import { colorStyle } from '@/utils/colorStyle'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const items = ref([])
@@ -126,7 +127,7 @@ async function save() {
closeModal()
loadData()
} catch (err) {
error.value = err.response?.data?.error?.message || err.response?.data?.message || 'Failed to save'
error.value = apiError(err, 'Failed to save')
} finally {
saving.value = false
}
@@ -138,7 +139,7 @@ async function deleteType(t) {
await relationshipTypesApi.remove(t.relationshiptypeid)
loadData()
} catch (err) {
toast.error(err.response?.data?.error?.message || err.response?.data?.message || 'Failed to delete')
toast.error(apiError(err, 'Failed to delete'))
}
}
</script>

3
frontend/src/views/settings/SiteSettings.vue
View File

@@ -31,6 +31,7 @@
<script setup>
import { ref, onMounted } from 'vue'
import { settingsApi } from '@/api'
import { apiError } from '../../utils/apiError'
const items = ref([])
const loading = ref(true)
@@ -71,7 +72,7 @@ async function save() {
}
saved.value = true
} catch (err) {
error.value = err.response?.data?.error?.message || 'Save failed.'
error.value = apiError(err, 'Save failed.')
} finally {
saving.value = false
}

5
frontend/src/views/settings/StatusesList.vue
View File

@@ -140,6 +140,7 @@ import { assetsApi } from '../../api'
import PaginationBar from '../../components/PaginationBar.vue'
import ColorSwatchPicker from '@/components/ColorSwatchPicker.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const statuses = ref([])
@@ -233,7 +234,7 @@ async function saveStatus() {
loadStatuses()
} catch (err) {
console.error('Error saving status:', err)
error.value = err.response?.data?.message || 'Failed to save status'
error.value = apiError(err, 'Failed to save status')
} finally {
saving.value = false
}
@@ -252,7 +253,7 @@ async function deleteStatus() {
loadStatuses()
} catch (err) {
console.error('Error deleting status:', err)
error.value = err.response?.data?.message || 'Failed to delete status'
error.value = apiError(err, 'Failed to delete status')
toast.error(error.value)
}
}

5
frontend/src/views/settings/SubnetsList.vue
View File

@@ -286,6 +286,7 @@ import { useRoute } from 'vue-router'
import { networkApi, locationsApi } from '../../api'
import PaginationBar from '../../components/PaginationBar.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const route = useRoute()
@@ -472,7 +473,7 @@ async function saveSubnet() {
loadSubnets()
} catch (err) {
console.error('Error saving subnet:', err)
error.value = err.response?.data?.message || 'Failed to save subnet'
error.value = apiError(err, 'Failed to save subnet')
} finally {
saving.value = false
}
@@ -491,7 +492,7 @@ async function deleteSubnet() {
loadSubnets()
} catch (err) {
console.error('Error deleting subnet:', err)
toast.error(err.response?.data?.message || 'Failed to delete subnet')
toast.error(apiError(err, 'Failed to delete subnet'))
}
}
</script>

11
frontend/src/views/settings/SystemSettings.vue
View File

@@ -657,6 +657,7 @@ import { ref, reactive, onMounted, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { settingsApi, computersApi } from '../../api'
import { setIdentifierFlag } from '../../composables/identifierSettings'
import { apiError } from '../../utils/apiError'
// Section tabs - one section visible at a time to avoid a long scroll. The
// search box filters tabs (and, while searching, shows every matching section).
@@ -900,7 +901,7 @@ async function changePcTypeMapping(pxetype, computertype) {
success.value = 'Setting saved'
setTimeout(() => { success.value = '' }, 2000)
} catch (e) {
error.value = e.response?.data?.message || 'Failed to save setting'
error.value = apiError(e, 'Failed to save setting')
console.error(e)
} finally {
saving.value = false
@@ -943,7 +944,7 @@ async function toggleIdentifier(name, assettype) {
success.value = 'Setting saved'
setTimeout(() => { success.value = '' }, 2000)
} catch (e) {
error.value = e.response?.data?.message || 'Failed to save setting'
error.value = apiError(e, 'Failed to save setting')
console.error(e)
} finally {
saving.value = false
@@ -977,7 +978,7 @@ async function toggleSearchDomain(domainKey) {
success.value = 'Setting saved'
setTimeout(() => { success.value = '' }, 2000)
} catch (e) {
error.value = e.response?.data?.message || 'Failed to save setting'
error.value = apiError(e, 'Failed to save setting')
console.error(e)
} finally {
saving.value = false
@@ -996,7 +997,7 @@ async function saveSetting(key, value) {
success.value = 'Setting saved'
setTimeout(() => { success.value = '' }, 2000)
} catch (e) {
error.value = e.response?.data?.message || 'Failed to save setting'
error.value = apiError(e, 'Failed to save setting')
console.error(e)
} finally {
saving.value = false
@@ -1013,7 +1014,7 @@ async function testEmail() {
// await settingsApi.testEmail()
success.value = 'Test email feature coming soon'
} catch (e) {
error.value = e.response?.data?.message || 'Failed to send test email'
error.value = apiError(e, 'Failed to send test email')
} finally {
testingEmail.value = false
setTimeout(() => { success.value = '' }, 3000)

1491
frontend/src/views/settings/UsersList.vue
View File

File diff suppressed because it is too large Load Diff

5
frontend/src/views/settings/VLANsList.vue
View File

@@ -188,6 +188,7 @@ import { ref, onMounted } from 'vue'
import { networkApi } from '../../api'
import PaginationBar from '../../components/PaginationBar.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const vlans = ref([])
@@ -309,7 +310,7 @@ async function saveVLAN() {
loadVLANs()
} catch (err) {
console.error('Error saving VLAN:', err)
error.value = err.response?.data?.message || 'Failed to save VLAN'
error.value = apiError(err, 'Failed to save VLAN')
} finally {
saving.value = false
}
@@ -328,7 +329,7 @@ async function deleteVLAN() {
loadVLANs()
} catch (err) {
console.error('Error deleting VLAN:', err)
toast.error(err.response?.data?.message || 'Failed to delete VLAN')
toast.error(apiError(err, 'Failed to delete VLAN'))
}
}
</script>

5
frontend/src/views/usb/USBDetail.vue
View File

@@ -169,6 +169,7 @@ import { useRoute } from 'vue-router'
import { usbApi } from '../../api'
import Modal from '../../components/Modal.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const route = useRoute()
@@ -219,7 +220,7 @@ async function doCheckout() {
await loadDevice()
} catch (error) {
console.error('Checkout error:', error)
toast.error(error.response?.data?.message || 'Checkout failed')
toast.error(apiError(error, 'Checkout failed'))
}
}
@@ -230,7 +231,7 @@ async function doCheckin() {
await loadDevice()
} catch (error) {
console.error('Checkin error:', error)
toast.error(error.response?.data?.message || 'Check in failed')
toast.error(apiError(error, 'Check in failed'))
}
}

461
frontend/src/views/usb/USBForm.vue
View File

@@ -1,230 +1,231 @@
<template>
<div>
<div class="page-header">
<h2>{{ isEdit ? 'Edit USB Device' : 'Add USB Device' }}</h2>
</div>
<div class="card">
<div v-if="loading" class="loading">Loading...</div>
<form v-else @submit.prevent="saveDevice">
<div class="form-group">
<label for="serialnumber">Serial Number *</label>
<input
id="serialnumber"
v-model="form.serialnumber"
type="text"
class="form-control"
required
maxlength="100"
/>
</div>
<div class="form-group">
<label for="displayname">Display Name *</label>
<input
id="displayname"
v-model="form.displayname"
type="text"
class="form-control"
required
maxlength="100"
placeholder="e.g., USB Flash Drive #1"
/>
</div>
<div class="form-group">
<label for="label">Label</label>
<input
id="label"
v-model="form.label"
type="text"
class="form-control"
maxlength="100"
placeholder="Physical label on device"
/>
</div>
<div class="form-row">
<div class="form-group">
<label for="usbtypeid">Device Type</label>
<select
id="usbtypeid"
v-model="form.usbtypeid"
class="form-control"
>
<option value="">-- Select Type --</option>
<option
v-for="type in types"
:key="type.usbtypeid"
:value="type.usbtypeid"
>
{{ type.typename }}
</option>
</select>
</div>
<div class="form-group">
<label for="capacitygb">Capacity (GB)</label>
<input
id="capacitygb"
v-model.number="form.capacitygb"
type="number"
class="form-control"
min="0"
step="1"
/>
</div>
</div>
<div class="form-group">
<label for="vendorid">Vendor</label>
<select
id="vendorid"
v-model="form.vendorid"
class="form-control"
>
<option value="">-- Select Vendor --</option>
<option
v-for="vendor in vendors"
:key="vendor.vendorid"
:value="vendor.vendorid"
>
{{ vendor.vendorname }}
</option>
</select>
</div>
<div class="form-group">
<label for="notes">Notes</label>
<textarea
id="notes"
v-model="form.notes"
class="form-control"
rows="3"
></textarea>
</div>
<div v-if="error" class="error-message">{{ error }}</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" :disabled="saving">
{{ saving ? 'Saving...' : (isEdit ? 'Update Device' : 'Add Device') }}
</button>
<router-link to="/usb" class="btn btn-secondary">Cancel</router-link>
</div>
</form>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usbApi, vendorsApi } from '@/api'
const route = useRoute()
const router = useRouter()
const isEdit = computed(() => !!route.params.id)
const loading = ref(true)
const saving = ref(false)
const error = ref('')
const types = ref([])
const vendors = ref([])
const form = ref({
serialnumber: '',
displayname: '',
label: '',
usbtypeid: '',
capacitygb: null,
vendorid: '',
notes: ''
})
onMounted(async () => {
try {
// Load types and vendors
const [typesRes, vendorsRes] = await Promise.all([
usbApi.types.list(),
vendorsApi.list({ perpage: 1000 })
])
types.value = typesRes.data.data || []
vendors.value = vendorsRes.data.data || []
// Load device if editing
if (isEdit.value) {
const response = await usbApi.get(route.params.id)
const device = response.data.data
form.value = {
serialnumber: device.serialnumber || '',
displayname: device.displayname || '',
label: device.label || '',
usbtypeid: device.usbtypeid || '',
capacitygb: device.capacitygb || null,
vendorid: device.vendorid || '',
notes: device.notes || ''
}
}
} catch (err) {
console.error('Error loading data:', err)
error.value = 'Failed to load data'
} finally {
loading.value = false
}
})
async function saveDevice() {
error.value = ''
saving.value = true
try {
const data = {
serialnumber: form.value.serialnumber,
displayname: form.value.displayname,
label: form.value.label || null,
usbtypeid: form.value.usbtypeid || null,
capacitygb: form.value.capacitygb || null,
vendorid: form.value.vendorid || null,
notes: form.value.notes || null
}
if (isEdit.value) {
await usbApi.update(route.params.id, data)
} else {
await usbApi.create(data)
}
router.push('/usb')
} catch (err) {
console.error('Error saving device:', err)
error.value = err.response?.data?.message || 'Failed to save device'
} finally {
saving.value = false
}
}
</script>
<style scoped>
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-actions {
display: flex;
gap: 0.5rem;
margin-top: 1.5rem;
}
@media (max-width: 600px) {
.form-row {
grid-template-columns: 1fr;
}
}
</style>
<template>
<div>
<div class="page-header">
<h2>{{ isEdit ? 'Edit USB Device' : 'Add USB Device' }}</h2>
</div>
<div class="card">
<div v-if="loading" class="loading">Loading...</div>
<form v-else @submit.prevent="saveDevice">
<div class="form-group">
<label for="serialnumber">Serial Number *</label>
<input
id="serialnumber"
v-model="form.serialnumber"
type="text"
class="form-control"
required
maxlength="100"
/>
</div>
<div class="form-group">
<label for="displayname">Display Name *</label>
<input
id="displayname"
v-model="form.displayname"
type="text"
class="form-control"
required
maxlength="100"
placeholder="e.g., USB Flash Drive #1"
/>
</div>
<div class="form-group">
<label for="label">Label</label>
<input
id="label"
v-model="form.label"
type="text"
class="form-control"
maxlength="100"
placeholder="Physical label on device"
/>
</div>
<div class="form-row">
<div class="form-group">
<label for="usbtypeid">Device Type</label>
<select
id="usbtypeid"
v-model="form.usbtypeid"
class="form-control"
>
<option value="">-- Select Type --</option>
<option
v-for="type in types"
:key="type.usbtypeid"
:value="type.usbtypeid"
>
{{ type.typename }}
</option>
</select>
</div>
<div class="form-group">
<label for="capacitygb">Capacity (GB)</label>
<input
id="capacitygb"
v-model.number="form.capacitygb"
type="number"
class="form-control"
min="0"
step="1"
/>
</div>
</div>
<div class="form-group">
<label for="vendorid">Vendor</label>
<select
id="vendorid"
v-model="form.vendorid"
class="form-control"
>
<option value="">-- Select Vendor --</option>
<option
v-for="vendor in vendors"
:key="vendor.vendorid"
:value="vendor.vendorid"
>
{{ vendor.vendorname }}
</option>
</select>
</div>
<div class="form-group">
<label for="notes">Notes</label>
<textarea
id="notes"
v-model="form.notes"
class="form-control"
rows="3"
></textarea>
</div>
<div v-if="error" class="error-message">{{ error }}</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" :disabled="saving">
{{ saving ? 'Saving...' : (isEdit ? 'Update Device' : 'Add Device') }}
</button>
<router-link to="/usb" class="btn btn-secondary">Cancel</router-link>
</div>
</form>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usbApi, vendorsApi } from '@/api'
import { apiError } from '../../utils/apiError'
const route = useRoute()
const router = useRouter()
const isEdit = computed(() => !!route.params.id)
const loading = ref(true)
const saving = ref(false)
const error = ref('')
const types = ref([])
const vendors = ref([])
const form = ref({
serialnumber: '',
displayname: '',
label: '',
usbtypeid: '',
capacitygb: null,
vendorid: '',
notes: ''
})
onMounted(async () => {
try {
// Load types and vendors
const [typesRes, vendorsRes] = await Promise.all([
usbApi.types.list(),
vendorsApi.list({ perpage: 1000 })
])
types.value = typesRes.data.data || []
vendors.value = vendorsRes.data.data || []
// Load device if editing
if (isEdit.value) {
const response = await usbApi.get(route.params.id)
const device = response.data.data
form.value = {
serialnumber: device.serialnumber || '',
displayname: device.displayname || '',
label: device.label || '',
usbtypeid: device.usbtypeid || '',
capacitygb: device.capacitygb || null,
vendorid: device.vendorid || '',
notes: device.notes || ''
}
}
} catch (err) {
console.error('Error loading data:', err)
error.value = 'Failed to load data'
} finally {
loading.value = false
}
})
async function saveDevice() {
error.value = ''
saving.value = true
try {
const data = {
serialnumber: form.value.serialnumber,
displayname: form.value.displayname,
label: form.value.label || null,
usbtypeid: form.value.usbtypeid || null,
capacitygb: form.value.capacitygb || null,
vendorid: form.value.vendorid || null,
notes: form.value.notes || null
}
if (isEdit.value) {
await usbApi.update(route.params.id, data)
} else {
await usbApi.create(data)
}
router.push('/usb')
} catch (err) {
console.error('Error saving device:', err)
error.value = apiError(err, 'Failed to save device')
} finally {
saving.value = false
}
}
</script>
<style scoped>
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-actions {
display: flex;
gap: 0.5rem;
margin-top: 1.5rem;
}
@media (max-width: 600px) {
.form-row {
grid-template-columns: 1fr;
}
}
</style>

5
frontend/src/views/usb/USBList.vue
View File

@@ -148,6 +148,7 @@ import Modal from '../../components/Modal.vue'
import EmployeeSearch from '../../components/EmployeeSearch.vue'
import PaginationBar from '../../components/PaginationBar.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const devices = ref([])
@@ -243,7 +244,7 @@ async function doCheckout() {
loadDevices()
} catch (error) {
console.error('Checkout error:', error)
toast.error(error.response?.data?.message || 'Checkout failed')
toast.error(apiError(error, 'Checkout failed'))
}
}
@@ -254,7 +255,7 @@ async function doCheckin() {
loadDevices()
} catch (error) {
console.error('Checkin error:', error)
toast.error(error.response?.data?.message || 'Check in failed')
toast.error(apiError(error, 'Check in failed'))
}
}

3
frontend/src/views/vendors/VendorsList.vue vendored
View File

@@ -187,6 +187,7 @@ import { ref, onMounted } from 'vue'
import { vendorsApi } from '../../api'
import PaginationBar from '../../components/PaginationBar.vue'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const vendors = ref([])
@@ -304,7 +305,7 @@ async function saveVendor() {
loadVendors()
} catch (err) {
console.error('Error saving vendor:', err)
error.value = err.response?.data?.message || 'Failed to save vendor'
error.value = apiError(err, 'Failed to save vendor')
} finally {
saving.value = false
}

66
frontend/src/views/warranty/WarrantiesList.vue
View File

@@ -3,14 +3,17 @@
<div class="page-header">
<h2>Warranties</h2>
<div class="header-actions">
<button class="btn btn-secondary" :disabled="syncing" @click="syncDell">
<button class="btn btn-secondary" :disabled="syncing" @click="syncDell(false)">
{{ syncing ? 'Syncing Dell...' : 'Sync Dell' }}
</button>
<button class="btn btn-secondary" :disabled="syncing" @click="syncDell(true)"
title="Re-check every Dell warranty, including ones already dated">
Re-check all
</button>
<button class="btn btn-primary" @click="openModal()">+ Add Warranty</button>
</div>
</div>
<div class="filters">
<label>Status
<select v-model="statusFilter" class="form-control" @change="loadData">
@@ -21,6 +24,8 @@
<option value="unknown">Unknown</option>
</select>
</label>
<input v-model="search" type="text" class="form-control" placeholder="Search vendor, service level, tag, asset..." />
<span class="result-count">{{ filteredItems.length }} of {{ items.length }}</span>
</div>
<div class="card">
@@ -39,10 +44,10 @@
</tr>
</thead>
<tbody>
<tr v-for="w in items" :key="w.warrantyid">
<tr v-for="w in paginatedItems" :key="w.warrantyid">
<td><strong>{{ w.vendor }}</strong><span v-if="w.provider !== 'manual'" class="muted"> ({{ w.provider }})</span></td>
<td><span class="status-badge" :style="colorStyle(w.statuscolor)">{{ statusLabel(w.status) }}</span></td>
<td>{{ w.servicelevel || '-' }}</td>
<td class="servicelevel-cell" :title="w.servicelevel">{{ w.servicelevel || '-' }}</td>
<td>{{ w.enddate ? formatDate(w.enddate) : '-' }}</td>
<td>
<span v-if="!w.assets.length" class="muted">-</span>
@@ -54,12 +59,18 @@
<button class="btn btn-danger btn-sm" @click="deleteWarranty(w)">Delete</button>
</td>
</tr>
<tr v-if="items.length === 0">
<tr v-if="filteredItems.length === 0">
<td colspan="6" style="text-align: center; color: var(--text-light);">No warranties</td>
</tr>
</tbody>
</table>
</div>
<div v-if="totalPages > 1" class="pagination">
<button class="btn btn-secondary btn-sm" :disabled="page === 1" @click="page--">Prev</button>
<span class="page-info">Page {{ page }} of {{ totalPages }}</span>
<button class="btn btn-secondary btn-sm" :disabled="page === totalPages" @click="page++">Next</button>
</div>
</template>
</div>
@@ -141,11 +152,12 @@
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { colorStyle } from '@/utils/colorStyle'
import { warrantyApi, assetsApi } from '../../api'
import { useToast } from '../../composables/toast'
import { apiError } from '../../utils/apiError'
const toast = useToast()
const route = useRoute()
@@ -153,6 +165,28 @@ const route = useRoute()
const items = ref([])
const loading = ref(true)
const syncing = ref(false)
const search = ref('')
const page = ref(1)
const perPage = 25
// Client-side search across vendor / service level / tag / linked asset numbers.
const filteredItems = computed(() => {
const term = search.value.trim().toLowerCase()
if (!term) return items.value
return items.value.filter(w =>
(w.vendor || '').toLowerCase().includes(term) ||
(w.servicelevel || '').toLowerCase().includes(term) ||
(w.servicetag || '').toLowerCase().includes(term) ||
(w.assets || []).some(a => (a.assetnumber || '').toLowerCase().includes(term)))
})
const totalPages = computed(() => Math.max(1, Math.ceil(filteredItems.value.length / perPage)))
const paginatedItems = computed(() => filteredItems.value.slice((page.value - 1) * perPage, page.value * perPage))
// Reset to page 1 whenever the filtered set changes.
watch([filteredItems, () => filteredItems.value.length], () => {
if (page.value > totalPages.value) page.value = 1
})
watch(search, () => { page.value = 1 })
const statusFilter = ref('')
const showModal = ref(false)
const editing = ref(null)
@@ -254,14 +288,6 @@ function openModal(item = null) {
}
function closeModal() { showModal.value = false; editing.value = null }
// API errors nest the message at data.data.error.message (see error_response).
function apiError(err, fallback) {
return err.response?.data?.data?.error?.message
|| err.response?.data?.error?.message
|| err.response?.data?.message
|| fallback
}
async function save() {
error.value = ''
saving.value = true
@@ -291,11 +317,11 @@ async function deleteWarranty(w) {
}
}
async function syncDell() {
async function syncDell(all = false) {
syncing.value = true
toast.info('Looking up Dell service tags... this can take a moment.')
toast.info(all ? 'Re-checking all Dell warranties...' : 'Looking up Dell service tags... this can take a moment.')
try {
const response = await warrantyApi.syncDell()
const response = await warrantyApi.syncDell(all)
const summary = response.data?.data || {}
loadData()
toast.success(`Dell sync: ${summary.created || 0} added, ${summary.updated || 0} updated (${summary.matched || 0} tags matched).`)
@@ -323,6 +349,12 @@ async function refresh(w) {
<style scoped>
.muted { color: var(--text-light); }
.status-badge { padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.78rem; font-weight: 600; }
.filters { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filters .form-control { max-width: 320px; }
.result-count { color: var(--text-light); font-size: 0.85rem; }
.servicelevel-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.9rem 0 0.2rem; }
.page-info { color: var(--text-light); font-size: 0.85rem; }
.form-row { display: flex; gap: 1rem; }
.form-row .form-group { flex: 1; }
.asset-search { position: relative; }