this repo has no description
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>