Мутим формы

2024-11-02 14:12:24 +08:00 · 2024-11-02 14:12:24 +08:00 · 34becd64a0
parent 2d4151847c
commit 34becd64a0
8 changed files with 94 additions and 12 deletions
--- a/app/Http/Controllers/ComputerController.php
+++ b/app/Http/Controllers/ComputerController.php
@ -26,6 +26,7 @@ public function create(Request $request)
            '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 @@ public function update(Request $request)
            '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 @@ public function update(Request $request)
    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);
-
    }
 }
--- a/app/Http/Controllers/JobController.php
+++ b/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 @@ public function destroy(Request $request)
        $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;
+    }
 }
--- a/app/Models/Computer.php
+++ b/app/Models/Computer.php
@ -8,7 +8,7 @@
 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);
--- a/database/migrations/2024_10_31_091008_create_computers_table.php
+++ b/database/migrations/2024_10_31_091008_create_computers_table.php
@ -17,6 +17,7 @@ public function up(): void
            $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();
--- a/resources/App.vue
+++ b/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('/');
+            }
        });
    }
 }
--- a/resources/store/computers.js
+++ b/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;
+            });
        }
    },
 })
--- a/resources/views/Computers/CreateForm.vue
+++ b/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>
--- a/resources/views/ComputersList.vue
+++ b/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>