Последняя версия с сервера прошлого разработчика

resources/js/Pages/Complaint/Index.vue

@@ -0,0 +1,130 @@
+<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>