Намутил немного CRUD'a: вывод списка, удаление записи и создание новой записи

resources/css/app.css

@@ -1,9 +1,18 @@
 .link-no-decor {
-    color: white;
+    color: white!important;
-    text-decoration: none;
+    text-decoration: none!important;
-    cursor: pointer;
+    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;
 }

resources/store/wish.js

@@ -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: {
+                //     headers: {
-                        Authorization: `Bearer ${token}`,
+                //         Authorization: `Bearer ${token}`,
-                        token: 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;
+            });
         }
     },
 })

resources/views/Auth/Login.vue

@@ -12,15 +12,31 @@ export default {
     data: () => ({
         userStore: useUserStore(),
         valid: false,
-        email: '',
+        email: null,
-        password: '',
+        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){

resources/views/Auth/Registration.vue

@@ -7,10 +7,10 @@ export default {
     data: () => ({
         userStore: useUserStore(),
         valid: false,
-        login: '',
+        login: null,
-        email: '',
+        email: null,
-        password: '',
+        password: null,
-        repeatPassword: '',
+        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){

resources/views/Welcome.vue

@@ -63,9 +63,4 @@ export default {
     height: 100vh;
 }
 
-.card-bg {
-    background-color: #212022;
-    color: white;
-}
-
 </style>

resources/views/Wishlist/CreateWish.vue

@@ -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>

resources/views/Wishlist/Wishlist.vue

@@ -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(){
+        dialogCreateClose(){
-            let token = this.userStore.token;
+            this.dialogCreate = false;
-            let user_id = this.userStore.user['id'];
+        },
-            // get wish list
+        dialogEditClose(){
-            this.wishStore.getUserWishes(user_id, token).then((result)=>{
+            this.dialogEdit = false;
-                console.log(result);
+        },
-                // push new wish
+        updateFrontWishes(){
-                this.wishStore.create(user_id, 'Google', 42000, 'http://google.com/', token).then((response)=>{
+            this.fetching = true;
-                    console.log(response);
+            this.wishStore.getUserWishes(this.userStore.user['id']).then((wishes)=>{
-                    // get wish list
+                this.wishesList = wishes;
-                    this.wishStore.getUserWishes(user_id, token).then((resultOfResponse)=>{
+                this.fetching = false
-                        console.log(resultOfResponse);
-                    });
-                });
             });
+        },
+        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>