Доделал отмену бронирования, подогнал под мобилки

app/Http/Controllers/WishesController.php

@@ -99,4 +99,15 @@ public function book(Request $request)
         $wish->save();
         return response()->json($wish, 200);
     }
+
+    public function unbook(Request $request)
+    {
+        $request->validate([
+            'id' => 'required|exists:wishes,id'
+        ]);
+        $wish = Wish::find($request->get('id'));
+        $wish->book_user_id = null;
+        $wish->save();
+        return response()->json($wish, 200);
+    }
 }

resources/store/wish.js

@@ -103,6 +103,25 @@ export const useWishStore = defineStore('wish', {
                 result = error;
             });
             return result;
+        },
+        async unbook(id, token){
+            let result = null;
+            await axios.post(`/api/wish/unbook`,
+                {
+                    id: id
+                },
+                {
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                        token: token
+                    },
+                }
+            ).then((response)=>{
+                result = response;
+            }).catch((error)=>{
+                result = error;
+            });
+            return result;
         }
     },
 })

resources/views/Public.vue

@@ -1,19 +1,27 @@
 <template>
-    <v-card class="bg-gradient" style="height: 100%">
+    <v-card class="bg-gradient" style="height: 100%" :class="isWide ? '' : 'd-flex justify-center align-center'">
         <v-card-text class="d-flex justify-center align-center">
             <v-card class="align-center justify-center h-auto card-bg" :class="isWide ? 'w-66' : 'w-100'">
-                <v-card-title class="d-flex justify-space-between">
+                <v-card-title class="d-flex justify-space-between" :class="isWide ? '' : 'text-subtitle-1'">
-                    <div>
+                    <div v-if="isWide">
                         <span>Добро пожаловать в </span>
                         <span><a href="/" class="link-no-decor">Wishlist</a>,&nbsp;</span>
                         <span v-if="userStore.user !== null">{{ userStore.user['name'] }}</span>
                         <span v-else>Гость</span>
                     </div>
+                    <div v-if="!isWide">
+                        <p>Добро пожаловать в </p>
+                        <p><a href="/" class="link-no-decor">Wishlist</a>, {{ isAuthenticated ? userStore.user['name'] : 'Гость' }}!</p>
+                    </div>
                     <span v-if="isAuthenticated" class="link-no-decor align-end" @click="logout">Выйти</span>
                     <div v-else>
-                        <a class="link-no-decor align-end" @click="showAuthDialog = true">Вход/Регистрация</a>
+                        <div v-if="isWide"><a class="link-no-decor align-end" @click="showAuthDialog = true">Вход/Регистрация</a></div>
+                        <div v-else class="d-flex flex-column justify-center align-end" @click="showAuthDialog = true">
+                            <a class="link-no-decor">Вход/</a>
+                            <a class="link-no-decor">Регистрация</a>
+                        </div>
                     </div>
-                    <v-dialog v-model="showAuthDialog" class="w-66">
+                    <v-dialog v-model="showAuthDialog" :class="isWide ? 'w-66' : 'w-100'">
                         <v-card class="card-bg">
                             <v-card-title class="d-flex justify-end">
                                 <v-icon @click="showAuthDialog = false" class="cursor-pointer" color="white" icon="mdi-close-thick"></v-icon>

resources/views/PublicWishlist/ShowWhishlist.vue

@@ -33,6 +33,15 @@ export default {
         closeBookDialog(){
             this.bookConfirmationDialog = false;
         },
+        updateFrontWishes(){
+            this.fetching = true;
+            let urlArray = window.location.href.split('/');
+            let user_id = urlArray[urlArray.length - 1];
+            this.wishStore.getUserWishes(user_id).then((res)=>{
+                this.wishes = res;
+                this.fetching = false;
+            });
+        },
         book(){
             this.bookLoading = true;
             this.wishStore.book(this.bookItemId, this.userStore.user["id"], this.userStore.token).then((response)=>{
@@ -42,18 +51,17 @@ export default {
                     this.bookError = true;
                 } else {
                     this.bookConfirmationDialog = false;
-                    this.fetching = true;
+                    this.updateFrontWishes();
-                    let urlArray = window.location.href.split('/');
-                    let user_id = urlArray[urlArray.length - 1];
-                    this.wishStore.getUserWishes(user_id).then((res)=>{
-                        this.wishes = res;
-                        this.fetching = false;
-                    });
                 }
                 this.bookLoading = false;
             }).catch(()=>{
                 this.bookLoading = false;
             });
+        },
+        unbook(id){
+            this.wishStore.unbook(id, this.userStore.token).then(()=>{
+                this.updateFrontWishes();
+            });
         }
     },
     mounted() {
@@ -101,7 +109,8 @@ export default {
                         <v-btn v-if="isAuthenticated && !isSameUser" @click="bookDialog(wish['id'], wish['name'])">Забронировать</v-btn>
                         <span v-else>Нет</span>
                     </span>
-                    <span v-else><v-icon color="green" icon="mdi-check-bold"></v-icon></span>
+                    <span v-else>Да <v-icon @click="unbook(wish['id'])" v-if="isAuthenticated && userStore.user['id'] == wish['book_user']['id']" class="cursor-pointer" icon="mdi-close-thick" color="red"></v-icon></span>
+<!--                    <span v-else><v-icon color="green" icon="mdi-check-bold"></v-icon></span>-->
                 </td>
             </tr>
         </tbody>
@@ -132,10 +141,10 @@ export default {
                 <v-label class="mr-3 ml-5 text-body-1">Цена: {{ wish['price'] }}₽</v-label>
                 <v-label class="mr-3 ml-5 text-body-1">Забронировано:&nbsp;
                     <span v-if="wish['book_user'] === null">
-                        <v-btn v-if="isAuthenticated && !isSameUser" @click="bookDialog(wish['id'], wish['name'])">Забронировать</v-btn>
+                        <v-btn v-if="isAuthenticated && !isSameUser" @click="bookDialog(wish['id'], wish['name'])" :size="isWide ? '' : 'small'">Забронировать</v-btn>
                         <span v-else>Нет</span>
                     </span>
-                    <span v-else> Да</span>
+                    <span v-else> Да <v-icon @click="unbook(wish['id'])" v-if="isAuthenticated && userStore.user['id'] == wish['book_user']['id']" class="cursor-pointer" icon="mdi-close-thick" color="red"></v-icon></span>
                 </v-label>
             </div>
         </div>

resources/views/Wishlist/Wishlist.vue

@@ -60,6 +60,11 @@ export default {
         copyLink(){
             navigator.clipboard.writeText(this.wishlistLink);
             this.snackbar = true;
+        },
+        unbook(id){
+            this.wishStore.unbook(id, this.userStore.token).then(()=>{
+                this.updateFrontWishes();
+            });
         }
     }
 }
@@ -96,7 +101,7 @@ export default {
                     <td>{{ wish['name'] }}</td>
                     <td>{{ wish['price'] }}</td>
                     <td><a target="_blank" :href="wish['url']">{{ wish['url'] }}</a></td>
-                    <td>{{ wish['book_user'] === null ? 'Нет' : wish['book_user']['name'] }}</td>
+                    <td>{{ wish['book_user'] === null ? 'Нет' : wish['book_user']['name'] }}<v-icon v-if="wish['book_user'] !== null" @click="unbook(wish['id'])" class="cursor-pointer" icon="mdi-close-thick" color="red"></v-icon></td>
                     <td><v-icon @click="editWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-pencil"></v-icon></td>
                     <td><v-icon @click="deleteWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-trash-can"></v-icon></td>
                 </tr>
@@ -124,7 +129,9 @@ export default {
                 </div>
                 <div class="d-flex flex-column">
                     <v-label class="mr-3 ml-5 text-body-1">Цена: {{ wish['price'] }}₽</v-label>
-                    <v-label class="mr-3 ml-5 text-body-1">Забронировано: {{ wish['book_user'] === null ? 'Нет' : wish['book_user']['name'] }}</v-label>
+                    <v-label class="mr-3 ml-5 text-body-1">Забронировано: {{ wish['book_user'] === null ? 'Нет' : wish['book_user']['name'] }}
+                        <v-icon v-if="wish['book_user'] !== null" @click="unbook(wish['id'])" class="cursor-pointer" icon="mdi-close-thick" color="red"></v-icon>
+                    </v-label>
                 </div>
             </div>
             <div class="w-100 mt-3">
@@ -140,38 +147,6 @@ export default {
                 <DeleteWish :dialogDelete="dialogDeleteClose" :updateFrontWishes="updateFrontWishes" :wish_id="wishToDelete"/>
             </v-dialog>
         </div>
-<!--        <v-table v-if="!fetching && !isWide" class="card-bg w-100 h-auto mt-5 pa-3">-->
-<!--            <thead>-->
-<!--                <tr>-->
-<!--                    <th class="text-subtitle-1">Наименование</th>-->
-<!--                    <th class="text-subtitle-1">Цена</th>-->
-<!--                    <th class="text-subtitle-1">Забронировано</th>-->
-<!--                    <th class="text-subtitle-1"></th>-->
-<!--                    <th class="text-subtitle-1"></th>-->
-<!--                </tr>-->
-<!--            </thead>-->
-<!--            <tbody>-->
-<!--                <tr v-for="wish in wishesList">-->
-<!--                    <td><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></td>-->
-<!--                    <td>{{ wish['price'] }}</td>-->
-<!--                    <td>{{ wish['book_user'] === null ? 'Нет' : wish['book_user']['name'] }}</td>-->
-<!--                    <td><v-icon @click="editWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-pencil"></v-icon></td>-->
-<!--                    <td><v-icon @click="deleteWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-trash-can"></v-icon></td>-->
-<!--                </tr>-->
-<!--                <tr class="text-center">-->
-<!--                    <td colspan="6"><v-btn @click="dialogCreate = true" color="#212022" elevation="0" block><v-icon class="cursor-pointer" icon="mdi-plus-thick"></v-icon></v-btn></td>-->
-<!--                </tr>-->
-<!--            </tbody>-->
-<!--            <v-dialog v-model="dialogCreate" :class="isWide ? 'w-66' : 'w-100'">-->
-<!--                <CreateWish :dialogCreate="dialogCreateClose" :updateFrontWishes="updateFrontWishes"/>-->
-<!--            </v-dialog>-->
-<!--            <v-dialog v-model="dialogEdit" :class="isWide ? 'w-66' : 'w-100'">-->
-<!--                <EditWish :dialogEdit="dialogEditClose" :updateFrontWishes="updateFrontWishes" :wish_id="wishToEditId"/>-->
-<!--            </v-dialog>-->
-<!--            <v-dialog v-model="dialogDelete" :class="isWide ? 'w-66' : 'w-100'">-->
-<!--                <DeleteWish :dialogDelete="dialogDeleteClose" :updateFrontWishes="updateFrontWishes" :wish_id="wishToDelete"/>-->
-<!--            </v-dialog>-->
-<!--        </v-table>-->
     </div>
 </template>
 

routes/api.php

@@ -39,5 +39,6 @@
         Route::post('destroy', [WishesController::class, 'destroy']);
         Route::get('by_id/{id}', [WishesController::class, 'getWishById']);
         Route::post('book', [WishesController::class, 'book']);
+        Route::post('unbook', [WishesController::class, 'unbook']);
     });
 });