rbox - Molodetz Institute

 import { api } from '../api.js';
 export class FileList extends HTMLElement {
     constructor() {
         super();
         this.currentFolderId = null;
         this.files = [];
         this.folders = [];
     }
     async connectedCallback() {
         await this.loadContents(null);
     }
     async loadContents(folderId) {
         this.currentFolderId = folderId;
         try {
             this.folders = await api.listFolders(folderId);
             this.files = await api.listFiles(folderId);
             this.render();
         } catch (error) {
             console.error('Failed to load contents:', error);
         }
     }
     setFiles(files) {
         this.files = files;
         this.folders = [];
         this.render();
     }
     render() {
         this.innerHTML = `
             <div class="file-list-container">
                 <div class="file-list-header">
                     <h2>Files</h2>
                     <div class="file-actions">
                         <button class="button" id="create-folder-btn">New Folder</button>
                         <button class="button button-primary" id="upload-btn">Upload</button>
                     </div>
                 </div>
                 <div class="file-grid">
                     ${this.folders.map(folder => this.renderFolder(folder)).join('')}
                     ${this.files.map(file => this.renderFile(file)).join('')}
                 </div>
             </div>
         `;
         this.attachListeners();
     }
     renderFolder(folder) {
         return `
             <div class="file-item folder-item" data-folder-id="${folder.id}">
                 <div class="file-icon">&#128193;</div>
                 <div class="file-name">${folder.name}</div>
                 <div class="file-actions-menu">
                     <button class="action-btn" data-action="delete-folder" data-id="${folder.id}">Delete</button>
                 </div>
             </div>
         `;
     }
     renderFile(file) {
         const icon = this.getFileIcon(file.mime_type);
         const size = this.formatFileSize(file.size);
         return `
             <div class="file-item" data-file-id="${file.id}">
                 <div class="file-icon">${icon}</div>
                 <div class="file-name">${file.name}</div>
                 <div class="file-size">${size}</div>
                 <div class="file-actions-menu">
                     <button class="action-btn" data-action="download" data-id="${file.id}">Download</button>
                     <button class="action-btn" data-action="rename" data-id="${file.id}">Rename</button>
                     <button class="action-btn" data-action="delete" data-id="${file.id}">Delete</button>
                     <button class="action-btn" data-action="share" data-id="${file.id}">Share</button>
                 </div>
             </div>
         `;
     }
     getFileIcon(mimeType) {
         if (mimeType.startsWith('image/')) return '&#128247;';
         if (mimeType.startsWith('video/')) return '&#127909;';
         if (mimeType.startsWith('audio/')) return '&#127925;';
         if (mimeType.includes('pdf')) return '&#128196;';
         if (mimeType.includes('text')) return '&#128196;';
         return '&#128196;';
     }
     formatFileSize(bytes) {
         if (bytes < 1024) return bytes + ' B';
         if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
         if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
         return (bytes / 1073741824).toFixed(1) + ' GB';
     }
     attachListeners() {
         this.querySelector('#upload-btn')?.addEventListener('click', () => {
             this.dispatchEvent(new CustomEvent('upload-request'));
         });
         this.querySelector('#create-folder-btn')?.addEventListener('click', async () => {
             await this.handleCreateFolder();
         });
         this.querySelectorAll('.folder-item').forEach(item => {
             item.addEventListener('dblclick', () => {
                 const folderId = parseInt(item.dataset.folderId);
                 this.dispatchEvent(new CustomEvent('folder-open', { detail: { folderId } }));
             });
         });
         this.querySelectorAll('.file-item:not(.folder-item)').forEach(item => {
             item.addEventListener('click', (e) => {
                 if (!e.target.classList.contains('action-btn')) {
                     const fileId = parseInt(item.dataset.fileId);
                     const file = this.files.find(f => f.id === fileId);
                     this.dispatchEvent(new CustomEvent('photo-click', {
                         detail: { photo: file },
                         bubbles: true
                     }));
                 }
             });
         });
         this.querySelectorAll('.action-btn').forEach(btn => {
             btn.addEventListener('click', async (e) => {
                 e.stopPropagation();
                 const action = btn.dataset.action;
                 const id = parseInt(btn.dataset.id);
                 await this.handleAction(action, id);
             });
         });
     }
     triggerCreateFolder() {
         this.handleCreateFolder();
     }
     async handleCreateFolder() {
         const name = prompt('Enter folder name:');
         if (name) {
             try {
                 await api.createFolder(name, this.currentFolderId);
                 await this.loadContents(this.currentFolderId);
             } catch (error) {
                 alert('Failed to create folder: ' + error.message);
             }
         }
     }
     async handleAction(action, id) {
         try {
             switch (action) {
                 case '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);
                     break;
                 case 'rename':
                     const newName = prompt('Enter new name:');
                     if (newName) {
                         await api.renameFile(id, newName);
                         await this.loadContents(this.currentFolderId);
                     }
                     break;
                 case 'delete':
                     if (confirm('Are you sure you want to delete this file?')) {
                         await api.deleteFile(id);
                         await this.loadContents(this.currentFolderId);
                     }
                     break;
                 case 'delete-folder':
                     if (confirm('Are you sure you want to delete this folder?')) {
                         await api.deleteFolder(id);
                         await this.loadContents(this.currentFolderId);
                     }
                     break;
                 case 'share':
                     this.dispatchEvent(new CustomEvent('share-request', { detail: { fileId: id } }));
                     break;
             }
         } catch (error) {
             alert('Action failed: ' + error.message);
         }
     }
 }
 customElements.define('file-list', FileList);