150 lines
4.3 KiB
Vue
150 lines
4.3 KiB
Vue
<template>
|
|
<div class="detail-page" v-if="item">
|
|
<div class="hero-card">
|
|
<div class="hero-content">
|
|
<div class="hero-title-row">
|
|
<h1 class="hero-title">{{ item.name || item.assetnumber || 'Securesend' }}</h1>
|
|
<router-link
|
|
v-if="authStore.isAuthenticated"
|
|
:to="`/securesend/${itemId}/edit`"
|
|
class="btn btn-secondary"
|
|
>
|
|
Edit
|
|
</router-link>
|
|
</div>
|
|
<div class="hero-details">
|
|
<div class="detail-item" v-if="item.assetnumber">
|
|
<span class="label">Asset #</span>
|
|
<span class="value">{{ item.assetnumber }}</span>
|
|
</div>
|
|
<div class="detail-item" v-if="item.serialnumber">
|
|
<span class="label">Serial</span>
|
|
<span class="value mono">{{ item.serialnumber }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-grid">
|
|
<div class="content-column">
|
|
<div class="section-card">
|
|
<h3 class="section-title">Securesend Information</h3>
|
|
<div class="info-list">
|
|
<div class="info-row">
|
|
<span class="info-label">Example Field</span>
|
|
<span class="info-value">{{ item.examplefield || '-' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-column">
|
|
<div class="section-card">
|
|
<h3 class="section-title">Asset Information</h3>
|
|
<div class="info-list">
|
|
<div class="info-row">
|
|
<span class="info-label">Asset Number</span>
|
|
<span class="info-value">{{ item.assetnumber || '-' }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Name</span>
|
|
<span class="info-value">{{ item.name || '-' }}</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Serial Number</span>
|
|
<span class="info-value mono">{{ item.serialnumber || '-' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-bar" v-if="authStore.isAuthenticated">
|
|
<router-link :to="`/securesend/${itemId}/edit`" class="btn btn-primary">Edit</router-link>
|
|
<button @click="confirmDelete" class="btn btn-danger">Delete</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="loading" class="loading-container">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
|
|
<div v-else class="error-container">
|
|
<p>Record not found</p>
|
|
<router-link to="/securesend" class="btn btn-secondary">Back to Securesend</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import api from '../../api'
|
|
import { useAuthStore } from '../../stores/auth'
|
|
|
|
// local api client. move into src/api/index.js (see
|
|
// plugins/securesend/frontend-api-snippet.js) then swap for:
|
|
// import { securesendApi } from '../../api'
|
|
const securesendApi = {
|
|
list(params = {}) { return api.get('/securesend', { params }) },
|
|
get(itemId) { return api.get(`/securesend/${itemId}`) },
|
|
create(data) { return api.post('/securesend', data) },
|
|
update(itemId, data) { return api.put(`/securesend/${itemId}`, data) },
|
|
remove(itemId) { return api.delete(`/securesend/${itemId}`) }
|
|
}
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const authStore = useAuthStore()
|
|
|
|
const itemId = route.params.id
|
|
const item = ref(null)
|
|
const loading = ref(true)
|
|
|
|
onMounted(loadItem)
|
|
|
|
async function loadItem() {
|
|
loading.value = true
|
|
try {
|
|
const response = await securesendApi.get(itemId)
|
|
item.value = response.data.data
|
|
} catch (error) {
|
|
console.error('Error loading securesend:', error)
|
|
item.value = null
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
async function confirmDelete() {
|
|
if (confirm('Delete this record?')) {
|
|
try {
|
|
await securesendApi.remove(itemId)
|
|
router.push('/securesend')
|
|
} catch (error) {
|
|
console.error('Error deleting securesend:', error)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mono {
|
|
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
|
|
}
|
|
|
|
.action-bar {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.loading-container,
|
|
.error-container {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: var(--text-light);
|
|
}
|
|
</style>
|