47 lines
3.5 KiB
HTML
47 lines
3.5 KiB
HTML
<!-- Shares List Modal -->
|
|
<div v-if="showSharesListModal" @click.self="closeSharesList" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
|
|
<div class="bg-[var(--bg-secondary)] rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
|
|
<div class="p-6 border-b border-[var(--border-primary)] flex justify-between items-center">
|
|
<h3 class="text-lg font-semibold" v-text="t('modal.sharedTranscripts')"></h3>
|
|
<button @click="closeSharesList" class="p-2 rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 space-y-4 overflow-y-auto">
|
|
<div v-if="isLoadingShares" class="text-center">
|
|
<i class="fas fa-spinner fa-spin text-2xl text-[var(--text-muted)]"></i>
|
|
</div>
|
|
<div v-else-if="userShares.length === 0" class="text-center text-[var(--text-muted)]">
|
|
<span v-text="t('sharedTranscripts.noSharedTranscripts')"></span>
|
|
</div>
|
|
<div v-else class="space-y-3">
|
|
<div v-for="share in userShares" :key="share.id" class="bg-[var(--bg-tertiary)] p-4 rounded-lg border border-[var(--border-primary)]">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<p class="font-semibold">${share.recording_title}</p>
|
|
<p class="text-sm text-[var(--text-muted)]">${ t('help.sharedOn') }: ${share.created_at}</p>
|
|
</div>
|
|
<button @click="confirmDeleteShare(share)" class="text-red-500 hover:text-red-700 p-1"><i class="fas fa-trash"></i></button>
|
|
</div>
|
|
<div class="mt-4 flex items-center gap-4">
|
|
<label class="flex items-center text-sm">
|
|
<input type="checkbox" v-model="share.share_summary" @change="updateShare(share)" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
|
|
<span class="ml-2" v-text="t('form.shareSummary')"></span>
|
|
</label>
|
|
<label class="flex items-center text-sm">
|
|
<input type="checkbox" v-model="share.share_notes" @change="updateShare(share)" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
|
|
<span class="ml-2" v-text="t('form.shareNotes')"></span>
|
|
</label>
|
|
</div>
|
|
<div class="mt-4 relative">
|
|
<input :value="'{{ request.url_root }}share/' + share.public_id" :id="'share-link-' + share.id" readonly class="w-full px-3 py-2 pr-12 bg-[var(--bg-input)] border border-[var(--border-secondary)] rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[var(--border-accent)]">
|
|
<button @click="copyIndividualShareLink(share.id)" class="absolute right-1.5 top-1/2 -translate-y-1/2 w-7 h-7 flex items-center justify-center rounded bg-[var(--bg-button)] text-[var(--text-button)] hover:bg-[var(--bg-button-hover)] transition-colors" :title="t('buttons.copy')">
|
|
<i :class="copiedShareId === share.id ? 'fas fa-check' : 'fas fa-copy'" class="text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|