Намутил немного CRUD'a: вывод списка, удаление записи и создание новой записи
This commit is contained in:
parent
75bfe72bc7
commit
aa485fa2b1
|
|
@ -1,9 +1,18 @@
|
|||
.link-no-decor {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: white!important;
|
||||
text-decoration: none!important;
|
||||
cursor: pointer!important;
|
||||
}
|
||||
|
||||
.link-no-decor:hover {
|
||||
color: #093160;
|
||||
color: #093160!important;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer!important;
|
||||
}
|
||||
|
||||
.card-bg {
|
||||
background-color: #212022!important;
|
||||
color: white!important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,15 +9,15 @@ export const useWishStore = defineStore('wish', {
|
|||
pushWish(wish){
|
||||
this.wishesList.push(wish);
|
||||
},
|
||||
async getUserWishes(user_id, token){
|
||||
async getUserWishes(user_id){
|
||||
let result = null;
|
||||
await axios.get(`/api/wish/user_wishes/${user_id.toString()}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
token: token
|
||||
}
|
||||
}
|
||||
// {
|
||||
// headers: {
|
||||
// Authorization: `Bearer ${token}`,
|
||||
// token: token
|
||||
// }
|
||||
// }
|
||||
).then((response)=>{
|
||||
result = response.data;
|
||||
});
|
||||
|
|
@ -42,6 +42,21 @@ export const useWishStore = defineStore('wish', {
|
|||
newWish = {status: response.status, statusText: response.statusText, data: response.data};
|
||||
});
|
||||
return newWish;
|
||||
},
|
||||
async remove(id, token){
|
||||
await axios.post(`/api/wish/destroy`,
|
||||
{
|
||||
id: id
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
token: token
|
||||
},
|
||||
}
|
||||
).then((response)=>{
|
||||
return response;
|
||||
});
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -12,15 +12,31 @@ export default {
|
|||
data: () => ({
|
||||
userStore: useUserStore(),
|
||||
valid: false,
|
||||
email: '',
|
||||
password: '',
|
||||
email: null,
|
||||
password: null,
|
||||
rememberMe: false,
|
||||
errorMessage: '',
|
||||
errorMessageContainerStyle: '',
|
||||
showPassword: false
|
||||
}),
|
||||
methods: {
|
||||
validate(){
|
||||
let emailValidation = rules.email(this.email);
|
||||
let passwordValidation = rules.notNull(this.password);
|
||||
if (typeof emailValidation == "boolean" && typeof passwordValidation == "boolean"){
|
||||
return emailValidation && passwordValidation;
|
||||
} else if (typeof emailValidation == "string") {
|
||||
return emailValidation;
|
||||
} else if (typeof passwordValidation == "string") {
|
||||
return passwordValidation;
|
||||
}
|
||||
},
|
||||
loginAction(){
|
||||
let validation = this.validate();
|
||||
if (validation !== true){
|
||||
alert(validation);
|
||||
return;
|
||||
}
|
||||
this.userStore.login(this.email, this.password, this.rememberMe).then((isLogged) => {
|
||||
if (typeof isLogged == "boolean") {
|
||||
if (isLogged){
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ export default {
|
|||
data: () => ({
|
||||
userStore: useUserStore(),
|
||||
valid: false,
|
||||
login: '',
|
||||
email: '',
|
||||
password: '',
|
||||
repeatPassword: '',
|
||||
login: null,
|
||||
email: null,
|
||||
password: null,
|
||||
repeatPassword: null,
|
||||
errorMessage: '',
|
||||
errorMessageContainerStyle: 'display: none;',
|
||||
showPassword: false,
|
||||
|
|
@ -22,7 +22,26 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
validate(){
|
||||
let emailValidation = rules.email(this.email);
|
||||
let loginValidation = rules.notNull(this.login);
|
||||
let passwordValidation = rules.notNull(this.password);
|
||||
let repeatPasswordValidation = rules.notNull(this.repeatPassword);
|
||||
let validation = [emailValidation, loginValidation, passwordValidation, repeatPasswordValidation];
|
||||
let check = null;
|
||||
validation.forEach((element)=>{
|
||||
if (typeof element !== "boolean"){
|
||||
check = element;
|
||||
}
|
||||
})
|
||||
return check === null ? true : check;
|
||||
},
|
||||
registrationAction(){
|
||||
let validation = this.validate();
|
||||
if (validation !== true){
|
||||
alert(validation);
|
||||
return;
|
||||
}
|
||||
this.userStore.registration(this.login, this.email, this.password, this.repeatPassword).then((isRegistred)=>{
|
||||
if (typeof isRegistred == "boolean") {
|
||||
if (isRegistred){
|
||||
|
|
|
|||
|
|
@ -63,9 +63,4 @@ export default {
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.card-bg {
|
||||
background-color: #212022;
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
<script>
|
||||
import {useUserStore} from "../../store/user.js";
|
||||
import {useWishStore} from "../../store/wish.js";
|
||||
import {rules} from "../../js/rules.js";
|
||||
export default {
|
||||
name: "CreateWish",
|
||||
data: () => ({
|
||||
userStore: useUserStore(),
|
||||
wishStore: useWishStore(),
|
||||
name: null,
|
||||
price: null,
|
||||
url: null
|
||||
}),
|
||||
computed: {
|
||||
rules() {
|
||||
return rules
|
||||
}
|
||||
},
|
||||
props: {
|
||||
dialogCreate: Function,
|
||||
updateFrontWishes: Function
|
||||
},
|
||||
methods: {
|
||||
validate(){
|
||||
return rules.notNull(this.name);
|
||||
},
|
||||
createWish(){
|
||||
let validation = this.validate();
|
||||
if (typeof validation !== "boolean"){
|
||||
alert(validation);
|
||||
return;
|
||||
}
|
||||
this.wishStore.create(this.userStore.user['id'], this.name, this.price, this.url, this.userStore.token).then(()=>{
|
||||
this.updateFrontWishes();
|
||||
this.dialogCreate();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card class="card-bg">
|
||||
<v-card-title class="d-flex justify-space-between">
|
||||
<span>Создать новый элемент</span>
|
||||
<span>
|
||||
<v-icon @click="dialogCreate" class="cursor-pointer" color="white" icon="mdi-close-thick"></v-icon>
|
||||
</span>
|
||||
</v-card-title>
|
||||
<v-card-text class="d-flex align-center flex-column w-100">
|
||||
<v-text-field class="w-100" label="Наименование" v-model="name" :rules="[rules.notNull]"></v-text-field>
|
||||
<v-text-field class="w-100" label="Стоимость" v-model="price"></v-text-field>
|
||||
<v-text-field class="w-100" label="Ссылка" v-model="url"></v-text-field>
|
||||
<v-btn class="w-33" @click="createWish">Создать</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,36 +1,87 @@
|
|||
<script>
|
||||
import {useUserStore} from "../../store/user.js";
|
||||
import {useWishStore} from "../../store/wish.js";
|
||||
import axios from "axios";
|
||||
import CreateWish from "./CreateWish.vue";
|
||||
import {ref} from "vue";
|
||||
export default {
|
||||
name: "Wishlist",
|
||||
components: {CreateWish},
|
||||
data: () => ({
|
||||
userStore: useUserStore(),
|
||||
wishStore: useWishStore()
|
||||
wishStore: useWishStore(),
|
||||
wishesList: [],
|
||||
fetching: true,
|
||||
dialogCreate: ref(false),
|
||||
dialogEdit: ref(false)
|
||||
}),
|
||||
mounted() {
|
||||
this.wishStore.getUserWishes(this.userStore.user['id']).then((wishes)=>{
|
||||
this.wishesList = wishes;
|
||||
this.fetching = false
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
tryWishes(){
|
||||
let token = this.userStore.token;
|
||||
let user_id = this.userStore.user['id'];
|
||||
// get wish list
|
||||
this.wishStore.getUserWishes(user_id, token).then((result)=>{
|
||||
console.log(result);
|
||||
// push new wish
|
||||
this.wishStore.create(user_id, 'Google', 42000, 'http://google.com/', token).then((response)=>{
|
||||
console.log(response);
|
||||
// get wish list
|
||||
this.wishStore.getUserWishes(user_id, token).then((resultOfResponse)=>{
|
||||
console.log(resultOfResponse);
|
||||
});
|
||||
dialogCreateClose(){
|
||||
this.dialogCreate = false;
|
||||
},
|
||||
dialogEditClose(){
|
||||
this.dialogEdit = false;
|
||||
},
|
||||
updateFrontWishes(){
|
||||
this.fetching = true;
|
||||
this.wishStore.getUserWishes(this.userStore.user['id']).then((wishes)=>{
|
||||
this.wishesList = wishes;
|
||||
this.fetching = false
|
||||
});
|
||||
},
|
||||
removeWish(id){
|
||||
this.fetching = true;
|
||||
this.wishStore.remove(id, this.userStore.token).then(()=>{
|
||||
this.wishStore.getUserWishes(this.userStore.user['id']).then((wishes)=>{
|
||||
this.wishesList = wishes;
|
||||
this.fetching = false;
|
||||
});
|
||||
})
|
||||
},
|
||||
editWish(id){
|
||||
|
||||
},
|
||||
createWish(){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-label class="link-no-decor" @click="this.tryWishes">Hello world!</v-label>
|
||||
<!-- <v-label class="link-no-decor" @click="this.tryWishes">Hello world!</v-label>-->
|
||||
<v-skeleton-loader color="grey-darken-4" type="table" v-if="fetching"></v-skeleton-loader>
|
||||
<v-table v-else class="card-bg w-100 h-auto mt-5 pa-3">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Наименование</th>
|
||||
<th>Цена</th>
|
||||
<th>Ссылка</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="wish in wishesList">
|
||||
<td>{{ wish['name'] }}</td>
|
||||
<td>{{ wish['price'] }}</td>
|
||||
<td><a target="_blank" :href="wish['url']">{{ wish['url'] }}</a></td>
|
||||
<td><v-icon @click="" class="cursor-pointer" color="white" icon="mdi-pencil"></v-icon></td>
|
||||
<td><v-icon @click="removeWish(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>
|
||||
<v-dialog v-model="dialogCreate" class="w-66">
|
||||
<CreateWish :dialogCreate="dialogCreateClose" :updateFrontWishes="updateFrontWishes"/>
|
||||
</v-dialog>
|
||||
</v-table>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Reference in New Issue