용어집 수정정
This commit is contained in:
parent
63dacb4c3c
commit
a1de83b5cc
@ -1,30 +1,39 @@
|
||||
<template>
|
||||
<button class="btn btn-label-primary btn-icon" @click="toggleText">
|
||||
<i :class="buttonClass"></i>
|
||||
<button class="btn btn-label-primary btn-icon float-end" @click="toggleText">
|
||||
<i :class="buttonClass"></i>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue';
|
||||
import { ref, watch, defineProps } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
isToggleEnabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isToggleEnabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const buttonClass = ref("bx bx-edit-alt");
|
||||
const buttonClass = ref("bx bx-edit");
|
||||
|
||||
watch(() => props.isActive, (newVal) => {
|
||||
buttonClass.value = newVal ? "bx bx-x" : "bx bx-edit";
|
||||
});
|
||||
|
||||
const toggleText = () => {
|
||||
if (props.isToggleEnabled) {
|
||||
buttonClass.value = buttonClass.value === "bx bx-edit-alt" ? "bx bx-x" : "bx bx-edit-alt";
|
||||
}
|
||||
if (props.isToggleEnabled) {
|
||||
buttonClass.value = buttonClass.value === "bx bx-edit" ? "bx bx-x" : "bx bx-edit";
|
||||
}
|
||||
};
|
||||
const resetButton = () => {
|
||||
buttonClass.value = "bx bx-edit";
|
||||
};
|
||||
|
||||
const resetButton = () => {
|
||||
buttonClass.value = "bx bx-edit-alt";
|
||||
};
|
||||
|
||||
defineExpose({ resetButton });
|
||||
|
||||
</script>
|
||||
|
||||
@ -27,4 +27,4 @@ const resetButton = () => {
|
||||
};
|
||||
|
||||
defineExpose({ resetButton });
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,18 @@
|
||||
<template>
|
||||
<ul class="cate-list list-unstyled d-flex flex-wrap mb-0">
|
||||
<li v-if="showAll" class="mt-2 me-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
:class="{
|
||||
'btn-outline-primary': selectedCategory !== 'all',
|
||||
'btn-primary': selectedCategory === 'all'
|
||||
}"
|
||||
@click="selectCategory('all')"
|
||||
>
|
||||
All
|
||||
</button>
|
||||
</li>
|
||||
<li v-for="category in lists" :key="category.value" class="mt-2 me-2">
|
||||
<button
|
||||
type="button"
|
||||
@ -26,6 +39,10 @@ const props = defineProps({
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
showAll: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
// 카테고리 선택
|
||||
@ -46,9 +63,6 @@ const selectCategory = (cate) => {
|
||||
overflow-x: scroll;
|
||||
flex-wrap: nowrap !important;
|
||||
|
||||
li {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,15 @@
|
||||
<template>
|
||||
<ul class="d-flex p-0 mb-0">
|
||||
<ul class="d-flex p-0 mb-0">
|
||||
<li class="d-flex">
|
||||
<button
|
||||
type="button"
|
||||
class="alphabet-btn"
|
||||
:class="{ active: selectedAl === 'all' }"
|
||||
@click="selectAlphabet('all')"
|
||||
> 전체 ({{ totalCount}})
|
||||
</button>
|
||||
<span class="divider">|</span>
|
||||
</li>
|
||||
<li v-for="(char, index) in koreanChars" :key="char.CHARACTER_" class="d-flex">
|
||||
<button
|
||||
type="button"
|
||||
@ -43,6 +53,9 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
const selectedAlphabet = ref(props.selectedAl);
|
||||
const totalCount = computed(() => {
|
||||
return props.indexCategory.reduce((sum, item) => sum + item.COUNT, 0);
|
||||
});
|
||||
const koreanChars = computed(() => {
|
||||
return props.indexCategory.filter(char => /[ㄱ-ㅎ가-힣]/.test(char.CHARACTER_));
|
||||
});
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<li class="mt-5 card p-5">
|
||||
<DictWrite
|
||||
v-if="writeStore.isItemActive(item.WRDDICSEQ)"
|
||||
@close="writeStore.closeAll();"
|
||||
:dataList="cateList"
|
||||
<DictWrite
|
||||
v-if="writeStore.isItemActive(item.WRDDICSEQ)"
|
||||
@close="writeStore.closeAll();"
|
||||
:dataList="cateList"
|
||||
@addWord="editWord"
|
||||
:NumValue="item.WRDDICSEQ"
|
||||
:formValue="item.WRDDICCAT"
|
||||
:formValue="item.WRDDICCAT"
|
||||
:titleValue="item.WRDDICTTL"
|
||||
:contentValue="item.WRDDICCON"
|
||||
:isDisabled="userStore.user.role !== 'ROLE_ADMIN'"
|
||||
/>
|
||||
/>
|
||||
|
||||
<div v-else>
|
||||
<input
|
||||
<input
|
||||
v-if="userStore.user.role == 'ROLE_ADMIN'"
|
||||
type="checkbox"
|
||||
type="checkbox"
|
||||
class="form-check-input admin-chk"
|
||||
:name="item.WRDDICSEQ"
|
||||
:name="item.WRDDICSEQ"
|
||||
@change="toggleCheck($event)"
|
||||
>
|
||||
<div class="d-flex align-ite-center">
|
||||
@ -43,8 +43,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.author.createdAt !== item.lastEditor.updatedAt"
|
||||
<div
|
||||
v-if="item.author.createdAt !== item.lastEditor.updatedAt"
|
||||
class="d-flex justify-content-between flex-wrap gap-2 mb-2"
|
||||
>
|
||||
<div class="d-flex flex-wrap align-items-center mb-50">
|
||||
@ -65,7 +65,8 @@
|
||||
</div>
|
||||
|
||||
<div class="edit-btn" v-if="userStore.user.role !== 'ROLE_ADMIN'">
|
||||
<EditBtn ref="writeButton" @click="writeStore.toggleItem(item.WRDDICSEQ)" :isToggleEnabled="true"/>
|
||||
<EditBtn ref="writeButton" @click="writeStore.toggleItem(item.WRDDICSEQ)" :isToggleEnabled="true"
|
||||
:isActive="writeStore.activeItemId === item.WRDDICSEQ"/>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
@ -124,7 +125,7 @@ const editWord = (data) => {
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.data === 1) {
|
||||
toastStore.onToast('✅ 용어가 수정되었습니다.', 's');
|
||||
toastStore.onToast('용어가 수정되었습니다.', 's');
|
||||
writeStore.closeAll();
|
||||
if (writeButton.value) {
|
||||
writeButton.value.resetButton();
|
||||
@ -183,4 +184,4 @@ const toggleCheck = (event) => {
|
||||
top: -0.5rem;
|
||||
--bs-form-check-bg: #fff;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -11,10 +11,10 @@
|
||||
<!-- 단어 갯수, 작성하기 -->
|
||||
<WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
|
||||
<!-- ㄱ ㄴ ㄷ ㄹ -->
|
||||
<DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet"/>
|
||||
<DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet" />
|
||||
<!-- 카테고리 -->
|
||||
<div v-if="cateList.length">
|
||||
<CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange"/>
|
||||
<CategoryBtn :lists="cateList" @update:data="handleSelectedCategoryChange" :showAll="true"/>
|
||||
</div>
|
||||
<!-- 작성 -->
|
||||
<div v-if="writeStore.isItemActive(999999)" class="mt-5 card p-5">
|
||||
@ -28,7 +28,6 @@
|
||||
<div v-if="loading">로딩 중...</div>
|
||||
<!-- 에러 메시지 -->
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
|
||||
<!-- 단어 목록 -->
|
||||
<ul v-if="total > 0" class="px-0 list-unstyled">
|
||||
<DictCard
|
||||
@ -41,7 +40,7 @@
|
||||
/>
|
||||
</ul>
|
||||
<!-- 데이터가 없을 때 -->
|
||||
<div v-else-if="!loading && !error" class="card p-5 text-center mt-5">✏️ 용어를 선택/작성해 주세요 ✏️ </div>
|
||||
<div v-if="total == 0" class="text-center mt-5">용어를 선택 / 작성해 주세요 </div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -153,13 +152,26 @@
|
||||
// 알파벳 선택
|
||||
const handleSelectedAlphabetChange = (newAlphabet) => {
|
||||
selectedAlphabet.value = newAlphabet;
|
||||
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
|
||||
if (newAlphabet !== null) {
|
||||
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
|
||||
} else {
|
||||
wordList.value = [];
|
||||
total.value = 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 카테고리 선택
|
||||
const handleSelectedCategoryChange = (category) => {
|
||||
selectedCategory.value = category;
|
||||
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
|
||||
if (category !== null ) {
|
||||
getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
|
||||
if(category == 'all'){
|
||||
getwordList(searchText.value, selectedAlphabet.value, '');
|
||||
}
|
||||
} else {
|
||||
wordList.value = [];
|
||||
total.value = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 용어집 등록
|
||||
|
||||
Loading…
Reference in New Issue
Block a user