Мутим формы

app/Http/Controllers/ComputerController.php

@@ -26,6 +26,7 @@ class ComputerController extends Controller
             'user_id' => 'required|exists:users,id',
             'name' => 'required|string|max:256',
             'cpu' => 'nullable|string|max:256',
+            'ram' => 'nullable|string|max:256',
             'motherboard' => 'nullable|string|max:256',
             'gpu' => 'nullable|string|max:256',
             'additional_info' => 'nullable|string|max:256',
@@ -41,6 +42,7 @@ class ComputerController extends Controller
             'id' => 'required|exists:computers,id',
             'name' => 'required|string|max:256',
             'cpu' => 'nullable|string|max:256',
+            'ram' => 'nullable|string|max:256',
             'motherboard' => 'nullable|string|max:256',
             'gpu' => 'nullable|string|max:256',
             'additional_info' => 'nullable|string|max:256',
@@ -60,10 +62,11 @@ class ComputerController extends Controller
     public function destroy(Request $request)
     {
         $request->validate([
-            'id' => 'required|exists:wishes,id',
+            'id' => 'required|exists:computers,id',
         ]);
+        $computer = Computer::find($request->get('id'));
+        JobController::destroyByComputerId($computer);
         $destroyed = Computer::destroy($request->get('id'));
         return response()->json($destroyed, 204);
-
     }
 }

app/Http/Controllers/JobController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Models\Job;
+use App\Models\Computer;
 use Illuminate\Http\Request;
 
 class JobController extends Controller
@@ -53,4 +54,14 @@ class JobController extends Controller
         $destroyed = Job::destroy($request->get('id'));
         return response()->json($destroyed, 204);
     }
+
+    public static function destroyByComputerId(Computer $computer)
+    {
+        $computerId = $computer->id;
+        $jobs = Job::select()->where('computer_id', '=', $computerId)->get();
+        foreach ($jobs as $job){
+            Job::destroy($job->id);
+        }
+        return true;
+    }
 }

app/Models/Computer.php

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

database/migrations/2024_10_31_091008_create_computers_table.php

@@ -17,6 +17,7 @@ return new class extends Migration
             $table->foreign('user_id')->references('id')->on('users');
             $table->string('name', length: 256);
             $table->string('cpu', length: 256)->nullable();
+            $table->string('ram', length: 256)->nullable();
             $table->string('motherboard', length: 256)->nullable();
             $table->string('gpu', length: 256)->nullable();
             $table->string('additional_info', length: 256)->nullable();

resources/App.vue

@@ -44,7 +44,6 @@
                 <RouterView v-slot="{ Component }">
                     <Component
                         :is="Component"
-                        :is-wide="isWide"
                     />
                 </RouterView>
             </v-sheet>
@@ -93,6 +92,11 @@ export default {
         this.userStore.checkUser();
         watch(this.userStore, (newStore)=>{
             this.authenticated = newStore.user !== null && newStore.user !== undefined;
+            if (!this.authenticated){
+                this.$router.push('/login');
+            } else {
+                this.$router.push('/');
+            }
         });
     }
 }

resources/store/computers.js

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

resources/views/Computers/CreateForm.vue

@@ -16,6 +16,7 @@ export default {
         return {
             computerName: null,
             computerCpu: null,
+            computerRam: null,
             computerMotherboard: null,
             computerGpu: null,
             computerAdditional: null,
@@ -34,6 +35,7 @@ export default {
             this.computersStore.create(
                 this.computerName,
                 this.computerCpu,
+                this.computerRam,
                 this.computerMotherboard,
                 this.computerGpu,
                 this.computerAdditional
@@ -48,15 +50,19 @@ export default {
 
 <template>
     <v-card class="main-bg">
-        <v-card-title>Создание нового компьютера</v-card-title>
+        <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-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 :loading="loading" @click="createComputer">Создать</v-btn>
+                <v-btn color="#F0A068FF" :loading="loading" @click="createComputer">Создать</v-btn>
             </div>
         </v-card-text>
     </v-card>

resources/views/ComputersList.vue

@@ -4,7 +4,7 @@ import { useUserStore } from '../store/auth.js';
 import {useComputersStore} from "../store/computers.js";
 import CreateForm from './Computers/CreateForm.vue';
 export default {
-    name: "About",
+    name: "ComputersList",
     components: {CreateForm},
     data() {
         return {
@@ -13,9 +13,12 @@ export default {
             computerList: [],
             createDialogShow: false,
             editDialogShow: false,
+            deleteDialogShow: false,
             fetching: false,
             authenticated: false,
-            editLoading: false
+            editLoading: false,
+            deleteLoading: false,
+            computerToDeleteId: null
         };
     },
     methods: {
@@ -27,6 +30,19 @@ export default {
         },
         showEditDialog(){
             this.editDialogShow = true;
+        },
+        showDeleteDialog(id){
+            this.deleteDialogShow = true;
+            this.computerToDeleteId = id;
+        },
+        hideDeleteDialog(){
+            this.deleteDialogShow = false;
+        },
+        deleteComputer(){
+            this.deleteLoading = true;
+            this.computersStore.delete(this.computerToDeleteId).then(()=>{
+                this.deleteLoading = false;
+            })
         }
     },
     mounted() {
@@ -35,13 +51,19 @@ export default {
             this.fetching = true;
             this.authenticated = newStore.user !== null && newStore.user !== undefined;
             this.computersStore.setToken(this.userStore.token);
-            if (this.userStore.user['id']){
+            if (this.userStore.user !== null){
                 this.computersStore.getComputerList(this.userStore.user['id']).then(()=>{
                     this.computerList = this.computersStore.computers;
                     this.fetching = false;
                 })
             }
         });
+        watch(this.computersStore, (newStore)=>{
+            this.fetching = true;
+            this.computerList = this.computersStore.computers;
+            this.fetching = false;
+            this.hideDeleteDialog();
+        })
     }
 }
 </script>
@@ -56,15 +78,19 @@ export default {
                         <v-card-title>{{ computer['name'] }}</v-card-title>
                         <v-card-text class="d-flex flex-column cursor-pointer">
                             <v-label class="cursor-pointer">CPU: {{ computer['cpu'] }}</v-label>
+                            <v-label class="cursor-pointer">RAM: {{ computer['ram'] }}</v-label>
                             <v-label class="cursor-pointer">Motherboard: {{ computer['motherboard'] }}</v-label>
                             <v-label class="cursor-pointer">GPU: {{ computer['gpu'] }}</v-label>
                             <v-label class="cursor-pointer">Дополнительная информация: {{ computer['additional_info'] }}</v-label>
                         </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">
+                <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">
                     <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">
+                    <v-icon icon="mdi-trash-can"></v-icon>
+                </div>
             </div>
         </div>
         <div class="w-100 pa-5" v-if="!fetching">
@@ -73,9 +99,21 @@ export default {
             </v-btn>
         </div>
     </div>
-    <v-dialog :model-value="createDialogShow">
+    <v-dialog v-model="createDialogShow">
         <CreateForm :dialogClose="hideCreateDialog" />
     </v-dialog>
+    <v-dialog v-model="deleteDialogShow" class="w-33">
+        <v-card class="main-bg">
+            <v-card-text class="d-flex flex-column">
+                <v-label class="w-100 text-h5">Вы уверены?</v-label>
+                <v-label class="w-100">Это действие удалит компьютер и все действия связанные с ним</v-label>
+                <div class="d-flex w-100 justify-center">
+                    <v-btn color="#F0A068FF" class="ma-2" :loading="deleteLoading" @click="deleteComputer">Да</v-btn>
+                    <v-btn color="#F0A068FF" class="ma-2" @click="hideDeleteDialog">Нет</v-btn>
+                </div>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
 </template>
 
 <style scoped>