|
import { api } from '../api.js';
|
|
|
|
export class SharedItems extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.myShares = [];
|
|
this.boundHandleClick = this.handleClick.bind(this);
|
|
}
|
|
|
|
async connectedCallback() {
|
|
this.addEventListener('click', this.boundHandleClick);
|
|
await this.loadMyShares();
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this.removeEventListener('click', this.boundHandleClick);
|
|
}
|
|
|
|
async loadMyShares() {
|
|
try {
|
|
this.myShares = await api.listMyShares();
|
|
this.render();
|
|
} catch (error) {
|
|
console.error('Failed to load shared items:', error);
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: 'Failed to load shared items: ' + error.message, type: 'error' }
|
|
}));
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (this.myShares.length === 0) {
|
|
this.innerHTML = `
|
|
<div class="shared-items-container">
|
|
<div class="file-list-header">
|
|
<h2>Shared Items</h2>
|
|
</div>
|
|
<p class="empty-state">No shared items found.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
this.innerHTML = `
|
|
<div class="shared-items-container">
|
|
<div class="file-list-header">
|
|
<h2>Shared Items</h2>
|
|
</div>
|
|
<div class="share-list">
|
|
${this.myShares.map(share => this.renderShare(share)).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
this.attachListeners();
|
|
}
|
|
|
|
renderShare(share) {
|
|
const shareLink = `${window.location.origin}/share/${share.token}`;
|
|
const expiresAt = share.expires_at ? new Date(share.expires_at).toLocaleString() : 'Never';
|
|
const targetName = share.file ? share.file.name : (share.folder ? share.folder.name : 'N/A');
|
|
const targetType = share.file ? 'File' : (share.folder ? 'Folder' : 'N/A');
|
|
|
|
return `
|
|
<div class="share-item" data-share-id="${share.id}">
|
|
<div class="share-info">
|
|
<p><strong>${targetType}:</strong> ${targetName}</p>
|
|
<p><strong>Permission:</strong> ${share.permission_level}</p>
|
|
<p><strong>Expires:</strong> ${expiresAt}</p>
|
|
<p><strong>Password Protected:</strong> ${share.password_protected ? 'Yes' : 'No'}</p>
|
|
<p><strong>Access Count:</strong> ${share.access_count}</p>
|
|
<input type="text" value="${shareLink}" readonly class="input-field share-link-input">
|
|
</div>
|
|
<div class="share-actions">
|
|
<button class="button button-small" data-action="copy-link" data-link="${shareLink}">Copy Link</button>
|
|
<button class="button button-small" data-action="edit-share" data-id="${share.id}">Edit</button>
|
|
<button class="button button-small button-danger" data-action="delete-share" data-id="${share.id}">Delete</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
handleClick(e) {
|
|
const target = e.target;
|
|
if (target.closest('.share-actions') && target.classList.contains('button')) {
|
|
e.stopPropagation();
|
|
const action = target.dataset.action;
|
|
const id = parseInt(target.dataset.id);
|
|
const link = target.dataset.link;
|
|
|
|
if (action === 'copy-link') {
|
|
this.copyLink(link);
|
|
} else if (action === 'edit-share') {
|
|
this.handleEditShare(id);
|
|
} else if (action === 'delete-share') {
|
|
this.handleDeleteShare(id);
|
|
}
|
|
}
|
|
}
|
|
|
|
attachListeners() {
|
|
}
|
|
|
|
copyLink(link) {
|
|
navigator.clipboard.writeText(link).then(() => {
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: 'Share link copied to clipboard!', type: 'success' }
|
|
}));
|
|
}).catch(err => {
|
|
console.error('Failed to copy link: ', err);
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: 'Failed to copy link.', type: 'error' }
|
|
}));
|
|
});
|
|
}
|
|
|
|
handleEditShare(shareId) {
|
|
// For now, we'll just show a toast. A full implementation would open a modal for editing.
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: `Edit share ${shareId} - functionality to be implemented.`, type: 'info' }
|
|
}));
|
|
}
|
|
|
|
async handleDeleteShare(shareId) {
|
|
if (confirm('Are you sure you want to delete this share link?')) {
|
|
try {
|
|
await api.deleteShare(shareId);
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: 'Share link deleted successfully!', type: 'success' }
|
|
}));
|
|
await this.loadMyShares(); // Reload the list
|
|
} catch (error) {
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: 'Failed to delete share link: ' + error.message, type: 'error' }
|
|
}));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('shared-items', SharedItems);
|