feat(P1+P2): server-authoritative favorites/recent + pre-computed display fields
P1-A: Enrich FavoriteItemDto & RecentItemDto with item_name, item_size,
item_mime_type, parent_id, modified_at via SQL LEFT JOINs — eliminates
N+1 per-item fetches.
P1-B: Rewrite favorites.js as server-authoritative (724→380 lines).
In-memory cache backed by GET /api/favorites; no localStorage.
P1-C: Rewrite recent.js as server-authoritative (341→249 lines).
GET /api/recent + POST /api/recent/{type}/{id}; no localStorage.
P1 cleanup: Remove dead localStorage cleanup from auth.js logout,
fix async clearRecentFiles in app.js.
P2: Add icon_class, icon_special_class, category, size_formatted to
FileDto, FolderDto, FavoriteItemDto, RecentItemDto. New shared
display_helpers.rs module centralises mime→icon/category/size logic.
Frontend (ui.js, fileRenderer.js, favorites.js, recent.js) now reads
pre-computed fields from the API with fallback defaults — eliminates
5 duplicated mime→icon mapping blocks (~89 lines removed).
Also fixes: synthetic FolderDto in webdav_handler.rs, pre-existing
missing item_name field in share_service.rs test.
Net: -307 lines across 15 files. cargo check: 0 errors, 0 warnings.
cargo test display_helpers: 3/3 pass.
This commit is contained in:
Dionisio
+3
-3
@@ -1424,10 +1424,10 @@ function switchToRecentFilesView() {
|
||||
elements.actionsBar.style.display = 'flex';
|
||||
|
||||
// Add event listener for clear button
|
||||
document.getElementById('clear-recent-btn').addEventListener('click', () => {
|
||||
document.getElementById('clear-recent-btn').addEventListener('click', async () => {
|
||||
if (window.recent) {
|
||||
window.recent.clearRecentFiles();
|
||||
window.recent.displayRecentFiles();
|
||||
await window.recent.clearRecentFiles();
|
||||
await window.recent.displayRecentFiles();
|
||||
window.ui.showNotification('Cleanup completed', 'Recent files history has been cleared');
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1106,20 +1106,6 @@ function redirectToMainApp() {
|
||||
* Logout - clear tokens and redirect to login
|
||||
*/
|
||||
function logout() {
|
||||
// Clear user-specific recent files and favorites before removing user data
|
||||
try {
|
||||
const userData = JSON.parse(localStorage.getItem(USER_DATA_KEY) || '{}');
|
||||
if (userData.username) {
|
||||
localStorage.removeItem(`oxicloud_recent_files_${userData.username}`);
|
||||
localStorage.removeItem(`oxicloud_favorites_${userData.username}`);
|
||||
}
|
||||
} catch (e) {
|
||||
// Ignore parse errors during cleanup
|
||||
}
|
||||
// Also remove any legacy global keys
|
||||
localStorage.removeItem('oxicloud_recent_files');
|
||||
localStorage.removeItem('oxicloud_favorites');
|
||||
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
localStorage.removeItem(REFRESH_TOKEN_KEY);
|
||||
localStorage.removeItem(TOKEN_EXPIRY_KEY);
|
||||
|
||||
+255
-600
@@ -1,359 +1,174 @@
|
||||
/**
|
||||
* OxiCloud - Favorites Module
|
||||
* This file handles favoriting files and folders, persisting favorites, and displaying favorite items
|
||||
* OxiCloud - Favorites Module (server-authoritative)
|
||||
*
|
||||
* Source of truth: GET /api/favorites (enriched with name/size/mime via SQL JOIN).
|
||||
* Local in-memory cache (`_cache`) keeps `isFavorite()` synchronous for the
|
||||
* rendering path so star icons can be painted without a round-trip.
|
||||
*/
|
||||
|
||||
// Favorites Module
|
||||
const favorites = {
|
||||
// Base key for storing favorites in localStorage (username is appended)
|
||||
STORAGE_KEY_PREFIX: 'oxicloud_favorites',
|
||||
|
||||
// Legacy key (pre-fix, shared across all users)
|
||||
LEGACY_STORAGE_KEY: 'oxicloud_favorites',
|
||||
|
||||
// Flag to indicate if backend API is available
|
||||
backendApiAvailable: false,
|
||||
|
||||
/** @type {Map<string, object>} key = "file:<id>" | "folder:<id>" */
|
||||
_cache: new Map(),
|
||||
|
||||
/** Whether the initial fetch from the server has completed */
|
||||
_ready: false,
|
||||
|
||||
// ───────────────────── helpers ─────────────────────
|
||||
|
||||
_authHeaders() {
|
||||
const token = localStorage.getItem('oxicloud_token');
|
||||
const h = {};
|
||||
if (token) h['Authorization'] = `Bearer ${token}`;
|
||||
return h;
|
||||
},
|
||||
|
||||
_cacheKey(id, type) {
|
||||
return `${type}:${id}`;
|
||||
},
|
||||
|
||||
// ───────────────────── lifecycle ─────────────────────
|
||||
|
||||
/**
|
||||
* Get the user-specific storage key for favorites.
|
||||
* Falls back to legacy global key if username is unavailable.
|
||||
* @returns {string} localStorage key scoped to the current user
|
||||
* Initialise the module: fetch the full list from the server and populate
|
||||
* the in-memory cache. Called once from app.js on startup.
|
||||
*/
|
||||
getStorageKey() {
|
||||
async init() {
|
||||
console.log('Initializing favorites module (server-authoritative)');
|
||||
await this._fetchFromServer();
|
||||
},
|
||||
|
||||
/**
|
||||
* Fetch favourites from the backend and rebuild the cache.
|
||||
*/
|
||||
async _fetchFromServer() {
|
||||
try {
|
||||
const userData = JSON.parse(localStorage.getItem('oxicloud_user') || '{}');
|
||||
if (userData.username) {
|
||||
return `${this.STORAGE_KEY_PREFIX}_${userData.username}`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Could not determine current user for favorites key');
|
||||
}
|
||||
return this.LEGACY_STORAGE_KEY;
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize favorites module
|
||||
*/
|
||||
init() {
|
||||
console.log('Initializing favorites module');
|
||||
this.migrateFromLegacyKey();
|
||||
this.loadFavorites();
|
||||
|
||||
// Check if backend favorites API is available
|
||||
this.checkBackendAvailability();
|
||||
},
|
||||
|
||||
/**
|
||||
* Migrate data from the old global key to the user-specific key.
|
||||
*/
|
||||
migrateFromLegacyKey() {
|
||||
const userKey = this.getStorageKey();
|
||||
if (userKey === this.LEGACY_STORAGE_KEY) return;
|
||||
|
||||
const legacyData = localStorage.getItem(this.LEGACY_STORAGE_KEY);
|
||||
if (legacyData && !localStorage.getItem(userKey)) {
|
||||
console.log('Migrating favorites from legacy global key to user-specific key');
|
||||
localStorage.setItem(userKey, legacyData);
|
||||
}
|
||||
localStorage.removeItem(this.LEGACY_STORAGE_KEY);
|
||||
},
|
||||
|
||||
/**
|
||||
* 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 };
|
||||
headers: this._authHeaders()
|
||||
});
|
||||
|
||||
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();
|
||||
console.warn(`Favorites API returned ${response.status}`);
|
||||
this._ready = true;
|
||||
return;
|
||||
}
|
||||
} 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 items = await response.json();
|
||||
this._cache.clear();
|
||||
for (const item of items) {
|
||||
this._cache.set(this._cacheKey(item.item_id, item.item_type), item);
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
this._ready = true;
|
||||
console.log(`Favorites cache loaded: ${this._cache.size} items`);
|
||||
} catch (err) {
|
||||
console.error('Error fetching favorites:', err);
|
||||
this._ready = true;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// ───────────────────── public API ─────────────────────
|
||||
|
||||
/**
|
||||
* Load favorites from localStorage
|
||||
* @returns {Array} Array of favorite items
|
||||
* Synchronous check used by ui.js to paint star icons.
|
||||
*/
|
||||
loadFavorites() {
|
||||
try {
|
||||
const stored = localStorage.getItem(this.getStorageKey());
|
||||
return stored ? JSON.parse(stored) : [];
|
||||
} catch (error) {
|
||||
console.error('Error loading favorites:', error);
|
||||
return [];
|
||||
}
|
||||
isFavorite(id, type) {
|
||||
return this._cache.has(this._cacheKey(id, type));
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Save favorites to localStorage
|
||||
* @param {Array} favorites - Array of favorite items to save
|
||||
* Add an item to favourites (server-first).
|
||||
*/
|
||||
saveFavorites(favorites) {
|
||||
async addToFavorites(id, name, type, _parentId) {
|
||||
try {
|
||||
localStorage.setItem(this.getStorageKey(), 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
|
||||
headers: this._authHeaders()
|
||||
});
|
||||
|
||||
|
||||
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}`);
|
||||
|
||||
// Refresh cache from server to get enriched data
|
||||
await this._fetchFromServer();
|
||||
|
||||
// Notify user
|
||||
if (window.ui && window.ui.showNotification) {
|
||||
window.ui.showNotification(
|
||||
window.i18n ? window.i18n.t('favorites.added_title') : 'Added to favorites',
|
||||
`"${name}" ${window.i18n ? window.i18n.t('favorites.added_msg') : 'added to favorites'}`
|
||||
);
|
||||
}
|
||||
|
||||
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') {
|
||||
|
||||
// Refresh view to update star icons
|
||||
if (window.app && 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
|
||||
* Remove an item from favourites (server-first).
|
||||
*/
|
||||
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);
|
||||
// Remember name for notification before removing from cache
|
||||
const cached = this._cache.get(this._cacheKey(id, type));
|
||||
const itemName = cached?.item_name || id;
|
||||
|
||||
const response = await fetch(`/api/favorites/${type}/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: this._authHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Server returned ${response.status}`);
|
||||
}
|
||||
|
||||
// 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;
|
||||
|
||||
// Remove from local cache
|
||||
this._cache.delete(this._cacheKey(id, type));
|
||||
|
||||
if (window.ui && window.ui.showNotification) {
|
||||
window.ui.showNotification(
|
||||
window.i18n ? window.i18n.t('favorites.removed_title') : 'Removed from favorites',
|
||||
`"${itemName}" ${window.i18n ? window.i18n.t('favorites.removed_msg') : 'removed from favorites'}`
|
||||
);
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
// Refresh view to update star icons
|
||||
if (window.app && window.app.currentSection === 'files' && typeof window.loadFiles === 'function') {
|
||||
window.loadFiles();
|
||||
}
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error removing from favorites:', error);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// ───────────────────── display ─────────────────────
|
||||
|
||||
/**
|
||||
* 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
|
||||
* Render the favourites view. All data comes from the in-memory cache
|
||||
* (which was populated from the enriched backend response — zero extra
|
||||
* fetches).
|
||||
*/
|
||||
async displayFavorites() {
|
||||
try {
|
||||
const favorites = this.loadFavorites();
|
||||
|
||||
// Clear existing content
|
||||
// Ensure cache is fresh
|
||||
if (!this._ready) {
|
||||
await this._fetchFromServer();
|
||||
}
|
||||
|
||||
const filesGrid = document.getElementById('files-grid');
|
||||
const filesListView = document.getElementById('files-list-view');
|
||||
|
||||
|
||||
filesGrid.innerHTML = '';
|
||||
filesListView.innerHTML = `
|
||||
<div class="list-header favorites-header">
|
||||
@@ -364,12 +179,10 @@ const favorites = {
|
||||
<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) {
|
||||
|
||||
if (this._cache.size === 0) {
|
||||
const emptyState = document.createElement('div');
|
||||
emptyState.className = 'empty-state';
|
||||
emptyState.innerHTML = `
|
||||
@@ -380,346 +193,188 @@ const favorites = {
|
||||
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);
|
||||
|
||||
for (const item of this._cache.values()) {
|
||||
if (item.item_type === 'folder') {
|
||||
this._renderFolder(item, filesGrid, filesListView);
|
||||
} else {
|
||||
this._renderFile(item, filesGrid, filesListView);
|
||||
}
|
||||
|
||||
// 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);
|
||||
if (window.ui && window.ui.showNotification) {
|
||||
window.ui.showNotification('Error', 'Error loading favorite items');
|
||||
}
|
||||
} 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">${escapeHtml(folder.name)}</div>
|
||||
|
||||
// ───────────────────── renderers ─────────────────────
|
||||
|
||||
_renderFolder(item, filesGrid, filesListView) {
|
||||
const name = item.item_name || item.item_id || 'Unknown';
|
||||
const folderId = item.item_id;
|
||||
const parentId = item.parent_id || '';
|
||||
|
||||
const modifiedAt = item.modified_at
|
||||
? new Date(item.modified_at)
|
||||
: new Date(item.created_at);
|
||||
const formattedDate = modifiedAt.toLocaleDateString() + ' ' +
|
||||
modifiedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
|
||||
// --- grid element ---
|
||||
const gridEl = document.createElement('div');
|
||||
gridEl.className = 'file-card favorite-item';
|
||||
gridEl.dataset.folderId = folderId;
|
||||
gridEl.dataset.folderName = name;
|
||||
gridEl.dataset.parentId = parentId;
|
||||
gridEl.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">${escapeHtml(name)}</div>
|
||||
<div class="file-info">Folder</div>
|
||||
`;
|
||||
|
||||
// Click to navigate
|
||||
folderGridElement.addEventListener('click', () => {
|
||||
window.app.currentPath = folder.id;
|
||||
window.ui.updateBreadcrumb(folder.name);
|
||||
gridEl.addEventListener('click', () => {
|
||||
window.app.currentPath = folderId;
|
||||
window.ui.updateBreadcrumb(name);
|
||||
window.loadFiles();
|
||||
});
|
||||
|
||||
// Context menu
|
||||
folderGridElement.addEventListener('contextmenu', (e) => {
|
||||
gridEl.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';
|
||||
window.app.contextMenuTargetFolder = { id: folderId, name, parent_id: parentId };
|
||||
const cm = document.getElementById('folder-context-menu');
|
||||
cm.style.left = `${e.pageX}px`;
|
||||
cm.style.top = `${e.pageY}px`;
|
||||
cm.style.display = 'block';
|
||||
});
|
||||
filesGrid.appendChild(gridEl);
|
||||
|
||||
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>
|
||||
// --- list element ---
|
||||
const listEl = document.createElement('div');
|
||||
listEl.className = 'file-item favorite-item';
|
||||
listEl.dataset.folderId = folderId;
|
||||
listEl.dataset.folderName = name;
|
||||
listEl.dataset.parentId = parentId;
|
||||
listEl.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>${escapeHtml(folder.name)}</span>
|
||||
<div class="file-icon folder-icon"><i class="fas fa-folder"></i></div>
|
||||
<span>${escapeHtml(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);
|
||||
listEl.addEventListener('click', () => {
|
||||
window.app.currentPath = folderId;
|
||||
window.ui.updateBreadcrumb(name);
|
||||
window.loadFiles();
|
||||
});
|
||||
|
||||
// Context menu
|
||||
folderListElement.addEventListener('contextmenu', (e) => {
|
||||
listEl.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';
|
||||
window.app.contextMenuTargetFolder = { id: folderId, name, parent_id: parentId };
|
||||
const cm = document.getElementById('folder-context-menu');
|
||||
cm.style.left = `${e.pageX}px`;
|
||||
cm.style.top = `${e.pageY}px`;
|
||||
cm.style.display = 'block';
|
||||
});
|
||||
|
||||
filesListView.appendChild(folderListElement);
|
||||
filesListView.appendChild(listEl);
|
||||
},
|
||||
|
||||
/**
|
||||
* 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';
|
||||
}
|
||||
}
|
||||
_renderFile(item, filesGrid, filesListView) {
|
||||
const name = item.item_name || item.item_id || 'Unknown';
|
||||
const fileId = item.item_id;
|
||||
const folderId = item.parent_id || '';
|
||||
const mimeType = item.item_mime_type || 'application/octet-stream';
|
||||
|
||||
// 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'});
|
||||
// Build a minimal file object for click handlers
|
||||
const fileObj = {
|
||||
id: fileId,
|
||||
name,
|
||||
folder_id: folderId,
|
||||
mime_type: mimeType,
|
||||
size: item.item_size || 0
|
||||
};
|
||||
|
||||
// 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 || "";
|
||||
// Use pre-computed display fields from the enriched API response
|
||||
const iconClass = item.icon_class || 'fas fa-file';
|
||||
const iconSpecialClass = item.icon_special_class || '';
|
||||
const typeLabel = item.category
|
||||
? (window.i18n ? window.i18n.t(`files.file_types.${item.category.toLowerCase()}`) || item.category : item.category)
|
||||
: (window.i18n ? window.i18n.t('files.file_types.document') : 'Document');
|
||||
|
||||
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">${escapeHtml(file.name)}</div>
|
||||
const fileSize = item.size_formatted || (window.formatFileSize ? window.formatFileSize(item.item_size || 0) : '0 B');
|
||||
const modifiedAt = item.modified_at
|
||||
? new Date(item.modified_at)
|
||||
: new Date(item.created_at);
|
||||
const formattedDate = modifiedAt.toLocaleDateString() + ' ' +
|
||||
modifiedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
|
||||
// --- grid element ---
|
||||
const gridEl = document.createElement('div');
|
||||
gridEl.className = 'file-card favorite-item';
|
||||
gridEl.dataset.fileId = fileId;
|
||||
gridEl.dataset.fileName = name;
|
||||
gridEl.dataset.folderId = folderId;
|
||||
gridEl.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">${escapeHtml(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);
|
||||
gridEl.addEventListener('click', () => {
|
||||
if (window.ui && window.ui.isViewableFile(fileObj) && window.inlineViewer) {
|
||||
window.inlineViewer.openFile(fileObj);
|
||||
} else if (window.fileOps) {
|
||||
window.fileOps.downloadFile(file.id, file.name);
|
||||
window.fileOps.downloadFile(fileId, name);
|
||||
}
|
||||
});
|
||||
|
||||
// Context menu
|
||||
fileGridElement.addEventListener('contextmenu', (e) => {
|
||||
gridEl.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';
|
||||
window.app.contextMenuTargetFile = { id: fileId, name, folder_id: folderId };
|
||||
const cm = document.getElementById('file-context-menu');
|
||||
cm.style.left = `${e.pageX}px`;
|
||||
cm.style.top = `${e.pageY}px`;
|
||||
cm.style.display = 'block';
|
||||
});
|
||||
filesGrid.appendChild(gridEl);
|
||||
|
||||
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>
|
||||
// --- list element ---
|
||||
const listEl = document.createElement('div');
|
||||
listEl.className = 'file-item favorite-item';
|
||||
listEl.dataset.fileId = fileId;
|
||||
listEl.dataset.fileName = name;
|
||||
listEl.dataset.folderId = folderId;
|
||||
listEl.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>${escapeHtml(file.name)}</span>
|
||||
<div class="file-icon ${iconSpecialClass}"><i class="${iconClass}"></i></div>
|
||||
<span>${escapeHtml(name)}</span>
|
||||
</div>
|
||||
<div class="type-cell">${escapeHtml(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);
|
||||
listEl.addEventListener('click', () => {
|
||||
if (window.ui && window.ui.isViewableFile(fileObj) && window.inlineViewer) {
|
||||
window.inlineViewer.openFile(fileObj);
|
||||
} else if (window.fileOps) {
|
||||
window.fileOps.downloadFile(file.id, file.name);
|
||||
window.fileOps.downloadFile(fileId, name);
|
||||
}
|
||||
});
|
||||
|
||||
// Context menu
|
||||
fileListElement.addEventListener('contextmenu', (e) => {
|
||||
listEl.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';
|
||||
window.app.contextMenuTargetFile = { id: fileId, name, folder_id: folderId };
|
||||
const cm = document.getElementById('file-context-menu');
|
||||
cm.style.left = `${e.pageX}px`;
|
||||
cm.style.top = `${e.pageY}px`;
|
||||
cm.style.display = 'block';
|
||||
});
|
||||
|
||||
filesListView.appendChild(fileListElement);
|
||||
filesListView.appendChild(listEl);
|
||||
}
|
||||
};
|
||||
|
||||
// Expose favorites module globally
|
||||
window.favorites = favorites;
|
||||
// Expose globally
|
||||
window.favorites = favorites;
|
||||
|
||||
+14
-45
@@ -217,8 +217,8 @@ class FileRenderer {
|
||||
elem.dataset.parentId = item.parent_id || "";
|
||||
|
||||
elem.innerHTML = `
|
||||
<div class="file-icon folder-icon">
|
||||
<i class="fas fa-folder"></i>
|
||||
<div class="file-icon ${item.icon_special_class || 'folder-icon'}">
|
||||
<i class="${item.icon_class || 'fas fa-folder'}"></i>
|
||||
</div>
|
||||
<div class="file-name">${window.escapeHtml(item.name)}</div>
|
||||
`;
|
||||
@@ -253,22 +253,8 @@ class FileRenderer {
|
||||
elem.dataset.fileName = item.name;
|
||||
elem.dataset.folderId = item.folder_id || "";
|
||||
|
||||
// Determine icon based on MIME type
|
||||
let iconClass = 'fas fa-file';
|
||||
|
||||
if (item.mime_type) {
|
||||
if (item.mime_type.startsWith('image/')) {
|
||||
iconClass = 'fas fa-file-image';
|
||||
} else if (item.mime_type.startsWith('text/')) {
|
||||
iconClass = 'fas fa-file-alt';
|
||||
} else if (item.mime_type.startsWith('video/')) {
|
||||
iconClass = 'fas fa-file-video';
|
||||
} else if (item.mime_type.startsWith('audio/')) {
|
||||
iconClass = 'fas fa-file-audio';
|
||||
} else if (item.mime_type === 'application/pdf') {
|
||||
iconClass = 'fas fa-file-pdf';
|
||||
}
|
||||
}
|
||||
// Use pre-computed icon class from the API response
|
||||
const iconClass = item.icon_class || 'fas fa-file';
|
||||
|
||||
elem.innerHTML = `
|
||||
<div class="file-icon">
|
||||
@@ -340,12 +326,12 @@ class FileRenderer {
|
||||
|
||||
elem.innerHTML = `
|
||||
<div class="name-cell">
|
||||
<div class="file-icon folder-icon">
|
||||
<i class="fas fa-folder"></i>
|
||||
<div class="file-icon ${item.icon_special_class || 'folder-icon'}">
|
||||
<i class="${item.icon_class || 'fas fa-folder'}"></i>
|
||||
</div>
|
||||
<span>${window.escapeHtml(item.name)}</span>
|
||||
</div>
|
||||
<div>${this.i18n.t('files.file_types.folder')}</div>
|
||||
<div>${item.category ? (this.i18n.t(`files.file_types.${item.category.toLowerCase()}`) || item.category) : this.i18n.t('files.file_types.folder')}</div>
|
||||
<div>--</div>
|
||||
<div>${formattedDate}</div>
|
||||
`;
|
||||
@@ -380,31 +366,14 @@ class FileRenderer {
|
||||
elem.dataset.fileName = item.name;
|
||||
elem.dataset.folderId = item.folder_id || "";
|
||||
|
||||
// Determine file type label based on MIME type
|
||||
let typeLabel = this.i18n.t('files.file_types.document');
|
||||
let iconClass = 'fas fa-file';
|
||||
// Use pre-computed display fields from the API response
|
||||
const iconClass = item.icon_class || 'fas fa-file';
|
||||
const typeLabel = item.category
|
||||
? (this.i18n.t(`files.file_types.${item.category.toLowerCase()}`) || item.category)
|
||||
: this.i18n.t('files.file_types.document');
|
||||
|
||||
if (item.mime_type) {
|
||||
if (item.mime_type.startsWith('image/')) {
|
||||
iconClass = 'fas fa-file-image';
|
||||
typeLabel = this.i18n.t('files.file_types.image');
|
||||
} else if (item.mime_type.startsWith('text/')) {
|
||||
iconClass = 'fas fa-file-alt';
|
||||
typeLabel = this.i18n.t('files.file_types.text');
|
||||
} else if (item.mime_type.startsWith('video/')) {
|
||||
iconClass = 'fas fa-file-video';
|
||||
typeLabel = this.i18n.t('files.file_types.video');
|
||||
} else if (item.mime_type.startsWith('audio/')) {
|
||||
iconClass = 'fas fa-file-audio';
|
||||
typeLabel = this.i18n.t('files.file_types.audio');
|
||||
} else if (item.mime_type === 'application/pdf') {
|
||||
iconClass = 'fas fa-file-pdf';
|
||||
typeLabel = this.i18n.t('files.file_types.pdf');
|
||||
}
|
||||
}
|
||||
|
||||
// Format file size
|
||||
const fileSize = this.formatFileSize(item.size);
|
||||
// Format file size and date
|
||||
const fileSize = item.size_formatted || this.formatFileSize(item.size);
|
||||
|
||||
// Format date
|
||||
const modifiedDate = new Date(item.modified_at * 1000);
|
||||
|
||||
+172
-265
@@ -1,154 +1,97 @@
|
||||
/**
|
||||
* OxiCloud - Recent Files Module
|
||||
* This file handles tracking and displaying recently accessed files
|
||||
* OxiCloud - Recent Files Module (server-authoritative)
|
||||
*
|
||||
* Source of truth: GET /api/recent (enriched with name/size/mime via SQL JOIN).
|
||||
* File-access events are forwarded to the backend with POST /api/recent/{type}/{id}.
|
||||
* No localStorage usage — the server persists and prunes recent items.
|
||||
*/
|
||||
|
||||
// Recent Files Module
|
||||
const recent = {
|
||||
// Base key for storing recent files in localStorage (username is appended)
|
||||
STORAGE_KEY_PREFIX: 'oxicloud_recent_files',
|
||||
|
||||
// Legacy key (pre-fix, shared across all users)
|
||||
LEGACY_STORAGE_KEY: 'oxicloud_recent_files',
|
||||
|
||||
// Maximum number of recent files to store
|
||||
/** Maximum items to request from the server */
|
||||
MAX_RECENT_FILES: 20,
|
||||
|
||||
/**
|
||||
* Get the user-specific storage key for recent files.
|
||||
* Falls back to legacy global key if username is unavailable.
|
||||
* @returns {string} localStorage key scoped to the current user
|
||||
*/
|
||||
getStorageKey() {
|
||||
try {
|
||||
const userData = JSON.parse(localStorage.getItem('oxicloud_user') || '{}');
|
||||
if (userData.username) {
|
||||
return `${this.STORAGE_KEY_PREFIX}_${userData.username}`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Could not determine current user for recent files key');
|
||||
}
|
||||
// Should not happen in normal flow — user must be logged in
|
||||
return this.LEGACY_STORAGE_KEY;
|
||||
|
||||
// ───────────────────── helpers ─────────────────────
|
||||
|
||||
_authHeaders() {
|
||||
const token = localStorage.getItem('oxicloud_token');
|
||||
const h = {};
|
||||
if (token) h['Authorization'] = `Bearer ${token}`;
|
||||
return h;
|
||||
},
|
||||
|
||||
|
||||
// ───────────────────── lifecycle ─────────────────────
|
||||
|
||||
/**
|
||||
* Initialize recent files module
|
||||
* Initialise the module. Called once from app.js on startup.
|
||||
*/
|
||||
init() {
|
||||
console.log('Initializing recent files module');
|
||||
this.migrateFromLegacyKey();
|
||||
this.ensureRecentFilesStorage();
|
||||
console.log('Initializing recent files module (server-authoritative)');
|
||||
this.setupEventListeners();
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Migrate data from the old global key to the user-specific key.
|
||||
* This runs once: if the legacy key has data and the user-specific key
|
||||
* does not yet exist, the data is moved.
|
||||
*/
|
||||
migrateFromLegacyKey() {
|
||||
const userKey = this.getStorageKey();
|
||||
// Only migrate if the key is actually user-specific
|
||||
if (userKey === this.LEGACY_STORAGE_KEY) return;
|
||||
|
||||
const legacyData = localStorage.getItem(this.LEGACY_STORAGE_KEY);
|
||||
if (legacyData && !localStorage.getItem(userKey)) {
|
||||
console.log('Migrating recent files from legacy global key to user-specific key');
|
||||
localStorage.setItem(userKey, legacyData);
|
||||
}
|
||||
// Always remove the legacy key so other users don't see stale data
|
||||
localStorage.removeItem(this.LEGACY_STORAGE_KEY);
|
||||
},
|
||||
|
||||
/**
|
||||
* Make sure the recent files storage is initialized
|
||||
*/
|
||||
ensureRecentFilesStorage() {
|
||||
const key = this.getStorageKey();
|
||||
if (!localStorage.getItem(key)) {
|
||||
localStorage.setItem(key, JSON.stringify([]));
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Set up event listeners to track file access
|
||||
* Listen for file-accessed events dispatched by ui.js and forward
|
||||
* them to the backend.
|
||||
*/
|
||||
setupEventListeners() {
|
||||
// Listen for custom event when a file is accessed
|
||||
document.addEventListener('file-accessed', (event) => {
|
||||
if (event.detail && event.detail.file) {
|
||||
this.addRecentFile(event.detail.file);
|
||||
const file = event.detail.file;
|
||||
const itemType = file.item_type || 'file';
|
||||
this._recordAccess(file.id, itemType);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Add a file to recent files
|
||||
* @param {Object} file - File object containing id, name, folder_id, etc.
|
||||
* Record an access event on the server.
|
||||
*/
|
||||
addRecentFile(file) {
|
||||
// Don't add if no file or no ID
|
||||
if (!file || !file.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get current recent files
|
||||
const recentFiles = this.getRecentFiles();
|
||||
|
||||
// Remove if file already exists in recent files
|
||||
const existingIndex = recentFiles.findIndex(item => item.id === file.id);
|
||||
if (existingIndex !== -1) {
|
||||
recentFiles.splice(existingIndex, 1);
|
||||
}
|
||||
|
||||
// Add file with timestamp to the beginning of the array
|
||||
const fileWithTimestamp = {
|
||||
...file,
|
||||
accessedAt: Date.now()
|
||||
};
|
||||
|
||||
recentFiles.unshift(fileWithTimestamp);
|
||||
|
||||
// Keep only the most recent files (limit to MAX_RECENT_FILES)
|
||||
const trimmedFiles = recentFiles.slice(0, this.MAX_RECENT_FILES);
|
||||
|
||||
// Save back to localStorage (user-scoped key)
|
||||
localStorage.setItem(this.getStorageKey(), JSON.stringify(trimmedFiles));
|
||||
},
|
||||
|
||||
/**
|
||||
* Get recent files from localStorage
|
||||
* @returns {Array} Array of recent file objects with timestamps
|
||||
*/
|
||||
getRecentFiles() {
|
||||
async _recordAccess(itemId, itemType) {
|
||||
try {
|
||||
const recentFilesJson = localStorage.getItem(this.getStorageKey());
|
||||
return recentFilesJson ? JSON.parse(recentFilesJson) : [];
|
||||
} catch (error) {
|
||||
console.error('Error loading recent files:', error);
|
||||
return [];
|
||||
await fetch(`/api/recent/${itemType}/${itemId}`, {
|
||||
method: 'POST',
|
||||
headers: this._authHeaders()
|
||||
});
|
||||
} catch (err) {
|
||||
console.warn('Failed to record recent access:', err);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// ───────────────────── public API ─────────────────────
|
||||
|
||||
/**
|
||||
* Clear all recent files
|
||||
* Clear all recent items (delegates to the server).
|
||||
*/
|
||||
clearRecentFiles() {
|
||||
localStorage.setItem(this.getStorageKey(), JSON.stringify([]));
|
||||
async clearRecentFiles() {
|
||||
try {
|
||||
await fetch('/api/recent/clear', {
|
||||
method: 'DELETE',
|
||||
headers: this._authHeaders()
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error clearing recent files:', err);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Display recent files in the UI
|
||||
* Fetch and display recent files. Data comes directly from the
|
||||
* enriched backend response — zero extra per-item fetches.
|
||||
*/
|
||||
async displayRecentFiles() {
|
||||
try {
|
||||
const recentFiles = this.getRecentFiles();
|
||||
|
||||
// Clear existing content
|
||||
const response = await fetch(`/api/recent?limit=${this.MAX_RECENT_FILES}`, {
|
||||
headers: this._authHeaders()
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Server returned ${response.status}`);
|
||||
}
|
||||
|
||||
const recentItems = await response.json();
|
||||
|
||||
const filesGrid = document.getElementById('files-grid');
|
||||
const filesListView = document.getElementById('files-list-view');
|
||||
|
||||
|
||||
filesGrid.innerHTML = '';
|
||||
filesListView.innerHTML = `
|
||||
<div class="list-header recent-header">
|
||||
@@ -159,12 +102,10 @@ const recent = {
|
||||
<div data-i18n="recent.accessed">Accessed</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Update breadcrumb - just show Home
|
||||
|
||||
window.ui.updateBreadcrumb('');
|
||||
|
||||
// Show empty state if no recent files
|
||||
if (recentFiles.length === 0) {
|
||||
|
||||
if (recentItems.length === 0) {
|
||||
const emptyState = document.createElement('div');
|
||||
emptyState.className = 'empty-state';
|
||||
emptyState.innerHTML = `
|
||||
@@ -175,168 +116,134 @@ const recent = {
|
||||
filesGrid.appendChild(emptyState);
|
||||
return;
|
||||
}
|
||||
|
||||
// Process each recent file
|
||||
for (const recentFile of recentFiles) {
|
||||
this.createRecentFileElement(recentFile, filesGrid, filesListView);
|
||||
|
||||
for (const item of recentItems) {
|
||||
this._renderRecentItem(item, filesGrid, filesListView);
|
||||
}
|
||||
|
||||
// Update file icons
|
||||
|
||||
window.ui.updateFileIcons();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error displaying recent files:', error);
|
||||
window.ui.showNotification('Error', 'Error loading recent files');
|
||||
if (window.ui && window.ui.showNotification) {
|
||||
window.ui.showNotification('Error', 'Error loading recent files');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a file element for a recent file
|
||||
* @param {Object} file - Recent file object
|
||||
* @param {HTMLElement} filesGrid - Grid view container
|
||||
* @param {HTMLElement} filesListView - List view container
|
||||
*/
|
||||
createRecentFileElement(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';
|
||||
}
|
||||
}
|
||||
// ───────────────────── renderer ─────────────────────
|
||||
|
||||
// Format size and date
|
||||
const fileSize = window.formatFileSize ? window.formatFileSize(file.size || 0) : '0 B';
|
||||
const accessedDate = new Date(file.accessedAt);
|
||||
_renderRecentItem(item, filesGrid, filesListView) {
|
||||
const name = item.item_name || item.item_id || 'Unknown';
|
||||
const itemId = item.item_id;
|
||||
const folderId = item.parent_id || '';
|
||||
const mimeType = item.item_mime_type || 'application/octet-stream';
|
||||
const isFolder = item.item_type === 'folder';
|
||||
|
||||
// Build a minimal file object for click handlers
|
||||
const fileObj = {
|
||||
id: itemId,
|
||||
name,
|
||||
folder_id: folderId,
|
||||
mime_type: mimeType,
|
||||
size: item.item_size || 0
|
||||
};
|
||||
|
||||
// Use pre-computed display fields from the enriched API response
|
||||
const iconClass = item.icon_class || (isFolder ? 'fas fa-folder' : 'fas fa-file');
|
||||
const iconSpecialClass = item.icon_special_class || (isFolder ? 'folder-icon' : '');
|
||||
const typeLabel = item.category
|
||||
? (window.i18n ? window.i18n.t(`files.file_types.${item.category.toLowerCase()}`) || item.category : item.category)
|
||||
: (isFolder
|
||||
? (window.i18n ? window.i18n.t('files.file_types.folder') : 'Folder')
|
||||
: (window.i18n ? window.i18n.t('files.file_types.document') : 'Document'));
|
||||
|
||||
const fileSize = isFolder ? '--' : (item.size_formatted || (window.formatFileSize ? window.formatFileSize(item.item_size || 0) : '0 B'));
|
||||
const accessedDate = new Date(item.accessed_at);
|
||||
const formattedDate = accessedDate.toLocaleDateString() + ' ' +
|
||||
accessedDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
||||
accessedDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
|
||||
// Grid view element
|
||||
const fileGridElement = document.createElement('div');
|
||||
fileGridElement.className = 'file-card recent-item';
|
||||
fileGridElement.dataset.fileId = file.id;
|
||||
fileGridElement.dataset.fileName = file.name;
|
||||
fileGridElement.dataset.folderId = file.folder_id || "";
|
||||
// Click handler
|
||||
const onClick = () => {
|
||||
if (isFolder) {
|
||||
window.app.currentPath = itemId;
|
||||
window.ui.updateBreadcrumb(name);
|
||||
window.loadFiles();
|
||||
} else {
|
||||
// Re-record access
|
||||
document.dispatchEvent(new CustomEvent('file-accessed', { detail: { file: fileObj } }));
|
||||
if (window.ui && window.ui.isViewableFile(fileObj) && window.inlineViewer) {
|
||||
window.inlineViewer.openFile(fileObj);
|
||||
} else if (window.fileOps) {
|
||||
window.fileOps.downloadFile(itemId, name);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fileGridElement.innerHTML = `
|
||||
<div class="recent-indicator">
|
||||
<i class="fas fa-clock"></i>
|
||||
</div>
|
||||
<div class="file-icon ${iconSpecialClass}">
|
||||
<i class="${iconClass}"></i>
|
||||
</div>
|
||||
<div class="file-name">${escapeHtml(file.name)}</div>
|
||||
// Context menu handler
|
||||
const onContextMenu = (e) => {
|
||||
e.preventDefault();
|
||||
if (isFolder) {
|
||||
window.app.contextMenuTargetFolder = { id: itemId, name, parent_id: folderId };
|
||||
const cm = document.getElementById('folder-context-menu');
|
||||
cm.style.left = `${e.pageX}px`;
|
||||
cm.style.top = `${e.pageY}px`;
|
||||
cm.style.display = 'block';
|
||||
} else {
|
||||
window.app.contextMenuTargetFile = { id: itemId, name, folder_id: folderId };
|
||||
const cm = document.getElementById('file-context-menu');
|
||||
cm.style.left = `${e.pageX}px`;
|
||||
cm.style.top = `${e.pageY}px`;
|
||||
cm.style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
// --- grid element ---
|
||||
const gridEl = document.createElement('div');
|
||||
gridEl.className = `file-card recent-item`;
|
||||
if (isFolder) {
|
||||
gridEl.dataset.folderId = itemId;
|
||||
gridEl.dataset.folderName = name;
|
||||
} else {
|
||||
gridEl.dataset.fileId = itemId;
|
||||
gridEl.dataset.fileName = name;
|
||||
gridEl.dataset.folderId = folderId;
|
||||
}
|
||||
gridEl.innerHTML = `
|
||||
<div class="recent-indicator"><i class="fas fa-clock"></i></div>
|
||||
<div class="file-icon ${iconSpecialClass}"><i class="${iconClass}"></i></div>
|
||||
<div class="file-name">${escapeHtml(name)}</div>
|
||||
<div class="file-info">Accessed ${formattedDate.split(' ')[0]}</div>
|
||||
`;
|
||||
gridEl.addEventListener('click', onClick);
|
||||
gridEl.addEventListener('contextmenu', onContextMenu);
|
||||
filesGrid.appendChild(gridEl);
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
// Dispatch custom event to update recent files
|
||||
document.dispatchEvent(new CustomEvent('file-accessed', {
|
||||
detail: { file }
|
||||
}));
|
||||
});
|
||||
|
||||
// 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 recent-item';
|
||||
fileListElement.dataset.fileId = file.id;
|
||||
fileListElement.dataset.fileName = file.name;
|
||||
fileListElement.dataset.folderId = file.folder_id || "";
|
||||
|
||||
fileListElement.innerHTML = `
|
||||
<div class="recent-indicator">
|
||||
<i class="fas fa-clock"></i>
|
||||
</div>
|
||||
// --- list element ---
|
||||
const listEl = document.createElement('div');
|
||||
listEl.className = `file-item recent-item`;
|
||||
if (isFolder) {
|
||||
listEl.dataset.folderId = itemId;
|
||||
listEl.dataset.folderName = name;
|
||||
} else {
|
||||
listEl.dataset.fileId = itemId;
|
||||
listEl.dataset.fileName = name;
|
||||
listEl.dataset.folderId = folderId;
|
||||
}
|
||||
listEl.innerHTML = `
|
||||
<div class="recent-indicator"><i class="fas fa-clock"></i></div>
|
||||
<div class="name-cell">
|
||||
<div class="file-icon ${iconSpecialClass}">
|
||||
<i class="${iconClass}"></i>
|
||||
</div>
|
||||
<span>${escapeHtml(file.name)}</span>
|
||||
<div class="file-icon ${iconSpecialClass}"><i class="${iconClass}"></i></div>
|
||||
<span>${escapeHtml(name)}</span>
|
||||
</div>
|
||||
<div class="type-cell">${escapeHtml(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);
|
||||
}
|
||||
|
||||
// Dispatch custom event to update recent files
|
||||
document.dispatchEvent(new CustomEvent('file-accessed', {
|
||||
detail: { file }
|
||||
}));
|
||||
});
|
||||
|
||||
// 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);
|
||||
listEl.addEventListener('click', onClick);
|
||||
listEl.addEventListener('contextmenu', onContextMenu);
|
||||
filesListView.appendChild(listEl);
|
||||
}
|
||||
};
|
||||
|
||||
// Expose recent module globally
|
||||
window.recent = recent;
|
||||
// Expose globally
|
||||
window.recent = recent;
|
||||
|
||||
+7
-29
@@ -903,37 +903,15 @@ const ui = {
|
||||
|
||||
console.log(`Adding file to the view: ${file.name} (${file.id})`);
|
||||
|
||||
// Determine icon and type
|
||||
let iconClass = 'fas fa-file';
|
||||
let iconSpecialClass = '';
|
||||
let typeLabel = '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';
|
||||
}
|
||||
}
|
||||
// Use pre-computed display fields from the API response
|
||||
const iconClass = file.icon_class || 'fas fa-file';
|
||||
const iconSpecialClass = file.icon_special_class || '';
|
||||
const typeLabel = file.category
|
||||
? (window.i18n ? window.i18n.t(`files.file_types.${file.category.toLowerCase()}`) || file.category : file.category)
|
||||
: (window.i18n ? window.i18n.t('files.file_types.document') : 'Document');
|
||||
|
||||
// Format size and date
|
||||
const fileSize = window.formatFileSize(file.size);
|
||||
const fileSize = file.size_formatted || window.formatFileSize(file.size);
|
||||
const modifiedDate = new Date(file.modified_at * 1000);
|
||||
const formattedDate = modifiedDate.toLocaleDateString() + ' ' +
|
||||
modifiedDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
||||
|
||||
Reference in New Issue
Block a user