feat(filter): 검색 분류를 CategoryPicker(대분류→소분류)로, 추가 버튼만 숨김
Deploy / deploy (push) Failing after 12m11s
Deploy / deploy (push) Failing after 12m11s
- CategoryPicker에 hideAdd prop 추가(+대분류/+소분류 숨김) - 내역 검색 필터 분류: 평면 칩 → 트리거→시트(CategoryPicker hide-add) + '분류 전체' - 타입은 구분 필터(기본 지출) 기준 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -10,6 +10,7 @@ const props = defineProps({
|
|||||||
disabled: { type: Boolean, default: false },
|
disabled: { type: Boolean, default: false },
|
||||||
admin: { type: Boolean, default: false },
|
admin: { type: Boolean, default: false },
|
||||||
reorderable: { type: Boolean, default: false },
|
reorderable: { type: Boolean, default: false },
|
||||||
|
hideAdd: { type: Boolean, default: false }, // 분류 추가(+대분류/+소분류) 버튼 숨김 (필터 등 선택 전용)
|
||||||
})
|
})
|
||||||
const emit = defineEmits(['update:modelValue', 'category-added', 'rename', 'delete', 'reorder'])
|
const emit = defineEmits(['update:modelValue', 'category-added', 'rename', 'delete', 'reorder'])
|
||||||
|
|
||||||
@@ -229,10 +230,10 @@ onBeforeUnmount(destroySortables)
|
|||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
@click="$emit('update:modelValue', s.name)"
|
@click="$emit('update:modelValue', s.name)"
|
||||||
>{{ s.name }}</button>
|
>{{ s.name }}</button>
|
||||||
<button type="button" class="acc-chip add-chip sub-add" :disabled="disabled" @click="startAddSub">+ 소분류</button>
|
<button v-if="!hideAdd" type="button" class="acc-chip add-chip sub-add" :disabled="disabled" @click="startAddSub">+ 소분류</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<button type="button" class="acc-chip add-chip" :disabled="disabled" @click="startAddMajor">+ 대분류</button>
|
<button v-if="!hideAdd" type="button" class="acc-chip add-chip" :disabled="disabled" @click="startAddMajor">+ 대분류</button>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="cat-input">
|
<div v-else class="cat-input">
|
||||||
<input
|
<input
|
||||||
|
|||||||
@@ -92,6 +92,9 @@ const form = reactive({ entryDate: '', type: 'EXPENSE', category: '', amount: nu
|
|||||||
// 분류 선택 바텀시트 — 최종 분류가 정해지면 자동 닫힘
|
// 분류 선택 바텀시트 — 최종 분류가 정해지면 자동 닫힘
|
||||||
const catSheet = ref(false)
|
const catSheet = ref(false)
|
||||||
watch(() => form.category, (v) => { if (v) catSheet.value = false })
|
watch(() => form.category, (v) => { if (v) catSheet.value = false })
|
||||||
|
// 검색 필터 분류 바텀시트
|
||||||
|
const catFilterSheet = ref(false)
|
||||||
|
watch(() => filters.category, (v) => { if (v) catFilterSheet.value = false })
|
||||||
|
|
||||||
// ===== 외화 결제 =====
|
// ===== 외화 결제 =====
|
||||||
const CURRENCIES = ['KRW', 'USD', 'JPY', 'EUR', 'CNY', 'GBP', 'AUD', 'CAD', 'HKD', 'SGD', 'THB', 'VND', 'TWD', 'PHP', 'MYR']
|
const CURRENCIES = ['KRW', 'USD', 'JPY', 'EUR', 'CNY', 'GBP', 'AUD', 'CAD', 'HKD', 'SGD', 'THB', 'VND', 'TWD', 'PHP', 'MYR']
|
||||||
@@ -1047,7 +1050,21 @@ onMounted(async () => {
|
|||||||
placeholder="메모·분류 검색" @keyup.enter="applyFilters"
|
placeholder="메모·분류 검색" @keyup.enter="applyFilters"
|
||||||
/>
|
/>
|
||||||
<div class="f-sel"><SheetSelect v-model="filters.type" :options="filterTypeOptions" title="구분" placeholder="구분 전체" /></div>
|
<div class="f-sel"><SheetSelect v-model="filters.type" :options="filterTypeOptions" title="구분" placeholder="구분 전체" /></div>
|
||||||
<div class="f-sel"><SheetSelect v-model="filters.category" :options="filterCategoryOptions" title="분류" placeholder="분류 전체" /></div>
|
<div class="f-sel">
|
||||||
|
<button type="button" class="sheet-trigger" :class="{ empty: !filters.category }" @click="catFilterSheet = true">
|
||||||
|
<span class="st-label">{{ filters.category || '분류 전체' }}</span>
|
||||||
|
<span class="st-caret">▾</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<BottomSheet v-model="catFilterSheet" title="분류 선택">
|
||||||
|
<button type="button" class="cat-all-btn" :class="{ active: !filters.category }" @click="filters.category = ''; catFilterSheet = false">분류 전체</button>
|
||||||
|
<CategoryPicker
|
||||||
|
v-model="filters.category"
|
||||||
|
:type="filters.type || 'EXPENSE'"
|
||||||
|
:categories="categories"
|
||||||
|
hide-add
|
||||||
|
/>
|
||||||
|
</BottomSheet>
|
||||||
<div class="f-sel"><AccountPicker v-model="filters.walletId" :wallets="wallets" all-label="계좌 전체" title="계좌 선택" /></div>
|
<div class="f-sel"><AccountPicker v-model="filters.walletId" :wallets="wallets" all-label="계좌 전체" title="계좌 선택" /></div>
|
||||||
<div class="f-sel"><SheetSelect v-model="filters.tagId" :options="filterTagOptions" title="태그" placeholder="태그 전체" /></div>
|
<div class="f-sel"><SheetSelect v-model="filters.tagId" :options="filterTagOptions" title="태그" placeholder="태그 전체" /></div>
|
||||||
<IconBtn icon="search" title="적용" variant="primary" @click="applyFilters" />
|
<IconBtn icon="search" title="적용" variant="primary" @click="applyFilters" />
|
||||||
@@ -1563,6 +1580,23 @@ button.primary {
|
|||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
.cat-all-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.55rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--color-text);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.cat-all-btn.active {
|
||||||
|
border-color: hsla(160, 100%, 37%, 1);
|
||||||
|
background: hsla(160, 100%, 37%, 0.1);
|
||||||
|
color: hsla(160, 100%, 37%, 1);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
.summary {
|
.summary {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user