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:
+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);
|
||||
|
||||
Reference in New Issue
Block a user