131 lines
3.8 KiB
Vue
Executable File
131 lines
3.8 KiB
Vue
Executable File
<template>
|
|
<meta-head title="Пожаловаться на контент"></meta-head>
|
|
|
|
<modal-feed
|
|
:modal-feed="modalFeed"
|
|
:is_exist_menu="false"
|
|
:open="show"
|
|
@close-modal="closeModal"
|
|
/>
|
|
|
|
<div class="mt-16 md:container !max-w-5xl mx-auto px-2 md:px-6 2xl:px-28 buttons-filter-line">
|
|
<form class=" bg-indigo-200 shadow-classic rounded-md p-5" @submit.prevent="submit">
|
|
<div class="mb-4 flex items-center text-gray-light text-lg font-medium">
|
|
<link-back class="default block hover:underline">
|
|
Вернуться
|
|
</link-back>
|
|
<span class="px-3">/</span>
|
|
<h1 class="text-gray">
|
|
Пожаловаться на контент
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="mt-8 grid grid-cols-2">
|
|
<div class="space-y-4">
|
|
<div v-for="reason in reasons" :key="reason.id"
|
|
class="flex"
|
|
>
|
|
<input :id="`reason_${reason.id}`" v-model="form.reason"
|
|
:value="reason.id" name="reason"
|
|
type="radio" class="h-5 w-5 text-orange border-gray-light focus:ring-transparent focus:ring-offset-transparent"
|
|
>
|
|
<label :for="`reason_${reason.id}`" class="select-none ml-3 text-gray leading-none">{{ reason.name }}</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<feed-preview class="ml-auto w-20 h-20 lg:w-48 lg:h-48 object-cover cursor-pointer"
|
|
:type="feed.type"
|
|
:source="feed.entity.preview"
|
|
@click="openModal(feed)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-12 flex flex-wrap -my-1 -mx-3">
|
|
<progress
|
|
v-if="form.progress"
|
|
class="mx-3 my-1 w-full"
|
|
:value="form.progress.percentage"
|
|
max="100"
|
|
>
|
|
{{ form.progress.percentage }}%
|
|
</progress>
|
|
|
|
<loading-button :loading="form.processing" class="mx-3 my-1 transition shadow-none hover:shadow-classic2 inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-orange focus:outline-none"
|
|
type="submit"
|
|
>
|
|
Отправить
|
|
</loading-button>
|
|
|
|
<link-back class="mx-3 my-1 transition shadow-none hover:shadow-classic inline-flex items-center px-8 py-3 justify-center text-base rounded-md text-white bg-indigo-300 focus:outline-none">
|
|
Отменить
|
|
</link-back>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useForm, usePage } from '@inertiajs/inertia-vue3'
|
|
import { toRefs } from 'vue'
|
|
import Layout from '@/Shared/Layout.vue'
|
|
import MetaHead from '@/Shared/MetaHead.vue'
|
|
import LinkBack from '@/Shared/Misc/LinkBack.vue'
|
|
import LoadingButton from '@/Shared/Form/LoadingButton.vue'
|
|
import ModalFeed from '@/Shared/Overlay/ModalFeed.vue'
|
|
import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
|
|
|
|
export default {
|
|
components: {
|
|
MetaHead,
|
|
LoadingButton,
|
|
ModalFeed,
|
|
FeedPreview,
|
|
LinkBack,
|
|
},
|
|
layout: Layout,
|
|
props: {
|
|
feed: Object,
|
|
user: Object,
|
|
reasons: Array,
|
|
},
|
|
setup(props) {
|
|
const { feed } = toRefs(props)
|
|
const form = useForm({
|
|
reason: null,
|
|
feed: feed.value.id,
|
|
})
|
|
const submit = () => {
|
|
form.post(route('complaint.store'))
|
|
form.reason = null
|
|
}
|
|
|
|
return {
|
|
form,
|
|
submit,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
modalFeed: {},
|
|
}
|
|
},
|
|
computed: {
|
|
authUser() {
|
|
return usePage().props.value.auth.user
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
openModal(feed) {
|
|
this.show = true
|
|
this.modalFeed = feed
|
|
},
|
|
closeModal() {
|
|
this.show = false
|
|
},
|
|
},
|
|
}
|
|
</script>
|