Mamalizz
75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import useDeleteAttachment from "~/composables/api/tickets/useDeleteAttachment";
|
|
|
|
// types
|
|
|
|
type Props = {
|
|
id: number;
|
|
size: number;
|
|
name: string;
|
|
};
|
|
|
|
type Emits = {
|
|
delete: [value: number];
|
|
};
|
|
|
|
// props
|
|
|
|
defineProps<Props>();
|
|
|
|
// Emits
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
// queries
|
|
|
|
const { mutateAsync: deleteAttachment, isPending: deleteAttachmentPending } =
|
|
useDeleteAttachment();
|
|
|
|
const handleDeleteAttachment = (id: number) => {
|
|
deleteAttachment(
|
|
{ id },
|
|
{
|
|
onSuccess: () => {
|
|
emit("delete", id);
|
|
},
|
|
}
|
|
);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<li class="w-full flex items-center">
|
|
<div class="w-2/12 flex justify-start">
|
|
<p class="text-sm text-black">{{ (size / 1024).toFixed(2) }}KB</p>
|
|
</div>
|
|
<div class="flex justify-end w-9/12">
|
|
<p class="text-sm text-black">
|
|
{{ name }}
|
|
</p>
|
|
</div>
|
|
<div class="w-1/12 ps-1">
|
|
<button class="cursor-pointer" @click="handleDeleteAttachment(id)">
|
|
<Icon
|
|
:name="
|
|
deleteAttachmentPending
|
|
? 'svg-spinners:ring-resize'
|
|
: 'ci:close'
|
|
"
|
|
:class="
|
|
deleteAttachmentPending
|
|
? 'text-black/50'
|
|
: '**:stroke-red-500'
|
|
"
|
|
class="pt-1"
|
|
size="28"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
|
|
<style scoped></style>
|