jichoi / lms_front star
구자현 구자현 2024-08-08
240808 구자현 교사 교재 CRUD
@3828f4ae87b056c3d327d659c7afad40cf70d498
client/views/pages/teacher/textbook.vue
--- client/views/pages/teacher/textbook.vue
+++ client/views/pages/teacher/textbook.vue
@@ -1,101 +1,166 @@
 <template>
     <div class="title-box flex justify-between mb40">
-        <p class="title">교재 관리</p>
-        <!-- <select name="" id="">
+        <p class="title">교재</p>
+        <select name="" id="">
             <option value="">A반</option>
-        </select> -->
-        </div>
-        <div class="content-t">
-            <div  class=" flex " style="gap: 50px;">
-                <div class="textbook">
-                    <div class="box " style="gap: 10px;" @click="goToPage('TextBookDetail')">
-                    </div>
-                    <div class="text ">
-                        <p class="title1" style="color: #fff;">A 교재</p>
-                        <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
-                            <button>수정</button><p>&#124;</p>
-                            <button @click="showConfirm('delete')">삭제</button>
-                        </div>
-                    </div>
+        </select>
+    </div>
+    <div class="content-t">
+        <div class="flex" style="gap: 2.5%;" :style="{flexWrap: 'wrap'}">
+            <div class="textbook" v-for="textbookItem in textbookList" :key="textbookItem.book_id" style="width: 22.5%; margin-bottom: 30px;">
+                <div class="box" style="gap: 10px;" @click="goToPage('TextBookDetail', textbookItem.book_id)">
                 </div>
-                
-                <div class="textbook-add">
-                        <button  @click="buttonSearch"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button>
-        
+                <div class="text">
+                    <p class="title1" style="color: #fff;">{{ textbookItem.book_nm }}</p>
+                    <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
+                        <button @click="editBook(textbookItem)">수정</button>
+                        <p>&#124;</p>
+                        <button @click="deleteBook(textbookItem.book_id)">삭제</button>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div v-show="searchOpen" class="popup-wrap">
-                <div class="popup-box ">
+
+            <div class="textbook-add" style="width: 22.5%; margin-bottom: 30px;">
+                <button @click="buttonSearch">
+                    <img src="../../../resources/img/btn32_98t_normal.png" alt="">
+                </button>
+            </div>
+
+            <div v-show="searchOpen" class="popup-wrap">
+                <div class="popup-box">
                     <div class="flex justify-between mb30">
                         <p class="popup-title">교재 이름</p>
                         <button type="button" class="popup-close-btn" @click="closeBtn">
                             <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
-
                         </button>
                     </div>
                     <div class="search-wrap mb30">
-                        <input type="text" class="data-wrap" placeholder="">
-                        <!-- <button type="button" title="교재 검색">
+                        <input type="text" class="data-wrap" v-model="newBookName" placeholder="교재 이름을 입력하세요">
+                        <button type="button" title="교재 검색" @click="insertBook">
                             <img src="../../../resources/img/look_t.png" alt="">
-                        </button> -->
+                        </button>
                     </div>
-                    <div class="flex justify-center ">
-                        <button type="button" title="글쓰기" class="new-btn mr10">
+                    <div class="flex justify-center">
+                        <button type="button" title="취소" class="new-btn mr10" @click="closeBtn">
                             취소
                         </button>
-                        <button type="button" title="글쓰기" class="new-btn">
-                            생성
+                        <button type="button" title="생성" class="new-btn" @click="editMode ? updateBook() : insertBook()">
+                            {{ editMode ? '수정' : '생성' }}
                         </button>
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 </template>
+
+
 
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, mdiWindowClose } from '@mdi/js';
+import { mdiWindowClose } from '@mdi/js';
+import axios from 'axios';
 
 export default {
-    data () {
+    data() {
         return {
             mdiWindowClose: mdiWindowClose,
             showModal: false,
             searchOpen: false,
+            textbookList: [],
+            newBookName: '',
+            editMode: false,
+            editBookId: null,
         }
     },
     methods: {
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        closeModal() {
-            this.showModal = false;
+        goToPage(page, book_id) {
+            this.$router.push({ name: page, query: { book_id }});
         },
         buttonSearch() {
             this.searchOpen = true;
         },
         closeBtn() {
             this.searchOpen = false;
-
+            this.editMode = false;
+            this.editBookId = null;
+            this.newBookName = '';
         },
-        showConfirm(type) {
-            let message = '';
-            if (type === 'delete') {
-                message = '삭제하시겠습니까?';
-            } else if (type === 'reset') {
-                message = '초기화하시겠습니까?';
-            } else if (type === 'save') {
-                message = '등록하시겠습니까?';
-            }
-
-            if (confirm(message)) {
-                this.goBack();
-            }
+        editBook(book) {
+            this.newBookName = book.book_nm;
+            this.editMode = true;
+            this.editBookId = book.book_id;
+            this.searchOpen = true;
         },
-
-    },
-    watch: {
-
+        bookList() {
+            axios({
+                url: "/book/findAll.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                }
+            })
+            .then(response => {
+                this.textbookList = response.data;
+                })
+            .catch(error => {
+                console.error('Error fetching books:', error);
+            });
+        },
+        insertBook() {
+            const newBook = {
+                book_nm: this.newBookName
+            };
+            axios.post('/book/insert.json', newBook)
+                .then(response => {
+                    this.bookList();
+                    this.closeBtn();
+                })
+                .catch(error => {
+                    console.error('Error creating book:', error);
+                });
+        },
+        updateBook() {
+            const updatedBook = {
+                book_id: this.editBookId,
+                book_nm: this.newBookName
+            };
+            axios({
+                url: "/book/update.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: updatedBook,
+            })
+            .then(response => {
+                this.bookList();
+                this.closeBtn();
+            })
+            .catch(error => {
+                 console.error('Error updating book:', error);
+            });
+        },
+        deleteBook(book_id) {
+            if (confirm('삭제하시겠습니까?')) {
+                axios({
+                    url: "/book/delete.json",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json; charset=UTF-8",
+                    },
+                    data: {
+                        book_id: book_id
+                    },
+                })
+                .then(response => {
+                    this.bookList();
+                })
+                .catch(error => {
+                    console.error('Error deleting book:', error);
+                });
+            }
+        }
     },
     computed: {
 
@@ -105,9 +170,22 @@
     },
     mounted() {
         console.log('Main2 mounted');
+        this.bookList();
     }
 }
 </script>
-<style scoped>
-.textbook{width: 300px;}
+
+<style>
+.content-t {
+    flex-wrap: wrap; 
+    height: 90%;
+    overflow-y: scroll;
+}
+.flex {
+    display: flex;
+    flex-wrap: wrap;
+}
+.textbook, .textbook-add {
+    margin-bottom: 30px;
+}
 </style>
(No newline at end of file)
Add a comment
List