Commit @d4856fa7cb4c0faae4485c6624383a0c87e979b9

woals 2024-08-12

240812 권민수 단어장 검색 기능 추가 조회 메시지 추가

@d4856fa7cb4c0faae4485c6624383a0c87e979b9

b9cd63e

d4856fa

client/views/pages/teacher/VocaList.vue

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

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


         </button>
     </div>
     <div class="search-wrap flex justify-between mb20 align-center">
-        <div class="title2 gray flex"><div class="black">[{{ selectedUnitName }}]</div>단원 전체 목록</div>
+        <div class="title2 gray flex">{{ titleMessage }}</div>
         <div>
-            <select name="" id="" class="mr10 data-wrap">
-                <option value="">지문</option>
-                <option value="">단어</option>
+            <select v-model="searchType" class="mr10 data-wrap">
+                <option value="text">지문</option>
+                <option value="word">단어</option>
             </select>
-            <input  type="text" placeholder="검색하세요.">
-            <button type="button" title="단어장 검색">
+            <input v-model="searchQuery" type="text" placeholder="검색하세요.">
+            <button type="button" title="단어장 검색" @click="searchWordBooks">
                 <img src="../../../resources/img/look_t.png" alt="">
             </button>
         </div>

             selectedBookId: null, // 선택된 책 ID 저장 변수
             selectedUnitId: null, // 선택된 단원 ID 저장 변수
             selectedUnitName: '', // 선택된 단원의 이름 저장 변수
+            titleMessage: '', // 타이틀 메시지 변수
             dataList: [],
             currentPage: 0,
             itemsPerPage: 2,
-            totalPosts: 0
+            totalPosts: 0,
+            searchType: 'text', // 검색 종류를 저장할 변수
+            searchQuery: '' // 검색어를 저장할 변수
         }
     },
     methods: {

             this.selectedUnitId = unitId;
             const selectedUnit = this.units.find(unit => unit.unitId === unitId);
             this.selectedUnitName = selectedUnit ? selectedUnit.unitName : '';
+            this.searchQuery = ''; 
+            this.titleMessage = `[${this.selectedUnitName}] 단원 전체 목록`;
             this.dataSelectList(); // 단어장 목록 조회
         },
 

         goToViewPage(page) {
             this.$router.push({ name: page });
         },
+
+        // 검색 메서드 추가
+        searchWordBooks() {
+            const vm = this;
+            let url = '';
+            let data = {};
+
+            if (this.searchType === 'text') {
+                // 지문으로 검색
+                url = '/wordbook/findByTextTitle.json';
+                data = {
+                    unitId: vm.selectedUnitId,
+                    textTitle: vm.searchQuery,
+                    page: vm.currentPage + 1,
+                    pageSize: vm.itemsPerPage
+                };
+                this.titleMessage = `[${vm.searchQuery}]의 지문 검색 결과`;
+            } else if (this.searchType === 'word') {
+                // 단어로 검색
+                url = '/wordbook/findByWord.json';
+                data = {
+                    unitId: vm.selectedUnitId,
+                    word: vm.searchQuery,
+                    page: vm.currentPage + 1,
+                    pageSize: vm.itemsPerPage
+                };
+                this.titleMessage = `[${vm.searchQuery}]의 단어 검색 결과`;
+            }
+
+            axios.post(url, data)
+            .then(function (response) {
+                console.log("searchWordBooks - response: ", response.data);
+                const wordBooks = response.data.wordBooks;
+                vm.totalPosts = response.data.totalWordBooks;
+                
+                // 지문 제목 및 단어 목록 가져오기
+                const fetchDataPromises = wordBooks.map(wordBook => {
+                    const textTitlePromise = axios.post("/text/selectOneText.json", {
+                        textId: wordBook.textId
+                    }).then(textResponse => {
+                        wordBook.textTtl = textResponse.data[0].text_ttl;
+                    }).catch(error => {
+                        console.error(`${wordBook.textId}으로 지문 제목 가져오기 실패: `, error);
+                        wordBook.textTtl = '제목값없음'; // 오류 시 기본값 설정
+                    });
+
+                    const wordsPromise = axios.post("/word/getWordsByBookId.json", {
+                        wdBookId: wordBook.wdBookId
+                    }).then(wordsResponse => {
+                        const words = wordsResponse.data.map(word => word.wdNm);
+                        wordBook.wordsPreview = vm.generateWordsPreview(words);
+                    }).catch(error => {
+                        console.error(`${wordBook.wdBookId}으로 단어 목록 가져오기 실패: `, error);
+                        wordBook.wordsPreview = '단어값없음'; // 오류 시 기본값 설정
+                    });
+
+                    return Promise.all([textTitlePromise, wordsPromise]);
+                });
+
+                // 모든 데이터 가져오기 작업이 완료되면 dataList에 데이터 설정
+                Promise.all(fetchDataPromises).then(() => {
+                    vm.dataList = wordBooks;
+                });
+            })
+            .catch(function (error) {
+                console.log("searchWordBooks - error: ", error);
+                alert("단어장 검색에 오류가 발생했습니다.");
+            });
+        },
     },
     watch: {
 
     },
     computed: {
+
         totalPages() {
             return Math.ceil(this.totalPosts / this.itemsPerPage);
         },
+
         paginationButtons() {
             let start = Math.max(0, this.currentPage - 2);
             let end = Math.min(start + 5, this.totalPages);

 
             return Array.from({ length: end - start }, (_, i) => start + i + 1);
         },
+
         startIndex() {
             return this.currentPage * this.itemsPerPage;
         }
+
     },
     components:{
         SvgIcon

Add a comment

Open 0
Closed 0

List

...	...	@@ -14,14 +14,14 @@
14	14	</button>
15	15	</div>
16	16	<div class="search-wrap flex justify-between mb20 align-center">
17		- <div class="title2 gray flex"><div class="black">[{{ selectedUnitName }}]</div>단원 전체 목록</div>
	17	+ <div class="title2 gray flex">{{ titleMessage }}</div>
18	18	<div>
19		- <select name="" id="" class="mr10 data-wrap">
20		- <option value="">지문</option>
21		- <option value="">단어</option>
	19	+ <select v-model="searchType" class="mr10 data-wrap">
	20	+ <option value="text">지문</option>
	21	+ <option value="word">단어</option>
22	22	</select>
23		- <input type="text" placeholder="검색하세요.">
24		- <button type="button" title="단어장 검색">
	23	+ <input v-model="searchQuery" type="text" placeholder="검색하세요.">
	24	+ <button type="button" title="단어장 검색" @click="searchWordBooks">
25	25	<img src="../../../resources/img/look_t.png" alt="">
26	26	</button>
27	27	</div>
...	...	@@ -77,10 +77,13 @@
77	77	selectedBookId: null, // 선택된 책 ID 저장 변수
78	78	selectedUnitId: null, // 선택된 단원 ID 저장 변수
79	79	selectedUnitName: '', // 선택된 단원의 이름 저장 변수
	80	+ titleMessage: '', // 타이틀 메시지 변수
80	81	dataList: [],
81	82	currentPage: 0,
82	83	itemsPerPage: 2,
83		- totalPosts: 0
	84	+ totalPosts: 0,
	85	+ searchType: 'text', // 검색 종류를 저장할 변수
	86	+ searchQuery: '' // 검색어를 저장할 변수
84	87	}
85	88	},
86	89	methods: {
...	...	@@ -119,6 +122,8 @@
119	122	this.selectedUnitId = unitId;
120	123	const selectedUnit = this.units.find(unit => unit.unitId === unitId);
121	124	this.selectedUnitName = selectedUnit ? selectedUnit.unitName : '';
	125	+ this.searchQuery = '';
	126	+ this.titleMessage = `[${this.selectedUnitName}] 단원 전체 목록`;
122	127	this.dataSelectList(); // 단어장 목록 조회
123	128	},
124	129
...	...	@@ -207,14 +212,85 @@
207	212	goToViewPage(page) {
208	213	this.$router.push({ name: page });
209	214	},
	215	+
	216	+ // 검색 메서드 추가
	217	+ searchWordBooks() {
	218	+ const vm = this;
	219	+ let url = '';
	220	+ let data = {};
	221	+
	222	+ if (this.searchType === 'text') {
	223	+ // 지문으로 검색
	224	+ url = '/wordbook/findByTextTitle.json';
	225	+ data = {
	226	+ unitId: vm.selectedUnitId,
	227	+ textTitle: vm.searchQuery,
	228	+ page: vm.currentPage + 1,
	229	+ pageSize: vm.itemsPerPage
	230	+ };
	231	+ this.titleMessage = `[${vm.searchQuery}]의 지문 검색 결과`;
	232	+ } else if (this.searchType === 'word') {
	233	+ // 단어로 검색
	234	+ url = '/wordbook/findByWord.json';
	235	+ data = {
	236	+ unitId: vm.selectedUnitId,
	237	+ word: vm.searchQuery,
	238	+ page: vm.currentPage + 1,
	239	+ pageSize: vm.itemsPerPage
	240	+ };
	241	+ this.titleMessage = `[${vm.searchQuery}]의 단어 검색 결과`;
	242	+ }
	243	+
	244	+ axios.post(url, data)
	245	+ .then(function (response) {
	246	+ console.log("searchWordBooks - response: ", response.data);
	247	+ const wordBooks = response.data.wordBooks;
	248	+ vm.totalPosts = response.data.totalWordBooks;
	249	+
	250	+ // 지문 제목 및 단어 목록 가져오기
	251	+ const fetchDataPromises = wordBooks.map(wordBook => {
	252	+ const textTitlePromise = axios.post("/text/selectOneText.json", {
	253	+ textId: wordBook.textId
	254	+ }).then(textResponse => {
	255	+ wordBook.textTtl = textResponse.data[0].text_ttl;
	256	+ }).catch(error => {
	257	+ console.error(`${wordBook.textId}으로 지문 제목 가져오기 실패: `, error);
	258	+ wordBook.textTtl = '제목값없음'; // 오류 시 기본값 설정
	259	+ });
	260	+
	261	+ const wordsPromise = axios.post("/word/getWordsByBookId.json", {
	262	+ wdBookId: wordBook.wdBookId
	263	+ }).then(wordsResponse => {
	264	+ const words = wordsResponse.data.map(word => word.wdNm);
	265	+ wordBook.wordsPreview = vm.generateWordsPreview(words);
	266	+ }).catch(error => {
	267	+ console.error(`${wordBook.wdBookId}으로 단어 목록 가져오기 실패: `, error);
	268	+ wordBook.wordsPreview = '단어값없음'; // 오류 시 기본값 설정
	269	+ });
	270	+
	271	+ return Promise.all([textTitlePromise, wordsPromise]);
	272	+ });
	273	+
	274	+ // 모든 데이터 가져오기 작업이 완료되면 dataList에 데이터 설정
	275	+ Promise.all(fetchDataPromises).then(() => {
	276	+ vm.dataList = wordBooks;
	277	+ });
	278	+ })
	279	+ .catch(function (error) {
	280	+ console.log("searchWordBooks - error: ", error);
	281	+ alert("단어장 검색에 오류가 발생했습니다.");
	282	+ });
	283	+ },
210	284	},
211	285	watch: {
212	286
213	287	},
214	288	computed: {
	289	+
215	290	totalPages() {
216	291	return Math.ceil(this.totalPosts / this.itemsPerPage);
217	292	},
	293	+
218	294	paginationButtons() {
219	295	let start = Math.max(0, this.currentPage - 2);
220	296	let end = Math.min(start + 5, this.totalPages);
...	...	@@ -225,9 +301,11 @@
225	301
226	302	return Array.from({ length: end - start }, (_, i) => start + i + 1);
227	303	},
	304	+
228	305	startIndex() {
229	306	return this.currentPage * this.itemsPerPage;
230	307	}
	308	+
231	309	},
232	310	components:{
233	311	SvgIcon

Delete comment