53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import BaseSwitch from '@/components/ui/BaseSwitch.vue'
|
|
import { mockPersistToggle, useAsyncToggle } from '@/composables/useAsyncToggle'
|
|
import { confirm } from '@/composables/useConfirm'
|
|
|
|
const props = defineProps<{
|
|
id: string
|
|
modelValue: boolean
|
|
entityName: string
|
|
entityType?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [boolean]
|
|
}>()
|
|
|
|
const { toggle, isLoading, hasError } = useAsyncToggle({
|
|
onPersist: async () => {
|
|
await mockPersistToggle()
|
|
},
|
|
successMessage: (value) =>
|
|
value
|
|
? `${props.entityType ?? 'مورد'} «${props.entityName}» فعال شد.`
|
|
: `${props.entityType ?? 'مورد'} «${props.entityName}» غیرفعال شد.`,
|
|
})
|
|
|
|
async function onChange(next: boolean) {
|
|
if (next === props.modelValue) return
|
|
|
|
if (!next) {
|
|
const ok = await confirm({
|
|
title: `غیرفعالسازی ${props.entityType ?? 'مورد'}`,
|
|
message: `آیا از غیرفعال کردن «${props.entityName}» مطمئن هستید؟`,
|
|
tone: 'danger',
|
|
confirmLabel: 'غیرفعال کردن',
|
|
})
|
|
if (!ok) return
|
|
}
|
|
|
|
const result = await toggle(props.id, props.modelValue)
|
|
emit('update:modelValue', result)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<BaseSwitch
|
|
:model-value="modelValue"
|
|
:loading="isLoading(id)"
|
|
:error="hasError(id)"
|
|
@update:model-value="onChange"
|
|
/>
|
|
</template>
|