용어집 수정정
This commit is contained in:
parent
e9f7b5d358
commit
fe8abc7f7c
@ -1,29 +1,18 @@
|
||||
<template>
|
||||
<ul class="d-flex p-0 mb-0">
|
||||
<li class="d-flex">
|
||||
<!-- <ul class="d-flex p-0 mb-0 flex-wrap">
|
||||
<li class="d-flex">
|
||||
<button
|
||||
type="button"
|
||||
class="alphabet-btn"
|
||||
:class="{ active: selectedAl === 'all' }"
|
||||
@click="selectAlphabet('all')"
|
||||
> 전체 ({{ totalCount}})
|
||||
> 전체 ({{ totalCount }})
|
||||
</button>
|
||||
<span class="divider">|</span>
|
||||
</li>
|
||||
<li v-for="(char, index) in koreanChars" :key="char.CHARACTER_" class="d-flex">
|
||||
<button
|
||||
type="button"
|
||||
class="alphabet-btn"
|
||||
:class="{ active: selectedAl === char.CHARACTER_ }"
|
||||
@click="selectAlphabet(char.CHARACTER_)"
|
||||
>
|
||||
{{ char.CHARACTER_ }} ({{ char.COUNT }})
|
||||
</button>
|
||||
<span v-if="index !== koreanChars.length - 1" class="divider">|</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul> -->
|
||||
<div v-for="(group, groupIndex) in chunkedKoreanChars" :key="'ko-group-' + groupIndex">
|
||||
<ul class="d-flex p-0 mb-0">
|
||||
<li v-for="(char, index) in englishChars" :key="char.CHARACTER_" class="d-flex">
|
||||
<li v-for="(char, index) in group" :key="char.CHARACTER_" class="d-flex">
|
||||
<button
|
||||
type="button"
|
||||
class="alphabet-btn"
|
||||
@ -32,9 +21,25 @@
|
||||
>
|
||||
{{ char.CHARACTER_ }} ({{ char.COUNT }})
|
||||
</button>
|
||||
<span v-if="index !== englishChars.length - 1" class="divider">|</span>
|
||||
<span v-if="index !== group.length - 1" class="divider">|</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-for="(group, groupIndex) in chunkedEnglishChars" :key="'en-group-' + groupIndex">
|
||||
<ul class="d-flex p-0 mb-0">
|
||||
<li v-for="(char, index) in group" :key="char.CHARACTER_" class="d-flex">
|
||||
<button
|
||||
type="button"
|
||||
class="alphabet-btn"
|
||||
:class="{ active: selectedAl === char.CHARACTER_ }"
|
||||
@click="selectAlphabet(char.CHARACTER_)"
|
||||
>
|
||||
{{ char.CHARACTER_ }} ({{ char.COUNT }})
|
||||
</button>
|
||||
<span v-if="index !== group.length - 1" class="divider">|</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -47,7 +52,7 @@ const props = defineProps({
|
||||
},
|
||||
selectedAl: {
|
||||
type: String,
|
||||
default : '',
|
||||
default: '',
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
@ -56,14 +61,24 @@ const selectedAlphabet = ref(props.selectedAl);
|
||||
const totalCount = computed(() => {
|
||||
return props.indexCategory.reduce((sum, item) => sum + item.COUNT, 0);
|
||||
});
|
||||
|
||||
const chunkArray = (arr, size) => {
|
||||
return arr.reduce((acc, _, i) => {
|
||||
if (i % size === 0) acc.push(arr.slice(i, i + size));
|
||||
return acc;
|
||||
}, []);
|
||||
};
|
||||
|
||||
const koreanChars = computed(() => {
|
||||
return props.indexCategory.filter(char => /[ㄱ-ㅎ가-힣]/.test(char.CHARACTER_));
|
||||
});
|
||||
|
||||
const englishChars = computed(() => {
|
||||
return props.indexCategory.filter(char => /^[a-zA-Z]$/.test(char.CHARACTER_));
|
||||
});
|
||||
|
||||
const chunkedKoreanChars = computed(() => chunkArray(koreanChars.value, 5));
|
||||
const chunkedEnglishChars = computed(() => chunkArray(englishChars.value, 5));
|
||||
|
||||
const emit = defineEmits();
|
||||
const selectAlphabet = (alphabet) => {
|
||||
selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
|
||||
@ -81,6 +96,7 @@ const selectAlphabet = (alphabet) => {
|
||||
cursor: pointer;
|
||||
width: 70%;
|
||||
height: 40px;
|
||||
transition: color 0.3s ease, font-size 0.3s ease; /* Smooth transition for color */
|
||||
}
|
||||
|
||||
.alphabet-btn:hover {
|
||||
@ -90,10 +106,16 @@ const selectAlphabet = (alphabet) => {
|
||||
.alphabet-btn.active {
|
||||
color: #0d6efd;
|
||||
text-decoration: underline;
|
||||
font-size: 13px; /* Keep font size fixed in active state */
|
||||
}
|
||||
|
||||
.divider {
|
||||
color: #bbb;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<li class="mt-5 card p-5">
|
||||
<li class="card p-5 mb-2">
|
||||
<DictWrite
|
||||
v-if="writeStore.isItemActive(item.WRDDICSEQ)"
|
||||
@close="writeStore.closeAll();"
|
||||
@ -64,7 +64,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="edit-btn" v-if="userStore.user.role !== 'ROLE_ADMIN'">
|
||||
<div class="edit-btn">
|
||||
<EditBtn ref="writeButton" @click="writeStore.toggleItem(item.WRDDICSEQ)" :isToggleEnabled="true"
|
||||
:isActive="writeStore.activeItemId === item.WRDDICSEQ"/>
|
||||
</div>
|
||||
|
||||
@ -4,13 +4,12 @@
|
||||
<div class="col-10">
|
||||
<FormSelect
|
||||
name="cate"
|
||||
title="카테고리 선택"
|
||||
title="카테고리"
|
||||
:data="dataList"
|
||||
:is-common="true"
|
||||
@update:data="selectCategory = $event"
|
||||
@change="onChange"
|
||||
:value="formValue"
|
||||
:disabled="isDisabled"
|
||||
:is-essential="false"
|
||||
/>
|
||||
</div>
|
||||
@ -23,7 +22,7 @@
|
||||
<div class="col-10">
|
||||
<FormInput
|
||||
ref="categoryInputRef"
|
||||
title="카테고리 입력"
|
||||
title="새 카테고리"
|
||||
name="카테고리"
|
||||
@update:modelValue="addCategory = $event"
|
||||
:is-cate-alert="addCategoryAlert"
|
||||
|
||||
@ -1,48 +1,57 @@
|
||||
<template>
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div >
|
||||
<!-- 타이틀, 검색 -->
|
||||
<SearchBar @update:data="search"/>
|
||||
<!-- 단어 갯수, 작성하기 -->
|
||||
<WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
|
||||
<!-- ㄱ ㄴ ㄷ ㄹ -->
|
||||
<DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet" />
|
||||
<!-- 카테고리 -->
|
||||
<div v-if="cateList.length">
|
||||
<CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange" :showAll="true" :selectedCategory="selectedCategory" />
|
||||
<div class="container-xxl flex-grow-1 container-p-y d-flex">
|
||||
<!-- 메인 컨텐츠 -->
|
||||
<div class="flex-grow-1">
|
||||
<!-- 타이틀, 검색 -->
|
||||
<SearchBar @update:data="search"/>
|
||||
<div class="d-flex">
|
||||
<!-- 단어 갯수, 작성하기 -->
|
||||
<!-- 왼쪽 사이드바 -->
|
||||
<div class="sidebar position-sticky" style="top: 100px; max-width: 250px; min-width: 250px;">
|
||||
<WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
|
||||
<!-- ㄱ ㄴ ㄷ ㄹ -->
|
||||
<DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet" />
|
||||
<!-- 카테고리 -->
|
||||
<div v-if="cateList.length" class="mt-3">
|
||||
<CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange" :showAll="true" :selectedCategory="selectedCategory" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 작성 -->
|
||||
<div v-if="writeStore.isItemActive(999999)" class="mt-5 card p-5">
|
||||
<DictWrite @close="writeStore.closeAll()" :dataList="cateList" @addWord="addWord"/>
|
||||
|
||||
<!-- 용어 리스트 컨텐츠 -->
|
||||
<div class="flex-grow-1">
|
||||
|
||||
<!-- 작성 -->
|
||||
<div v-if="writeStore.isItemActive(999999)" class="ms-3 card p-5">
|
||||
<DictWrite @close="writeStore.closeAll()" :dataList="cateList" @addWord="addWord"/>
|
||||
</div>
|
||||
|
||||
<!-- 용어 리스트 -->
|
||||
<div>
|
||||
<!-- 로딩 중일 때 -->
|
||||
<LoadingSpinner v-if="loading"/>
|
||||
<!-- 에러 메시지 -->
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
<!-- 단어 목록 -->
|
||||
<ul v-if="total > 0" class="ms-3 list-unstyled">
|
||||
<DictCard
|
||||
v-for="item in wordList"
|
||||
:key="item.WRDDICSEQ"
|
||||
:item="item"
|
||||
v-model:cateList="cateList"
|
||||
@refreshWordList="refreshWordList"
|
||||
@updateChecked="updateCheckedItems"
|
||||
/>
|
||||
</ul>
|
||||
<!-- 데이터가 없을 때 -->
|
||||
<div v-if="total == 0" class="text-center mt-5">용어를 선택 / 작성해 주세요</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 용어 리스트 -->
|
||||
<div >
|
||||
<!-- 로딩 중일 때 -->
|
||||
<LoadingSpinner v-if="loading"/>
|
||||
<!-- 에러 메시지 -->
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
<!-- 단어 목록 -->
|
||||
<ul v-if="total > 0" class="px-0 list-unstyled">
|
||||
<DictCard
|
||||
v-for="item in wordList"
|
||||
:key="item.WRDDICSEQ"
|
||||
:item="item"
|
||||
v-model:cateList="cateList"
|
||||
@refreshWordList="refreshWordList"
|
||||
@updateChecked="updateCheckedItems"
|
||||
/>
|
||||
</ul>
|
||||
<!-- 데이터가 없을 때 -->
|
||||
<div v-if="total == 0" class="text-center mt-5">용어를 선택 / 작성해 주세요 </div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button v-if="isAnyChecked" class="btn btn-danger admin-del-btn" @click="deleteCheckedItems">
|
||||
<i class="bx bx-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button v-if="isAnyChecked" class="btn btn-danger admin-del-btn" @click="deleteCheckedItems">
|
||||
<i class="bx bx-trash"></i>
|
||||
</button>
|
||||
|
||||
</template>
|
||||
|
||||
@ -255,7 +264,6 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.admin-del-btn {
|
||||
position: fixed;
|
||||
right: 1.5rem;
|
||||
@ -263,11 +271,15 @@
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sidebar {
|
||||
position: sticky;
|
||||
top: 5px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user