File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="title-box flex justify-between mb40">
<label for="" class="title2 ">로드맵 등록</label>
<select name="" id="" v-model="selectedBook" @change="fetchUnits">
<option value="" disabled selected>교재를 선택하세요</option>
<option v-for="book in books" :key="book.book_id" :value="book.book_id">
{{ book.book_nm }}
</option>
</select>
</div>
<div class="board-wrap" style="height: calc(100% - 13rem);">
<div class="content-t">
<label for="" class="title2">단원</label>
<div class="unit-pagination flex mt10 mb20" style="gap: 10px;">
<button v-for="(unit, index) in units" :key="index"
:class="{ 'selected-btn': selectedUnit === unit.unitId }" @click="selectUnit(unit.unitId)">
{{ unit.unitName }}
</button>
</div>
<hr>
<div class="search-wrap flex mb20 mt30">
<!--
<select v-model="selectedSearchOption" class="mr10 data-wrap">
<option value="bbsTtl">제목</option>
<option value="bbsCnt">내용</option>
<option value="userNm">작성자</option>
<option value="bbsCls">카테고리</option>
</select>
<input v-model="searchKeyword" type="text" placeholder="검색하세요." @keyup.enter="boardDataSearch" />
<button type="button" @click="boardDataSearch()" title="게시글 검색">
<img src="../../../resources/img/look_t.png" alt="" />
</button>
-->
</div>
<div class="flex justify-between align-center mypage mt10">
<div class="textbook big book-gray">
<div class="text ">
<p class="title1">학습 로드맵</p>
</div>
<div class="box flex-column" style="gap: 10px;">
<!-- 지문 -->
<div class="textbook book-red">
<div class="text ">
<p class="title1" style="color: #fff;">지문 1</p>
</div>
<div class="box">
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('0')">
지문 추가
</button>
<table>
<thead>
<tr>
<td>지문</td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(text, index) in RoadMap[0]" :key="text.textId">
<td>
<P class="title2 mt10">{{ text.textTtl }}</P>
</td>
<td><button type="button" title="글쓰기" class="new-btn"
@click="deleteRoadMap('0', text.textId)">
삭제
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 단어 -->
<div class="textbook ">
<div class="text ">
<p class="title1" style="color: #fff;">단어장 1</p>
</div>
<div class="box">
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('1')">
단어장 추가
</button>
<table>
<thead>
<tr>
<td>단어장</td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(wordBook, index) in RoadMap[1]" :key="wordBook.wdBookId">
<td>
<P class="title2 mt10">{{ wordBook.textTtl }}</P>
</td>
<td><button type="button" title="글쓰기" class="new-btn"
@click="deleteRoadMap('1', wordBook.wdBookId)">
삭제
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 문제 -->
<div class="textbook book-blue">
<div class="text ">
<p class="title1" style="color: #fff;">문제 1</p>
</div>
<div class="box">
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('2')">
문제 추가
</button>
<table>
<thead>
<tr>
<td>문제</td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(prblm, index) in RoadMap[2]" :key="prblm.prblmId">
<td>
<P class="title2 mt10">{{ prblm.prblmExpln }}</P>
</td>
<td><button type="button" title="글쓰기" class="new-btn"
@click="deleteRoadMap('2', prblm.prblmId)">
삭제
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="textbook book-blue">
<div class="text ">
<p class="title1" style="color: #fff;">문제 2</p>
</div>
<div class="box">
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('3')">
문제 추가
</button>
<table>
<thead>
<tr>
<td>문제</td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(prblm, index) in RoadMap[3]" :key="prblm.prblmId">
<td>
<P class="title2 mt10">{{ prblm.prblmExpln }}</P>
</td>
<td><button type="button" title="글쓰기" class="new-btn"
@click="deleteRoadMap('3', prblm.prblmId)">
삭제
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="textbook book-red">
<div class="text ">
<p class="title1" style="color: #fff;">지문 2</p>
</div>
<div class="box">
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('4')">
지문 추가
</button>
<table>
<thead>
<tr>
<td>지문</td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(text, index) in RoadMap[4]" :key="text.textId">
<td>
<P class="title2 mt10">{{ text.textTtl }}</P>
</td>
<td><button type="button" title="글쓰기" class="new-btn"
@click="deleteRoadMap('4', text.textId)">
삭제
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="textbook ">
<div class="text ">
<p class="title1" style="color: #fff;">단어장 2</p>
</div>
<div class="box">
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('5')">
단어장 추가
</button>
<table>
<thead>
<tr>
<td>지문</td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(wordBook, index) in RoadMap[5]" :key="wordBook.wdBookId">
<td>
<P class="title2 mt10">{{ wordBook.textTtl }}</P>
</td>
<td><button type="button" title="글쓰기" class="new-btn"
@click="deleteRoadMap('5', wordBook.wdBookId)">
삭제
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="textbook book-blue">
<div class="text ">
<p class="title1" style="color: #fff;">문제 3</p>
</div>
<div class="box">
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('6')">
문제 추가
</button>
<table>
<thead>
<tr>
<td>문제</td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(prblm, index) in RoadMap[6]" :key="prblm.prblmId">
<td>
<P class="title2 mt10">{{ prblm.prblmExpln }}</P>
</td>
<td><button type="button" title="글쓰기" class="new-btn"
@click="deleteRoadMap('6', prblm.prblmId)">
삭제
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 평가 -->
<div class="textbook book-navy">
<div class="text ">
<p class="title1" style="color: #fff;">중간 평가</p>
</div>
<div class="box">
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('7')">
중간평가 추가
</button>
<table>
<thead>
<tr>
<td>중간 평가 문항 갯수</td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(evaluation, index) in RoadMap[7]" :key="evaluation.evalId">
<td>
<P class="title2 mt10">{{ evaluation.problemCount }}</P>
</td>
<td><button type="button" title="글쓰기" class="new-btn"
@click="deleteRoadMap('7', evaluation.evalId)">
삭제
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="textbook book-red">
<div class="text ">
<p class="title1" style="color: #fff;">지문 3</p>
</div>
<div class="box">
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('8')">
지문 추가
</button>
<table>
<thead>
<tr>
<td>지문</td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(text, index) in RoadMap[8]" :key="text.textId">
<td>
<P class="title2 mt10">{{ text.textTtl }}</P>
</td>
<td><button type="button" title="글쓰기" class="new-btn"
@click="deleteRoadMap('8', text.textId)">
삭제
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="textbook ">
<div class="text ">
<p class="title1" style="color: #fff;">단어장 3</p>
</div>
<div class="box">
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('9')">
단어장 추가
</button>
<table>
<thead>
<tr>
<td>지문</td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(wordBook, index) in RoadMap[9]" :key="wordBook.wdBookId">
<td>
<P class="title2 mt10">{{ wordBook.textTtl }}</P>
</td>
<td><button type="button" title="글쓰기" class="new-btn"
@click="deleteRoadMap('9', wordBook.wdBookId)">
삭제
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="textbook book-navy">
<div class="text ">
<p class="title1" style="color: #fff;">최종 평가</p>
</div>
<div class="box">
<button type="button" title="글쓰기" class="new-btn ml10" @click="buttonSearch('10')">
최종평가 추가
</button>
<table>
<thead>
<tr>
<td>최종 평가 문항 갯수</td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(evaluation, index) in RoadMap[10]" :key="evaluation.evalId">
<td>
<P class="title2 mt10">{{ evaluation.problemCount }}</P>
</td>
<td><button type="button" title="글쓰기" class="new-btn"
@click="deleteRoadMap('10', evaluation.evalId)">
삭제
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--
<div class="textbook big book-gray">
<div class="text ">
<p class="title1">로드맵</p>
</div>
<div class="box flex-column" style="gap: 10px;">
<div class="dropbox"><P class="title2">여기로 드래그 하세요</P></div>
<div class="text-ct"><svg-icon type="mdi" :path="mdilArrowDown" style="width: 40px; height: 40px; color: #8C8E92;"></svg-icon></div>
<div class="dropbox"><P class="title2">여기로 드래그 하세요</P></div>
<div class="text-ct"><svg-icon type="mdi" :path="mdilArrowDown" style="width: 40px; height: 40px; color: #8C8E92;"></svg-icon></div>
<div class="dropbox"><P class="title2">여기로 드래그 하세요</P></div>
</div>
</div>
-->
</div>
</div>
<div class="flex justify-end mt30" style="gap: 10px;">
<!-- <button type="button" title="" class="new-btn" @click="showConfirm('delete')">
추가
</button> -->
<button type="button" title="" class="new-btn" @click="goToPage('TextBookDetail')">
취소
</button>
<button type="button" title="" class="new-btn" @click="postRoadMaps">
등록
</button>
</div>
</div>
<!--지문 등록 팝업-->
<div v-show="searchTextOpen" 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="" v-model="searchKeyword">
<button type="button" @click="fetchText">
<img src="../../../resources/img/look_t.png" alt="">
</button>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<td></td>
<td>No.</td>
<td>제목</td>
<td>내용</td>
<td>등록일</td>
</tr>
</thead>
<tbody>
<tr v-for="(post, index) in posts" :key="index" class="post">
<td><input type="checkbox" :checked="post.check"
@change="selectText(post)"></td>
<td>{{ index + 1 }}</td>
<td>{{ post.textTtl.slice(0, 20) }}{{ post.textTtl.length > 20 ? '...' : '' }}</td>
<td>{{ post.textCnt.slice(0, 20) }}{{ post.textCnt.length > 20 ? '...' : '' }}</td>
<td>{{ post.regDt }}</td>
</tr>
</tbody>
</table>
<article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
<button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
<img src="../../../resources/img/btn27_90t_normal.png" alt="Previous">
</button>
<button v-for="page in paginationButtons" :key="page" @click="changePage(page)"
:class="{ 'selected-btn': currentPage === page }">
{{ page }}
</button>
<button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
<img src="../../../resources/img/btn28_90t_normal.png" alt="Next">
</button>
</article>
</div>
<div class="flex justify-end ">
<button type="button" title="" class="new-btn mr10" @click="closeBtn">
취소
</button>
<button type="button" title="" class="new-btn" @click="insertRoadMap2">
등록
</button>
</div>
</div>
</div>
<!--문제 등록 팝업-->
<div v-show="searchPrblmOpen" 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="" v-model="searchKeyword">
<button type="button" @click="fetchProblems">
<img src="../../../resources/img/look_t.png" alt="">
</button>
</div>
<div class="table-wrap">
<table>
<colgroup>
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 30%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 10%;">
<col style="width: 20%;">
</colgroup>
<thead>
<tr>
<td></td>
<td>No.</td>
<td>문제</td>
<td>유형</td>
<td>점수</td>
<td>작성자</td>
<td>등록일</td>
</tr>
</thead>
<tbody>
<tr v-for="(problem, index) in problems" :key="problem.prblmId">
<td><input type="checkbox" v-model="problem.check"></td>
<td>{{ index + 1 }}</td>
<td>{{ problem.prblmExpln }}</td>
<td>{{ problem.prblmTypeNm }}</td>
<td>{{ problem.prblmScr }}</td>
<td>{{ problem.userId }}</td>
<td>{{ problem.regDt }}</td>
</tr>
</tbody>
</table>
<article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
<button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
<img src="../../../resources/img/btn27_90t_normal.png" alt="Previous">
</button>
<button v-for="page in paginationButtons" :key="page" @click="changePage(page)"
:class="{ 'selected-btn': currentPage === page }">
{{ page }}
</button>
<button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
<img src="../../../resources/img/btn28_90t_normal.png" alt="Next">
</button>
</article>
</div>
<div class="flex justify-end ">
<button type="button" title="" class="new-btn mr10" @click="closeBtn">
취소
</button>
<button type="button" title="" class="new-btn" @click="insertRoadMap">
등록
</button>
</div>
</div>
</div>
<!--단어장 등록 팝업-->
<div v-show="searchWordOpen" class="popup-wrap">
<div class="popup-box ">
<div class="flex justify-between mb30">
<p class="popup-title">단어장 검색</p>
</div>
<button type="button" class="popup-close-btn" @click="closeBtn">
<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
</button>
<select v-model="searchType" class="mr10 data-wrap">
<option value="text">지문</option>
<option value="word">단어</option>
</select>
<div class="search-wrap mb30">
<input type="text" class="data-wrap" placeholder="" v-model="searchKeyword">
<button type="button" @click="searchWordBooks">
<img src="../../../resources/img/look_t.png" alt="">
</button>
</div>
<div class="table-wrap">
<table>
<thead>
<td></td>
<td>No.</td>
<td>지문</td>
<td>단어 목록</td>
<td>작성자</td>
</thead>
<tbody>
<tr v-for="(wordBook, index) in wordBooks" :key="wordBook.wdBookId">
<td><input type="checkbox" v-model="wordBook.check"></td>
<td>{{ index + 1 }}</td>
<td>{{ wordBook.textTtl }}</td>
<td>{{ wordBook.wordsPreview }}</td>
<td>{{ wordBook.userNm }}</td>
</tr>
</tbody>
</table>
<article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
<button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
<img src="../../../resources/img/btn27_90t_normal.png" alt="Previous">
</button>
<button v-for="page in paginationButtons" :key="page" @click="changePage(page)"
:class="{ 'selected-btn': currentPage === page }">
{{ page }}
</button>
<button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
<img src="../../../resources/img/btn28_90t_normal.png" alt="Next">
</button>
</article>
</div>
<div class="flex justify-end ">
<button type="button" title="" class="new-btn mr10" @click="closeBtn">
취소
</button>
<button type="button" title="" class="new-btn" @click="insertRoadMap3">
등록
</button>
</div>
</div>
</div>
<!--평가 등록 팝업-->
<div v-show="searchEvalOpen" 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="table-wrap">
<table>
<thead>
<tr>
<td></td>
<td>No.</td>
<td>중간/최종</td>
<td>문항 갯수</td>
</tr>
</thead>
<tbody>
<tr v-for="(evaluation, index) in evals" :key="evaluation.evalId">
<td><input type="checkbox" :checked="evaluation.check"
@change="selectEvaluation(evaluation)">
</td>
<td>{{ index + 1 }}</td>
<td>{{ evaluation.evalType }}</td>
<td>{{ evaluation.problemCount }}</td>
</tr>
</tbody>
</table>
<article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px;">
<button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
<img src="../../../resources/img/btn27_90t_normal.png" alt="Previous">
</button>
<button v-for="page in paginationButtons" :key="page" @click="changePage(page)"
:class="{ 'selected-btn': currentPage === page }">
{{ page }}
</button>
<button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
<img src="../../../resources/img/btn28_90t_normal.png" alt="Next">
</button>
</article>
</div>
<div class="flex justify-end ">
<button type="button" title="" class="new-btn mr10" @click="closeBtn">
취소
</button>
<button type="button" title="" class="new-btn" @click="insertRoadMap4">
등록
</button>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdilArrowRight } from '@mdi/js';
import { mdilArrowDown } from '@mdi/light-js';
import ProgressBar from '../../component/ProgressBar.vue';
import axios from 'axios';
export default {
data() {
return {
mdilArrowDown: mdilArrowDown,
mdiMagnify: mdiMagnify,
mdilArrowRight: mdilArrowRight,
timer: "00:00",
progress: 20,
books: [],
units: [],
posts: [],
RoadMap: [],
problems: [],
wordBooks: [],
evals: [],
selectedBook: "",
selectedUnit: null,
currentPage: 1,
pageSize: 5,
totalPosts: 0,
searchOption: '',
searchKeyword: '',
searchType: 'text',
searchPrblmOpen: false,
searchTextOpen: false,
searchWordOpen: false,
searchEvalOpen: false,
selectedPop: 0,
}
},
methods: {
goToPage(page) {
this.$router.push({ name: page, query: { unit_id: this.selectedUnit, book_id: this.selectedBook } });
},
increaseProgress() {
if (this.progress < 100) {
this.progress += 10;
}
},
showConfirm(type) {
let message = '';
if (type === 'delete') {
message = '삭제하시겠습니까?';
} else if (type === 'reset') {
message = '초기화하시겠습니까?';
} else if (type === 'save') {
message = '등록하시겠습니까?';
}
if (confirm(message)) {
this.goBack();
}
},
// 모달 열기
buttonSearch(page) {
this.selectedPop = page;
if (this.selectedPop === '2' || this.selectedPop === '3' || this.selectedPop === '6') {
this.searchPrblmOpen = true;
this.fetchProblems();
} else if (this.selectedPop === '0' || this.selectedPop === '4' || this.selectedPop === '8') {
this.searchTextOpen = true;
this.fetchText();
} else if (this.selectedPop === '1' || this.selectedPop === '5' || this.selectedPop === '9') {
this.searchWordOpen = true;
this.fetchWords();
} else if (this.selectedPop === '7') {
this.searchEvalOpen = true;
this.fetchEval('중간평가');
} else if (this.selectedPop === '10') {
this.searchEvalOpen = true;
this.fetchEval('최종평가');
}
},
// 모달 닫기
closeBtn() {
this.problems = [];
this.posts = [];
this.wordBooks = [];
this.evals = [];
this.selectedPop = '';
this.currentPage = 1;
this.pageSize = 5;
this.totalPosts = 0;
this.searchPrblmOpen = false;
this.searchTextOpen = false;
this.searchWordOpen = false;
this.searchEvalOpen = false;
},
// 로드맵 지정된 것 삭제
deleteRoadMap(page, id){
if (page === '2' || page === '3' || page === '6') {
this.RoadMap[page] = this.RoadMap[page].filter(prblm => prblm.prblmId !== id);
} else if (page === '0' || page === '4' || page === '8') {
this.RoadMap[page] = this.RoadMap[page].filter(text => text.textId !== id);
} else if (page === '1' || page === '5' || page === '9') {
this.RoadMap[page] = this.RoadMap[page].filter(wordBook => wordBook.wdBookId !== id);
} else if (page === '7' || page === '10') {
this.RoadMap[page] = this.RoadMap[page].filter(evaluation => evaluation.evalId !== id);
}
},
fetchBooks() {
axios({
url: "/book/findAll.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
})
.then(response => {
console.log(response.data)
this.books = response.data;
})
.catch(error => {
console.error("fetchBooks - error: ", error);
alert("교재 목록을 불러오는 중 오류가 발생했습니다.");
});
},
fetchUnits() {
if (!this.selectedBook) return;
axios({
url: "/unit/unitList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
"bookId": this.selectedBook
},
})
.then(response => {
console.log(response.data)
this.units = response.data;
})
.catch(error => {
console.error("fetchUnits - error: ", error);
alert("단원 목록을 불러오는 중 오류가 발생했습니다.");
});
},
// 단원을 선택했을 때 호출되는 메서드
selectUnit(unitId) {
this.selectedUnit = unitId;
//this.fetchData();
},
// 문제 가져오기
async fetchProblems(page = 1) {
try {
const response = await axios.post('/problem/problemList.json', {
option: this.searchOption,
keyword: this.searchKeyword,
unitId: this.selectedUnit,
pageSize: this.pageSize,
startIndex: (page - 1) * 5
});
this.problems = response.data.problems;
this.totalPosts = response.data.totalProblem;
this.currentPage = page;
} catch (error) {
console.error('문제 목록을 불러오는 중 오류가 발생했습니다.', error);
}
},
changePage(page) {
if (page < 1 || page > this.totalPages) return;
this.currentPage = page;
this.fetchProblems(page);
},
// 지문 가져오기
fetchText() {
const idx = (this.currentPage - 1) * this.pageSize;
axios({
url: "/text/textSearch.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
"option": this.option,
"keyword": this.keyword,
"pageSize": this.pageSize,
"startIndex": idx,
"unitId": this.selectedUnit
},
})
.then(response => {
this.posts = response.data.list;
if (!this.searching || this.keyword === "") {
this.totalPosts = response.data.totalText;
} else if (this.searching) {
this.totalPosts = response.data.resultCount;
}
})
.catch(error => {
console.error("fetchData - error: ", error);
alert("검색 중 오류가 발생했습니다.");
});
},
// 단어장 목록 가져오기
fetchWords() {
const vm = this;
axios({
url: "/wordbook/findByUnitId.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
unitId: vm.selectedUnit,
page: vm.currentPage,
pageSize: vm.pageSize
},
})
.then(function (response) {
console.log("dataList - 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.wordBooks = wordBooks;
});
})
.catch(function (error) {
console.log("dataList - error: ", error);
alert("단어장 목록 조회에 오류가 발생했습니다.");
});
},
// 단어장 검색
searchWordBooks() {
const vm = this;
let url = '';
let data = {};
if (this.searchType === 'text') {
// 지문으로 검색
url = '/wordbook/findByTextTitle.json';
data = {
unitId: vm.selectedUnit,
textTitle: vm.searchKeyword,
page: vm.currentPage,
pageSize: vm.pageSize
};
} else if (this.searchType === 'word') {
// 단어로 검색
url = '/wordbook/findByWord.json';
data = {
unitId: vm.selectedUnit,
word: vm.searchKeyword,
page: vm.currentPage,
pageSize: vm.pageSize
};
}
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 => {
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 => {
wordBook.wordsPreview = '단어값없음'; // 오류 시 기본값 설정
});
return Promise.all([textTitlePromise, wordsPromise]);
});
// 모든 데이터 가져오기 작업이 완료되면 dataList에 데이터 설정
Promise.all(fetchDataPromises).then(() => {
vm.wordBooks = wordBooks;
});
})
.catch(function (error) {
console.log("searchWordBooks - error: ", error);
alert("단어장 검색에 오류가 발생했습니다.");
});
},
// 단어 목록 생략 String 생성 메서드
generateWordsPreview(words) {
const maxLength = 20; // 최대 표시 길이 설정
const wordString = words.join(', ');
if (wordString.length > maxLength) {
return wordString.substring(0, maxLength) + '...';
} else {
return wordString;
}
},
// 평가 정보 가져오기
fetchEval(evalType) {
const idx = (this.currentPage - 1) * this.pageSize;
let option = null;
let searchKeyword = null;
if (evalType !== '') {
option = 'eval_type';
searchKeyword = evalType;
}
axios({
url: "/evaluation/evaluationUnitList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
"option": option,
"keyword": searchKeyword,
"pageSize": this.pageSize,
"startIndex": idx,
"unitId": this.selectedUnit
},
})
.then(response => {
this.evals = response.data;
})
.catch(error => {
console.error("fetchData - error: ", error);
alert("검색 중 오류가 발생했습니다.");
});
},
// 평가는 1개만 선택되도록 제한
selectEvaluation(selectedEvaluation) {
this.evals.forEach(evaluation => {
evaluation.check = false; // 모든 체크 해제
});
selectedEvaluation.check = true; // 선택한 항목만 체크
},
// 지문은 1개만 선택되도록 제한
selectText(selectedText) {
this.posts.forEach(text => {
text.check = false; // 모든 체크 해제
});
selectedText.check = true; // 선택한 항목만 체크
},
// 팝업 문제 데이터 가져오기
insertRoadMap() {
const selectedProblems = this.problems.filter(problem => problem.check);
// RoadMap의 해당 인덱스가 초기화되어 있는지 확인
if (!this.RoadMap[this.selectedPop]) {
this.RoadMap[this.selectedPop] = []; // 초기화
}
// 이미 있는 데이터인지 확인
selectedProblems.forEach(problem => {
const exists = this.RoadMap[this.selectedPop].some(existingProblem => existingProblem.prblmId === problem.prblmId);
if (!exists) {
this.RoadMap[this.selectedPop].push(problem); // 존재하지 않으면 추가
}
});
this.closeBtn();
},
// 팝업 지문 데이터 가져오기
insertRoadMap2() {
const selectedTexts = this.posts.filter(post => post.check);
this.RoadMap[this.selectedPop] = selectedTexts;
this.closeBtn();
},
// 팝업 단어장 데이터 가져오기
insertRoadMap3() {
const selectedBooks = this.wordBooks.filter(wordBook => wordBook.check);
if (!this.RoadMap[this.selectedPop]) {
this.RoadMap[this.selectedPop] = [];
}
// 이미 있는 데이터인지 확인
selectedBooks.forEach(wordBook => {
const exists = this.RoadMap[this.selectedPop].some(existingBook => existingBook.wdBookId === wordBook.wdBookId);
if (!exists) {
this.RoadMap[this.selectedPop].push(wordBook); // 존재하지 않으면 추가
}
});
this.closeBtn();
},
// 평가 데이터 가져오기
insertRoadMap4() {
const selectedEval = this.evals.filter(evaluation => evaluation.check);
this.RoadMap[this.selectedPop] = selectedEval;
this.closeBtn();
},
// 로드맵 등록하기
postRoadMaps(){
console.log(this.RoadMap);
},
// prblmbook 만들어 id 가져오기
// wordcontent 만들어 id 가져오기
},
watch: {
},
computed: {
totalPages() {
return Math.ceil(this.totalPosts / this.pageSize);
},
paginationButtons() {
let start = Math.max(0, this.currentPage - 2);
let end = Math.min(start + 5, this.totalPages);
if (end - start < 5) {
start = Math.max(0, end - 5);
}
return Array.from({ length: end - start }, (_, i) => start + i + 1);
},
startIndex() {
return this.currentPage * this.itemsPerPage;
}
},
components: {
SvgIcon,
ProgressBar
},
mounted() {
this.selectedUnit = this.$route.query.unit_id || '';
this.selectedBook = this.$route.query.book_id || '';
this.fetchBooks();
this.fetchUnits();
}
}
</script>
<style scoped>
.search-wrap button {
right: 83rem;
}
</style>