|
import { api } from '../api.js';
|
|
import { BaseFileList } from './base-file-list.js';
|
|
|
|
export class RecentFiles extends BaseFileList {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
async connectedCallback() {
|
|
super.connectedCallback();
|
|
await this.loadRecentFiles();
|
|
}
|
|
|
|
async loadRecentFiles() {
|
|
try {
|
|
this.files = await api.listRecentFiles();
|
|
this.folders = [];
|
|
this.selectedFiles.clear();
|
|
this.selectedFolders.clear();
|
|
this.render();
|
|
} catch (error) {
|
|
console.error('Failed to load recent files:', error);
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: 'Failed to load recent files: ' + error.message, type: 'error' }
|
|
}));
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const hasSelected = this.selectedFiles.size > 0;
|
|
const totalSelected = this.selectedFiles.size;
|
|
const allSelected = this.files.length > 0 && this.selectedFiles.size === this.files.length;
|
|
const someSelected = hasSelected && !allSelected;
|
|
|
|
if (this.files.length === 0) {
|
|
this.innerHTML = `
|
|
<div class="file-list-container">
|
|
<div class="file-list-header">
|
|
<h2>Recent Files</h2>
|
|
</div>
|
|
<p class="empty-state">No recent files found.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
this.innerHTML = `
|
|
<div class="file-list-container">
|
|
<div class="file-list-header">
|
|
<div class="header-left">
|
|
<h2>Recent Files</h2>
|
|
${this.files.length > 0 ? `
|
|
<div class="selection-controls">
|
|
<input type="checkbox" id="select-all" ${allSelected ? 'checked' : ''} ${someSelected ? 'data-indeterminate="true"' : ''}>
|
|
<label for="select-all">
|
|
${hasSelected ? `${totalSelected} selected` : 'Select all'}
|
|
</label>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
|
|
${hasSelected ? `
|
|
<div class="batch-actions">
|
|
<button class="button button-small" id="clear-selection-btn">Clear Selection</button>
|
|
</div>
|
|
` : ''}
|
|
|
|
<div class="file-grid">
|
|
${this.files.map(file => this.renderRecentFile(file)).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
this.attachListeners();
|
|
this.updateIndeterminateState();
|
|
}
|
|
|
|
renderRecentFile(file) {
|
|
const isSelected = this.selectedFiles.has(file.id);
|
|
const icon = this.getFileIcon(file.mime_type);
|
|
const size = this.formatFileSize(file.size);
|
|
const lastAccessed = file.last_accessed_at ? new Date(file.last_accessed_at).toLocaleString() : 'N/A';
|
|
|
|
return `
|
|
<div class="file-item ${isSelected ? 'selected' : ''}" data-file-id="${file.id}">
|
|
<input type="checkbox" class="select-item" data-type="file" data-id="${file.id}" ${isSelected ? 'checked' : ''}>
|
|
<div class="file-icon">${icon}</div>
|
|
<div class="file-name">${file.name}</div>
|
|
<div class="file-size">${size}</div>
|
|
<div class="file-last-accessed">Accessed: ${lastAccessed}</div>
|
|
<div class="file-actions-menu">
|
|
<button class="action-btn" data-action="download" data-id="${file.id}">Download</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
async handleAction(action, id) {
|
|
try {
|
|
if (action === 'download') {
|
|
const blob = await api.downloadFile(id);
|
|
const file = this.files.find(f => f.id === id);
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = file.name;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: 'File downloaded successfully!', type: 'success' }
|
|
}));
|
|
}
|
|
} catch (error) {
|
|
document.dispatchEvent(new CustomEvent('show-toast', {
|
|
detail: { message: 'Action failed: ' + error.message, type: 'error' }
|
|
}));
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('recent-files', RecentFiles);
|