Готовим фронт к бронированию

resources/views/Public.vue

@@ -5,7 +5,9 @@
                 <v-card-title class="d-flex justify-space-between">
                     <div>
                         <span>Добро пожаловать в </span>
-                        <span><a href="/" class="link-no-decor">Wishlist</a></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>
                 </v-card-title>
                 <v-card-text class="d-flex justify-center align-center h-auto">
@@ -18,12 +20,17 @@
 
 <script>
 import ShowWhishlist from "./PublicWishlist/ShowWhishlist.vue";
+import {useUserStore} from "../store/user.js";
 export default {
     name: "Public",
     components: {ShowWhishlist},
     data: ()=>({
-        isWide: window.innerWidth >= 800
+        isWide: window.innerWidth >= 800,
-    })
+        userStore: useUserStore()
+    }),
+    mounted() {
+        useUserStore().checkUser();
+    }
 }
 </script>
 

resources/views/PublicWishlist/ShowWhishlist.vue

@@ -1,16 +1,33 @@
 <script>
 import { useWishStore } from "../../store/wish.js";
 import { useUserStore } from "../../store/user.js";
+import DeleteWish from "../Wishlist/DeleteWish.vue";
+import CreateWish from "../Wishlist/CreateWish.vue";
+import EditWish from "../Wishlist/EditWish.vue";
 export default {
     name: "ShowWhishlist",
+    components: {EditWish, CreateWish, DeleteWish},
     data: () => ({
         wishes: [],
         wishStore: useWishStore(),
         userStore: useUserStore(),
-        isWide: window.innerWidth >= 800,
+        isWide: window.innerWidth >= 1061,
         fetching: false,
-        username: ''
+        username: '',
+        bookConfirmationDialog: false,
+        bookItemId: '',
+        bookItemName: ''
     }),
+    methods: {
+        bookDialog(id, name){
+            this.bookItemId = id;
+            this.bookItemName = name;
+            this.bookConfirmationDialog = true;
+        },
+        closeBookDialog(){
+            this.bookConfirmationDialog = false;
+        }
+    },
     mounted() {
         let urlArray = window.location.href.split('/');
         let user_id = urlArray[urlArray.length - 1];
@@ -32,12 +49,13 @@ export default {
     <v-table v-if="!fetching && isWide" class="card-bg w-100 h-auto mt-5 pa-3">
         <thead>
             <tr>
-                <th colspan="3" class="text-center text-h5">Список пользователя {{ this.username }}</th>
+                <th colspan="4" class="text-center text-h5">Список пользователя {{ this.username }}</th>
             </tr>
             <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>
             </tr>
         </thead>
         <tbody>
@@ -45,28 +63,78 @@ export default {
                 <td>{{ wish['name'] }}</td>
                 <td>{{ wish['price'] }}</td>
                 <td><a target="_blank" :href="wish['url']">{{ wish['url'] }}</a></td>
+                <td>
+                    <v-btn v-if="wish['book_user'] === null" @click="bookDialog(wish['id'], wish['name'])">Забронировать</v-btn>
+                    <span v-else><v-icon color="green" icon="mdi-check-bold"></v-icon></span>
+                </td>
             </tr>
         </tbody>
+        <!-- TODO Сделать чек логина -->
+        <v-dialog v-model="bookConfirmationDialog" class="w-33">
+            <v-card class="card-bg">
+                <v-card-text>
+                    <v-label style="text-wrap: auto;">Хотите забронировать {{ bookItemName }}?</v-label>
+                    <div class="d-flex justify-center">
+                        <v-btn class="mt-2 ml-2 mr-2">Да</v-btn>
+                        <v-btn @click="closeBookDialog" class="mt-2 ml-2 mr-2">Нет</v-btn>
+                    </div>
+                </v-card-text>
+            </v-card>
+        </v-dialog>
     </v-table>
-    <v-table v-if="!fetching && !isWide" class="card-bg w-100 h-auto mt-5 pa-3">
+    <!-- Для мобилок -->
-        <thead>
+    <div v-if="!fetching && !isWide" class="w-100">
-            <tr>
+        <div v-for="wish in wishes">
-                <th colspan="3" class="text-center text-subtitle-1">Список пользователя {{ this.username }}</th>
+            <div class="d-flex align-center">
-            </tr>
+                <v-label class="mr-3 text-h6" style="text-wrap: auto;"><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></v-label>
-            <tr>
+            </div>
-                <th class="text-body-1">Наименование</th>
+            <div class="d-flex flex-column">
-                <th class="text-body-1">Цена</th>
+                <v-label class="mr-3 ml-5 text-body-1">Цена: {{ wish['price'] }}₽</v-label>
-            </tr>
+                <v-label class="mr-3 ml-5 text-body-1">Забронировано:&nbsp;
-        </thead>
+                    <span v-if="wish['book_user'] === null" class="smth" @click="bookDialog(wish['id'], wish['name'])">Нет</span>
-        <tbody>
+                    <span v-else> Да</span>
-            <tr v-for="wish in wishes">
+                </v-label>
-                <td><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></td>
+            </div>
-                <td>{{ wish['price'] }}</td>
+        </div>
-            </tr>
+        <!-- TODO Сделать чек логина -->
-        </tbody>
+        <v-dialog v-model="bookConfirmationDialog">
-    </v-table>
+            <v-card class="card-bg">
+                <v-card-text>
+                    <v-label style="text-wrap: auto;">Хотите забронировать {{ bookItemName }}?</v-label>
+                    <div class="d-flex justify-center">
+                        <v-btn class="mt-2 ml-2 mr-2">Да</v-btn>
+                        <v-btn @click="closeBookDialog" class="mt-2 ml-2 mr-2">Нет</v-btn>
+                    </div>
+                </v-card-text>
+            </v-card>
+        </v-dialog>
+    </div>
+<!--    <v-table v-if="!fetching && !isWide" class="card-bg w-100 h-auto mt-5 pa-3">-->
+<!--        <thead>-->
+<!--            <tr>-->
+<!--                <th colspan="3" class="text-center text-subtitle-1">Список пользователя {{ this.username }}</th>-->
+<!--            </tr>-->
+<!--            <tr>-->
+<!--                <th class="text-body-1">Наименование</th>-->
+<!--                <th class="text-body-1">Цена</th>-->
+<!--                <th class="text-body-1">Бронь</th>-->
+<!--            </tr>-->
+<!--        </thead>-->
+<!--        <tbody>-->
+<!--            <tr v-for="wish in wishes">-->
+<!--                <td><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></td>-->
+<!--                <td>{{ wish['price'] }}</td>-->
+<!--                <td>-->
+<!--                    <v-icon v-if="wish['book_user'] === null" class="cursor-pointer" color="white" icon="mdi-lock"></v-icon>-->
+<!--                    <span v-else><v-icon color="green" icon="mdi-check-bold"></v-icon></span>-->
+<!--                </td>-->
+<!--            </tr>-->
+<!--        </tbody>-->
+<!--    </v-table>-->
 </template>
 
 <style scoped>
-
+.smth {
+    color: darkorange;
+}
 </style>

resources/views/Wishlist/Wishlist.vue

@@ -11,7 +11,7 @@ export default {
     data: () => ({
         userStore: useUserStore(),
         wishStore: useWishStore(),
-        isWide: window.innerWidth >= 800,
+        isWide: window.innerWidth >= 1061,
         wishesList: [],
         fetching: true,
         dialogCreate: ref(false),
@@ -66,7 +66,7 @@ export default {
 </script>
 
 <template>
-    <div class="d-flex flex-column">
+    <div class="d-flex flex-column w-100">
         <v-skeleton-loader color="grey-darken-4" type="table" v-if="fetching"></v-skeleton-loader>
         <div v-if="!fetching" class="d-flex justify-center align-center w-100 pt-5">
             <v-text-field
@@ -79,12 +79,14 @@ export default {
             </v-text-field>
             <v-snackbar v-model="snackbar">Текст скопирован!</v-snackbar>
         </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>
                     <th class="text-subtitle-1"></th>
                 </tr>
@@ -94,11 +96,12 @@ 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><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="5"><v-btn @click="dialogCreate = true" color="#212022" elevation="0" block><v-icon class="cursor-pointer" icon="mdi-plus-thick"></v-icon></v-btn></td>
+                    <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="w-66">
@@ -111,26 +114,22 @@ export default {
                 <DeleteWish :dialogDelete="dialogDeleteClose" :updateFrontWishes="updateFrontWishes" :wish_id="wishToDelete"/>
             </v-dialog>
         </v-table>
-        <v-table v-if="!fetching && !isWide" class="card-bg w-100 h-auto mt-5 pa-3">
+        <!-- Для мобилок -->
-            <thead>
+        <div v-if="!fetching && !isWide">
-                <tr>
+            <div v-for="wish in wishesList">
-                    <th class="text-subtitle-1">Наименование</th>
+                <div class="d-flex align-center">
-                    <th class="text-subtitle-1">Цена</th>
+                    <v-label class="mr-3 text-h6" style="text-wrap: auto;"><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></v-label>
-                    <th class="text-subtitle-1"></th>
+                    <v-icon @click="editWish(wish['id'])" class="cursor-pointer mr-3" color="white" icon="mdi-pencil"></v-icon>
-                    <th class="text-subtitle-1"></th>
+                    <v-icon @click="deleteWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-trash-can"></v-icon>
-                </tr>
+                </div>
-            </thead>
+                <div class="d-flex flex-column">
-            <tbody>
+                    <v-label class="mr-3 ml-5 text-body-1">Цена: {{ wish['price'] }}₽</v-label>
-                <tr v-for="wish in wishesList">
+                    <v-label class="mr-3 ml-5 text-body-1">Забронировано: {{ wish['book_user'] === null ? 'Нет' : wish['book_user']['name'] }}</v-label>
-                    <td><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></td>
+                </div>
-                    <td>{{ wish['price'] }}</td>
+            </div>
-                    <td><v-icon @click="editWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-pencil"></v-icon></td>
+            <div class="w-100 mt-3">
-                    <td><v-icon @click="deleteWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-trash-can"></v-icon></td>
+                <v-btn class="w-100" @click="dialogCreate = true" elevation="0" block><v-icon class="cursor-pointer" icon="mdi-plus-thick"></v-icon></v-btn>
-                </tr>
+            </div>
-                <tr class="text-center">
-                    <td colspan="5"><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>
@@ -140,7 +139,39 @@ export default {
             <v-dialog v-model="dialogDelete" :class="isWide ? 'w-66' : 'w-100'">
                 <DeleteWish :dialogDelete="dialogDeleteClose" :updateFrontWishes="updateFrontWishes" :wish_id="wishToDelete"/>
             </v-dialog>
-        </v-table>
+        </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>