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

2025-01-13 15:48:48 +08:00 · 2025-01-13 15:48:48 +08:00 · 990ff22376
parent 73f77d58f8
commit 990ff22376
6 changed files with 72 additions and 49 deletions
--- a/app/Http/Controllers/WishesController.php
+++ b/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);
+    }
 }
--- a/resources/store/wish.js
+++ b/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;
        }
    },
 })
--- a/resources/views/Public.vue
+++ b/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">
-                    <div>
+                <v-card-title class="d-flex justify-space-between" :class="isWide ? '' : 'text-subtitle-1'">
+                    <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>
-                    <v-dialog v-model="showAuthDialog" class="w-66">
+                    </div>
+                    <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>
--- a/resources/views/PublicWishlist/ShowWhishlist.vue
+++ b/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;
-                    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.updateFrontWishes();
                }
                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>
--- a/resources/views/Wishlist/Wishlist.vue
+++ b/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>

--- a/routes/api.php
+++ b/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']);
    });
 });