Commit @f3fda4d62f26fd479d0c2c0e320969aa67985660

dajeong 2024-08-08

240808 정다정 교사 마이페이지 반 CRUD

@f3fda4d62f26fd479d0c2c0e320969aa67985660

e9d1963

f3fda4d

client/views/pages/teacher/Home.vue

--- client/views/pages/teacher/Home.vue

+++ client/views/pages/teacher/Home.vue


 <template>
     <div class="title-box flex justify-between mb40">
         <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="class">
-                <div class="box gd-col2" style="gap: 10px;" @click="goToPage('ClassDetail')">
+        <div class=" flex " style="gap: 50px;" :style="{flexWrap: 'wrap'}">
+            <div class="class" v-for="classItem in classesList" :key="classItem.sclsId">
+                <div class="box gd-col2" style="gap: 10px;" @click="goToPage('ClassDetail', classItem.sclsId)">
                     <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
                     <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
                     <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
                     <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
                 </div>
                 <div class="text flex justify-between mt20">
-                    <p class="title1">A반</p>
-                    <span class="member">20명</span>
+                    <p class="title1">{{ classItem.sclsNm }}</p>
+                    <span class="member">{{ classItem. studentCount}}</span>
                 </div>
                 <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
-                    <button @click="showConfirm('edit')">수정</button>
+                    <button @click="editModeModal(classItem.sclsId)">수정</button>
                     <p>&#124;</p>
-                    <button @click="showConfirm('delete')">삭제</button>
+                    <button @click="deleteClass(classItem.sclsId)">삭제</button>
                 </div>
             </div>
             <div class="textbook-add">
-                <button @click="buttonSearch"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button>
+                <button @click="addModeModal"><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">

                         </button>
                     </div>
                     <div class="search-wrap mb30">
-                        <input type="text" class="data-wrap" placeholder="">
+                        <input type="text" v-model="createClassName"  class="data-wrap" placeholder="">
                         <!-- <button type="button" >
                             <img src="../../../resources/img/look_t.png" alt="">
                         </button> -->
                     </div>
                     <div class="flex justify-center ">
-                        <button type="button" title="글쓰기" class="new-btn mr10">
+                        <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="isEditMode ? updateClass() : insertClass()">
+                            {{ isEditMode ? '수정' : '등록' }}
                         </button>
                     </div>
                 </div>

 </template>
 
 <script>
+import axios from 'axios';
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiMagnify, mdiWindowClose } from '@mdi/js';
 export default {

             mdiWindowClose: mdiWindowClose,
             showModal: false,
             searchOpen: false,
+
+            classesList : [], // 불러온 반 정보
+            user_id : '2', //유저 아이디 : 현재는 고정
+            createClassName : "", // 생성 또는 수정할 반 이름
+
+            isEditMode: false, // 추가 모드인지 수정 모드인지 구분하는 변수
+            current_editId : '', // 현재 수정할 반 id
         }
     },
     methods: {
-        goToPage(page) {
-            this.$router.push({ name: page });
+        goToPage(page, sclsId) {
+            //console.log(`sclsId : ${sclsId}`); // 쿼리 확인
+            this.$router.push({ name: page , query : {sclsId : sclsId}});
         },
         closeModal() {
             this.showModal = false;
         },
-        buttonSearch() {
+        editModeModal(sclsId) {
             this.searchOpen = true;
+            this.isEditMode = true; // 수정 모드로 설정
+            this.current_editId = sclsId
+        },
+        addModeModal() {
+            this.searchOpen = true;
+            this.isEditMode = false; // 추가 모드로 설정
         },
         closeBtn() {
             this.searchOpen = false;
+            this.createClassName = ""; // 팝업 닫을 때 반 이름 초기화
 
         },
-        showConfirm(type) {
+        showConfirm(type, callback) {
             let message = '';
             if (type === 'delete') {
                 message = '삭제하시겠습니까?';

                 message = '초기화하시겠습니까?';
             } else if (type === 'save') {
                 message = '등록하시겠습니까?';
+            } else if (type === 'edit'){
+                message = '수정하시겠습니까?';
             }
+
 
             if (confirm(message)) {
-                this.goBack();
+                if (callback) callback(); // 콜백 함수 호출
             }
         },
-
+        // 조회
+        selectClass() {
+            axios({
+                url: "/classes/selectClass.json",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                    userId: this.user_id
+                },
+            })
+            .then((res) => {
+                if (res.data.status === "success") {
+                    console.log("classesList - response(조회) : ", res.data.data);
+                    this.classesList = res.data.data;
+                } else {
+                    console.log("조회에 실패했습니다: ", res.data);
+                    alert("조회에 실패했습니다.");
+                }
+            })
+            .catch((err) => {
+                console.log("classesList - error(조회) : ", err);
+                alert("조회에 오류가 발생했습니다.");
+            });
+        },
+        // 추가
+        insertClass() {
+            if(this.createClassName.trim() === ""){
+                alert("반 이름을 입력해주세요");
+            }
+            else{
+                this.showConfirm('save', () => {
+                axios({
+                    url: "/classes/insertClass.json",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json; charset=UTF-8",
+                    },
+                    data: {
+                        userId: this.user_id,
+                        sclsNm: this.createClassName
+                    },
+                })
+                    .then((res) => {
+                        if (res.data.status === "success") {
+                            console.log("classesList - response(추가) : ", res.data.data);
+                            this.selectClass();
+                            this.createClassName = ""; // 반 이름 초기화
+                            this.closeBtn(); // 생성 모달 닫기
+                        } else {
+                            console.log("추가에 실패했습니다: ", res.data);
+                            alert("추가에 실패했습니다.");
+                        }
+                    })
+                    .catch((err) => {
+                        console.log("classesList - error(추가) : ", err);
+                        alert("추가에 오류가 발생했습니다.");
+                    });
+                });
+            }
+            
+        },
+        // 삭제
+        deleteClass(sclsId) {
+            this.showConfirm('delete', () => {
+                axios({
+                    url: "/classes/deleteClass.json",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json; charset=UTF-8",
+                    },
+                    data: {
+                        sclsId: sclsId
+                    },
+                })
+                .then((res) => {
+                    if (res.data.status === "success") {
+                        console.log("classesList - response(삭제) : ", res.data.data);
+                        this.selectClass();
+                    } else {
+                        console.log("삭제에 실패했습니다: ", res.data);
+                        alert("삭제에 실패했습니다.");
+                    }
+                })
+                .catch((err) => {
+                    console.log("classesList - error(삭제) : ", err);
+                    alert("삭제에 오류가 발생했습니다.");
+                });
+            });
+        },
+        // 수정
+        updateClass() {
+            if(this.createClassName.trim() === ""){
+                alert("반 이름을 입력해주세요");
+            }
+            else{
+                this.showConfirm('edit', () => {
+                    axios({
+                        url: "/classes/updateClass.json",
+                        method: "post",
+                        headers: {
+                            "Content-Type": "application/json; charset=UTF-8",
+                        },
+                        data: {
+                            sclsId: this.current_editId,
+                            sclsNm: this.createClassName
+                        },
+                    })
+                    .then((res) => {
+                        if (res.data.status === "success") {
+                            console.log("classesList - response(수정) : ", res.data.data);
+                            this.selectClass();
+                            this.createClassName = ""; // 반 이름 초기화
+                            this.current_editId = ""; // 반 Id 초기화
+                            this.closeBtn(); // 팝업 닫기
+                        } else {
+                            console.log("수정에 실패했습니다: ", res.data);
+                            alert("수정에 실패했습니다.");
+                        }
+                    })
+                    .catch((err) => {
+                        console.log("classesList - error(수정) : ", err);
+                        alert("수정에 오류가 발생했습니다.");
+                    });
+                });
+            }
+        }
     },
     watch: {
 

     },
     mounted() {
         console.log('Main2 mounted');
+        this.selectClass();
     }
 }
-</script>
+</script>
+
+<style>
+.content-t {
+    flex-wrap: wrap; 
+    height: 90%;
+    overflow-y: scroll;
+}
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,33 +1,31 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3	3	<p class="title">홈</p>
4		- <select name="" id="">
5		- <option value="">A반</option>
6		- </select>
7	4	</div>
8	5	<div class="content-t">
9		- <div class=" flex " style="gap: 50px;">
10		- <div class="class">
11		- <div class="box gd-col2" style="gap: 10px;" @click="goToPage('ClassDetail')">
	6	+ <div class=" flex " style="gap: 50px;" :style="{flexWrap: 'wrap'}">
	7	+ <div class="class" v-for="classItem in classesList" :key="classItem.sclsId">
	8	+ <div class="box gd-col2" style="gap: 10px;" @click="goToPage('ClassDetail', classItem.sclsId)">
12	9	<div><img src="../../../resources/img/img176_82t.png" alt=""></div>
13	10	<div><img src="../../../resources/img/img176_82t.png" alt=""></div>
14	11	<div><img src="../../../resources/img/img176_82t.png" alt=""></div>
15	12	<div><img src="../../../resources/img/img176_82t.png" alt=""></div>
16	13	</div>
17	14	<div class="text flex justify-between mt20">
18		- <p class="title1">A반</p>
19		- <span class="member">20명</span>
	15	+ <p class="title1">{{ classItem.sclsNm }}</p>
	16	+ <span class="member">{{ classItem. studentCount}}</span>
20	17	</div>
21	18	<div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
22		- <button @click="showConfirm('edit')">수정</button>
	19	+ <button @click="editModeModal(classItem.sclsId)">수정</button>
23	20	<p>\|</p>
24		- <button @click="showConfirm('delete')">삭제</button>
	21	+ <button @click="deleteClass(classItem.sclsId)">삭제</button>
25	22	</div>
26	23	</div>
27	24	<div class="textbook-add">
28		- <button @click="buttonSearch"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button>
	25	+ <button @click="addModeModal"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button>
29	26
30	27	</div>
	28	+ <!-- 팝업창 -->
31	29	<div v-show="searchOpen" class="popup-wrap">
32	30	<div class="popup-box ">
33	31	<div class="flex justify-between mb30">
...	...	@@ -38,17 +36,17 @@
38	36	</button>
39	37	</div>
40	38	<div class="search-wrap mb30">
41		- <input type="text" class="data-wrap" placeholder="">
	39	+ <input type="text" v-model="createClassName" class="data-wrap" placeholder="">
42	40	<!-- <button type="button" >
43	41	<img src="../../../resources/img/look_t.png" alt="">
44	42	</button> -->
45	43	</div>
46	44	<div class="flex justify-center ">
47		- <button type="button" title="글쓰기" class="new-btn mr10">
	45	+ <button type="button" title="글쓰기" class="new-btn mr10" @click="closeBtn">
48	46	취소
49	47	</button>
50		- <button type="button" title="글쓰기" class="new-btn">
51		- 생성
	48	+ <button type="button" title="등록" class="new-btn" @click="isEditMode ? updateClass() : insertClass()">
	49	+ {{ isEditMode ? '수정' : '등록' }}
52	50	</button>
53	51	</div>
54	52	</div>
...	...	@@ -58,6 +56,7 @@
58	56	</template>
59	57
60	58	<script>
	59	+import axios from 'axios';
61	60	import SvgIcon from '@jamescoyle/vue-icon';
62	61	import { mdiMagnify, mdiWindowClose } from '@mdi/js';
63	62	export default {
...	...	@@ -66,23 +65,38 @@
66	65	mdiWindowClose: mdiWindowClose,
67	66	showModal: false,
68	67	searchOpen: false,
	68	+
	69	+ classesList : [], // 불러온 반 정보
	70	+ user_id : '2', //유저 아이디 : 현재는 고정
	71	+ createClassName : "", // 생성 또는 수정할 반 이름
	72	+
	73	+ isEditMode: false, // 추가 모드인지 수정 모드인지 구분하는 변수
	74	+ current_editId : '', // 현재 수정할 반 id
69	75	}
70	76	},
71	77	methods: {
72		- goToPage(page) {
73		- this.$router.push({ name: page });
	78	+ goToPage(page, sclsId) {
	79	+ //console.log(`sclsId : ${sclsId}`); // 쿼리 확인
	80	+ this.$router.push({ name: page , query : {sclsId : sclsId}});
74	81	},
75	82	closeModal() {
76	83	this.showModal = false;
77	84	},
78		- buttonSearch() {
	85	+ editModeModal(sclsId) {
79	86	this.searchOpen = true;
	87	+ this.isEditMode = true; // 수정 모드로 설정
	88	+ this.current_editId = sclsId
	89	+ },
	90	+ addModeModal() {
	91	+ this.searchOpen = true;
	92	+ this.isEditMode = false; // 추가 모드로 설정
80	93	},
81	94	closeBtn() {
82	95	this.searchOpen = false;
	96	+ this.createClassName = ""; // 팝업 닫을 때 반 이름 초기화
83	97
84	98	},
85		- showConfirm(type) {
	99	+ showConfirm(type, callback) {
86	100	let message = '';
87	101	if (type === 'delete') {
88	102	message = '삭제하시겠습니까?';
...	...	@@ -90,13 +104,143 @@
90	104	message = '초기화하시겠습니까?';
91	105	} else if (type === 'save') {
92	106	message = '등록하시겠습니까?';
	107	+ } else if (type === 'edit'){
	108	+ message = '수정하시겠습니까?';
93	109	}
	110	+
94	111
95	112	if (confirm(message)) {
96		- this.goBack();
	113	+ if (callback) callback(); // 콜백 함수 호출
97	114	}
98	115	},
99		-
	116	+ // 조회
	117	+ selectClass() {
	118	+ axios({
	119	+ url: "/classes/selectClass.json",
	120	+ method: "post",
	121	+ headers: {
	122	+ "Content-Type": "application/json; charset=UTF-8",
	123	+ },
	124	+ data: {
	125	+ userId: this.user_id
	126	+ },
	127	+ })
	128	+ .then((res) => {
	129	+ if (res.data.status === "success") {
	130	+ console.log("classesList - response(조회) : ", res.data.data);
	131	+ this.classesList = res.data.data;
	132	+ } else {
	133	+ console.log("조회에 실패했습니다: ", res.data);
	134	+ alert("조회에 실패했습니다.");
	135	+ }
	136	+ })
	137	+ .catch((err) => {
	138	+ console.log("classesList - error(조회) : ", err);
	139	+ alert("조회에 오류가 발생했습니다.");
	140	+ });
	141	+ },
	142	+ // 추가
	143	+ insertClass() {
	144	+ if(this.createClassName.trim() === ""){
	145	+ alert("반 이름을 입력해주세요");
	146	+ }
	147	+ else{
	148	+ this.showConfirm('save', () => {
	149	+ axios({
	150	+ url: "/classes/insertClass.json",
	151	+ method: "post",
	152	+ headers: {
	153	+ "Content-Type": "application/json; charset=UTF-8",
	154	+ },
	155	+ data: {
	156	+ userId: this.user_id,
	157	+ sclsNm: this.createClassName
	158	+ },
	159	+ })
	160	+ .then((res) => {
	161	+ if (res.data.status === "success") {
	162	+ console.log("classesList - response(추가) : ", res.data.data);
	163	+ this.selectClass();
	164	+ this.createClassName = ""; // 반 이름 초기화
	165	+ this.closeBtn(); // 생성 모달 닫기
	166	+ } else {
	167	+ console.log("추가에 실패했습니다: ", res.data);
	168	+ alert("추가에 실패했습니다.");
	169	+ }
	170	+ })
	171	+ .catch((err) => {
	172	+ console.log("classesList - error(추가) : ", err);
	173	+ alert("추가에 오류가 발생했습니다.");
	174	+ });
	175	+ });
	176	+ }
	177	+
	178	+ },
	179	+ // 삭제
	180	+ deleteClass(sclsId) {
	181	+ this.showConfirm('delete', () => {
	182	+ axios({
	183	+ url: "/classes/deleteClass.json",
	184	+ method: "post",
	185	+ headers: {
	186	+ "Content-Type": "application/json; charset=UTF-8",
	187	+ },
	188	+ data: {
	189	+ sclsId: sclsId
	190	+ },
	191	+ })
	192	+ .then((res) => {
	193	+ if (res.data.status === "success") {
	194	+ console.log("classesList - response(삭제) : ", res.data.data);
	195	+ this.selectClass();
	196	+ } else {
	197	+ console.log("삭제에 실패했습니다: ", res.data);
	198	+ alert("삭제에 실패했습니다.");
	199	+ }
	200	+ })
	201	+ .catch((err) => {
	202	+ console.log("classesList - error(삭제) : ", err);
	203	+ alert("삭제에 오류가 발생했습니다.");
	204	+ });
	205	+ });
	206	+ },
	207	+ // 수정
	208	+ updateClass() {
	209	+ if(this.createClassName.trim() === ""){
	210	+ alert("반 이름을 입력해주세요");
	211	+ }
	212	+ else{
	213	+ this.showConfirm('edit', () => {
	214	+ axios({
	215	+ url: "/classes/updateClass.json",
	216	+ method: "post",
	217	+ headers: {
	218	+ "Content-Type": "application/json; charset=UTF-8",
	219	+ },
	220	+ data: {
	221	+ sclsId: this.current_editId,
	222	+ sclsNm: this.createClassName
	223	+ },
	224	+ })
	225	+ .then((res) => {
	226	+ if (res.data.status === "success") {
	227	+ console.log("classesList - response(수정) : ", res.data.data);
	228	+ this.selectClass();
	229	+ this.createClassName = ""; // 반 이름 초기화
	230	+ this.current_editId = ""; // 반 Id 초기화
	231	+ this.closeBtn(); // 팝업 닫기
	232	+ } else {
	233	+ console.log("수정에 실패했습니다: ", res.data);
	234	+ alert("수정에 실패했습니다.");
	235	+ }
	236	+ })
	237	+ .catch((err) => {
	238	+ console.log("classesList - error(수정) : ", err);
	239	+ alert("수정에 오류가 발생했습니다.");
	240	+ });
	241	+ });
	242	+ }
	243	+ }
100	244	},
101	245	watch: {
102	246
...	...	@@ -109,6 +253,15 @@
109	253	},
110	254	mounted() {
111	255	console.log('Main2 mounted');
	256	+ this.selectClass();
112	257	}
113	258	}
114		-</script> (No newline at end of file)
	259	+</script>
	260	+
	261	+<style>
	262	+.content-t {
	263	+ flex-wrap: wrap;
	264	+ height: 90%;
	265	+ overflow-y: scroll;
	266	+}
	267	+</style> (No newline at end of file)

Delete comment