L-Ami-Fiduciaire/resources/js/components/declarations/NudgePopover.vue

<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Send } from 'lucide-vue-next';
import { ref } from 'vue';
import { Button } from '@/components/ui/button';
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from '@/components/ui/popover';

type Props = {
    assigneeName: string | null;
    nudgeUrl: string;
};

const props = defineProps<Props>();

const open = ref(false);
const form = useForm({});

function sendNudge() {
    form.post(props.nudgeUrl, {
        preserveScroll: true,
        onSuccess: () => {
            open.value = false;
        },
    });
}
</script>

<template>
    <Popover v-model:open="open">
        <PopoverTrigger as-child>
            <Button
                variant="ghost"
                size="icon"
                class="h-8 w-8"
                @click.stop
            >
                <Send class="h-4 w-4" />
            </Button>
        </PopoverTrigger>
        <PopoverContent
            class="w-64"
            align="end"
            @click.stop
        >
            <div class="space-y-3">
                <p class="text-sm">
                    Envoyer une notification à
                    <span class="font-medium">{{
                        assigneeName ?? 'Non assigné'
                    }}</span>
                </p>
                <Button
                    class="w-full"
                    size="sm"
                    :disabled="form.processing || !assigneeName"
                    @click="sendNudge"
                >
                    <Send class="mr-2 h-4 w-4" />
                    Envoyer une notification
                </Button>
            </div>
        </PopoverContent>
    </Popover>
</template>