this repo has no description
at master 1.3 kB view raw
1<script setup lang="ts"> 2import { Button } from "@/components/ui/button"; 3import { useLocation } from "@/hooks/useLocation"; 4import { useMutation, useQueryClient } from "@tanstack/vue-query"; 5import axios from "axios"; 6import { toast } from "vue-sonner"; 7 8const queryClient = useQueryClient(); 9 10const { latitude, longitude } = useLocation(); 11 12const check = useMutation({ 13 mutationFn: async () => { 14 const response = await axios.post("/api/v1/attendances/check", { 15 latitude: latitude.value, 16 longitude: longitude.value, 17 }); 18 19 if (response.status !== 200) throw new Error(response.data.message); 20 21 return response.data.message; 22 }, 23 onSuccess(message) { 24 queryClient.invalidateQueries({ 25 queryKey: ["active", "attendances"], 26 }); 27 // active.refetch(); 28 // attendances.refetch(); 29 30 toast.success(message); 31 }, 32 onError(error: any) { 33 toast.error(error.response.data.message); 34 }, 35}); 36 37defineProps<{ 38 isActiveCheckIn: boolean; 39}>(); 40</script> 41 42<template> 43 <Button 44 size="lg" 45 class="rounded-xl" 46 :variant="isActiveCheckIn ? 'outline' : 'default'" 47 @click=" 48 () => { 49 check.mutate(); 50 } 51 " 52 > 53 {{ isActiveCheckIn ? "Stämpla ut" : "Stämpla in" }} 54 </Button> 55</template>