-
+
+
+
+
@@ -278,7 +291,17 @@
File Attachments
-
+
+
+
+
@@ -294,7 +317,17 @@
File Attachments
-
+
+
+
+
@@ -444,7 +477,17 @@
File Attachments
-
+
DumbAssets
-
+
+
+
diff --git a/public/managers/externalDocManager.js b/public/managers/externalDocManager.js
new file mode 100644
index 0000000..d2c6c7e
--- /dev/null
+++ b/public/managers/externalDocManager.js
@@ -0,0 +1,974 @@
+/**
+ * External Document Manager - Handles searching and linking documents from document management integrations
+ * Only loads integrations with category 'document-management' (e.g., Paperless NGX, Papra)
+ * Extensible for other document management systems like Nextcloud, SharePoint, etc.
+ * Dynamically applies integration color schemes instead of relying on hardcoded CSS classes.
+ */
+
+import { API_PAPERLESS_ENDPOINT, API_PAPRA_ENDPOINT, INTEGRATION_CATEGORIES } from '../../src/constants.js';
+
+export class ExternalDocManager {
+ constructor({ modalManager, setButtonLoading, integrationsManager }) {
+ this.modalManager = modalManager;
+ this.setButtonLoading = setButtonLoading;
+ this.integrationsManager = integrationsManager;
+ this.currentAttachmentType = null;
+ this.currentIsSubAsset = false;
+ this.searchTimeout = null;
+ this.activeIntegrations = [];
+ this.selectedIntegrations = new Set(['all']);
+
+ // Pagination state
+ this.currentPage = 1;
+ this.pageSize = 15;
+ this.totalDocuments = 0;
+ this.currentQuery = '';
+ this.isLoading = false;
+ this.buttonIds = [
+ 'linkExternalPhotos', 'linkExternalReceipts', 'linkExternalManuals',
+ 'linkExternalSubPhotos', 'linkExternalSubReceipts', 'linkExternalSubManuals'
+ ];
+
+ // Store event handlers for proper cleanup
+ this.eventHandlers = new Map();
+
+ // File extension filters for different attachment types (more reliable than MIME types)
+ this.fileExtensionFilters = {
+ photo: [
+ '.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.tiff', '.tif', '.svg'
+ ],
+ receipt: [
+ '.pdf', '.doc', '.docx', '.txt', '.rtf',
+ '.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.tiff', '.tif'
+ ],
+ manual: [
+ '.pdf', '.doc', '.docx', '.txt', '.rtf',
+ '.xls', '.xlsx', '.ppt', '.pptx', '.odt', '.ods', '.odp'
+ ]
+ };
+
+ // MIME type filters as backup (when file extension isn't available)
+ this.mimeTypeFilters = {
+ photo: [
+ 'image/jpeg',
+ 'image/jpg',
+ 'image/png',
+ 'image/gif',
+ 'image/webp',
+ 'image/bmp',
+ 'image/tiff',
+ 'image/svg+xml'
+ ],
+ receipt: [
+ 'application/pdf',
+ 'application/msword',
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+ 'text/plain',
+ 'image/jpeg',
+ 'image/jpg',
+ 'image/png',
+ 'image/gif',
+ 'image/webp',
+ 'image/bmp',
+ 'image/tiff'
+ ],
+ manual: [
+ 'application/pdf',
+ 'application/msword',
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+ 'text/plain',
+ 'application/vnd.ms-excel',
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+ 'application/vnd.ms-powerpoint',
+ 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+ ]
+ };
+
+ this.init();
+ }
+
+ init() {
+ this.bindEvents();
+ this.loadActiveIntegrations();
+ }
+
+ bindEvents() {
+ const modal = document.getElementById('externalDocModal');
+ const closeBtn = modal?.querySelector('.close-btn');
+ const searchInput = document.getElementById('externalDocSearchInput');
+
+ if (closeBtn) closeBtn.addEventListener('click', () => this.closeModal());
+ if (modal) modal.addEventListener('click', (e) => { if (e.target === modal) this.closeModal(); });
+ if (searchInput) {
+ searchInput.addEventListener('input', (e) => {
+ clearTimeout(this.searchTimeout);
+ this.currentQuery = e.target.value;
+ this.currentPage = 1; // Reset to first page on new search
+ this.searchTimeout = setTimeout(() => this.performSearch(e.target.value), 300);
+ });
+ }
+
+ // Pagination event listeners
+ const prevBtn = document.getElementById('prevPageBtn');
+ const nextBtn = document.getElementById('nextPageBtn');
+
+ if (prevBtn) prevBtn.addEventListener('click', () => this.previousPage());
+ if (nextBtn) nextBtn.addEventListener('click', () => this.nextPage());
+ }
+
+ async loadActiveIntegrations() {
+ try {
+ // Remove existing event listeners and hide buttons
+ this.buttonIds.forEach(buttonId => {
+ const button = document.getElementById(buttonId);
+ if (button) {
+ const handler = this.eventHandlers.get(buttonId);
+ if (handler) {
+ button.removeEventListener('click', handler);
+ this.eventHandlers.delete(buttonId);
+ }
+ button.style.display = 'none';
+ }
+ });
+
+ // Use IntegrationsManager to get active integrations
+ const allActiveIntegrations = await this.integrationsManager.getActiveIntegrations();
+
+ // Filter to only include document-management category integrations
+ this.activeIntegrations = allActiveIntegrations.filter(integration => {
+ const integrationData = this.integrationsManager.getIntegration(integration.id);
+ return integrationData && integrationData.category === INTEGRATION_CATEGORIES.DOCUMENT_MANAGEMENT;
+ });
+
+ if (window.appConfig?.debug) {
+ console.log('ExternalDocManager: All active integrations:', allActiveIntegrations);
+ console.log('ExternalDocManager: Document management integrations:', this.activeIntegrations);
+ }
+
+ if (this.activeIntegrations && this.activeIntegrations.length > 0) {
+ this.buttonIds.forEach(buttonId => {
+ const button = document.getElementById(buttonId);
+ if (button) {
+ const handler = (e) => this.handleLinkExternalDocs(e, buttonId);
+ this.eventHandlers.set(buttonId, handler);
+ button.addEventListener('click', handler);
+ button.style.display = 'flex';
+ }
+ });
+ }
+ this.updateIntegrationFilters();
+ } catch (error) {
+ console.error('Failed to load active integrations:', error);
+ this.activeIntegrations = [];
+ }
+ }
+
+ updateIntegrationFilters() {
+ const filtersContainer = document.getElementById('integrationFilters');
+ if (!filtersContainer) return;
+
+ filtersContainer.innerHTML = '';
+
+ if (this.activeIntegrations.length === 0) {
+ filtersContainer.innerHTML = '`;
+ this.hidePagination();
+ } finally {
+ this.isLoading = false;
+ }
+ }
+
+ async loadAllDocuments() {
+ if (this.isLoading) return;
+
+ // Check if we have any active integrations
+ if (!this.activeIntegrations || this.activeIntegrations.length === 0) {
+ const resultsContainer = document.getElementById('externalDocResults');
+ if (resultsContainer) {
+ resultsContainer.innerHTML = `
+ `;
+ }
+ this.hidePagination();
+ } finally {
+ this.isLoading = false;
+ }
+ }
+
+ showLoading(message = 'Loading...') {
+ const resultsContainer = document.getElementById('externalDocResults');
+ if (resultsContainer) {
+ resultsContainer.innerHTML = ``;
+ this.hidePagination();
+ return;
+ }
+
+ const resultsHtml = results.map(doc => {
+ const formattedDate = doc.modified ? new Date(doc.modified).toLocaleDateString() : '';
+ const formattedSize = doc.fileSize ? this.formatFileSize(doc.fileSize) : '';
+ const meta = [formattedDate, formattedSize].filter(Boolean).join(' • ');
+
+ // Get the display name for the source
+ const sourceDisplayName = this.getSourceDisplayName(doc.source);
+
+ // Get integration data and color scheme for dynamic styling
+ const integrationData = this.integrationsManager.getIntegration(doc.source);
+ const colorScheme = integrationData?.colorScheme || '#6b7280'; // Default gray if no color scheme
+ const borderLeftStyle = `border-left: 3px solid ${colorScheme};`;
+ const sourceSpanStyle = `background-color: ${colorScheme};`;
+
+ const html = `
+ 
`;
+ } else {
+ // Fallback for unknown integrations or when data isn't loaded yet
+ return `} - Array of enabled integrations
+ */
+ async getActiveIntegrations() {
+ try {
+ // Ensure integrations are loaded first
+ await this.loadIntegrations();
+
+ // Fetch settings to check which integrations are enabled
+ const response = await fetch(`${globalThis.getApiBaseUrl()}/api/integrations/enabled`);
+ const responseValidation = await globalThis.validateResponse(response);
+ if (responseValidation.errorMessage) {
+ throw new Error(responseValidation.errorMessage);
+ }
+
+ return await response.json();
+ } catch (error) {
+ console.error('Failed to get active integrations:', error);
+ return [];
+ }
+ }
+
+ /**
+ * Group integrations by category
+ */
+ groupIntegrationsByCategory(integrations) {
+ const categories = {};
+
+ integrations.forEach(integration => {
+ const category = integration.category || 'general';
+ if (!categories[category]) {
+ categories[category] = [];
+ }
+ categories[category].push(integration);
+ });
+
+ return categories;
+ }
+
+ /**
+ * Render an integration category section
+ */
+ renderIntegrationCategory(category, integrations) {
+ const categorySection = document.createElement('div');
+ categorySection.className = 'integration-category';
+
+ const categoryTitle = this.getCategoryDisplayName(category);
+
+ integrations.forEach(integration => {
+ const integrationElement = this.renderIntegration(integration);
+ categorySection.appendChild(integrationElement);
+ });
+
+ return categorySection;
+ }
+
+ /**
+ * Get display name for category
+ */
+ getCategoryDisplayName(category) {
+ const categoryNames = {
+ 'document-management': 'Document Management',
+ 'communication': 'Communication',
+ 'monitoring': 'Monitoring',
+ 'backup': 'Backup & Sync',
+ 'general': 'General'
+ };
+
+ return categoryNames[category] || category.charAt(0).toUpperCase() + category.slice(1);
+ }
+
+ /**
+ * Render a single integration
+ */
+ renderIntegration(integration) {
+ const section = document.createElement('div');
+ section.className = 'integration-section collapsible-section';
+ section.dataset.integrationId = integration.id;
+
+ const header = document.createElement('div');
+ header.className = 'collapsible-header';
+
+ // Create header content with proper structure matching main app
+ const headerContent = document.createElement('div');
+ headerContent.className = 'integration-header-content';
+
+ const titleElement = document.createElement('h3');
+ if (integration.logoHref) {
+ const iconElement = document.createElement('img');
+ iconElement.src = integration.logoHref;
+ iconElement.alt = `${integration.name} logo`;
+ iconElement.className = 'integration-logo';
+ headerContent.appendChild(iconElement);
+ }
+ titleElement.textContent = integration.name;
+ headerContent.appendChild(titleElement);
+
+ // Add description if available
+ if (integration.description) {
+ const descElement = document.createElement('p');
+ descElement.className = 'integration-description';
+ descElement.textContent = integration.description;
+ descElement.style.color = 'var(--text-color-secondary)';
+ headerContent.appendChild(descElement);
+ }
+
+ // Create toggle icon matching main app structure
+ const toggleIcon = document.createElement('div');
+ // toggleIcon.className = 'collapsible-toggle';
+ toggleIcon.innerHTML = ``;
+
+ header.appendChild(headerContent);
+ header.appendChild(toggleIcon);
+
+ const content = document.createElement('div');
+ content.className = 'collapsible-content';
+
+ const fieldsContainer = document.createElement('div');
+ fieldsContainer.className = 'integration-fields';
+
+ // Render fields based on schema
+ const fields = this.renderIntegrationFields(integration);
+ fieldsContainer.appendChild(fields);
+
+ // Add test connection button if integration supports it
+ if (this.integrationSupportsTestConnection(integration)) {
+ const testButton = document.createElement('button');
+ testButton.type = 'button';
+ testButton.className = 'action-button test-integration-btn';
+ testButton.dataset.integrationId = integration.id;
+ testButton.innerHTML = 'Test Connection';
+ // fieldsContainer.appendChild(testButton);
+ // add test button next to fields container checkbox integration-field data-field-name="enabled"
+ const enabledField = fieldsContainer.querySelector('.integration-field[data-field-name="enabled"]');
+ if (enabledField) {
+ enabledField.appendChild(testButton);
+ } else {
+ // If no enabled field, append to fields container directly
+ fieldsContainer.appendChild(testButton);
+ }
+ }
+
+ content.appendChild(fieldsContainer);
+ section.appendChild(header);
+ section.appendChild(content);
+
+ // Make sections start collapsed and then use shared collapsible system
+ section.setAttribute('data-collapsed', 'true');
+
+ return section;
+ }
+
+ /**
+ * Render integration fields based on schema
+ */
+ renderIntegrationFields(integration) {
+ const container = document.createElement('div');
+ container.className = 'integration-fields-container';
+
+ const schema = integration.configSchema || {};
+
+ Object.entries(schema).forEach(([fieldName, fieldConfig]) => {
+ // // Skip the enabled field as it's handled by the toggle
+ // if (fieldName === 'enabled') return;
+
+ const fieldElement = this.renderIntegrationField(integration.id, fieldName, fieldConfig);
+ container.appendChild(fieldElement);
+ });
+
+ return container;
+ }
+
+ /**
+ * Render a single integration field
+ */
+ renderIntegrationField(integrationId, fieldName, fieldConfig) {
+ const fieldContainer = document.createElement('div');
+ fieldContainer.className = 'integration-field';
+ fieldContainer.dataset.fieldName = fieldName;
+
+ // Add dependency class if this field depends on another
+ if (fieldConfig.dependsOn) {
+ fieldContainer.classList.add('depends-on-' + fieldConfig.dependsOn);
+ }
+
+ const labelContainer = document.createElement('div');
+ const label = document.createElement('label');
+ label.textContent = fieldConfig.label || fieldName;
+ label.htmlFor = `${integrationId}${fieldName.charAt(0).toUpperCase() + fieldName.slice(1)}`;
+ labelContainer.appendChild(label);
+
+ const fieldId = `${integrationId}${fieldName.charAt(0).toUpperCase() + fieldName.slice(1)}`;
+ let input;
+
+ switch (fieldConfig.type) {
+ case 'password':
+ input = document.createElement('input');
+ input.type = 'password';
+ input.id = fieldId;
+ input.name = fieldName;
+ input.placeholder = fieldConfig.placeholder || '';
+ if (fieldConfig.sensitive) {
+ input.dataset.sensitive = 'true';
+ }
+ break;
+
+ case 'url':
+ input = document.createElement('input');
+ input.type = 'url';
+ input.id = fieldId;
+ input.name = fieldName;
+ input.placeholder = fieldConfig.placeholder || '';
+ break;
+
+ case 'boolean':
+ // Check if this is the enable field for a "coming soon" integration
+ if (fieldName === 'enabled') {
+ const integration = this.integrations.get(integrationId);
+ if (integration && integration.comingSoon) {
+ // Show "Coming Soon!" message instead of toggle
+ input = document.createElement('div');
+ input.className = 'coming-soon-message';
+ input.innerHTML = `
+ Coming Soon!
+ `;
+ break;
+ }
+ }
+
+ // For boolean fields other than 'enabled', render as checkbox
+ input = document.createElement('div');
+ input.className = 'checkbox-container';
+ input.innerHTML = `
+
+ `;
+ break;
+
+ default:
+ input = document.createElement('input');
+ input.type = 'text';
+ input.id = fieldId;
+ input.name = fieldName;
+ input.placeholder = fieldConfig.placeholder || '';
+ }
+
+ fieldContainer.appendChild(labelContainer);
+
+
+ // Add description if provided
+ if (fieldConfig.description) {
+ const description = document.createElement('p');
+ description.className = 'field-description';
+ description.textContent = fieldConfig.description;
+ labelContainer.appendChild(description);
+ }
+ fieldContainer.appendChild(input);
+ return fieldContainer;
+ }
+
+ /**
+ * Check if integration supports test connection
+ */
+ integrationSupportsTestConnection(integration) {
+ if (integration.comingSoon) return false;
+ return integration.endpoints && integration.endpoints.some(endpoint =>
+ endpoint.includes('test-connection') || endpoint.includes('/test')
+ );
+ }
+
+ /**
+ * Bind events for integration controls
+ */
+ bindIntegrationEvents() {
+ // Enable/disable toggle events
+ document.querySelectorAll('.integration-section input[id$="Enabled"]').forEach(toggle => {
+ toggle.addEventListener('change', (e) => {
+ const integrationId = e.target.id.replace('Enabled', '');
+ const section = e.target.closest('.collapsible-section');
+
+ this.toggleIntegrationFields(integrationId, e.target.checked);
+
+ // Recalculate collapsible height on enabled/disable integration
+ if (section) {
+ const content = section.querySelector('.collapsible-content');
+ if (content) {
+ calculateCollapsibleContentHeight(content);
+ }
+ }
+ });
+
+ // Set initial state
+ const integrationId = toggle.id.replace('Enabled', '');
+ this.toggleIntegrationFields(integrationId, toggle.checked);
+ });
+
+ // For coming soon integrations, ensure fields are always hidden
+ this.integrations.forEach((integration, integrationId) => {
+ if (integration.comingSoon) {
+ this.toggleIntegrationFields(integrationId, false);
+ }
+ });
+
+ // Sensitive field focus events for password fields
+ document.querySelectorAll('.integration-section input[data-sensitive="true"]').forEach(field => {
+ field.addEventListener('focus', () => {
+ if (field.value === TOKENMASK) {
+ field.value = '';
+ field.placeholder = 'Enter new value...';
+ }
+ });
+ });
+
+ // Test connection button events
+ document.querySelectorAll('.test-integration-btn').forEach(btn => {
+ btn.addEventListener('click', (e) => {
+ const integrationId = e.target.dataset.integrationId;
+ this.testIntegrationConnection(integrationId, btn);
+ });
+ });
+
+ // Initialize collapsible sections using shared system
+ initCollapsibleSections();
+ }
+
+ /**
+ * Toggle integration fields visibility based on enabled state
+ */
+ toggleIntegrationFields(integrationId, enabled) {
+ const section = document.querySelector(`[data-integration-id="${integrationId}"]`);
+ if (!section) return;
+
+ const integration = this.integrations.get(integrationId);
+ const isComingSoon = integration && integration.comingSoon;
+
+ // For coming soon integrations, always hide dependent fields and test button
+ if (isComingSoon) {
+ enabled = false;
+ }
+
+ // Toggle fields that depend on enabled state
+ const dependentFields = section.querySelectorAll('.integration-field.depends-on-enabled');
+ dependentFields.forEach(field => {
+ field.style.display = enabled ? 'flex' : 'none'; // Use flex for proper alignment
+ });
+
+ // Toggle test button
+ const testBtn = section.querySelector('.test-integration-btn');
+ if (testBtn) {
+ testBtn.style.display = enabled ? 'flex' : 'none'; // Use flex for proper alignment
+ }
+ }
+
+ /**
+ * Test integration connection
+ */
+ async testIntegrationConnection(integrationId, button) {
+ try {
+ this.setButtonLoading(button, true);
+
+ // Collect current integration settings
+ const integrationConfig = this.collectIntegrationSettings(integrationId);
+
+ const response = await fetch(`${globalThis.getApiBaseUrl()}/api/integrations/${integrationId}/test`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(integrationConfig),
+ credentials: 'include'
+ });
+
+ const responseValidation = await globalThis.validateResponse(response);
+ if (responseValidation.errorMessage) {
+ throw new Error(responseValidation.errorMessage);
+ }
+
+ const result = await response.json();
+
+ if (result.status === API_TEST_SUCCESS) {
+ globalThis.toaster.show(result.message || `${integrationId} connection test successful!`);
+ } else {
+ throw new Error(result.message || 'Connection test failed');
+ }
+
+ } catch (error) {
+ globalThis.logError(`${integrationId} connection test failed:`, error);
+ } finally {
+ this.setButtonLoading(button, false);
+ }
+ }
+
+ /**
+ * Collect integration settings from form fields
+ */
+ collectIntegrationSettings(integrationId) {
+ const section = document.querySelector(`[data-integration-id="${integrationId}"]`);
+ if (!section) return {};
+
+ const settings = {};
+
+ // Get enabled state
+ const enabledToggle = section.querySelector(`#${integrationId}Enabled`);
+ if (enabledToggle) {
+ settings.enabled = enabledToggle.checked;
+ }
+
+ // Get all other fields
+ const fields = section.querySelectorAll('.integration-field input, .integration-field select, .integration-field textarea');
+ fields.forEach(field => {
+ const fieldName = field.name || field.id.replace(integrationId, '').toLowerCase();
+
+ if (field.type === 'checkbox') {
+ settings[fieldName] = field.checked;
+ } else {
+ settings[fieldName] = field.value;
+ }
+ });
+
+ return settings;
+ }
+
+ /**
+ * Collect all integration settings from the form
+ */
+ collectAllIntegrationSettings() {
+ const integrationSettings = {};
+
+ // Find all integration sections
+ const integrationSections = document.querySelectorAll('.integration-section[data-integration-id]');
+
+ integrationSections.forEach(section => {
+ const integrationId = section.dataset.integrationId;
+ const settings = this.collectIntegrationSettings(integrationId);
+
+ if (Object.keys(settings).length > 0) {
+ integrationSettings[integrationId] = settings;
+ }
+ });
+
+ return integrationSettings;
+ }
+
+ /**
+ * Apply integration settings to the dynamically loaded form
+ */
+ applyIntegrationSettingsToForm(integrationSettings) {
+ Object.entries(integrationSettings).forEach(([integrationId, config]) => {
+ const section = document.querySelector(`[data-integration-id="${integrationId}"]`);
+ if (!section) return;
+
+ const integration = this.integrations.get(integrationId);
+ if (integration && integration.comingSoon) {
+ // For coming soon integrations, just ensure fields are hidden and do not save any settings
+ this.toggleIntegrationFields(integrationId, false);
+ return;
+ }
+
+ // Set enabled state
+ const enabledToggle = section.querySelector(`#${integrationId}Enabled`);
+ if (enabledToggle) {
+ enabledToggle.checked = config.enabled || false;
+ this.toggleIntegrationFields(integrationId, enabledToggle.checked);
+ }
+
+ // Set field values
+ Object.entries(config).forEach(([fieldName, value]) => {
+ if (fieldName === 'enabled') return; // Already handled above
+
+ const fieldId = `${integrationId}${fieldName.charAt(0).toUpperCase() + fieldName.slice(1)}`;
+ const field = section.querySelector(`#${fieldId}`);
+
+ if (field) {
+ if (field.type === 'checkbox') {
+ field.checked = !!value;
+ } else {
+ // Handle sensitive fields
+ if (field.dataset.sensitive === 'true' && value) {
+ field.value = TOKENMASK;
+ field.setAttribute('data-has-saved-token', 'true');
+ field.placeholder = 'Saved token hidden - focus to enter new token';
+ } else {
+ field.value = value || '';
+ }
+ }
+ }
+ });
+ });
+ }
+}
diff --git a/public/managers/modalManager.js b/public/managers/modalManager.js
index b6142a9..2bfeb33 100644
--- a/public/managers/modalManager.js
+++ b/public/managers/modalManager.js
@@ -47,7 +47,10 @@ export class ModalManager {
// Global state
getAssets,
- getSubAssets
+ getSubAssets,
+
+ // Integrations
+ integrationsManager
}) {
// Store DOM elements
this.assetModal = assetModal;
@@ -95,6 +98,9 @@ export class ModalManager {
this.getAssets = getAssets;
this.getSubAssets = getSubAssets;
+ // Store integrations manager
+ this.integrationsManager = integrationsManager;
+
// Modal state
this.isEditMode = false;
this.currentAsset = null;
@@ -128,6 +134,19 @@ export class ModalManager {
this.currentAsset = asset;
this.filesToDelete = [];
+ // For new assets, create a temporary asset object to store external document attachments
+ if (!this.isEditMode) {
+ this.currentAsset = {
+ id: this.generateId(),
+ photoPaths: [],
+ receiptPaths: [],
+ manualPaths: [],
+ photoInfo: [],
+ receiptInfo: [],
+ manualInfo: []
+ };
+ }
+
document.getElementById('addAssetTitle').textContent = this.isEditMode ? 'Edit Asset' : 'Add Asset';
this.assetForm.reset();
let containsExistingFiles = false;
@@ -216,6 +235,19 @@ export class ModalManager {
this.currentSubAsset = subAsset;
this.filesToDelete = [];
+ // For new sub-assets, create a temporary sub-asset object to store external document attachments
+ if (!this.isEditMode) {
+ this.currentSubAsset = {
+ id: this.generateId(),
+ photoPaths: [],
+ receiptPaths: [],
+ manualPaths: [],
+ photoInfo: [],
+ receiptInfo: [],
+ manualInfo: []
+ };
+ }
+
document.getElementById('addComponentTitle').textContent = this.isEditMode ? 'Edit Component' : 'Add Component';
this.subAssetForm.reset();
let containsExistingFiles = false;
@@ -529,7 +561,8 @@ export class ModalManager {
photoInput,
this,
photoInfo.originalName || photoPath.split('/').pop(),
- photoInfo.size ? this.formatFileSize(photoInfo.size) : null
+ photoInfo.size ? this.formatFileSize(photoInfo.size) : null,
+ photoInfo
);
});
containsExistingFiles = true;
@@ -544,7 +577,8 @@ export class ModalManager {
photoInput,
this,
photoInfo.originalName || asset.photoPath.split('/').pop(),
- photoInfo.size ? this.formatFileSize(photoInfo.size) : null
+ photoInfo.size ? this.formatFileSize(photoInfo.size) : null,
+ photoInfo
);
containsExistingFiles = true;
}
@@ -561,7 +595,8 @@ export class ModalManager {
receiptInput,
this,
receiptInfo.originalName || receiptPath.split('/').pop(),
- receiptInfo.size ? this.formatFileSize(receiptInfo.size) : null
+ receiptInfo.size ? this.formatFileSize(receiptInfo.size) : null,
+ receiptInfo
);
});
containsExistingFiles = true;
@@ -576,7 +611,8 @@ export class ModalManager {
receiptInput,
this,
receiptInfo.originalName || asset.receiptPath.split('/').pop(),
- receiptInfo.size ? this.formatFileSize(receiptInfo.size) : null
+ receiptInfo.size ? this.formatFileSize(receiptInfo.size) : null,
+ receiptInfo
);
containsExistingFiles = true;
}
@@ -593,7 +629,8 @@ export class ModalManager {
manualInput,
this,
manualInfo.originalName || manualPath.split('/').pop(),
- manualInfo.size ? this.formatFileSize(manualInfo.size) : null
+ manualInfo.size ? this.formatFileSize(manualInfo.size) : null,
+ manualInfo
);
});
containsExistingFiles = true;
@@ -608,7 +645,8 @@ export class ModalManager {
manualInput,
this,
manualInfo.originalName || asset.manualPath.split('/').pop(),
- manualInfo.size ? this.formatFileSize(manualInfo.size) : null
+ manualInfo.size ? this.formatFileSize(manualInfo.size) : null,
+ manualInfo
);
containsExistingFiles = true;
}
@@ -642,7 +680,8 @@ export class ModalManager {
photoInput,
this,
photoInfo.originalName || photoPath.split('/').pop(),
- photoInfo.size ? this.formatFileSize(photoInfo.size) : null
+ photoInfo.size ? this.formatFileSize(photoInfo.size) : null,
+ photoInfo
);
});
containsExistingFiles = true;
@@ -657,7 +696,8 @@ export class ModalManager {
photoInput,
this,
photoInfo.originalName || subAsset.photoPath.split('/').pop(),
- photoInfo.size ? this.formatFileSize(photoInfo.size) : null
+ photoInfo.size ? this.formatFileSize(photoInfo.size) : null,
+ photoInfo
);
containsExistingFiles = true;
}
@@ -674,7 +714,8 @@ export class ModalManager {
receiptInput,
this,
receiptInfo.originalName || receiptPath.split('/').pop(),
- receiptInfo.size ? this.formatFileSize(receiptInfo.size) : null
+ receiptInfo.size ? this.formatFileSize(receiptInfo.size) : null,
+ receiptInfo
);
});
containsExistingFiles = true;
@@ -689,7 +730,8 @@ export class ModalManager {
receiptInput,
this,
receiptInfo.originalName || subAsset.receiptPath.split('/').pop(),
- receiptInfo.size ? this.formatFileSize(receiptInfo.size) : null
+ receiptInfo.size ? this.formatFileSize(receiptInfo.size) : null,
+ receiptInfo
);
containsExistingFiles = true;
}
@@ -706,7 +748,8 @@ export class ModalManager {
manualInput,
this,
manualInfo.originalName || manualPath.split('/').pop(),
- manualInfo.size ? this.formatFileSize(manualInfo.size) : null
+ manualInfo.size ? this.formatFileSize(manualInfo.size) : null,
+ manualInfo
);
});
containsExistingFiles = true;
@@ -721,7 +764,8 @@ export class ModalManager {
manualInput,
this,
manualInfo.originalName || subAsset.manualPath.split('/').pop(),
- manualInfo.size ? this.formatFileSize(manualInfo.size) : null
+ manualInfo.size ? this.formatFileSize(manualInfo.size) : null,
+ manualInfo
);
containsExistingFiles = true;
}
@@ -836,10 +880,17 @@ export class ModalManager {
newAsset.manualInfo = this.currentAsset.manualInfo || [];
newAsset.createdAt = this.currentAsset.createdAt;
} else {
- newAsset.id = this.generateId();
+ // For new assets, use the temporary asset data (including external document attachments)
+ newAsset.id = this.currentAsset ? this.currentAsset.id : this.generateId();
newAsset.photoPath = null;
newAsset.receiptPath = null;
newAsset.manualPath = null;
+ newAsset.photoPaths = this.currentAsset ? this.currentAsset.photoPaths || [] : [];
+ newAsset.receiptPaths = this.currentAsset ? this.currentAsset.receiptPaths || [] : [];
+ newAsset.manualPaths = this.currentAsset ? this.currentAsset.manualPaths || [] : [];
+ newAsset.photoInfo = this.currentAsset ? this.currentAsset.photoInfo || [] : [];
+ newAsset.receiptInfo = this.currentAsset ? this.currentAsset.receiptInfo || [] : [];
+ newAsset.manualInfo = this.currentAsset ? this.currentAsset.manualInfo || [] : [];
newAsset.createdAt = new Date().toISOString();
}
@@ -894,12 +945,19 @@ export class ModalManager {
// Handle file deletions - This is now handled by filesToDelete array
} else {
- const generatedId = this.generateId();
- console.log('ModalManager: Create mode - generating new ID:', generatedId);
+ // For new sub-assets, use the temporary sub-asset data (including external document attachments)
+ const generatedId = this.currentSubAsset ? this.currentSubAsset.id : this.generateId();
+ console.log('ModalManager: Create mode - using ID:', generatedId);
newSubAsset.id = generatedId;
newSubAsset.photoPath = null;
newSubAsset.receiptPath = null;
newSubAsset.manualPath = null;
+ newSubAsset.photoPaths = this.currentSubAsset ? this.currentSubAsset.photoPaths || [] : [];
+ newSubAsset.receiptPaths = this.currentSubAsset ? this.currentSubAsset.receiptPaths || [] : [];
+ newSubAsset.manualPaths = this.currentSubAsset ? this.currentSubAsset.manualPaths || [] : [];
+ newSubAsset.photoInfo = this.currentSubAsset ? this.currentSubAsset.photoInfo || [] : [];
+ newSubAsset.receiptInfo = this.currentSubAsset ? this.currentSubAsset.receiptInfo || [] : [];
+ newSubAsset.manualInfo = this.currentSubAsset ? this.currentSubAsset.manualInfo || [] : [];
newSubAsset.createdAt = new Date().toISOString();
}
@@ -1035,4 +1093,217 @@ export class ModalManager {
this.duplicationManager.openDuplicateModal(type, itemId);
}
}
+
+ /**
+ * Attach an external document to the current asset/sub-asset
+ * @param {Object} attachment - The attachment object
+ * @param {string} attachmentType - Type of attachment ('photo', 'receipt', 'manual')
+ * @param {boolean} isSubAsset - Whether this is for a sub-asset
+ */
+ async attachExternalDocument(attachment, attachmentType, isSubAsset) {
+ // For backward compatibility, also support the old method name
+ return this.attachPaperlessDocument(attachment, attachmentType, isSubAsset);
+ }
+
+ /**
+ * Attach an external document to the current asset/sub-asset
+ * @param {Object} attachment - The attachment object from any external integration
+ * @param {string} attachmentType - Type of attachment ('photo', 'receipt', 'manual')
+ * @param {boolean} isSubAsset - Whether this is for a sub-asset
+ */
+ async attachPaperlessDocument(attachment, attachmentType, isSubAsset) {
+ try {
+ // Generate preview for the external document
+ const previewId = isSubAsset ?
+ `sub${attachmentType.charAt(0).toUpperCase() + attachmentType.slice(1)}Preview` :
+ `${attachmentType}Preview`;
+
+ const previewContainer = document.getElementById(previewId);
+ if (!previewContainer) {
+ throw new Error(`Preview container ${previewId} not found`);
+ }
+
+ // Create a preview element for the external document
+ const previewElement = this._createPaperlessPreview(attachment, attachmentType);
+ previewContainer.appendChild(previewElement);
+
+ // Store the attachment data for saving
+ const targetAsset = isSubAsset ? this.currentSubAsset : this.currentAsset;
+ if (!targetAsset) {
+ throw new Error('No asset currently being edited');
+ }
+
+ // Initialize arrays if they don't exist
+ const pathsKey = `${attachmentType}Paths`;
+ const infoKey = `${attachmentType}Info`;
+
+ if (!targetAsset[pathsKey]) targetAsset[pathsKey] = [];
+ if (!targetAsset[infoKey]) targetAsset[infoKey] = [];
+
+ // Add the external document as a "file"
+ targetAsset[pathsKey].push(attachment.downloadUrl);
+ targetAsset[infoKey].push({
+ originalName: attachment.title,
+ size: attachment.fileSize,
+ attachedAt: attachment.attachedAt,
+ integrationId: attachment.integrationId,
+ externalId: attachment.externalId,
+ mimeType: attachment.mimeType,
+ downloadUrl: attachment.downloadUrl,
+ previewUrl: attachment.previewUrl
+ });
+
+ console.log(`Attached external document to ${isSubAsset ? 'sub-asset' : 'asset'}:`, {
+ type: attachmentType,
+ title: attachment.title,
+ integrationId: attachment.integrationId,
+ externalId: attachment.externalId
+ });
+
+ } catch (error) {
+ globalThis.logError('Failed to attach Paperless document:', error.message);
+ throw error;
+ }
+ }
+
+ /**
+ * Create a preview element for an external document
+ * @param {Object} attachment - The attachment object
+ * @param {string} type - The attachment type
+ * @returns {HTMLElement} - The preview element
+ */
+ _createPaperlessPreview(attachment, type) {
+ const previewItem = document.createElement('div');
+ previewItem.className = `file-preview-item external-document ${attachment.integrationId}-document`;
+
+ // Determine if this is an image or document
+ const isImage = attachment.mimeType && attachment.mimeType.startsWith('image/');
+
+ // For images, show actual preview if possible, otherwise show document icon
+ let previewContent;
+ if (isImage) {
+ // Use preview URL for images if available, fallback to download URL, then to document icon
+ const imageUrl = attachment.previewUrl || attachment.downloadUrl;
+ previewContent = `
+ 
+ `;
+ }
+ else if (type === 'receipt') {
+ previewContent = ``;
+ }
+ else {
+ // Show document icon
+ previewContent = `
+
+
+
+
@@ -461,7 +504,17 @@
File Attachments
-
+
diff --git a/public/js/collapsible.js b/public/js/collapsible.js
index 874d440..4e77010 100644
--- a/public/js/collapsible.js
+++ b/public/js/collapsible.js
@@ -64,16 +64,25 @@ function setupCollapsible(section) {
header.addEventListener('click', header._clickHandler);
- // Set initial state based on data attribute
- const startCollapsed = section.getAttribute('data-collapsed') === 'true';
+ // Preserve current expanded state if section is already expanded
+ const isCurrentlyExpanded = !section.classList.contains('collapsed') && content.style.height !== '0px' && content.style.height !== '';
- if (startCollapsed) {
- section.classList.add('collapsed');
- content.style.height = '0px';
- } else {
+ if (isCurrentlyExpanded) {
+ // Section is already expanded, just recalculate height to ensure proper sizing
section.classList.remove('collapsed');
- // Make sure the content has rendered before calculating height
calculateCollapsibleContentHeight(content);
+ } else {
+ // Set initial state based on data attribute for new or collapsed sections
+ const startCollapsed = section.getAttribute('data-collapsed') === 'true';
+
+ if (startCollapsed) {
+ section.classList.add('collapsed');
+ content.style.height = '0px';
+ } else {
+ section.classList.remove('collapsed');
+ // Make sure the content has rendered before calculating height
+ calculateCollapsibleContentHeight(content);
+ }
}
}
diff --git a/public/login.html b/public/login.html
index 35f1e5a..e79ad3a 100644
--- a/public/login.html
+++ b/public/login.html
@@ -5,7 +5,9 @@
+
+
+
@@ -477,7 +530,17 @@
File Attachments
-
+
+
+
+
+
+
+
+
+
@@ -516,6 +579,47 @@
File Attachments
No document management integrations enabled
';
+ return;
+ }
+
+ const allBtn = document.createElement('button');
+ allBtn.className = 'integration-filter-btn active';
+ allBtn.textContent = 'All Sources';
+ allBtn.addEventListener('click', () => this.toggleIntegrationFilter('all'));
+ filtersContainer.appendChild(allBtn);
+
+ this.activeIntegrations.forEach(integration => {
+ const btn = document.createElement('button');
+ btn.className = 'integration-filter-btn';
+
+ // Get color scheme from IntegrationsManager
+ const integrationData = this.integrationsManager.getIntegration(integration.id);
+ if (integrationData && integrationData.colorScheme) {
+ btn.style.backgroundColor = integrationData.colorScheme;
+ }
+
+ btn.textContent = this.integrationsManager.getIntegrationName(integration.id);
+ btn.addEventListener('click', () => this.toggleIntegrationFilter(integration.id));
+ filtersContainer.appendChild(btn);
+ });
+ }
+
+ toggleIntegrationFilter(integrationId) {
+ // Update selected integrations
+ this.selectedIntegrations.clear();
+ this.selectedIntegrations.add(integrationId === 'all' ? 'all' : integrationId);
+
+ // Update UI - find the correct button
+ const buttons = document.querySelectorAll('.integration-filter-btn');
+ buttons.forEach(btn => {
+ btn.classList.remove('active');
+ // Check if this button corresponds to the selected integration
+ if ((integrationId === 'all' && btn.textContent === 'All Sources') ||
+ (integrationId !== 'all' && btn.textContent === this.integrationsManager.getIntegrationName(integrationId))) {
+ btn.classList.add('active');
+ }
+ });
+
+ // Reset pagination and reload data with new filter
+ this.currentPage = 1;
+ if (this.currentQuery) {
+ this.performSearch(this.currentQuery);
+ } else {
+ this.loadAllDocuments();
+ }
+ }
+
+ handleLinkExternalDocs(event, buttonId) {
+ const idMap = {
+ 'linkExternalPhotos': { type: 'photo', isSubAsset: false },
+ 'linkExternalReceipts': { type: 'receipt', isSubAsset: false },
+ 'linkExternalManuals': { type: 'manual', isSubAsset: false },
+ 'linkExternalSubPhotos': { type: 'photo', isSubAsset: true },
+ 'linkExternalSubReceipts': { type: 'receipt', isSubAsset: true },
+ 'linkExternalSubManuals': { type: 'manual', isSubAsset: true }
+ };
+
+ const config = idMap[buttonId];
+ if (!config) return;
+
+ this.currentAttachmentType = config.type;
+ this.currentIsSubAsset = config.isSubAsset;
+ this.openModal();
+ }
+
+ openModal() {
+ const modal = document.getElementById('externalDocModal');
+ if (modal) {
+ modal.style.display = 'flex';
+
+ // Reset state
+ this.currentPage = 1;
+ this.currentQuery = '';
+
+ const searchInput = document.getElementById('externalDocSearchInput');
+ if (searchInput) {
+ searchInput.value = '';
+ // Update placeholder based on attachment type
+ const attachmentTypeText = this.getAttachmentTypeDisplayText();
+ const fileTypeHint = this.getFileTypeHint();
+ searchInput.placeholder = `Search ${attachmentTypeText} or browse all... ${fileTypeHint}`;
+ }
+
+ // Update modal title to show what type of files we're looking for
+ this.updateModalTitle();
+
+ // Load integrations and immediately load all documents
+ this.loadActiveIntegrations().then(() => {
+ this.loadAllDocuments();
+ });
+
+ // Focus search input after a brief delay
+ setTimeout(() => {
+ if (searchInput) searchInput.focus();
+ }, 100);
+ }
+ }
+
+ closeModal() {
+ const modal = document.getElementById('externalDocModal');
+ if (modal) modal.style.display = 'none';
+ clearTimeout(this.searchTimeout);
+ }
+
+ async performSearch(query) {
+ if (!query || query.trim().length < 2) {
+ this.loadAllDocuments();
+ return;
+ }
+
+ if (this.isLoading) return;
+
+ // Check if we have any active integrations
+ if (!this.activeIntegrations || this.activeIntegrations.length === 0) {
+ const resultsContainer = document.getElementById('externalDocResults');
+ if (resultsContainer) {
+ resultsContainer.innerHTML = `
+
+
+ `;
+ }
+ this.hidePagination();
+ return;
+ }
+
+ this.isLoading = true;
+
+ const resultsContainer = document.getElementById('externalDocResults');
+ if (!resultsContainer) return;
+
+ this.showLoading('Searching documents...');
+
+ try {
+ const results = await this.searchAllIntegrations(query, this.currentPage);
+ this.displayResults(results, query);
+ } catch (error) {
+ resultsContainer.innerHTML = `No document management integrations are currently enabled.
+Please configure at least one document integration (like Paperless NGX or Papra) to search external documents.
+Search failed: ${error.message}
+
+ `;
+ }
+ this.hidePagination();
+ return;
+ }
+
+ this.isLoading = true;
+
+ this.showLoading('Loading documents...');
+
+ try {
+ const results = await this.searchAllIntegrations('', this.currentPage);
+ this.displayResults(results, '');
+ } catch (error) {
+ const resultsContainer = document.getElementById('externalDocResults');
+ if (resultsContainer) {
+ resultsContainer.innerHTML = `No document management integrations are currently enabled.
+Please configure at least one document integration (like Paperless NGX or Papra) to search and link external documents.
+Failed to load documents: ${error.message}
${message}
`;
+ }
+ this.hidePagination();
+ }
+
+ async searchAllIntegrations(query, page = 1) {
+ const targetIntegrations = this.getTargetIntegrations();
+
+ if (targetIntegrations.length === 0) {
+ return { results: [], count: 0, next: null, previous: null };
+ }
+
+ // If "All Sources" is selected, search across all integrations
+ if (this.selectedIntegrations.has('all')) {
+ return await this.searchMultipleIntegrations(targetIntegrations, query, page);
+ } else {
+ // Search specific integration(s)
+ const selectedIntegrations = targetIntegrations.filter(integration =>
+ this.selectedIntegrations.has(integration.id)
+ );
+
+ if (selectedIntegrations.length === 0) {
+ return { results: [], count: 0, next: null, previous: null };
+ } else if (selectedIntegrations.length === 1) {
+ return await this.searchSingleIntegration(selectedIntegrations[0], query, page);
+ } else {
+ // Multiple specific integrations selected
+ return await this.searchMultipleIntegrations(selectedIntegrations, query, page);
+ }
+ }
+ }
+
+ async searchMultipleIntegrations(integrations, query, page = 1) {
+ try {
+ // For multiple integrations, we need to handle pagination differently
+ // We'll collect results from each integration and then paginate client-side
+ const searchPromises = integrations.map(async integration => {
+ try {
+ let allResults = [];
+ let totalCount = 0;
+
+ // When filtering by attachment type, we need to fetch more pages since filtering happens client-side
+ const isFiltering = !!this.currentAttachmentType;
+ const maxPages = isFiltering ? 10 : 5; // Fetch more pages when filtering
+ const targetResults = isFiltering ? this.pageSize * 6 : this.pageSize * (page + 1); // Target more results when filtering
+
+ for (let p = 1; p <= maxPages; p++) {
+ const result = await this.searchSingleIntegration(integration, query, p);
+ if (result.results && result.results.length > 0) {
+ // If filtering, apply the filter to see how many actually match
+ let resultsToAdd = result.results;
+ if (isFiltering) {
+ resultsToAdd = result.results.filter(doc => {
+ const fileNameForExtraction = doc.originalFileName || doc.title;
+ return this.isValidFileType(doc.mimeType, this.currentAttachmentType, fileNameForExtraction);
+ });
+ }
+
+ allResults.push(...resultsToAdd);
+ }
+
+ // Update total count from the first page response
+ if (p === 1) {
+ totalCount = result.count || 0;
+ }
+
+ // Stop if no more pages available
+ if (!result.next) break;
+
+ // If not filtering, stop when we have enough raw results
+ // If filtering, stop when we have enough filtered results or enough raw results to process
+ if (!isFiltering && allResults.length >= this.pageSize * (page + 1)) break;
+ if (isFiltering && allResults.length >= targetResults) break;
+ }
+
+ return {
+ results: allResults,
+ count: totalCount,
+ integration: integration.id
+ };
+ } catch (error) {
+ console.warn(`Search failed for ${integration.id}:`, error);
+ return { results: [], count: 0, integration: integration.id };
+ }
+ });
+
+ const results = await Promise.all(searchPromises);
+
+ // Combine results from all integrations
+ const combinedResults = [];
+ let totalCount = 0;
+
+ results.forEach(result => {
+ // Results are already filtered if attachment type filtering was applied
+ combinedResults.push(...(result.results || []));
+ totalCount += result.count || 0;
+ });
+
+ // Sort combined results by modified date (newest first)
+ combinedResults.sort((a, b) => {
+ const dateA = new Date(a.modified || 0);
+ const dateB = new Date(b.modified || 0);
+ return dateB - dateA;
+ });
+
+ // Apply client-side pagination for combined results
+ const startIndex = (page - 1) * this.pageSize;
+ const endIndex = startIndex + this.pageSize;
+ const paginatedResults = combinedResults.slice(startIndex, endIndex);
+
+ // Calculate pagination info based on available results
+ const availableResults = combinedResults.length;
+ const hasNext = endIndex < availableResults;
+ const hasPrevious = page > 1;
+
+ // Store total for display - use available results for pagination
+ this.totalDocuments = availableResults;
+
+ return {
+ results: paginatedResults,
+ count: availableResults, // Available results for pagination logic
+ totalCount: totalCount, // Total from APIs for display (may be higher than available if filtering)
+ next: hasNext ? true : null,
+ previous: hasPrevious ? true : null
+ };
+ } catch (error) {
+ console.error('Failed to search multiple integrations:', error);
+ throw error;
+ }
+ }
+
+ async searchSingleIntegration(integration, query, page = 1) {
+ switch (integration.id) {
+ case 'paperless':
+ return await this.searchPaperless(query, page);
+ case 'papra':
+ return await this.searchPapra(query, page);
+ default:
+ throw new Error(`Unsupported integration: ${integration.id}`);
+ }
+ }
+
+ getTargetIntegrations() {
+ // If "all" is selected, return all active integrations
+ if (this.selectedIntegrations.has('all')) {
+ return this.activeIntegrations;
+ }
+
+ // Return only selected integrations that are active
+ return this.activeIntegrations.filter(integration =>
+ this.selectedIntegrations.has(integration.id)
+ );
+ }
+
+ async searchPaperless(query, page = 1) {
+ // When filtering by attachment type, load more results to account for filtering
+ const pageSize = this.currentAttachmentType ? Math.max(this.pageSize * 3, 50) : this.pageSize;
+
+ const params = new URLSearchParams({
+ page: page.toString(),
+ page_size: pageSize.toString()
+ });
+
+ if (query && query.trim()) {
+ params.append('q', query.trim());
+ }
+
+ const searchEndpoint = `${globalThis.getApiBaseUrl()}/${API_PAPERLESS_ENDPOINT}/search?${params.toString()}`;
+ const response = await fetch(searchEndpoint);
+ const responseValidation = await globalThis.validateResponse(response);
+ if (responseValidation.errorMessage) throw new Error(responseValidation.errorMessage);
+
+ const data = await response.json();
+
+ // Store pagination info
+ this.totalDocuments = data.count || 0;
+
+ return {
+ results: (data.results || []).map(doc => ({
+ id: doc.id,
+ title: doc.title,
+ source: 'paperless',
+ downloadUrl: `${globalThis.getApiBaseUrl()}/${API_PAPERLESS_ENDPOINT}/document/${doc.id}/download`,
+ previewUrl: `${globalThis.getApiBaseUrl()}/${API_PAPERLESS_ENDPOINT}/document/${doc.id}/preview`,
+ mimeType: doc.mime_type,
+ fileSize: doc.file_size,
+ modified: doc.modified,
+ originalFileName: doc.original_file_name, // Include original filename for extension extraction
+ attachedAt: new Date().toISOString()
+ })),
+ count: data.count || 0,
+ next: data.next,
+ previous: data.previous
+ };
+ }
+
+ async searchPapra(query, page = 1) {
+ // When filtering by attachment type, load more results to account for filtering
+ const pageSize = this.currentAttachmentType ? Math.max(this.pageSize * 3, 50) : this.pageSize;
+
+ // Convert from 1-based to 0-based pagination for Papra API
+ const pageIndex = Math.max(0, page - 1);
+
+ const params = new URLSearchParams({
+ pageIndex: pageIndex.toString(),
+ pageSize: pageSize.toString()
+ });
+
+ if (query && query.trim()) {
+ params.append('q', query.trim());
+ }
+
+ const searchEndpoint = `${globalThis.getApiBaseUrl()}/${API_PAPRA_ENDPOINT}/search?${params.toString()}`;
+ const response = await fetch(searchEndpoint);
+ const responseValidation = await globalThis.validateResponse(response);
+ if (responseValidation.errorMessage) throw new Error(responseValidation.errorMessage);
+
+ const data = await response.json();
+
+ // Store pagination info
+ this.totalDocuments = data.documentsCount || 0;
+
+ return {
+ results: (data.documents || []).map(doc => ({
+ id: doc.id,
+ title: doc.name,
+ source: 'papra',
+ downloadUrl: `${globalThis.getApiBaseUrl()}/${API_PAPRA_ENDPOINT}/document/${doc.id}/download`,
+ previewUrl: `${globalThis.getApiBaseUrl()}/${API_PAPRA_ENDPOINT}/document/${doc.id}/preview`,
+ mimeType: doc.content || 'application/octet-stream', // Papra might not have MIME type
+ fileSize: doc.size,
+ modified: doc.updatedAt || doc.createdAt,
+ originalFileName: doc.name, // Use document name as filename
+ attachedAt: new Date().toISOString()
+ })),
+ count: data.documentsCount || 0,
+ next: null, // Papra uses different pagination
+ previous: null
+ };
+ }
+
+ displayResults(data, query) {
+ const resultsContainer = document.getElementById('externalDocResults');
+ if (!resultsContainer) return;
+
+ let results = data.results || [];
+
+ // Only apply client-side filtering for single integration searches
+ // Multi-integration searches already have filtering applied
+ const isMultiIntegration = data.totalCount !== undefined;
+
+ if (!isMultiIntegration && this.currentAttachmentType && (this.fileExtensionFilters[this.currentAttachmentType] || this.mimeTypeFilters[this.currentAttachmentType])) {
+ results = results.filter(doc => {
+ // Use originalFileName if available, otherwise fall back to title
+ const fileNameForExtraction = doc.originalFileName || doc.title;
+ const isValid = this.isValidFileType(doc.mimeType, this.currentAttachmentType, fileNameForExtraction);
+ return isValid;
+ });
+ }
+
+ if (results.length === 0) {
+ const attachmentTypeText = this.currentAttachmentType ?
+ ` matching file type for ${this.currentAttachmentType}s` : '';
+ const message = query ?
+ `No documents found for "${query}"${attachmentTypeText}` :
+ `No documents available${attachmentTypeText}`;
+ resultsContainer.innerHTML = `${message}
+
+ `;
+ return html;
+ }).join('');
+
+
+ resultsContainer.innerHTML = resultsHtml;
+ const linkButtons = resultsContainer.querySelectorAll('.external-doc-link-btn');
+ linkButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ const docId = button.id.split('-')[1];
+ // Use filtered results instead of original data.results
+ // Handle both string IDs (Papra) and integer IDs (Paperless)
+ const docData = results.find(doc => {
+ // Try exact string match first
+ if (doc.id === docId) return true;
+ // Try integer comparison for backward compatibility
+ const parsedId = parseInt(docId, 10);
+ if (!isNaN(parsedId) && doc.id === parsedId) return true;
+ return false;
+ });
+ if (docData) {
+ this.linkDocument(docData);
+ } else {
+ globalThis.logError(`Document with ID ${docId} not found in filtered results`);
+ }
+ });
+ });
+
+ // Update pagination - for single integration searches with filtering,
+ // update the data to reflect filtered results
+ let paginationData = data;
+ if (!isMultiIntegration && this.currentAttachmentType && results.length !== (data.results?.length || 0)) {
+ // Single integration with client-side filtering applied
+ paginationData = {
+ ...data,
+ results: results,
+ filteredCount: results.length
+ };
+ }
+ this.updatePagination(paginationData, query);
+ }
+
+ updatePagination(data, query) {
+ const paginationContainer = document.getElementById('externalDocPagination');
+ const paginationInfo = document.getElementById('paginationInfo');
+ const prevBtn = document.getElementById('prevPageBtn');
+ const nextBtn = document.getElementById('nextPageBtn');
+
+ if (!paginationContainer || !paginationInfo || !prevBtn || !nextBtn) return;
+
+ // For multi-integration searches, use the combined total count
+ const isMultiIntegration = data.totalCount !== undefined;
+ const currentResults = data.results?.length || 0;
+
+ if (currentResults === 0) {
+ paginationContainer.style.display = 'none';
+ return;
+ }
+
+ // When filtering by attachment type, show a simpler pagination info
+ if (this.currentAttachmentType) {
+ const attachmentTypeDisplay = this.getAttachmentTypeDisplayText();
+ paginationContainer.style.display = 'flex';
+
+ if (isMultiIntegration || this.currentPage > 1 || (data.next && currentResults === this.pageSize)) {
+ // Show page-based info when pagination is relevant
+ paginationInfo.textContent = `Page ${this.currentPage} - ${currentResults} ${attachmentTypeDisplay} shown`;
+
+ // Enable/disable pagination buttons based on data availability
+ prevBtn.disabled = this.currentPage <= 1;
+ nextBtn.disabled = !data.next || currentResults < this.pageSize;
+ } else {
+ // Single page of results
+ paginationInfo.textContent = `${currentResults} ${attachmentTypeDisplay} found`;
+ prevBtn.disabled = true;
+ nextBtn.disabled = true;
+ }
+ return;
+ }
+
+ // For non-filtered results, use the original total count
+ const totalCount = isMultiIntegration ? this.totalDocuments : (data.count || 0);
+
+ // Calculate display info for non-filtered results
+ const startItem = ((this.currentPage - 1) * this.pageSize) + 1;
+ const endItem = Math.min(startItem + currentResults - 1, totalCount);
+
+ // Calculate total pages
+ const totalPages = Math.ceil(totalCount / this.pageSize);
+
+ // Show pagination if there are more results than one page OR if we're not on page 1
+ if (totalPages > 1 || this.currentPage > 1) {
+ paginationContainer.style.display = 'flex';
+ paginationInfo.textContent = `${startItem}-${endItem} of ${totalCount} documents`;
+
+ // Update button states based on integration type
+ if (isMultiIntegration) {
+ // Multi-integration search - use client-side pagination logic
+ prevBtn.disabled = this.currentPage <= 1;
+ nextBtn.disabled = data.next === null || data.next === false;
+ } else {
+ // Single integration search - use server-side pagination
+ prevBtn.disabled = !data.previous;
+ nextBtn.disabled = !data.next;
+ }
+ } else {
+ paginationContainer.style.display = 'none';
+ }
+ }
+
+ hidePagination() {
+ const paginationContainer = document.getElementById('externalDocPagination');
+ if (paginationContainer) {
+ paginationContainer.style.display = 'none';
+ }
+ }
+
+ async previousPage() {
+ if (this.currentPage > 1 && !this.isLoading) {
+ this.currentPage--;
+ if (this.currentQuery) {
+ this.performSearch(this.currentQuery);
+ } else {
+ this.loadAllDocuments();
+ }
+ }
+ }
+
+ async nextPage() {
+ if (!this.isLoading) {
+ this.currentPage++;
+ if (this.currentQuery) {
+ this.performSearch(this.currentQuery);
+ } else {
+ this.loadAllDocuments();
+ }
+ }
+ }
+
+ formatFileSize(bytes) {
+ if (!bytes) return '';
+ const sizes = ['B', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(1024));
+ return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
+ }
+
+ /**
+ * Check if a file's MIME type is valid for the current attachment type
+ * @param {string} mimeType - The MIME type of the file
+ * @param {string} attachmentType - The attachment type (photo, receipt, manual)
+ * @param {string} documentTitle - The document title/filename for extension extraction
+ * @returns {boolean} - Whether the file type is valid
+ */
+ isValidFileType(mimeType, attachmentType, documentTitle = '') {
+ // If no attachment type, allow everything
+ if (!attachmentType) return true;
+
+ // Try file extension filtering first (more reliable)
+ const fileExtension = this.extractFileExtension(documentTitle);
+ if (fileExtension) {
+ const allowedExtensions = this.fileExtensionFilters[attachmentType];
+ if (allowedExtensions) {
+ return allowedExtensions.includes(fileExtension.toLowerCase());
+ }
+ }
+
+ // Fallback to MIME type filtering if no file extension available
+ if (!mimeType) {
+ // Be strict for photos, allow for receipts/manuals if no MIME type
+ return attachmentType !== 'photo';
+ }
+
+ const allowedTypes = this.mimeTypeFilters[attachmentType];
+ if (!allowedTypes) return true; // If no filter defined, don't filter
+
+ // Normalize MIME type (lowercase, trim)
+ const normalizedMimeType = mimeType.toLowerCase().trim();
+
+ // Check exact match first
+ if (allowedTypes.includes(normalizedMimeType)) return true;
+
+ // Check for wildcard matches (e.g., image/* for any image type)
+ const baseType = normalizedMimeType.split('/')[0];
+ if (allowedTypes.some(type => type.startsWith(baseType + '/'))) {
+ return true;
+ }
+
+ return false;
+ }
+
+ /**
+ * Extract file extension from document title
+ * @param {string} title - Document title
+ * @returns {string|null} - File extension with dot (e.g., '.pdf') or null
+ */
+ extractFileExtension(title) {
+ if (!title) return null;
+
+ // Look for file extension pattern at the end of the title
+ const match = title.match(/\.([a-zA-Z0-9]+)(?:\s|$)/);
+ if (match) {
+ return '.' + match[1].toLowerCase();
+ }
+
+ // Try to extract from the very end if no spaces
+ const lastDotIndex = title.lastIndexOf('.');
+ if (lastDotIndex > -1 && lastDotIndex < title.length - 1) {
+ const extension = title.substring(lastDotIndex).toLowerCase();
+ // Only return if it looks like a valid extension (2-5 characters)
+ if (/^\.[a-z]{2,5}$/.test(extension)) {
+ return extension;
+ }
+ }
+
+ return null;
+ }
+
+ /**
+ * Get display text for the current attachment type
+ * @returns {string} - Display text for the attachment type
+ */
+ getAttachmentTypeDisplayText() {
+ const typeMap = {
+ photo: 'images',
+ receipt: 'receipts',
+ manual: 'manuals'
+ };
+ return typeMap[this.currentAttachmentType] || 'documents';
+ }
+
+ /**
+ * Update the modal title to show the attachment type and file type filter
+ */
+ updateModalTitle() {
+ const modalTitle = document.querySelector('#externalDocModal .modal-title');
+ if (!modalTitle) return;
+
+ const attachmentTypeText = this.getAttachmentTypeDisplayText();
+
+ modalTitle.innerHTML = `Link External ${attachmentTypeText.charAt(0).toUpperCase() + attachmentTypeText.slice(1)}`;
+ }
+
+ /**
+ * Get file type hint text for the current attachment type
+ * @returns {string} - File type hint text
+ */
+ getFileTypeHint() {
+ const hintMap = {
+ photo: '(Images: JPG, PNG, GIF, WebP, etc.)',
+ receipt: '(Images & Documents: JPG, PNG, PDF, DOC, etc.)',
+ manual: '(Documents: PDF, DOC, XLS, PPT, etc.)'
+ };
+ return hintMap[this.currentAttachmentType] || '';
+ }
+
+ async linkDocument(docData) {
+ // Find the button that was clicked
+ const clickedButton = event?.target?.closest('.external-doc-link-btn');
+
+ try {
+ if (clickedButton) this.setButtonLoading(clickedButton, true);
+
+ const attachment = {
+ externalId: docData.id,
+ integrationId: docData.source, // Use the source (paperless, papra, etc.)
+ title: docData.title,
+ downloadUrl: docData.downloadUrl,
+ previewUrl: docData.previewUrl,
+ mimeType: docData.mimeType,
+ fileSize: docData.fileSize,
+ attachedAt: docData.attachedAt
+ };
+
+ await this.modalManager.attachPaperlessDocument(attachment, this.currentAttachmentType, this.currentIsSubAsset);
+
+ // Show success feedback
+ // globalThis.toaster.show(`Linked "${docData.title}"`, 'success', false, 2000);
+
+ // Update button to show it's been linked
+ if (clickedButton) {
+ clickedButton.innerHTML = `
+
+ Linked
+ `;
+ clickedButton.disabled = true;
+ clickedButton.style.background = 'var(--success-color, #10b981)';
+ clickedButton.style.opacity = '0.8';
+ clickedButton.style.cursor = 'default';
+ }
+
+ } catch (error) {
+ if (clickedButton) this.setButtonLoading(clickedButton, false);
+ globalThis.logError('Failed to link document:', error.message);
+ }
+ }
+
+ getSourceDisplayName(sourceId) {
+ const sourceNames = {
+ 'paperless': 'Paperless NGX',
+ 'papra': 'Papra'
+ };
+ return sourceNames[sourceId] || sourceId.charAt(0).toUpperCase() + sourceId.slice(1);
+ }
+
+ escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+ }
+}
\ No newline at end of file
diff --git a/public/managers/integrations.js b/public/managers/integrations.js
new file mode 100644
index 0000000..401b728
--- /dev/null
+++ b/public/managers/integrations.js
@@ -0,0 +1,689 @@
+// IntegrationsManager handles all integration-related functionality including loading,
+// rendering, configuration, and testing of integrations in the settings modal
+import { API_TEST_SUCCESS, TOKENMASK } from '../src/constants.js';
+import { calculateCollapsibleContentHeight, initCollapsibleSections } from '../js/collapsible.js';
+
+export class IntegrationsManager {
+ constructor({
+ setButtonLoading
+ }) {
+ this.setButtonLoading = setButtonLoading;
+ this.DEBUG = false;
+ this.integrations = new Map();
+ this.loadingPromise = null;
+ }
+
+ /**
+ * Initialize integrations - load and render them dynamically
+ */
+ async initialize() {
+ await this.loadIntegrations();
+ }
+
+ /**
+ * Load and render integrations dynamically
+ */
+ async loadIntegrations() {
+ // Store the loading promise to avoid duplicate requests
+ if (this.loadingPromise) {
+ return this.loadingPromise;
+ }
+
+ this.loadingPromise = this._loadIntegrationsData();
+ return this.loadingPromise;
+ }
+
+ async _loadIntegrationsData() {
+ const integrationsContainer = document.getElementById('integrationsContainer');
+ const loadingElement = document.getElementById('integrationsLoading');
+ const errorElement = document.getElementById('integrationsError');
+
+ if (!integrationsContainer) {
+ console.error('Integrations container not found');
+ return;
+ }
+
+ try {
+ if (loadingElement) loadingElement.style.display = 'block';
+ if (errorElement) errorElement.style.display = 'none';
+
+ const response = await fetch(`${globalThis.getApiBaseUrl()}/api/integrations?t=${new Date().getTime()}`);
+ const responseValidation = await globalThis.validateResponse(response);
+ if (responseValidation.errorMessage) {
+ throw new Error(responseValidation.errorMessage);
+ }
+
+ const integrations = await response.json();
+
+ // Store integrations in a Map for badge generation
+ this.integrations.clear();
+ integrations.forEach(integration => {
+ this.integrations.set(integration.id, integration);
+ });
+
+ console.log('Loaded integrations:', Array.from(this.integrations.keys()));
+
+ // Now that data is loaded, proceed with UI rendering
+ // Clear loading state
+ if (loadingElement) loadingElement.style.display = 'none';
+
+ // Only render UI if we're in settings context
+ if (integrationsContainer) {
+ this._renderIntegrationsUI(integrations, integrationsContainer);
+ }
+
+ } catch (error) {
+ console.error('Failed to load integrations:', error);
+ if (loadingElement) loadingElement.style.display = 'none';
+ if (errorElement) {
+ errorElement.style.display = 'block';
+ errorElement.textContent = `Failed to load integrations: ${error.message}`;
+ }
+ } finally {
+ this.loadingPromise = null; // Reset promise to allow re-fetching if needed
+ }
+ }
+
+ _renderIntegrationsUI(integrations, integrationsContainer) {
+ // Clear existing content except loading/error elements
+ const existingIntegrations = integrationsContainer.querySelectorAll('.integration-section');
+ existingIntegrations.forEach(el => el.remove());
+
+ if (integrations.length === 0) {
+ const noIntegrationsMsg = document.createElement('div');
+ noIntegrationsMsg.style.cssText = 'text-align: center; padding: 2rem; color: var(--text-color-secondary);';
+ noIntegrationsMsg.textContent = 'No integrations available';
+ integrationsContainer.appendChild(noIntegrationsMsg);
+ return;
+ }
+
+ // Group integrations by category
+ const categories = this.groupIntegrationsByCategory(integrations);
+
+ // Render each category
+ for (const [category, categoryIntegrations] of Object.entries(categories)) {
+ const categorySection = this.renderIntegrationCategory(category, categoryIntegrations);
+ integrationsContainer.appendChild(categorySection);
+ }
+
+ // Initialize collapsible sections for the rendered integrations
+ initCollapsibleSections();
+
+ // Bind events for all rendered integrations
+ this.bindIntegrationEvents();
+ }
+
+ /**
+ * Get integration by ID
+ * @param {string} integrationId - The integration identifier
+ * @returns {Object|null} - The integration object or null if not found
+ */
+ getIntegration(integrationId) {
+ return this.integrations.get(integrationId) || null;
+ }
+
+ /**
+ * Generate integration badge HTML based on integration ID
+ * @param {string} integrationId - The integration identifier
+ * @returns {string} - The badge HTML
+ */
+ getIntegrationBadge(integrationId) {
+ if (!integrationId) return '';
+
+ const integration = this.getIntegration(integrationId);
+
+ if (integration && integration.logoHref) {
+ // Use dynamic integration data
+ const badgeClass = `integration-badge ${integrationId}-badge`;
+ const logoSrc = integration.logoHref.startsWith('/') ? integration.logoHref : `/${integration.logoHref}`;
+ const title = `From ${integration.name || integrationId}`;
+ const alt = integration.name || integrationId;
+
+ return `
+
+
+
+ ${this.escapeHtml(doc.title)}
+ ${sourceDisplayName}
+
+ ${meta ? `` : ''}
+ ${integrationId}
`;
+ }
+ }
+
+ /**
+ * Get integration color scheme
+ * @param {string} integrationId - The integration identifier
+ * @returns {string|null} - The color scheme or null if not found
+ */
+ getIntegrationColorScheme(integrationId) {
+ const integration = this.getIntegration(integrationId);
+ return integration?.colorScheme || null;
+ }
+
+ /**
+ * Get integration name
+ * @param {string} integrationId - The integration identifier
+ * @returns {string} - The integration name or the ID as fallback
+ */
+ getIntegrationName(integrationId) {
+ const integration = this.getIntegration(integrationId);
+ return integration?.name || integrationId;
+ }
+
+ /**
+ * Check if integrations are loaded
+ * @returns {boolean}
+ */
+ isLoaded() {
+ return this.integrations.size > 0;
+ }
+
+ /**
+ * Get all integrations as an array
+ * @returns {Array} - Array of all integrations
+ */
+ getAllIntegrations() {
+ return Array.from(this.integrations.values());
+ }
+
+ /**
+ * Get enabled integrations by fetching settings and filtering
+ * @returns {Promise
+
+
+ `;
+ }
+
+ // Get integration badge based on integrationId
+ const integrationBadge = this._getIntegrationBadge(attachment.integrationId);
+
+ previewItem.innerHTML = `
+
+ ${previewContent}
+ ${integrationBadge}
+
+
+
+ ${this._escapeHtml(attachment.title)}
+ ${attachment.fileSize ? `${this.formatFileSize(attachment.fileSize)}` : ''}
+
+ `;
+
+ // Add click handler for preview/download
+ const filePreview = previewItem.querySelector('.file-preview');
+ if (filePreview) {
+ filePreview.addEventListener('click', () => {
+ window.open(attachment.downloadUrl, '_blank');
+ });
+ filePreview.style.cursor = 'pointer';
+ }
+
+ // Add delete button handler
+ const deleteBtn = previewItem.querySelector('.delete-preview-btn');
+ if (deleteBtn) {
+ deleteBtn.addEventListener('click', () => {
+ this._removePaperlessAttachment(previewItem, attachment, type);
+ });
+ }
+
+ return previewItem;
+ }
+
+ /**
+ * Remove an external document attachment
+ * @param {HTMLElement} previewElement - The preview element to remove
+ * @param {Object} attachment - The attachment object
+ * @param {string} type - The attachment type
+ */
+ _removePaperlessAttachment(previewElement, attachment, type) {
+ const targetAsset = this.currentSubAsset || this.currentAsset;
+ if (!targetAsset) return;
+
+ const pathsKey = `${type}Paths`;
+ const infoKey = `${type}Info`;
+
+ if (targetAsset[pathsKey] && targetAsset[infoKey]) {
+ // Find and remove the attachment
+ const index = targetAsset[pathsKey].indexOf(attachment.downloadUrl);
+ if (index > -1) {
+ targetAsset[pathsKey].splice(index, 1);
+ targetAsset[infoKey].splice(index, 1);
+ }
+ }
+
+ // Remove the preview element
+ previewElement.remove();
+
+ globalThis.toaster.show(`Removed "${attachment.title}" from attachments`, 'success');
+ }
+
+ /**
+ * Get the appropriate integration badge HTML based on integration ID
+ * @param {string} integrationId - The integration identifier
+ * @returns {string} - The badge HTML
+ */
+ _getIntegrationBadge(integrationId) {
+ return this.integrationsManager?.getIntegrationBadge(integrationId) || `${integrationId}
`;
+ }
+
+ /**
+ * Escape HTML to prevent XSS
+ * @param {string} text - Text to escape
+ * @returns {string} - Escaped text
+ */
+ _escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+ }
}
\ No newline at end of file
diff --git a/public/managers/settings.js b/public/managers/settings.js
index c2856f2..0dbae0b 100644
--- a/public/managers/settings.js
+++ b/public/managers/settings.js
@@ -1,4 +1,7 @@
// SettingsManager handles all settings modal logic, loading, saving, and dashboard order drag/drop
+import { TOKENMASK } from '../src/constants.js';
+import { IntegrationsManager } from './integrations.js';
+
export class SettingsManager {
constructor({
settingsBtn,
@@ -9,7 +12,9 @@ export class SettingsManager {
settingsClose,
testNotificationSettings,
setButtonLoading,
- renderDashboard
+ renderDashboard,
+ loadActiveIntegrations,
+ integrationsManager
}) {
this.localSettingsStorageKey = 'dumbAssetSettings';
this.localSettingsLastOpenedPaneKey = 'dumbAssetSettingsLastOpenedPane';
@@ -22,8 +27,11 @@ export class SettingsManager {
this.testNotificationSettings = testNotificationSettings;
this.setButtonLoading = setButtonLoading;
this.renderDashboard = renderDashboard;
+ this.loadActiveIntegrations = loadActiveIntegrations;
+ this.integrationsManager = integrationsManager;
this.selectedAssetId = null;
this.DEBUG = false;
+
this._bindEvents();
this.defaultSettings = window.appConfig?.defaultSettings || {
notificationSettings: {
@@ -207,6 +215,13 @@ export class SettingsManager {
document.getElementById('toggleWarranties').checked = finalVisibility.warranties;
document.getElementById('toggleAnalytics').checked = finalVisibility.analytics;
document.getElementById('toggleEvents').checked = finalVisibility.events;
+
+ // Load integrations dynamically
+ await this.integrationsManager.loadIntegrations();
+
+ // Apply current integration settings to the dynamically loaded form
+ this.integrationsManager.applyIntegrationSettingsToForm(settings.integrationSettings || {});
+
// Card visibility toggles
if (typeof window.renderCardVisibilityToggles === 'function') {
window.renderCardVisibilityToggles(settings);
@@ -259,7 +274,8 @@ export class SettingsManager {
expired: document.getElementById('toggleCardWarrantiesExpired')?.checked !== false,
active: document.getElementById('toggleCardWarrantiesActive')?.checked !== false
}
- }
+ },
+ integrationSettings: this.integrationsManager.collectAllIntegrationSettings()
};
const dashboardSections = document.querySelectorAll('#dashboardSections .sortable-item');
dashboardSections.forEach(section => {
@@ -278,11 +294,16 @@ export class SettingsManager {
const settingsCopy = { ...settings };
localStorage.setItem(this.localSettingsStorageKey, JSON.stringify(settingsCopy));
- this.closeSettingsModal();
- globalThis.toaster.show('Settings saved');
+
+ // Reload settings to ensure everything is up-to-date
+ await this.loadSettings();
+ // this.closeSettingsModal(); // Don't close modal automatically, let user decide
+
if (!this.selectedAssetId && typeof this.renderDashboard === 'function') {
this.renderDashboard();
}
+
+ globalThis.toaster.show('Settings saved');
} catch (error) {
globalThis.logError('Failed to save settings:', error.message);
} finally {
diff --git a/public/script.js b/public/script.js
index 7f5d8e0..2186806 100644
--- a/public/script.js
+++ b/public/script.js
@@ -13,6 +13,7 @@ new GlobalHandlers();
// Import file upload module
import { initializeFileUploads, handleFileUploads } from '/src/services/fileUpload/index.js';
import { formatFileSize } from '/src/services/fileUpload/utils.js';
+
// Import asset renderer module
import {
initRenderer,
@@ -29,7 +30,8 @@ import {
sortAssets,
// Import file preview renderer
setupFilePreview,
- setupExistingFilePreview
+ setupExistingFilePreview,
+ initPreviewRenderer
} from '/src/services/render/index.js';
import { ChartManager } from '/managers/charts.js';
import { registerServiceWorker } from './helpers/serviceWorkerHelper.js';
@@ -45,6 +47,8 @@ import { MaintenanceManager } from './managers/maintenanceManager.js';
import { ModalManager } from './managers/modalManager.js';
import { DashboardManager } from './managers/dashboardManager.js';
import { DuplicationManager } from './managers/duplicationManager.js';
+import { ExternalDocManager } from './managers/externalDocManager.js';
+import { IntegrationsManager } from './managers/integrations.js';
document.addEventListener('DOMContentLoaded', () => {
// Initialize variables for app state
@@ -116,16 +120,34 @@ document.addEventListener('DOMContentLoaded', () => {
let modalManager;
let dashboardManager;
let duplicationManager;
+ let externalDocManager;
+ let integrationsManager;
const chartManager = new ChartManager({ formatDate });
// Acts as constructor for the app
// will be called at the very end of the file
- function initialize() {
+ async function initialize() {
// Display demo banner if in demo mode
if (window.appConfig?.demoMode) {
document.getElementById('demo-banner').style.display = 'block';
}
+ // Initialize integrations manager and load integration data early for dynamic badge generation
+ integrationsManager = new IntegrationsManager({
+ setButtonLoading
+ });
+
+ try {
+ await integrationsManager.loadIntegrations();
+
+ // Initialize preview renderer with integrations manager
+ initPreviewRenderer({
+ integrationsManager
+ });
+ } catch (error) {
+ console.warn('Failed to load integrations for badge generation:', error);
+ }
+
addWindowEventListenersAndProperties();
// initialize page title right away
setupPageTitle();
@@ -207,7 +229,10 @@ document.addEventListener('DOMContentLoaded', () => {
// DOM elements
assetList,
assetDetails,
- subAssetContainer
+ subAssetContainer,
+
+ // Managers
+ integrationsManager
});
// Initialize the list renderer module
@@ -293,7 +318,17 @@ document.addEventListener('DOMContentLoaded', () => {
// Global state
getAssets: () => assets,
- getSubAssets: () => subAssets
+ getSubAssets: () => subAssets,
+
+ // Integrations
+ integrationsManager
+ });
+
+ // Initialize ExternalDocManager
+ externalDocManager = new ExternalDocManager({
+ modalManager,
+ setButtonLoading,
+ integrationsManager
});
// Initialize SettingsManager after DashboardManager is ready
@@ -308,6 +343,8 @@ document.addEventListener('DOMContentLoaded', () => {
testNotificationSettings,
setButtonLoading,
renderDashboard: (animate = true) => dashboardManager.renderDashboard(animate),
+ loadActiveIntegrations: () => externalDocManager.loadActiveIntegrations(),
+ integrationsManager
});
}
diff --git a/server.js b/server.js
index 437117c..798c919 100644
--- a/server.js
+++ b/server.js
@@ -24,6 +24,8 @@ const { originValidationMiddleware, getCorsOptions } = require('./middleware/cor
const { demoModeMiddleware } = require('./middleware/demo');
const { sanitizeFileName } = require('./src/services/fileUpload/utils');
const packageJson = require('./package.json');
+const { TOKENMASK } = require('./src/constants');
+const { integrationManager } = require('./integrations/integrationManager');
const app = express();
const PORT = process.env.PORT || 3000;
@@ -61,6 +63,13 @@ const DEFAULT_SETTINGS = {
active: true
}
},
+ integrationSettings: {
+ paperless: {
+ enabled: false,
+ hostUrl: '',
+ apiToken: ''
+ }
+ }
};
// Currency configuration from environment variables
@@ -192,7 +201,7 @@ app.use(BASE_PATH, (req, res, next) => {
'/verify-pin',
'/config.js',
'/assets/',
- '/styles.css',
+ '/assets/css/',
'/manifest.json',
'/asset-manifest.json',
];
@@ -435,8 +444,10 @@ app.use(BASE_PATH + '/styles.css', express.static('public/styles.css'));
app.use(BASE_PATH + '/script.js', express.static('public/script.js'));
// Module files (need to be accessible for imports)
-app.use(BASE_PATH + '/src/services/fileUpload', express.static('src/services/fileUpload'));
-app.use(BASE_PATH + '/src/services/render', express.static('src/services/render'));
+app.use(BASE_PATH + '/src', express.static('src'));
+// app.use(BASE_PATH + '/src/services', express.static('src/services'));
+// app.use(BASE_PATH + '/src/services/fileUpload', express.static('src/services/fileUpload'));
+// app.use(BASE_PATH + '/src/services/render', express.static('src/services/render'));
// Serve Chart.js from node_modules
app.use(BASE_PATH + '/js/chart.js', express.static('node_modules/chart.js/dist/chart.umd.js'));
@@ -446,6 +457,9 @@ app.use(BASE_PATH + '/Images', express.static('data/Images'));
app.use(BASE_PATH + '/Receipts', express.static('data/Receipts'));
app.use(BASE_PATH + '/Manuals', express.static('data/Manuals'));
+// INTEGRATIONS
+app.use(BASE_PATH + '/src/integrations', express.static('src/integrations'));
+
// Protected API routes
app.use('/api', (req, res, next) => {
console.log(`API Request: ${req.method} ${req.path}`);
@@ -920,55 +934,112 @@ async function handleFileDuplication(source, duplicate, selectedProperties) {
duplicate.photoPath = null;
duplicate.receiptPath = null;
duplicate.manualPath = null;
-
- // Handle photos
+
+ // Helper to check if a file is external (integrationId or /external/ path)
+ function isExternalFile(filePath, fileInfo) {
+ if (!filePath && !fileInfo) return false;
+ if (fileInfo && fileInfo.integrationId) return true;
+ if (filePath && typeof filePath === 'string' && filePath.includes('/external/')) return true;
+ return false;
+ }
+
+ // --- PHOTOS ---
if (selectedProperties.photoPath) {
+ // Array version
if (source.photoPaths && Array.isArray(source.photoPaths)) {
- for (const photoPath of source.photoPaths) {
- const newPhotoPath = await copyFile(photoPath, 'Images');
- if (newPhotoPath) duplicate.photoPaths.push(newPhotoPath);
+ for (let i = 0; i < source.photoPaths.length; i++) {
+ const pathVal = source.photoPaths[i];
+ const infoVal = (source.photoInfo && source.photoInfo[i]) ? source.photoInfo[i] : null;
+ if (isExternalFile(pathVal, infoVal)) {
+ // External: copy as-is
+ duplicate.photoPaths.push(pathVal);
+ duplicate.photoInfo.push(infoVal);
+ } else {
+ // Local: duplicate file
+ const newPath = await copyFile(pathVal, 'Images');
+ if (newPath) {
+ duplicate.photoPaths.push('/' + newPath.replace(/^[\/]+/, ''));
+ duplicate.photoInfo.push({ ...infoVal, fileName: newPath.split('/').pop() });
+ }
+ }
}
}
- if (source.photoInfo && Array.isArray(source.photoInfo)) {
- duplicate.photoInfo = [...source.photoInfo];
- }
+ // Single path version (legacy)
if (source.photoPath && !source.photoPaths) {
- const newPhotoPath = await copyFile(source.photoPath, 'Images');
- if (newPhotoPath) duplicate.photoPath = newPhotoPath;
+ if (isExternalFile(source.photoPath, source.photoInfo && source.photoInfo[0])) {
+ duplicate.photoPath = source.photoPath;
+ duplicate.photoInfo = source.photoInfo ? [source.photoInfo[0]] : [];
+ } else {
+ const newPath = await copyFile(source.photoPath, 'Images');
+ if (newPath) {
+ duplicate.photoPath = '/' + newPath.replace(/^[\/]+/, '');
+ duplicate.photoInfo = [{ ...(source.photoInfo && source.photoInfo[0]), fileName: newPath.split('/').pop() }];
+ }
+ }
}
}
-
- // Handle receipts
+
+ // --- RECEIPTS ---
if (selectedProperties.receiptPath) {
if (source.receiptPaths && Array.isArray(source.receiptPaths)) {
- for (const receiptPath of source.receiptPaths) {
- const newReceiptPath = await copyFile(receiptPath, 'Receipts');
- if (newReceiptPath) duplicate.receiptPaths.push(newReceiptPath);
+ for (let i = 0; i < source.receiptPaths.length; i++) {
+ const pathVal = source.receiptPaths[i];
+ const infoVal = (source.receiptInfo && source.receiptInfo[i]) ? source.receiptInfo[i] : null;
+ if (isExternalFile(pathVal, infoVal)) {
+ duplicate.receiptPaths.push(pathVal);
+ duplicate.receiptInfo.push(infoVal);
+ } else {
+ const newPath = await copyFile(pathVal, 'Receipts');
+ if (newPath) {
+ duplicate.receiptPaths.push('/' + newPath.replace(/^[\/]+/, ''));
+ duplicate.receiptInfo.push({ ...infoVal, fileName: newPath.split('/').pop() });
+ }
+ }
}
}
- if (source.receiptInfo && Array.isArray(source.receiptInfo)) {
- duplicate.receiptInfo = [...source.receiptInfo];
- }
if (source.receiptPath && !source.receiptPaths) {
- const newReceiptPath = await copyFile(source.receiptPath, 'Receipts');
- if (newReceiptPath) duplicate.receiptPath = newReceiptPath;
+ if (isExternalFile(source.receiptPath, source.receiptInfo && source.receiptInfo[0])) {
+ duplicate.receiptPath = source.receiptPath;
+ duplicate.receiptInfo = source.receiptInfo ? [source.receiptInfo[0]] : [];
+ } else {
+ const newPath = await copyFile(source.receiptPath, 'Receipts');
+ if (newPath) {
+ duplicate.receiptPath = '/' + newPath.replace(/^[\/]+/, '');
+ duplicate.receiptInfo = [{ ...(source.receiptInfo && source.receiptInfo[0]), fileName: newPath.split('/').pop() }];
+ }
+ }
}
}
-
- // Handle manuals
+
+ // --- MANUALS ---
if (selectedProperties.manualPath) {
if (source.manualPaths && Array.isArray(source.manualPaths)) {
- for (const manualPath of source.manualPaths) {
- const newManualPath = await copyFile(manualPath, 'Manuals');
- if (newManualPath) duplicate.manualPaths.push(newManualPath);
+ for (let i = 0; i < source.manualPaths.length; i++) {
+ const pathVal = source.manualPaths[i];
+ const infoVal = (source.manualInfo && source.manualInfo[i]) ? source.manualInfo[i] : null;
+ if (isExternalFile(pathVal, infoVal)) {
+ duplicate.manualPaths.push(pathVal);
+ duplicate.manualInfo.push(infoVal);
+ } else {
+ const newPath = await copyFile(pathVal, 'Manuals');
+ if (newPath) {
+ duplicate.manualPaths.push('/' + newPath.replace(/^[\/]+/, ''));
+ duplicate.manualInfo.push({ ...infoVal, fileName: newPath.split('/').pop() });
+ }
+ }
}
}
- if (source.manualInfo && Array.isArray(source.manualInfo)) {
- duplicate.manualInfo = [...source.manualInfo];
- }
if (source.manualPath && !source.manualPaths) {
- const newManualPath = await copyFile(source.manualPath, 'Manuals');
- if (newManualPath) duplicate.manualPath = newManualPath;
+ if (isExternalFile(source.manualPath, source.manualInfo && source.manualInfo[0])) {
+ duplicate.manualPath = source.manualPath;
+ duplicate.manualInfo = source.manualInfo ? [source.manualInfo[0]] : [];
+ } else {
+ const newPath = await copyFile(source.manualPath, 'Manuals');
+ if (newPath) {
+ duplicate.manualPath = '/' + newPath.replace(/^[\/]+/, '');
+ duplicate.manualInfo = [{ ...(source.manualInfo && source.manualInfo[0]), fileName: newPath.split('/').pop() }];
+ }
+ }
}
}
}
@@ -1997,6 +2068,27 @@ function getAppSettings() {
return config;
}
+// Use before sending settings to frontend
+function stripIntegrationTokens(appSettings) {
+ const sanitizedSettings = { ...appSettings };
+
+ // Use integration manager to sanitize all integration settings
+ if (sanitizedSettings.integrationSettings) {
+ Object.keys(sanitizedSettings.integrationSettings).forEach(integrationId => {
+ const integrationConfig = sanitizedSettings.integrationSettings[integrationId];
+ sanitizedSettings.integrationSettings[integrationId] =
+ integrationManager.sanitizeConfigForFrontend(integrationId, integrationConfig);
+ });
+ }
+
+ return sanitizedSettings;
+}
+
+// Use integration manager for validation and sensitive data handling
+function applyIntegrationSettings(serverConfig, updatedConfig) {
+ return integrationManager.applyIntegrationSettings(serverConfig, updatedConfig);
+}
+
// Import assets route
app.post('/api/import-assets', upload.single('file'), (req, res) => {
try {
@@ -2077,22 +2169,102 @@ app.post('/api/import-assets', upload.single('file'), (req, res) => {
}
});
-// Get all settings
+// Get all settings (sanitized for frontend)
app.get('/api/settings', (req, res) => {
try {
const appSettings = getAppSettings();
+
+ // Sanitize integration settings for frontend using integration manager
+ if (appSettings.integrationSettings) {
+ for (const [integrationId, config] of Object.entries(appSettings.integrationSettings)) {
+ appSettings.integrationSettings[integrationId] = integrationManager.sanitizeConfigForFrontend(integrationId, config);
+ }
+ }
+
res.json(appSettings);
} catch (err) {
res.status(500).json({ error: 'Failed to load settings' });
}
});
+// Get available integrations for settings UI
+app.get('/api/integrations', (req, res) => {
+ const integrations = integrationManager.getAllIntegrations();
+
+ // Debug: Log Home Assistant schema
+ const haIntegration = integrations.find(i => i.id === 'homeassistant');
+ if (haIntegration) {
+ console.log('Loaded Home Assistant Schema:', JSON.stringify(haIntegration, null, 2));
+ } else {
+ console.log('Home Assistant integration not found in loaded schemas');
+ }
+
+ res.json(integrations);
+});
+
+// Get enabled integrations for external document search
+app.get('/api/integrations/enabled', (req, res) => {
+ try {
+ const settings = getAppSettings();
+ const enabledIntegrations = integrationManager.getAllIntegrations()
+ .filter(integration => {
+ const integrationSettings = settings.integrationSettings?.[integration.id];
+ return integrationSettings?.enabled === true;
+ })
+ .map(integration => ({
+ id: integration.id,
+ name: integration.name,
+ description: integration.description,
+ icon: integration.icon,
+ logoHref: integration.logoHref,
+ colorScheme: integration.colorScheme,
+ category: integration.category
+ }));
+
+ res.json(enabledIntegrations);
+ } catch (error) {
+ console.error('Failed to get enabled integrations:', error);
+ res.status(500).json({ error: 'Failed to get enabled integrations' });
+ }
+});
+
+// Test integration connection
+app.post('/api/integrations/:id/test', async (req, res) => {
+ try {
+ const integrationId = req.params.id;
+ const testConfig = req.body;
+
+ // Prepare config by handling masked tokens
+ const preparedConfig = await integrationManager.prepareConfigForTesting(
+ integrationId,
+ testConfig,
+ getAppSettings
+ );
+
+ const result = await integrationManager.checkIntegrationStatus(integrationId, preparedConfig);
+ res.status(200).json(result);
+ } catch (error) {
+ console.error(`Failed to test integration ${req.params.id}:`, error);
+ res.status(400).json({
+ status: 'error',
+ message: error.message
+ });
+ }
+});
+
// Save all settings
app.post('/api/settings', (req, res) => {
try {
const config = getAppSettings();
// Update settings with the new values
- const updatedConfig = { ...config, ...req.body };
+ let updatedConfig = { ...config, ...req.body };
+
+ try {
+ updatedConfig = applyIntegrationSettings(config, updatedConfig);
+ }
+ catch (error) {
+ return res.status(400).json({ error: error.message });
+ }
const configPath = path.join(DATA_DIR, 'config.json');
fs.writeFileSync(configPath, JSON.stringify(updatedConfig, null, 2));
@@ -2252,6 +2424,10 @@ setInterval(() => {
// Warranty expiration notification cron
startWarrantyCron();
+// --- INTEGRATION SYSTEM ---
+// Initialize and register integration routes
+integrationManager.registerRoutes(app, getAppSettings);
+
// --- START SERVER ---
app.listen(PORT, () => {
debugLog('Server Configuration:', {
diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 0000000..fc9f94c
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,38 @@
+// Token masking for security
+export const TOKENMASK = '*********************';
+
+// Integration constants
+export const INTEGRATION_CATEGORIES = {
+ DOCUMENT_MANAGEMENT: 'document-management',
+ COMMUNICATION: 'communication',
+ MONITORING: 'monitoring',
+ BACKUP: 'backup',
+ GENERAL: 'general'
+};
+
+export const INTEGRATION_STATUS = {
+ CONNECTED: 'connected',
+ DISCONNECTED: 'disconnected',
+ ERROR: 'error',
+ DISABLED: 'disabled',
+ MISCONFIGURED: 'misconfigured',
+ UNKNOWN: 'unknown'
+};
+
+export const FIELD_TYPES = {
+ TEXT: 'text',
+ PASSWORD: 'password',
+ URL: 'url',
+ EMAIL: 'email',
+ NUMBER: 'number',
+ BOOLEAN: 'boolean',
+ SELECT: 'select',
+ TEXTAREA: 'textarea'
+};
+
+export const API_TEST_SUCCESS = 'connected';
+// API ENDPOINTS
+export const API_INTEGRATIONS_ENPOINT = 'api/integrations';
+export const API_PAPERLESS_ENDPOINT = API_INTEGRATIONS_ENPOINT + '/paperless';
+export const API_PAPRA_ENDPOINT = API_INTEGRATIONS_ENPOINT + '/papra';
+export const API_HOMEASSISTANT_ENDPOINT = API_INTEGRATIONS_ENPOINT + '/homeassistant';
\ No newline at end of file
diff --git a/src/services/render/assetRenderer.js b/src/services/render/assetRenderer.js
index 8434a63..4da858e 100644
--- a/src/services/render/assetRenderer.js
+++ b/src/services/render/assetRenderer.js
@@ -33,6 +33,18 @@ let assetList;
let assetDetails;
let subAssetContainer;
+// IntegrationsManager reference - will be injected
+let integrationsManager;
+
+/**
+ * Get the appropriate integration badge HTML based on integration ID
+ * @param {string} integrationId - The integration identifier
+ * @returns {string} - The badge HTML
+ */
+function getIntegrationBadge(integrationId) {
+ return integrationsManager?.getIntegrationBadge(integrationId) || `${integrationId}
`;
+}
+
/**
* Initialize the renderer with required dependencies
*
@@ -65,6 +77,9 @@ function initRenderer(config) {
assetList = config.assetList;
assetDetails = config.assetDetails;
subAssetContainer = config.subAssetContainer;
+
+ // Store reference to integrations manager
+ integrationsManager = config.integrationsManager;
}
/**
@@ -227,10 +242,10 @@ function generateAssetInfoHTML(asset) {
/**
* Format filename for display with truncation if needed
* @param {string} fileName - The original filename
- * @param {number} maxLength - Maximum length (default 15)
+ * @param {number} maxLength - Maximum length (default 30)
* @returns {string} Formatted filename
*/
-function formatDisplayFileName(fileName, maxLength = 15) {
+function formatDisplayFileName(fileName, maxLength = 30) {
if (!fileName || fileName.length <= maxLength) {
return fileName || 'Unknown File';
}
@@ -258,76 +273,106 @@ function formatDisplayFileName(fileName, maxLength = 15) {
function generateFileGridHTML(asset) {
let html = '';
-
+
// Handle multiple photos
if (asset.photoPaths && Array.isArray(asset.photoPaths) && asset.photoPaths.length > 0) {
+ html += ``;
asset.photoPaths.forEach((photoPath, index) => {
const photoInfo = asset.photoInfo?.[index] || {};
const fileName = photoInfo.originalName || photoPath.split('/').pop();
+ const integrationClass = photoInfo.integrationId ? ` ${photoInfo.integrationId}-document` : '';
+ const integrationBadge = photoInfo.integrationId ? getIntegrationBadge(photoInfo.integrationId) : '';
+
+ // Use preview URL for external images if available
+ let displayPath = formatFilePath(photoPath);
+ if (photoInfo.integrationId && photoInfo.previewUrl) {
+ displayPath = photoInfo.previewUrl;
+ }
+
html += `
-
+
`;
});
+ html += `
`;
} else if (asset.photoPath) {
+ html += ``;
// Backward compatibility for single photo
const photoInfo = asset.photoInfo?.[0] || {};
const fileName = photoInfo.originalName || asset.photoPath.split('/').pop();
+ const integrationClass = photoInfo.integrationId ? ` ${photoInfo.integrationId}-document` : '';
+ const integrationBadge = photoInfo.integrationId ? getIntegrationBadge(photoInfo.integrationId) : '';
html += `
-
+
`;
+ html += `
`;
}
// Handle multiple receipts
if (asset.receiptPaths && Array.isArray(asset.receiptPaths) && asset.receiptPaths.length > 0) {
+ html += ``;
asset.receiptPaths.forEach((receiptPath, index) => {
const receiptInfo = asset.receiptInfo?.[index] || {};
const fileName = receiptInfo.originalName || receiptPath.split('/').pop();
+ const integrationClass = receiptInfo.integrationId ? ` ${receiptInfo.integrationId}-document` : '';
+ const integrationBadge = receiptInfo.integrationId ? getIntegrationBadge(receiptInfo.integrationId) : '';
html += `
-
+
`;
});
+ html += `
`;
} else if (asset.receiptPath) {
+ html += ``;
// Backward compatibility for single receipt
const receiptInfo = asset.receiptInfo?.[0] || {};
const fileName = receiptInfo.originalName || asset.receiptPath.split('/').pop();
+ const integrationClass = receiptInfo.integrationId ? ` ${receiptInfo.integrationId}-document` : '';
+ const integrationBadge = receiptInfo.integrationId ? getIntegrationBadge(receiptInfo.integrationId) : '';
html += `
-
+
`;
+ html += `
`;
}
// Handle multiple manuals
if (asset.manualPaths && Array.isArray(asset.manualPaths) && asset.manualPaths.length > 0) {
+ html += ``;
asset.manualPaths.forEach((manualPath, index) => {
const manualInfo = asset.manualInfo?.[index] || {};
const fileName = manualInfo.originalName || manualPath.split('/').pop();
+ const integrationClass = manualInfo.integrationId ? ` ${manualInfo.integrationId}-document` : '';
+ const integrationBadge = manualInfo.integrationId ? getIntegrationBadge(manualInfo.integrationId) : '';
html += `
-
+
`;
});
+ html += `
`;
} else if (asset.manualPath) {
// Backward compatibility for single manual
const manualInfo = asset.manualInfo?.[0] || {};
const fileName = manualInfo.originalName || asset.manualPath.split('/').pop();
+ const integrationClass = manualInfo.integrationId ? ` ${manualInfo.integrationId}-document` : '';
+ const integrationBadge = manualInfo.integrationId ? getIntegrationBadge(manualInfo.integrationId) : '';
+ html += ``;
html += `
-
+ ${integrationBadge}
+
`;
+ html += `
`;
}
-
+
return html || '';
}
@@ -465,211 +517,82 @@ function renderAssetDetails(assetId, isSubAsset = false) {
${isSub ? `` : ''}
-
-
-
-
+
+
+
+
${generateAssetInfoHTML(asset)}
${maintenanceScheduleHtml}
- ${generateMaintenanceEventsHTML(asset.maintenanceEvents)}
-
- ${(asset.description || asset.notes) ? `
-
- Description:
-
- ` : ''}
- ${asset.tags && asset.tags.length > 0 ? `
- ${asset.description || asset.notes}
-
-
` : ''}
- Tags
-
-
-
+ ${generateFileGridHTML(asset)}
+ ${asset.maintenanceEvents && asset.maintenanceEvents.length > 0 ? generateMaintenanceEventsHTML(asset.maintenanceEvents) : ''}
`;
- // Add event listeners
- if (isSub) {
- const backBtn = assetDetails.querySelector('.back-to-parent-btn');
- if (backBtn) {
- backBtn.addEventListener('click', () => {
- // If sub-sub-asset, go to parent sub-asset; else go to main asset
- if (asset.parentSubId) {
- renderAssetDetails(asset.parentSubId, true);
- } else {
- renderAssetDetails(asset.parentId);
- }
- });
- }
- }
-
+
+ // Set up event listeners for asset actions
const copyLinkBtn = assetDetails.querySelector('.copy-link-btn');
+ const editBtn = assetDetails.querySelector('.edit-asset-btn');
+ const duplicateBtn = assetDetails.querySelector('.duplicate-asset-btn');
+ const deleteBtn = assetDetails.querySelector('.delete-asset-btn');
+ const backBtn = assetDetails.querySelector('.back-to-parent-btn');
+
if (copyLinkBtn) {
copyLinkBtn.addEventListener('click', () => {
- // Generate the same URL format used in notifications
- const baseUrl = window.location.origin + window.location.pathname;
- let assetUrl;
-
- if (isSub) {
- // For sub-assets: baseUrl?ass=parentId&sub=subAssetId
- const parentId = asset.parentId || copyLinkBtn.dataset.parentId;
- assetUrl = `${baseUrl}?ass=${parentId}&sub=${asset.id}`;
- } else {
- // For main assets: baseUrl?ass=assetId
- assetUrl = `${baseUrl}?ass=${asset.id}`;
- }
-
- // Copy to clipboard
- navigator.clipboard.writeText(assetUrl).then(() => {
- // Show success toast using global toaster
- if (globalThis.toaster) {
- globalThis.toaster.show('Asset link copied to clipboard!', 'success', false, 2000);
- } else {
- // Fallback alert if toaster is not available
- alert('Asset link copied to clipboard!');
- }
- }).catch(err => {
- console.error('Failed to copy link to clipboard:', err);
- // Show error toast using global error handler
- if (globalThis.logError) {
- globalThis.logError('Failed to copy link to clipboard', err, false, 3000);
- } else {
- // Fallback alert if error handler is not available
- alert('Failed to copy link to clipboard. Please try again.');
- }
+ const url = new URL(window.location);
+ url.searchParams.set('asset', asset.id);
+ if (isSub) url.searchParams.set('sub', 'true');
+ navigator.clipboard.writeText(url.toString()).then(() => {
+ globalThis.toaster?.show('Link copied to clipboard', 'success');
+ }).catch(() => {
+ globalThis.toaster?.show('Failed to copy link', 'error');
});
});
}
-
- const editBtn = assetDetails.querySelector('.edit-asset-btn');
+
if (editBtn) {
editBtn.addEventListener('click', () => {
- if (isSub) openSubAssetModal(asset);
- else openAssetModal(asset);
+ if (isSub) {
+ openSubAssetModal(asset);
+ } else {
+ openAssetModal(asset);
+ }
});
}
-
- const duplicateBtn = assetDetails.querySelector('.duplicate-asset-btn');
- if (duplicateBtn && openDuplicateModal) {
+
+ if (duplicateBtn) {
duplicateBtn.addEventListener('click', () => {
- const type = duplicateBtn.dataset.type;
- const assetId = duplicateBtn.dataset.id;
- openDuplicateModal(type, assetId);
+ const type = isSub ? 'subAsset' : 'asset';
+ openDuplicateModal(type, asset.id);
});
}
-
- const deleteBtn = assetDetails.querySelector('.delete-asset-btn');
+
if (deleteBtn) {
- deleteBtn.addEventListener('click', async () => {
- if (isSub) await deleteSubAsset(asset.id);
- else await deleteAsset(asset.id);
+ deleteBtn.addEventListener('click', () => {
+ if (isSub) {
+ deleteSubAsset(asset.id);
+ } else {
+ deleteAsset(asset.id);
+ }
});
}
-
- // Add click event listeners to tags in the details view
- const tagElements = assetDetails.querySelectorAll('.tag[data-tag]');
- tagElements.forEach(tagElement => {
- tagElement.addEventListener('click', (e) => {
- e.stopPropagation();
- const tagName = tagElement.dataset.tag;
-
- // Set the search input value to the tag name
- if (searchInput) {
- searchInput.value = tagName;
-
- // Show the clear search button
- const clearSearchBtn = document.getElementById('clearSearchBtn');
- if (clearSearchBtn) {
- clearSearchBtn.style.display = 'flex';
- }
-
- // Trigger the search by calling renderAssetList with the tag
- if (renderAssetList) {
- renderAssetList(tagName);
- }
-
- // Focus the search input
- searchInput.focus();
- }
+
+ if (backBtn && isSub) {
+ backBtn.addEventListener('click', () => {
+ // Navigate back to parent asset
+ renderAssetDetails(asset.parentId, false);
});
- });
-
- // Only render sub-assets if viewing a main asset
+ }
+
+ // Show sub-assets container if this is a main asset
if (!isSub) {
renderSubAssets(assetId);
- } else {
- subAssetContainer.classList.add('hidden');
- // If this is a first-level sub-asset (not a sub-sub-asset), show sub-sub-assets
- if (!asset.parentSubId) {
- // Get fresh list of sub-sub-assets after potential changes
- const subSubAssets = subAssets.filter(sa => sa.parentSubId === asset.id);
- // --- Modern legend/fieldset for sub-sub-assets ---
- const fieldset = document.createElement('fieldset');
- fieldset.className = 'dashboard-legend';
-
- const legend = document.createElement('legend');
- legend.className = 'dashboard-legend-title';
- legend.textContent = 'Components';
- fieldset.appendChild(legend);
-
- const subAssetHeader = document.createElement('div');
- subAssetHeader.className = 'sub-asset-header';
- subAssetHeader.style.marginTop = '0.5rem';
-
- const addSubAssetBtn = document.createElement('button');
- addSubAssetBtn.className = 'add-sub-asset-btn';
- addSubAssetBtn.textContent = '+ Add Sub-Component';
- addSubAssetBtn.onclick = () => openSubAssetModal(null, asset.parentId, asset.id);
- subAssetHeader.appendChild(addSubAssetBtn);
- fieldset.appendChild(subAssetHeader);
-
- const subAssetList = document.createElement('div');
- subAssetList.className = 'sub-asset-list';
-
- if (subSubAssets.length === 0) {
- const emptyState = document.createElement('div');
- emptyState.className = 'empty-state';
- emptyState.innerHTML = '
- ${generateFileGridHTML(asset)}
-
No components found. Add your first component.
'; - subAssetList.appendChild(emptyState); - } else { - // Create DOM elements properly to maintain event listeners - subSubAssets.forEach(child => { - const childElement = createSubAssetElement(child); - subAssetList.appendChild(childElement); - }); - } - - fieldset.appendChild(subAssetList); - assetDetails.appendChild(fieldset); - } } - handleSidebarNav(); } -// Export the module functions +// Export functions for use by other modules export { initRenderer, updateState, diff --git a/src/services/render/index.js b/src/services/render/index.js index fec9bf7..b22c411 100644 --- a/src/services/render/index.js +++ b/src/services/render/index.js @@ -45,7 +45,8 @@ import { createPhotoPreview, createDocumentPreview, setupFilePreview, - setupExistingFilePreview + setupExistingFilePreview, + initPreviewRenderer } from './previewRenderer.js'; // Export all render service functions @@ -70,6 +71,7 @@ export { createDocumentPreview, setupFilePreview, setupExistingFilePreview, + initPreviewRenderer, // Sync helper function syncState diff --git a/src/services/render/previewRenderer.js b/src/services/render/previewRenderer.js index 1b037df..0c0f445 100644 --- a/src/services/render/previewRenderer.js +++ b/src/services/render/previewRenderer.js @@ -3,6 +3,9 @@ * Provides centralized functions for rendering file previews consistently across the application */ +// IntegrationsManager reference - will be injected +let integrationsManager; + /** * Create a photo preview element * @@ -10,7 +13,7 @@ * @param {Function} onDeleteCallback - Callback function when delete button is clicked * @return {HTMLElement} The created preview element */ -export function createPhotoPreview(filePath, onDeleteCallback, fileName = null, fileSize = null) { +export function createPhotoPreview(filePath, onDeleteCallback, fileName = null, fileSize = null, integrationId = null) { const previewItem = document.createElement('div'); previewItem.className = 'file-preview-item'; @@ -19,12 +22,16 @@ export function createPhotoPreview(filePath, onDeleteCallback, fileName = null, fileName = filePath.split('/').pop(); } + const integrationBadge = integrationId ? + getIntegrationBadge(integrationId) : ''; + previewItem.innerHTML = `