640b8de1b2
- POST /warranty/sync/dell: auto-detect Dell hardware by service tag (asset serial) and create warranties for the ones Dell recognizes, in batches of 100. Only looks up assets that lack a dated warranty, so re-runs are cheap and non-Dell serials are filtered out by Dell. DellProvider.bulk_lookup batches tags over the cached token. - "Sync Dell" button on the Warranties page with a toast summary. - WarrantyPanel "Add one / Add-manage" links deep-link to the warranties add modal pre-linked to that asset (?addfor=); WarrantiesList opens it prefilled. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
82 lines
3.1 KiB
Vue
82 lines
3.1 KiB
Vue
<template>
|
|
<div class="section-card" v-if="warranties.length || showEmpty">
|
|
<h3 class="section-title">Warranty</h3>
|
|
|
|
<div v-if="warranties.length" class="warranty-list">
|
|
<div v-for="w in warranties" :key="w.warrantyid" class="warranty-item">
|
|
<div class="warranty-top">
|
|
<span class="warranty-vendor">{{ w.vendor }}</span>
|
|
<span class="status-badge" :style="colorStyle(w.statuscolor)">{{ statusLabel(w.status) }}</span>
|
|
</div>
|
|
<div class="warranty-meta">
|
|
<span v-if="w.servicelevel">{{ w.servicelevel }}</span>
|
|
<span v-if="w.enddate">Ends {{ formatDate(w.enddate) }}</span>
|
|
<span v-if="w.servicetag" class="mono">Tag {{ w.servicetag }}</span>
|
|
</div>
|
|
</div>
|
|
<router-link :to="`/warranties?addfor=${assetid}`" class="warranty-manage">Add / manage</router-link>
|
|
</div>
|
|
|
|
<div v-else class="warranty-empty">
|
|
<span class="muted">No warranty on record.</span>
|
|
<router-link :to="`/warranties?addfor=${assetid}`" class="warranty-manage">Add one</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, onMounted } from 'vue'
|
|
import { colorStyle } from '@/utils/colorStyle'
|
|
import { warrantyApi } from '../api'
|
|
|
|
const props = defineProps({
|
|
assetid: { type: [Number, String], default: null },
|
|
// When true, render the card even with no warranties (shows an "Add one" link).
|
|
showEmpty: { type: Boolean, default: false },
|
|
// Optional pre-fetched warranties. When provided, the panel uses them instead
|
|
// of fetching (lets a parent share one fetch with e.g. a hero badge).
|
|
items: { type: Array, default: null },
|
|
})
|
|
|
|
const warranties = ref([])
|
|
|
|
function statusLabel(status) {
|
|
return { active: 'Active', expiring: 'Expiring Soon', expired: 'Expired', unknown: 'Unknown' }[status] || status
|
|
}
|
|
|
|
function formatDate(d) {
|
|
if (!d) return '-'
|
|
return new Date(d + 'T00:00:00').toLocaleDateString()
|
|
}
|
|
|
|
async function load() {
|
|
// Parent-supplied data wins - skip the fetch.
|
|
if (props.items !== null) { warranties.value = props.items; return }
|
|
if (!props.assetid) { warranties.value = []; return }
|
|
try {
|
|
const response = await warrantyApi.forAsset(props.assetid)
|
|
warranties.value = response.data.data || []
|
|
} catch (err) {
|
|
console.error('Error loading warranties:', err)
|
|
warranties.value = []
|
|
}
|
|
}
|
|
|
|
onMounted(load)
|
|
watch(() => props.assetid, load)
|
|
watch(() => props.items, load)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.warranty-list { display: flex; flex-direction: column; gap: 0.75rem; }
|
|
.warranty-item { padding: 0.6rem 0.75rem; background: var(--bg); border-radius: 6px; }
|
|
.warranty-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
|
|
.warranty-vendor { font-weight: 600; color: var(--text); }
|
|
.status-badge { padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
|
|
.warranty-meta { margin-top: 0.35rem; display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.82rem; color: var(--text-light); }
|
|
.warranty-empty { display: flex; align-items: center; gap: 0.6rem; }
|
|
.warranty-manage { font-size: 0.82rem; }
|
|
.mono { font-family: monospace; }
|
|
.muted { color: var(--text-light); }
|
|
</style>
|