Готовим фронт к бронированию
This commit is contained in:
parent
3b440c7032
commit
ec51a9ed12
|
|
@ -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>, </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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="wish in wishes">
|
||||
<td><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></td>
|
||||
<td>{{ wish['price'] }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
<!-- Для мобилок -->
|
||||
<div v-if="!fetching && !isWide" class="w-100">
|
||||
<div v-for="wish in wishes">
|
||||
<div class="d-flex align-center">
|
||||
<v-label class="mr-3 text-h6" style="text-wrap: auto;"><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></v-label>
|
||||
</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">Забронировано:
|
||||
<span v-if="wish['book_user'] === null" class="smth" @click="bookDialog(wish['id'], wish['name'])">Нет</span>
|
||||
<span v-else> Да</span>
|
||||
</v-label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO Сделать чек логина -->
|
||||
<v-dialog v-model="bookConfirmationDialog">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
<tr v-for="wish in wishesList">
|
||||
<td><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></td>
|
||||
<td>{{ wish['price'] }}</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!-- Для мобилок -->
|
||||
<div v-if="!fetching && !isWide">
|
||||
<div v-for="wish in wishesList">
|
||||
<div class="d-flex align-center">
|
||||
<v-label class="mr-3 text-h6" style="text-wrap: auto;"><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></v-label>
|
||||
<v-icon @click="editWish(wish['id'])" class="cursor-pointer mr-3" color="white" icon="mdi-pencil"></v-icon>
|
||||
<v-icon @click="deleteWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-trash-can"></v-icon>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 mt-3">
|
||||
<v-btn class="w-100" @click="dialogCreate = true" elevation="0" block><v-icon class="cursor-pointer" icon="mdi-plus-thick"></v-icon></v-btn>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue