Запилил редактирование

app/Http/Controllers/ComputerController.php

@@ -13,7 +13,7 @@ class ComputerController extends Controller
     }
 
     public function getById(Request $request){
-        return Computer::find($request->get('id'));
+        return response()->json(Computer::find($request->get('id')), 200);;
     }
 
     public function getByUserId(Request $request){
@@ -51,6 +51,7 @@ class ComputerController extends Controller
         $computer = Computer::find($request->get('id'));
         $computer->name = $request->get('name');
         $computer->cpu = $request->get('cpu');
+        $computer->ram = $request->get('ram');
         $computer->motherboard = $request->get('motherboard');
         $computer->gpu = $request->get('gpu');
         $computer->additional_info = $request->get('additional_info');

resources/store/computers.js

@@ -15,6 +15,27 @@ export const useComputersStore = defineStore('computers', {
         checkToken(){
             this.token = useUserStore().token;
         },
+        async getById(id){
+            if (this.token === null){
+                this.checkToken();
+            }
+            let result = null;
+            await axios.get(
+                '/api/data/computers/byId',
+                {
+                    headers: {
+                        Authorization: `Bearer ${this.token}`,
+                        token: this.token
+                    },
+                    params: {
+                        id: id
+                    }
+                }
+            ).then((response)=>{
+                result = response.data;
+            });
+            return result;
+        },
         async getComputerList(user_id){
             if (this.token === null){
                 this.checkToken();
@@ -58,6 +79,30 @@ export const useComputersStore = defineStore('computers', {
                 return false;
             });
         },
+        async update(id, name, cpu, ram, motherboard, gpu, additional_info){
+            if (this.token === null){
+                this.checkToken();
+            }
+            await axios.post('/api/data/computers/save', {
+                id: id,
+                name: name,
+                cpu: cpu,
+                ram: ram,
+                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;
+            });
+        },
         async delete(id){
             if (this.token === null){
                 this.checkToken();

resources/views/Computers/EditForm.vue

@@ -0,0 +1,102 @@
+<script>
+import { useComputersStore } from '../../store/computers.js';
+import {rules} from '../../js/rules.js';
+import {toRef, ref} from "vue";
+
+export default {
+    name: "EditForm",
+    computed: {
+        rules() {
+            return rules
+        }
+    },
+    props: {
+        dialogClose: Function,
+        computer_id: Number
+    },
+    setup(props) {
+        const id = toRef(props, 'computer_id')
+    },
+    mounted() {
+        this.fetching = true;
+        this.computersStore.getById(this.computer_id).then((response)=>{
+            console.log(response);
+            this.computerToEdit = response;
+            this.computerName = this.computerToEdit['name'];
+            this.computerCpu = this.computerToEdit['cpu'];
+            this.computerRam = this.computerToEdit['ram'];
+            this.computerMotherboard = this.computerToEdit['motherboard'];
+            this.computerGpu = this.computerToEdit['gpu'];
+            this.computerAdditional = this.computerToEdit['additional_info'];
+            this.fetching = false;
+        });
+    },
+    data() {
+        return {
+            computerToEdit: null,
+            computerName: null,
+            computerCpu: null,
+            computerRam: null,
+            computerMotherboard: null,
+            computerGpu: null,
+            computerAdditional: null,
+            loading: false,
+            fetching: false,
+            computersStore: useComputersStore()
+        }
+    },
+    methods: {
+        editComputer(){
+            this.loading = true;
+            if (!rules.notNull(this.computer_id) || this.computer_id === 0){
+                alert('Произошла ошибка');
+                this.loading = false;
+                return;
+            }
+            if (!rules.notNull(this.computerName)){
+                alert('Имя компьютера необходимо заполнить');
+                this.loading = false;
+                return;
+            }
+            this.computersStore.update(
+                this.computer_id,
+                this.computerName,
+                this.computerCpu,
+                this.computerRam,
+                this.computerMotherboard,
+                this.computerGpu,
+                this.computerAdditional
+            ).then((result)=>{
+                this.loading = false;
+                this.dialogClose();
+            });
+        }
+    }
+}
+</script>
+
+<template>
+    <v-card class="main-bg">
+        <v-card-title class="d-flex justify-space-between">
+            <span>Создание нового компьютера</span>
+            <v-icon @click="dialogClose" class="cursor-pointer" icon="mdi-close-thick"></v-icon>
+        </v-card-title>
+        <v-card-text>      
+            <v-skeleton-loader color="grey-darken-4" type="card" v-if="fetching"></v-skeleton-loader>
+            <div v-if="!fetching">
+                <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="computerRam" placeholder="Kingston Fury 2x16GB DDR4"></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 color="#F0A068FF" :loading="loading" @click="editComputer">Сохранить</v-btn>
+                </div>
+            </div>
+        </v-card-text>
+    </v-card>
+</template>
+
+<style scoped>
+</style>

resources/views/ComputersList.vue

@@ -1,11 +1,12 @@
 <script>
-import { watch } from 'vue';
+import { watch, ref } from 'vue';
 import { useUserStore } from '../store/auth.js';
 import {useComputersStore} from "../store/computers.js";
 import CreateForm from './Computers/CreateForm.vue';
+import EditForm from './Computers/EditForm.vue';
 export default {
     name: "ComputersList",
-    components: {CreateForm},
+    components: {CreateForm, EditForm},
     data() {
         return {
             userStore: useUserStore(),
@@ -18,7 +19,8 @@ export default {
             authenticated: false,
             editLoading: false,
             deleteLoading: false,
-            computerToDeleteId: null
+            computerToDeleteId: null,
+            computerToEditId: ref(0)
         };
     },
     methods: {
@@ -28,9 +30,13 @@ export default {
         hideCreateDialog(){
             this.createDialogShow = false;
         },
-        showEditDialog(){
+        showEditDialog(id){
+            this.computerToEditId = id;
             this.editDialogShow = true;
         },
+        hideEditDialog(){
+            this.editDialogShow = false;
+        },
         showDeleteDialog(id){
             this.deleteDialogShow = true;
             this.computerToDeleteId = id;
@@ -85,7 +91,7 @@ export default {
                         </v-card-text>
                     </v-card>
                 </router-link>
-                <div @click="showEditDialog" class="card-bg align-self-stretch pa-2 d-flex justify-center align-center rounded-sm cursor-pointer mr-2 ml-2">
+                <div @click="showEditDialog(computer['id'])" class="card-bg align-self-stretch pa-2 d-flex justify-center align-center rounded-sm cursor-pointer mr-2 ml-2">
                     <v-icon icon="mdi-pencil"></v-icon>
                 </div>
                 <div @click="showDeleteDialog(computer['id'])" class="card-bg align-self-stretch pa-2 d-flex justify-center align-center rounded-sm cursor-pointer mr-2 ml-2">
@@ -114,6 +120,9 @@ export default {
             </v-card-text>
         </v-card>
     </v-dialog>
+    <v-dialog v-model="editDialogShow">
+        <EditForm :dialogClose="hideEditDialog" :computer_id="computerToEditId"/>
+    </v-dialog>
 </template>
 
 <style scoped>

routes/api.php

@@ -35,6 +35,7 @@ Route::group(['prefix' => 'data'], function () {
     Route::group(['middleware' => 'auth:sanctum'], function() {
         Route::group(['prefix' => 'computers'], function () {
             Route::get('all', [ComputerController::class, 'index']);
+            Route::get('byId', [ComputerController::class, 'getById']);
             Route::get('byUser', [ComputerController::class, 'getByUserId']);
             Route::post('create', [ComputerController::class, 'create']);
             Route::post('save', [ComputerController::class, 'update']);