58 lines
1.4 KiB
Vue
58 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const { $trpc } = useNuxtApp();
|
|
const route = useRoute();
|
|
|
|
const { data: contact } = await $trpc.contactGet.useQuery({ contactId: `${route.params.contactId}` });
|
|
if (contact.value === null) throw createError({ statusCode: 404, statusMessage: 'Not Found' });
|
|
|
|
function deleteSubmit(event: Event) {
|
|
const response = window.confirm(
|
|
'Please confirm you want to delete this record.'
|
|
);
|
|
if (!response) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div id="contact">
|
|
<div>
|
|
<img
|
|
:key="contact.avatar"
|
|
:alt="() => `${contact.first} ${contact.last} avatar`"
|
|
:src="contact.avatar"
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<h1>
|
|
<template v-if="contact.first || contact.last">
|
|
{{ `${contact.first} ${contact.last}` }}
|
|
</template>
|
|
<i v-else>No Name</i>
|
|
<ContactFavorite :contact="contact"/>
|
|
</h1>
|
|
<p v-if="contact.twitter">
|
|
<a :href="`https://twitter.com/${contact.twitter}`">{{ contact.twitter }}</a>
|
|
</p>
|
|
<p v-if="contact.notes">{{ contact.notes }}</p>
|
|
<div>
|
|
<form action="edit">
|
|
<button type="submit">Edit</button>
|
|
</form>
|
|
|
|
<form
|
|
action="destroy"
|
|
method="post"
|
|
@submit="deleteSubmit">
|
|
<button type="submit">Delete</button>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |