rbox - Molodetz Institute

 import { api } from '../api.js';
 import { BaseFileList } from './base-file-list.js';
 export class DeletedFiles extends BaseFileList {
     constructor() {
         super();
     }
     async connectedCallback() {
         super.connectedCallback();
         await this.loadDeletedFiles();
     }
     async loadDeletedFiles() {
         try {
             this.files = await api.listDeletedFiles();
             this.folders = [];
             this.selectedFiles.clear();
             this.selectedFolders.clear();
             this.render();
         } catch (error) {
             console.error('Failed to load deleted files:', error);
             this.innerHTML = '<p class="error-message">Failed to load deleted files.</p>';
         }
     }
     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>Deleted Files</h2>
                     </div>
                     <p class="empty-state">No deleted files found.</p>
                 </div>
             `;
             return;
         }
         this.innerHTML = `
             <div class="file-list-container">
                 <div class="file-list-header">
                     <div class="header-left">
                         <h2>Deleted 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 button-primary" id="batch-restore-btn">Restore Selected</button>
                         <button class="button button-small" id="clear-selection-btn">Clear Selection</button>
                     </div>
                 ` : ''}
                 <div class="file-grid">
                     ${this.files.map(file => this.renderDeletedFile(file)).join('')}
                 </div>
             </div>
         `;
         this.attachListeners();
         this.updateIndeterminateState();
     }
     renderDeletedFile(file) {
         const isSelected = this.selectedFiles.has(file.id);
         const icon = this.getFileIcon(file.mime_type);
         const size = this.formatFileSize(file.size);
         const deletedAt = file.deleted_at ? new Date(file.deleted_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-deleted-at">Deleted: ${deletedAt}</div>
                 <div class="file-actions-menu">
                     <button class="action-btn" data-action="restore" data-id="${file.id}">Restore</button>
                 </div>
             </div>
         `;
     }
     createBatchActionsBar() {
         const container = this.querySelector('.file-list-container');
         const header = container.querySelector('.file-list-header');
         const batchBar = document.createElement('div');
         batchBar.className = 'batch-actions';
         batchBar.innerHTML = `
             <button class="button button-small button-primary" id="batch-restore-btn">Restore Selected</button>
             <button class="button button-small" id="clear-selection-btn">Clear Selection</button>
         `;
         header.insertAdjacentElement('afterend', batchBar);
     }
     attachListeners() {
         const batchRestoreBtn = this.querySelector('#batch-restore-btn');
         if (batchRestoreBtn) {
             batchRestoreBtn.addEventListener('click', () => this.handleBatchRestore());
         }
     }
     async handleBatchRestore() {
         const totalSelected = this.selectedFiles.size;
         if (totalSelected === 0) return;
         if (!confirm(`Restore ${totalSelected} files?`)) return;
         try {
             for (const fileId of this.selectedFiles) {
                 await api.restoreFile(fileId);
             }
             document.dispatchEvent(new CustomEvent('show-toast', {
                 detail: { message: 'Files restored successfully!', type: 'success' }
             }));
             await this.loadDeletedFiles();
         } catch (error) {
             document.dispatchEvent(new CustomEvent('show-toast', {
                 detail: { message: 'Failed to restore files: ' + error.message, type: 'error' }
             }));
         }
     }
     async handleAction(action, id) {
         try {
             if (action === 'restore') {
                 await api.restoreFile(id);
                 document.dispatchEvent(new CustomEvent('show-toast', {
                     detail: { message: 'File restored successfully!', type: 'success' }
                 }));
                 await this.loadDeletedFiles();
             }
         } catch (error) {
             document.dispatchEvent(new CustomEvent('show-toast', {
                 detail: { message: 'Action failed: ' + error.message, type: 'error' }
             }));
         }
     }
 }
 customElements.define('deleted-files', DeletedFiles);