244 lines
7.7 KiB
Vue
244 lines
7.7 KiB
Vue
<script setup>
|
|
const openMenuId = defineModel('openMenuId', {
|
|
type: String,
|
|
default: ''
|
|
})
|
|
|
|
/** 서버 `MEDIA_THUMBNAIL_ROOT`와 동일한 썸네일 논리 폴더 라벨 */
|
|
const MEDIA_THUMBNAIL_ROOT = '썸네일'
|
|
|
|
const props = defineProps({
|
|
activeFolder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
activeSystemMediaCount: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
activeSystemMediaHint: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
activeSystemMediaTitle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
folderMediaCounts: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
folders: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
libraryCount: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: 'library'
|
|
},
|
|
deletingFolder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
draggingCount: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
busy: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits([
|
|
'create-folder',
|
|
'drop-folder',
|
|
'remove-folder',
|
|
'select-folder'
|
|
])
|
|
|
|
const hoveredFolder = ref(null)
|
|
|
|
/**
|
|
* 논리 폴더 경로가 썸네일 전용 루트인지 확인한다.
|
|
* @param {string} folder - 폴더 경로
|
|
* @returns {boolean} 썸네일 전용이면 true
|
|
*/
|
|
const isThumbnailFolderPath = (folder) => folder === MEDIA_THUMBNAIL_ROOT || String(folder).startsWith(`${MEDIA_THUMBNAIL_ROOT}/`)
|
|
|
|
/**
|
|
* 폴더 행 메뉴 id를 반환한다.
|
|
* @param {string} folder - 폴더 경로
|
|
* @returns {string} 행 메뉴 id
|
|
*/
|
|
const getFolderMenuId = (folder) => `folder:${folder}`
|
|
|
|
/**
|
|
* 폴더 경로의 표시 이름을 반환한다.
|
|
* @param {string} folder - 폴더 경로
|
|
* @returns {string} 표시 이름
|
|
*/
|
|
const getFolderName = (folder) => String(folder || '').split('/').filter(Boolean).pop() || '미분류'
|
|
|
|
/**
|
|
* 폴더 깊이를 반환한다.
|
|
* @param {string} folder - 폴더 경로
|
|
* @returns {number} 폴더 깊이
|
|
*/
|
|
const getFolderDepth = (folder) => Math.max(String(folder || '').split('/').filter(Boolean).length - 1, 0)
|
|
|
|
/**
|
|
* 내부 미디어 드래그만 폴더 이동 대상으로 허용한다.
|
|
* @param {DragEvent} event - 드래그 이벤트
|
|
* @param {string} folder - 대상 폴더
|
|
* @returns {void}
|
|
*/
|
|
const onFolderDragOver = (event, folder) => {
|
|
if (!props.draggingCount || props.busy || isThumbnailFolderPath(folder) || (props.deletingFolder && props.deletingFolder === folder)) {
|
|
return
|
|
}
|
|
event.preventDefault()
|
|
if (event.dataTransfer) {
|
|
event.dataTransfer.dropEffect = 'move'
|
|
}
|
|
hoveredFolder.value = folder
|
|
}
|
|
|
|
/**
|
|
* 폴더 내부 요소 간 이동을 제외하고 드롭 강조를 해제한다.
|
|
* @param {DragEvent} event - 드래그 이탈 이벤트
|
|
* @returns {void}
|
|
*/
|
|
const onFolderDragLeave = (event) => {
|
|
if (!event.currentTarget.contains(event.relatedTarget)) {
|
|
hoveredFolder.value = null
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 유효한 내부 드래그에 한해 폴더 이동을 요청한다.
|
|
* @param {DragEvent} event - 드롭 이벤트
|
|
* @param {string} folder - 대상 폴더
|
|
* @returns {void}
|
|
*/
|
|
const onFolderDrop = (event, folder) => {
|
|
event.preventDefault()
|
|
hoveredFolder.value = null
|
|
if (props.draggingCount && !props.busy && !isThumbnailFolderPath(folder) && props.deletingFolder !== folder) {
|
|
emit('drop-folder', folder)
|
|
}
|
|
}
|
|
|
|
watch(() => props.draggingCount, (count) => {
|
|
if (!count) {
|
|
hoveredFolder.value = null
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<aside
|
|
v-if="props.mode === 'library'"
|
|
class="admin-media-folder-panel admin-media__folders rounded border border-line bg-white p-3"
|
|
>
|
|
<button
|
|
class="admin-media__folder-button flex w-full items-center justify-between rounded px-3 py-2 text-left text-sm font-semibold hover:bg-surface"
|
|
:class="hoveredFolder === '' ? 'bg-sky-50 text-sky-900 ring-2 ring-inset ring-sky-500 hover:bg-sky-50' : !props.activeFolder ? 'bg-[#15171a] text-white hover:bg-[#15171a]' : 'text-ink'"
|
|
type="button"
|
|
:disabled="props.busy"
|
|
@click="emit('select-folder', '')"
|
|
@dragenter="onFolderDragOver($event, '')"
|
|
@dragover="onFolderDragOver($event, '')"
|
|
@dragleave="onFolderDragLeave"
|
|
@drop="onFolderDrop($event, '미분류')"
|
|
>
|
|
<span>
|
|
전체 미디어
|
|
<span v-if="hoveredFolder === ''" class="admin-media__folder-drop-hint mt-1 block text-xs font-semibold">놓으면 {{ props.draggingCount }}개를 미분류로 이동</span>
|
|
</span>
|
|
<span>{{ props.libraryCount }}</span>
|
|
</button>
|
|
|
|
<div class="admin-media__folder-list mt-3 grid gap-1">
|
|
<div
|
|
v-for="folder in props.folders"
|
|
:key="folder"
|
|
class="admin-media__folder-row flex items-stretch rounded transition-colors"
|
|
:class="hoveredFolder === folder ? 'admin-media__folder-row--drop-target bg-sky-50 text-sky-900 ring-2 ring-inset ring-sky-500' : props.activeFolder === folder ? 'bg-[#15171a] text-white' : 'text-ink hover:bg-surface'"
|
|
@dragenter="onFolderDragOver($event, folder)"
|
|
@dragover="onFolderDragOver($event, folder)"
|
|
@dragleave="onFolderDragLeave"
|
|
@drop="onFolderDrop($event, folder)"
|
|
>
|
|
<button
|
|
class="admin-media__folder-button flex min-w-0 flex-1 items-center justify-between rounded py-2 pr-3 text-left text-sm"
|
|
:style="{ paddingLeft: `${12 + getFolderDepth(folder) * 14}px` }"
|
|
type="button"
|
|
:disabled="props.busy"
|
|
:title="folder"
|
|
:aria-current="props.activeFolder === folder ? 'true' : undefined"
|
|
@click="emit('select-folder', folder)"
|
|
>
|
|
<span class="admin-media__folder-label min-w-0">
|
|
<span class="admin-media__folder-name block truncate">{{ getFolderName(folder) }}</span>
|
|
<span v-if="hoveredFolder === folder" class="admin-media__folder-drop-hint mt-1 block text-xs font-semibold">놓으면 {{ props.draggingCount }}개 이동</span>
|
|
</span>
|
|
<span class="admin-media__folder-count shrink-0 text-xs opacity-70">{{ props.folderMediaCounts[folder] || 0 }}</span>
|
|
</button>
|
|
<AdminRowMoreMenu
|
|
v-if="folder !== '미분류' && !isThumbnailFolderPath(folder)"
|
|
v-model:open-menu-id="openMenuId"
|
|
:item-id="getFolderMenuId(folder)"
|
|
menu-label="폴더 메뉴"
|
|
size="sm"
|
|
class="mr-0.5 shrink-0"
|
|
:inverse="props.activeFolder === folder && hoveredFolder !== folder"
|
|
:busy="props.busy || props.deletingFolder === folder"
|
|
>
|
|
<button
|
|
class="admin-row-more-menu__item admin-row-more-menu__item--danger"
|
|
type="button"
|
|
role="menuitem"
|
|
:disabled="props.busy || props.deletingFolder === folder"
|
|
@click="emit('remove-folder', folder)"
|
|
>
|
|
폴더 삭제
|
|
</button>
|
|
</AdminRowMoreMenu>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-media__folder-actions mt-4 border-t border-line pt-4">
|
|
<button
|
|
class="admin-media__folder-add w-full rounded bg-[#15171a] px-3 py-2 text-xs font-semibold text-white"
|
|
type="button"
|
|
:disabled="props.busy"
|
|
@click="emit('create-folder')"
|
|
>
|
|
폴더 추가
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<aside
|
|
v-else
|
|
class="admin-media-folder-panel admin-media__folders admin-media__folders--thumbnails rounded border border-line bg-white p-3"
|
|
>
|
|
<button
|
|
class="admin-media__folder-button flex w-full items-center justify-between rounded px-3 py-2 text-left text-sm font-semibold bg-[#15171a] text-white hover:bg-[#15171a]"
|
|
type="button"
|
|
@click="emit('select-folder', '')"
|
|
>
|
|
<span>{{ props.activeSystemMediaTitle }}</span>
|
|
<span>{{ props.activeSystemMediaCount }}</span>
|
|
</button>
|
|
<p class="admin-media__thumb-hint mt-4 text-xs leading-relaxed text-muted">
|
|
{{ props.activeSystemMediaHint }}
|
|
</p>
|
|
</aside>
|
|
</template>
|