forked from BRETT/BRETT
53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { toast } from 'vue-sonner'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
|
|
|
|
const props = defineProps<{ uploadId: string, enabled: boolean }>()
|
|
const emit = defineEmits<{ change: [uploadId: string, enabled: boolean] }>()
|
|
const busy = shallowRef(false)
|
|
const { t } = useI18n()
|
|
const label = computed(() => props.enabled
|
|
? t('thread.subscribeOff')
|
|
: t('thread.subscribeOn'))
|
|
|
|
async function toggle() {
|
|
if (busy.value) return
|
|
busy.value = true
|
|
const uploadId = props.uploadId
|
|
try {
|
|
const result = await $fetch<{ enabled: boolean }>(`/api/uploads/${uploadId}/subscription`, {
|
|
method: 'PUT',
|
|
body: { enabled: !props.enabled },
|
|
})
|
|
emit('change', uploadId, result.enabled)
|
|
toast.success(result.enabled ? t('thread.subOn') : t('thread.subOff'))
|
|
}
|
|
catch {
|
|
toast.error(t('thread.subFailed'))
|
|
}
|
|
finally {
|
|
busy.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Tooltip>
|
|
<TooltipTrigger as-child>
|
|
<Button
|
|
type="button"
|
|
:variant="enabled ? 'secondary' : 'ghost'"
|
|
size="icon"
|
|
:disabled="busy"
|
|
:aria-label="label"
|
|
:aria-pressed="enabled"
|
|
@click="toggle"
|
|
>
|
|
<Icon :name="enabled ? 'ph:bell-fill' : 'ph:bell-slash-fill'" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{{ label }}</TooltipContent>
|
|
</Tooltip>
|
|
</template>
|