102 lines
5.8 KiB
HTML
102 lines
5.8 KiB
HTML
<!-- Bulk Tag Modal -->
|
|
<div v-if="showBulkTagModal" @click.self="closeBulkTagModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-[100] p-4 backdrop-blur-sm">
|
|
<div class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-md max-h-[80vh] flex flex-col">
|
|
<div class="p-6 border-b border-[var(--border-primary)] flex-shrink-0">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-[var(--bg-accent)] rounded-full flex items-center justify-center">
|
|
<i class="fas fa-tags text-[var(--text-accent)]"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-[var(--text-primary)]">Bulk Tag Update</h3>
|
|
<p class="text-sm text-[var(--text-muted)]">${ selectedCount } recording${ selectedCount !== 1 ? 's' : '' } selected</p>
|
|
</div>
|
|
</div>
|
|
<button @click="closeBulkTagModal" class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 overflow-y-auto flex-1">
|
|
<!-- Action Toggle -->
|
|
<div class="flex rounded-lg bg-[var(--bg-tertiary)] p-1 mb-4">
|
|
<button @click="bulkTagAction = 'add'"
|
|
:class="[
|
|
'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors',
|
|
bulkTagAction === 'add'
|
|
? 'bg-[var(--bg-button)] text-[var(--text-button)]'
|
|
: 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
|
|
]">
|
|
<i class="fas fa-plus mr-2"></i>Add Tag
|
|
</button>
|
|
<button @click="bulkTagAction = 'remove'"
|
|
:class="[
|
|
'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors',
|
|
bulkTagAction === 'remove'
|
|
? 'bg-[var(--bg-button)] text-[var(--text-button)]'
|
|
: 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
|
|
]">
|
|
<i class="fas fa-minus mr-2"></i>Remove Tag
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tag Selection -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
Select a tag to ${ bulkTagAction }
|
|
</label>
|
|
<div class="max-h-64 overflow-y-auto space-y-2 border border-[var(--border-secondary)] rounded-lg p-3 bg-[var(--bg-input)]">
|
|
<button v-for="tag in availableTags" :key="tag.id"
|
|
@click="bulkTagSelectedId = tag.id"
|
|
:class="[
|
|
'w-full flex items-center justify-between px-3 py-2 rounded-lg transition-colors',
|
|
bulkTagSelectedId == tag.id
|
|
? 'bg-[var(--bg-accent)] ring-2 ring-[var(--border-accent)]'
|
|
: 'hover:bg-[var(--bg-tertiary)]'
|
|
]">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-3 h-3 rounded-full flex-shrink-0" :style="{ backgroundColor: tag.color }"></span>
|
|
<span class="text-sm text-[var(--text-primary)]">${ tag.name }</span>
|
|
<i v-if="tag.group_id" class="fas fa-users text-xs text-[var(--text-muted)]" title="Group tag"></i>
|
|
</div>
|
|
<i v-if="bulkTagSelectedId == tag.id" class="fas fa-check text-[var(--text-accent)]"></i>
|
|
</button>
|
|
<p v-if="availableTags.length === 0" class="text-sm text-[var(--text-muted)] text-center py-4">
|
|
No tags available. Create tags in settings.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info message -->
|
|
<div class="mt-4 p-3 bg-[var(--bg-tertiary)] rounded-lg text-sm text-[var(--text-muted)]">
|
|
<i class="fas fa-info-circle mr-2"></i>
|
|
<span v-if="bulkTagAction === 'add'">
|
|
The selected tag will be added to all ${ selectedCount } recording${ selectedCount !== 1 ? 's' : '' }.
|
|
</span>
|
|
<span v-else>
|
|
The selected tag will be removed from all ${ selectedCount } recording${ selectedCount !== 1 ? 's' : '' } that have it.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 border-t border-[var(--border-primary)] flex justify-end gap-3 flex-shrink-0">
|
|
<button @click="closeBulkTagModal"
|
|
class="px-4 py-2 text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
|
|
Cancel
|
|
</button>
|
|
<button @click="executeBulkTag"
|
|
:disabled="!bulkTagSelectedId"
|
|
:class="[
|
|
'px-4 py-2 rounded-lg transition-colors flex items-center gap-2',
|
|
bulkTagSelectedId
|
|
? 'bg-[var(--bg-button)] text-[var(--text-button)] hover:bg-[var(--bg-button-hover)]'
|
|
: 'bg-[var(--bg-tertiary)] text-[var(--text-muted)] cursor-not-allowed'
|
|
]">
|
|
<i :class="['fas', bulkTagAction === 'add' ? 'fa-plus' : 'fa-minus']"></i>
|
|
${ bulkTagAction === 'add' ? 'Add' : 'Remove' } Tag
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|