236 lines
7.0 KiB
Vue
236 lines
7.0 KiB
Vue
<template>
|
|
<aside class="fc-bulk-panel" :class="{ active: sel.isSelectMode }">
|
|
<div class="fc-bulk-panel__head">
|
|
<h3>Bulk Edit</h3>
|
|
<v-btn icon="mdi-close" variant="text" size="small" @click="sel.exitSelectMode()" />
|
|
</div>
|
|
<div class="fc-bulk-panel__stat">{{ sel.count }} image(s) selected</div>
|
|
|
|
<div class="fc-bulk-panel__section">
|
|
<h4>Add tag</h4>
|
|
<v-autocomplete
|
|
v-model="addModel" :items="addHits" item-title="name" item-value="id"
|
|
:loading="addLoading" density="compact" variant="outlined" hide-details
|
|
placeholder="Search tags…" no-filter
|
|
@update:search="onAddSearch" @update:model-value="onAddPick"
|
|
/>
|
|
</div>
|
|
|
|
<div class="fc-bulk-panel__section">
|
|
<h4>Remove common tag</h4>
|
|
<div v-if="sel.commonTags.length === 0" class="fc-bulk-panel__hint">
|
|
No tags common to all selected images.
|
|
</div>
|
|
<v-chip
|
|
v-for="t in sel.commonTags" :key="t.id" size="small" label
|
|
class="ma-1" closable @click:close="sel.bulkRemove(t.id)"
|
|
>{{ t.name }}</v-chip>
|
|
</div>
|
|
|
|
<div class="fc-bulk-panel__section">
|
|
<h4>Consensus suggestions</h4>
|
|
<div v-if="sel.count < 2" class="fc-bulk-panel__hint">
|
|
Select 2+ images for consensus suggestions.
|
|
</div>
|
|
<template v-else>
|
|
<div
|
|
v-for="(items, cat) in sel.consensus" :key="cat"
|
|
class="fc-bulk-panel__cat"
|
|
>
|
|
<div class="fc-bulk-panel__cat-name">{{ cat }}</div>
|
|
<div
|
|
v-for="s in items" :key="s.canonical_tag_id"
|
|
class="fc-bulk-panel__sug"
|
|
>
|
|
<span>{{ s.name }}</span>
|
|
<span class="fc-bulk-panel__cov">
|
|
{{ Math.round(s.coverage * 100) }}% · {{ s.confidence.toFixed(2) }}
|
|
</span>
|
|
<v-btn
|
|
size="x-small" variant="tonal" color="accent"
|
|
@click="sel.bulkAdd(s.canonical_tag_id, 'ml_accepted')"
|
|
>Accept</v-btn>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="fc-bulk-panel__section">
|
|
<h4>Destructive</h4>
|
|
<v-btn
|
|
color="error" variant="flat" rounded="pill" block
|
|
prepend-icon="mdi-delete-forever"
|
|
:disabled="!sel.count"
|
|
:loading="deleting"
|
|
@click="onDeleteClick"
|
|
>Delete {{ sel.count }} selected</v-btn>
|
|
</div>
|
|
|
|
<div class="fc-bulk-panel__foot">
|
|
<v-btn variant="text" block @click="sel.clear()">Clear selection</v-btn>
|
|
</div>
|
|
|
|
<DestructiveConfirmModal
|
|
v-model="deleteModalOpen"
|
|
action="delete"
|
|
kind="images-selection"
|
|
:run-id="bulkToken"
|
|
tier="C"
|
|
:projected-counts="bulkProjectedCounts"
|
|
:description="bulkDescription"
|
|
@confirm="onDeleteConfirm"
|
|
/>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from 'vue'
|
|
import { useGallerySelectionStore } from '../../stores/gallerySelection.js'
|
|
import { useAdminStore } from '../../stores/admin.js'
|
|
import { useApi } from '../../composables/useApi.js'
|
|
import DestructiveConfirmModal from '../modal/DestructiveConfirmModal.vue'
|
|
|
|
const sel = useGallerySelectionStore()
|
|
const api = useApi()
|
|
const adminStore = useAdminStore()
|
|
|
|
const addModel = ref(null)
|
|
const addHits = ref([])
|
|
const addLoading = ref(false)
|
|
let addDebounce = null
|
|
|
|
function onAddSearch(q) {
|
|
if (addDebounce) clearTimeout(addDebounce)
|
|
if (!q) { addHits.value = []; return }
|
|
addDebounce = setTimeout(async () => {
|
|
addLoading.value = true
|
|
try {
|
|
addHits.value = await api.get('/api/tags/autocomplete', {
|
|
params: { q, limit: 20 }
|
|
})
|
|
} finally {
|
|
addLoading.value = false
|
|
}
|
|
}, 250)
|
|
}
|
|
async function onAddPick(id) {
|
|
if (id == null) return
|
|
await sel.bulkAdd(id)
|
|
addModel.value = null
|
|
addHits.value = []
|
|
}
|
|
|
|
// Refresh common tags + consensus whenever the selection changes.
|
|
watch(() => sel.order.length, () => {
|
|
if (sel.isSelectMode) sel.refresh()
|
|
})
|
|
|
|
// --- FC-3k bulk delete -----------------------------------------------
|
|
|
|
const deleting = ref(false)
|
|
const deleteModalOpen = ref(false)
|
|
const bulkProjected = ref(null)
|
|
const bulkToken = ref('')
|
|
|
|
const bulkProjectedCounts = computed(() => bulkProjected.value
|
|
? {
|
|
images: bulkProjected.value.images_found,
|
|
thumbnails: bulkProjected.value.thumbs_to_unlink,
|
|
bytes: bulkProjected.value.bytes_on_disk,
|
|
}
|
|
: null,
|
|
)
|
|
const bulkDescription = computed(
|
|
() => bulkProjected.value
|
|
? `${bulkProjected.value.images_found} images, `
|
|
+ `${Math.round(bulkProjected.value.bytes_on_disk / 1_048_576)} MiB on disk`
|
|
: '',
|
|
)
|
|
|
|
async function _computeSha8(ids) {
|
|
const canon = [...ids].sort((a, b) => a - b).join(',')
|
|
const buf = new TextEncoder().encode(canon)
|
|
const hashBuf = await crypto.subtle.digest('SHA-256', buf)
|
|
const bytes = new Uint8Array(hashBuf)
|
|
let hex = ''
|
|
for (let i = 0; i < 4; i++) {
|
|
hex += bytes[i].toString(16).padStart(2, '0')
|
|
}
|
|
return hex
|
|
}
|
|
|
|
async function onDeleteClick() {
|
|
if (!sel.order.length) return
|
|
deleting.value = true
|
|
try {
|
|
bulkProjected.value = await adminStore.projectBulkImageDelete(sel.order)
|
|
bulkToken.value = await _computeSha8(sel.order)
|
|
deleteModalOpen.value = true
|
|
} finally {
|
|
deleting.value = false
|
|
}
|
|
}
|
|
|
|
async function onDeleteConfirm(token) {
|
|
deleting.value = true
|
|
try {
|
|
const result = await adminStore.dispatchBulkImageDelete(sel.order, token)
|
|
const taskId = result.task_id
|
|
if (taskId) {
|
|
adminStore.pollTaskUntilDone(taskId).catch(() => {})
|
|
}
|
|
sel.clear()
|
|
} finally {
|
|
deleting.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-bulk-panel {
|
|
position: fixed; top: 0; right: 0;
|
|
width: 320px; height: 100vh; z-index: 1100;
|
|
background: rgb(var(--v-theme-surface));
|
|
border-left: 1px solid rgb(var(--v-theme-surface-light));
|
|
box-shadow: -2px 0 16px rgba(0, 0, 0, 0.4);
|
|
transform: translateX(100%);
|
|
transition: transform 0.3s ease;
|
|
display: flex; flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
.fc-bulk-panel.active { transform: translateX(0); }
|
|
.fc-bulk-panel__head {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid rgb(var(--v-theme-surface-light));
|
|
}
|
|
.fc-bulk-panel__head h3 {
|
|
font-family: 'Fraunces', Georgia, serif; font-size: 18px; margin: 0;
|
|
}
|
|
.fc-bulk-panel__stat {
|
|
padding: 10px 16px; font-size: 13px; opacity: 0.8;
|
|
background: rgba(232, 228, 216, 0.05);
|
|
}
|
|
.fc-bulk-panel__section {
|
|
padding: 16px;
|
|
border-bottom: 1px solid rgba(232, 228, 216, 0.06);
|
|
}
|
|
.fc-bulk-panel__section h4 {
|
|
margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
|
|
letter-spacing: 0.04em; opacity: 0.7;
|
|
}
|
|
.fc-bulk-panel__hint { font-size: 12px; opacity: 0.6; }
|
|
.fc-bulk-panel__cat-name {
|
|
font-size: 11px; text-transform: uppercase; opacity: 0.5; margin: 8px 0 4px;
|
|
}
|
|
.fc-bulk-panel__sug {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 4px 0; font-size: 13px;
|
|
}
|
|
.fc-bulk-panel__sug span:first-child { flex: 1; min-width: 0; }
|
|
.fc-bulk-panel__cov {
|
|
font-variant-numeric: tabular-nums; opacity: 0.6; font-size: 11px;
|
|
}
|
|
.fc-bulk-panel__foot { margin-top: auto; padding: 12px 16px; }
|
|
</style>
|