From 0eab40fb5c6ef65956b21d84263539ae9b7d6b4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=92=D0=BE=D0=BB=D0=BE=D0=B4=D1=8F?=
 <VladimirMorozov.73@yandex.ru>
Date: Tue, 17 Dec 2024 19:11:42 +0400
Subject: [PATCH] fix: front logic

---
 front/src/components/examCreate.vue | 113 +++++++++++++++++++++++++++
 front/src/components/examUpd.vue    | 114 ++++++++++++++++++++++++++++
 front/src/components/exams.vue      | 104 +++++++++++++++++++++++++
 3 files changed, 331 insertions(+)
 create mode 100644 front/src/components/examCreate.vue
 create mode 100644 front/src/components/examUpd.vue
 create mode 100644 front/src/components/exams.vue

diff --git a/front/src/components/examCreate.vue b/front/src/components/examCreate.vue
new file mode 100644
index 0000000..42f01a2
--- /dev/null
+++ b/front/src/components/examCreate.vue
@@ -0,0 +1,113 @@
+<template>
+    <div v-if="show" class="modal-shadow" @click.self="closeModal">
+        <div class="container">
+            <form >
+                             <div class="mb-3">
+                                 <label 
+                                     htmlFor="num"
+                                     class="form-label">Название
+                                 </label>
+                                 <input 
+                                     type="text"
+                                     class="form-control"
+                                     id="num"
+                                     name="num"
+                                     v-model="title"
+                                 />
+                                 
+                             </div>
+                             
+                             
+                             <div class="d-grid gap-2">
+                                 <button 
+                                     @click="create"
+                                     type="button"
+                                     class="btn btn-primary btn-block">Добавить
+                                 </button>
+                                
+                             </div>
+                         </form>
+        </div>
+    </div>
+</template>
+ 
+<script>
+import ExamSevice from '@/services/ExamSevice';
+    export default {
+        name: "ModalWindow",
+        data: function () {
+            return {
+                show: false,
+                id:'',
+                title:'',
+            }
+        },
+        methods: {
+            closeModal() {
+                this.show = false
+                this.title =''
+
+            },
+            create(){
+                let data = {
+                    id:null,
+                    title:this.title,
+                }
+                console.log(data)
+                ExamSevice.create(data).then(res => {
+                    console.log(res.data)
+                    window.location.reload()
+                })
+            }
+
+        }
+    }
+</script>
+ 
+<style scoped >
+    .modal-shadow {
+        position: absolute;
+        top: 0;
+        left: 0;
+        min-height: 100%;
+        width: 100%;
+        padding: 50px ;
+        background: rgba(0, 0, 0, 0.39);
+    }
+ 
+    .container {
+        position: absolute;
+        min-width: 100px;
+        height: fit-content;
+        top: 50%;
+        left: 50%;
+        padding: 1%;
+        transform: translate(-50%, -50%);
+        background-color: #fff;
+        border-radius: 2px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+ 
+    }
+    .modal-close {
+            border-radius: 50%;
+            color: #fff;
+            background: #2a4cc7;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            top: 7px;
+            right: 7px;
+            width: 30px;
+            height: 30px;
+            cursor: pointer;
+        }
+ 
+    .modal-title {
+        color: #0971c7;
+    }
+
+    .modal-content {
+        margin-bottom: 20px
+        }
+</style>
\ No newline at end of file
diff --git a/front/src/components/examUpd.vue b/front/src/components/examUpd.vue
new file mode 100644
index 0000000..2b28c7e
--- /dev/null
+++ b/front/src/components/examUpd.vue
@@ -0,0 +1,114 @@
+<template>
+    <div v-if="show" class="modal-shadow" @click.self="closeModal">
+        <div class="container">
+            <form >
+                             <div class="mb-3">
+                                 <label 
+                                     htmlFor="num"
+                                     class="form-label">Название
+                                 </label>
+                                 <input 
+                                     type="text"
+                                     class="form-control"
+                                     id="num"
+                                     name="num"
+                                     v-model="title"
+                                 />
+                                 
+                             </div>
+                             
+                            
+                             
+                             <div class="d-grid gap-2">
+                                 <button 
+                                     @click="create"
+                                     type="button"
+                                     class="btn btn-primary btn-block">Обновить
+                                 </button>
+                                
+                             </div>
+                         </form>
+        </div>
+    </div>
+</template>
+ 
+<script>
+import ExamSevice from '@/services/ExamSevice';
+    export default {
+        name: "ModalWindow",
+        data: function () {
+            return {
+                show: false,
+                id:'',
+                title:'',
+            }
+        },
+        methods: {
+            closeModal() {
+                this.show = false
+                this.title =''
+
+            },
+            create(){
+                let data = {
+                    id:this.id,
+                    title:this.title,
+                }
+                console.log(data)
+                ExamSevice.update(data).then(res => {
+                    console.log(res.data)
+                    window.location.reload()
+                })
+            }
+
+        }
+    }
+</script>
+ 
+<style scoped >
+    .modal-shadow {
+        position: absolute;
+        top: 0;
+        left: 0;
+        min-height: 100%;
+        width: 100%;
+        padding: 50px ;
+        background: rgba(0, 0, 0, 0.39);
+    }
+ 
+    .container {
+        position: absolute;
+        min-width: 100px;
+        height: fit-content;
+        top: 50%;
+        left: 50%;
+        padding: 1%;
+        transform: translate(-50%, -50%);
+        background-color: #fff;
+        border-radius: 2px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+ 
+    }
+    .modal-close {
+            border-radius: 50%;
+            color: #fff;
+            background: #2a4cc7;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            top: 7px;
+            right: 7px;
+            width: 30px;
+            height: 30px;
+            cursor: pointer;
+        }
+ 
+    .modal-title {
+        color: #0971c7;
+    }
+
+    .modal-content {
+        margin-bottom: 20px
+        }
+</style>
\ No newline at end of file
diff --git a/front/src/components/exams.vue b/front/src/components/exams.vue
new file mode 100644
index 0000000..e10dfad
--- /dev/null
+++ b/front/src/components/exams.vue
@@ -0,0 +1,104 @@
+<template>
+    <AdminHeader />
+   <div>
+    <div class="container m-3">
+        
+    <div class="rounded-card row">
+        <H1>Экзамены</H1>
+        <div style="min-width:max-content;" class="m-2">
+            <div class="row">
+                <button class="btn-success border border-transparent rounded shadow-sm " @click="showCreate">Добавить</button>
+            </div>
+        <table class="table table-hover table-bordered">
+          <tbody>
+            <tr>
+                <td>Номер</td>
+                <td>Название</td>
+                <td></td>
+            </tr>
+            <tr v-for="(row, index) in exams" :key="index" style="min-width:max-content;" >
+              <td @click="showUpd(row.id,row.title)">{{ index+1 }}</td>
+              <td @click="showUpd(row.id,row.title)">{{ row.title }}</td>
+              <td><button class="btn btn-outline-danger" @click="deleteAch(row.id)">Удалить</button></td>
+            </tr>
+          </tbody>
+        </table>
+       </div>
+    </div>
+    
+       </div>   
+   </div>
+   <examCreate ref="modalCreate"></examCreate>
+   <examUpd ref="modalUpdate"></examUpd>
+
+</template>
+
+<script scoped>
+import ExamSevice from '@/services/ExamSevice';
+import AdminHeader from '@/elemets/adminHeader.vue';
+import examUpd from './examUpd.vue';
+import examCreate from './examCreate.vue';
+export default{
+    name:"benefits",
+    data(){
+        return{
+            exams: [],
+        }
+    },
+    components: {
+    AdminHeader,
+    examCreate,
+    examUpd
+    },
+    beforeCreate(){
+        ExamSevice.getAll().then(response =>{
+            this.exams = response.data
+        })
+        
+    },
+    methods:{       
+        showUpd(id,title) {
+                this.$refs.modalUpdate.show = true;
+                this.$refs.modalUpdate.id = id
+                this.$refs.modalUpdate.title = title
+                
+            },
+            showCreate() {
+                this.$refs.modalCreate.show = true;
+                
+            },
+            deleteAch(id){
+                ExamSevice.delete(id).then(response =>{
+                    console.log(response.data)    
+                    ExamSevice.getAll().then(response =>{
+                        this.exams = response.data
+                    })
+                }).catch(e => {
+                    console.log(e.data)
+                })
+            }
+
+        
+    }
+}
+</script>
+<style scoped>
+.container
+{ 
+position:absolute ;
+min-width:calc(205vh);
+background-color: #6ec0d9e9 ;
+border: 5px solid #3f8ba2;
+padding:12px;
+align-items: center;
+border-radius:8px;
+}
+
+.rounded-card{
+  border: 5px solid #3f8ba2;
+  padding:6px;
+  margin:6px;
+  border-radius:8px;
+  align-items: center;
+}
+</style>
\ No newline at end of file