adding favorite feature
This commit is contained in:
DioCrafts
@@ -0,0 +1,85 @@
|
||||
/* Estilos para la funcionalidad de favoritos */
|
||||
|
||||
/* Indicador de favorito */
|
||||
.favorite-indicator {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.favorite-indicator:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.favorite-indicator.active {
|
||||
color: #ffc107;
|
||||
text-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
|
||||
}
|
||||
|
||||
/* Estilos para los elementos de la vista de favoritos */
|
||||
.favorite-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Ajustes para la vista de cuadrícula */
|
||||
.file-card.favorite-item {
|
||||
border-left: 3px solid #ffc107;
|
||||
}
|
||||
|
||||
/* Ajustes para la vista de lista */
|
||||
.file-item.favorite-item {
|
||||
position: relative;
|
||||
grid-template-columns: 30px minmax(200px, 2fr) 1fr 1fr 120px;
|
||||
}
|
||||
|
||||
.file-item.favorite-item .favorite-indicator {
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
/* Estilos para el estado vacío específico de favoritos */
|
||||
.favorites-empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 50px 20px;
|
||||
text-align: center;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.favorites-empty-state i {
|
||||
font-size: 48px;
|
||||
color: #ffc107;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.favorites-empty-state p {
|
||||
margin-bottom: 10px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
/* Animación para la estrella de favorito */
|
||||
@keyframes favorite-pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.2); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.favorite-indicator.active {
|
||||
animation: favorite-pulse 0.3s ease;
|
||||
}
|
||||
@@ -8,6 +8,7 @@
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/inlineViewer.css">
|
||||
<link rel="stylesheet" href="/css/favorites.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
|
||||
|
||||
@@ -20,6 +21,7 @@
|
||||
<script src="/js/contextMenus.js"></script>
|
||||
<script src="/js/fileOperations.js"></script>
|
||||
<script src="/js/search.js"></script>
|
||||
<script src="/js/favorites.js"></script>
|
||||
<script src="/js/ui.js"></script>
|
||||
<script src="/js/components/sharedView.js"></script>
|
||||
<script src="/js/app.js"></script>
|
||||
|
||||
+117
-3
@@ -14,7 +14,8 @@ const app = {
|
||||
moveDialogMode: 'file', // Move dialog mode: 'file' or 'folder'
|
||||
isTrashView: false, // Whether we're in trash view
|
||||
isSharedView: false, // Whether we're in shared view
|
||||
currentSection: 'files', // Current section: 'files', 'trash' or 'shared'
|
||||
isFavoritesView: false, // Whether we're in favorites view
|
||||
currentSection: 'files', // Current section: 'files', 'trash', 'shared' or 'favorites'
|
||||
isSearchMode: false, // Whether we're in search mode
|
||||
// File sharing related properties
|
||||
shareDialogItem: null, // Item being shared in share dialog
|
||||
@@ -61,8 +62,24 @@ function initApp() {
|
||||
console.log('Inline viewer is available');
|
||||
} else {
|
||||
console.warn('Inline viewer not initialized yet, will initialize it now');
|
||||
// Create inline viewer if not already created
|
||||
window.inlineViewer = new InlineViewer();
|
||||
try {
|
||||
// Create inline viewer if not already created and if the class exists
|
||||
if (typeof InlineViewer !== 'undefined') {
|
||||
window.inlineViewer = new InlineViewer();
|
||||
} else {
|
||||
console.warn('InlineViewer class is not defined, skipping initialization');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error initializing inline viewer:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize favorites module if available
|
||||
if (window.favorites && window.favorites.init) {
|
||||
console.log('Initializing favorites module');
|
||||
window.favorites.init();
|
||||
} else {
|
||||
console.warn('Favorites module not available or not initializable');
|
||||
}
|
||||
|
||||
// Wait for translations to load before checking authentication
|
||||
@@ -182,6 +199,13 @@ function setupEventListeners() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if this is the favorites item
|
||||
if (item.querySelector('span').getAttribute('data-i18n') === 'nav.favorites') {
|
||||
// Switch to favorites view
|
||||
switchToFavoritesView();
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if this is the trash item
|
||||
if (item === elements.trashBtn) {
|
||||
// Hide shared view if active
|
||||
@@ -735,6 +759,7 @@ function switchToFilesView() {
|
||||
// Reset view flags
|
||||
app.isTrashView = false;
|
||||
app.isSharedView = false;
|
||||
app.isFavoritesView = false;
|
||||
app.currentSection = 'files';
|
||||
|
||||
// Update UI
|
||||
@@ -816,9 +841,98 @@ function switchToFilesView() {
|
||||
loadFiles();
|
||||
}
|
||||
|
||||
/**
|
||||
* Switch to the favorites view
|
||||
*/
|
||||
function switchToFavoritesView() {
|
||||
// Hide other views
|
||||
app.isTrashView = false;
|
||||
app.isSharedView = false;
|
||||
|
||||
// Set favorites view as active
|
||||
app.isFavoritesView = true;
|
||||
app.currentSection = 'favorites';
|
||||
|
||||
// Remove active class from all nav items
|
||||
elements.navItems.forEach(navItem => navItem.classList.remove('active'));
|
||||
|
||||
// Find favorites nav item and make it active
|
||||
const favoritesNavItem = document.querySelector('.nav-item:nth-child(4)');
|
||||
if (favoritesNavItem) {
|
||||
favoritesNavItem.classList.add('active');
|
||||
}
|
||||
|
||||
// Update UI
|
||||
elements.pageTitle.textContent = window.i18n ? window.i18n.t('nav.favorites') : 'Favoritos';
|
||||
|
||||
// Clear breadcrumb and show root
|
||||
ui.updateBreadcrumb(window.i18n ? window.i18n.t('nav.favorites') : 'Favoritos');
|
||||
|
||||
// Hide shared view if it exists
|
||||
if (window.sharedView) {
|
||||
window.sharedView.hide();
|
||||
}
|
||||
|
||||
// Configure actions bar for favorites view
|
||||
elements.actionsBar.innerHTML = `
|
||||
<div class="action-buttons">
|
||||
<!-- No actions needed for favorites view -->
|
||||
</div>
|
||||
<div class="view-toggle">
|
||||
<button class="toggle-btn active" id="grid-view-btn" title="Vista de cuadrícula">
|
||||
<i class="fas fa-th"></i>
|
||||
</button>
|
||||
<button class="toggle-btn" id="list-view-btn" title="Vista de lista">
|
||||
<i class="fas fa-list"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
elements.actionsBar.style.display = 'flex';
|
||||
|
||||
// Restore view toggle event listeners
|
||||
document.getElementById('grid-view-btn').addEventListener('click', ui.switchToGridView);
|
||||
document.getElementById('list-view-btn').addEventListener('click', ui.switchToListView);
|
||||
|
||||
// Update cached elements
|
||||
elements.gridViewBtn = document.getElementById('grid-view-btn');
|
||||
elements.listViewBtn = document.getElementById('list-view-btn');
|
||||
|
||||
// Show standard files containers
|
||||
const filesGrid = document.getElementById('files-grid');
|
||||
const filesListView = document.getElementById('files-list-view');
|
||||
|
||||
if (filesGrid) {
|
||||
filesGrid.style.display = app.currentView === 'grid' ? 'grid' : 'none';
|
||||
}
|
||||
|
||||
if (filesListView) {
|
||||
filesListView.style.display = app.currentView === 'list' ? 'block' : 'none';
|
||||
}
|
||||
|
||||
// Check if favorites module is initialized
|
||||
if (window.favorites) {
|
||||
// Display favorites
|
||||
window.favorites.displayFavorites();
|
||||
} else {
|
||||
console.error('Favorites module not loaded or initialized');
|
||||
|
||||
// Show error in UI
|
||||
const filesGrid = document.getElementById('files-grid');
|
||||
if (filesGrid) {
|
||||
filesGrid.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-exclamation-circle" style="font-size: 48px; color: #f44336; margin-bottom: 16px;"></i>
|
||||
<p>Error al cargar el módulo de favoritos</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expose view switching functions globally
|
||||
window.switchToFilesView = switchToFilesView;
|
||||
window.switchToSharedView = switchToSharedView;
|
||||
window.switchToFavoritesView = switchToFavoritesView;
|
||||
|
||||
/**
|
||||
* Check if user is authenticated and load user's home folder
|
||||
|
||||
@@ -20,6 +20,33 @@ const contextMenus = {
|
||||
window.ui.closeContextMenu();
|
||||
});
|
||||
|
||||
document.getElementById('favorite-folder-option').addEventListener('click', () => {
|
||||
if (window.app.contextMenuTargetFolder) {
|
||||
const folder = window.app.contextMenuTargetFolder;
|
||||
|
||||
// Check if folder is already in favorites to toggle
|
||||
if (window.favorites && window.favorites.isFavorite(folder.id, 'folder')) {
|
||||
// Remove from favorites
|
||||
window.favorites.removeFromFavorites(folder.id, 'folder');
|
||||
// Update menu item text
|
||||
document.getElementById('favorite-folder-option').querySelector('span').textContent =
|
||||
window.i18n ? window.i18n.t('actions.favorite') : 'Añadir a favoritos';
|
||||
} else {
|
||||
// Add to favorites
|
||||
window.favorites.addToFavorites(
|
||||
folder.id,
|
||||
folder.name,
|
||||
'folder',
|
||||
folder.parent_id
|
||||
);
|
||||
// Update menu item text
|
||||
document.getElementById('favorite-folder-option').querySelector('span').textContent =
|
||||
window.i18n ? window.i18n.t('actions.unfavorite') : 'Quitar de favoritos';
|
||||
}
|
||||
}
|
||||
window.ui.closeContextMenu();
|
||||
});
|
||||
|
||||
document.getElementById('rename-folder-option').addEventListener('click', () => {
|
||||
if (window.app.contextMenuTargetFolder) {
|
||||
this.showRenameDialog(window.app.contextMenuTargetFolder);
|
||||
@@ -62,6 +89,33 @@ const contextMenus = {
|
||||
window.ui.closeFileContextMenu();
|
||||
});
|
||||
|
||||
document.getElementById('favorite-file-option').addEventListener('click', () => {
|
||||
if (window.app.contextMenuTargetFile) {
|
||||
const file = window.app.contextMenuTargetFile;
|
||||
|
||||
// Check if file is already in favorites to toggle
|
||||
if (window.favorites && window.favorites.isFavorite(file.id, 'file')) {
|
||||
// Remove from favorites
|
||||
window.favorites.removeFromFavorites(file.id, 'file');
|
||||
// Update menu item text
|
||||
document.getElementById('favorite-file-option').querySelector('span').textContent =
|
||||
window.i18n ? window.i18n.t('actions.favorite') : 'Añadir a favoritos';
|
||||
} else {
|
||||
// Add to favorites
|
||||
window.favorites.addToFavorites(
|
||||
file.id,
|
||||
file.name,
|
||||
'file',
|
||||
file.folder_id
|
||||
);
|
||||
// Update menu item text
|
||||
document.getElementById('favorite-file-option').querySelector('span').textContent =
|
||||
window.i18n ? window.i18n.t('actions.unfavorite') : 'Quitar de favoritos';
|
||||
}
|
||||
}
|
||||
window.ui.closeFileContextMenu();
|
||||
});
|
||||
|
||||
document.getElementById('move-file-option').addEventListener('click', () => {
|
||||
if (window.app.contextMenuTargetFile) {
|
||||
this.showMoveDialog(window.app.contextMenuTargetFile, 'file');
|
||||
|
||||
@@ -0,0 +1,669 @@
|
||||
/**
|
||||
* OxiCloud - Favorites Module
|
||||
* This file handles favoriting files and folders, persisting favorites, and displaying favorite items
|
||||
*/
|
||||
|
||||
// Favorites Module
|
||||
const favorites = {
|
||||
// Key for storing favorites in localStorage
|
||||
STORAGE_KEY: 'oxicloud_favorites',
|
||||
|
||||
// Flag to indicate if backend API is available
|
||||
backendApiAvailable: false,
|
||||
|
||||
/**
|
||||
* Initialize favorites module
|
||||
*/
|
||||
init() {
|
||||
console.log('Initializing favorites module');
|
||||
this.loadFavorites();
|
||||
|
||||
// Check if backend favorites API is available
|
||||
this.checkBackendAvailability();
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if backend favorites API is available
|
||||
*/
|
||||
async checkBackendAvailability() {
|
||||
try {
|
||||
const response = await fetch('/api/favorites', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('oxicloud_token')}`
|
||||
}
|
||||
});
|
||||
|
||||
this.backendApiAvailable = response.ok;
|
||||
console.log(`Backend favorites API ${this.backendApiAvailable ? 'is' : 'is not'} available`);
|
||||
|
||||
// If backend API is available, sync local favorites with server
|
||||
if (this.backendApiAvailable) {
|
||||
this.syncWithServer();
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Error checking backend favorites API availability:', error);
|
||||
this.backendApiAvailable = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Sync local favorites with server
|
||||
*/
|
||||
async syncWithServer() {
|
||||
try {
|
||||
// Get server favorites
|
||||
const response = await fetch('/api/favorites', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('oxicloud_token')}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Server returned ${response.status}`);
|
||||
}
|
||||
|
||||
const serverFavorites = await response.json();
|
||||
const localFavorites = this.loadFavorites();
|
||||
|
||||
console.log('Syncing favorites with server', {
|
||||
serverCount: serverFavorites.length,
|
||||
localCount: localFavorites.length
|
||||
});
|
||||
|
||||
// Create a map of server favorites for quick lookup
|
||||
const serverFavoritesMap = new Map();
|
||||
serverFavorites.forEach(item => {
|
||||
serverFavoritesMap.set(`${item.item_type}:${item.item_id}`, item);
|
||||
});
|
||||
|
||||
// Add local favorites that aren't on server
|
||||
for (const localItem of localFavorites) {
|
||||
const key = `${localItem.type}:${localItem.id}`;
|
||||
if (!serverFavoritesMap.has(key)) {
|
||||
console.log(`Adding local favorite to server: ${key}`);
|
||||
await this.addToServerFavorites(localItem.id, localItem.type);
|
||||
}
|
||||
}
|
||||
|
||||
// Store server favorites locally (complete sync)
|
||||
const mergedFavorites = serverFavorites.map(item => ({
|
||||
id: item.item_id,
|
||||
name: '', // Name will be populated when viewing favorites
|
||||
type: item.item_type,
|
||||
parentId: null, // Will be determined when viewing
|
||||
dateAdded: item.created_at
|
||||
}));
|
||||
|
||||
this.saveFavorites(mergedFavorites);
|
||||
console.log('Favorites sync completed');
|
||||
} catch (error) {
|
||||
console.error('Error syncing favorites with server:', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load favorites from localStorage
|
||||
* @returns {Array} Array of favorite items
|
||||
*/
|
||||
loadFavorites() {
|
||||
try {
|
||||
const stored = localStorage.getItem(this.STORAGE_KEY);
|
||||
return stored ? JSON.parse(stored) : [];
|
||||
} catch (error) {
|
||||
console.error('Error loading favorites:', error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Save favorites to localStorage
|
||||
* @param {Array} favorites - Array of favorite items to save
|
||||
*/
|
||||
saveFavorites(favorites) {
|
||||
try {
|
||||
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(favorites));
|
||||
} catch (error) {
|
||||
console.error('Error saving favorites:', error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Add a favorite to the server
|
||||
* @param {string} id - Item ID
|
||||
* @param {string} type - 'file' or 'folder'
|
||||
*/
|
||||
async addToServerFavorites(id, type) {
|
||||
try {
|
||||
const response = await fetch(`/api/favorites/${type}/${id}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('oxicloud_token')}`,
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Server returned ${response.status}`);
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error adding favorite to server:', error);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove a favorite from the server
|
||||
* @param {string} id - Item ID
|
||||
* @param {string} type - 'file' or 'folder'
|
||||
*/
|
||||
async removeFromServerFavorites(id, type) {
|
||||
try {
|
||||
const response = await fetch(`/api/favorites/${type}/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('oxicloud_token')}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Server returned ${response.status}`);
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error removing favorite from server:', error);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Add an item to favorites
|
||||
* @param {string} id - Item ID
|
||||
* @param {string} name - Item name
|
||||
* @param {string} type - 'file' or 'folder'
|
||||
* @param {string} parentId - Parent folder ID (or null for root items)
|
||||
* @returns {boolean} Success status
|
||||
*/
|
||||
async addToFavorites(id, name, type, parentId) {
|
||||
try {
|
||||
const favorites = this.loadFavorites();
|
||||
|
||||
// Check if already in favorites
|
||||
if (favorites.some(item => item.id === id && item.type === type)) {
|
||||
console.log(`Item ${id} already in favorites`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Add to favorites
|
||||
favorites.push({
|
||||
id,
|
||||
name,
|
||||
type,
|
||||
parentId: parentId || null,
|
||||
dateAdded: new Date().toISOString()
|
||||
});
|
||||
|
||||
// Save updated favorites locally
|
||||
this.saveFavorites(favorites);
|
||||
|
||||
// If backend API is available, sync with server
|
||||
if (this.backendApiAvailable) {
|
||||
await this.addToServerFavorites(id, type);
|
||||
}
|
||||
|
||||
// Show success notification
|
||||
window.ui.showNotification(
|
||||
'Añadido a favoritos',
|
||||
`"${name}" añadido a favoritos`
|
||||
);
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error adding to favorites:', error);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove an item from favorites
|
||||
* @param {string} id - Item ID
|
||||
* @param {string} type - 'file' or 'folder'
|
||||
* @returns {boolean} Success status
|
||||
*/
|
||||
async removeFromFavorites(id, type) {
|
||||
try {
|
||||
let favorites = this.loadFavorites();
|
||||
const initialLength = favorites.length;
|
||||
|
||||
// Find the item to get its name for notification
|
||||
const item = favorites.find(item => item.id === id && item.type === type);
|
||||
|
||||
// Filter out the item
|
||||
favorites = favorites.filter(item => !(item.id === id && item.type === type));
|
||||
|
||||
// Save updated favorites locally
|
||||
this.saveFavorites(favorites);
|
||||
|
||||
// If backend API is available, sync with server
|
||||
if (this.backendApiAvailable) {
|
||||
await this.removeFromServerFavorites(id, type);
|
||||
}
|
||||
|
||||
// Check if anything was removed
|
||||
if (favorites.length < initialLength) {
|
||||
// Show success notification if item was found
|
||||
if (item) {
|
||||
window.ui.showNotification(
|
||||
'Eliminado de favoritos',
|
||||
`"${item.name}" eliminado de favoritos`
|
||||
);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('Error removing from favorites:', error);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if an item is in favorites
|
||||
* @param {string} id - Item ID
|
||||
* @param {string} type - 'file' or 'folder'
|
||||
* @returns {boolean} True if item is in favorites
|
||||
*/
|
||||
isFavorite(id, type) {
|
||||
const favorites = this.loadFavorites();
|
||||
return favorites.some(item => item.id === id && item.type === type);
|
||||
},
|
||||
|
||||
/**
|
||||
* Load and display favorite items in the UI
|
||||
*/
|
||||
async displayFavorites() {
|
||||
try {
|
||||
const favorites = this.loadFavorites();
|
||||
|
||||
// Clear existing content
|
||||
const filesGrid = document.getElementById('files-grid');
|
||||
const filesListView = document.getElementById('files-list-view');
|
||||
|
||||
filesGrid.innerHTML = '';
|
||||
filesListView.innerHTML = `
|
||||
<div class="list-header">
|
||||
<div data-i18n="files.name">Nombre</div>
|
||||
<div data-i18n="files.type">Tipo</div>
|
||||
<div data-i18n="files.size">Tamaño</div>
|
||||
<div data-i18n="files.modified">Modificado</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Update breadcrumb for favorites
|
||||
window.ui.updateBreadcrumb(window.i18n ? window.i18n.t('nav.favorites') : 'Favoritos');
|
||||
|
||||
// Show empty state if no favorites
|
||||
if (favorites.length === 0) {
|
||||
const emptyState = document.createElement('div');
|
||||
emptyState.className = 'empty-state';
|
||||
emptyState.innerHTML = `
|
||||
<i class="fas fa-star" style="font-size: 48px; color: #ddd; margin-bottom: 16px;"></i>
|
||||
<p>${window.i18n ? window.i18n.t('favorites.empty_state') : 'No hay elementos favoritos'}</p>
|
||||
<p>${window.i18n ? window.i18n.t('favorites.empty_hint') : 'Para marcar como favorito, haz clic derecho en cualquier archivo o carpeta'}</p>
|
||||
`;
|
||||
filesGrid.appendChild(emptyState);
|
||||
return;
|
||||
}
|
||||
|
||||
// Load details for each favorite item
|
||||
let loadedItems = 0;
|
||||
const totalItems = favorites.length;
|
||||
|
||||
// Process each favorite item
|
||||
for (const favorite of favorites) {
|
||||
try {
|
||||
if (favorite.type === 'folder') {
|
||||
await this.loadFolderDetails(favorite, filesGrid, filesListView);
|
||||
} else {
|
||||
await this.loadFileDetails(favorite, filesGrid, filesListView);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error loading favorite ${favorite.type} ${favorite.id}:`, error);
|
||||
}
|
||||
|
||||
// Update progress - could be used for loading indicator
|
||||
loadedItems++;
|
||||
console.log(`Loaded ${loadedItems}/${totalItems} favorite items`);
|
||||
}
|
||||
|
||||
// Update file icons
|
||||
window.ui.updateFileIcons();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error displaying favorites:', error);
|
||||
window.ui.showNotification('Error', 'Error al cargar elementos favoritos');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load folder details and add to view
|
||||
* @param {Object} favorite - Favorite folder item
|
||||
* @param {HTMLElement} filesGrid - Grid view container
|
||||
* @param {HTMLElement} filesListView - List view container
|
||||
*/
|
||||
async loadFolderDetails(favorite, filesGrid, filesListView) {
|
||||
try {
|
||||
const response = await fetch(`/api/folders/${favorite.id}`);
|
||||
|
||||
if (response.ok) {
|
||||
const folder = await response.json();
|
||||
|
||||
// Create UI element with favorite indicator
|
||||
this.createFavoriteFolderElement(folder, filesGrid, filesListView);
|
||||
} else if (response.status === 404) {
|
||||
// Folder not found, might be deleted
|
||||
console.log(`Favorite folder ${favorite.id} not found, removing from favorites`);
|
||||
this.removeFromFavorites(favorite.id, 'folder');
|
||||
} else {
|
||||
console.error(`Error loading folder ${favorite.id}:`, response.statusText);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error loading folder details for ${favorite.id}:`, error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load file details and add to view
|
||||
* @param {Object} favorite - Favorite file item
|
||||
* @param {HTMLElement} filesGrid - Grid view container
|
||||
* @param {HTMLElement} filesListView - List view container
|
||||
*/
|
||||
async loadFileDetails(favorite, filesGrid, filesListView) {
|
||||
try {
|
||||
const response = await fetch(`/api/files/${favorite.id}`);
|
||||
|
||||
if (response.ok) {
|
||||
// Check if the response is JSON or binary data like a PDF
|
||||
const contentType = response.headers.get('content-type');
|
||||
|
||||
if (contentType && contentType.includes('application/json')) {
|
||||
const file = await response.json();
|
||||
|
||||
// Create UI element with favorite indicator
|
||||
this.createFavoriteFileElement(file, filesGrid, filesListView);
|
||||
} else {
|
||||
// For non-JSON responses (like PDFs or other binary files)
|
||||
// Create a simplified file element with minimal information
|
||||
const file = {
|
||||
id: favorite.id,
|
||||
name: favorite.name || `File ${favorite.id}`,
|
||||
mime_type: contentType || 'application/octet-stream',
|
||||
size: 0, // We don't know the size from this response
|
||||
modified_at: Math.floor(Date.now() / 1000) // Current time in seconds
|
||||
};
|
||||
|
||||
this.createFavoriteFileElement(file, filesGrid, filesListView);
|
||||
}
|
||||
} else if (response.status === 404) {
|
||||
// File not found, might be deleted
|
||||
console.log(`Favorite file ${favorite.id} not found, removing from favorites`);
|
||||
this.removeFromFavorites(favorite.id, 'file');
|
||||
} else {
|
||||
console.error(`Error loading file ${favorite.id}:`, response.statusText);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error loading file details for ${favorite.id}:`, error);
|
||||
|
||||
// Create a fallback file element to prevent the favorite from disappearing
|
||||
const fallbackFile = {
|
||||
id: favorite.id,
|
||||
name: favorite.name || `File ${favorite.id}`,
|
||||
mime_type: 'application/octet-stream',
|
||||
size: 0,
|
||||
modified_at: Math.floor(Date.now() / 1000)
|
||||
};
|
||||
|
||||
this.createFavoriteFileElement(fallbackFile, filesGrid, filesListView);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a folder element with favorite indicator
|
||||
* @param {Object} folder - Folder object
|
||||
* @param {HTMLElement} filesGrid - Grid view container
|
||||
* @param {HTMLElement} filesListView - List view container
|
||||
*/
|
||||
createFavoriteFolderElement(folder, filesGrid, filesListView) {
|
||||
// Create standard folder element
|
||||
const folderGridElement = document.createElement('div');
|
||||
folderGridElement.className = 'file-card favorite-item';
|
||||
folderGridElement.dataset.folderId = folder.id;
|
||||
folderGridElement.dataset.folderName = folder.name;
|
||||
folderGridElement.dataset.parentId = folder.parent_id || "";
|
||||
|
||||
// Add favorite star
|
||||
folderGridElement.innerHTML = `
|
||||
<div class="favorite-indicator active">
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="file-icon folder-icon">
|
||||
<i class="fas fa-folder"></i>
|
||||
</div>
|
||||
<div class="file-name">${folder.name}</div>
|
||||
<div class="file-info">Carpeta</div>
|
||||
`;
|
||||
|
||||
// Click to navigate
|
||||
folderGridElement.addEventListener('click', () => {
|
||||
window.app.currentPath = folder.id;
|
||||
window.ui.updateBreadcrumb(folder.name);
|
||||
window.loadFiles();
|
||||
});
|
||||
|
||||
// Context menu
|
||||
folderGridElement.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
window.app.contextMenuTargetFolder = {
|
||||
id: folder.id,
|
||||
name: folder.name,
|
||||
parent_id: folder.parent_id || ""
|
||||
};
|
||||
|
||||
let folderContextMenu = document.getElementById('folder-context-menu');
|
||||
folderContextMenu.style.left = `${e.pageX}px`;
|
||||
folderContextMenu.style.top = `${e.pageY}px`;
|
||||
folderContextMenu.style.display = 'block';
|
||||
});
|
||||
|
||||
filesGrid.appendChild(folderGridElement);
|
||||
|
||||
// Format date
|
||||
const modifiedDate = new Date(folder.modified_at * 1000);
|
||||
const formattedDate = modifiedDate.toLocaleDateString() + ' ' +
|
||||
modifiedDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
||||
|
||||
// List view element
|
||||
const folderListElement = document.createElement('div');
|
||||
folderListElement.className = 'file-item favorite-item';
|
||||
folderListElement.dataset.folderId = folder.id;
|
||||
folderListElement.dataset.folderName = folder.name;
|
||||
folderListElement.dataset.parentId = folder.parent_id || "";
|
||||
|
||||
folderListElement.innerHTML = `
|
||||
<div class="favorite-indicator active">
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="name-cell">
|
||||
<div class="file-icon folder-icon">
|
||||
<i class="fas fa-folder"></i>
|
||||
</div>
|
||||
<span>${folder.name}</span>
|
||||
</div>
|
||||
<div class="type-cell">${window.i18n ? window.i18n.t('files.file_types.folder') : 'Carpeta'}</div>
|
||||
<div class="size-cell">--</div>
|
||||
<div class="date-cell">${formattedDate}</div>
|
||||
`;
|
||||
|
||||
// Click to navigate
|
||||
folderListElement.addEventListener('click', () => {
|
||||
window.app.currentPath = folder.id;
|
||||
window.ui.updateBreadcrumb(folder.name);
|
||||
window.loadFiles();
|
||||
});
|
||||
|
||||
// Context menu
|
||||
folderListElement.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
window.app.contextMenuTargetFolder = {
|
||||
id: folder.id,
|
||||
name: folder.name,
|
||||
parent_id: folder.parent_id || ""
|
||||
};
|
||||
|
||||
let folderContextMenu = document.getElementById('folder-context-menu');
|
||||
folderContextMenu.style.left = `${e.pageX}px`;
|
||||
folderContextMenu.style.top = `${e.pageY}px`;
|
||||
folderContextMenu.style.display = 'block';
|
||||
});
|
||||
|
||||
filesListView.appendChild(folderListElement);
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a file element with favorite indicator
|
||||
* @param {Object} file - File object
|
||||
* @param {HTMLElement} filesGrid - Grid view container
|
||||
* @param {HTMLElement} filesListView - List view container
|
||||
*/
|
||||
createFavoriteFileElement(file, filesGrid, filesListView) {
|
||||
// Determine icon and type
|
||||
let iconClass = 'fas fa-file';
|
||||
let iconSpecialClass = '';
|
||||
let typeLabel = 'Documento';
|
||||
|
||||
if (file.mime_type) {
|
||||
if (file.mime_type.startsWith('image/')) {
|
||||
iconClass = 'fas fa-file-image';
|
||||
iconSpecialClass = 'image-icon';
|
||||
typeLabel = window.i18n ? window.i18n.t('files.file_types.image') : 'Imagen';
|
||||
} else if (file.mime_type.startsWith('text/')) {
|
||||
iconClass = 'fas fa-file-alt';
|
||||
iconSpecialClass = 'text-icon';
|
||||
typeLabel = window.i18n ? window.i18n.t('files.file_types.text') : 'Texto';
|
||||
} else if (file.mime_type.startsWith('video/')) {
|
||||
iconClass = 'fas fa-file-video';
|
||||
iconSpecialClass = 'video-icon';
|
||||
typeLabel = window.i18n ? window.i18n.t('files.file_types.video') : 'Video';
|
||||
} else if (file.mime_type.startsWith('audio/')) {
|
||||
iconClass = 'fas fa-file-audio';
|
||||
iconSpecialClass = 'audio-icon';
|
||||
typeLabel = window.i18n ? window.i18n.t('files.file_types.audio') : 'Audio';
|
||||
} else if (file.mime_type === 'application/pdf') {
|
||||
iconClass = 'fas fa-file-pdf';
|
||||
iconSpecialClass = 'pdf-icon';
|
||||
typeLabel = window.i18n ? window.i18n.t('files.file_types.pdf') : 'PDF';
|
||||
}
|
||||
}
|
||||
|
||||
// Format size and date
|
||||
const fileSize = window.formatFileSize(file.size);
|
||||
const modifiedDate = new Date(file.modified_at * 1000);
|
||||
const formattedDate = modifiedDate.toLocaleDateString() + ' ' +
|
||||
modifiedDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
||||
|
||||
// Grid view element
|
||||
const fileGridElement = document.createElement('div');
|
||||
fileGridElement.className = 'file-card favorite-item';
|
||||
fileGridElement.dataset.fileId = file.id;
|
||||
fileGridElement.dataset.fileName = file.name;
|
||||
fileGridElement.dataset.folderId = file.folder_id || "";
|
||||
|
||||
fileGridElement.innerHTML = `
|
||||
<div class="favorite-indicator active">
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="file-icon ${iconSpecialClass}">
|
||||
<i class="${iconClass}"></i>
|
||||
</div>
|
||||
<div class="file-name">${file.name}</div>
|
||||
<div class="file-info">Modificado ${formattedDate.split(' ')[0]}</div>
|
||||
`;
|
||||
|
||||
// Download on click
|
||||
fileGridElement.addEventListener('click', () => {
|
||||
window.location.href = `/api/files/${file.id}`;
|
||||
});
|
||||
|
||||
// Context menu
|
||||
fileGridElement.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
window.app.contextMenuTargetFile = {
|
||||
id: file.id,
|
||||
name: file.name,
|
||||
folder_id: file.folder_id || ""
|
||||
};
|
||||
|
||||
let fileContextMenu = document.getElementById('file-context-menu');
|
||||
fileContextMenu.style.left = `${e.pageX}px`;
|
||||
fileContextMenu.style.top = `${e.pageY}px`;
|
||||
fileContextMenu.style.display = 'block';
|
||||
});
|
||||
|
||||
filesGrid.appendChild(fileGridElement);
|
||||
|
||||
// List view element
|
||||
const fileListElement = document.createElement('div');
|
||||
fileListElement.className = 'file-item favorite-item';
|
||||
fileListElement.dataset.fileId = file.id;
|
||||
fileListElement.dataset.fileName = file.name;
|
||||
fileListElement.dataset.folderId = file.folder_id || "";
|
||||
|
||||
fileListElement.innerHTML = `
|
||||
<div class="favorite-indicator active">
|
||||
<i class="fas fa-star"></i>
|
||||
</div>
|
||||
<div class="name-cell">
|
||||
<div class="file-icon ${iconSpecialClass}">
|
||||
<i class="${iconClass}"></i>
|
||||
</div>
|
||||
<span>${file.name}</span>
|
||||
</div>
|
||||
<div class="type-cell">${typeLabel}</div>
|
||||
<div class="size-cell">${fileSize}</div>
|
||||
<div class="date-cell">${formattedDate}</div>
|
||||
`;
|
||||
|
||||
// Download on click
|
||||
fileListElement.addEventListener('click', () => {
|
||||
window.location.href = `/api/files/${file.id}`;
|
||||
});
|
||||
|
||||
// Context menu
|
||||
fileListElement.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
window.app.contextMenuTargetFile = {
|
||||
id: file.id,
|
||||
name: file.name,
|
||||
folder_id: file.folder_id || ""
|
||||
};
|
||||
|
||||
let fileContextMenu = document.getElementById('file-context-menu');
|
||||
fileContextMenu.style.left = `${e.pageX}px`;
|
||||
fileContextMenu.style.top = `${e.pageY}px`;
|
||||
fileContextMenu.style.display = 'block';
|
||||
});
|
||||
|
||||
filesListView.appendChild(fileListElement);
|
||||
}
|
||||
};
|
||||
|
||||
// Expose favorites module globally
|
||||
window.favorites = favorites;
|
||||
@@ -256,7 +256,7 @@ class InlineViewer {
|
||||
message.innerHTML = `
|
||||
<div class="inline-viewer-icon"><i class="fas fa-exclamation-triangle"></i></div>
|
||||
<div class="inline-viewer-text">
|
||||
<p>Error al cargar el archivo.</p>
|
||||
<p>Error al cargar el archivo.</p>`
|
||||
<p>Intenta descargarlo directamente.</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -18,6 +18,9 @@ const ui = {
|
||||
<div class="context-menu-item" id="download-folder-option">
|
||||
<i class="fas fa-download"></i> <span data-i18n="actions.download">Descargar</span>
|
||||
</div>
|
||||
<div class="context-menu-item" id="favorite-folder-option">
|
||||
<i class="fas fa-star"></i> <span data-i18n="actions.favorite">Añadir a favoritos</span>
|
||||
</div>
|
||||
<div class="context-menu-item" id="rename-folder-option">
|
||||
<i class="fas fa-edit"></i> <span data-i18n="actions.rename">Renombrar</span>
|
||||
</div>
|
||||
@@ -43,6 +46,9 @@ const ui = {
|
||||
<div class="context-menu-item" id="download-file-option">
|
||||
<i class="fas fa-download"></i> <span data-i18n="actions.download">Descargar</span>
|
||||
</div>
|
||||
<div class="context-menu-item" id="favorite-file-option">
|
||||
<i class="fas fa-star"></i> <span data-i18n="actions.favorite">Añadir a favoritos</span>
|
||||
</div>
|
||||
<div class="context-menu-item" id="share-file-option">
|
||||
<i class="fas fa-share-alt"></i> <span data-i18n="actions.share">Compartir</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user