Files
Oxicloud/static/js/favorites.js
T
Dionisio 9290aea591 fix(#107): trash/recent/favorites list view rendering bugs
Trash view:
- Fix 'Invalid Date': use item.trashed_at (ISO 8601) instead of item.deleted_at * 1000
- Fix literal i18n key 'files.file_types.file': determine type from file extension
  (pdf, image, video, audio, text, document) since trash DTO has no mime_type
- Fix column alignment: remove checkbox from trash header (not applicable),
  add .trash-header CSS class matching the 5-column grid layout

Recent view:
- Fix header/row column misalignment: add empty placeholder div for indicator
  column and .recent-header CSS class matching the 5-column grid
- Fix missing i18n key: use 'recent.accessed' instead of 'files.last_accessed'
- Fix default typeLabel not internationalized: use i18n.t('files.file_types.document')

Favorites view:
- Fix header/row column misalignment: add empty placeholder div for indicator
  column and .favorites-header CSS class matching the 5-column grid
- Fix default typeLabel not internationalized: use i18n.t('files.file_types.document')

Bump SW cache to v11.
2026-02-14 11:06:29 +01:00

689 lines
26 KiB
JavaScript

/**
* 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 {
// Add error handling to prevent console errors by catching 500 errors
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 3000); // 3s timeout
const favToken = localStorage.getItem('oxicloud_token');
const favHeaders = favToken ? { 'Authorization': `Bearer ${favToken}` } : {};
const response = await fetch('/api/favorites', {
method: 'GET',
headers: favHeaders,
signal: controller.signal
}).catch(err => {
console.warn('Network error checking favorites API:', err);
return { ok: false, status: 0 };
});
clearTimeout(timeoutId);
// Check if the response indicates the API is properly implemented
this.backendApiAvailable = response.ok;
if (!response.ok) {
console.log(`Backend favorites API returned status ${response.status} - using local storage fallback`);
this.backendApiAvailable = false;
} else {
console.log('Backend favorites API is available');
// If backend API is available, sync local favorites with server
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 syncToken = localStorage.getItem('oxicloud_token');
const syncHeaders = syncToken ? { 'Authorization': `Bearer ${syncToken}` } : {};
const response = await fetch('/api/favorites', {
headers: syncHeaders
});
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 addToken = localStorage.getItem('oxicloud_token');
const addHeaders = { 'Content-Type': 'application/json' };
if (addToken) addHeaders['Authorization'] = `Bearer ${addToken}`;
const response = await fetch(`/api/favorites/${type}/${id}`, {
method: 'POST',
headers: addHeaders
});
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 rmToken = localStorage.getItem('oxicloud_token');
const rmHeaders = rmToken ? { 'Authorization': `Bearer ${rmToken}` } : {};
const response = await fetch(`/api/favorites/${type}/${id}`, {
method: 'DELETE',
headers: rmHeaders
});
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(
'Added to favorites',
`"${name}" added to favorites`
);
// Refresh file view to show star icon
if (window.app.currentSection === 'files' && typeof window.loadFiles === 'function') {
window.loadFiles();
}
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(
'Removed from favorites',
`"${item.name}" removed from favorites`
);
}
// Refresh file view to remove star icon
if (window.app.currentSection === 'files' && typeof window.loadFiles === 'function') {
window.loadFiles();
}
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 favorites-header">
<div></div>
<div data-i18n="files.name">Name</div>
<div data-i18n="files.type">Type</div>
<div data-i18n="files.size">Size</div>
<div data-i18n="files.modified">Modified</div>
</div>
`;
// Update breadcrumb - just show Home
window.ui.updateBreadcrumb('');
// 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 favorite items'}</p>
<p>${window.i18n ? window.i18n.t('favorites.empty_hint') : 'To mark as favorite, right-click on any file or folder'}</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 loading favorite items');
}
},
/**
* 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 token = localStorage.getItem('oxicloud_token');
const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
const response = await fetch(`/api/folders/${favorite.id}`, { headers });
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 token = localStorage.getItem('oxicloud_token');
const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
const response = await fetch(`/api/files/${favorite.id}?metadata=true`, { headers });
if (response.ok) {
const file = await response.json();
// Create UI element with favorite indicator
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">Folder</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') : 'Folder'}</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 = window.i18n ? window.i18n.t('files.file_types.document') : 'Document';
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') : 'Image';
} 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') : 'Text';
} 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">Modified ${formattedDate.split(' ')[0]}</div>
`;
// View or download on click
fileGridElement.addEventListener('click', () => {
if (window.ui && window.ui.isViewableFile(file) && window.inlineViewer) {
window.inlineViewer.openFile(file);
} else if (window.fileOps) {
window.fileOps.downloadFile(file.id, file.name);
}
});
// 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>
`;
// View or download on click
fileListElement.addEventListener('click', () => {
if (window.ui && window.ui.isViewableFile(file) && window.inlineViewer) {
window.inlineViewer.openFile(file);
} else if (window.fileOps) {
window.fileOps.downloadFile(file.id, file.name);
}
});
// 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;