Продолжаем

app/Models/Computer.php

@@ -8,4 +8,10 @@
 class Computer extends Model
 {
     use HasFactory;
+    protected $fillable = ['user_id', 'name', 'cpu', 'motherboard', 'gpu', 'additional_info'];
+
+    public function user(){
+        return  $this->belongsTo(User::class);
+    }
+
 }

app/Models/Job.php

@@ -8,4 +8,9 @@
 class Job extends Model
 {
     use HasFactory;
+    protected $fillable = ['computer_id', 'description', 'status'];
+
+    public function computer(){
+        return  $this->belongsTo(Computer::class);
+    }
 }

resources/store/computers.js

@@ -13,7 +13,7 @@ export const useComputersStore = defineStore('computers', {
             localStorage.setItem('auth_token', token);
         },
         checkToken(){
-            this.token = this.useUserStore().token;
+            this.token = useUserStore().token;
         },
         async getComputerList(user_id){
             if (this.token === null){
@@ -33,6 +33,29 @@ export const useComputersStore = defineStore('computers', {
             ).then((response)=>{
                 this.computers = response.data;
             })
+        },
+        async create(name, cpu, motherboard, gpu, additional_info){
+            if (this.token === null){
+                this.checkToken();
+            }
+            await axios.post('/api/data/computers/create', {
+                user_id: useUserStore().user['id'],
+                name: name,
+                cpu: cpu,
+                motherboard: motherboard,
+                gpu: gpu,
+                additional_info: additional_info,
+            }, {
+                headers: {
+                    Authorization: `Bearer ${this.token}`,
+                    token: this.token
+                },
+            }).then(()=>{
+                this.getComputerList(useUserStore().user['id']);
+                return true;
+            }).catch(()=>{
+                return false;
+            });
         }
     },
 })

resources/views/Computers/CreateForm.vue

@@ -0,0 +1,66 @@
+<script>
+import { useComputersStore } from '../../store/computers';
+import {rules} from '../../js/rules.js'
+
+export default {
+    name: "CreateForm",
+    computed: {
+        rules() {
+            return rules
+        }
+    },
+    props: {
+        dialogClose: Function
+    },
+    data() {
+        return {
+            computerName: null,
+            computerCpu: null,
+            computerMotherboard: null,
+            computerGpu: null,
+            computerAdditional: null,
+            loading: false,
+            computersStore: useComputersStore()
+        }
+    },
+    methods: {
+        createComputer(){
+            this.loading = true;
+            if (!rules.notNull(this.computerName)){
+                alert('Имя компьютера необходимо заполнить');
+                this.loading = false;
+                return;
+            }
+            this.computersStore.create(
+                this.computerName,
+                this.computerCpu,
+                this.computerMotherboard,
+                this.computerGpu,
+                this.computerAdditional
+            ).then((result)=>{
+                this.loading = false;
+                this.dialogClose();
+            });
+        }
+    }
+}
+</script>
+
+<template>
+    <v-card class="main-bg">
+        <v-card-title>Создание нового компьютера</v-card-title>
+        <v-card-text>            
+            <v-text-field :rules="[rules.notNull]" label="Название" v-model="computerName" placeholder="Мой компьютер"></v-text-field>
+            <v-text-field label="CPU" v-model="computerCpu" placeholder="Intel Core i5-12400F"></v-text-field>
+            <v-text-field label="Материнская плата" v-model="computerMotherboard" placeholder="Asus ROG B650"></v-text-field>
+            <v-text-field label="Gpu" v-model="computerGpu" placeholder="Nvidia RTX 3060ti"></v-text-field>
+            <v-textarea label="Дополнительная информация" v-model="computerAdditional"></v-textarea>
+            <div class="d-flex justify-center">
+                <v-btn :loading="loading" @click="createComputer">Создать</v-btn>
+            </div>
+        </v-card-text>
+    </v-card>
+</template>
+
+<style scoped>
+</style>

resources/views/ComputersList.vue

@@ -2,9 +2,10 @@
 import { watch } from 'vue';
 import { useUserStore } from '../store/auth.js';
 import {useComputersStore} from "../store/computers.js";
-import {rules} from "../js/rules.js";
+import CreateForm from './Computers/CreateForm.vue';
 export default {
     name: "About",
+    components: {CreateForm},
     data() {
         return {
             userStore: useUserStore(),
@@ -14,17 +15,16 @@ export default {
             editDialogShow: false,
             fetching: false,
             authenticated: false,
-            computerName: null,
+            editLoading: false
-            computerCpu: null,
-            computerMotherboard: null,
-            computerGpu: null,
-            computerAdditional: null,
         };
     },
     methods: {
         showCreateDialog(){
             this.createDialogShow = true;
         },
+        hideCreateDialog(){
+            this.createDialogShow = false;
+        },
         showEditDialog(){
             this.editDialogShow = true;
         }
@@ -35,10 +35,12 @@ export default {
             this.fetching = true;
             this.authenticated = newStore.user !== null && newStore.user !== undefined;
             this.computersStore.setToken(this.userStore.token);
-            this.computersStore.getComputerList(this.userStore.user['id']).then(()=>{
+            if (this.userStore.user['id']){
-                this.computerList = this.computersStore.computers;
+                this.computersStore.getComputerList(this.userStore.user['id']).then(()=>{
-                this.fetching = false;
+                    this.computerList = this.computersStore.computers;
-            })
+                    this.fetching = false;
+                })
+            }
         });
     }
 }
@@ -48,7 +50,7 @@ export default {
     <div class="d-flex flex-column justify-center w-100">
         <v-skeleton-loader v-if="fetching" color="grey-darken-3" class="w-100" type="card"/>
         <div v-if="!fetching" class="w-100 h-100">
-            <div class="d-flex align-center justify-space-between w-100 h-100" v-for="computer in computerList">
+            <div class="d-flex align-center justify-space-between w-100 h-100 pt-3 pb-3" v-for="computer in computerList">
                 <router-link :to="`/jobs?id=${computer['id']}`" class="text-decoration-none w-100 mr-2" >
                     <v-card class="card-bg text-decoration-none cursor-pointer w-100">
                         <v-card-title>{{ computer['name'] }}</v-card-title>
@@ -72,17 +74,7 @@ export default {
         </div>
     </div>
     <v-dialog :model-value="createDialogShow">
-        <v-card class="main-bg">
+        <CreateForm :dialogClose="hideCreateDialog" />
-            <v-card-title>Создание нового компьютера</v-card-title>
-            <v-card-text>
-                <v-text-field label="Название" :model-value="computerName" placeholder="Мой компьютер"></v-text-field>
-                <v-text-field label="CPU" :model-value="computerCpu" placeholder="Intel Core i5-12400F"></v-text-field>
-                <v-text-field label="Материнская плата" :model-value="computerMotherboard" placeholder="Asus ROG B650"></v-text-field>
-                <v-text-field label="Gpu" :model-value="computerGpu" placeholder="Nvidia RTX 3060ti"></v-text-field>
-                <v-textarea label="Дополнительная информация" :model-value="computerAdditional"></v-textarea>
-                <v-btn>Создать</v-btn>
-            </v-card-text>
-        </v-card>
     </v-dialog>
 </template>