Запилил отзывы

resources/css/app.css

@@ -27,4 +27,10 @@ a:visited {
 
 a:active {
     color: crimson;
-}
+}
+
+.feedback {
+    position: absolute;
+    right:    0;
+    bottom:   0;
+}

resources/store/feedback.js

@@ -0,0 +1,21 @@
+import {defineStore} from 'pinia'
+import axios from "axios";
+
+export const useFeedbackStore = defineStore('feedback', {
+    state: () => ({
+    }),
+    actions: {
+        async create(user_id, text){
+            let result = null;
+            await axios.post(`/api/feedback/create`,
+                {
+                    user_id: user_id,
+                    text: text
+                }
+            ).then((response)=>{
+                result = response;
+            });
+            return result;
+        }
+    },
+})

resources/views/Public.vue

@@ -47,6 +47,7 @@
                     <ShowWhishlist/>
                 </v-card-text>
             </v-card>
+            <FeedbackFooter/>
         </v-card-text>
     </v-card>
 </template>
@@ -57,9 +58,10 @@ import {useUserStore} from "../store/user.js";
 import { watch } from "vue";
 import Login from "./Auth/Login.vue";
 import Registration from "./Auth/Registration.vue";
+import FeedbackFooter from "./PublicWishlist/FeedbackFooter.vue";
 export default {
     name: "Public",
-    components: {Registration, Login, ShowWhishlist},
+    components: {FeedbackFooter, Registration, Login, ShowWhishlist},
     data: ()=>({
         isAuthenticated: false,
         isWide: window.innerWidth >= 800,

resources/views/PublicWishlist/FeedbackFooter.vue

@@ -0,0 +1,58 @@
+<script>
+import {useUserStore} from "../../store/user.js";
+import {watch} from "vue";
+import {useFeedbackStore} from "../../store/feedback.js";
+
+export default {
+    name: "FeedbackFooter",
+    data: () => ({
+        isAuthenticated: false,
+        userStore: useUserStore(),
+        feedbackStore: useFeedbackStore(),
+        isWide: window.innerWidth >= 800,
+        showFeedbackDialog: false,
+        loadingFeedback: false,
+        feedbackText: ''
+    }),
+    methods: {
+        sendFeedback(){
+            this.loadingFeedback = true;
+            let user_id = this.isAuthenticated ? this.userStore.user['id'] : null;
+            this.feedbackStore.create(user_id, this.feedbackText).then(()=>{
+                this.loadingFeedback = false;
+                this.showFeedbackDialog = false;
+                this.feedbackText = '';
+            });
+        }
+    },
+    mounted() {
+        watch(this.userStore, (newStore, oldStore)=>{
+            this.isAuthenticated = newStore.user !== null && newStore.user !== undefined;
+        });
+    }
+}
+</script>
+
+<template>
+    <div @click="showFeedbackDialog = true" class="d-flex card-bg feedback ma-2 pa-2 cursor-pointer link-no-decor">
+        <div v-if="isWide" class="mr-2">Оставить отзыв</div>
+        <v-icon icon="mdi-message-outline"></v-icon>
+    </div>
+    <v-dialog v-model="showFeedbackDialog" :class="isWide ? 'w-66' : 'w-100'">
+        <v-card class="w-100 card-bg">
+            <v-card-title class="d-flex justify-space-between">
+                <span>Оставить отзыв</span>
+                <v-icon @click="showFeedbackDialog = false" class="cursor-pointer" color="white" icon="mdi-close-thick"></v-icon>
+            </v-card-title>
+            <v-card-text class="d-flex flex-column w-100">
+                <v-textarea v-model="feedbackText"></v-textarea>
+                <div class="w-100 d-flex justify-center align-center">
+                    <v-btn @click="sendFeedback" :loading="loadingFeedback">Отправить</v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
+</template>
+
+<style scoped>
+</style>

resources/views/Welcome.vue

@@ -21,6 +21,7 @@
                     <router-view v-else/>
                 </v-card-text>
             </v-card>
+            <FeedbackFooter/>
         </v-card-text>
     </v-card>
 </template>
@@ -28,8 +29,10 @@
 <script>
 import {useUserStore} from "../store/user.js";
 import {watch} from "vue";
+import FeedbackFooter from "./PublicWishlist/FeedbackFooter.vue";
 export default {
     name: "Welcome",
+    components: {FeedbackFooter},
     data: () => ({
         isAuthenticated: false,
         userStore: useUserStore(),

routes/api.php

@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\FeedbackController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\AuthController;
@@ -42,3 +43,7 @@
         Route::post('unbook', [WishesController::class, 'unbook']);
     });
 });
+
+Route::group(['prefix' => 'feedback'], function () {
+    Route::post('create', [FeedbackController::class, 'create']);
+});