yale-user-access/packages/frontend/components/PeopleListRow.vue

<script setup lang='ts'>
import { type Person } from '~/types/yale';
import { type PropType } from 'vue';

const props = defineProps({
    person: {
        type: Object as PropType<Person>,
        required: true
    }
});

const emit = defineEmits<{
    (e: "delete-person", id: number): void
}>();

// Handle the clear code button click
const handleDeletePersonClick = () => {
    // Emit the event to the parent component
    emit("delete-person", props.person.id);
}
</script>

<template>
    <tr scope="row">
        <td>{{ person.id }}</td>
        <td>{{ person.name }}</td>
        <td>{{ person.phoneNumber }}</td>
        <td class="flex">
            <YaleButton type="button" @click="handleDeletePersonClick">
                <IconTrash />
            </YaleButton>
        </td>
    </tr>
</template>