105 lines
2.6 KiB
Vue
105 lines
2.6 KiB
Vue
<template>
|
||
<AppModal :open="open" title="Пожаловаться" size="sm" @close="emit('close')">
|
||
<form class="report-form" @submit.prevent="submit">
|
||
<p class="report-form__label label">
|
||
Опишите причину жалобы (необязательно)
|
||
</p>
|
||
<textarea
|
||
v-model="form.description"
|
||
class="report-form__textarea"
|
||
placeholder="Опишите нарушение..."
|
||
rows="4"
|
||
/>
|
||
</form>
|
||
<template #footer>
|
||
<AppButton variant="ghost" @click="emit('close')">
|
||
Отмена
|
||
</AppButton>
|
||
<AppButton variant="danger" :loading="loading" @click="submit">
|
||
Отправить жалобу
|
||
</AppButton>
|
||
</template>
|
||
</AppModal>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { reactive, ref } from 'vue'
|
||
import { apiClient } from '@/api/client'
|
||
import AppButton from '@/components/common/AppButton.vue'
|
||
import AppModal from '@/components/common/AppModal.vue'
|
||
import { useAuth } from '@/composables/useAuth'
|
||
import { useUi } from '@/composables/useUi'
|
||
|
||
const props = defineProps<{
|
||
open: boolean
|
||
entityId: string
|
||
entityType: 'profile' | 'message'
|
||
}>()
|
||
|
||
const emit = defineEmits<{ close: [] }>()
|
||
|
||
const authStore = useAuth()
|
||
const uiStore = useUi()
|
||
|
||
const form = reactive({ description: '' })
|
||
const loading = ref(false)
|
||
|
||
async function submit() {
|
||
const profileId = authStore.activeProfile?.id
|
||
if (!profileId)
|
||
return
|
||
loading.value = true
|
||
try {
|
||
await apiClient.api.reportsControllerCreate({
|
||
sourceProfileId: profileId,
|
||
entityId: props.entityId,
|
||
entityType: props.entityType,
|
||
description: form.description || undefined,
|
||
})
|
||
uiStore.addToast('Жалоба отправлена', 'success')
|
||
form.description = ''
|
||
emit('close')
|
||
}
|
||
catch {
|
||
uiStore.addToast('Не удалось отправить жалобу', 'error')
|
||
}
|
||
finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.report-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
|
||
&__label {
|
||
color: var(--color-muted);
|
||
}
|
||
|
||
&__textarea {
|
||
width: 100%;
|
||
padding: 10px 14px;
|
||
background: var(--color-surface-2);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: var(--radius-sm);
|
||
color: var(--color-cream);
|
||
font-family: var(--font-mono);
|
||
font-size: 0.875rem;
|
||
resize: vertical;
|
||
min-height: 80px;
|
||
outline: none;
|
||
transition: border-color var(--transition-fast);
|
||
|
||
&::placeholder {
|
||
color: var(--color-muted);
|
||
}
|
||
&:focus {
|
||
border-color: var(--color-border-strong);
|
||
}
|
||
}
|
||
}
|
||
</style>
|